diff --git a/web-ui/__mocks__/@hugeicons/react.js b/web-ui/__mocks__/@hugeicons/react.js
index 10c8255e..13e2748a 100644
--- a/web-ui/__mocks__/@hugeicons/react.js
+++ b/web-ui/__mocks__/@hugeicons/react.js
@@ -51,5 +51,6 @@ module.exports = {
   WifiDisconnected01Icon: createIconMock('WifiDisconnected01Icon'),
   SidebarLeftIcon: createIconMock('SidebarLeftIcon'),
   ArrowDown01Icon: createIconMock('ArrowDown01Icon'),
+  ArrowUp01Icon: createIconMock('ArrowUp01Icon'),
   StopIcon: createIconMock('StopIcon'),
 };
diff --git a/web-ui/__tests__/components/blockers/BlockerCard.test.tsx b/web-ui/__tests__/components/blockers/BlockerCard.test.tsx
new file mode 100644
index 00000000..6f541d39
--- /dev/null
+++ b/web-ui/__tests__/components/blockers/BlockerCard.test.tsx
@@ -0,0 +1,220 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BlockerCard } from '@/components/blockers/BlockerCard';
+import { blockersApi } from '@/lib/api';
+import type { Blocker } from '@/types';
+
+// Mock the API
+jest.mock('@/lib/api', () => ({
+  blockersApi: {
+    answer: jest.fn(),
+  },
+}));
+
+const mockAnswer = blockersApi.answer as jest.MockedFunction<typeof blockersApi.answer>;
+
+function makeBlocker(overrides: Partial<Blocker> = {}): Blocker {
+  return {
+    id: 'blocker-1',
+    workspace_id: 'ws-1',
+    task_id: 'task-42',
+    question: 'Which database should we use?',
+    answer: null,
+    status: 'OPEN',
+    created_at: new Date(Date.now() - 30 * 60 * 1000).toISOString(), // 30m ago
+    answered_at: null,
+    ...overrides,
+  };
+}
+
+describe('BlockerCard', () => {
+  const workspacePath = '/home/user/project';
+  const onAnswered = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('renders the blocker question prominently', () => {
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    expect(screen.getByText('Which database should we use?')).toBeInTheDocument();
+  });
+
+  it('displays the task ID', () => {
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    expect(screen.getByText('Task task-42')).toBeInTheDocument();
+  });
+
+  it('shows OPEN badge', () => {
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    expect(screen.getByText('OPEN')).toBeInTheDocument();
+  });
+
+  it('shows relative timestamp', () => {
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    expect(screen.getByText('30m ago')).toBeInTheDocument();
+  });
+
+  it('shows the answer form for OPEN blockers', () => {
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    expect(screen.getByTestId('blocker-answer-form')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Type your answer...')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /answer blocker/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /skip/i })).toBeInTheDocument();
+  });
+
+  it('disables submit button when answer is empty', () => {
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    expect(screen.getByRole('button', { name: /answer blocker/i })).toBeDisabled();
+  });
+
+  it('enables submit button when answer has text', async () => {
+    jest.useRealTimers();
+    const user = userEvent.setup();
+
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your answer...');
+    await user.type(textarea, 'Use PostgreSQL');
+
+    expect(screen.getByRole('button', { name: /answer blocker/i })).toBeEnabled();
+  });
+
+  it('shows success state after successful submission', async () => {
+    jest.useRealTimers();
+    const user = userEvent.setup();
+    mockAnswer.mockResolvedValueOnce(makeBlocker({ status: 'ANSWERED', answer: 'Use PostgreSQL' }));
+
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your answer...');
+    await user.type(textarea, 'Use PostgreSQL');
+    await user.click(screen.getByRole('button', { name: /answer blocker/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/blocker answered/i)).toBeInTheDocument();
+    });
+  });
+
+  it('calls blockersApi.answer with correct arguments', async () => {
+    jest.useRealTimers();
+    const user = userEvent.setup();
+    mockAnswer.mockResolvedValueOnce(makeBlocker({ status: 'ANSWERED', answer: 'Use PostgreSQL' }));
+
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    const textarea = screen.getByPlaceholderText('Type your answer...');
+    await user.type(textarea, 'Use PostgreSQL');
+    await user.click(screen.getByRole('button', { name: /answer blocker/i }));
+
+    expect(mockAnswer).toHaveBeenCalledWith(workspacePath, 'blocker-1', 'Use PostgreSQL');
+  });
+
+  it('displays error when API call fails', async () => {
+    jest.useRealTimers();
+    const user = userEvent.setup();
+    mockAnswer.mockRejectedValueOnce({ detail: 'Blocker already resolved' });
+
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    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 already resolved')).toBeInTheDocument();
+    });
+  });
+
+  it('hides form when Skip is clicked and shows "Show answer form" button', async () => {
+    jest.useRealTimers();
+    const user = userEvent.setup();
+
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    await user.click(screen.getByRole('button', { name: /skip/i }));
+
+    expect(screen.queryByTestId('blocker-answer-form')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /show answer form/i })).toBeInTheDocument();
+  });
+
+  it('re-expands form when "Show answer form" is clicked after Skip', async () => {
+    jest.useRealTimers();
+    const user = userEvent.setup();
+
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    await user.click(screen.getByRole('button', { name: /skip/i }));
+    await user.click(screen.getByRole('button', { name: /show answer form/i }));
+
+    expect(screen.getByTestId('blocker-answer-form')).toBeInTheDocument();
+  });
+
+  it('shows character count', async () => {
+    jest.useRealTimers();
+    const user = userEvent.setup();
+
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    expect(screen.getByText('0 characters')).toBeInTheDocument();
+
+    const textarea = screen.getByPlaceholderText('Type your answer...');
+    await user.type(textarea, 'Hello');
+
+    expect(screen.getByText('5 characters')).toBeInTheDocument();
+  });
+
+  it('has correct data-testid attributes', () => {
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    expect(screen.getByTestId('blocker-card')).toBeInTheDocument();
+    expect(screen.getByTestId('blocker-answer-form')).toBeInTheDocument();
+  });
+
+  it('has correct aria-label on textarea', () => {
+    render(
+      <BlockerCard blocker={makeBlocker()} workspacePath={workspacePath} onAnswered={onAnswered} />
+    );
+
+    expect(screen.getByLabelText('Your answer to the blocker question')).toBeInTheDocument();
+  });
+});
diff --git a/web-ui/__tests__/components/blockers/ResolvedBlockersSection.test.tsx b/web-ui/__tests__/components/blockers/ResolvedBlockersSection.test.tsx
new file mode 100644
index 00000000..8995b68f
--- /dev/null
+++ b/web-ui/__tests__/components/blockers/ResolvedBlockersSection.test.tsx
@@ -0,0 +1,187 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ResolvedBlockersSection } from '@/components/blockers/ResolvedBlockersSection';
+import type { Blocker } from '@/types';
+
+// ── Fixtures ──────────────────────────────────────────────────────────
+
+function makeBlocker(overrides: Partial<Blocker> = {}): Blocker {
+  return {
+    id: 'blocker-1',
+    workspace_id: 'ws-1',
+    task_id: 'task-1',
+    question: 'Which database should we use?',
+    answer: 'Use PostgreSQL for persistence.',
+    status: 'RESOLVED',
+    created_at: '2026-02-19T10:00:00Z',
+    answered_at: '2026-02-19T10:05:00Z',
+    ...overrides,
+  };
+}
+
+// ── Tests ─────────────────────────────────────────────────────────────
+
+describe('ResolvedBlockersSection', () => {
+  it('renders nothing when blockers array is empty', () => {
+    const { container } = render(
+      <ResolvedBlockersSection blockers={[]} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders the toggle button with correct count', () => {
+    const blockers = [
+      makeBlocker({ id: 'b-1' }),
+      makeBlocker({ id: 'b-2', question: 'What auth provider?' }),
+    ];
+
+    render(<ResolvedBlockersSection blockers={blockers} />);
+
+    const button = screen.getByRole('button', { name: /resolved blockers \(2\)/i });
+    expect(button).toBeInTheDocument();
+  });
+
+  it('is collapsed by default', () => {
+    render(
+      <ResolvedBlockersSection blockers={[makeBlocker()]} />
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+
+    // The list region should be hidden (JSDOM doesn't compute CSS from class names)
+    const list = screen.getByTestId('resolved-blockers-list');
+    expect(list).toHaveClass('hidden');
+  });
+
+  it('expands when toggle button is clicked', async () => {
+    const user = userEvent.setup();
+    const blocker = makeBlocker();
+
+    render(<ResolvedBlockersSection blockers={[blocker]} />);
+
+    const button = screen.getByRole('button');
+    await user.click(button);
+
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+
+    const list = screen.getByTestId('resolved-blockers-list');
+    expect(list).not.toHaveClass('hidden');
+    expect(screen.getByText('Which database should we use?')).toBeInTheDocument();
+    expect(screen.getByText('Use PostgreSQL for persistence.')).toBeInTheDocument();
+  });
+
+  it('collapses when toggle button is clicked again', async () => {
+    const user = userEvent.setup();
+
+    render(<ResolvedBlockersSection blockers={[makeBlocker()]} />);
+
+    const button = screen.getByRole('button');
+    await user.click(button); // expand
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+
+    await user.click(button); // collapse
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+
+    const list = screen.getByTestId('resolved-blockers-list');
+    expect(list).toHaveClass('hidden');
+  });
+
+  it('shows RESOLVED badge for RESOLVED blockers', async () => {
+    const user = userEvent.setup();
+    const blocker = makeBlocker({ status: 'RESOLVED' });
+
+    render(<ResolvedBlockersSection blockers={[blocker]} />);
+    await user.click(screen.getByRole('button'));
+
+    expect(screen.getByText('RESOLVED')).toBeInTheDocument();
+  });
+
+  it('shows ANSWERED badge for ANSWERED blockers', async () => {
+    const user = userEvent.setup();
+    const blocker = makeBlocker({ status: 'ANSWERED' });
+
+    render(<ResolvedBlockersSection blockers={[blocker]} />);
+    await user.click(screen.getByRole('button'));
+
+    expect(screen.getByText('ANSWERED')).toBeInTheDocument();
+  });
+
+  it('displays task ID for each blocker', async () => {
+    const user = userEvent.setup();
+    const blocker = makeBlocker({ task_id: 'task-42' });
+
+    render(<ResolvedBlockersSection blockers={[blocker]} />);
+    await user.click(screen.getByRole('button'));
+
+    expect(screen.getByText('task-42')).toBeInTheDocument();
+  });
+
+  it('displays relative time from answered_at when available', async () => {
+    const user = userEvent.setup();
+    // Set answered_at to 2 hours ago
+    const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString();
+    const blocker = makeBlocker({ answered_at: twoHoursAgo });
+
+    render(<ResolvedBlockersSection blockers={[blocker]} />);
+    await user.click(screen.getByRole('button'));
+
+    expect(screen.getByText('2h ago')).toBeInTheDocument();
+  });
+
+  it('falls back to created_at when answered_at is null', async () => {
+    const user = userEvent.setup();
+    const fiveMinAgo = new Date(Date.now() - 5 * 60 * 1000).toISOString();
+    const blocker = makeBlocker({ answered_at: null, created_at: fiveMinAgo });
+
+    render(<ResolvedBlockersSection blockers={[blocker]} />);
+    await user.click(screen.getByRole('button'));
+
+    expect(screen.getByText('5m ago')).toBeInTheDocument();
+  });
+
+  it('renders multiple blockers when expanded', async () => {
+    const user = userEvent.setup();
+    const blockers = [
+      makeBlocker({ id: 'b-1', question: 'First question?', answer: 'First answer.' }),
+      makeBlocker({ id: 'b-2', question: 'Second question?', answer: 'Second answer.' }),
+      makeBlocker({ id: 'b-3', question: 'Third question?', answer: 'Third answer.' }),
+    ];
+
+    render(<ResolvedBlockersSection blockers={blockers} />);
+    await user.click(screen.getByRole('button'));
+
+    expect(screen.getByText('First question?')).toBeInTheDocument();
+    expect(screen.getByText('Second question?')).toBeInTheDocument();
+    expect(screen.getByText('Third question?')).toBeInTheDocument();
+    expect(screen.getByText('First answer.')).toBeInTheDocument();
+    expect(screen.getByText('Second answer.')).toBeInTheDocument();
+    expect(screen.getByText('Third answer.')).toBeInTheDocument();
+  });
+
+  it('has the correct data-testid on the section', () => {
+    render(<ResolvedBlockersSection blockers={[makeBlocker()]} />);
+
+    expect(screen.getByTestId('resolved-blockers-section')).toBeInTheDocument();
+  });
+
+  it('has aria-controls on the toggle button pointing to list', () => {
+    render(<ResolvedBlockersSection blockers={[makeBlocker()]} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-controls', 'resolved-blockers-list');
+  });
+
+  it('renders the answer in a quoted style container', async () => {
+    const user = userEvent.setup();
+    const blocker = makeBlocker({ answer: 'Use PostgreSQL.' });
+
+    render(<ResolvedBlockersSection blockers={[blocker]} />);
+    await user.click(screen.getByRole('button'));
+
+    const answerEl = screen.getByText('Use PostgreSQL.');
+    // The answer should be in a container with left border styling
+    expect(answerEl.closest('[class*="border-l-2"]')).toBeInTheDocument();
+  });
+});
diff --git a/web-ui/__tests__/components/layout/AppSidebar.test.tsx b/web-ui/__tests__/components/layout/AppSidebar.test.tsx
index f010f3fa..f61112c9 100644
--- a/web-ui/__tests__/components/layout/AppSidebar.test.tsx
+++ b/web-ui/__tests__/components/layout/AppSidebar.test.tsx
@@ -25,6 +25,12 @@ jest.mock('@/lib/workspace-storage', () => ({
   getSelectedWorkspacePath: jest.fn(),
 }));
 
+// Mock SWR (used for blocker badge count)
+jest.mock('swr', () => ({
+  __esModule: true,
+  default: () => ({ data: undefined, isLoading: false, error: undefined }),
+}));
+
 import { getSelectedWorkspacePath } from '@/lib/workspace-storage';
 const mockGetWorkspacePath = getSelectedWorkspacePath as jest.MockedFunction<
   typeof getSelectedWorkspacePath
@@ -81,10 +87,11 @@ describe('AppSidebar', () => {
     mockGetWorkspacePath.mockReturnValue('/home/user/projects/test');
     render(<AppSidebar />);
 
-    // Tasks and Execution are now enabled; Blockers, Review are still disabled
+    // Tasks, Execution, and Blockers are enabled; Review is still disabled
     expect(screen.getByRole('link', { name: /^tasks$/i })).toBeInTheDocument();
     expect(screen.getByRole('link', { name: /^execution$/i })).toBeInTheDocument();
-    expect(screen.queryByRole('link', { name: /^blockers$/i })).not.toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /^blockers$/i })).toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: /^review$/i })).not.toBeInTheDocument();
   });
 
   it('highlights the active route', () => {
diff --git a/web-ui/next-env.d.ts b/web-ui/next-env.d.ts
index c4b7818f..9edff1c7 100644
--- a/web-ui/next-env.d.ts
+++ b/web-ui/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/web-ui/src/app/blockers/page.tsx b/web-ui/src/app/blockers/page.tsx
new file mode 100644
index 00000000..3c5a289e
--- /dev/null
+++ b/web-ui/src/app/blockers/page.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { BlockerResolutionView } from '@/components/blockers/BlockerResolutionView';
+import { getSelectedWorkspacePath } from '@/lib/workspace-storage';
+
+export default function BlockersPage() {
+  const [workspacePath, setWorkspacePath] = useState<string | null>(null);
+  const [workspaceReady, setWorkspaceReady] = useState(false);
+
+  useEffect(() => {
+    setWorkspacePath(getSelectedWorkspacePath());
+    setWorkspaceReady(true);
+  }, []);
+
+  // Still hydrating — avoid flashing "No workspace selected"
+  if (!workspaceReady) {
+    return null;
+  }
+
+  // No workspace selected
+  if (!workspacePath) {
+    return (
+      <main className="min-h-screen bg-background">
+        <div className="mx-auto max-w-7xl px-4 py-8">
+          <div className="rounded-lg border bg-muted/50 p-6 text-center">
+            <p className="text-muted-foreground">
+              No workspace selected. Use the sidebar to return to{' '}
+              <Link href="/" className="text-primary hover:underline">
+                Workspace
+              </Link>{' '}
+              and select a project.
+            </p>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-background">
+      <div className="mx-auto max-w-7xl px-4 py-8">
+        <BlockerResolutionView workspacePath={workspacePath} />
+      </div>
+    </main>
+  );
+}
diff --git a/web-ui/src/components/blockers/BlockerCard.tsx b/web-ui/src/components/blockers/BlockerCard.tsx
new file mode 100644
index 00000000..83f04efa
--- /dev/null
+++ b/web-ui/src/components/blockers/BlockerCard.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { Alert02Icon, Loading03Icon, CheckmarkCircle01Icon } from '@hugeicons/react';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { blockersApi } from '@/lib/api';
+import { formatRelativeTime } from '@/lib/format';
+import type { Blocker, ApiError } from '@/types';
+
+interface BlockerCardProps {
+  blocker: Blocker;
+  workspacePath: string;
+  onAnswered: () => void;
+}
+
+export function BlockerCard({ blocker, workspacePath, onAnswered }: BlockerCardProps) {
+  const [answer, setAnswer] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [collapsed, setCollapsed] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const isOpen = blocker.status === 'OPEN';
+
+  // Clean up timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  const handleSubmit = async () => {
+    if (!answer.trim() || isSubmitting) return;
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      await blockersApi.answer(workspacePath, blocker.id, answer.trim());
+      setSubmitted(true);
+      timerRef.current = setTimeout(() => onAnswered(), 1500);
+    } catch (err) {
+      const apiErr = err as ApiError;
+      setError(apiErr.detail || 'Failed to submit answer');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (submitted) {
+    return (
+      <Card
+        data-testid="blocker-card"
+        className="border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950/30"
+      >
+        <CardContent className="flex items-center gap-2 p-4">
+          <CheckmarkCircle01Icon className="h-5 w-5 text-green-600 dark:text-green-400" />
+          <p className="text-sm font-medium text-green-800 dark:text-green-300">
+            Blocker answered. Task will resume execution.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card data-testid="blocker-card">
+      <CardHeader className="pb-3">
+        {/* Task context */}
+        {blocker.task_id && (
+          <p className="text-xs font-medium text-muted-foreground">
+            Task {blocker.task_id}
+          </p>
+        )}
+
+        {/* Question */}
+        <div className="rounded-md border-2 border-red-300 bg-red-50 p-3 dark:border-red-700 dark:bg-red-950/30">
+          <div className="flex items-start gap-2">
+            <Alert02Icon className="mt-0.5 h-4 w-4 shrink-0 text-red-600 dark:text-red-400" />
+            <p className="text-sm font-medium text-foreground">{blocker.question}</p>
+          </div>
+        </div>
+
+        {/* Metadata row */}
+        <div className="flex items-center gap-2 pt-1">
+          <Badge variant="blocked">OPEN</Badge>
+          <span className="text-xs text-muted-foreground">
+            {formatRelativeTime(blocker.created_at)}
+          </span>
+        </div>
+      </CardHeader>
+
+      <CardContent>
+        {/* Read-only answer display for already-answered blockers */}
+        {!isOpen && blocker.answer && (
+          <div className="rounded-md border bg-muted/50 p-3">
+            <p className="mb-1 text-xs font-medium text-muted-foreground">Answer</p>
+            <p className="text-sm text-foreground">{blocker.answer}</p>
+          </div>
+        )}
+
+        {/* Answer form for OPEN blockers */}
+        {isOpen && !collapsed && (
+          <div data-testid="blocker-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 disabled:opacity-50"
+              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}
+            />
+
+            {/* Character count */}
+            <div className="mb-2 text-right">
+              <span className="text-xs text-muted-foreground">
+                {answer.length} characters
+              </span>
+            </div>
+
+            {error && (
+              <p className="mb-2 text-xs text-destructive">{error}</p>
+            )}
+
+            <div className="flex items-center justify-end gap-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setCollapsed(true)}
+                disabled={isSubmitting}
+              >
+                Skip
+              </Button>
+              <Button
+                size="sm"
+                className="gap-1"
+                onClick={handleSubmit}
+                disabled={!answer.trim() || isSubmitting}
+              >
+                {isSubmitting && <Loading03Icon className="h-3 w-3 animate-spin" />}
+                Answer Blocker
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Collapsed state — allow re-expanding */}
+        {isOpen && collapsed && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-muted-foreground"
+            onClick={() => setCollapsed(false)}
+          >
+            Show answer form
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web-ui/src/components/blockers/BlockerResolutionView.tsx b/web-ui/src/components/blockers/BlockerResolutionView.tsx
new file mode 100644
index 00000000..e7766299
--- /dev/null
+++ b/web-ui/src/components/blockers/BlockerResolutionView.tsx
@@ -0,0 +1,111 @@
+'use client';
+
+import { useMemo, useCallback } from 'react';
+import useSWR, { useSWRConfig } from 'swr';
+import { CheckmarkCircle01Icon, Loading03Icon } from '@hugeicons/react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { BlockerCard } from './BlockerCard';
+import { ResolvedBlockersSection } from './ResolvedBlockersSection';
+import { blockersApi } from '@/lib/api';
+import type { BlockerListResponse, ApiError } from '@/types';
+
+interface BlockerResolutionViewProps {
+  workspacePath: string;
+}
+
+export function BlockerResolutionView({ workspacePath }: BlockerResolutionViewProps) {
+  const { mutate: globalMutate } = useSWRConfig();
+  const { data, isLoading, error, mutate } = useSWR<BlockerListResponse, ApiError>(
+    `/api/v2/blockers?path=${workspacePath}`,
+    () => blockersApi.getAll(workspacePath),
+    { refreshInterval: 5000, revalidateOnFocus: true }
+  );
+
+  // Invalidate both main view and sidebar badge caches
+  const revalidateAll = useCallback(() => {
+    mutate();
+    globalMutate(`/api/v2/blockers/sidebar?path=${workspacePath}`);
+  }, [mutate, globalMutate, workspacePath]);
+
+  const openBlockers = useMemo(
+    () => data?.blockers.filter((b) => b.status === 'OPEN') ?? [],
+    [data?.blockers]
+  );
+
+  const resolvedBlockers = useMemo(
+    () => data?.blockers.filter((b) => b.status === 'ANSWERED' || b.status === 'RESOLVED') ?? [],
+    [data?.blockers]
+  );
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-3">
+          <h1 className="text-2xl font-bold tracking-tight">Blockers</h1>
+        </div>
+        <div className="flex items-center justify-center py-12">
+          <Loading03Icon className="h-6 w-6 animate-spin text-muted-foreground" />
+          <span className="ml-2 text-sm text-muted-foreground">Loading blockers...</span>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-3">
+          <h1 className="text-2xl font-bold tracking-tight">Blockers</h1>
+        </div>
+        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center">
+          <p className="mb-3 text-sm text-destructive">
+            {error.detail || 'Failed to load blockers'}
+          </p>
+          <Button variant="outline" size="sm" onClick={revalidateAll}>
+            Retry
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <h1 className="text-2xl font-bold tracking-tight">Blockers</h1>
+        {openBlockers.length > 0 && (
+          <Badge variant="blocked">{openBlockers.length} open</Badge>
+        )}
+      </div>
+
+      {/* Open blockers */}
+      {openBlockers.length === 0 ? (
+        <div className="rounded-lg border bg-muted/50 p-8 text-center">
+          <CheckmarkCircle01Icon className="mx-auto mb-3 h-10 w-10 text-green-500" />
+          <p className="text-sm font-medium text-foreground">No open blockers</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Agents are running smoothly — no questions need your attention.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {openBlockers.map((blocker) => (
+            <BlockerCard
+              key={blocker.id}
+              blocker={blocker}
+              workspacePath={workspacePath}
+              onAnswered={revalidateAll}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Resolved blockers */}
+      <ResolvedBlockersSection blockers={resolvedBlockers} />
+    </div>
+  );
+}
diff --git a/web-ui/src/components/blockers/ResolvedBlockersSection.tsx b/web-ui/src/components/blockers/ResolvedBlockersSection.tsx
new file mode 100644
index 00000000..649a3f18
--- /dev/null
+++ b/web-ui/src/components/blockers/ResolvedBlockersSection.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { useState } from 'react';
+import { ArrowDown01Icon, ArrowUp01Icon, CheckmarkCircle01Icon } from '@hugeicons/react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { formatRelativeTime } from '@/lib/format';
+import type { Blocker } from '@/types';
+
+interface ResolvedBlockersSectionProps {
+  blockers: Blocker[];
+}
+
+/**
+ * Collapsible section displaying resolved/answered blockers.
+ *
+ * Collapsed by default. When expanded, each blocker shows its question,
+ * quoted answer, status badge, task ID, and relative timestamp.
+ */
+export function ResolvedBlockersSection({ blockers }: ResolvedBlockersSectionProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (blockers.length === 0) {
+    return null;
+  }
+
+  return (
+    <div data-testid="resolved-blockers-section">
+      <Button
+        variant="ghost"
+        className="w-full justify-between"
+        onClick={() => setExpanded((prev) => !prev)}
+        aria-expanded={expanded}
+        aria-controls="resolved-blockers-list"
+      >
+        <span className="flex items-center gap-2">
+          <CheckmarkCircle01Icon className="h-4 w-4 text-muted-foreground" />
+          Resolved Blockers ({blockers.length})
+        </span>
+        {expanded ? (
+          <ArrowUp01Icon className="h-4 w-4" />
+        ) : (
+          <ArrowDown01Icon className="h-4 w-4" />
+        )}
+      </Button>
+
+      <div
+        id="resolved-blockers-list"
+        data-testid="resolved-blockers-list"
+        className={expanded ? 'mt-2 space-y-2' : 'hidden'}
+        role="region"
+        aria-label="Resolved blockers list"
+      >
+        {blockers.map((blocker) => {
+          const timestamp = blocker.answered_at ?? blocker.created_at;
+          const badgeVariant = 'done' as const;
+
+          return (
+            <Card key={blocker.id} className="bg-muted/50">
+              <CardContent className="p-4">
+                <div className="flex items-start justify-between gap-2">
+                  <p className="text-sm text-foreground">{blocker.question}</p>
+                  <Badge variant={badgeVariant} className="shrink-0">
+                    {blocker.status}
+                  </Badge>
+                </div>
+
+                {blocker.answer && (
+                  <div className="mt-2 border-l-2 border-muted-foreground/20 pl-3">
+                    <p className="text-sm text-muted-foreground">{blocker.answer}</p>
+                  </div>
+                )}
+
+                <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
+                  {blocker.task_id && <span>{blocker.task_id}</span>}
+                  {blocker.task_id && timestamp && (
+                    <span aria-hidden="true">·</span>
+                  )}
+                  {timestamp && (
+                    <time dateTime={timestamp}>
+                      {formatRelativeTime(timestamp)}
+                    </time>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/web-ui/src/components/layout/AppSidebar.tsx b/web-ui/src/components/layout/AppSidebar.tsx
index 2fc6e299..2ffc5063 100644
--- a/web-ui/src/components/layout/AppSidebar.tsx
+++ b/web-ui/src/components/layout/AppSidebar.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import useSWR from 'swr';
 import {
   Home01Icon,
   FileEditIcon,
@@ -12,6 +13,8 @@ import {
   GitBranchIcon,
 } from '@hugeicons/react';
 import { getSelectedWorkspacePath } from '@/lib/workspace-storage';
+import { blockersApi } from '@/lib/api';
+import type { BlockerListResponse } from '@/types';
 
 interface NavItem {
   href: string;
@@ -25,22 +28,27 @@ const NAV_ITEMS: NavItem[] = [
   { href: '/prd', label: 'PRD', icon: FileEditIcon, enabled: true },
   { href: '/tasks', label: 'Tasks', icon: Task01Icon, enabled: true },
   { href: '/execution', label: 'Execution', icon: PlayIcon, enabled: true },
-  { href: '/blockers', label: 'Blockers', icon: Alert02Icon, enabled: false },
+  { href: '/blockers', label: 'Blockers', icon: Alert02Icon, enabled: true },
   { href: '/review', label: 'Review', icon: GitBranchIcon, enabled: false },
 ];
 
 export function AppSidebar() {
   const pathname = usePathname();
   const [hasWorkspace, setHasWorkspace] = useState(false);
+  const [workspacePath, setWorkspacePath] = useState<string | null>(null);
 
   useEffect(() => {
-    setHasWorkspace(!!getSelectedWorkspacePath());
+    const path = getSelectedWorkspacePath();
+    setHasWorkspace(!!path);
+    setWorkspacePath(path);
   }, []);
 
   // Listen for workspace changes (cross-tab via 'storage', same-tab via custom event)
   useEffect(() => {
     const handleWorkspaceChange = () => {
-      setHasWorkspace(!!getSelectedWorkspacePath());
+      const path = getSelectedWorkspacePath();
+      setHasWorkspace(!!path);
+      setWorkspacePath(path);
     };
     window.addEventListener('storage', handleWorkspaceChange);
     window.addEventListener('workspaceChanged', handleWorkspaceChange);
@@ -50,6 +58,14 @@ export function AppSidebar() {
     };
   }, []);
 
+  // Fetch open blocker count for badge
+  const { data: blockerData } = useSWR<BlockerListResponse>(
+    workspacePath ? `/api/v2/blockers/sidebar?path=${workspacePath}` : null,
+    () => blockersApi.getAll(workspacePath!, { status: 'OPEN' }),
+    { refreshInterval: 10000 }
+  );
+  const openBlockerCount = blockerData?.by_status?.OPEN ?? 0;
+
   // Don't render sidebar when no workspace is selected
   if (!hasWorkspace) return null;
 
@@ -95,6 +111,11 @@ export function AppSidebar() {
             >
               <Icon className="h-5 w-5 shrink-0" />
               <span className="hidden lg:inline">{label}</span>
+              {label === 'Blockers' && openBlockerCount > 0 && (
+                <span className="ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1.5 text-[10px] font-bold text-white">
+                  {openBlockerCount}
+                </span>
+              )}
             </Link>
           );
         })}
diff --git a/web-ui/src/lib/api.ts b/web-ui/src/lib/api.ts
index 81c2fc16..8850a73b 100644
--- a/web-ui/src/lib/api.ts
+++ b/web-ui/src/lib/api.ts
@@ -26,6 +26,7 @@ import type {
   GeneratePrdResponse,
   GenerateTasksResponse,
   Blocker,
+  BlockerStatus,
   BlockerListResponse,
   BatchResponse,
 } from '@/types';
@@ -246,6 +247,23 @@ export const eventsApi = {
 
 // Blockers API methods
 export const blockersApi = {
+  /**
+   * Get all blockers with optional filters
+   */
+  getAll: async (
+    workspacePath: string,
+    options?: { status?: BlockerStatus; limit?: number }
+  ): Promise<BlockerListResponse> => {
+    const response = await api.get<BlockerListResponse>('/api/v2/blockers', {
+      params: {
+        workspace_path: workspacePath,
+        ...(options?.status ? { status: options.status } : {}),
+        ...(options?.limit ? { limit: options.limit } : {}),
+      },
+    });
+    return response.data;
+  },
+
   /**
    * Get blockers, optionally filtered by task
    */
diff --git a/web-ui/src/lib/format.ts b/web-ui/src/lib/format.ts
new file mode 100644
index 00000000..7df195b7
--- /dev/null
+++ b/web-ui/src/lib/format.ts
@@ -0,0 +1,16 @@
+/**
+ * Format an ISO date string as a human-readable relative time.
+ * Returns strings like "just now", "5m ago", "2h ago", or "3d ago".
+ */
+export function formatRelativeTime(isoDate: string): string {
+  const now = new Date();
+  const date = new Date(isoDate);
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  if (diffMins < 1) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  const diffHours = Math.floor(diffMins / 60);
+  if (diffHours < 24) return `${diffHours}h ago`;
+  const diffDays = Math.floor(diffHours / 24);
+  return `${diffDays}d ago`;
+}