From 413bf54dafb9b029dc3edac29ff0e032a4f81bc1 Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Sat, 11 Jul 2026 13:22:27 +0200
Subject: [PATCH] =?UTF-8?q?feat(tasks):=20task=20board=20UI=20=E2=80=94=20?=
 =?UTF-8?q?chat=20window=20becomes=20Tasks=20+=20card=20grid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 internal/httpapi/sse.go       |  12 +-
 web/src/App.svelte            |  31 +++--
 web/src/lib/api.ts            |   8 ++
 web/src/pages/Sessions.svelte | 172 ---------------------------
 web/src/pages/Tasks.svelte    | 213 ++++++++++++++++++++++++++++++++++
 5 files changed, 251 insertions(+), 185 deletions(-)
 delete mode 100644 web/src/pages/Sessions.svelte
 create mode 100644 web/src/pages/Tasks.svelte

diff --git a/internal/httpapi/sse.go b/internal/httpapi/sse.go
index 4a5a398..9cd928f 100644
--- a/internal/httpapi/sse.go
+++ b/internal/httpapi/sse.go
@@ -209,12 +209,22 @@ func sqlcEventToGen(ev sqlcgen.Event) gen.Event {
 // writeSSE writes a single Event as an SSE message. Returns false if the
 // write failed (client disconnected). flusher may be nil (io.Pipe path,
 // which has no separate flush step).
+//
+// We deliberately DO NOT set the SSE `event:` name field, even though every
+// event has a type. A named SSE event is only delivered to a matching
+// addEventListener(type) handler, NOT to EventSource.onmessage — and the whole
+// frontend (stores/events.ts and every page that reads liveEvents) consumes the
+// stream via onmessage, reading the type from the JSON payload's `type` field.
+// Emitting `event: <type>` silently routed every event away from onmessage, so
+// the live stream delivered nothing to the UI. Leaving the name off sends all
+// events to onmessage; the type is already in `data`, and new event types need
+// zero client changes. `id:` is kept for Last-Event-ID reconnection.
 func writeSSE(w ioWriter, flusher http.Flusher, ev sqlcgen.Event) bool {
 	data, err := json.Marshal(sqlcEventToGen(ev))
 	if err != nil {
 		return true // skip un-serializable events
 	}
-	_, err = fmt.Fprintf(w, "id: %d\nevent: %s\ndata: %s\n\n", ev.ID, ev.Type, data)
+	_, err = fmt.Fprintf(w, "id: %d\ndata: %s\n\n", ev.ID, data)
 	if err != nil {
 		return false
 	}
diff --git a/web/src/App.svelte b/web/src/App.svelte
index f3cceeb..e7378c1 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Chat from './pages/Chat.svelte'
-  import Sessions from './pages/Sessions.svelte'
+  import Tasks from './pages/Tasks.svelte'
   import Overview from './pages/Overview.svelte'
   import Entities from './pages/Entities.svelte'
   import Events from './pages/Events.svelte'
@@ -23,6 +23,7 @@
   import { Separator } from '$lib/components/ui/separator'
   import { Toaster } from '$lib/components/ui/sonner'
   import PlusIcon from '@lucide/svelte/icons/plus'
+  import ListTodoIcon from '@lucide/svelte/icons/list-todo'
   import MessageSquareIcon from '@lucide/svelte/icons/message-square'
   import LayoutDashboardIcon from '@lucide/svelte/icons/layout-dashboard'
   import DatabaseIcon from '@lucide/svelte/icons/database'
@@ -36,7 +37,7 @@
   import ScrollTextIcon from '@lucide/svelte/icons/scroll-text'
   import TrendingUpIcon from '@lucide/svelte/icons/trending-up'
 
-  let page = $state('chat')
+  let page = $state('tasks')
   let routeParam = $state('')
   let drawerOpen = $state(false)
 
@@ -45,9 +46,9 @@
 
   onMount(() => {
     function sync() {
-      const path = location.hash.slice(2) || 'chat'
+      const path = location.hash.slice(2) || 'tasks'
       const [head, ...rest] = path.split('/')
-      page = head || 'chat'
+      page = head || 'tasks'
       routeParam = rest.join('/')
     }
     sync()
@@ -106,12 +107,12 @@
           <Sidebar.MenuButton
             class="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
             onclick={() => { newChat(); navigate('chat') }}
-            tooltipContent="New chat"
+            tooltipContent="New task"
           >
             {#snippet child({ props })}
               <button {...props}>
                 <PlusIcon />
-                <span>New chat</span>
+                <span>New task</span>
               </button>
             {/snippet}
           </Sidebar.MenuButton>
@@ -123,11 +124,11 @@
       <Sidebar.Group>
         <Sidebar.Menu>
           <Sidebar.MenuItem>
-            <Sidebar.MenuButton isActive={page === 'chat'} onclick={() => navigate('chat')} tooltipContent="Chat">
+            <Sidebar.MenuButton isActive={page === 'tasks' || page === 'chat'} onclick={() => navigate('tasks')} tooltipContent="Tasks">
               {#snippet child({ props })}
                 <button {...props}>
-                  <MessageSquareIcon />
-                  <span>Chat</span>
+                  <ListTodoIcon />
+                  <span>Tasks</span>
                 </button>
               {/snippet}
             </Sidebar.MenuButton>
@@ -167,7 +168,13 @@
     <header class="flex h-(--header-height) shrink-0 items-center gap-1 border-b px-4 lg:gap-2 lg:px-6">
       <Sidebar.Trigger class="-ms-1" />
       <Separator orientation="vertical" class="mx-2 data-[orientation=vertical]:h-4" />
-      <span class="text-base font-medium capitalize">{page === 'entity' ? routeParam : page}</span>
+      {#if page === 'chat'}
+        <button type="button" class="text-sm text-muted-foreground hover:text-foreground" onclick={() => navigate('tasks')}>Tasks</button>
+        <span class="text-muted-foreground">/</span>
+        <span class="text-base font-medium">Conversation</span>
+      {:else}
+        <span class="text-base font-medium capitalize">{page === 'entity' ? routeParam : page}</span>
+      {/if}
       <div class="ms-auto flex items-center gap-2.5">
       {#if $summary}
         <div class="hidden items-center gap-2.5 text-xs text-muted-foreground sm:flex">
@@ -195,6 +202,8 @@
     <main class="min-h-0 flex-1 overflow-hidden">
       {#if page === 'overview'}
         <Overview />
+      {:else if page === 'tasks'}
+        <Tasks />
       {:else if page === 'entities'}
         <Entities />
       {:else if page === 'graph'}
@@ -207,8 +216,6 @@
         <Signals />
       {:else if page === 'events'}
         <Events />
-      {:else if page === 'sessions'}
-        <Sessions />
       {:else if page === 'agent'}
         <Agent />
       {:else if page === 'knowledge'}
diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
index 26ed289..92f8c43 100644
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -1,10 +1,18 @@
 const BASE = '/agent'
 const API = '/api/v1'
 
+// A session IS a task: a goal-structured unit of work with a lifecycle status
+// and an outcome. goal/outcome/summary/entity_id are empty until the agent sets
+// them (see the task-board plan). status defaults to 'active'.
 export interface Session {
   id: string
   title: string
   actor: string
+  goal?: string
+  status?: string // active | planning | executing | awaiting_input | done | failed | abandoned
+  outcome?: string // success | failure | partial
+  summary?: string
+  entity_id?: string
   created_at: string
   last_active_at: string
 }
diff --git a/web/src/pages/Sessions.svelte b/web/src/pages/Sessions.svelte
deleted file mode 100644
index 9628019..0000000
--- a/web/src/pages/Sessions.svelte
+++ /dev/null
@@ -1,172 +0,0 @@
-<script lang="ts">
-  import { sessions, loadSessions, loadSessionMessages, deleteSession, currentSession } from '$lib/stores/chat'
-  import { onMount } from 'svelte'
-  import Trash2Icon from '@lucide/svelte/icons/trash-2'
-
-  onMount(() => {
-    loadSessions()
-  })
-
-  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="sessions-page">
-  <h2>Sessions</h2>
-  <div class="session-list">
-    {#each $sessions as session (session.id)}
-      <div
-        class="session-card group"
-        class:active={$currentSession === session.id}
-      >
-        <button
-          class="session-content"
-          onclick={() => {
-            loadSessionMessages(session.id)
-            location.hash = '#/chat'
-          }}
-        >
-          <div class="session-title">{session.title || 'Untitled'}</div>
-          <div class="session-meta">
-            {new Date(session.last_active_at).toLocaleString()}
-          </div>
-        </button>
-        <button
-          class="session-delete"
-          onclick={(e) => handleDelete(e, session.id)}
-          title={confirmDelete === session.id ? 'Click again to confirm delete' : 'Delete session'}
-          aria-label="Delete session"
-        >
-          {#if confirmDelete === session.id}
-            <span class="confirm-text">Delete?</span>
-          {:else}
-            <Trash2Icon class="icon" />
-          {/if}
-        </button>
-      </div>
-    {:else}
-      <div class="empty">No sessions yet. Start chatting with Nomos.</div>
-    {/each}
-  </div>
-</div>
-
-<style>
-  .sessions-page {
-    max-width: 720px;
-    margin: 0 auto;
-    padding: 2rem 1rem;
-  }
-
-  h2 {
-    font-size: 1.125rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    color: var(--text);
-  }
-
-  .session-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .session-card {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    color: var(--text);
-    font-family: inherit;
-    font-size: 0.875rem;
-    transition: border-color 0.15s;
-  }
-
-  .session-card:hover {
-    border-color: var(--accent-blue);
-  }
-
-  .session-card.active {
-    border-color: var(--accent-blue);
-    background: var(--bg-hover);
-  }
-
-  .session-content {
-    flex: 1;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem 1rem;
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: inherit;
-    font-family: inherit;
-    font-size: inherit;
-    text-align: left;
-  }
-
-  .session-delete {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    margin-right: 4px;
-    padding: 0;
-    background: none;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    color: var(--text-muted);
-    opacity: 0;
-    transition: opacity 0.15s, background 0.15s;
-  }
-
-  .group:hover .session-delete {
-    opacity: 1;
-  }
-
-  .session-delete:hover {
-    background: var(--destructive-bg-subtle, rgba(239, 68, 68, 0.1));
-    color: var(--destructive, #ef4444);
-  }
-
-  .confirm-text {
-    font-size: 0.65rem;
-    font-weight: 700;
-    color: var(--destructive, #ef4444);
-  }
-
-  .icon {
-    width: 16px;
-    height: 16px;
-  }
-
-  .session-title {
-    font-weight: 500;
-  }
-
-  .session-meta {
-    font-size: 0.75rem;
-    color: var(--text-muted);
-  }
-
-  .empty {
-    color: var(--text-muted);
-    font-size: 0.875rem;
-    padding: 2rem 0;
-    text-align: center;
-  }
-</style>
diff --git a/web/src/pages/Tasks.svelte b/web/src/pages/Tasks.svelte
new file mode 100644
index 0000000..397bcf0
--- /dev/null
+++ b/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>