1 files changed, 66 insertions, 0 deletions
diff --git a/web/style.css b/web/style.css
index d3b01d0..b6f0484 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1989,3 +1989,69 @@ 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;
+}
+
+/* Budget headroom chips */
+.budget-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+.budget-chip {
+  font-size: 0.72rem;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+.budget-chip--low {
+  border-color: var(--state-budget-exceeded);
+  color: var(--state-budget-exceeded);
+}