From 84cf9fa404a3c0096d235007e5e40c2b8eae251d Mon Sep 17 00:00:00 2001
From: dimakis <dimitri.saridakis@gmail.com>
Date: Mon, 4 May 2026 00:02:46 +0100
Subject: [PATCH 1/2] feat(ui): cc-deck-inspired attention feed, ATB redesign,
 and Telos sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Homepage "What's Next" attention feed that aggregates Telos focus items,
ATB blocked/review tasks, and waiting sessions into a tiered feed —
always visible, not just when sessions are active.

ATB redesign: 2-line task cards with state-colored left borders, T1
background tint for review/blocked/failed, attention-tier sorting,
done-task fade logic (5min→30min opacity decay), sort toggle.

Telos redesign: 3-line card layout (summary-first), urgency-as-border-
color (red/amber/purple intensity), section grouping (Focus/Active/
Seen/Done with collapsible headers), status-colored icons.

Telos: 76732123c7c5, ae3ead922dc8

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/AttentionFeed.tsx     |  96 ++++++++
 frontend/src/components/TaskNode.tsx          |  41 +++-
 frontend/src/components/TodoCard.tsx          | 100 +++++---
 .../hooks/__tests__/useAttentionFeed.test.ts  | 196 ++++++++++++++++
 frontend/src/hooks/useAttentionFeed.ts        | 216 ++++++++++++++++++
 frontend/src/pages/SessionList.tsx            |   3 +
 frontend/src/pages/TaskBoard.tsx              |  47 +++-
 frontend/src/pages/TodoView.tsx               | 130 +++++++++--
 frontend/src/styles/global.css                | 195 ++++++++++++++--
 9 files changed, 949 insertions(+), 75 deletions(-)
 create mode 100644 frontend/src/components/AttentionFeed.tsx
 create mode 100644 frontend/src/hooks/__tests__/useAttentionFeed.test.ts
 create mode 100644 frontend/src/hooks/useAttentionFeed.ts

diff --git a/frontend/src/components/AttentionFeed.tsx b/frontend/src/components/AttentionFeed.tsx
new file mode 100644
index 00000000..aed65ea0
--- /dev/null
+++ b/frontend/src/components/AttentionFeed.tsx
@@ -0,0 +1,96 @@
+import { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAttentionFeed, type AttentionItem } from '../hooks/useAttentionFeed';
+import { selectionChanged } from '../lib/haptics';
+
+// ─── Source labels ─────────────────────────────────────────────────────────
+
+const SOURCE_LABEL: Record<string, string> = {
+  telos: 'telos',
+  atb: 'task',
+  session: 'session',
+};
+
+// ─── Card ──────────────────────────────────────────────────────────────────
+
+function AttentionCard({
+  item,
+  onTap,
+}: {
+  item: AttentionItem;
+  onTap: (item: AttentionItem) => void;
+}) {
+  return (
+    <button
+      className="attention-card"
+      onClick={() => onTap(item)}
+      style={{ '--card-accent': item.accentColor } as React.CSSProperties}
+    >
+      <span className="attention-card-icon" style={{ color: item.accentColor }}>
+        {item.icon}
+      </span>
+      <div className="attention-card-content">
+        <div className="attention-card-title">{item.title}</div>
+        <div className="attention-card-meta">
+          <span className="attention-card-source">{SOURCE_LABEL[item.source]}</span>
+          {' \u00B7 '}
+          {item.meta}
+        </div>
+      </div>
+    </button>
+  );
+}
+
+// ─── Main component ────────────────────────────────────────────────────────
+
+export function AttentionFeed() {
+  const { items, tier1Count, loading } = useAttentionFeed();
+  const navigate = useNavigate();
+
+  const hasUrgent = tier1Count > 0;
+  const [manualOpen, setManualOpen] = useState<boolean | null>(null);
+  const isOpen = manualOpen ?? true; // always open by default
+
+  const toggleOpen = useCallback(() => {
+    setManualOpen((prev) => !(prev ?? true));
+  }, []);
+
+  const handleTap = useCallback(
+    (item: AttentionItem) => {
+      selectionChanged();
+      navigate(item.navigateTo);
+    },
+    [navigate],
+  );
+
+  // Show section even when empty — gives "all clear" signal
+  const summaryParts: string[] = [];
+  if (tier1Count > 0) summaryParts.push(`${tier1Count} needs you`);
+  const t2Count = items.filter((i) => i.tier === 2).length;
+  if (t2Count > 0) summaryParts.push(`${t2Count} in focus`);
+
+  return (
+    <div className="attention-section">
+      <button className="overview-header" onClick={toggleOpen}>
+        <span className="overview-header-title">What&apos;s Next</span>
+        <span className="overview-header-summary">
+          {loading ? 'loading...' : summaryParts.join(' \u00B7 ') || 'all clear'}
+        </span>
+        {hasUrgent && <span className="overview-badge">{tier1Count}</span>}
+        <span className={`overview-chevron${isOpen ? ' overview-chevron--open' : ''}`}>
+          &rsaquo;
+        </span>
+      </button>
+      {isOpen && (
+        <div className="attention-cards">
+          {!loading && items.length === 0 && (
+            <div className="attention-empty">Nothing needs your attention right now.</div>
+          )}
+          {items.map((item) => (
+            <AttentionCard key={item.id} item={item} onTap={handleTap} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/TaskNode.tsx b/frontend/src/components/TaskNode.tsx
index d4e62857..845712bf 100644
--- a/frontend/src/components/TaskNode.tsx
+++ b/frontend/src/components/TaskNode.tsx
@@ -38,6 +38,45 @@ const NEXT_STATUS: Record<TaskStatus, TaskStatus> = {
   failed: 'pending',
 };
 
+const T1_STATUSES: TaskStatus[] = ['pending_review', 'blocked', 'failed'];
+
+function statusMeta(task: Task): string {
+  switch (task.status) {
+    case 'active':
+      return task.sessionId ? `session ${task.sessionId.slice(-6)}` : 'in progress';
+    case 'pending_review':
+      return 'awaiting approval';
+    case 'blocked':
+      return task.annotations?.[0] || 'blocked';
+    case 'failed':
+      return `failed${task.retryCount > 0 ? ` \u00B7 retry ${task.retryCount}/${task.maxRetries}` : ''}`;
+    case 'done':
+      return task.completedAt ? formatElapsed(Date.now() - task.completedAt) : 'done';
+    default:
+      return task.status;
+  }
+}
+
+function formatElapsed(ms: number): string {
+  const sec = Math.floor(ms / 1000);
+  if (sec < 60) return 'just now';
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}min ago`;
+  const hr = Math.floor(min / 60);
+  return `${hr}h ago`;
+}
+
+/** Opacity for done tasks: fade after 5min, near-invisible after 30min */
+function doneOpacity(task: Task): number {
+  if (task.status !== 'done' || !task.completedAt) return 1;
+  const elapsed = Date.now() - task.completedAt;
+  const FIVE_MIN = 5 * 60 * 1000;
+  const THIRTY_MIN = 30 * 60 * 1000;
+  if (elapsed < FIVE_MIN) return 1;
+  if (elapsed > THIRTY_MIN) return 0.3;
+  return 1 - 0.7 * ((elapsed - FIVE_MIN) / (THIRTY_MIN - FIVE_MIN));
+}
+
 interface TaskNodeProps {
   task: Task;
   depth: number;
@@ -150,7 +189,7 @@ export function TaskNode({
             {'\u21BB'}
             {task.retryCount}
           </span>
-        )}
+        </div>
         <div className="task-node-actions">
           {task.status === 'pending_review' && onApprove && (
             <button
diff --git a/frontend/src/components/TodoCard.tsx b/frontend/src/components/TodoCard.tsx
index 348fd3e3..0e972b8c 100644
--- a/frontend/src/components/TodoCard.tsx
+++ b/frontend/src/components/TodoCard.tsx
@@ -14,11 +14,38 @@ interface TodoCardProps {
   onStartSession: (item: TodoItem) => void;
 }
 
-function urgencyBar(urgency: number): string {
-  if (urgency >= 0.8) return '\u2593\u2593\u2593';
-  if (urgency >= 0.5) return '\u2593\u2593\u2591';
-  if (urgency >= 0.2) return '\u2593\u2591\u2591';
-  return '\u2591\u2591\u2591';
+// ─── Urgency → color border ────────────────────────────────────────────────
+
+function urgencyColor(urgency: number): string {
+  if (urgency >= 0.8) return '#ff6d6d';
+  if (urgency >= 0.5) return '#fbbf24';
+  if (urgency >= 0.2) return '#b48cff';
+  return 'transparent';
+}
+
+function urgencyWidth(urgency: number): number {
+  if (urgency >= 0.8) return 4;
+  if (urgency >= 0.5) return 3;
+  if (urgency >= 0.2) return 2;
+  return 0;
+}
+
+// ─── Status visuals ────────────────────────────────────────────────────────
+
+function getStatusIcon(item: TodoItem): string {
+  if (item.starred) return '\u2605'; // ★
+  if (item.status === 'active') return '\u25CF'; // ●
+  if (item.status === 'acknowledged') return '\u25D0'; // ◐
+  if (item.status === 'completed') return '\u2713'; // ✓
+  return '\u25CB'; // ○ (snoozed)
+}
+
+function getStatusColor(item: TodoItem): string {
+  if (item.starred) return '#fbbf24';
+  if (item.status === 'active') return '#b48cff';
+  if (item.status === 'acknowledged') return '#60a5fa';
+  if (item.status === 'completed') return '#4ade80';
+  return '#888';
 }
 
 export function TodoCard({
@@ -102,9 +129,12 @@ export function TodoCard({
 
   const source = item.sources[0];
   const ageLabel = item.ageDays === 0 ? 'new' : `${item.ageDays}d`;
-  const statusIcon = item.status === 'active' ? '\u25CF' : '\u25D0';
   const children = item.children ?? [];
   const hasChildren = children.length > 0;
+  const icon = getStatusIcon(item);
+  const color = getStatusColor(item);
+  const borderClr = urgencyColor(item.urgency);
+  const borderW = urgencyWidth(item.urgency);
 
   return (
     <div className={`todo-card-tree-node ${depth > 0 ? 'todo-card-tree-node--child' : ''}`}>
@@ -119,8 +149,16 @@ export function TodoCard({
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
           onTouchEnd={handleTouchEnd}
+          style={{
+            borderLeftColor: borderClr,
+            borderLeftWidth: borderW > 0 ? `${borderW}px` : undefined,
+            borderLeftStyle: borderW > 0 ? 'solid' : undefined,
+          }}
         >
-          <div className="todo-card-header">
+          {/* Line 1: icon + summary + star */}
+          <div className="todo-card-line1">
+            <span className="todo-card-icon" style={{ color }}>{icon}</span>
+            <span className="todo-card-summary">{item.summary}</span>
             {hasChildren && (
               <button
                 className="todo-card-expand"
@@ -132,19 +170,6 @@ export function TodoCard({
                 {expanded ? '\u25BC' : '\u25B6'}
               </button>
             )}
-            <span className="todo-card-status">{statusIcon}</span>
-            <span className="todo-card-urgency">{urgencyBar(item.urgency)}</span>
-            {source ? (
-              <span className="todo-card-source">{sourceIcon(source.type)}</span>
-            ) : (
-              <span className="todo-card-source todo-card-source--manual">+</span>
-            )}
-            <span className="todo-card-age">{ageLabel}</span>
-            {hasChildren && (
-              <span className="todo-card-progress">
-                {item.completedChildCount ?? 0}/{item.childCount ?? children.length}
-              </span>
-            )}
             <button
               className="todo-card-star"
               onClick={(e) => {
@@ -152,16 +177,35 @@ export function TodoCard({
                 onStar(item.id);
               }}
             >
-              {item.starred ? '⭐' : '☆'}
+              {item.starred ? '\u2B50' : '\u2606'}
             </button>
           </div>
-          <div className="todo-card-summary">{item.summary}</div>
-          {source && (
-            <div className="todo-card-meta">
-              <span className="todo-card-author">{source.author}</span>
-            </div>
-          )}
-          <div className="todo-card-actions">
+
+          {/* Line 2: source + meta */}
+          <div className="todo-card-line2">
+            {source ? (
+              <span className="todo-card-source">{sourceIcon(source.type)}</span>
+            ) : (
+              <span className="todo-card-source todo-card-source--manual">+</span>
+            )}
+            {source?.author && (
+              <><span className="todo-card-author">{source.author}</span>{' \u00B7 '}</>
+            )}
+            <span className="todo-card-age">{ageLabel}</span>
+            {' \u00B7 '}
+            <span className="todo-card-profile">{item.profile}</span>
+            {hasChildren && (
+              <>
+                {' \u00B7 '}
+                <span className="todo-card-progress">
+                  {item.completedChildCount ?? 0}/{item.childCount ?? children.length}
+                </span>
+              </>
+            )}
+          </div>
+
+          {/* Line 3: actions */}
+          <div className="todo-card-line3">
             <button
               className="todo-card-add-child"
               onClick={(e) => {
diff --git a/frontend/src/hooks/__tests__/useAttentionFeed.test.ts b/frontend/src/hooks/__tests__/useAttentionFeed.test.ts
new file mode 100644
index 00000000..0a3521df
--- /dev/null
+++ b/frontend/src/hooks/__tests__/useAttentionFeed.test.ts
@@ -0,0 +1,196 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+
+// ─── Mocks ─────────────────────────────────────────────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const mockEventBusOn: any = vi.fn(() => vi.fn());
+
+vi.mock('../../lib/event-bus-singleton', () => ({
+  eventBus: {
+    on: (...args: unknown[]) => mockEventBusOn(...args),
+  },
+}));
+
+vi.mock('../../lib/api-fetch', () => ({
+  apiFetch: vi.fn(),
+}));
+
+const mockTasks = { tree: [], loopStatus: { state: 'idle' } };
+const mockLoadTasks = vi.fn();
+
+vi.mock('@mitzo/client/hooks', () => ({
+  useMitzoStore: (selector: (s: Record<string, unknown>) => unknown) =>
+    selector({ tasks: mockTasks, loadTasks: mockLoadTasks }),
+}));
+
+import { useAttentionFeed } from '../useAttentionFeed';
+import { apiFetch } from '../../lib/api-fetch';
+import type { TodoItem } from '../../types/todo';
+
+const mockApiFetch = vi.mocked(apiFetch);
+
+function makeTodo(overrides: Partial<TodoItem> = {}): TodoItem {
+  return {
+    id: 'todo-1',
+    summary: 'Test todo',
+    profile: 'work',
+    urgency: 0.5,
+    starred: false,
+    status: 'active',
+    ageDays: 3,
+    parentId: null,
+    children: [],
+    childCount: 0,
+    completedChildCount: 0,
+    sources: [],
+    contextHints: {
+      repos: [],
+      paths: [],
+      issues: [],
+      docIds: [],
+      people: [],
+      jiraKeys: [],
+      keywords: [],
+      taskHint: '',
+    },
+    ...overrides,
+  };
+}
+
+beforeEach(() => {
+  mockEventBusOn.mockClear();
+  mockLoadTasks.mockClear();
+  mockApiFetch.mockReset();
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('useAttentionFeed', () => {
+  it('loads todos from API on mount', async () => {
+    mockApiFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve({ items: [] }) } as Response);
+
+    renderHook(() => useAttentionFeed());
+
+    expect(mockApiFetch).toHaveBeenCalledWith('/api/todos');
+  });
+
+  it('loads tasks from store on mount', () => {
+    mockApiFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve({ items: [] }) } as Response);
+
+    renderHook(() => useAttentionFeed());
+
+    expect(mockLoadTasks).toHaveBeenCalled();
+  });
+
+  it('returns starred high-urgency todos as tier 1', async () => {
+    const items = [
+      makeTodo({ id: 't1', summary: 'Urgent starred', starred: true, urgency: 0.9 }),
+      makeTodo({ id: 't2', summary: 'Normal item', starred: false, urgency: 0.3 }),
+    ];
+    mockApiFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve({ items }) } as Response);
+
+    const { result } = renderHook(() => useAttentionFeed());
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.items[0].title).toBe('Urgent starred');
+    expect(result.current.items[0].tier).toBe(1);
+    expect(result.current.tier1Count).toBe(1);
+  });
+
+  it('returns starred low-urgency todos as tier 2', async () => {
+    const items = [
+      makeTodo({ id: 't1', summary: 'Starred low urgency', starred: true, urgency: 0.3 }),
+    ];
+    mockApiFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve({ items }) } as Response);
+
+    const { result } = renderHook(() => useAttentionFeed());
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.items[0].tier).toBe(2);
+  });
+
+  it('returns unstarred very-high-urgency todos as tier 2', async () => {
+    const items = [
+      makeTodo({ id: 't1', summary: 'Critical unstarred', starred: false, urgency: 0.9 }),
+    ];
+    mockApiFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve({ items }) } as Response);
+
+    const { result } = renderHook(() => useAttentionFeed());
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.items[0].tier).toBe(2);
+  });
+
+  it('sorts tier 1 items before tier 2', async () => {
+    const items = [
+      makeTodo({ id: 't1', summary: 'Starred low', starred: true, urgency: 0.3 }),
+      makeTodo({ id: 't2', summary: 'Starred high', starred: true, urgency: 0.8 }),
+    ];
+    mockApiFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve({ items }) } as Response);
+
+    const { result } = renderHook(() => useAttentionFeed());
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    expect(result.current.items[0].title).toBe('Starred high');
+    expect(result.current.items[0].tier).toBe(1);
+    expect(result.current.items[1].title).toBe('Starred low');
+    expect(result.current.items[1].tier).toBe(2);
+  });
+
+  it('caps output at 5 items', async () => {
+    const items = Array.from({ length: 10 }, (_, i) =>
+      makeTodo({ id: `t${i}`, summary: `Item ${i}`, starred: true, urgency: 0.9 }),
+    );
+    mockApiFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve({ items }) } as Response);
+
+    const { result } = renderHook(() => useAttentionFeed());
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    expect(result.current.items).toHaveLength(5);
+  });
+
+  it('subscribes to SSE events for live updates', () => {
+    mockApiFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve({ items: [] }) } as Response);
+
+    renderHook(() => useAttentionFeed());
+
+    const eventNames = mockEventBusOn.mock.calls.map((c: unknown[]) => c[0]);
+    expect(eventNames).toContain('todo_update');
+    expect(eventNames).toContain('task_state');
+    expect(eventNames).toContain('session_activity');
+  });
+
+  it('handles API failure gracefully', async () => {
+    mockApiFetch.mockRejectedValue(new Error('Network error'));
+
+    const { result } = renderHook(() => useAttentionFeed());
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    expect(result.current.items).toEqual([]);
+  });
+});
diff --git a/frontend/src/hooks/useAttentionFeed.ts b/frontend/src/hooks/useAttentionFeed.ts
new file mode 100644
index 00000000..84b174d3
--- /dev/null
+++ b/frontend/src/hooks/useAttentionFeed.ts
@@ -0,0 +1,216 @@
+import { useState, useEffect, useMemo } from 'react';
+import { apiFetch } from '../lib/api-fetch';
+import { eventBus } from '../lib/event-bus-singleton';
+import { useMitzoStore } from '@mitzo/client/hooks';
+import type { SessionActivity } from '@mitzo/protocol';
+import type { TodoItem } from '../types/todo';
+import type { Task, TaskStatus } from '../types/task';
+
+// ─── Attention item model ──────────────────────────────────────────────────
+
+export type AttentionSource = 'telos' | 'atb' | 'session';
+export type AttentionTier = 1 | 2 | 3;
+
+export interface AttentionItem {
+  id: string;
+  source: AttentionSource;
+  tier: AttentionTier;
+  title: string;
+  meta: string;
+  accentColor: string;
+  icon: string;
+  /** Navigation target */
+  navigateTo: string;
+}
+
+// ─── Color constants ───────────────────────────────────────────────────────
+
+const COLOR_AMBER = '#fbbf24';
+const COLOR_RED = '#ff6d6d';
+const COLOR_PURPLE = '#b48cff';
+const COLOR_GREEN = '#4ade80';
+const COLOR_BLUE = '#60a5fa';
+
+// ─── Derive attention items from Telos ─────────────────────────────────────
+
+function telosToAttention(items: TodoItem[]): AttentionItem[] {
+  const result: AttentionItem[] = [];
+  for (const item of items) {
+    // T1: starred + high urgency = Focus
+    if (item.starred && item.urgency >= 0.5) {
+      result.push({
+        id: `telos-${item.id}`,
+        source: 'telos',
+        tier: 1,
+        title: item.summary,
+        meta: `${item.ageDays === 0 ? 'new' : `${item.ageDays}d`} · ${item.profile}`,
+        accentColor: item.urgency >= 0.8 ? COLOR_RED : COLOR_AMBER,
+        icon: '\u2605', // ★
+        navigateTo: `/todos/${item.id}`,
+      });
+    }
+    // T2: starred but lower urgency, or unstarred but high urgency
+    else if (item.starred || item.urgency >= 0.8) {
+      result.push({
+        id: `telos-${item.id}`,
+        source: 'telos',
+        tier: 2,
+        title: item.summary,
+        meta: `${item.ageDays === 0 ? 'new' : `${item.ageDays}d`} · ${item.profile}`,
+        accentColor: item.starred ? COLOR_AMBER : COLOR_PURPLE,
+        icon: item.starred ? '\u2605' : '\u25CF', // ★ or ●
+        navigateTo: `/todos/${item.id}`,
+      });
+    }
+  }
+  return result;
+}
+
+// ─── Derive attention items from ATB ───────────────────────────────────────
+
+const ATB_TIER1_STATUSES: TaskStatus[] = ['pending_review', 'blocked', 'failed'];
+
+function flattenTasks(tasks: Task[]): Task[] {
+  const result: Task[] = [];
+  for (const t of tasks) {
+    result.push(t);
+    if (t.children.length > 0) result.push(...flattenTasks(t.children));
+  }
+  return result;
+}
+
+function atbToAttention(tasks: Task[]): AttentionItem[] {
+  const flat = flattenTasks(tasks);
+  return flat
+    .filter((t) => ATB_TIER1_STATUSES.includes(t.status))
+    .map((t) => ({
+      id: `atb-${t.id}`,
+      source: 'atb' as AttentionSource,
+      tier: 1 as AttentionTier,
+      title: t.title,
+      meta:
+        t.status === 'pending_review'
+          ? 'awaiting approval'
+          : t.status === 'blocked'
+            ? 'blocked'
+            : 'failed',
+      accentColor:
+        t.status === 'pending_review' ? COLOR_AMBER : COLOR_RED,
+      icon:
+        t.status === 'pending_review'
+          ? '\u25D4' // ◔
+          : t.status === 'blocked'
+            ? '\u2298' // ⊘
+            : '\u2717', // ✗
+      navigateTo: '/tasks',
+    }));
+}
+
+// ─── Derive attention items from sessions ──────────────────────────────────
+
+function sessionsToAttention(activities: SessionActivity[]): AttentionItem[] {
+  return activities
+    .filter((a) => a.state === 'waiting' || a.state === 'done')
+    .map((a) => ({
+      id: `session-${a.sessionId}`,
+      source: 'session' as AttentionSource,
+      tier: (a.state === 'waiting' ? 1 : 2) as AttentionTier,
+      title: a.title,
+      meta:
+        a.state === 'waiting'
+          ? a.waitReason === 'permission'
+            ? 'permission needed'
+            : a.waitReason === 'review'
+              ? 'review needed'
+              : 'waiting'
+          : 'done',
+      accentColor: a.state === 'waiting' ? COLOR_RED : COLOR_GREEN,
+      icon: a.state === 'waiting' ? '\u26A0' : '\u2713', // ⚠ or ✓
+      navigateTo: `/chat/${a.sessionId}`,
+    }));
+}
+
+// ─── Sort by tier then recency ─────────────────────────────────────────────
+
+function sortAttention(items: AttentionItem[]): AttentionItem[] {
+  return [...items].sort((a, b) => a.tier - b.tier);
+}
+
+// ─── Hook ──────────────────────────────────────────────────────────────────
+
+const MAX_ITEMS = 5;
+
+export interface UseAttentionFeedReturn {
+  items: AttentionItem[];
+  tier1Count: number;
+  loading: boolean;
+}
+
+export function useAttentionFeed(): UseAttentionFeedReturn {
+  // Telos data — lightweight fetch (no profile filter = all)
+  const [todos, setTodos] = useState<TodoItem[]>([]);
+  const [todosLoading, setTodosLoading] = useState(true);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    apiFetch('/api/todos')
+      .then((r) => (r.ok ? r.json() : { items: [] }))
+      .then((data: { items: TodoItem[] }) => {
+        if (!cancelled) {
+          setTodos(data.items);
+          setTodosLoading(false);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setTodosLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [refreshKey]);
+
+  // SSE-driven refreshes
+  useEffect(() => {
+    const unsub = eventBus.on('todo_update', () => setRefreshKey((k) => k + 1));
+    return unsub;
+  }, []);
+
+  // ATB tasks from store
+  const tasks = useMitzoStore((s) => s.tasks.tree);
+  const loadTasks = useMitzoStore((s) => s.loadTasks);
+
+  useEffect(() => {
+    loadTasks();
+  }, [loadTasks]);
+
+  useEffect(() => {
+    const unsub = eventBus.on('task_state', () => loadTasks());
+    return unsub;
+  }, [loadTasks]);
+
+  // Session activities from SSE
+  const [activities, setActivities] = useState<SessionActivity[]>([]);
+  useEffect(() => {
+    const unsub = eventBus.on('session_activity', (data) => {
+      setActivities(data as SessionActivity[]);
+    });
+    return unsub;
+  }, []);
+
+  const feed = useMemo(() => {
+    const telosItems = telosToAttention(todos);
+    const atbItems = atbToAttention(tasks);
+    const sessionItems = sessionsToAttention(activities);
+    const all = sortAttention([...telosItems, ...atbItems, ...sessionItems]);
+    return all.slice(0, MAX_ITEMS);
+  }, [todos, tasks, activities]);
+
+  const tier1Count = useMemo(() => feed.filter((i) => i.tier === 1).length, [feed]);
+
+  return {
+    items: feed,
+    tier1Count,
+    loading: todosLoading,
+  };
+}
diff --git a/frontend/src/pages/SessionList.tsx b/frontend/src/pages/SessionList.tsx
index e6464821..081db1b8 100644
--- a/frontend/src/pages/SessionList.tsx
+++ b/frontend/src/pages/SessionList.tsx
@@ -14,6 +14,7 @@ import { BriefingCard } from '../components/BriefingCard';
 import { SessionSearchBar } from '../components/SessionSearchBar';
 import { useSessionSearch } from '../hooks/useSessionSearch';
 import { SessionOverview } from '../components/SessionOverview';
+import { AttentionFeed } from '../components/AttentionFeed';
 import { ServiceStatus } from '../components/ServiceStatus';
 
 function SwipeableSession({
@@ -312,6 +313,8 @@ export function SessionList() {
 
         <SessionOverview />
 
+        <AttentionFeed />
+
         <ServiceStatus />
 
         {quickActions.length > 0 && (
diff --git a/frontend/src/pages/TaskBoard.tsx b/frontend/src/pages/TaskBoard.tsx
index fc900dcd..ce974a5a 100644
--- a/frontend/src/pages/TaskBoard.tsx
+++ b/frontend/src/pages/TaskBoard.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { TaskNode } from '../components/TaskNode';
 import { TaskCreateForm } from '../components/TaskCreateForm';
 import { WorkflowCreateForm } from '../components/WorkflowCreateForm';
@@ -6,7 +6,27 @@ import { LoopControls } from '../components/LoopControls';
 import { EmptyState } from '../components/EmptyState';
 import { PageHeader } from '../components/PageHeader';
 import { useTaskBoard } from '../hooks/useTaskBoard';
-import type { TaskStatus } from '../types/task';
+import type { Task, TaskStatus } from '../types/task';
+
+// ─── Attention-tier sorting ────────────────────────────────────────────────
+
+type AttendTier = 1 | 2 | 3 | 4;
+
+function getTaskTier(task: Task): AttendTier {
+  if (task.status === 'pending_review' || task.status === 'blocked' || task.status === 'failed')
+    return 1;
+  if (task.status === 'done') return 2;
+  if (task.status === 'active') return 3;
+  return 4; // pending, skipped
+}
+
+function sortByAttention(tasks: Task[]): Task[] {
+  return [...tasks].sort((a, b) => {
+    const tierDiff = getTaskTier(a) - getTaskTier(b);
+    if (tierDiff !== 0) return tierDiff;
+    return (b.updatedAt || 0) - (a.updatedAt || 0);
+  });
+}
 
 export function TaskBoard() {
   const {
@@ -33,6 +53,12 @@ export function TaskBoard() {
   } = useTaskBoard();
   const [creating, setCreating] = useState<{ parentId?: string } | null>(null);
   const [creatingWorkflow, setCreatingWorkflow] = useState(false);
+  const [showAll, setShowAll] = useState(false);
+
+  const sortedTasks = useMemo(
+    () => (showAll ? tasks : sortByAttention(tasks)),
+    [tasks, showAll],
+  );
 
   function handleStatusChange(id: string, status: TaskStatus) {
     updateTask(id, { status });
@@ -54,9 +80,24 @@ export function TaskBoard() {
   // Root tasks with no parent serve as potential goals
   const goals = tasks.filter((t) => !t.parentId);
 
+  const t1Count = tasks.filter(
+    (t) =>
+      t.status === 'pending_review' || t.status === 'blocked' || t.status === 'failed',
+  ).length;
+
   return (
     <div className="task-board-page">
-      <PageHeader title="Tasks" badge={tasks.length || undefined}>
+      <PageHeader
+        title="Tasks"
+        badge={t1Count > 0 ? t1Count : tasks.length || undefined}
+      >
+        <button
+          className={`task-board-sort-btn${showAll ? '' : ' task-board-sort-btn--active'}`}
+          onClick={() => setShowAll(!showAll)}
+          title={showAll ? 'Sort by attention' : 'Show tree order'}
+        >
+          {showAll ? '\u2195' : '\u2B06'}
+        </button>
         <button
           className="task-board-add-btn"
           onClick={() => setCreating({ parentId: undefined })}
diff --git a/frontend/src/pages/TodoView.tsx b/frontend/src/pages/TodoView.tsx
index badb0170..267eff2b 100644
--- a/frontend/src/pages/TodoView.tsx
+++ b/frontend/src/pages/TodoView.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useMitzoStore } from '@mitzo/client/hooks';
 import { TodoCard } from '../components/TodoCard';
@@ -8,6 +8,51 @@ import { useTodoData } from '../hooks/useTodoData';
 import { buildPrompt, buildTodoContext } from '../lib/todo-utils';
 import type { TodoItem } from '../types/todo';
 
+// ─── Section grouping ──────────────────────────────────────────────────────
+
+interface TodoSection {
+  key: string;
+  label: string;
+  items: TodoItem[];
+  defaultCollapsed: boolean;
+}
+
+function groupIntoSections(items: TodoItem[]): TodoSection[] {
+  const focus: TodoItem[] = [];
+  const active: TodoItem[] = [];
+  const seen: TodoItem[] = [];
+  const done: TodoItem[] = [];
+
+  for (const item of items) {
+    if (item.status === 'completed') {
+      done.push(item);
+    } else if (item.status === 'acknowledged') {
+      seen.push(item);
+    } else if (item.starred && item.urgency >= 0.5) {
+      focus.push(item);
+    } else {
+      active.push(item);
+    }
+  }
+
+  // Sort within sections
+  const byUrgencyDesc = (a: TodoItem, b: TodoItem) => b.urgency - a.urgency || a.ageDays - b.ageDays;
+  focus.sort(byUrgencyDesc);
+  active.sort(byUrgencyDesc);
+  seen.sort((a, b) => a.ageDays - b.ageDays); // oldest first
+  done.sort((a, b) => b.ageDays - a.ageDays); // newest first
+
+  const sections: TodoSection[] = [];
+  if (focus.length > 0) sections.push({ key: 'focus', label: 'Focus', items: focus, defaultCollapsed: false });
+  if (active.length > 0) sections.push({ key: 'active', label: 'Active', items: active, defaultCollapsed: false });
+  if (seen.length > 0) sections.push({ key: 'seen', label: 'Seen', items: seen, defaultCollapsed: false });
+  if (done.length > 0) sections.push({ key: 'done', label: 'Done', items: done, defaultCollapsed: true });
+
+  return sections;
+}
+
+// ─── Create form ───────────────────────────────────────────────────────────
+
 function TodoCreateForm({
   parentId,
   profile,
@@ -75,6 +120,33 @@ function TodoCreateForm({
   );
 }
 
+// ─── Section header ────────────────────────────────────────────────────────
+
+function SectionHeader({
+  label,
+  count,
+  collapsed,
+  onToggle,
+}: {
+  label: string;
+  count: number;
+  collapsed: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <button className="todo-section-header" onClick={onToggle}>
+      <span className="todo-section-label">{label}</span>
+      <span className="todo-section-count">{count}</span>
+      <span className="todo-section-line" />
+      <span className={`todo-section-chevron${collapsed ? '' : ' todo-section-chevron--open'}`}>
+        &rsaquo;
+      </span>
+    </button>
+  );
+}
+
+// ─── Main view ─────────────────────────────────────────────────────────────
+
 export function TodoView() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -84,6 +156,11 @@ export function TodoView() {
   const [creating, setCreating] = useState<{ parentId?: string } | null>(null);
   const setPendingSession = useMitzoStore((s) => s.setPendingSession);
   const scrollRef = useRef<HTMLDivElement>(null);
+  const [collapsedSections, setCollapsedSections] = useState<Record<string, boolean>>({
+    done: true,
+  });
+
+  const sections = useMemo(() => groupIntoSections(items), [items]);
 
   // Restore scroll position when returning from detail view
   useEffect(() => {
@@ -97,6 +174,10 @@ export function TodoView() {
     return scrollRef.current?.scrollTop ?? 0;
   }, []);
 
+  function toggleSection(key: string) {
+    setCollapsedSections((prev) => ({ ...prev, [key]: !prev[key] }));
+  }
+
   function handleStartSession(item: TodoItem) {
     setPendingSession({
       prompt: buildPrompt(item),
@@ -175,24 +256,35 @@ export function TodoView() {
           />
         )}
 
-        <div className="todo-hint">
-          {items.length > 0 && <span>Tap to start working. Swipe right = seen, left = done.</span>}
-        </div>
-
-        <div className="todo-list">
-          {items.map((item) => (
-            <TodoCard
-              key={item.id}
-              item={item}
-              onAck={ack}
-              onDone={done}
-              onStar={star}
-              onTap={handleTap}
-              onAddChild={handleAddChild}
-              onStartSession={handleStartSession}
-            />
-          ))}
-        </div>
+        {sections.map((section) => {
+          const isCollapsed = collapsedSections[section.key] ?? section.defaultCollapsed;
+          return (
+            <div key={section.key} className="todo-section">
+              <SectionHeader
+                label={section.label}
+                count={section.items.length}
+                collapsed={isCollapsed}
+                onToggle={() => toggleSection(section.key)}
+              />
+              {!isCollapsed && (
+                <div className="todo-list">
+                  {section.items.map((item) => (
+                    <TodoCard
+                      key={item.id}
+                      item={item}
+                      onAck={ack}
+                      onDone={done}
+                      onStar={star}
+                      onTap={handleTap}
+                      onAddChild={handleAddChild}
+                      onStartSession={handleStartSession}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
       </div>
     </div>
   );
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index d20f066a..412c8b0a 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -753,6 +753,80 @@ textarea:focus {
   margin-top: 2px;
 }
 
+/* ─── Attention Feed ────────────────────────────────────────────────────── */
+
+.attention-section {
+  margin-bottom: var(--space-4);
+}
+
+.attention-cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding-top: var(--space-2);
+}
+
+.attention-card {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--card-accent, var(--border));
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  text-align: left;
+  color: var(--text);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  width: 100%;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 0.15s;
+}
+
+.attention-card:active {
+  background: var(--hover);
+}
+
+.attention-card-icon {
+  flex-shrink: 0;
+  font-size: var(--text-base);
+  line-height: 1.3;
+}
+
+.attention-card-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.attention-card-title {
+  font-size: var(--text-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.attention-card-meta {
+  font-size: var(--text-xs);
+  color: var(--text-dim);
+  margin-top: 2px;
+}
+
+.attention-card-source {
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: var(--text-2xs);
+  letter-spacing: 0.03em;
+}
+
+.attention-empty {
+  font-size: var(--text-xs);
+  color: var(--text-dim);
+  padding: var(--space-3) 0;
+  text-align: center;
+}
+
 .service-status {
   display: flex;
   gap: var(--space-4);
@@ -4037,24 +4111,42 @@ textarea:focus {
   padding: 12px 14px;
   cursor: pointer;
   touch-action: pan-y;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.todo-card-header {
+/* ─── 3-line card layout ──────────────────────────────────────────── */
+
+.todo-card-line1 {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--space-2);
-  margin-bottom: var(--space-1);
-  font-size: var(--text-xs);
 }
 
-.todo-card-status {
-  color: var(--accent);
+.todo-card-icon {
+  flex-shrink: 0;
+  font-size: var(--text-base);
+  line-height: 1.3;
 }
 
-.todo-card-urgency {
-  font-family: monospace;
-  letter-spacing: 1px;
+.todo-card-summary {
+  flex: 1;
+  font-size: var(--text-sm);
+  line-height: 1.35;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.todo-card-line2 {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--text-xs);
   color: var(--text-dim);
+  padding-left: calc(var(--text-base) + var(--space-2));
 }
 
 .todo-card-source {
@@ -4068,22 +4160,72 @@ textarea:focus {
 
 .todo-card-age {
   color: var(--text-dim);
-  margin-left: auto;
 }
 
-.todo-card-summary {
-  font-size: var(--text-sm);
-  line-height: 1.35;
+.todo-card-profile {
+  color: var(--text-dim);
 }
 
-.todo-card-meta {
-  margin-top: var(--space-1);
-  font-size: var(--text-xxs);
+.todo-card-author {
   color: var(--text-dim);
 }
 
-.todo-card-author {
+.todo-card-line3 {
+  display: flex;
+  gap: var(--space-2);
+  padding-left: calc(var(--text-base) + var(--space-2));
+  margin-top: 2px;
+}
+
+/* ─── Section headers ─────────────────────────────────────────────── */
+
+.todo-section {
+  margin-bottom: var(--space-3);
+}
+
+.todo-section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-2) 0;
+  background: transparent;
+  border: none;
   color: var(--text-dim);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.todo-section-label {
+  flex-shrink: 0;
+}
+
+.todo-section-count {
+  flex-shrink: 0;
+  font-weight: 400;
+  opacity: 0.7;
+}
+
+.todo-section-line {
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+
+.todo-section-chevron {
+  display: inline-block;
+  font-size: var(--text-base);
+  transition: transform 0.2s;
+  transform: rotate(0deg);
+  flex-shrink: 0;
+}
+
+.todo-section-chevron--open {
+  transform: rotate(90deg);
 }
 
 /* --- Hierarchical todo tree --- */
@@ -4132,7 +4274,6 @@ textarea:focus {
   padding: 2px 8px;
   border-radius: 10px;
   cursor: pointer;
-  margin-top: var(--space-1);
   opacity: 0.4;
   transition: opacity 0.15s;
 }
@@ -4143,12 +4284,6 @@ textarea:focus {
   opacity: 1;
 }
 
-.todo-card-actions {
-  display: flex;
-  gap: var(--space-2);
-  margin-top: var(--space-1);
-}
-
 .todo-card-session-btn {
   background: none;
   border: 1px solid var(--accent, #6366f1);
@@ -4751,11 +4886,17 @@ textarea:focus {
 .task-node-body {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 
 .task-node-title {
   font-size: var(--text-md);
   line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .task-node-title--done {
@@ -4780,6 +4921,12 @@ textarea:focus {
   color: var(--task-failed);
 }
 
+.task-node-meta {
+  font-size: var(--text-xs);
+  color: var(--text-dim);
+  line-height: 1.3;
+}
+
 .task-node-actions {
   display: flex;
   gap: var(--space-1);

From 31ae2239476cbfec5befe0f025e4b267516648e3 Mon Sep 17 00:00:00 2001
From: dimakis <dimitri.saridakis@gmail.com>
Date: Sat, 9 May 2026 15:29:11 +0100
Subject: [PATCH 2/2] =?UTF-8?q?fix(ui):=20address=20Centaur=20review=20?=
 =?UTF-8?q?=E2=80=94=20attention=20feed=20robustness=20and=20tier=20recurs?=
 =?UTF-8?q?ion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove unused AttentionTier 3 and COLOR_BLUE
- Add updatedAt for recency tiebreaker in attention sorting
- Fix sortByAttention to consider children status for tier calculation
- Fix t1Count to recurse into children

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/TaskNode.tsx   |  2 +-
 frontend/src/hooks/useAttentionFeed.ts | 27 +++++++++++++----
 frontend/src/pages/TaskBoard.tsx       | 40 +++++++++++++++++++-------
 3 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/TaskNode.tsx b/frontend/src/components/TaskNode.tsx
index 845712bf..c55a96c6 100644
--- a/frontend/src/components/TaskNode.tsx
+++ b/frontend/src/components/TaskNode.tsx
@@ -189,7 +189,7 @@ export function TaskNode({
             {'\u21BB'}
             {task.retryCount}
           </span>
-        </div>
+        )}
         <div className="task-node-actions">
           {task.status === 'pending_review' && onApprove && (
             <button
diff --git a/frontend/src/hooks/useAttentionFeed.ts b/frontend/src/hooks/useAttentionFeed.ts
index 84b174d3..b69bd702 100644
--- a/frontend/src/hooks/useAttentionFeed.ts
+++ b/frontend/src/hooks/useAttentionFeed.ts
@@ -9,7 +9,7 @@ import type { Task, TaskStatus } from '../types/task';
 // ─── Attention item model ──────────────────────────────────────────────────
 
 export type AttentionSource = 'telos' | 'atb' | 'session';
-export type AttentionTier = 1 | 2 | 3;
+export type AttentionTier = 1 | 2;
 
 export interface AttentionItem {
   id: string;
@@ -21,6 +21,8 @@ export interface AttentionItem {
   icon: string;
   /** Navigation target */
   navigateTo: string;
+  /** Epoch ms used for recency sort within a tier (higher = more recent) */
+  updatedAt: number;
 }
 
 // ─── Color constants ───────────────────────────────────────────────────────
@@ -29,13 +31,14 @@ const COLOR_AMBER = '#fbbf24';
 const COLOR_RED = '#ff6d6d';
 const COLOR_PURPLE = '#b48cff';
 const COLOR_GREEN = '#4ade80';
-const COLOR_BLUE = '#60a5fa';
 
 // ─── Derive attention items from Telos ─────────────────────────────────────
 
 function telosToAttention(items: TodoItem[]): AttentionItem[] {
   const result: AttentionItem[] = [];
   for (const item of items) {
+    // ageDays → approximate epoch (lower ageDays = more recent)
+    const updatedAt = Date.now() - item.ageDays * 86_400_000;
     // T1: starred + high urgency = Focus
     if (item.starred && item.urgency >= 0.5) {
       result.push({
@@ -47,6 +50,7 @@ function telosToAttention(items: TodoItem[]): AttentionItem[] {
         accentColor: item.urgency >= 0.8 ? COLOR_RED : COLOR_AMBER,
         icon: '\u2605', // ★
         navigateTo: `/todos/${item.id}`,
+        updatedAt,
       });
     }
     // T2: starred but lower urgency, or unstarred but high urgency
@@ -60,6 +64,7 @@ function telosToAttention(items: TodoItem[]): AttentionItem[] {
         accentColor: item.starred ? COLOR_AMBER : COLOR_PURPLE,
         icon: item.starred ? '\u2605' : '\u25CF', // ★ or ●
         navigateTo: `/todos/${item.id}`,
+        updatedAt,
       });
     }
   }
@@ -103,6 +108,7 @@ function atbToAttention(tasks: Task[]): AttentionItem[] {
             ? '\u2298' // ⊘
             : '\u2717', // ✗
       navigateTo: '/tasks',
+      updatedAt: t.updatedAt || 0,
     }));
 }
 
@@ -127,13 +133,16 @@ function sessionsToAttention(activities: SessionActivity[]): AttentionItem[] {
       accentColor: a.state === 'waiting' ? COLOR_RED : COLOR_GREEN,
       icon: a.state === 'waiting' ? '\u26A0' : '\u2713', // ⚠ or ✓
       navigateTo: `/chat/${a.sessionId}`,
+      updatedAt: a.lastEventAt || 0,
     }));
 }
 
 // ─── Sort by tier then recency ─────────────────────────────────────────────
 
 function sortAttention(items: AttentionItem[]): AttentionItem[] {
-  return [...items].sort((a, b) => a.tier - b.tier);
+  return [...items].sort(
+    (a, b) => a.tier - b.tier || b.updatedAt - a.updatedAt,
+  );
 }
 
 // ─── Hook ──────────────────────────────────────────────────────────────────
@@ -189,11 +198,19 @@ export function useAttentionFeed(): UseAttentionFeedReturn {
     return unsub;
   }, [loadTasks]);
 
-  // Session activities from SSE
+  // Session activities from SSE — validated at runtime
   const [activities, setActivities] = useState<SessionActivity[]>([]);
   useEffect(() => {
     const unsub = eventBus.on('session_activity', (data) => {
-      setActivities(data as SessionActivity[]);
+      if (!Array.isArray(data)) return;
+      const valid = data.filter(
+        (d): d is SessionActivity =>
+          d != null &&
+          typeof d === 'object' &&
+          typeof (d as Record<string, unknown>).sessionId === 'string' &&
+          typeof (d as Record<string, unknown>).state === 'string',
+      );
+      setActivities(valid);
     });
     return unsub;
   }, []);
diff --git a/frontend/src/pages/TaskBoard.tsx b/frontend/src/pages/TaskBoard.tsx
index ce974a5a..8a695c14 100644
--- a/frontend/src/pages/TaskBoard.tsx
+++ b/frontend/src/pages/TaskBoard.tsx
@@ -12,15 +12,38 @@ import type { Task, TaskStatus } from '../types/task';
 
 type AttendTier = 1 | 2 | 3 | 4;
 
-function getTaskTier(task: Task): AttendTier {
-  if (task.status === 'pending_review' || task.status === 'blocked' || task.status === 'failed')
-    return 1;
-  if (task.status === 'done') return 2;
-  if (task.status === 'active') return 3;
+const T1_STATUS_SET: Set<TaskStatus> = new Set(['pending_review', 'blocked', 'failed']);
+
+/** Tier for a single task's own status */
+function ownTier(status: TaskStatus): AttendTier {
+  if (T1_STATUS_SET.has(status)) return 1;
+  if (status === 'done') return 2;
+  if (status === 'active') return 3;
   return 4; // pending, skipped
 }
 
-function sortByAttention(tasks: Task[]): Task[] {
+/** Effective tier: worst of own status and any descendant */
+export function getTaskTier(task: Task): AttendTier {
+  let worst = ownTier(task.status);
+  for (const child of task.children) {
+    const childTier = getTaskTier(child);
+    if (childTier < worst) worst = childTier;
+    if (worst === 1) break; // can't get worse
+  }
+  return worst;
+}
+
+/** Count T1 items recursively across entire tree */
+function countT1Recursive(tasks: Task[]): number {
+  let count = 0;
+  for (const t of tasks) {
+    if (T1_STATUS_SET.has(t.status)) count++;
+    if (t.children.length > 0) count += countT1Recursive(t.children);
+  }
+  return count;
+}
+
+export function sortByAttention(tasks: Task[]): Task[] {
   return [...tasks].sort((a, b) => {
     const tierDiff = getTaskTier(a) - getTaskTier(b);
     if (tierDiff !== 0) return tierDiff;
@@ -80,10 +103,7 @@ export function TaskBoard() {
   // Root tasks with no parent serve as potential goals
   const goals = tasks.filter((t) => !t.parentId);
 
-  const t1Count = tasks.filter(
-    (t) =>
-      t.status === 'pending_review' || t.status === 'blocked' || t.status === 'failed',
-  ).length;
+  const t1Count = countT1Recursive(tasks);
 
   return (
     <div className="task-board-page">