From 393569290e434f0ce31f7a78f090101348f807ae Mon Sep 17 00:00:00 2001
From: dimakis <dimitri.saridakis@gmail.com>
Date: Tue, 5 May 2026 22:19:16 +0100
Subject: [PATCH 1/2] feat(ui): task board redesign with state-colored cards
 and attention sorting

Contextual loop controls, attend-tier sorting, progressive fade for
completed tasks, token usage display, and show-all toggle.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/LoopControls.tsx    | 143 +++++++----
 frontend/src/components/SessionOverview.tsx |  15 +-
 frontend/src/components/TaskNode.tsx        |  81 +++++-
 frontend/src/hooks/useTaskBoard.ts          | 175 ++++++++++++-
 frontend/src/lib/formatTime.ts              |   9 +
 frontend/src/pages/TaskBoard.tsx            |  16 +-
 frontend/src/styles/global.css              | 260 +++++++++++++++-----
 7 files changed, 557 insertions(+), 142 deletions(-)

diff --git a/frontend/src/components/LoopControls.tsx b/frontend/src/components/LoopControls.tsx
index 0ada829f..d005d80a 100644
--- a/frontend/src/components/LoopControls.tsx
+++ b/frontend/src/components/LoopControls.tsx
@@ -1,10 +1,12 @@
 import { useState } from 'react';
 import type { LoopStatus } from '../types/task';
 import type { Task } from '../types/task';
+import { formatTokens } from '../lib/formatTokens';
 
 interface LoopControlsProps {
   loopStatus: LoopStatus;
   goals: Task[];
+  totalTokenUsage: number;
   onStart: (goalId: string, specMode?: boolean) => void;
   onPause: () => void;
   onResume: () => void;
@@ -13,15 +15,10 @@ interface LoopControlsProps {
   onRejectSpec: () => void;
 }
 
-const STATE_LABELS: Record<LoopStatus['state'], string> = {
-  idle: 'Idle',
-  running: 'Running',
-  paused: 'Paused',
-};
-
 export function LoopControls({
   loopStatus,
   goals,
+  totalTokenUsage,
   onStart,
   onPause,
   onResume,
@@ -29,26 +26,27 @@ export function LoopControls({
   onApproveSpec,
   onRejectSpec,
 }: LoopControlsProps) {
+  const [pickerOpen, setPickerOpen] = useState(false);
   const [selectedGoalId, setSelectedGoalId] = useState('');
   const [specMode, setSpecMode] = useState(false);
 
   const { state, progress, awaitingApproval } = loopStatus;
 
-  return (
-    <div className="loop-controls">
-      <div className="loop-controls-header">
-        <span className={`loop-controls-pill loop-controls-pill--${state}`}>
-          {STATE_LABELS[state]}
-        </span>
-        {progress && (
-          <span className="loop-controls-progress">
-            {progress.done}/{progress.total}
-          </span>
-        )}
-      </div>
+  // ── Idle: compact trigger / expanded picker ──
+  if (state === 'idle') {
+    if (!pickerOpen) {
+      return (
+        <div className="loop-controls">
+          <button className="loop-controls-start-trigger" onClick={() => setPickerOpen(true)}>
+            {'\u25B8'} Start a workflow...
+          </button>
+        </div>
+      );
+    }
 
-      {state === 'idle' && (
-        <div className="loop-controls-start">
+    return (
+      <div className="loop-controls">
+        <div className="loop-controls-start-expanded">
           <select
             className="loop-controls-select"
             value={selectedGoalId}
@@ -70,61 +68,100 @@ export function LoopControls({
               />
               Spec mode
             </label>
+            <div className="loop-controls-spacer" />
+            <button className="loop-controls-btn" onClick={() => setPickerOpen(false)}>
+              Cancel
+            </button>
             <button
               className="loop-controls-btn loop-controls-btn--start"
               disabled={!selectedGoalId}
-              onClick={() => onStart(selectedGoalId, specMode || undefined)}
+              onClick={() => {
+                onStart(selectedGoalId, specMode || undefined);
+                setPickerOpen(false);
+              }}
             >
               Start
             </button>
           </div>
         </div>
-      )}
+      </div>
+    );
+  }
 
-      {state === 'running' && !awaitingApproval && (
-        <div className="loop-controls-actions">
-          <button className="loop-controls-btn" onClick={onPause}>
-            Pause
-          </button>
-          <button className="loop-controls-btn loop-controls-btn--danger" onClick={onStop}>
-            Stop
-          </button>
-        </div>
-      )}
+  // ── Running / Paused / Review: inline bar ──
+  const isReview = awaitingApproval;
+  const pillClass = isReview
+    ? 'loop-controls-pill--review'
+    : state === 'paused'
+      ? 'loop-controls-pill--paused'
+      : 'loop-controls-pill--running';
+  const pillLabel = isReview
+    ? '\u26A0 Needs Review'
+    : state === 'paused'
+      ? 'Paused'
+      : '\u25CF Running';
 
-      {state === 'paused' && !awaitingApproval && (
-        <div className="loop-controls-actions">
-          <button className="loop-controls-btn loop-controls-btn--start" onClick={onResume}>
-            Resume
-          </button>
-          <button className="loop-controls-btn loop-controls-btn--danger" onClick={onStop}>
-            Stop
-          </button>
+  return (
+    <div className="loop-controls">
+      <div className="loop-controls-inline-bar">
+        <div className="loop-controls-inline-bar-top">
+          <span className={`loop-controls-pill ${pillClass}`}>{pillLabel}</span>
+          <div className="loop-controls-spacer" />
+          <div className="loop-controls-actions">
+            {state === 'running' && !awaitingApproval && (
+              <button className="loop-controls-btn" onClick={onPause} title="Pause">
+                {'\u23F8'}
+              </button>
+            )}
+            {state === 'paused' && !awaitingApproval && (
+              <button
+                className="loop-controls-btn loop-controls-btn--start"
+                onClick={onResume}
+                title="Resume"
+              >
+                {'\u25B6'}
+              </button>
+            )}
+            <button
+              className="loop-controls-btn loop-controls-btn--danger"
+              onClick={onStop}
+              title="Stop"
+            >
+              {'\u25A0'}
+            </button>
+          </div>
         </div>
-      )}
+        {progress && progress.total > 0 && (
+          <div className="loop-controls-inline-bar-bottom">
+            <div className="loop-controls-bar">
+              <div
+                className="loop-controls-bar-fill"
+                style={{ width: `${(progress.done / progress.total) * 100}%` }}
+              />
+            </div>
+            <span className="loop-controls-progress">
+              {progress.done}/{progress.total}
+            </span>
+            {totalTokenUsage > 0 && (
+              <span className="loop-controls-token-count">{formatTokens(totalTokenUsage)}</span>
+            )}
+          </div>
+        )}
+      </div>
 
       {awaitingApproval && (
-        <div className="loop-controls-approval">
+        <div className="loop-controls-approval-card">
           <p className="loop-controls-approval-msg">Task breakdown ready for review</p>
           <div className="loop-controls-actions">
             <button className="loop-controls-btn loop-controls-btn--start" onClick={onApproveSpec}>
-              Approve
+              {'\u2713'} Approve
             </button>
             <button className="loop-controls-btn loop-controls-btn--danger" onClick={onRejectSpec}>
-              Reject
+              {'\u2717'} Reject
             </button>
           </div>
         </div>
       )}
-
-      {progress && progress.total > 0 && (
-        <div className="loop-controls-bar">
-          <div
-            className="loop-controls-bar-fill"
-            style={{ width: `${(progress.done / progress.total) * 100}%` }}
-          />
-        </div>
-      )}
     </div>
   );
 }
diff --git a/frontend/src/components/SessionOverview.tsx b/frontend/src/components/SessionOverview.tsx
index 76cf0523..49cb738a 100644
--- a/frontend/src/components/SessionOverview.tsx
+++ b/frontend/src/components/SessionOverview.tsx
@@ -6,6 +6,7 @@ import {
   type SessionActivityState,
 } from '../hooks/useSessionOverview';
 import { selectionChanged } from '../lib/haptics';
+import { formatRelativeTime } from '../lib/formatTime';
 
 // ─── State visuals ──────────────────────────────────────────────────────────
 
@@ -29,8 +30,7 @@ function SessionActivityCard({
 }) {
   const config = STATE_CONFIG[activity.state];
   // Elapsed updates on each SSE event, not on a timer — acceptable staleness
-  const elapsed = Date.now() - activity.lastEventAt;
-  const timeLabel = formatElapsed(elapsed);
+  const timeLabel = formatRelativeTime(activity.lastEventAt);
 
   let metaText = config.label;
   if (activity.waitReason === 'permission') metaText = 'permission';
@@ -121,14 +121,3 @@ export function SessionOverview() {
     </div>
   );
 }
-
-// ─── Helpers ────────────────────────────────────────────────────────────────
-
-function formatElapsed(ms: number): string {
-  const seconds = Math.floor(ms / 1000);
-  if (seconds < 60) return 'just now';
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}min ago`;
-  const hours = Math.floor(minutes / 60);
-  return `${hours}h ago`;
-}
diff --git a/frontend/src/components/TaskNode.tsx b/frontend/src/components/TaskNode.tsx
index de29db4b..ef6a9772 100644
--- a/frontend/src/components/TaskNode.tsx
+++ b/frontend/src/components/TaskNode.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { Task, TaskStatus, StageType } from '../types/task';
+import type { TaskDisplayMeta } from '../hooks/useTaskBoard';
 
 const STATUS_ICONS: Record<TaskStatus, string> = {
   pending: '\u25CB', // ○
@@ -11,6 +12,16 @@ const STATUS_ICONS: Record<TaskStatus, string> = {
   failed: '\u2717', // ✗
 };
 
+const STATUS_LABELS: Record<TaskStatus, string> = {
+  pending: 'pending',
+  active: 'running',
+  done: 'done',
+  pending_review: 'review',
+  blocked: 'blocked',
+  skipped: 'skipped',
+  failed: 'failed',
+};
+
 const STAGE_LABELS: Record<StageType, string> = {
   agent_work: '',
   wait_for_signal: 'signal',
@@ -30,7 +41,9 @@ const NEXT_STATUS: Record<TaskStatus, TaskStatus> = {
 interface TaskNodeProps {
   task: Task;
   depth: number;
+  compact?: boolean;
   activeTaskId?: string | null;
+  displayMeta?: Map<string, TaskDisplayMeta>;
   onStatusChange: (id: string, status: TaskStatus) => void;
   onDelete: (id: string) => void;
   onAddChild: (parentId: string) => void;
@@ -38,10 +51,42 @@ interface TaskNodeProps {
   onReject?: (id: string, feedback: string) => void;
 }
 
+function buildContextLine(task: Task, meta?: TaskDisplayMeta): string | null {
+  switch (task.status) {
+    case 'active': {
+      const parts: string[] = [STATUS_LABELS.active];
+      if (meta?.sessionHash) parts.push(meta.sessionHash);
+      if (meta?.elapsedLabel) parts.push(meta.elapsedLabel);
+      return parts.join(' \u00B7 ');
+    }
+    case 'pending_review':
+      return 'awaiting approval';
+    case 'blocked':
+      return meta?.blockerSummary ?? 'blocked';
+    case 'done':
+      return meta?.completedAgo ? `done \u00B7 ${meta.completedAgo}` : 'done';
+    case 'failed': {
+      const label = meta?.blockerSummary ?? 'failed';
+      return task.retryCount > 0 ? `${label} \u00B7 retry ${task.retryCount}` : label;
+    }
+    default:
+      return null;
+  }
+}
+
+function contextColorClass(status: TaskStatus): string {
+  if (status === 'pending_review') return ' task-node-context--review';
+  if (status === 'blocked') return ' task-node-context--blocked';
+  if (status === 'failed') return ' task-node-context--failed';
+  return '';
+}
+
 export function TaskNode({
   task,
   depth,
+  compact,
   activeTaskId,
+  displayMeta,
   onStatusChange,
   onDelete,
   onAddChild,
@@ -50,9 +95,22 @@ export function TaskNode({
 }: TaskNodeProps) {
   const [expanded, setExpanded] = useState(true);
   const hasChildren = task.children.length > 0;
+  const meta = displayMeta?.get(task.id);
+  const isCompact = compact && task.status !== 'active';
+
+  // Build class list
+  const classes = ['task-node', `task-node--status-${task.status}`];
+  if (meta?.attendTier === 1) classes.push('task-node--t1');
+  if (meta && meta.fadeOpacity <= 0) classes.push('task-node--hidden');
+
+  const contextLine = isCompact ? null : buildContextLine(task, meta);
+  const fadeStyle =
+    meta && meta.fadeOpacity < 1 && meta.fadeOpacity > 0
+      ? { opacity: meta.fadeOpacity }
+      : undefined;
 
   return (
-    <div className={`task-node${activeTaskId === task.id ? ' task-node--active' : ''}`}>
+    <div className={classes.join(' ')} style={fadeStyle}>
       <div className="task-node-row">
         {hasChildren && (
           <button
@@ -70,17 +128,24 @@ export function TaskNode({
         >
           {STATUS_ICONS[task.status]}
         </button>
-        <span
-          className={`task-node-title${task.status === 'done' ? ' task-node-title--done' : ''}`}
-        >
-          {task.title}
-        </span>
+        <div className="task-node-body">
+          <span
+            className={`task-node-title${task.status === 'done' ? ' task-node-title--done' : ''}`}
+          >
+            {task.title}
+          </span>
+          {contextLine && (
+            <div className={`task-node-context${contextColorClass(task.status)}`}>
+              {contextLine}
+            </div>
+          )}
+        </div>
         {task.stageType && STAGE_LABELS[task.stageType] && (
           <span className={`task-node-stage task-node-stage--${task.stageType}`}>
             {STAGE_LABELS[task.stageType]}
           </span>
         )}
-        {task.retryCount > 0 && (
+        {!isCompact && task.retryCount > 0 && task.status !== 'failed' && (
           <span className="task-node-retry" title={`Retry ${task.retryCount}/${task.maxRetries}`}>
             {'\u21BB'}
             {task.retryCount}
@@ -138,7 +203,9 @@ export function TaskNode({
               key={child.id}
               task={child}
               depth={depth + 1}
+              compact={true}
               activeTaskId={activeTaskId}
+              displayMeta={displayMeta}
               onStatusChange={onStatusChange}
               onDelete={onDelete}
               onAddChild={onAddChild}
diff --git a/frontend/src/hooks/useTaskBoard.ts b/frontend/src/hooks/useTaskBoard.ts
index 888eba8f..b64a9188 100644
--- a/frontend/src/hooks/useTaskBoard.ts
+++ b/frontend/src/hooks/useTaskBoard.ts
@@ -1,7 +1,131 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useMitzoStore } from '@mitzo/client/hooks';
-import type { Task, LoopStatus } from '../types/task';
+import type { Task, TaskStatus, LoopStatus } from '../types/task';
 import { eventBus } from '../lib/event-bus-singleton';
+import { formatRelativeTime, formatDuration } from '../lib/formatTime';
+
+// ─── Display Meta ──────────────────────────────────────────────────────────
+
+export interface TaskDisplayMeta {
+  attendTier: 1 | 2 | 3 | 4;
+  fadeOpacity: number;
+  completedAgo?: string;
+  elapsedLabel?: string;
+  sessionHash?: string;
+  blockerSummary?: string;
+}
+
+export interface AttendCounts {
+  t1: number;
+  t2: number;
+  t3: number;
+}
+
+// ─── Pure helpers ──────────────────────────────────────────────────────────
+
+const FADE_START_MS = 5 * 60 * 1000; // 5 minutes
+const FADE_END_MS = 30 * 60 * 1000; // 30 minutes
+
+function getAttendTier(status: TaskStatus): 1 | 2 | 3 | 4 {
+  switch (status) {
+    case 'pending_review':
+    case 'blocked':
+    case 'failed':
+      return 1;
+    case 'done':
+      return 2;
+    case 'active':
+      return 3;
+    default:
+      return 4;
+  }
+}
+
+function computeFadeOpacity(completedAt: number | null): number {
+  if (!completedAt) return 1;
+  const elapsed = Date.now() - completedAt;
+  if (elapsed < FADE_START_MS) return 1;
+  if (elapsed >= FADE_END_MS) return 0;
+  // Linear fade from 1 → 0.5 between 5min and 30min
+  return 0.5 + 0.5 * (1 - (elapsed - FADE_START_MS) / (FADE_END_MS - FADE_START_MS));
+}
+
+function buildDisplayMeta(task: Task, now: number): TaskDisplayMeta {
+  const tier = getAttendTier(task.status);
+  const meta: TaskDisplayMeta = {
+    attendTier: tier,
+    fadeOpacity: task.status === 'done' ? computeFadeOpacity(task.completedAt) : 1,
+  };
+
+  if (task.status === 'done' && task.completedAt) {
+    meta.completedAgo = formatRelativeTime(task.completedAt);
+  }
+  if (task.status === 'active' && task.claimedAt) {
+    meta.elapsedLabel = formatDuration(now - task.claimedAt);
+  }
+  if (task.sessionId) {
+    meta.sessionHash = task.sessionId.slice(0, 6);
+  }
+  if ((task.status === 'blocked' || task.status === 'failed') && task.annotations.length > 0) {
+    meta.blockerSummary = task.annotations[0];
+  }
+
+  return meta;
+}
+
+function collectDisplayMeta(tasks: Task[], now: number, map: Map<string, TaskDisplayMeta>): void {
+  for (const task of tasks) {
+    map.set(task.id, buildDisplayMeta(task, now));
+    if (task.children.length > 0) {
+      collectDisplayMeta(task.children, now, map);
+    }
+  }
+}
+
+function countAttendTiers(tasks: Task[], counts: AttendCounts): void {
+  for (const task of tasks) {
+    const tier = getAttendTier(task.status);
+    if (tier === 1) counts.t1++;
+    else if (tier === 2) counts.t2++;
+    else if (tier === 3) counts.t3++;
+    if (task.children.length > 0) {
+      countAttendTiers(task.children, counts);
+    }
+  }
+}
+
+function sortByAttendTier(tasks: Task[]): Task[] {
+  return [...tasks].sort((a, b) => {
+    const tierA = getAttendTier(a.status);
+    const tierB = getAttendTier(b.status);
+    if (tierA !== tierB) return tierA - tierB;
+
+    // Within same tier, secondary sort
+    if (tierA === 1) {
+      // T1: oldest first (needs attention longest)
+      return a.updatedAt - b.updatedAt;
+    }
+    if (tierA === 2) {
+      // T2: newest first (most recent completion on top)
+      return (b.completedAt ?? b.updatedAt) - (a.completedAt ?? a.updatedAt);
+    }
+    // T3, T4: preserve tree position (stable sort by priority then creation)
+    return a.priority - b.priority || a.createdAt - b.createdAt;
+  });
+}
+
+function sumTokenUsage(tasks: Task[]): number {
+  let total = 0;
+  for (const task of tasks) {
+    total += task.tokenUsage;
+    if (task.children.length > 0) {
+      total += sumTokenUsage(task.children);
+    }
+  }
+  return total;
+}
+
+// ─── Input/Result types ────────────────────────────────────────────────────
 
 export interface TaskCreateInput {
   title: string;
@@ -26,6 +150,12 @@ export interface TaskUpdateInput {
 export interface UseTaskBoardResult {
   loading: boolean;
   tasks: Task[];
+  sortedTasks: Task[];
+  displayMeta: Map<string, TaskDisplayMeta>;
+  attendCounts: AttendCounts;
+  totalTokenUsage: number;
+  showAll: boolean;
+  setShowAll: (v: boolean) => void;
   loopStatus: LoopStatus;
   createTask: (input: TaskCreateInput) => Promise<void>;
   updateTask: (id: string, input: TaskUpdateInput) => Promise<void>;
@@ -41,8 +171,13 @@ export interface UseTaskBoardResult {
   refresh: () => void;
 }
 
+// ─── Hook ──────────────────────────────────────────────────────────────────
+
 export function useTaskBoard(): UseTaskBoardResult {
   const [loading, setLoading] = useState(true);
+  const [showAll, setShowAll] = useState(false);
+  const [now, setNow] = useState(Date.now);
+
   const tasks = useMitzoStore((s) => s.tasks.tree);
   const loopStatus = useMitzoStore((s) => s.tasks.loopStatus);
   const loadTasks = useMitzoStore((s) => s.loadTasks);
@@ -78,9 +213,45 @@ export function useTaskBoard(): UseTaskBoardResult {
     };
   }, [loadLoopStatus, refreshTasks]);
 
+  // Fade timer — recompute every 60s for done task opacity
+  useEffect(() => {
+    const hasDone = tasks.some(
+      (t) => t.status === 'done' || t.children.some((c) => c.status === 'done'),
+    );
+    if (!hasDone) return;
+    const interval = setInterval(() => setNow(Date.now()), 60_000);
+    return () => clearInterval(interval);
+  }, [tasks]);
+
+  // Sorted tasks (root level only; children keep tree order)
+  const sortedTasks = useMemo(() => (showAll ? tasks : sortByAttendTier(tasks)), [tasks, showAll]);
+
+  // Display meta for all tasks
+  const displayMeta = useMemo(() => {
+    const map = new Map<string, TaskDisplayMeta>();
+    collectDisplayMeta(tasks, now, map);
+    return map;
+  }, [tasks, now]);
+
+  // Attend counts
+  const attendCounts = useMemo(() => {
+    const counts: AttendCounts = { t1: 0, t2: 0, t3: 0 };
+    countAttendTiers(tasks, counts);
+    return counts;
+  }, [tasks]);
+
+  // Total token usage
+  const totalTokenUsage = useMemo(() => sumTokenUsage(tasks), [tasks]);
+
   return {
     loading,
     tasks,
+    sortedTasks,
+    displayMeta,
+    attendCounts,
+    totalTokenUsage,
+    showAll,
+    setShowAll,
     loopStatus,
     createTask: useCallback(
       (input: TaskCreateInput) => storeCreateTask(input as unknown as Record<string, unknown>),
diff --git a/frontend/src/lib/formatTime.ts b/frontend/src/lib/formatTime.ts
index e97e2ce3..2b3022a4 100644
--- a/frontend/src/lib/formatTime.ts
+++ b/frontend/src/lib/formatTime.ts
@@ -3,6 +3,15 @@ export function formatTime(ts?: number): string | null {
   return new Date(ts).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
 }
 
+export function formatDuration(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h`;
+}
+
 export function formatRelativeTime(ts: number): string {
   const diff = Date.now() - ts;
   const mins = Math.floor(diff / 60000);
diff --git a/frontend/src/pages/TaskBoard.tsx b/frontend/src/pages/TaskBoard.tsx
index 0f0b5f33..fc900dcd 100644
--- a/frontend/src/pages/TaskBoard.tsx
+++ b/frontend/src/pages/TaskBoard.tsx
@@ -12,6 +12,11 @@ export function TaskBoard() {
   const {
     loading,
     tasks,
+    sortedTasks,
+    displayMeta,
+    totalTokenUsage,
+    showAll,
+    setShowAll,
     loopStatus,
     createTask,
     updateTask,
@@ -66,6 +71,13 @@ export function TaskBoard() {
         >
           {'\u2699'}
         </button>
+        <button
+          className={`task-board-show-all${showAll ? ' task-board-show-all--active' : ''}`}
+          onClick={() => setShowAll(!showAll)}
+          title={showAll ? 'Sort by attention' : 'Show tree order'}
+        >
+          {showAll ? 'Tree' : 'Tiers'}
+        </button>
         <button className="task-board-refresh" onClick={refresh} title="Refresh">
           &#x21bb;
         </button>
@@ -74,6 +86,7 @@ export function TaskBoard() {
       <LoopControls
         loopStatus={loopStatus}
         goals={goals}
+        totalTokenUsage={totalTokenUsage}
         onStart={startLoop}
         onPause={pauseLoop}
         onResume={resumeLoop}
@@ -107,12 +120,13 @@ export function TaskBoard() {
       )}
 
       <div className="task-board-list">
-        {tasks.map((task) => (
+        {sortedTasks.map((task) => (
           <TaskNode
             key={task.id}
             task={task}
             depth={0}
             activeTaskId={loopStatus.activeTaskId}
+            displayMeta={displayMeta}
             onStatusChange={handleStatusChange}
             onDelete={handleDelete}
             onAddChild={handleAddChild}
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 0a0fd92d..d20f066a 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -25,6 +25,15 @@
   --warning: #ff9800;
   --shadow: rgba(0, 0, 0, 0.3);
 
+  /* Task state colors */
+  --task-pending: var(--text-dim);
+  --task-active: #b48cff;
+  --task-done: #4ade80;
+  --task-review: #fbbf24;
+  --task-blocked: #ff6d6d;
+  --task-failed: #ef4444;
+  --task-skipped: var(--text-dim);
+
   /* Type scale */
   --text-2xs: 0.65rem;
   --text-xxs: 0.7rem;
@@ -4636,29 +4645,65 @@ textarea:focus {
 
 .task-node {
   padding: var(--space-1) 0;
+  transition: opacity 0.5s ease;
 }
 
-.task-node--active > .task-node-row {
-  border-left: 3px solid var(--accent);
-}
-
-.task-node-action--approve:hover {
-  color: var(--success);
+.task-node--hidden {
+  display: none;
 }
 
 .task-node-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--space-1h);
-  padding: var(--space-1h) var(--space-2);
+  padding: var(--space-2) var(--space-2);
   border-radius: 6px;
   background: var(--surface);
+  border-left: 3px solid transparent;
 }
 
 .task-node-row:hover {
   background: var(--border);
 }
 
+/* State-colored left borders */
+.task-node--status-pending > .task-node-row {
+  border-left-color: var(--task-pending);
+}
+.task-node--status-active > .task-node-row {
+  border-left-color: var(--task-active);
+}
+.task-node--status-done > .task-node-row {
+  border-left-color: var(--task-done);
+}
+.task-node--status-pending_review > .task-node-row {
+  border-left-color: var(--task-review);
+}
+.task-node--status-blocked > .task-node-row {
+  border-left-color: var(--task-blocked);
+}
+.task-node--status-skipped > .task-node-row {
+  border-left-color: var(--task-skipped);
+}
+.task-node--status-failed > .task-node-row {
+  border-left-color: var(--task-failed);
+}
+
+/* T1 (needs you) background tint */
+.task-node--t1.task-node--status-pending_review > .task-node-row {
+  background: rgba(251, 191, 36, 0.08);
+}
+.task-node--t1.task-node--status-blocked > .task-node-row {
+  background: rgba(255, 109, 109, 0.08);
+}
+.task-node--t1.task-node--status-failed > .task-node-row {
+  background: rgba(239, 68, 68, 0.08);
+}
+
+.task-node-action--approve:hover {
+  color: var(--success);
+}
+
 .task-node-chevron {
   background: none;
   border: none;
@@ -4667,6 +4712,7 @@ textarea:focus {
   cursor: pointer;
   padding: 2px 4px;
   min-width: 20px;
+  margin-top: 2px;
 }
 
 .task-node-status {
@@ -4677,38 +4723,37 @@ textarea:focus {
   padding: 2px;
   min-width: 20px;
   text-align: center;
+  margin-top: 1px;
 }
 
 .task-node-status--pending {
-  color: var(--text-dim);
+  color: var(--task-pending);
 }
-
 .task-node-status--active {
-  color: var(--accent);
+  color: var(--task-active);
 }
-
 .task-node-status--done {
-  color: var(--success);
+  color: var(--task-done);
 }
-
 .task-node-status--pending_review {
-  color: var(--accent);
+  color: var(--task-review);
 }
-
 .task-node-status--blocked {
-  color: var(--warning);
+  color: var(--task-blocked);
 }
-
 .task-node-status--skipped {
-  color: var(--text-dim);
+  color: var(--task-skipped);
 }
-
 .task-node-status--failed {
-  color: var(--danger);
+  color: var(--task-failed);
 }
 
-.task-node-title {
+.task-node-body {
   flex: 1;
+  min-width: 0;
+}
+
+.task-node-title {
   font-size: var(--text-md);
   line-height: 1.3;
 }
@@ -4718,11 +4763,29 @@ textarea:focus {
   color: var(--text-dim);
 }
 
+.task-node-context {
+  font-size: var(--text-xs);
+  color: var(--text-dim);
+  margin-top: 2px;
+  line-height: 1.3;
+}
+
+.task-node-context--review {
+  color: var(--task-review);
+}
+.task-node-context--blocked {
+  color: var(--task-blocked);
+}
+.task-node-context--failed {
+  color: var(--task-failed);
+}
+
 .task-node-actions {
   display: flex;
   gap: var(--space-1);
   opacity: 0;
   transition: opacity 0.15s;
+  align-self: center;
 }
 
 .task-node-row:hover .task-node-actions {
@@ -4753,6 +4816,21 @@ textarea:focus {
   border-left: 1px solid var(--border);
 }
 
+/* Show all toggle */
+.task-board-show-all {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: var(--text-xs);
+  padding: 2px 8px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+.task-board-show-all--active {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
 /* ── Task Create Form ───────────────────────────────────── */
 
 .task-create-form {
@@ -4823,50 +4901,38 @@ textarea:focus {
 /* ── Loop Controls ────────────────────────────────────── */
 
 .loop-controls {
-  padding: var(--space-2) 0;
-  margin-bottom: var(--space-2);
+  padding: var(--space-1h) 0;
+  margin-bottom: var(--space-1h);
 }
 
-.loop-controls-header {
+/* Idle: compact trigger */
+.loop-controls-start-trigger {
   display: flex;
   align-items: center;
   gap: var(--space-2);
-  margin-bottom: var(--space-1h);
-}
-
-.loop-controls-pill {
-  font-size: var(--text-xs);
-  font-weight: 600;
-  padding: 2px 10px;
-  border-radius: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.loop-controls-pill--idle {
-  background: var(--border);
+  width: 100%;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: var(--space-2) var(--space-3);
   color: var(--text-dim);
+  font-size: var(--text-sm);
+  cursor: pointer;
 }
-
-.loop-controls-pill--running {
-  background: var(--success);
-  color: var(--bg);
-}
-
-.loop-controls-pill--paused {
-  background: var(--warning);
-  color: var(--bg);
-}
-
-.loop-controls-progress {
-  font-size: var(--text-s);
-  color: var(--text-dim);
+.loop-controls-start-trigger:hover {
+  background: var(--border);
+  color: var(--text);
 }
 
-.loop-controls-start {
+/* Expanded picker (shown when trigger is tapped) */
+.loop-controls-start-expanded {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: var(--space-3);
 }
 
 .loop-controls-start-row {
@@ -4878,7 +4944,7 @@ textarea:focus {
 .loop-controls-select {
   flex: 1;
   min-width: 120px;
-  background: var(--surface);
+  background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: 6px 10px;
@@ -4895,16 +4961,74 @@ textarea:focus {
   cursor: pointer;
 }
 
-.loop-controls-actions {
+/* Inline bar (running/paused) */
+.loop-controls-inline-bar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.loop-controls-inline-bar-top {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.loop-controls-inline-bar-bottom {
   display: flex;
+  align-items: center;
   gap: var(--space-2);
 }
 
+.loop-controls-pill {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  padding: 2px 10px;
+  border-radius: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.loop-controls-pill--running {
+  background: var(--task-active);
+  color: var(--bg);
+}
+
+.loop-controls-pill--paused {
+  background: var(--warning);
+  color: var(--bg);
+}
+
+.loop-controls-pill--review {
+  background: var(--task-review);
+  color: var(--bg);
+}
+
+.loop-controls-progress {
+  font-size: var(--text-s);
+  color: var(--text-dim);
+}
+
+.loop-controls-token-count {
+  font-size: var(--text-xs);
+  color: var(--text-dim);
+  margin-left: auto;
+}
+
+.loop-controls-spacer {
+  flex: 1;
+}
+
+.loop-controls-actions {
+  display: flex;
+  gap: var(--space-1);
+}
+
 .loop-controls-btn {
-  background: var(--surface);
+  background: none;
   border: 1px solid var(--border);
   border-radius: 6px;
-  padding: 6px 14px;
+  padding: 4px 10px;
   font-size: var(--text-sm);
   color: var(--text);
   cursor: pointer;
@@ -4930,36 +5054,40 @@ textarea:focus {
 }
 
 .loop-controls-btn--danger {
-  background: var(--danger);
-  color: white;
+  color: var(--danger);
   border-color: var(--danger);
 }
 
 .loop-controls-btn--danger:hover {
-  opacity: 0.9;
+  background: rgba(244, 67, 54, 0.1);
 }
 
-.loop-controls-approval {
+/* Approval card */
+.loop-controls-approval-card {
   margin-top: var(--space-2);
+  padding: var(--space-3);
+  background: rgba(251, 191, 36, 0.08);
+  border: 1px solid var(--task-review);
+  border-radius: 8px;
 }
 
 .loop-controls-approval-msg {
   font-size: var(--text-sm);
-  color: var(--accent);
-  margin-bottom: var(--space-1h);
+  color: var(--task-review);
+  margin-bottom: var(--space-2);
 }
 
 .loop-controls-bar {
   height: 4px;
   background: var(--border);
   border-radius: 2px;
-  margin-top: var(--space-2);
   overflow: hidden;
+  flex: 1;
 }
 
 .loop-controls-bar-fill {
   height: 100%;
-  background: var(--success);
+  background: var(--task-active);
   border-radius: 2px;
   transition: width 0.3s ease;
 }

From c40a66179e032dd9bec0b81c0142ca095b253e15 Mon Sep 17 00:00:00 2001
From: dimakis <dimitri.saridakis@gmail.com>
Date: Sat, 9 May 2026 14:40:22 +0100
Subject: [PATCH 2/2] fix(ui): address code review items on task board redesign

- Fix timer to activate for all tasks, not just done tasks, so active
  task elapsed times update every 60s
- Pass `now` parameter to computeFadeOpacity instead of calling
  Date.now() directly, preserving the memoization pattern
- Remove shallow hasDone check (was only 2 levels deep); timer now
  activates whenever tasks.length > 0, making depth irrelevant
- Remove unused attendCounts from hook return and its supporting code
- Show context lines for tier-1 children (pending_review/blocked/failed)
  instead of always suppressing them with compact={true}

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/TaskNode.tsx | 35 +++++++++++++-----------
 frontend/src/hooks/useTaskBoard.ts   | 40 ++++------------------------
 2 files changed, 25 insertions(+), 50 deletions(-)

diff --git a/frontend/src/components/TaskNode.tsx b/frontend/src/components/TaskNode.tsx
index ef6a9772..34ef9e7a 100644
--- a/frontend/src/components/TaskNode.tsx
+++ b/frontend/src/components/TaskNode.tsx
@@ -198,21 +198,26 @@ export function TaskNode({
       )}
       {hasChildren && expanded && (
         <div className="task-node-children">
-          {task.children.map((child) => (
-            <TaskNode
-              key={child.id}
-              task={child}
-              depth={depth + 1}
-              compact={true}
-              activeTaskId={activeTaskId}
-              displayMeta={displayMeta}
-              onStatusChange={onStatusChange}
-              onDelete={onDelete}
-              onAddChild={onAddChild}
-              onApprove={onApprove}
-              onReject={onReject}
-            />
-          ))}
+          {task.children.map((child) => {
+            // Tier-1 children (pending_review, blocked, failed) should show context lines
+            const childMeta = displayMeta?.get(child.id);
+            const childCompact = childMeta?.attendTier !== 1;
+            return (
+              <TaskNode
+                key={child.id}
+                task={child}
+                depth={depth + 1}
+                compact={childCompact}
+                activeTaskId={activeTaskId}
+                displayMeta={displayMeta}
+                onStatusChange={onStatusChange}
+                onDelete={onDelete}
+                onAddChild={onAddChild}
+                onApprove={onApprove}
+                onReject={onReject}
+              />
+            );
+          })}
         </div>
       )}
     </div>
diff --git a/frontend/src/hooks/useTaskBoard.ts b/frontend/src/hooks/useTaskBoard.ts
index b64a9188..2806071a 100644
--- a/frontend/src/hooks/useTaskBoard.ts
+++ b/frontend/src/hooks/useTaskBoard.ts
@@ -15,12 +15,6 @@ export interface TaskDisplayMeta {
   blockerSummary?: string;
 }
 
-export interface AttendCounts {
-  t1: number;
-  t2: number;
-  t3: number;
-}
-
 // ─── Pure helpers ──────────────────────────────────────────────────────────
 
 const FADE_START_MS = 5 * 60 * 1000; // 5 minutes
@@ -41,9 +35,9 @@ function getAttendTier(status: TaskStatus): 1 | 2 | 3 | 4 {
   }
 }
 
-function computeFadeOpacity(completedAt: number | null): number {
+function computeFadeOpacity(completedAt: number | null, now: number): number {
   if (!completedAt) return 1;
-  const elapsed = Date.now() - completedAt;
+  const elapsed = now - completedAt;
   if (elapsed < FADE_START_MS) return 1;
   if (elapsed >= FADE_END_MS) return 0;
   // Linear fade from 1 → 0.5 between 5min and 30min
@@ -54,7 +48,7 @@ function buildDisplayMeta(task: Task, now: number): TaskDisplayMeta {
   const tier = getAttendTier(task.status);
   const meta: TaskDisplayMeta = {
     attendTier: tier,
-    fadeOpacity: task.status === 'done' ? computeFadeOpacity(task.completedAt) : 1,
+    fadeOpacity: task.status === 'done' ? computeFadeOpacity(task.completedAt, now) : 1,
   };
 
   if (task.status === 'done' && task.completedAt) {
@@ -82,18 +76,6 @@ function collectDisplayMeta(tasks: Task[], now: number, map: Map<string, TaskDis
   }
 }
 
-function countAttendTiers(tasks: Task[], counts: AttendCounts): void {
-  for (const task of tasks) {
-    const tier = getAttendTier(task.status);
-    if (tier === 1) counts.t1++;
-    else if (tier === 2) counts.t2++;
-    else if (tier === 3) counts.t3++;
-    if (task.children.length > 0) {
-      countAttendTiers(task.children, counts);
-    }
-  }
-}
-
 function sortByAttendTier(tasks: Task[]): Task[] {
   return [...tasks].sort((a, b) => {
     const tierA = getAttendTier(a.status);
@@ -152,7 +134,6 @@ export interface UseTaskBoardResult {
   tasks: Task[];
   sortedTasks: Task[];
   displayMeta: Map<string, TaskDisplayMeta>;
-  attendCounts: AttendCounts;
   totalTokenUsage: number;
   showAll: boolean;
   setShowAll: (v: boolean) => void;
@@ -213,12 +194,9 @@ export function useTaskBoard(): UseTaskBoardResult {
     };
   }, [loadLoopStatus, refreshTasks]);
 
-  // Fade timer — recompute every 60s for done task opacity
+  // Timer — recompute every 60s for done task fade opacity and active task elapsed time
   useEffect(() => {
-    const hasDone = tasks.some(
-      (t) => t.status === 'done' || t.children.some((c) => c.status === 'done'),
-    );
-    if (!hasDone) return;
+    if (tasks.length === 0) return;
     const interval = setInterval(() => setNow(Date.now()), 60_000);
     return () => clearInterval(interval);
   }, [tasks]);
@@ -233,13 +211,6 @@ export function useTaskBoard(): UseTaskBoardResult {
     return map;
   }, [tasks, now]);
 
-  // Attend counts
-  const attendCounts = useMemo(() => {
-    const counts: AttendCounts = { t1: 0, t2: 0, t3: 0 };
-    countAttendTiers(tasks, counts);
-    return counts;
-  }, [tasks]);
-
   // Total token usage
   const totalTokenUsage = useMemo(() => sumTokenUsage(tasks), [tasks]);
 
@@ -248,7 +219,6 @@ export function useTaskBoard(): UseTaskBoardResult {
     tasks,
     sortedTasks,
     displayMeta,
-    attendCounts,
     totalTokenUsage,
     showAll,
     setShowAll,