diff --git a/codeframe/ui/routers/streaming_v2.py b/codeframe/ui/routers/streaming_v2.py
index 3116592d..06ee14c6 100644
--- a/codeframe/ui/routers/streaming_v2.py
+++ b/codeframe/ui/routers/streaming_v2.py
@@ -1,32 +1,21 @@
-"""SSE streaming router for real-time task execution events.
+"""SSE streaming utilities for real-time task execution events.
 
-This module provides Server-Sent Events (SSE) endpoints for streaming
-task execution progress to web clients.
+This module provides shared SSE utilities (formatting, event generation,
+publisher management) used by streaming consumers.
 
-Endpoints:
-- GET /api/v2/tasks/{task_id}/stream - SSE stream of execution events
-
-This router follows the thin adapter pattern:
-1. Parse HTTP request parameters
-2. Subscribe to EventPublisher from core.streaming
-3. Format events as SSE and stream to client
-4. Handle disconnection gracefully
+The actual SSE endpoint for tasks is in tasks_v2.py:
+  GET /api/v2/tasks/{task_id}/stream (requires workspace_path only)
 """
 
 import asyncio
 import logging
 from typing import AsyncGenerator, Optional
 
-from fastapi import APIRouter, Depends, HTTPException, Request
-from fastapi.responses import StreamingResponse
+from fastapi import APIRouter, Request
+from fastapi.responses import StreamingResponse  # noqa: F401 — re-exported
 
-from codeframe.auth import User
-from codeframe.auth.dependencies import get_current_user
-from codeframe.core import tasks
 from codeframe.core.models import ExecutionEvent
 from codeframe.core.streaming import EventPublisher
-from codeframe.core.workspace import Workspace
-from codeframe.ui.dependencies import get_v2_workspace
 
 logger = logging.getLogger(__name__)
 
@@ -96,37 +85,53 @@ async def event_stream_generator(
     task_id: str,
     publisher: EventPublisher,
     request: Request,
-    heartbeat_interval: float = 30.0,
+    heartbeat_interval: float = 15.0,
 ) -> AsyncGenerator[str, None]:
-    """Generate SSE events for a task.
+    """Generate SSE events for a task with heartbeat keep-alive.
 
-    This async generator yields SSE-formatted strings as events
-    are published for the given task.
+    Subscribes to the EventPublisher and yields SSE-formatted strings.
+    Emits SSE comments as heartbeats during idle periods to prevent
+    proxy/browser timeouts.
 
     Args:
         task_id: Task ID to stream events for
         publisher: EventPublisher to subscribe to
         request: FastAPI request (for disconnect detection)
-        heartbeat_interval: Seconds between heartbeat events
+        heartbeat_interval: Seconds between heartbeat comments
 
     Yields:
-        SSE-formatted event strings
+        SSE-formatted event strings or comment heartbeats
     """
     logger.info(f"Starting SSE stream for task {task_id}")
 
+    queue: asyncio.Queue = asyncio.Queue(maxsize=1000)
+    loop = asyncio.get_running_loop()
+
+    from codeframe.core.streaming import _Subscription
+    subscription = _Subscription(task_id, queue, loop)
+
+    async with publisher._lock:
+        publisher._subscribers[task_id].append(subscription)
+
     try:
-        async for event in publisher.subscribe(task_id):
-            # Check if client disconnected
+        while True:
             if await request.is_disconnected():
                 logger.info(f"Client disconnected from task {task_id} stream")
                 break
 
-            yield format_sse_event(event)
+            try:
+                item = await asyncio.wait_for(queue.get(), timeout=heartbeat_interval)
 
-            # If this is a completion event, we're done
-            if event.event_type == "completion":
-                logger.info(f"Task {task_id} completed, closing stream")
-                break
+                if item is _Subscription.END_OF_STREAM:
+                    break
+
+                yield format_sse_event(item)
+
+                if item.event_type == "completion":
+                    logger.info(f"Task {task_id} completed, closing stream")
+                    break
+            except asyncio.TimeoutError:
+                yield format_sse_comment("heartbeat")
 
     except asyncio.CancelledError:
         logger.info(f"SSE stream cancelled for task {task_id}")
@@ -135,97 +140,16 @@ async def event_stream_generator(
         logger.error(f"Error in SSE stream for task {task_id}: {e}")
         raise
     finally:
+        async with publisher._lock:
+            if subscription in publisher._subscribers[task_id]:
+                publisher._subscribers[task_id].remove(subscription)
+            if not publisher._subscribers[task_id]:
+                del publisher._subscribers[task_id]
         logger.info(f"Closing SSE stream for task {task_id}")
 
 
-@router.get(
-    "/{task_id}/stream",
-    response_class=StreamingResponse,
-    summary="Stream task execution events",
-    description="""
-    Stream real-time execution events for a task using Server-Sent Events (SSE).
-
-    **Authentication required**: Pass JWT token via Authorization header or cookie.
-
-    The stream includes:
-    - **progress**: Phase transitions and step updates
-    - **output**: stdout/stderr from commands
-    - **blocker**: Human-in-the-loop questions
-    - **completion**: Task finished (stream closes)
-    - **error**: Errors during execution
-    - **heartbeat**: Keep-alive (configurable, default 30s)
-
-    The stream closes when:
-    - Task completes (success or failure)
-    - Client disconnects
-    - Server error occurs
-
-    Example client (JavaScript):
-    ```javascript
-    const eventSource = new EventSource('/api/v2/tasks/123/stream', {
-        headers: { 'Authorization': 'Bearer <token>' }
-    });
-    eventSource.onmessage = (e) => {
-        const event = JSON.parse(e.data);
-        console.log(event.event_type, event.data);
-    };
-    ```
-
-    Configuration (via environment variables):
-    - SSE_TIMEOUT_SECONDS: Timeout for event wait (default: 30)
-    - SSE_MAX_QUEUE_SIZE: Max queued events (default: 1000)
-    - SSE_OUTPUT_MAX_CHARS: Max output chars per event (default: 2000)
-    """,
-    responses={
-        200: {
-            "description": "SSE event stream",
-            "content": {
-                "text/event-stream": {
-                    "example": 'data: {"event_type":"progress","task_id":"123",...}\n\n'
-                }
-            },
-        },
-        401: {"description": "Authentication required"},
-        404: {"description": "Task not found"},
-    },
-)
-async def stream_task_events(
-    task_id: str,
-    request: Request,
-    workspace: Workspace = Depends(get_v2_workspace),
-    current_user: User = Depends(get_current_user),
-) -> StreamingResponse:
-    """Stream execution events for a task via SSE.
-
-    Args:
-        task_id: ID of the task to stream
-        request: FastAPI request object
-        workspace: User's workspace (injected by dependency)
-        current_user: Authenticated user (injected by dependency)
-
-    Returns:
-        StreamingResponse with SSE content type
-
-    Raises:
-        HTTPException: 404 if task not found in workspace
-    """
-    # Verify task exists in user's workspace
-    task = tasks.get(workspace, task_id)
-    if not task:
-        raise HTTPException(status_code=404, detail=f"Task {task_id} not found")
-
-    publisher = get_event_publisher()
-
-    # Log subscription without PII (use user ID instead of email)
-    logger.info("User %s subscribed to task %s stream in workspace %s",
-                current_user.id, task_id, workspace.id)
-
-    return StreamingResponse(
-        event_stream_generator(task_id, publisher, request),
-        media_type="text/event-stream",
-        headers={
-            "Cache-Control": "no-cache",
-            "Connection": "keep-alive",
-            "X-Accel-Buffering": "no",  # Disable nginx buffering
-        },
-    )
+# NOTE: The SSE stream endpoint for tasks is defined in tasks_v2.py
+# (GET /api/v2/tasks/{task_id}/stream) which only requires workspace_path
+# and is compatible with browser EventSource (no custom auth headers needed).
+# This module retains the shared utilities (format_sse_event, format_sse_comment,
+# event_stream_generator, get_event_publisher) used by other streaming consumers.
diff --git a/codeframe/ui/routers/tasks_v2.py b/codeframe/ui/routers/tasks_v2.py
index 09bde469..6e660880 100644
--- a/codeframe/ui/routers/tasks_v2.py
+++ b/codeframe/ui/routers/tasks_v2.py
@@ -15,6 +15,7 @@
 """
 
 import logging
+import threading
 from typing import Any, Optional
 
 from fastapi import APIRouter, BackgroundTasks, Depends, HTTPException, Query, Request
@@ -24,6 +25,7 @@
 from codeframe.core.workspace import Workspace
 from codeframe.lib.rate_limiter import rate_limit_ai, rate_limit_standard
 from codeframe.core import runtime, tasks, conductor, streaming
+from codeframe.core.runtime import RunStatus
 from codeframe.core.state_machine import TaskStatus
 from codeframe.ui.dependencies import get_v2_workspace
 from codeframe.ui.response_models import api_error, ErrorCodes
@@ -595,15 +597,37 @@ async def start_single_task(
         }
 
         if execute:
-            # Execute agent synchronously (for API, might want to make this async/background)
-            state = runtime.execute_agent(
-                workspace,
-                run,
-                dry_run=dry_run,
-                verbose=verbose,
-            )
-            result["agent_status"] = state.status.value if hasattr(state.status, 'value') else str(state.status)
-            result["message"] = f"Execution completed with status: {result['agent_status']}"
+            from codeframe.ui.routers.streaming_v2 import get_event_publisher
+            from codeframe.core.models import ErrorEvent
+
+            publisher = get_event_publisher()
+
+            def _run_agent():
+                try:
+                    runtime.execute_agent(
+                        workspace,
+                        run,
+                        dry_run=dry_run,
+                        verbose=verbose,
+                        event_publisher=publisher,
+                    )
+                except Exception as exc:
+                    logger.error(f"Background agent failed for task {task_id}: {exc}", exc_info=True)
+                    publisher.publish_sync(
+                        task_id,
+                        ErrorEvent(
+                            task_id=task_id,
+                            error=str(exc),
+                            error_type=type(exc).__name__,
+                        ),
+                    )
+                    publisher.complete_task_sync(task_id)
+
+            thread = threading.Thread(target=_run_agent, daemon=True)
+            thread.start()
+
+            result["status"] = "executing"
+            result["message"] = f"Execution started in background for task {task_id[:8]}. Connect to GET /{task_id}/stream for events."
 
         return result
 
@@ -723,19 +747,21 @@ async def resume_task(
 # ============================================================================
 
 
-@router.get("/{task_id}/stream")
+@router.get("/{task_id}/output")
 @rate_limit_standard()
-async def stream_task_output(
+async def stream_task_output_lines(
     request: Request,
     task_id: str,
     tail: int = Query(0, ge=0, le=1000, description="Show last N lines before streaming"),
     workspace: Workspace = Depends(get_v2_workspace),
 ) -> StreamingResponse:
-    """Stream real-time output from a running task.
+    """Stream raw output lines from a running task.
 
-    Returns Server-Sent Events (SSE) with task output lines.
+    Returns Server-Sent Events (SSE) with raw text output lines.
+    This is the API equivalent of `cf work follow <task-id>`.
 
-    This is the v2 equivalent of `cf work follow <task-id>`.
+    For structured JSON execution events (progress, output, blocker,
+    completion, error), use GET /{task_id}/stream instead.
 
     Event types:
         - `line`: A line of output from the task
@@ -827,6 +853,101 @@ def generate_events():
     )
 
 
+@router.get("/{task_id}/stream")
+async def stream_task_events(
+    request: Request,
+    task_id: str,
+    workspace: Workspace = Depends(get_v2_workspace),
+) -> StreamingResponse:
+    """Stream structured execution events for a task via SSE.
+
+    Returns Server-Sent Events with JSON-formatted ExecutionEvent payloads.
+    Compatible with browser EventSource (no custom auth headers required).
+
+    Event types (in data.event_type):
+        - ``progress``: Phase/step transitions
+        - ``output``: stdout/stderr lines
+        - ``blocker``: Human input needed
+        - ``completion``: Task finished (success/failure/blocked)
+        - ``error``: Execution error
+        - ``heartbeat``: Keep-alive
+
+    For raw text output lines (cf work follow equivalent),
+    use GET /{task_id}/output instead.
+    """
+    task = tasks.get(workspace, task_id)
+    if not task:
+        raise HTTPException(
+            status_code=404,
+            detail=api_error("Task not found", ErrorCodes.NOT_FOUND, f"No task with id {task_id}"),
+        )
+
+    from codeframe.ui.routers.streaming_v2 import (
+        event_stream_generator,
+        format_sse_event,
+        get_event_publisher,
+    )
+    from codeframe.core.models import CompletionEvent, ProgressEvent
+
+    publisher = get_event_publisher()
+
+    # Check if the task already has a terminal run — if so, send a synthetic
+    # completion event immediately instead of waiting for events that will
+    # never arrive (the agent is done, the EventPublisher has no buffering).
+    run = runtime.get_active_run(workspace, task_id)
+    latest_run = runtime.get_latest_run(workspace, task_id) if not run else None
+    already_terminal = (
+        latest_run is not None
+        and latest_run.status in (RunStatus.COMPLETED, RunStatus.FAILED, RunStatus.BLOCKED)
+    ) if not run else False
+
+    async def _generate():
+        # Always send an initial progress event so the browser's EventSource
+        # fires onmessage and the client transitions from CONNECTING state.
+        yield format_sse_event(
+            ProgressEvent(
+                task_id=task_id,
+                phase="connected",
+                step=0,
+                total_steps=0,
+                message="Stream connected",
+            )
+        )
+
+        if already_terminal:
+            # Task already finished — emit a synthetic completion event.
+            status_map = {
+                RunStatus.COMPLETED: "completed",
+                RunStatus.FAILED: "failed",
+                RunStatus.BLOCKED: "blocked",
+            }
+            duration = 0.0
+            if latest_run.started_at and latest_run.completed_at:
+                duration = (latest_run.completed_at - latest_run.started_at).total_seconds()
+            yield format_sse_event(
+                CompletionEvent(
+                    task_id=task_id,
+                    status=status_map[latest_run.status],
+                    duration_seconds=duration,
+                )
+            )
+            return
+
+        # Live stream — subscribe to the EventPublisher for real-time events.
+        async for chunk in event_stream_generator(task_id, publisher, request):
+            yield chunk
+
+    return StreamingResponse(
+        _generate(),
+        media_type="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+            "X-Accel-Buffering": "no",
+        },
+    )
+
+
 @router.get("/{task_id}/run")
 @rate_limit_standard()
 async def get_task_run(
diff --git a/tests/ui/test_streaming_router.py b/tests/ui/test_streaming_router.py
index c0284645..2765fa18 100644
--- a/tests/ui/test_streaming_router.py
+++ b/tests/ui/test_streaming_router.py
@@ -1,15 +1,11 @@
 """Tests for SSE streaming router.
 
-TDD: Tests written first to define expected behavior of
-the /api/v2/tasks/{task_id}/stream SSE endpoint.
+Tests for SSE event formatting, publisher management, and
+the event_stream_generator used by /api/v2/tasks/{task_id}/stream.
 """
 
 import json
 
-import pytest
-from fastapi import FastAPI
-from fastapi.testclient import TestClient
-
 from codeframe.core.models import (
     ProgressEvent,
     OutputEvent,
@@ -18,57 +14,6 @@
 )
 
 
-@pytest.fixture
-def mock_user():
-    """Create a mock authenticated user."""
-    from codeframe.auth import User
-    return User(id=1, email="test@example.com", hashed_password="!DISABLED!")
-
-
-@pytest.fixture
-def mock_workspace(tmp_path):
-    """Create a mock workspace."""
-    from codeframe.core.workspace import Workspace
-    from datetime import datetime, timezone
-
-    workspace = Workspace(
-        id="test-workspace-id",
-        repo_path=tmp_path,
-        state_dir=tmp_path / ".codeframe",
-        created_at=datetime.now(timezone.utc),
-    )
-    # Create state directory
-    workspace.state_dir.mkdir(parents=True, exist_ok=True)
-    return workspace
-
-
-@pytest.fixture
-def app_with_streaming(mock_user, mock_workspace, monkeypatch):
-    """Create a FastAPI app with the streaming router and mocked dependencies."""
-    from codeframe.ui.routers.streaming_v2 import router
-    from codeframe.auth.dependencies import get_current_user
-    from codeframe.ui.dependencies import get_v2_workspace
-    from codeframe.core import tasks
-
-    # Create a mock task
-    from unittest.mock import MagicMock
-    mock_task = MagicMock()
-    mock_task.id = "test-task"
-    mock_task.title = "Test Task"
-
-    # Patch tasks.get to return our mock task
-    monkeypatch.setattr(tasks, "get", lambda workspace, task_id: mock_task)
-
-    app = FastAPI()
-    app.include_router(router)
-
-    # Override dependencies
-    app.dependency_overrides[get_current_user] = lambda: mock_user
-    app.dependency_overrides[get_v2_workspace] = lambda: mock_workspace
-
-    return app
-
-
 class TestSSEEventFormat:
     """Tests for SSE event formatting."""
 
@@ -160,66 +105,19 @@ def test_sse_comment_format(self):
 
 
 class TestStreamingRouterEndpoint:
-    """Tests for streaming router endpoint configuration."""
-
-    def test_endpoint_exists(self, app_with_streaming):
-        """The streaming endpoint should be registered."""
-        client = TestClient(app_with_streaming)
+    """Tests for streaming router configuration.
 
-        # Get the OpenAPI schema to verify endpoint exists
-        response = client.get("/openapi.json")
-        assert response.status_code == 200
+    NOTE: The SSE stream endpoint (GET /api/v2/tasks/{task_id}/stream) lives
+    in tasks_v2.py. It only requires workspace_path, making it compatible
+    with browser EventSource which cannot send custom auth headers.
+    streaming_v2.py provides shared utilities only (no endpoints).
+    """
 
-        schema = response.json()
-        paths = schema.get("paths", {})
+    def test_streaming_router_has_no_endpoints(self):
+        """streaming_v2 router should have no endpoints (utilities only)."""
+        from codeframe.ui.routers.streaming_v2 import router
 
-        # Verify the stream endpoint is registered
-        assert "/api/v2/tasks/{task_id}/stream" in paths
-        assert "get" in paths["/api/v2/tasks/{task_id}/stream"]
-
-    def test_endpoint_returns_streaming_response(self, app_with_streaming):
-        """The endpoint should return a streaming response with SSE content type."""
-        from codeframe.core.streaming import EventPublisher
-        from codeframe.ui.routers import streaming_v2
-
-        # Inject a publisher that immediately completes the task
-        publisher = EventPublisher()
-        streaming_v2.set_event_publisher(publisher)
-
-        try:
-            client = TestClient(app_with_streaming)
-
-            # Use stream=True but set a short timeout via the client
-            # and complete the task immediately
-            import threading
-            import time
-
-            def complete_task():
-                time.sleep(0.1)
-                import asyncio
-                loop = asyncio.new_event_loop()
-                loop.run_until_complete(publisher.complete_task("test-task"))
-                loop.close()
-
-            thread = threading.Thread(target=complete_task)
-            thread.start()
-
-            # The TestClient doesn't easily support streaming,
-            # so we just verify the endpoint starts without error
-            # Real streaming tests require async client
-            with client.stream("GET", "/api/v2/tasks/test-task/stream") as response:
-                assert response.status_code == 200
-                assert "text/event-stream" in response.headers.get("content-type", "")
-                # Read at most a small amount before breaking
-                break_after = 0
-                for _ in response.iter_lines():
-                    break_after += 1
-                    if break_after > 0:
-                        break
-
-            thread.join(timeout=2.0)
-        finally:
-            streaming_v2.set_event_publisher(None)
+        assert len(router.routes) == 0
 
 
 class TestEventPublisherGlobal:
diff --git a/tests/ui/test_v2_routers_integration.py b/tests/ui/test_v2_routers_integration.py
index 9601dcbf..1ddd055c 100644
--- a/tests/ui/test_v2_routers_integration.py
+++ b/tests/ui/test_v2_routers_integration.py
@@ -746,10 +746,10 @@ def test_get_task_run_no_run(self, test_client_with_task):
 
 
 class TestTasksV2Streaming:
-    """Tests for task streaming endpoint."""
+    """Tests for task streaming endpoints (output lines and structured events)."""
 
-    def test_stream_task_no_run(self, test_client_with_task):
-        """Stream endpoint returns 404 when no run exists."""
+    def test_output_stream_no_run(self, test_client_with_task):
+        """Output stream endpoint returns 404 when no run exists."""
         from codeframe.core import tasks
         from codeframe.core.state_machine import TaskStatus
 
@@ -762,12 +762,18 @@ def test_stream_task_no_run(self, test_client_with_task):
             priority=1,
         )
 
-        response = test_client_with_task.get(f"/api/v2/tasks/{new_task.id}/stream")
+        response = test_client_with_task.get(f"/api/v2/tasks/{new_task.id}/output")
 
         assert response.status_code == 404
 
-    def test_stream_task_not_found(self, test_client):
-        """Stream endpoint returns 404 for non-existent task."""
+    def test_output_stream_not_found(self, test_client):
+        """Output stream endpoint returns 404 for non-existent task."""
+        response = test_client.get("/api/v2/tasks/nonexistent-id/output")
+
+        assert response.status_code == 404
+
+    def test_event_stream_not_found(self, test_client):
+        """Structured event stream returns 404 for non-existent task."""
         response = test_client.get("/api/v2/tasks/nonexistent-id/stream")
 
         assert response.status_code == 404
diff --git a/web-ui/.env.example b/web-ui/.env.example
index de34ed34..65524a5c 100644
--- a/web-ui/.env.example
+++ b/web-ui/.env.example
@@ -1,3 +1,9 @@
 # API URL for the CodeFRAME backend
 # During development, the Next.js dev server proxies API requests
 NEXT_PUBLIC_API_URL=
+
+# SSE (Server-Sent Events) direct URL to the FastAPI backend.
+# SSE requires a direct connection — the Next.js rewrite proxy buffers
+# chunked responses, which breaks real-time streaming.
+# Defaults to http://localhost:8000 if not set.
+NEXT_PUBLIC_SSE_URL=http://localhost:8000
diff --git a/web-ui/__mocks__/@hugeicons/react.js b/web-ui/__mocks__/@hugeicons/react.js
index 8545d714..848216f0 100644
--- a/web-ui/__mocks__/@hugeicons/react.js
+++ b/web-ui/__mocks__/@hugeicons/react.js
@@ -42,4 +42,13 @@ module.exports = {
   LinkCircleIcon: createIconMock('LinkCircleIcon'),
   Search01Icon: createIconMock('Search01Icon'),
   CheckListIcon: createIconMock('CheckListIcon'),
+  // Execution Monitor components
+  Idea01Icon: createIconMock('Idea01Icon'),
+  ArrowTurnBackwardIcon: createIconMock('ArrowTurnBackwardIcon'),
+  CommandLineIcon: createIconMock('CommandLineIcon'),
+  AlertDiamondIcon: createIconMock('AlertDiamondIcon'),
+  WifiDisconnected01Icon: createIconMock('WifiDisconnected01Icon'),
+  SidebarLeftIcon: createIconMock('SidebarLeftIcon'),
+  ArrowDown01Icon: createIconMock('ArrowDown01Icon'),
+  StopIcon: createIconMock('StopIcon'),
 };
diff --git a/web-ui/__tests__/components/execution/BlockerEvent.test.tsx b/web-ui/__tests__/components/execution/BlockerEvent.test.tsx
new file mode 100644
index 00000000..f5225958
--- /dev/null
+++ b/web-ui/__tests__/components/execution/BlockerEvent.test.tsx
@@ -0,0 +1,172 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BlockerEvent } from '@/components/execution/BlockerEvent';
+import type { BlockerEvent as BlockerEventType } from '@/hooks/useTaskStream';
+
+// ── Mock API ──────────────────────────────────────────────────────────
+
+const mockAnswer = jest.fn();
+
+jest.mock('@/lib/api', () => ({
+  blockersApi: {
+    answer: (...args: unknown[]) => mockAnswer(...args),
+  },
+}));
+
+// ── Fixtures ──────────────────────────────────────────────────────────
+
+function makeBlockerEvent(overrides: Partial<BlockerEventType> = {}): BlockerEventType {
+  return {
+    event_type: 'blocker',
+    task_id: 'task-1',
+    timestamp: '2026-02-06T10:00:00Z',
+    blocker_id: 42,
+    question: 'Which database should be used?',
+    ...overrides,
+  };
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockAnswer.mockResolvedValue({});
+});
+
+// ── Tests ─────────────────────────────────────────────────────────────
+
+describe('BlockerEvent', () => {
+  it('renders the blocker question and header', () => {
+    render(
+      <BlockerEvent
+        event={makeBlockerEvent()}
+        workspacePath="/test"
+      />
+    );
+
+    expect(screen.getByText('Agent needs your help')).toBeInTheDocument();
+    expect(screen.getByText('Which database should be used?')).toBeInTheDocument();
+    expect(screen.getByText('Execution paused — waiting for response...')).toBeInTheDocument();
+  });
+
+  it('renders context when provided', () => {
+    render(
+      <BlockerEvent
+        event={makeBlockerEvent({ context: 'The project needs a database for persistence.' })}
+        workspacePath="/test"
+      />
+    );
+
+    expect(screen.getByText('The project needs a database for persistence.')).toBeInTheDocument();
+  });
+
+  it('disables submit button when answer is empty', () => {
+    render(
+      <BlockerEvent
+        event={makeBlockerEvent()}
+        workspacePath="/test"
+      />
+    );
+
+    const button = screen.getByRole('button', { name: /answer blocker/i });
+    expect(button).toBeDisabled();
+  });
+
+  it('enables submit button when answer is typed', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <BlockerEvent
+        event={makeBlockerEvent()}
+        workspacePath="/test"
+      />
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your answer...');
+    await user.type(textarea, 'PostgreSQL');
+
+    const button = screen.getByRole('button', { name: /answer blocker/i });
+    expect(button).toBeEnabled();
+  });
+
+  it('calls blockersApi.answer on submit and shows confirmation', async () => {
+    const user = userEvent.setup();
+    const onAnswered = jest.fn();
+
+    render(
+      <BlockerEvent
+        event={makeBlockerEvent()}
+        workspacePath="/test"
+        onAnswered={onAnswered}
+      />
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your answer...');
+    await user.type(textarea, 'PostgreSQL');
+    await user.click(screen.getByRole('button', { name: /answer blocker/i }));
+
+    await waitFor(() => {
+      expect(mockAnswer).toHaveBeenCalledWith('/test', '42', 'PostgreSQL');
+    });
+
+    expect(screen.getByText('Blocker answered. Execution resuming...')).toBeInTheDocument();
+    expect(onAnswered).toHaveBeenCalled();
+  });
+
+  it('shows error when API call fails', async () => {
+    const user = userEvent.setup();
+    mockAnswer.mockRejectedValue({ detail: 'Blocker not found' });
+
+    render(
+      <BlockerEvent
+        event={makeBlockerEvent()}
+        workspacePath="/test"
+      />
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your answer...');
+    await user.type(textarea, 'Some answer');
+    await user.click(screen.getByRole('button', { name: /answer blocker/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Blocker not found')).toBeInTheDocument();
+    });
+
+    // Form should still be visible (not replaced with success)
+    expect(screen.getByPlaceholderText('Type your answer...')).toBeInTheDocument();
+  });
+
+  it('trims whitespace from answer before submitting', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <BlockerEvent
+        event={makeBlockerEvent()}
+        workspacePath="/test"
+      />
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your answer...');
+    await user.type(textarea, '  PostgreSQL  ');
+    await user.click(screen.getByRole('button', { name: /answer blocker/i }));
+
+    await waitFor(() => {
+      expect(mockAnswer).toHaveBeenCalledWith('/test', '42', 'PostgreSQL');
+    });
+  });
+
+  it('does not submit when answer is only whitespace', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <BlockerEvent
+        event={makeBlockerEvent()}
+        workspacePath="/test"
+      />
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your answer...');
+    await user.type(textarea, '   ');
+
+    const button = screen.getByRole('button', { name: /answer blocker/i });
+    expect(button).toBeDisabled();
+  });
+});
diff --git a/web-ui/__tests__/components/execution/EventItem.test.tsx b/web-ui/__tests__/components/execution/EventItem.test.tsx
new file mode 100644
index 00000000..9a2607e7
--- /dev/null
+++ b/web-ui/__tests__/components/execution/EventItem.test.tsx
@@ -0,0 +1,251 @@
+import { render, screen } from '@testing-library/react';
+import { EventItem } from '@/components/execution/EventItem';
+import type {
+  ProgressEvent,
+  OutputEvent,
+  CompletionEvent,
+  ErrorEvent,
+  HeartbeatEvent,
+  BlockerEvent as BlockerEventType,
+} from '@/hooks/useTaskStream';
+
+// ── Mock child components ─────────────────────────────────────────────
+
+jest.mock('@/components/execution/PlanningEvent', () => ({
+  PlanningEvent: ({ event }: { event: ProgressEvent }) => (
+    <div data-testid="planning-event">{event.message}</div>
+  ),
+}));
+
+jest.mock('@/components/execution/FileChangeEvent', () => ({
+  FileChangeEvent: ({ event }: { event: ProgressEvent }) => (
+    <div data-testid="file-change-event">{event.message}</div>
+  ),
+}));
+
+jest.mock('@/components/execution/ShellCommandEvent', () => ({
+  ShellCommandEvent: ({ event }: { event: OutputEvent }) => (
+    <div data-testid="shell-command-event">{event.line}</div>
+  ),
+}));
+
+jest.mock('@/components/execution/VerificationEvent', () => ({
+  VerificationEvent: ({ event }: { event: ProgressEvent }) => (
+    <div data-testid="verification-event">{event.message}</div>
+  ),
+}));
+
+jest.mock('@/components/execution/BlockerEvent', () => ({
+  BlockerEvent: ({ event }: { event: BlockerEventType }) => (
+    <div data-testid="blocker-event">{event.question}</div>
+  ),
+}));
+
+// ── Tests ─────────────────────────────────────────────────────────────
+
+describe('EventItem', () => {
+  it('renders nothing for heartbeat events', () => {
+    const heartbeat: HeartbeatEvent = {
+      event_type: 'heartbeat',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:00:00Z',
+    };
+
+    const { container } = render(
+      <EventItem event={heartbeat} workspacePath="/test" />
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('renders timestamp and Planning badge for planning progress', () => {
+    const event: ProgressEvent = {
+      event_type: 'progress',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T14:30:15Z',
+      phase: 'planning',
+      step: 1,
+      total_steps: 3,
+      message: 'Creating plan...',
+    };
+
+    render(<EventItem event={event} workspacePath="/test" />);
+
+    expect(screen.getByText('Planning')).toBeInTheDocument();
+    expect(screen.getByTestId('planning-event')).toBeInTheDocument();
+    expect(screen.getByText('Creating plan...')).toBeInTheDocument();
+  });
+
+  it('delegates file change progress events to FileChangeEvent', () => {
+    const event: ProgressEvent = {
+      event_type: 'progress',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:00:00Z',
+      phase: 'execution',
+      step: 2,
+      total_steps: 5,
+      message: 'Creating file: src/main.py',
+    };
+
+    render(<EventItem event={event} workspacePath="/test" />);
+
+    expect(screen.getByTestId('file-change-event')).toBeInTheDocument();
+  });
+
+  it('delegates verification phase to VerificationEvent', () => {
+    const event: ProgressEvent = {
+      event_type: 'progress',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:00:00Z',
+      phase: 'verification',
+      step: 1,
+      total_steps: 2,
+      message: 'Running ruff',
+    };
+
+    render(<EventItem event={event} workspacePath="/test" />);
+
+    expect(screen.getByTestId('verification-event')).toBeInTheDocument();
+  });
+
+  it('delegates self_correction phase to VerificationEvent', () => {
+    const event: ProgressEvent = {
+      event_type: 'progress',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:00:00Z',
+      phase: 'self_correction',
+      step: 1,
+      total_steps: 3,
+      message: 'Fixing lint errors',
+    };
+
+    render(<EventItem event={event} workspacePath="/test" />);
+
+    expect(screen.getByTestId('verification-event')).toBeInTheDocument();
+  });
+
+  it('renders generic execution step for non-special progress events', () => {
+    const event: ProgressEvent = {
+      event_type: 'progress',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:00:00Z',
+      phase: 'execution',
+      step: 3,
+      total_steps: 5,
+      message: 'Installing dependencies',
+    };
+
+    render(<EventItem event={event} workspacePath="/test" />);
+
+    expect(screen.getByText('Executing')).toBeInTheDocument();
+    expect(screen.getByText('Installing dependencies')).toBeInTheDocument();
+    expect(screen.getByText('Step 3/5')).toBeInTheDocument();
+  });
+
+  it('delegates output events to ShellCommandEvent', () => {
+    const event: OutputEvent = {
+      event_type: 'output',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:00:00Z',
+      stream: 'stdout',
+      line: 'test passed',
+    };
+
+    render(<EventItem event={event} workspacePath="/test" />);
+
+    expect(screen.getByTestId('shell-command-event')).toBeInTheDocument();
+    expect(screen.getByText('test passed')).toBeInTheDocument();
+  });
+
+  it('delegates blocker events to BlockerEvent', () => {
+    const event: BlockerEventType = {
+      event_type: 'blocker',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:00:00Z',
+      blocker_id: 42,
+      question: 'Which database to use?',
+    };
+
+    render(<EventItem event={event} workspacePath="/test" />);
+
+    expect(screen.getByTestId('blocker-event')).toBeInTheDocument();
+    expect(screen.getByText('Which database to use?')).toBeInTheDocument();
+  });
+
+  it('renders completion event with success styling', () => {
+    const event: CompletionEvent = {
+      event_type: 'completion',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:00:00Z',
+      status: 'completed',
+      duration_seconds: 45,
+      files_modified: ['a.py', 'b.py'],
+    };
+
+    render(<EventItem event={event} workspacePath="/test" />);
+
+    expect(screen.getByText('Task completed successfully')).toBeInTheDocument();
+    expect(screen.getByText('(45s)')).toBeInTheDocument();
+    expect(screen.getByText('2 files modified')).toBeInTheDocument();
+  });
+
+  it('renders completion event with failed status', () => {
+    const event: CompletionEvent = {
+      event_type: 'completion',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:00:00Z',
+      status: 'failed',
+      duration_seconds: 10,
+    };
+
+    render(<EventItem event={event} workspacePath="/test" />);
+
+    expect(screen.getByText('Task failed')).toBeInTheDocument();
+  });
+
+  it('renders error event with error message and traceback', () => {
+    const event: ErrorEvent = {
+      event_type: 'error',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:00:00Z',
+      error: 'Module not found',
+      error_type: 'ImportError',
+      traceback: 'File "main.py", line 1\nImportError: No module named foo',
+    };
+
+    render(<EventItem event={event} workspacePath="/test" />);
+
+    expect(screen.getByText('Module not found')).toBeInTheDocument();
+    expect(
+      screen.getByText(/ImportError: No module named foo/)
+    ).toBeInTheDocument();
+  });
+
+  it('renders error event without traceback', () => {
+    const event: ErrorEvent = {
+      event_type: 'error',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:00:00Z',
+      error: 'Timeout',
+      error_type: 'TimeoutError',
+    };
+
+    render(<EventItem event={event} workspacePath="/test" />);
+
+    expect(screen.getByText('Timeout')).toBeInTheDocument();
+  });
+
+  it('shows 1 file modified (singular) for single file', () => {
+    const event: CompletionEvent = {
+      event_type: 'completion',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:00:00Z',
+      status: 'completed',
+      duration_seconds: 5,
+      files_modified: ['single.py'],
+    };
+
+    render(<EventItem event={event} workspacePath="/test" />);
+
+    expect(screen.getByText('1 file modified')).toBeInTheDocument();
+  });
+});
diff --git a/web-ui/__tests__/components/layout/AppSidebar.test.tsx b/web-ui/__tests__/components/layout/AppSidebar.test.tsx
index b0bd9c00..f010f3fa 100644
--- a/web-ui/__tests__/components/layout/AppSidebar.test.tsx
+++ b/web-ui/__tests__/components/layout/AppSidebar.test.tsx
@@ -81,9 +81,10 @@ describe('AppSidebar', () => {
     mockGetWorkspacePath.mockReturnValue('/home/user/projects/test');
     render(<AppSidebar />);
 
-    // Tasks is now enabled; Execution, Blockers, Review are still disabled
+    // Tasks and Execution are now enabled; Blockers, Review are still disabled
     expect(screen.getByRole('link', { name: /^tasks$/i })).toBeInTheDocument();
-    expect(screen.queryByRole('link', { name: /^execution$/i })).not.toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /^execution$/i })).toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: /^blockers$/i })).not.toBeInTheDocument();
   });
 
   it('highlights the active route', () => {
diff --git a/web-ui/__tests__/hooks/useExecutionMonitor.test.ts b/web-ui/__tests__/hooks/useExecutionMonitor.test.ts
new file mode 100644
index 00000000..8af6495f
--- /dev/null
+++ b/web-ui/__tests__/hooks/useExecutionMonitor.test.ts
@@ -0,0 +1,254 @@
+import { renderHook, act } from '@testing-library/react';
+import { useExecutionMonitor } from '@/hooks/useExecutionMonitor';
+import type {
+  ProgressEvent,
+  CompletionEvent,
+  ErrorEvent,
+  HeartbeatEvent,
+  OutputEvent,
+} from '@/hooks/useTaskStream';
+
+// ── Mock useTaskStream ────────────────────────────────────────────────
+
+let capturedOnEvent: ((event: never) => void) | undefined;
+let mockSSEStatus = 'open';
+
+jest.mock('@/hooks/useTaskStream', () => ({
+  useTaskStream: ({ onEvent }: { taskId: string | null; onEvent?: (event: never) => void }) => {
+    capturedOnEvent = onEvent;
+    return { status: mockSSEStatus, close: jest.fn() };
+  },
+}));
+
+// Mock requestAnimationFrame with a queue so callbacks don't race
+// with the return value assignment in scheduleFlush.
+let rafQueue: FrameRequestCallback[] = [];
+let rafId = 0;
+
+function flushRAF() {
+  const cbs = [...rafQueue];
+  rafQueue = [];
+  cbs.forEach((cb) => cb(0));
+}
+
+/** Dispatch an event and flush the rAF queue in a single act(). */
+function dispatchAndFlush(event: unknown) {
+  act(() => {
+    capturedOnEvent?.(event as never);
+    flushRAF();
+  });
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  capturedOnEvent = undefined;
+  mockSSEStatus = 'open';
+  rafQueue = [];
+  rafId = 0;
+
+  jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+    rafQueue.push(cb);
+    return ++rafId;
+  });
+  jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+// ── Fixtures ──────────────────────────────────────────────────────────
+
+function makeProgressEvent(overrides: Partial<ProgressEvent> = {}): ProgressEvent {
+  return {
+    event_type: 'progress',
+    task_id: 'task-1',
+    timestamp: '2026-02-06T10:00:00Z',
+    phase: 'execution',
+    step: 1,
+    total_steps: 5,
+    message: 'Running step 1',
+    ...overrides,
+  };
+}
+
+function makeCompletionEvent(overrides: Partial<CompletionEvent> = {}): CompletionEvent {
+  return {
+    event_type: 'completion',
+    task_id: 'task-1',
+    timestamp: '2026-02-06T10:05:00Z',
+    status: 'completed',
+    duration_seconds: 120,
+    files_modified: ['src/main.py', 'tests/test_main.py'],
+    ...overrides,
+  };
+}
+
+// ── Tests ─────────────────────────────────────────────────────────────
+
+describe('useExecutionMonitor', () => {
+  it('starts with CONNECTING state and empty events', () => {
+    const { result } = renderHook(() => useExecutionMonitor('task-1'));
+
+    expect(result.current.agentState).toBe('CONNECTING');
+    expect(result.current.events).toEqual([]);
+    expect(result.current.isCompleted).toBe(false);
+    expect(result.current.completionStatus).toBeNull();
+  });
+
+  it('accumulates events and derives agent state from latest non-heartbeat', () => {
+    const { result } = renderHook(() => useExecutionMonitor('task-1'));
+
+    dispatchAndFlush(makeProgressEvent({ phase: 'planning', step: 1 }));
+
+    expect(result.current.events).toHaveLength(1);
+    expect(result.current.agentState).toBe('PLANNING');
+
+    dispatchAndFlush(makeProgressEvent({ phase: 'execution', step: 2 }));
+
+    expect(result.current.events).toHaveLength(2);
+    expect(result.current.agentState).toBe('EXECUTING');
+  });
+
+  it('tracks progress step and total from latest ProgressEvent', () => {
+    const { result } = renderHook(() => useExecutionMonitor('task-1'));
+
+    dispatchAndFlush(makeProgressEvent({ step: 3, total_steps: 10, message: 'Building' }));
+
+    expect(result.current.currentStep).toBe(3);
+    expect(result.current.totalSteps).toBe(10);
+    expect(result.current.currentMessage).toBe('Building');
+  });
+
+  it('ignores heartbeats for agent state derivation', () => {
+    const { result } = renderHook(() => useExecutionMonitor('task-1'));
+
+    dispatchAndFlush(makeProgressEvent({ phase: 'verification' }));
+
+    expect(result.current.agentState).toBe('VERIFICATION');
+
+    const heartbeat: HeartbeatEvent = {
+      event_type: 'heartbeat',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:01:00Z',
+    };
+
+    dispatchAndFlush(heartbeat);
+
+    // Heartbeat added to events but state still VERIFICATION
+    expect(result.current.events).toHaveLength(2);
+    expect(result.current.agentState).toBe('VERIFICATION');
+  });
+
+  it('detects completion and stores status and duration', () => {
+    const { result } = renderHook(() => useExecutionMonitor('task-1'));
+
+    dispatchAndFlush(makeCompletionEvent());
+
+    expect(result.current.isCompleted).toBe(true);
+    expect(result.current.completionStatus).toBe('completed');
+    expect(result.current.duration).toBe(120);
+    expect(result.current.agentState).toBe('COMPLETED');
+  });
+
+  it('collects changed files from completion event', () => {
+    const { result } = renderHook(() => useExecutionMonitor('task-1'));
+
+    dispatchAndFlush(makeCompletionEvent({ files_modified: ['a.py', 'b.py', 'c.py'] }));
+
+    expect(result.current.changedFiles).toEqual(['a.py', 'b.py', 'c.py']);
+  });
+
+  it('derives FAILED state from error events', () => {
+    const { result } = renderHook(() => useExecutionMonitor('task-1'));
+
+    const errorEvent: ErrorEvent = {
+      event_type: 'error',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:02:00Z',
+      error: 'Module not found',
+      error_type: 'ImportError',
+    };
+
+    dispatchAndFlush(errorEvent);
+
+    expect(result.current.agentState).toBe('FAILED');
+  });
+
+  it('derives BLOCKED state from blocker events', () => {
+    const { result } = renderHook(() => useExecutionMonitor('task-1'));
+
+    dispatchAndFlush({
+      event_type: 'blocker',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:02:00Z',
+      blocker_id: 42,
+      question: 'Which database?',
+    });
+
+    expect(result.current.agentState).toBe('BLOCKED');
+  });
+
+  it('derives SELF_CORRECTING from self_correction phase', () => {
+    const { result } = renderHook(() => useExecutionMonitor('task-1'));
+
+    dispatchAndFlush(makeProgressEvent({ phase: 'self_correction' }));
+
+    expect(result.current.agentState).toBe('SELF_CORRECTING');
+  });
+
+  it('handles output events as EXECUTING state', () => {
+    const { result } = renderHook(() => useExecutionMonitor('task-1'));
+
+    const outputEvent: OutputEvent = {
+      event_type: 'output',
+      task_id: 'task-1',
+      timestamp: '2026-02-06T10:01:00Z',
+      stream: 'stdout',
+      line: 'Running tests...',
+    };
+
+    dispatchAndFlush(outputEvent);
+
+    expect(result.current.agentState).toBe('EXECUTING');
+  });
+
+  it('resets state when taskId changes', () => {
+    const { result, rerender } = renderHook(
+      ({ taskId }) => useExecutionMonitor(taskId),
+      { initialProps: { taskId: 'task-1' as string | null } }
+    );
+
+    dispatchAndFlush(makeProgressEvent({ step: 5, total_steps: 10 }));
+
+    expect(result.current.events).toHaveLength(1);
+    expect(result.current.currentStep).toBe(5);
+
+    // Switch to a different task
+    rerender({ taskId: 'task-2' });
+
+    expect(result.current.events).toEqual([]);
+    expect(result.current.currentStep).toBe(0);
+    expect(result.current.agentState).toBe('CONNECTING');
+  });
+
+  it('handles failed completion status', () => {
+    const { result } = renderHook(() => useExecutionMonitor('task-1'));
+
+    dispatchAndFlush(makeCompletionEvent({ status: 'failed' }));
+
+    expect(result.current.isCompleted).toBe(true);
+    expect(result.current.completionStatus).toBe('failed');
+    expect(result.current.agentState).toBe('FAILED');
+  });
+
+  it('handles blocked completion status', () => {
+    const { result } = renderHook(() => useExecutionMonitor('task-1'));
+
+    dispatchAndFlush(makeCompletionEvent({ status: 'blocked' }));
+
+    expect(result.current.isCompleted).toBe(true);
+    expect(result.current.completionStatus).toBe('blocked');
+    expect(result.current.agentState).toBe('BLOCKED');
+  });
+});
diff --git a/web-ui/__tests__/hooks/useTaskStream.test.ts b/web-ui/__tests__/hooks/useTaskStream.test.ts
index d57cbb17..d0158596 100644
--- a/web-ui/__tests__/hooks/useTaskStream.test.ts
+++ b/web-ui/__tests__/hooks/useTaskStream.test.ts
@@ -21,7 +21,7 @@ describe('useTaskStream', () => {
 
   it('returns idle status when taskId is null', () => {
     const { result } = renderHook(() =>
-      useTaskStream({ taskId: null })
+      useTaskStream({ taskId: null, workspacePath: null })
     );
     expect(result.current.lastEvent).toBeNull();
   });
@@ -29,7 +29,7 @@ describe('useTaskStream', () => {
   it('dispatches progress events to onProgress callback', () => {
     const onProgress = jest.fn();
     renderHook(() =>
-      useTaskStream({ taskId: 'task-1', onProgress })
+      useTaskStream({ taskId: 'task-1', workspacePath: '/tmp/ws', onProgress })
     );
 
     const event: ProgressEvent = {
@@ -54,7 +54,7 @@ describe('useTaskStream', () => {
   it('dispatches completion events to onComplete callback', () => {
     const onComplete = jest.fn();
     renderHook(() =>
-      useTaskStream({ taskId: 'task-1', onComplete })
+      useTaskStream({ taskId: 'task-1', workspacePath: '/tmp/ws', onComplete })
     );
 
     const event: CompletionEvent = {
@@ -78,7 +78,7 @@ describe('useTaskStream', () => {
   it('dispatches output events to onOutput callback', () => {
     const onOutput = jest.fn();
     renderHook(() =>
-      useTaskStream({ taskId: 'task-1', onOutput })
+      useTaskStream({ taskId: 'task-1', workspacePath: '/tmp/ws', onOutput })
     );
 
     const event: OutputEvent = {
@@ -101,7 +101,7 @@ describe('useTaskStream', () => {
   it('dispatches error events to onError callback', () => {
     const onError = jest.fn();
     renderHook(() =>
-      useTaskStream({ taskId: 'task-1', onError })
+      useTaskStream({ taskId: 'task-1', workspacePath: '/tmp/ws', onError })
     );
 
     const event: ErrorEvent = {
@@ -124,7 +124,7 @@ describe('useTaskStream', () => {
   it('calls onEvent for every event type', () => {
     const onEvent = jest.fn();
     renderHook(() =>
-      useTaskStream({ taskId: 'task-1', onEvent })
+      useTaskStream({ taskId: 'task-1', workspacePath: '/tmp/ws', onEvent })
     );
 
     act(() => {
@@ -144,7 +144,7 @@ describe('useTaskStream', () => {
 
   it('updates lastEvent on each message', () => {
     const { result } = renderHook(() =>
-      useTaskStream({ taskId: 'task-1' })
+      useTaskStream({ taskId: 'task-1', workspacePath: '/tmp/ws' })
     );
 
     expect(result.current.lastEvent).toBeNull();
@@ -169,7 +169,7 @@ describe('useTaskStream', () => {
   it('ignores malformed JSON messages', () => {
     const onEvent = jest.fn();
     renderHook(() =>
-      useTaskStream({ taskId: 'task-1', onEvent })
+      useTaskStream({ taskId: 'task-1', workspacePath: '/tmp/ws', onEvent })
     );
 
     act(() => {
@@ -181,7 +181,7 @@ describe('useTaskStream', () => {
 
   it('exposes close function', () => {
     const { result } = renderHook(() =>
-      useTaskStream({ taskId: 'task-1' })
+      useTaskStream({ taskId: 'task-1', workspacePath: '/tmp/ws' })
     );
 
     result.current.close();
diff --git a/web-ui/__tests__/lib/api.test.ts b/web-ui/__tests__/lib/api.test.ts
index 49b118bf..ac540f56 100644
--- a/web-ui/__tests__/lib/api.test.ts
+++ b/web-ui/__tests__/lib/api.test.ts
@@ -48,10 +48,10 @@ describe('api client', () => {
       expect(result).toBe('error 1; error 2');
     });
 
-    it('extracts error from structured api_error object', () => {
+    it('combines error and detail from structured api_error object', () => {
       const structuredError = { error: 'Cannot execute', code: 'INVALID_STATE', detail: 'No tasks ready' };
       const result = normalizeErrorDetail(structuredError, 'fallback');
-      expect(result).toBe('Cannot execute');
+      expect(result).toBe('Cannot execute: No tasks ready');
     });
 
     it('falls back to detail when structured error has no error field', () => {
diff --git a/web-ui/__tests__/lib/eventStyles.test.ts b/web-ui/__tests__/lib/eventStyles.test.ts
new file mode 100644
index 00000000..46f6aa76
--- /dev/null
+++ b/web-ui/__tests__/lib/eventStyles.test.ts
@@ -0,0 +1,202 @@
+import { deriveAgentState, agentStateBadgeStyles, agentStateLabels, agentStateIcons, connectionDotStyles } from '@/lib/eventStyles';
+import type {
+  ProgressEvent,
+  CompletionEvent,
+  ErrorEvent,
+  OutputEvent,
+  HeartbeatEvent,
+  BlockerEvent,
+} from '@/hooks/useTaskStream';
+
+// ── deriveAgentState ──────────────────────────────────────────────────
+
+describe('deriveAgentState', () => {
+  it('returns PLANNING for progress events with planning phase', () => {
+    const event: ProgressEvent = {
+      event_type: 'progress',
+      task_id: 't1',
+      timestamp: '',
+      phase: 'planning',
+      step: 1,
+      total_steps: 3,
+      message: '',
+    };
+    expect(deriveAgentState(event)).toBe('PLANNING');
+  });
+
+  it('returns EXECUTING for progress events with execution phase', () => {
+    const event: ProgressEvent = {
+      event_type: 'progress',
+      task_id: 't1',
+      timestamp: '',
+      phase: 'execution',
+      step: 1,
+      total_steps: 3,
+      message: '',
+    };
+    expect(deriveAgentState(event)).toBe('EXECUTING');
+  });
+
+  it('returns VERIFICATION for progress events with verification phase', () => {
+    const event: ProgressEvent = {
+      event_type: 'progress',
+      task_id: 't1',
+      timestamp: '',
+      phase: 'verification',
+      step: 1,
+      total_steps: 2,
+      message: '',
+    };
+    expect(deriveAgentState(event)).toBe('VERIFICATION');
+  });
+
+  it('returns SELF_CORRECTING for self_correction phase', () => {
+    const event: ProgressEvent = {
+      event_type: 'progress',
+      task_id: 't1',
+      timestamp: '',
+      phase: 'self_correction',
+      step: 1,
+      total_steps: 3,
+      message: '',
+    };
+    expect(deriveAgentState(event)).toBe('SELF_CORRECTING');
+  });
+
+  it('returns EXECUTING for unknown progress phases', () => {
+    const event: ProgressEvent = {
+      event_type: 'progress',
+      task_id: 't1',
+      timestamp: '',
+      phase: 'unknown_phase',
+      step: 1,
+      total_steps: 3,
+      message: '',
+    };
+    expect(deriveAgentState(event)).toBe('EXECUTING');
+  });
+
+  it('returns BLOCKED for blocker events', () => {
+    const event: BlockerEvent = {
+      event_type: 'blocker',
+      task_id: 't1',
+      timestamp: '',
+      blocker_id: 1,
+      question: 'test',
+    };
+    expect(deriveAgentState(event)).toBe('BLOCKED');
+  });
+
+  it('returns COMPLETED for successful completion events', () => {
+    const event: CompletionEvent = {
+      event_type: 'completion',
+      task_id: 't1',
+      timestamp: '',
+      status: 'completed',
+      duration_seconds: 10,
+    };
+    expect(deriveAgentState(event)).toBe('COMPLETED');
+  });
+
+  it('returns FAILED for failed completion events', () => {
+    const event: CompletionEvent = {
+      event_type: 'completion',
+      task_id: 't1',
+      timestamp: '',
+      status: 'failed',
+      duration_seconds: 5,
+    };
+    expect(deriveAgentState(event)).toBe('FAILED');
+  });
+
+  it('returns BLOCKED for blocked completion events', () => {
+    const event: CompletionEvent = {
+      event_type: 'completion',
+      task_id: 't1',
+      timestamp: '',
+      status: 'blocked',
+      duration_seconds: 5,
+    };
+    expect(deriveAgentState(event)).toBe('BLOCKED');
+  });
+
+  it('returns FAILED for error events', () => {
+    const event: ErrorEvent = {
+      event_type: 'error',
+      task_id: 't1',
+      timestamp: '',
+      error: 'some error',
+      error_type: 'RuntimeError',
+    };
+    expect(deriveAgentState(event)).toBe('FAILED');
+  });
+
+  it('returns EXECUTING for output events', () => {
+    const event: OutputEvent = {
+      event_type: 'output',
+      task_id: 't1',
+      timestamp: '',
+      stream: 'stdout',
+      line: 'hello',
+    };
+    expect(deriveAgentState(event)).toBe('EXECUTING');
+  });
+
+  it('returns EXECUTING for heartbeat events (default case)', () => {
+    const event: HeartbeatEvent = {
+      event_type: 'heartbeat',
+      task_id: 't1',
+      timestamp: '',
+    };
+    expect(deriveAgentState(event)).toBe('EXECUTING');
+  });
+});
+
+// ── Style maps ────────────────────────────────────────────────────────
+
+describe('style maps', () => {
+  it('has badge styles for all UIAgentState values', () => {
+    const states = [
+      'CONNECTING', 'PLANNING', 'EXECUTING', 'VERIFICATION',
+      'SELF_CORRECTING', 'BLOCKED', 'COMPLETED', 'FAILED', 'DISCONNECTED',
+    ] as const;
+
+    states.forEach((state) => {
+      expect(agentStateBadgeStyles[state]).toBeDefined();
+      expect(typeof agentStateBadgeStyles[state]).toBe('string');
+    });
+  });
+
+  it('has labels for all UIAgentState values', () => {
+    const states = [
+      'CONNECTING', 'PLANNING', 'EXECUTING', 'VERIFICATION',
+      'SELF_CORRECTING', 'BLOCKED', 'COMPLETED', 'FAILED', 'DISCONNECTED',
+    ] as const;
+
+    states.forEach((state) => {
+      expect(agentStateLabels[state]).toBeDefined();
+      expect(typeof agentStateLabels[state]).toBe('string');
+    });
+  });
+
+  it('has icons for all UIAgentState values', () => {
+    const states = [
+      'CONNECTING', 'PLANNING', 'EXECUTING', 'VERIFICATION',
+      'SELF_CORRECTING', 'BLOCKED', 'COMPLETED', 'FAILED', 'DISCONNECTED',
+    ] as const;
+
+    states.forEach((state) => {
+      expect(agentStateIcons[state]).toBeDefined();
+      expect(agentStateIcons[state]).toBeTruthy();
+    });
+  });
+
+  it('has connection dot styles for all SSE statuses', () => {
+    const statuses = ['idle', 'connecting', 'open', 'closed', 'error'];
+
+    statuses.forEach((status) => {
+      expect(connectionDotStyles[status]).toBeDefined();
+      expect(typeof connectionDotStyles[status]).toBe('string');
+    });
+  });
+});
diff --git a/web-ui/package-lock.json b/web-ui/package-lock.json
index 723b8eef..b087048d 100644
--- a/web-ui/package-lock.json
+++ b/web-ui/package-lock.json
@@ -9,8 +9,11 @@
       "version": "0.1.0",
       "dependencies": {
         "@hugeicons/react": "^0.3.0",
+        "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-progress": "^1.1.8",
+        "@radix-ui/react-scroll-area": "^1.2.10",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-tabs": "^1.1.13",
@@ -2248,6 +2251,52 @@
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
+      "integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -2650,6 +2699,68 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.8.tgz",
+      "integrity": "sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-context": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.3.tgz",
+      "integrity": "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
@@ -2681,6 +2792,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
+      "integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
diff --git a/web-ui/package.json b/web-ui/package.json
index bf727ceb..b00c2e5c 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -13,8 +13,11 @@
   },
   "dependencies": {
     "@hugeicons/react": "^0.3.0",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.1.13",
diff --git a/web-ui/src/app/execution/[taskId]/page.tsx b/web-ui/src/app/execution/[taskId]/page.tsx
new file mode 100644
index 00000000..b8fb3401
--- /dev/null
+++ b/web-ui/src/app/execution/[taskId]/page.tsx
@@ -0,0 +1,230 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { useExecutionMonitor } from '@/hooks/useExecutionMonitor';
+import { tasksApi } from '@/lib/api';
+import { getSelectedWorkspacePath } from '@/lib/workspace-storage';
+import { ExecutionHeader } from '@/components/execution/ExecutionHeader';
+import { ProgressIndicator } from '@/components/execution/ProgressIndicator';
+import { EventStream } from '@/components/execution/EventStream';
+import { ChangesSidebar } from '@/components/execution/ChangesSidebar';
+import type { Task } from '@/types';
+
+export default function ExecutionPage() {
+  const params = useParams<{ taskId: string }>();
+  const router = useRouter();
+  const taskId = params.taskId;
+
+  const [workspacePath, setWorkspacePath] = useState<string | null>(null);
+  const [workspaceReady, setWorkspaceReady] = useState(false);
+  const [task, setTask] = useState<Task | null>(null);
+  const [taskError, setTaskError] = useState(false);
+
+  // Hydrate workspace path from localStorage
+  useEffect(() => {
+    setWorkspacePath(getSelectedWorkspacePath());
+    setWorkspaceReady(true);
+  }, []);
+
+  // Fetch task details
+  useEffect(() => {
+    if (!workspacePath || !taskId) return;
+    tasksApi.getOne(workspacePath, taskId).then(setTask).catch((err) => {
+      console.error('Failed to load task:', err);
+      setTaskError(true);
+    });
+  }, [workspacePath, taskId]);
+
+  // Connect to SSE stream
+  const monitor = useExecutionMonitor(
+    workspaceReady && taskId ? taskId : null,
+    workspacePath
+  );
+
+  // Stop handler — may fail if run already completed or no active run
+  const handleStop = useCallback(async () => {
+    if (!workspacePath || !taskId) return;
+    try {
+      await tasksApi.stopExecution(workspacePath, taskId);
+    } catch (err) {
+      const detail = (err as { detail?: string })?.detail ?? '';
+      // 400/404 from stop is expected if run already completed
+      if (!detail.includes('not found') && !detail.includes('Cannot stop')) {
+        console.error('Failed to stop execution:', detail);
+      }
+    }
+  }, [workspacePath, taskId]);
+
+  // Re-fetch blocker list when a blocker is answered inline
+  const handleBlockerAnswered = useCallback(() => {
+    // After answering a blocker the SSE stream will resume automatically.
+    // No extra action needed — the stream pushes new events.
+  }, []);
+
+  // ── Guards ──────────────────────────────────────────────────────────
+
+  if (!workspaceReady) return null;
+
+  if (taskError) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-4 text-gray-500">
+        <p>Task not found or failed to load.</p>
+        <a href="/tasks" className="text-blue-600 hover:underline">Back to Task Board</a>
+      </div>
+    );
+  }
+
+  if (!workspacePath) {
+    return (
+      <main className="min-h-screen bg-background">
+        <div className="mx-auto max-w-5xl px-4 py-8">
+          <div className="rounded-lg border bg-muted/50 p-6 text-center">
+            <p className="text-muted-foreground">
+              No workspace selected.{' '}
+              <Link href="/" className="text-primary hover:underline">
+                Select a workspace
+              </Link>{' '}
+              first.
+            </p>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  // ── Layout ──────────────────────────────────────────────────────────
+
+  return (
+    <main className="flex min-h-screen flex-col bg-background">
+      <div className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-4 px-4 py-6">
+        {/* Header: task info + agent state + stop button */}
+        <ExecutionHeader
+          task={task}
+          agentState={monitor.agentState}
+          sseStatus={monitor.sseStatus}
+          onStop={handleStop}
+          isCompleted={monitor.isCompleted}
+        />
+
+        {/* Progress bar */}
+        <ProgressIndicator
+          currentStep={monitor.currentStep}
+          totalSteps={monitor.totalSteps}
+          currentMessage={monitor.currentMessage}
+          agentState={monitor.agentState}
+        />
+
+        {/* SSE disconnection banner */}
+        {monitor.agentState === 'DISCONNECTED' && !monitor.isCompleted && (
+          <div className="mx-4 mt-2 flex items-center justify-between rounded-md border border-yellow-200 bg-yellow-50 px-4 py-2 text-sm text-yellow-800 dark:border-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300">
+            <span>Connection lost. Events may be missing.</span>
+            <button
+              onClick={() => window.location.reload()}
+              className="rounded px-3 py-1 text-xs font-medium bg-yellow-200 hover:bg-yellow-300 dark:bg-yellow-800 dark:hover:bg-yellow-700"
+            >
+              Reconnect
+            </button>
+          </div>
+        )}
+
+        {/* Completion banner */}
+        {monitor.isCompleted && (
+          <CompletionBanner
+            status={monitor.completionStatus}
+            duration={monitor.duration}
+            onViewChanges={() => router.push('/review')}
+            onBackToTasks={() => router.push('/tasks')}
+          />
+        )}
+
+        {/* Main content: event stream + changes sidebar */}
+        <div className="flex flex-1 flex-col gap-4 overflow-hidden md:flex-row">
+          <EventStream
+            events={monitor.events}
+            workspacePath={workspacePath}
+            onBlockerAnswered={handleBlockerAnswered}
+          />
+          <ChangesSidebar changedFiles={monitor.changedFiles} />
+        </div>
+      </div>
+    </main>
+  );
+}
+
+// ── Completion Banner ─────────────────────────────────────────────────
+
+function CompletionBanner({
+  status,
+  duration,
+  onViewChanges,
+  onBackToTasks,
+}: {
+  status: 'completed' | 'failed' | 'blocked' | null;
+  duration: number | null;
+  onViewChanges: () => void;
+  onBackToTasks: () => void;
+}) {
+  const durationText = duration !== null ? `${Math.round(duration)}s` : '';
+
+  if (status === 'completed') {
+    return (
+      <div role="alert" className="flex items-center justify-between rounded-lg border border-green-200 bg-green-50 px-4 py-3 dark:border-green-900 dark:bg-green-950/30">
+        <p className="text-sm font-medium text-green-800 dark:text-green-200">
+          Execution completed successfully{durationText && ` in ${durationText}`}.
+        </p>
+        <div className="flex gap-2">
+          <button
+            onClick={onViewChanges}
+            className="rounded-md bg-green-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-green-700"
+          >
+            View Changes
+          </button>
+          <button
+            onClick={onBackToTasks}
+            className="rounded-md border border-green-300 px-3 py-1.5 text-xs font-medium text-green-700 hover:bg-green-100 dark:border-green-800 dark:text-green-300 dark:hover:bg-green-900/40"
+          >
+            Back to Tasks
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (status === 'failed') {
+    return (
+      <div role="alert" className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 px-4 py-3 dark:border-red-900 dark:bg-red-950/30">
+        <p className="text-sm font-medium text-red-800 dark:text-red-200">
+          Execution failed{durationText && ` after ${durationText}`}. Check the
+          event stream for details.
+        </p>
+        <button
+          onClick={onBackToTasks}
+          className="rounded-md border border-red-300 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100 dark:border-red-800 dark:text-red-300 dark:hover:bg-red-900/40"
+        >
+          Back to Tasks
+        </button>
+      </div>
+    );
+  }
+
+  if (status === 'blocked') {
+    return (
+      <div role="alert" className="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 dark:border-amber-900 dark:bg-amber-950/30">
+        <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+          Execution blocked — a blocker was raised. Answer it in the event
+          stream below to continue.
+        </p>
+        <button
+          onClick={onBackToTasks}
+          className="rounded-md border border-amber-300 px-3 py-1.5 text-xs font-medium text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:text-amber-300 dark:hover:bg-amber-900/40"
+        >
+          Back to Tasks
+        </button>
+      </div>
+    );
+  }
+
+  return null;
+}
diff --git a/web-ui/src/app/execution/page.tsx b/web-ui/src/app/execution/page.tsx
new file mode 100644
index 00000000..ab6ffc07
--- /dev/null
+++ b/web-ui/src/app/execution/page.tsx
@@ -0,0 +1,149 @@
+'use client';
+
+import { Suspense, useState, useEffect } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { Loading03Icon } from '@hugeicons/react';
+import { getSelectedWorkspacePath } from '@/lib/workspace-storage';
+import { tasksApi } from '@/lib/api';
+import { BatchExecutionMonitor } from '@/components/execution/BatchExecutionMonitor';
+
+/**
+ * Execution landing page wrapper.
+ *
+ * Wraps the main content in `<Suspense>` because `useSearchParams()`
+ * triggers a client-side rendering bailout in Next.js App Router.
+ */
+export default function ExecutionLandingPage() {
+  return (
+    <Suspense
+      fallback={
+        <main className="flex min-h-screen items-center justify-center bg-background">
+          <Loading03Icon className="h-6 w-6 animate-spin text-muted-foreground" />
+        </main>
+      }
+    >
+      <ExecutionLandingContent />
+    </Suspense>
+  );
+}
+
+/**
+ * Inner content that reads search params.
+ *
+ * Routing logic:
+ * - `?batch=<id>` → renders BatchExecutionMonitor
+ * - `?task=<id>`  → redirects to /execution/[taskId]
+ * - No params     → finds latest IN_PROGRESS task and redirects, or shows empty state
+ */
+function ExecutionLandingContent() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const batchId = searchParams.get('batch');
+  const taskIdParam = searchParams.get('task');
+
+  const [workspacePath, setWorkspacePath] = useState<string | null>(null);
+  const [workspaceReady, setWorkspaceReady] = useState(false);
+  const [resolving, setResolving] = useState(true);
+
+  // Hydrate workspace path
+  useEffect(() => {
+    setWorkspacePath(getSelectedWorkspacePath());
+    setWorkspaceReady(true);
+  }, []);
+
+  // If ?task= is present, redirect immediately
+  useEffect(() => {
+    if (taskIdParam) {
+      router.replace(`/execution/${taskIdParam}`);
+    }
+  }, [taskIdParam, router]);
+
+  // If no batch and no task param, find latest IN_PROGRESS task
+  useEffect(() => {
+    if (batchId || taskIdParam || !workspacePath) {
+      setResolving(false);
+      return;
+    }
+
+    tasksApi
+      .getAll(workspacePath, 'IN_PROGRESS')
+      .then((response) => {
+        const tasks = response.tasks ?? [];
+        if (tasks.length > 0) {
+          router.replace(`/execution/${tasks[0].id}`);
+        } else {
+          setResolving(false);
+        }
+      })
+      .catch(() => {
+        setResolving(false);
+      });
+  }, [workspacePath, batchId, taskIdParam, router]);
+
+  // ── Guards ──────────────────────────────────────────────────────────
+
+  if (!workspaceReady) return null;
+
+  if (!workspacePath) {
+    return (
+      <main className="min-h-screen bg-background">
+        <div className="mx-auto max-w-5xl px-4 py-8">
+          <div className="rounded-lg border bg-muted/50 p-6 text-center">
+            <p className="text-muted-foreground">
+              No workspace selected.{' '}
+              <Link href="/" className="text-primary hover:underline">
+                Select a workspace
+              </Link>{' '}
+              first.
+            </p>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  // Redirecting to single-task page
+  if (taskIdParam || resolving) {
+    return (
+      <main className="flex min-h-screen items-center justify-center bg-background">
+        <Loading03Icon className="h-6 w-6 animate-spin text-muted-foreground" />
+      </main>
+    );
+  }
+
+  // Batch mode
+  if (batchId) {
+    return (
+      <main className="min-h-screen bg-background">
+        <div className="mx-auto max-w-7xl px-4 py-6">
+          <BatchExecutionMonitor
+            batchId={batchId}
+            workspacePath={workspacePath}
+          />
+        </div>
+      </main>
+    );
+  }
+
+  // No active execution — empty state
+  return (
+    <main className="min-h-screen bg-background">
+      <div className="mx-auto max-w-5xl px-4 py-8">
+        <div className="rounded-lg border bg-muted/50 p-8 text-center">
+          <p className="text-lg font-medium text-foreground">
+            No active execution
+          </p>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Start an execution from the{' '}
+            <Link href="/tasks" className="text-primary hover:underline">
+              Task Board
+            </Link>
+            .
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/web-ui/src/components/execution/BatchExecutionMonitor.tsx b/web-ui/src/components/execution/BatchExecutionMonitor.tsx
new file mode 100644
index 00000000..cf560bd9
--- /dev/null
+++ b/web-ui/src/components/execution/BatchExecutionMonitor.tsx
@@ -0,0 +1,313 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  CheckmarkCircle01Icon,
+  Cancel01Icon,
+  Loading03Icon,
+  Alert02Icon,
+  StopIcon,
+} from '@hugeicons/react';
+import { Button } from '@/components/ui/button';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { batchesApi, tasksApi } from '@/lib/api';
+import { EventStream } from './EventStream';
+import { useExecutionMonitor } from '@/hooks/useExecutionMonitor';
+import type { BatchResponse, Task } from '@/types';
+
+// ── Status icon helper ────────────────────────────────────────────────
+
+const statusConfig: Record<string, { icon: typeof CheckmarkCircle01Icon; className: string; label: string }> = {
+  COMPLETED: { icon: CheckmarkCircle01Icon, className: 'text-green-600', label: 'Completed' },
+  DONE: { icon: CheckmarkCircle01Icon, className: 'text-green-600', label: 'Done' },
+  FAILED: { icon: Cancel01Icon, className: 'text-red-600', label: 'Failed' },
+  IN_PROGRESS: { icon: Loading03Icon, className: 'text-blue-600 animate-spin', label: 'Running' },
+  BLOCKED: { icon: Alert02Icon, className: 'text-amber-600', label: 'Blocked' },
+  READY: { icon: Loading03Icon, className: 'text-gray-400', label: 'Waiting' },
+};
+
+function getStatusConfig(status: string) {
+  return statusConfig[status] ?? { icon: Loading03Icon, className: 'text-gray-400', label: status };
+}
+
+// ── Props ─────────────────────────────────────────────────────────────
+
+interface BatchExecutionMonitorProps {
+  batchId: string;
+  workspacePath: string;
+}
+
+export function BatchExecutionMonitor({ batchId, workspacePath }: BatchExecutionMonitorProps) {
+  const router = useRouter();
+  const [batch, setBatch] = useState<BatchResponse | null>(null);
+  const [tasks, setTasks] = useState<Record<string, Task>>({});
+  const [expandedTaskId, setExpandedTaskId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // Track which task IDs have already been fetched to avoid refetching
+  const fetchedTaskIdsRef = useRef<Set<string>>(new Set());
+
+  // ── Fetch batch details + task names ────────────────────────────────
+  const fetchBatch = useCallback(async () => {
+    try {
+      setError(null);
+      const data = await batchesApi.get(workspacePath, batchId);
+      setBatch(data);
+
+      // Fetch task details for any new task IDs (check ref, not state)
+      for (const taskId of data.task_ids) {
+        if (!fetchedTaskIdsRef.current.has(taskId)) {
+          fetchedTaskIdsRef.current.add(taskId);
+          tasksApi.getOne(workspacePath, taskId).then((task) => {
+            setTasks((prev) => ({ ...prev, [taskId]: task }));
+          }).catch((err) => {
+            console.error(`Failed to fetch task ${taskId}:`, err);
+          });
+        }
+      }
+    } catch {
+      setError('Failed to load batch details');
+    }
+  }, [workspacePath, batchId]);
+
+  // Initial fetch
+  useEffect(() => {
+    fetchBatch();
+  }, [batchId, workspacePath]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Poll every 5 seconds while batch is active
+  useEffect(() => {
+    const isActive = batch && !['COMPLETED', 'FAILED', 'CANCELLED'].includes(batch.status);
+    if (isActive) {
+      pollRef.current = setInterval(fetchBatch, 5000);
+    }
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+    };
+  }, [batch?.status, fetchBatch]);
+
+  // Auto-expand the first IN_PROGRESS task
+  useEffect(() => {
+    if (!batch || expandedTaskId) return;
+    const inProgress = batch.task_ids.find(
+      (id) => batch.results[id] === 'IN_PROGRESS'
+    );
+    if (inProgress) setExpandedTaskId(inProgress);
+  }, [batch, expandedTaskId]);
+
+  // ── Batch controls ──────────────────────────────────────────────────
+  const handleStop = useCallback(async () => {
+    try {
+      await batchesApi.stop(workspacePath, batchId);
+      fetchBatch();
+    } catch {
+      setError('Failed to stop batch');
+    }
+  }, [workspacePath, batchId, fetchBatch]);
+
+  const handleCancel = useCallback(async () => {
+    try {
+      await batchesApi.cancel(workspacePath, batchId);
+      fetchBatch();
+    } catch {
+      setError('Failed to cancel batch');
+    }
+  }, [workspacePath, batchId, fetchBatch]);
+
+  // ── Render ──────────────────────────────────────────────────────────
+
+  if (error) {
+    return (
+      <div className="rounded-lg border border-red-200 bg-red-50 p-6 text-center dark:border-red-900 dark:bg-red-950/30">
+        <p className="text-sm text-red-700 dark:text-red-300">{error}</p>
+      </div>
+    );
+  }
+
+  if (!batch) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loading03Icon className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  const isActive = !['COMPLETED', 'FAILED', 'CANCELLED'].includes(batch.status);
+  const completedCount = batch.task_ids.filter(
+    (id) => batch.results[id] === 'COMPLETED' || batch.results[id] === 'DONE'
+  ).length;
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between rounded-lg border bg-card p-4">
+        <div>
+          <h1 className="text-lg font-semibold tracking-tight">
+            Batch Execution ({batch.task_ids.length} tasks)
+          </h1>
+          <p className="mt-0.5 text-sm text-muted-foreground">
+            Strategy: {batch.strategy} &middot; {completedCount}/{batch.task_ids.length} complete
+          </p>
+        </div>
+
+        {isActive && (
+          <div className="flex items-center gap-2">
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button variant="outline" size="sm" className="h-8 gap-1.5 px-3">
+                  <StopIcon className="h-3.5 w-3.5" />
+                  Stop Batch
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Stop Batch?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    This will stop all currently running tasks in this batch.
+                    Completed tasks will not be affected.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction onClick={handleStop}>
+                    Stop Batch
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button variant="destructive" size="sm" className="h-8 gap-1.5 px-3">
+                  <Cancel01Icon className="h-3.5 w-3.5" />
+                  Cancel Batch
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Cancel Batch?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    This will cancel the entire batch, stopping all running
+                    tasks and skipping remaining ones.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Keep Running</AlertDialogCancel>
+                  <AlertDialogAction onClick={handleCancel}>
+                    Cancel Batch
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </div>
+        )}
+
+        {!isActive && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => router.push('/tasks')}
+          >
+            Back to Tasks
+          </Button>
+        )}
+      </div>
+
+      {/* Task rows */}
+      <div className="space-y-1">
+        {batch.task_ids.map((taskId) => (
+          <BatchTaskRow
+            key={taskId}
+            taskId={taskId}
+            task={tasks[taskId] ?? null}
+            status={batch.results[taskId] ?? 'READY'}
+            isExpanded={expandedTaskId === taskId}
+            onToggle={() =>
+              setExpandedTaskId(expandedTaskId === taskId ? null : taskId)
+            }
+            workspacePath={workspacePath}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ── Batch Task Row ────────────────────────────────────────────────────
+
+function BatchTaskRow({
+  taskId,
+  task,
+  status,
+  isExpanded,
+  onToggle,
+  workspacePath,
+}: {
+  taskId: string;
+  task: Task | null;
+  status: string;
+  isExpanded: boolean;
+  onToggle: () => void;
+  workspacePath: string;
+}) {
+  const config = getStatusConfig(status);
+  const StatusIcon = config.icon;
+
+  // Only connect SSE when expanded and task is in progress or blocked
+  const shouldStream = isExpanded && (status === 'IN_PROGRESS' || status === 'BLOCKED');
+  const monitor = useExecutionMonitor(shouldStream ? taskId : null, workspacePath);
+
+  return (
+    <div className="rounded-lg border bg-card">
+      {/* Row header */}
+      <button
+        onClick={onToggle}
+        className="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-muted/50"
+        aria-expanded={isExpanded}
+      >
+        <StatusIcon className={`h-4 w-4 shrink-0 ${config.className}`} />
+        <span className="min-w-0 flex-1 truncate text-sm font-medium">
+          {task?.title ?? taskId}
+        </span>
+        <span className="text-xs text-muted-foreground">{config.label}</span>
+        <span className="text-xs text-muted-foreground">
+          {isExpanded ? '▲' : '▼'}
+        </span>
+      </button>
+
+      {/* Expanded event stream */}
+      {isExpanded && (
+        <div className="border-t px-4 pb-4 pt-2">
+          {shouldStream ? (
+            <div className="h-64">
+              <EventStream
+                events={monitor.events}
+                workspacePath={workspacePath}
+              />
+            </div>
+          ) : (
+            <p className="py-4 text-center text-xs text-muted-foreground">
+              {status === 'COMPLETED' || status === 'DONE'
+                ? 'Task completed successfully.'
+                : status === 'FAILED'
+                  ? 'Task failed. Check diagnostics for details.'
+                  : 'Waiting to start...'}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web-ui/src/components/execution/BlockerEvent.tsx b/web-ui/src/components/execution/BlockerEvent.tsx
new file mode 100644
index 00000000..9fa5253b
--- /dev/null
+++ b/web-ui/src/components/execution/BlockerEvent.tsx
@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from 'react';
+import { Alert02Icon, Loading03Icon } from '@hugeicons/react';
+import { Button } from '@/components/ui/button';
+import { blockersApi } from '@/lib/api';
+import type { BlockerEvent as BlockerEventType } from '@/hooks/useTaskStream';
+import type { ApiError } from '@/types';
+
+interface BlockerEventProps {
+  event: BlockerEventType;
+  workspacePath: string;
+  onAnswered?: () => void;
+}
+
+/**
+ * Renders a blocker as an interrupt pattern with an inline answer form.
+ *
+ * Matches the architecture doc Section 4 "Interrupt Pattern for Blockers":
+ * highlighted card, question text, textarea, and submit button.
+ */
+export function BlockerEvent({ event, workspacePath, onAnswered }: BlockerEventProps) {
+  const [answer, setAnswer] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async () => {
+    if (!answer.trim() || isSubmitting) return;
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      await blockersApi.answer(workspacePath, String(event.blocker_id), answer.trim());
+      setSubmitted(true);
+      onAnswered?.();
+    } catch (err) {
+      const apiErr = err as ApiError;
+      setError(apiErr.detail || 'Failed to submit answer');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (submitted) {
+    return (
+      <div className="rounded-md border border-green-200 bg-green-50 p-3 text-sm dark:border-green-800 dark:bg-green-950/30">
+        <p className="text-green-800 dark:text-green-300">
+          Blocker answered. Execution resuming...
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border-2 border-red-300 bg-red-50 p-3 dark:border-red-700 dark:bg-red-950/30">
+      {/* Header */}
+      <div className="mb-2 flex items-center gap-2">
+        <Alert02Icon className="h-4 w-4 text-red-600" />
+        <span className="text-sm font-semibold text-red-800 dark:text-red-300">
+          Agent needs your help
+        </span>
+      </div>
+
+      {/* Question */}
+      <p className="mb-3 text-sm text-foreground">{event.question}</p>
+
+      {/* Context (if available) */}
+      {event.context && (
+        <p className="mb-3 text-xs text-muted-foreground">{event.context}</p>
+      )}
+
+      {/* Answer form */}
+      <textarea
+        className="mb-2 w-full rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+        rows={3}
+        placeholder="Type your answer..."
+        aria-label="Your answer to the blocker question"
+        value={answer}
+        onChange={(e) => setAnswer(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            handleSubmit();
+          }
+        }}
+        disabled={isSubmitting}
+      />
+
+      {error && (
+        <p className="mb-2 text-xs text-destructive">{error}</p>
+      )}
+
+      <div className="flex items-center justify-between">
+        <span className="text-xs text-muted-foreground">
+          Execution paused — waiting for response...
+        </span>
+        <Button
+          size="sm"
+          className="h-7 gap-1 px-3 text-xs"
+          onClick={handleSubmit}
+          disabled={!answer.trim() || isSubmitting}
+        >
+          {isSubmitting && <Loading03Icon className="h-3 w-3 animate-spin" />}
+          Answer Blocker
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/web-ui/src/components/execution/ChangesSidebar.tsx b/web-ui/src/components/execution/ChangesSidebar.tsx
new file mode 100644
index 00000000..957ac8b6
--- /dev/null
+++ b/web-ui/src/components/execution/ChangesSidebar.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { useState } from 'react';
+import { FileEditIcon, SidebarLeftIcon } from '@hugeicons/react';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+interface ChangesSidebarProps {
+  /** List of file paths modified during execution. */
+  changedFiles: string[];
+}
+
+/**
+ * Collapsible right sidebar showing files changed during execution.
+ *
+ * Renders a simple file list (not a nested tree — YAGNI until we have
+ * enough files to warrant it). Each file shows its path as a truncated
+ * monospace string.
+ */
+export function ChangesSidebar({ changedFiles }: ChangesSidebarProps) {
+  const [collapsed, setCollapsed] = useState(false);
+  const uniqueFiles = [...new Set(changedFiles)];
+
+  if (uniqueFiles.length === 0) return null;
+
+  return (
+    <div
+      className={`shrink-0 rounded-lg border bg-card transition-all ${
+        collapsed ? 'w-10' : 'w-full md:w-64'
+      }`}
+    >
+      {/* Header with toggle */}
+      <div className="flex items-center justify-between border-b px-3 py-2">
+        {!collapsed && (
+          <span className="text-xs font-semibold text-muted-foreground">
+            Changes ({uniqueFiles.length})
+          </span>
+        )}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-6 w-6 p-0"
+          onClick={() => setCollapsed(!collapsed)}
+          title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          aria-expanded={!collapsed}
+        >
+          <SidebarLeftIcon className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      {/* File list */}
+      {!collapsed && (
+        <ScrollArea className="h-[calc(100%-37px)]">
+          <div className="p-2">
+            {uniqueFiles.map((filePath) => (
+              <div
+                key={filePath}
+                className="flex items-center gap-1.5 rounded px-2 py-1 text-xs hover:bg-muted/50"
+                title={filePath}
+              >
+                <FileEditIcon className="h-3 w-3 shrink-0 text-muted-foreground" />
+                <span className="truncate font-mono">{filePath}</span>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}
diff --git a/web-ui/src/components/execution/EventItem.tsx b/web-ui/src/components/execution/EventItem.tsx
new file mode 100644
index 00000000..636adb93
--- /dev/null
+++ b/web-ui/src/components/execution/EventItem.tsx
@@ -0,0 +1,168 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import {
+  deriveAgentState,
+  agentStateBadgeStyles,
+  agentStateLabels,
+} from '@/lib/eventStyles';
+import { PlanningEvent } from './PlanningEvent';
+import { FileChangeEvent } from './FileChangeEvent';
+import { ShellCommandEvent } from './ShellCommandEvent';
+import { VerificationEvent } from './VerificationEvent';
+import { BlockerEvent } from './BlockerEvent';
+import type {
+  ExecutionEvent,
+  ProgressEvent,
+  OutputEvent,
+  BlockerEvent as BlockerEventType,
+  CompletionEvent,
+  ErrorEvent,
+} from '@/hooks/useTaskStream';
+
+interface EventItemProps {
+  event: ExecutionEvent;
+  workspacePath: string;
+  onBlockerAnswered?: () => void;
+}
+
+/** Format ISO timestamp to HH:mm:ss for display. */
+function formatTime(iso: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  } catch {
+    return '';
+  }
+}
+
+/**
+ * Determine which phase a ProgressEvent belongs to for rendering delegation.
+ * File-related messages delegate to FileChangeEvent,
+ * verification phases to VerificationEvent, etc.
+ */
+function isFileChangeEvent(event: ProgressEvent): boolean {
+  return /^(creating|editing|deleting) file:/i.test(event.message ?? '');
+}
+
+/**
+ * Base event item component.
+ *
+ * Renders a timestamp and event-type badge, then delegates
+ * to the appropriate specialized component for the event body.
+ */
+export function EventItem({ event, workspacePath, onBlockerAnswered }: EventItemProps) {
+  // Skip heartbeat events in the display
+  if (event.event_type === 'heartbeat') return null;
+
+  const agentState = deriveAgentState(event);
+  const badgeClasses = agentStateBadgeStyles[agentState];
+  const label = agentStateLabels[agentState];
+
+  return (
+    <div className="flex gap-3 py-1.5">
+      {/* Timestamp */}
+      <span className="shrink-0 pt-0.5 font-mono text-[11px] text-muted-foreground">
+        {formatTime(event.timestamp)}
+      </span>
+
+      {/* Badge */}
+      <span
+        className={cn(
+          'shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase leading-none',
+          badgeClasses
+        )}
+      >
+        {label}
+      </span>
+
+      {/* Event body — delegates to specialized component */}
+      <div className="min-w-0 flex-1">
+        {renderEventBody(event, workspacePath, onBlockerAnswered)}
+      </div>
+    </div>
+  );
+}
+
+function renderEventBody(
+  event: ExecutionEvent,
+  workspacePath: string,
+  onBlockerAnswered?: () => void
+) {
+  switch (event.event_type) {
+    case 'progress': {
+      const pe = event as ProgressEvent;
+      if (pe.phase === 'planning') {
+        return <PlanningEvent event={pe} />;
+      }
+      if (pe.phase === 'verification' || pe.phase === 'self_correction') {
+        return <VerificationEvent event={pe} />;
+      }
+      if (isFileChangeEvent(pe)) {
+        return <FileChangeEvent event={pe} />;
+      }
+      // Generic execution step
+      return (
+        <p className="text-sm">
+          {pe.total_steps > 0 && (
+            <span className="mr-1.5 text-xs text-muted-foreground">
+              Step {pe.step}/{pe.total_steps}
+            </span>
+          )}
+          {pe.message}
+        </p>
+      );
+    }
+
+    case 'output':
+      return <ShellCommandEvent event={event as OutputEvent} />;
+
+    case 'blocker':
+      return (
+        <BlockerEvent
+          event={event as BlockerEventType}
+          workspacePath={workspacePath}
+          onAnswered={onBlockerAnswered}
+        />
+      );
+
+    case 'completion': {
+      const ce = event as CompletionEvent;
+      const isSuccess = ce.status === 'completed';
+      return (
+        <div className="text-sm">
+          <p className={isSuccess ? 'text-green-700 dark:text-green-400' : 'text-red-700 dark:text-red-400'}>
+            {isSuccess ? 'Task completed successfully' : `Task ${ce.status}`}
+            {ce.duration_seconds > 0 && (
+              <span className="ml-1.5 text-xs text-muted-foreground">
+                ({Math.round(ce.duration_seconds)}s)
+              </span>
+            )}
+          </p>
+          {ce.files_modified && ce.files_modified.length > 0 && (
+            <p className="mt-0.5 text-xs text-muted-foreground">
+              {ce.files_modified.length} file{ce.files_modified.length !== 1 ? 's' : ''} modified
+            </p>
+          )}
+        </div>
+      );
+    }
+
+    case 'error': {
+      const ee = event as ErrorEvent;
+      return (
+        <div className="text-sm">
+          <p className="font-medium text-red-700 dark:text-red-400">{ee.error}</p>
+          {ee.traceback && (
+            <pre className="mt-1 max-h-32 overflow-auto rounded bg-red-50 p-2 font-mono text-[11px] text-red-800 dark:bg-red-950/30 dark:text-red-300">
+              {ee.traceback}
+            </pre>
+          )}
+        </div>
+      );
+    }
+
+    default:
+      return null;
+  }
+}
diff --git a/web-ui/src/components/execution/EventStream.tsx b/web-ui/src/components/execution/EventStream.tsx
new file mode 100644
index 00000000..a47b1052
--- /dev/null
+++ b/web-ui/src/components/execution/EventStream.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { ArrowDown01Icon } from '@hugeicons/react';
+import { Button } from '@/components/ui/button';
+import { EventItem } from './EventItem';
+import type { ExecutionEvent } from '@/hooks/useTaskStream';
+
+interface EventStreamProps {
+  events: ExecutionEvent[];
+  workspacePath: string;
+  onBlockerAnswered?: () => void;
+}
+
+/**
+ * Scrollable event stream with auto-scroll behavior.
+ *
+ * - Default: auto-scrolls to bottom on new events
+ * - When user scrolls up: pauses auto-scroll, shows "New events" button
+ * - Click button or scroll to bottom: re-enables auto-scroll
+ *
+ * Uses a single scrollable div (no Radix ScrollArea) so that
+ * onScroll and scrollIntoView work on the same container.
+ */
+export function EventStream({ events, workspacePath, onBlockerAnswered }: EventStreamProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [hasNewEvents, setHasNewEvents] = useState(false);
+  const prevEventCountRef = useRef(events.length);
+
+  // Filter out heartbeat events for display
+  const displayEvents = events.filter((e) => e.event_type !== 'heartbeat');
+
+  // Detect new events while scrolled up
+  useEffect(() => {
+    if (events.length > prevEventCountRef.current && !autoScroll) {
+      setHasNewEvents(true);
+    }
+    prevEventCountRef.current = events.length;
+  }, [events.length, autoScroll]);
+
+  // Auto-scroll to bottom when new events arrive
+  useEffect(() => {
+    if (autoScroll && bottomRef.current) {
+      bottomRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [displayEvents.length, autoScroll]);
+
+  // Detect user scroll position
+  const handleScroll = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const isAtBottom = scrollHeight - scrollTop - clientHeight < 40;
+
+    if (isAtBottom) {
+      setAutoScroll(true);
+      setHasNewEvents(false);
+    } else {
+      setAutoScroll(false);
+    }
+  }, []);
+
+  const scrollToBottom = useCallback(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    setAutoScroll(true);
+    setHasNewEvents(false);
+  }, []);
+
+  return (
+    <div className="relative flex-1 overflow-hidden rounded-lg border">
+      <div
+        ref={containerRef}
+        className="h-full overflow-y-auto p-4"
+        onScroll={handleScroll}
+        role="log"
+        aria-live="polite"
+        aria-label="Execution event stream"
+      >
+        {displayEvents.length === 0 ? (
+          <p className="py-8 text-center text-sm text-muted-foreground">
+            Waiting for events...
+          </p>
+        ) : (
+          <div className="space-y-0.5">
+            {displayEvents.map((event, i) => (
+              <EventItem
+                key={`${event.timestamp}-${i}`}
+                event={event}
+                workspacePath={workspacePath}
+                onBlockerAnswered={onBlockerAnswered}
+              />
+            ))}
+          </div>
+        )}
+        {/* Scroll sentinel */}
+        <div ref={bottomRef} />
+      </div>
+
+      {/* "New events" floating button */}
+      {hasNewEvents && (
+        <div className="absolute bottom-3 left-1/2 -translate-x-1/2">
+          <Button
+            variant="secondary"
+            size="sm"
+            className="h-7 gap-1 rounded-full px-3 text-xs shadow-md"
+            onClick={scrollToBottom}
+          >
+            <ArrowDown01Icon className="h-3.5 w-3.5" />
+            New events
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web-ui/src/components/execution/ExecutionHeader.tsx b/web-ui/src/components/execution/ExecutionHeader.tsx
new file mode 100644
index 00000000..6925e786
--- /dev/null
+++ b/web-ui/src/components/execution/ExecutionHeader.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import { useState } from 'react';
+import { StopIcon, Loading03Icon } from '@hugeicons/react';
+import { Button } from '@/components/ui/button';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { cn } from '@/lib/utils';
+import {
+  agentStateBadgeStyles,
+  agentStateLabels,
+  agentStateIcons,
+  connectionDotStyles,
+} from '@/lib/eventStyles';
+import type { Task, UIAgentState } from '@/types';
+import type { SSEStatus } from '@/hooks/useEventSource';
+
+interface ExecutionHeaderProps {
+  task: Task | null;
+  agentState: UIAgentState;
+  sseStatus: SSEStatus;
+  onStop: () => void | Promise<void>;
+  isCompleted: boolean;
+}
+
+export function ExecutionHeader({
+  task,
+  agentState,
+  sseStatus,
+  onStop,
+  isCompleted,
+}: ExecutionHeaderProps) {
+  const [isStopping, setIsStopping] = useState(false);
+  const StateIcon = agentStateIcons[agentState];
+
+  const handleStop = async () => {
+    setIsStopping(true);
+    try {
+      await onStop();
+    } finally {
+      setIsStopping(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-4 rounded-lg border bg-card p-4">
+      {/* Left: task info + agent state */}
+      <div className="min-w-0 flex-1">
+        <h1 className="truncate text-lg font-semibold tracking-tight">
+          {task?.title ?? 'Loading task...'}
+        </h1>
+        {task?.description && (
+          <p className="mt-0.5 truncate text-sm text-muted-foreground">
+            {task.description}
+          </p>
+        )}
+      </div>
+
+      {/* Center: agent state badge */}
+      <div className="flex items-center gap-2">
+        <span
+          className={cn(
+            'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-semibold',
+            agentStateBadgeStyles[agentState]
+          )}
+        >
+          <StateIcon className="h-3.5 w-3.5" />
+          {agentStateLabels[agentState]}
+        </span>
+      </div>
+
+      {/* Right: connection dot + stop button */}
+      <div className="flex items-center gap-3">
+        {/* Connection status dot */}
+        <div className="flex items-center gap-1.5">
+          <span
+            className={cn(
+              'inline-block h-2 w-2 rounded-full',
+              connectionDotStyles[sseStatus] ?? connectionDotStyles.idle
+            )}
+            title={`Connection: ${sseStatus}`}
+          />
+          <span className="text-[10px] text-muted-foreground">{sseStatus}</span>
+        </div>
+
+        {/* Stop button with confirmation */}
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button
+              variant="destructive"
+              size="sm"
+              className="h-8 gap-1.5 px-3"
+              disabled={isCompleted || isStopping}
+            >
+              {isStopping ? (
+                <Loading03Icon className="h-3.5 w-3.5 animate-spin" />
+              ) : (
+                <StopIcon className="h-3.5 w-3.5" />
+              )}
+              Stop
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Stop Execution?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This will stop the AI agent&apos;s current work on{' '}
+                <strong>{task?.title ?? 'this task'}</strong>. Any in-progress
+                file changes may be left incomplete.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction onClick={handleStop}>
+                Stop Execution
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </div>
+  );
+}
diff --git a/web-ui/src/components/execution/FileChangeEvent.tsx b/web-ui/src/components/execution/FileChangeEvent.tsx
new file mode 100644
index 00000000..36ec0d47
--- /dev/null
+++ b/web-ui/src/components/execution/FileChangeEvent.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { useState } from 'react';
+import { FileEditIcon } from '@hugeicons/react';
+import { Button } from '@/components/ui/button';
+import type { ProgressEvent } from '@/hooks/useTaskStream';
+
+interface FileChangeEventProps {
+  event: ProgressEvent;
+}
+
+/**
+ * Renders a file change event with a collapsible diff preview.
+ *
+ * The message from the backend typically looks like:
+ *   "Creating file: src/auth/middleware.py"
+ *   "Editing file: src/auth/middleware.py"
+ */
+export function FileChangeEvent({ event }: FileChangeEventProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  // Extract file path from message (pattern: "Creating/Editing file: <path>")
+  const filePath = event.message?.replace(/^(Creating|Editing|Deleting) file:\s*/i, '') ?? '';
+
+  return (
+    <div className="text-sm">
+      <div className="flex items-center gap-2">
+        <FileEditIcon className="h-4 w-4 shrink-0 text-green-600" />
+        <span className="truncate font-mono text-xs">{filePath || event.message}</span>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="ml-auto h-5 px-1.5 text-[10px] text-muted-foreground"
+          onClick={() => setExpanded(!expanded)}
+          aria-expanded={expanded}
+        >
+          {expanded ? 'Hide' : 'View Diff'}
+        </Button>
+      </div>
+      {expanded && (
+        <pre className="mt-1.5 max-h-48 overflow-auto rounded bg-muted/50 p-2 font-mono text-[11px] leading-relaxed">
+          {/* Diff content will come from OutputEvents following this ProgressEvent.
+              For now, show the event message as placeholder context. */}
+          {event.message}
+        </pre>
+      )}
+    </div>
+  );
+}
diff --git a/web-ui/src/components/execution/PlanningEvent.tsx b/web-ui/src/components/execution/PlanningEvent.tsx
new file mode 100644
index 00000000..f8cd91c5
--- /dev/null
+++ b/web-ui/src/components/execution/PlanningEvent.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { Idea01Icon } from '@hugeicons/react';
+import type { ProgressEvent } from '@/hooks/useTaskStream';
+
+interface PlanningEventProps {
+  event: ProgressEvent;
+}
+
+export function PlanningEvent({ event }: PlanningEventProps) {
+  return (
+    <div className="flex items-start gap-2 text-sm">
+      <Idea01Icon className="mt-0.5 h-4 w-4 shrink-0 text-blue-600" />
+      <div className="min-w-0">
+        {event.total_steps > 0 && (
+          <span className="text-xs text-muted-foreground">
+            Generated {event.total_steps}-step plan
+          </span>
+        )}
+        {event.message && (
+          <p className="font-mono text-xs text-foreground">{event.message}</p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web-ui/src/components/execution/ProgressIndicator.tsx b/web-ui/src/components/execution/ProgressIndicator.tsx
new file mode 100644
index 00000000..8b3e70ce
--- /dev/null
+++ b/web-ui/src/components/execution/ProgressIndicator.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { Progress } from '@/components/ui/progress';
+import { agentStateLabels } from '@/lib/eventStyles';
+import type { UIAgentState } from '@/types';
+
+interface ProgressIndicatorProps {
+  currentStep: number;
+  totalSteps: number;
+  currentMessage: string;
+  agentState: UIAgentState;
+}
+
+export function ProgressIndicator({
+  currentStep,
+  totalSteps,
+  currentMessage,
+  agentState,
+}: ProgressIndicatorProps) {
+  const percentage = totalSteps > 0 ? Math.round((currentStep / totalSteps) * 100) : 0;
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between text-xs">
+        <span className="text-muted-foreground">
+          {totalSteps > 0 ? (
+            <>
+              Step {currentStep} of {totalSteps}
+              {currentMessage && (
+                <span className="ml-1.5 text-foreground">{currentMessage}</span>
+              )}
+            </>
+          ) : (
+            <span>{agentStateLabels[agentState]}...</span>
+          )}
+        </span>
+        {totalSteps > 0 && (
+          <span className="tabular-nums text-muted-foreground">{percentage}%</span>
+        )}
+      </div>
+      <Progress value={percentage} className="h-1.5" />
+    </div>
+  );
+}
diff --git a/web-ui/src/components/execution/ShellCommandEvent.tsx b/web-ui/src/components/execution/ShellCommandEvent.tsx
new file mode 100644
index 00000000..2067f701
--- /dev/null
+++ b/web-ui/src/components/execution/ShellCommandEvent.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { useState } from 'react';
+import { CommandLineIcon, CheckmarkCircle01Icon, Cancel01Icon } from '@hugeicons/react';
+import { Button } from '@/components/ui/button';
+import type { OutputEvent } from '@/hooks/useTaskStream';
+
+interface ShellCommandEventProps {
+  /** The output event containing stdout/stderr. */
+  event: OutputEvent;
+}
+
+/**
+ * Renders shell command output with a collapsible output section.
+ * Shows the output line in monospace, colored by stream type.
+ */
+export function ShellCommandEvent({ event }: ShellCommandEventProps) {
+  const [expanded, setExpanded] = useState(event.stream === 'stderr');
+  const isError = event.stream === 'stderr';
+
+  return (
+    <div className="text-sm">
+      <div className="flex items-center gap-2">
+        <CommandLineIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
+        <span className="truncate font-mono text-xs text-muted-foreground">
+          {isError ? 'stderr' : 'stdout'}
+        </span>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="ml-auto h-5 px-1.5 text-[10px] text-muted-foreground"
+          onClick={() => setExpanded(!expanded)}
+          aria-expanded={expanded}
+        >
+          {expanded ? 'Hide' : 'Show'}
+        </Button>
+      </div>
+      {expanded && (
+        <pre
+          className={`mt-1.5 max-h-48 overflow-auto rounded p-2 font-mono text-[11px] leading-relaxed ${
+            isError
+              ? 'bg-red-50 text-red-800 dark:bg-red-950/30 dark:text-red-300'
+              : 'bg-muted/50 text-foreground'
+          }`}
+        >
+          {event.line}
+        </pre>
+      )}
+    </div>
+  );
+}
diff --git a/web-ui/src/components/execution/VerificationEvent.tsx b/web-ui/src/components/execution/VerificationEvent.tsx
new file mode 100644
index 00000000..fd9591cc
--- /dev/null
+++ b/web-ui/src/components/execution/VerificationEvent.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { CheckmarkCircle01Icon, Cancel01Icon } from '@hugeicons/react';
+import type { ProgressEvent } from '@/hooks/useTaskStream';
+
+interface VerificationEventProps {
+  event: ProgressEvent;
+}
+
+/**
+ * Renders a verification gate result.
+ *
+ * The message from the backend typically looks like:
+ *   "ruff check: passed"
+ *   "pytest: 3/3 passed"
+ *   "ruff check: failed (2 errors)"
+ */
+export function VerificationEvent({ event }: VerificationEventProps) {
+  const passed = /\bpassed?\b/i.test(event.message ?? '');
+  const Icon = passed ? CheckmarkCircle01Icon : Cancel01Icon;
+
+  return (
+    <div className="flex items-center gap-2 text-sm">
+      <Icon
+        className={`h-4 w-4 shrink-0 ${
+          passed ? 'text-green-600' : 'text-red-600'
+        }`}
+      />
+      <span className="font-mono text-xs">{event.message}</span>
+    </div>
+  );
+}
diff --git a/web-ui/src/components/execution/index.ts b/web-ui/src/components/execution/index.ts
new file mode 100644
index 00000000..ada63c88
--- /dev/null
+++ b/web-ui/src/components/execution/index.ts
@@ -0,0 +1,11 @@
+export { EventItem } from './EventItem';
+export { PlanningEvent } from './PlanningEvent';
+export { FileChangeEvent } from './FileChangeEvent';
+export { ShellCommandEvent } from './ShellCommandEvent';
+export { VerificationEvent } from './VerificationEvent';
+export { BlockerEvent } from './BlockerEvent';
+export { ExecutionHeader } from './ExecutionHeader';
+export { EventStream } from './EventStream';
+export { ProgressIndicator } from './ProgressIndicator';
+export { ChangesSidebar } from './ChangesSidebar';
+export { BatchExecutionMonitor } from './BatchExecutionMonitor';
diff --git a/web-ui/src/components/layout/AppSidebar.tsx b/web-ui/src/components/layout/AppSidebar.tsx
index 08ffe278..2fc6e299 100644
--- a/web-ui/src/components/layout/AppSidebar.tsx
+++ b/web-ui/src/components/layout/AppSidebar.tsx
@@ -24,7 +24,7 @@ const NAV_ITEMS: NavItem[] = [
   { href: '/', label: 'Workspace', icon: Home01Icon, enabled: true },
   { href: '/prd', label: 'PRD', icon: FileEditIcon, enabled: true },
   { href: '/tasks', label: 'Tasks', icon: Task01Icon, enabled: true },
-  { href: '/execution', label: 'Execution', icon: PlayIcon, enabled: false },
+  { href: '/execution', label: 'Execution', icon: PlayIcon, enabled: true },
   { href: '/blockers', label: 'Blockers', icon: Alert02Icon, enabled: false },
   { href: '/review', label: 'Review', icon: GitBranchIcon, enabled: false },
 ];
diff --git a/web-ui/src/components/tasks/TaskBoardView.tsx b/web-ui/src/components/tasks/TaskBoardView.tsx
index 614e2bed..9c6c9fdb 100644
--- a/web-ui/src/components/tasks/TaskBoardView.tsx
+++ b/web-ui/src/components/tasks/TaskBoardView.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useCallback, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
 import useSWR from 'swr';
 import { TaskBoardContent } from './TaskBoardContent';
 import { TaskDetailModal } from './TaskDetailModal';
@@ -19,6 +20,7 @@ interface TaskBoardViewProps {
 }
 
 export function TaskBoardView({ workspacePath }: TaskBoardViewProps) {
+  const router = useRouter();
 
   // ─── Data fetching ─────────────────────────────────────────────
   const { data, isLoading, error, mutate } = useSWR<TaskListResponse, ApiError>(
@@ -101,13 +103,13 @@ export function TaskBoardView({ workspacePath }: TaskBoardViewProps) {
       try {
         await tasksApi.startExecution(workspacePath, taskId);
         setDetailTaskId(null);
-        await mutate();
+        router.push(`/execution/${taskId}`);
       } catch (err) {
         const apiErr = err as ApiError;
         setActionError(apiErr.detail || 'Failed to start execution');
       }
     },
-    [workspacePath, mutate]
+    [workspacePath, router]
   );
 
   const handleMarkReady = useCallback(
@@ -129,20 +131,20 @@ export function TaskBoardView({ workspacePath }: TaskBoardViewProps) {
     setIsExecuting(true);
     setActionError(null);
     try {
-      await tasksApi.executeBatch(workspacePath, {
+      const result = await tasksApi.executeBatch(workspacePath, {
         task_ids: Array.from(selectedTaskIds),
         strategy: batchStrategy,
       });
       setSelectionMode(false);
       setSelectedTaskIds(new Set());
-      await mutate();
+      router.push(`/execution?batch=${result.batch_id}`);
     } catch (err) {
       const apiErr = err as ApiError;
       setActionError(apiErr.detail || 'Failed to start batch execution');
     } finally {
       setIsExecuting(false);
     }
-  }, [workspacePath, selectedTaskIds, batchStrategy, mutate]);
+  }, [workspacePath, selectedTaskIds, batchStrategy, router]);
 
   const handleStatusChange = useCallback(() => {
     mutate();
diff --git a/web-ui/src/components/ui/alert-dialog.tsx b/web-ui/src/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..ce68649f
--- /dev/null
+++ b/web-ui/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+'use client';
+
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
diff --git a/web-ui/src/components/ui/progress.tsx b/web-ui/src/components/ui/progress.tsx
new file mode 100644
index 00000000..f9afde8a
--- /dev/null
+++ b/web-ui/src/components/ui/progress.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from '@/lib/utils';
+
+const Progress = React.forwardRef<
+  React.ComponentRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
+      className
+    )}
+    value={value}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
diff --git a/web-ui/src/components/ui/scroll-area.tsx b/web-ui/src/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..b3eba26e
--- /dev/null
+++ b/web-ui/src/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '@/lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/web-ui/src/hooks/useExecutionMonitor.ts b/web-ui/src/hooks/useExecutionMonitor.ts
new file mode 100644
index 00000000..e65b666f
--- /dev/null
+++ b/web-ui/src/hooks/useExecutionMonitor.ts
@@ -0,0 +1,200 @@
+'use client';
+
+import { useCallback, useRef, useState, useEffect } from 'react';
+import {
+  useTaskStream,
+  type ExecutionEvent,
+  type ProgressEvent,
+  type CompletionEvent,
+} from './useTaskStream';
+import { deriveAgentState } from '@/lib/eventStyles';
+import type { SSEStatus } from './useEventSource';
+import type { UIAgentState } from '@/types';
+
+// ── Public interface ──────────────────────────────────────────────────
+
+export interface ExecutionMonitorState {
+  /** All accumulated events (heartbeats included for completeness). */
+  events: ExecutionEvent[];
+  /** Current agent state derived from the latest non-heartbeat event. */
+  agentState: UIAgentState;
+  /** Current step number from the latest ProgressEvent. */
+  currentStep: number;
+  /** Total steps from the latest ProgressEvent. */
+  totalSteps: number;
+  /** Current phase label (planning, execution, verification, etc.). */
+  currentPhase: string;
+  /** Human-readable message from the latest ProgressEvent. */
+  currentMessage: string;
+  /** Files modified during execution (from CompletionEvent.files_modified). */
+  changedFiles: string[];
+  /** Whether the execution has finished (completed, failed, or blocked). */
+  isCompleted: boolean;
+  /** Terminal status if completed, otherwise null. */
+  completionStatus: 'completed' | 'failed' | 'blocked' | null;
+  /** Execution duration in seconds (from CompletionEvent), or null. */
+  duration: number | null;
+  /** Underlying SSE connection status. */
+  sseStatus: SSEStatus;
+}
+
+/**
+ * Higher-level hook that composes `useTaskStream` and accumulates
+ * execution events into a single state object for the Execution Monitor.
+ *
+ * Uses `useRef` + `requestAnimationFrame` batching to avoid per-event
+ * re-renders when events arrive rapidly.
+ */
+export function useExecutionMonitor(
+  taskId: string | null,
+  workspacePath: string | null = null
+): ExecutionMonitorState & { close: () => void } {
+  // ── Refs for accumulation (no re-render per event) ────────────────
+  const eventsRef = useRef<ExecutionEvent[]>([]);
+  const rafRef = useRef<number | null>(null);
+  const sseStatusRef = useRef<SSEStatus>('idle');
+
+  // ── State exposed to consumers ────────────────────────────────────
+  const [state, setState] = useState<ExecutionMonitorState>({
+    events: [],
+    agentState: 'CONNECTING',
+    currentStep: 0,
+    totalSteps: 0,
+    currentPhase: '',
+    currentMessage: '',
+    changedFiles: [],
+    isCompleted: false,
+    completionStatus: null,
+    duration: null,
+    sseStatus: 'idle',
+  });
+
+  // Reset accumulated state when taskId changes
+  useEffect(() => {
+    eventsRef.current = [];
+    setState({
+      events: [],
+      agentState: 'CONNECTING',
+      currentStep: 0,
+      totalSteps: 0,
+      currentPhase: '',
+      currentMessage: '',
+      changedFiles: [],
+      isCompleted: false,
+      completionStatus: null,
+      duration: null,
+      sseStatus: 'idle',
+    });
+  }, [taskId]);
+
+  // ── Flush accumulated events to state via rAF ─────────────────────
+  const scheduleFlush = useCallback(() => {
+    if (rafRef.current !== null) return; // already scheduled
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      // Snapshot events and compute derived state
+      const events = [...eventsRef.current];
+      const lastNonHeartbeat = findLastNonHeartbeat(events);
+
+      let agentState: UIAgentState = lastNonHeartbeat
+        ? deriveAgentState(lastNonHeartbeat)
+        : 'CONNECTING';
+
+      // Don't let rAF flush overwrite DISCONNECTED state
+      if (sseStatusRef.current === 'error' || sseStatusRef.current === 'closed') {
+        agentState = 'DISCONNECTED';
+      }
+
+      const latestProgress = findLatestProgress(events);
+      const completion = findCompletion(events);
+
+      setState((prev) => ({
+        ...prev,
+        events,
+        agentState,
+        currentStep: latestProgress?.step ?? prev.currentStep,
+        totalSteps: latestProgress?.total_steps ?? prev.totalSteps,
+        currentPhase: latestProgress?.phase ?? prev.currentPhase,
+        currentMessage: latestProgress?.message ?? prev.currentMessage,
+        changedFiles: completion?.files_modified ?? prev.changedFiles,
+        isCompleted: completion !== null,
+        completionStatus: completion?.status ?? null,
+        duration: completion?.duration_seconds ?? null,
+      }));
+    });
+  }, []);
+
+  // Cleanup rAF on unmount
+  useEffect(() => {
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, []);
+
+  // ── Event callbacks ───────────────────────────────────────────────
+  const onEvent = useCallback(
+    (event: ExecutionEvent) => {
+      eventsRef.current = [...eventsRef.current, event];
+      scheduleFlush();
+    },
+    [scheduleFlush]
+  );
+
+  // ── Compose useTaskStream ─────────────────────────────────────────
+  const { status: sseStatus, close } = useTaskStream({
+    taskId,
+    workspacePath,
+    onEvent,
+  });
+
+  // Keep sseStatusRef in sync
+  useEffect(() => {
+    sseStatusRef.current = sseStatus;
+  }, [sseStatus]);
+
+  // Sync SSE status into our state
+  useEffect(() => {
+    setState((prev) => {
+      if (prev.sseStatus === sseStatus) return prev;
+
+      // If SSE transitions to error/closed and we haven't completed,
+      // mark as disconnected so the UI can show reconnection state.
+      const agentState =
+        !prev.isCompleted && (sseStatus === 'error' || sseStatus === 'closed')
+          ? 'DISCONNECTED'
+          : prev.agentState;
+
+      return { ...prev, sseStatus, agentState };
+    });
+  }, [sseStatus]);
+
+  return { ...state, sseStatus, close };
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────
+
+function findLastNonHeartbeat(
+  events: ExecutionEvent[]
+): ExecutionEvent | null {
+  for (let i = events.length - 1; i >= 0; i--) {
+    if (events[i].event_type !== 'heartbeat') return events[i];
+  }
+  return null;
+}
+
+function findLatestProgress(events: ExecutionEvent[]): ProgressEvent | null {
+  for (let i = events.length - 1; i >= 0; i--) {
+    if (events[i].event_type === 'progress') return events[i] as ProgressEvent;
+  }
+  return null;
+}
+
+function findCompletion(events: ExecutionEvent[]): CompletionEvent | null {
+  for (let i = events.length - 1; i >= 0; i--) {
+    if (events[i].event_type === 'completion')
+      return events[i] as CompletionEvent;
+  }
+  return null;
+}
diff --git a/web-ui/src/hooks/useTaskStream.ts b/web-ui/src/hooks/useTaskStream.ts
index cdf852e9..b3c56495 100644
--- a/web-ui/src/hooks/useTaskStream.ts
+++ b/web-ui/src/hooks/useTaskStream.ts
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useEventSource, type SSEStatus } from './useEventSource';
 
 // ── Event types matching backend ExecutionEvent models ──────────────────
@@ -71,6 +71,8 @@ export type ExecutionEvent =
 export interface UseTaskStreamOptions {
   /** Task ID to stream events for. Pass `null` to disable. */
   taskId: string | null;
+  /** Workspace path required by the backend. Pass `null` to disable. */
+  workspacePath: string | null;
   /** Called for every execution event (including heartbeats). */
   onEvent?: (event: ExecutionEvent) => void;
   /** Called specifically on progress events. */
@@ -96,6 +98,7 @@ export interface UseTaskStreamOptions {
  */
 export function useTaskStream({
   taskId,
+  workspacePath,
   onEvent,
   onProgress,
   onOutput,
@@ -104,9 +107,17 @@ export function useTaskStream({
   onError,
 }: UseTaskStreamOptions) {
   const [lastEvent, setLastEvent] = useState<ExecutionEvent | null>(null);
-
-  const apiBase = process.env.NEXT_PUBLIC_API_URL || '';
-  const url = taskId ? `${apiBase}/api/v2/tasks/${taskId}/stream` : null;
+  // Ref to close() — lets handleMessage close the connection on completion
+  // without a stale closure (close is created after handleMessage).
+  const closeRef = useRef<() => void>(() => {});
+
+  // SSE must connect directly to the backend — the Next.js rewrite proxy
+  // buffers chunked responses, which prevents SSE events from streaming.
+  const sseBase = process.env.NEXT_PUBLIC_SSE_URL || 'http://localhost:8000';
+  const url =
+    taskId && workspacePath
+      ? `${sseBase}/api/v2/tasks/${taskId}/stream?workspace_path=${encodeURIComponent(workspacePath)}`
+      : null;
 
   const handleMessage = useCallback(
     (data: string) => {
@@ -127,6 +138,10 @@ export function useTaskStream({
             break;
           case 'completion':
             onComplete?.(event);
+            // Stream is done — close immediately to prevent reconnect loop.
+            // (onmessage resets the retry counter, so the onerror handler
+            // would otherwise retry forever after the server closes.)
+            closeRef.current();
             break;
           case 'error':
             onError?.(event);
@@ -145,5 +160,7 @@ export function useTaskStream({
     onMessage: handleMessage,
   });
 
+  closeRef.current = close;
+
   return { status, lastEvent, close };
 }
diff --git a/web-ui/src/lib/api.ts b/web-ui/src/lib/api.ts
index 4dde5e1f..81c2fc16 100644
--- a/web-ui/src/lib/api.ts
+++ b/web-ui/src/lib/api.ts
@@ -25,6 +25,9 @@ import type {
   DiscoveryStatusResponse,
   GeneratePrdResponse,
   GenerateTasksResponse,
+  Blocker,
+  BlockerListResponse,
+  BatchResponse,
 } from '@/types';
 
 // FastAPI validation error format
@@ -54,7 +57,10 @@ export function normalizeErrorDetail(
     return rawDetail.map((err) => err.msg).join('; ');
   }
   if (typeof rawDetail === 'object' && rawDetail !== null) {
-    // Structured error: prefer .error, fall back to .detail
+    // Structured error: combine error + detail for full context
+    if (rawDetail.error && rawDetail.detail) {
+      return `${rawDetail.error}: ${rawDetail.detail}`;
+    }
     return rawDetail.error || rawDetail.detail || fallbackMessage || 'An error occurred';
   }
   return rawDetail || fallbackMessage || 'An error occurred';
@@ -198,6 +204,24 @@ export const tasksApi = {
     );
     return response.data;
   },
+
+  /**
+   * Stop a running task execution
+   */
+  stopExecution: async (workspacePath: string, taskId: string): Promise<void> => {
+    await api.post(`/api/v2/tasks/${encodeURIComponent(taskId)}/stop`, {}, {
+      params: { workspace_path: workspacePath },
+    });
+  },
+
+  /**
+   * Resume a blocked task execution
+   */
+  resumeExecution: async (workspacePath: string, taskId: string): Promise<void> => {
+    await api.post(`/api/v2/tasks/${encodeURIComponent(taskId)}/resume`, {}, {
+      params: { workspace_path: workspacePath },
+    });
+  },
 };
 
 // Events API methods
@@ -220,6 +244,87 @@ export const eventsApi = {
   },
 };
 
+// Blockers API methods
+export const blockersApi = {
+  /**
+   * Get blockers, optionally filtered by task
+   */
+  getForTask: async (
+    workspacePath: string,
+    taskId: string
+  ): Promise<BlockerListResponse> => {
+    const response = await api.get<BlockerListResponse>('/api/v2/blockers', {
+      params: { workspace_path: workspacePath, task_id: taskId },
+    });
+    return response.data;
+  },
+
+  /**
+   * Answer a blocker (also resets the associated task to READY)
+   */
+  answer: async (
+    workspacePath: string,
+    blockerId: string,
+    answer: string
+  ): Promise<Blocker> => {
+    const response = await api.post<Blocker>(
+      `/api/v2/blockers/${encodeURIComponent(blockerId)}/answer`,
+      { answer },
+      { params: { workspace_path: workspacePath } }
+    );
+    return response.data;
+  },
+
+  /**
+   * Mark a blocker as resolved (must be answered first)
+   */
+  resolve: async (workspacePath: string, blockerId: string): Promise<Blocker> => {
+    const response = await api.post<Blocker>(
+      `/api/v2/blockers/${encodeURIComponent(blockerId)}/resolve`,
+      {},
+      { params: { workspace_path: workspacePath } }
+    );
+    return response.data;
+  },
+};
+
+// Batches API methods
+export const batchesApi = {
+  /**
+   * Get batch details including per-task results
+   */
+  get: async (workspacePath: string, batchId: string): Promise<BatchResponse> => {
+    const response = await api.get<BatchResponse>(`/api/v2/batches/${encodeURIComponent(batchId)}`, {
+      params: { workspace_path: workspacePath },
+    });
+    return response.data;
+  },
+
+  /**
+   * Stop a running batch
+   */
+  stop: async (workspacePath: string, batchId: string): Promise<BatchResponse> => {
+    const response = await api.post<BatchResponse>(
+      `/api/v2/batches/${encodeURIComponent(batchId)}/stop`,
+      {},
+      { params: { workspace_path: workspacePath } }
+    );
+    return response.data;
+  },
+
+  /**
+   * Cancel a running batch
+   */
+  cancel: async (workspacePath: string, batchId: string): Promise<BatchResponse> => {
+    const response = await api.post<BatchResponse>(
+      `/api/v2/batches/${encodeURIComponent(batchId)}/cancel`,
+      {},
+      { params: { workspace_path: workspacePath } }
+    );
+    return response.data;
+  },
+};
+
 // PRD API methods
 export const prdApi = {
   getAll: async (workspacePath: string): Promise<PrdListResponse> => {
diff --git a/web-ui/src/lib/eventStyles.ts b/web-ui/src/lib/eventStyles.ts
new file mode 100644
index 00000000..4dc147ff
--- /dev/null
+++ b/web-ui/src/lib/eventStyles.ts
@@ -0,0 +1,135 @@
+/**
+ * Centralized styling constants and helpers for execution event types.
+ *
+ * Used by EventItem, ExecutionHeader, and other execution monitor components
+ * to ensure consistent badge colors and icons across the UI.
+ */
+import type { ComponentType } from 'react';
+import type { UIAgentState } from '@/types';
+import type {
+  ExecutionEvent,
+  ProgressEvent,
+  CompletionEvent,
+} from '@/hooks/useTaskStream';
+import {
+  Idea01Icon,
+  PlayIcon,
+  CheckmarkCircle01Icon,
+  ArrowTurnBackwardIcon,
+  Alert02Icon,
+  Cancel01Icon,
+  CommandLineIcon,
+  AlertDiamondIcon,
+  Loading03Icon,
+  WifiDisconnected01Icon,
+  FileEditIcon,
+} from '@hugeicons/react';
+
+// ── Agent state derivation ─────────────────────────────────────────────
+
+/**
+ * Derive the UI agent state from a raw execution event.
+ *
+ * Maps backend event_type + phase/status to a display-friendly state
+ * that drives badge color and icon selection.
+ */
+export function deriveAgentState(event: ExecutionEvent): UIAgentState {
+  switch (event.event_type) {
+    case 'progress': {
+      const { phase } = event as ProgressEvent;
+      switch (phase) {
+        case 'planning':
+          return 'PLANNING';
+        case 'execution':
+          return 'EXECUTING';
+        case 'verification':
+          return 'VERIFICATION';
+        case 'self_correction':
+          return 'SELF_CORRECTING';
+        default:
+          return 'EXECUTING';
+      }
+    }
+    case 'blocker':
+      return 'BLOCKED';
+    case 'completion': {
+      const { status } = event as CompletionEvent;
+      if (status === 'completed') return 'COMPLETED';
+      if (status === 'blocked') return 'BLOCKED';
+      return 'FAILED';
+    }
+    case 'error':
+      return 'FAILED';
+    case 'output':
+      return 'EXECUTING';
+    default:
+      return 'EXECUTING';
+  }
+}
+
+// ── Badge styles ───────────────────────────────────────────────────────
+
+/** Tailwind classes for the agent state badge background + text. */
+export const agentStateBadgeStyles: Record<UIAgentState, string> = {
+  CONNECTING: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
+  PLANNING: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+  EXECUTING: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
+  VERIFICATION: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300',
+  SELF_CORRECTING: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
+  BLOCKED: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
+  COMPLETED: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
+  FAILED: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
+  DISCONNECTED: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
+};
+
+/** Human-readable labels for each agent state. */
+export const agentStateLabels: Record<UIAgentState, string> = {
+  CONNECTING: 'Connecting',
+  PLANNING: 'Planning',
+  EXECUTING: 'Executing',
+  VERIFICATION: 'Verifying',
+  SELF_CORRECTING: 'Self-Correcting',
+  BLOCKED: 'Blocked',
+  COMPLETED: 'Completed',
+  FAILED: 'Failed',
+  DISCONNECTED: 'Disconnected',
+};
+
+// ── Icon mapping ───────────────────────────────────────────────────────
+
+// Hugeicons icon props type (size + className are the commonly used ones)
+type IconProps = { size?: number; className?: string };
+
+/** Icon component for each agent state. */
+export const agentStateIcons: Record<UIAgentState, ComponentType<IconProps>> = {
+  CONNECTING: Loading03Icon,
+  PLANNING: Idea01Icon,
+  EXECUTING: PlayIcon,
+  VERIFICATION: CheckmarkCircle01Icon,
+  SELF_CORRECTING: ArrowTurnBackwardIcon,
+  BLOCKED: Alert02Icon,
+  COMPLETED: CheckmarkCircle01Icon,
+  FAILED: Cancel01Icon,
+  DISCONNECTED: WifiDisconnected01Icon,
+};
+
+/**
+ * Icon for specific event sub-types used inside event detail renderers
+ * (e.g. shell output uses a terminal icon, errors use a diamond alert).
+ */
+export const eventDetailIcons = {
+  shellCommand: CommandLineIcon,
+  errorDetail: AlertDiamondIcon,
+  fileChange: FileEditIcon,
+} as const;
+
+// ── Connection status dot ──────────────────────────────────────────────
+
+/** CSS classes for the SSE connection status indicator dot. */
+export const connectionDotStyles: Record<string, string> = {
+  idle: 'bg-gray-400 dark:bg-gray-500',
+  connecting: 'bg-yellow-400 animate-pulse dark:bg-yellow-500',
+  open: 'bg-green-500 dark:bg-green-400',
+  closed: 'bg-gray-400 dark:bg-gray-500',
+  error: 'bg-red-500 dark:bg-red-400',
+};
diff --git a/web-ui/src/types/index.ts b/web-ui/src/types/index.ts
index c3ab1bfe..115c04b2 100644
--- a/web-ui/src/types/index.ts
+++ b/web-ui/src/types/index.ts
@@ -99,6 +99,54 @@ export interface TaskStartResponse {
   message: string;
 }
 
+// Blocker types
+// Must match backend: codeframe/ui/routers/blockers_v2.py
+export type BlockerStatus = 'OPEN' | 'ANSWERED' | 'RESOLVED';
+
+export interface Blocker {
+  id: string;
+  workspace_id: string;
+  task_id: string | null;
+  question: string;
+  answer: string | null;
+  status: BlockerStatus;
+  created_at: string;
+  answered_at: string | null;
+}
+
+export interface BlockerListResponse {
+  blockers: Blocker[];
+  total: number;
+  by_status: Record<string, number>;
+}
+
+// Batch detail types
+// Must match backend: codeframe/ui/routers/batches_v2.py
+export interface BatchResponse {
+  id: string;
+  workspace_id: string;
+  task_ids: string[];
+  status: string;
+  strategy: string;
+  max_parallel: number;
+  on_failure: string;
+  started_at: string | null;
+  completed_at: string | null;
+  results: Record<string, string>; // task_id → RunStatus
+}
+
+// UI-derived agent state for execution monitor display
+export type UIAgentState =
+  | 'CONNECTING'
+  | 'PLANNING'
+  | 'EXECUTING'
+  | 'VERIFICATION'
+  | 'SELF_CORRECTING'
+  | 'BLOCKED'
+  | 'COMPLETED'
+  | 'FAILED'
+  | 'DISCONNECTED';
+
 // Activity types (for UI display)
 export type ActivityType =
   | 'task_completed'