feat(api,web): event-stream timeline (Phase 3)

Adds GET /api/tasks/{id}/events (seq-ordered, ?since_seq for incremental
polling) as the timeline data source, and a per-task Timeline section in the
web UI that fetches and renders the observability event stream. New pure,
unit-tested JS helpers: formatEventText, renderEventTimeline, fetchTaskEvents.

The timeline load is async and guarded on a global fetch so the synchronous
renderTaskPanel path (and its DOM-mock unit tests) is unaffected. Verified via
Go endpoint tests and node --test (272 JS tests pass). Note: the live in-browser
panel render was not exercised in this environment — only unit-level coverage.

https://claude.ai/code/session_01SESwn7kQ7oP62trWw6pc39

1 files changed, 45 insertions, 0 deletions

diff --git a/web/style.css b/web/style.css
index d3b01d0..f4a9d91 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1989,3 +1989,48 @@ dialog label select:focus {
   opacity: 0.85;
   padding: 0.1rem 0;
 }
+
+/* Event timeline (task observability stream) */
+.event-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.event-timeline__item {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 6px 10px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--border);
+  border-radius: 6px;
+  font-size: 0.85rem;
+}
+.event-timeline__item--state_change { border-left-color: var(--state-queued); }
+.event-timeline__item--clarification_request { border-left-color: var(--state-blocked); }
+.event-timeline__item--clarification_answer { border-left-color: var(--state-blocked); }
+.event-timeline__item--summary { border-left-color: var(--state-completed); }
+.event-timeline__item--subtask_spawned { border-left-color: var(--accent); }
+.event-timeline__item--execution_started,
+.event-timeline__item--execution_ended { border-left-color: var(--state-running); }
+.event-timeline__actor {
+  flex: 0 0 auto;
+  text-transform: uppercase;
+  font-size: 0.65rem;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  min-width: 56px;
+}
+.event-timeline__text {
+  color: var(--text);
+  word-break: break-word;
+}
+.event-timeline__empty {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  padding: 6px 10px;
+}