Let me explore the codebase to understand the current draft viewing, action handling, and TipTap editor components.

Now let me check the main page and app-sidebar to understand the full layout and how the contract viewer is used:

Now I understand the full architecture. The issue is that when a user clicks "Action" (the Eye icon) on a draft in the "Drafts Pending Review" table, the ContractViewer opens and it uses h-[calc(100vh-3.5rem)] which fills the entire viewport height. The scroll is on the document paper card inside via ScrollArea, but the outer container's flex-1 overflow-hidden structure combined with the h-[calc(100vh-3.5rem)] on the root div means the entire page doesn't scroll -- only the inner document area does.

The problem is that the ScrollArea component wrapping the contract sections needs proper height constraints to enable scrolling within the draft content area (the paper card) rather than the whole page. Let me also check the overflow-hidden on the Radix ScrollArea viewport, since Radix ScrollArea requires the parent to have a constrained height for scrolling to work properly.

The issue is that ScrollArea with className="flex-1" inside a flex column needs the viewport to have overflow-y: scroll. The Radix ScrollArea viewport uses size-full (which is width: 100%; height: 100%) but the parent ScrollAreaPrimitive.Root only has relative -- it needs to be given proper flex sizing. Let me fix this:

Now let me fix the ContractViewer to ensure the draft content area has proper scroll behavior. The key issue is making the document paper card's ScrollArea properly constrained so it scrolls within itself:

Now let me also make sure the page-level container doesn't cause the whole page to scroll when the ContractViewer is active. The SidebarInset wraps the content, so I need to check if it constrains height. Let me also look at the layout:

The SidebarInset is a <main> with flex-1 flex-col but no height constraint or overflow-hidden. The SidebarProvider also likely doesn't constrain viewport height. Let me check:

I can see the issue clearly now. The SidebarProvider wrapper has min-h-svh (min-height: 100svh) but no max-h-svh or h-svh. And the SidebarInset has flex-1 flex-col but no overflow-hidden. This means the content can grow beyond the viewport, causing the webpage itself to scroll rather than the draft content area.

The fix needs to happen at the page level to ensure the ContractViewer gets a properly constrained viewport. Let me update the page to add overflow-hidden on the SidebarInset when viewing a contract:

Now let me also check the DashboardHeader to see its height, since the ContractViewer uses h-[calc(100vh-3.5rem)]:

The header is h-14 which is 3.5rem, matching the calc(100vh-3.5rem) in the ContractViewer. However, this hardcoded 100vh doesn't account for the fact that the viewer lives inside a SidebarInset which might not start at the top of the viewport. Let me update the ContractViewer to use a more robust flex-based approach instead of the hardcoded calc(100vh-3.5rem):

Now let me verify the final state of the key files to make sure everything is correct:

Let me also check the document area section again to make sure it's correct:

Everything looks correct. Here's a summary of the changes made across 3 files:

Changes Summary:

1. app/page.tsx -- Added max-h-svh overflow-hidden to the SidebarInset when a draft is selected, preventing the entire webpage from scrolling and constraining the viewport to a single screen height.
2. components/contract-viewer.tsx -- Replaced the hardcoded h-[calc(100vh-3.5rem)] with min-h-0 flex-1 on the root container so it properly fills the remaining space via flexbox. Changed the document area from flex-1 overflow-hidden to min-h-0 flex-1, and applied min-h-0 flex-1 to both the paper card and the ScrollArea so the scroll container gets a proper constrained height and scrolls only the draft sections inside the paper card.
3. components/ui/scroll-area.tsx -- Added overflow-hidden to the ScrollArea root so that the Radix scroll viewport properly clips and scrolls its content within the constrained flex container.

Now I have full context. Let me also check the globals.css and existing UI components:

Now I have full context of everything. Let me plan this implementation. I need to create:

1. Mock review data - Review findings/suggestions based on the draft's sections (aligned to review_findings, review_suggestions tables)
2. AI Review Agent loading screen - Spinner with progress steps showing section-by-section review
3. Playbook Review Report - Split panel with flagged clauses list (left) and detailed clause view (right) with Accept/Reject/Comment actions
4. Three header buttons - Save (saves clause decisions), Request Changes (sends back to BU with decisions/comments), Approve Report (legal approves outright)

Let me build this now.

Let me start by adding the review mock data types and generator function to mock-data.ts. This will generate realistic review findings based on the actual contract sections:

Now let me build the AI Review Agent loading screen component:

Now let me build the Playbook Review Report component:

Now let me integrate the review flow into the ContractViewer:

Now I need to rewrite the ContractViewer to manage three states: (1) draft view, (2) agent loading, (3) review report. Let me re-read the current file to get the exact content:

I have the full content from earlier. Now let me update the ContractViewer to integrate the review flow with three view states:

Now update the state management and handler in the component:

Now update the "Run AI Review Agent" button to reflect the new state:

Now update the button click to go directly to report if one already exists:

Now let me mark the todos as done:

Here is a summary of the complete implementation across 4 files:

lib/mock-data.ts -- Added ReviewFinding, ReviewReport, and ClauseDecision types aligned with the review_findings and review_suggestions database tables. Created realistic flagged clause data for each contract type (NDA: 3 findings covering protection standard, survival period, and arbitration; MSA: 3 findings covering liability caps, transition assistance, and breach notification; SOW: 2 findings covering acceptance periods and change control). Added generateReviewReport() which produces findings with proper placeholder resolution and reviewProgressSteps for the loading animation.

components/review-agent-loading.tsx -- A full-screen loading component that steps through 7 review phases with a progress bar, each step showing a label and detail text, a spinner for the active step, and a checkmark for completed steps. After all steps finish, it triggers onComplete to transition to the report view.

components/playbook-review-report.tsx -- A two-panel layout with flagged clauses listed on the left (showing severity badge, decision status, and issue preview) and the full finding detail on the right (original clause text, issue summary, violation explanation, playbook rule citation, approved fallback language, risk explanation). Each finding has Accept/Reject/Add Comment buttons. The header has three action buttons: Save (persists clause decisions locally), Request Changes (enabled once at least one decision is made -- sends findings + comments back to the business user), and Approve Report (enabled only when all findings are decided with no rejections -- marks the contract as approved).

components/contract-viewer.tsx -- Updated to manage three view states (draft -> agent-loading -> review-report). The "Run AI Review Agent" button triggers the loading animation, which generates the report on completion and transitions to the review report. Once a report exists, the button changes to "View Review Report" for instant access.