+ {/* Scrollable Container - scrollbar sits outside */}
+
+
+ );
+}
diff --git a/apps/loan-qc/src/components/layout/MinHeader.tsx b/apps/loan-qc/src/components/layout/MinHeader.tsx
new file mode 100644
index 000000000..6356a86e5
--- /dev/null
+++ b/apps/loan-qc/src/components/layout/MinHeader.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { Box, Bell } from 'lucide-react';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+
+export function MinHeader() {
+ return (
+
+
+ );
+}
diff --git a/apps/loan-qc/src/components/layout/ObjectHeader.tsx b/apps/loan-qc/src/components/layout/ObjectHeader.tsx
new file mode 100644
index 000000000..f40e60179
--- /dev/null
+++ b/apps/loan-qc/src/components/layout/ObjectHeader.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { ArrowLeft } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface ObjectHeaderProps {
+ onBack?: () => void;
+}
+
+export function ObjectHeader({ onBack }: ObjectHeaderProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "span";
+
+ return (
+ & {
+ asChild?: boolean;
+ }) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ ) {
+ return ) {
+ return ) {
+ return (
+
+
+ );
+}
+
+function PopoverAnchor({
+ ...props
+}: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return & {
+ withHandle?: boolean;
+}) {
+ return (
+ div]:rotate-90",
+ className,
+ )}
+ {...props}
+ >
+ {withHandle && (
+
+ );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/apps/loan-qc/src/components/ui/separator.tsx b/apps/loan-qc/src/components/ui/separator.tsx
new file mode 100644
index 000000000..ee7836062
--- /dev/null
+++ b/apps/loan-qc/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+ className,
+ orientation = "horizontal",
+ decorative = true,
+ ...props
+}: React.ComponentProps) {
+ return (
+ & { spacing?: number }
+>({
+ size: "default",
+ variant: "default",
+ spacing: 0,
+});
+
+function ToggleGroup({
+ className,
+ variant,
+ size,
+ spacing = 0,
+ children,
+ ...props
+}: React.ComponentProps &
+ VariantProps & {
+ spacing?: number;
+ }) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+function ToggleGroupItem({
+ className,
+ children,
+ variant,
+ size,
+ ...props
+}: React.ComponentProps &
+ VariantProps) {
+ const context = React.useContext(ToggleGroupContext);
+
+ return (
+
+ {children}
+
+ );
+}
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/apps/loan-qc/src/components/ui/toggle.tsx b/apps/loan-qc/src/components/ui/toggle.tsx
new file mode 100644
index 000000000..91c5d7e36
--- /dev/null
+++ b/apps/loan-qc/src/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+ "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ outline:
+ "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+ },
+ size: {
+ default: "h-9 px-2 min-w-9",
+ sm: "h-8 px-1.5 min-w-8",
+ lg: "h-10 px-2.5 min-w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+function Toggle({
+ className,
+ variant,
+ size,
+ ...props
+}: React.ComponentProps &
+ VariantProps) {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+ {/* Document Container with border */}
+
+
+ );
+}
diff --git a/apps/loan-qc/src/components/layout/Header.tsx b/apps/loan-qc/src/components/layout/Header.tsx
new file mode 100644
index 000000000..710967775
--- /dev/null
+++ b/apps/loan-qc/src/components/layout/Header.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+interface HeaderProps {
+ title: string;
+ subtitle?: string;
+}
+
+export function Header({ title, subtitle }: HeaderProps) {
+ return (
+
+
+ {/* Document Image */}
+ 
+
+ {/* Highlights Overlay */}
+ {highlights.map((highlight) => (
+
+
+
+
+ {/* Floating Zoom Controls - Positioned outside scrollable area */}
+ {
+ e.stopPropagation();
+ handleHighlightClick(highlight, e);
+ }}
+ />
+
+ {highlight.label && (
+
+
+ )}
+
+ ))}
+
+
+ {highlight.label}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Zoom in
+Zoom to fit
+Zoom out
+
+
+
+
+ {title}
+ {subtitle && ( +{subtitle}
+ )} +
+ {/* Left section - App branding */}
+
+
+
+
+ {/* Right section - User controls */}
+
+
+
+ Loan processing - QC
+
+
+
+
+
+ JD
+
+
+
+
+
+
+ );
+}
diff --git a/apps/loan-qc/src/components/layout/SidebarFooter.tsx b/apps/loan-qc/src/components/layout/SidebarFooter.tsx
new file mode 100644
index 000000000..b34c5f175
--- /dev/null
+++ b/apps/loan-qc/src/components/layout/SidebarFooter.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface SidebarFooterProps {
+ title: string;
+ currentIndex: number;
+ totalCount: number;
+ onPrevious?: () => void;
+ onNext?: () => void;
+}
+
+export function SidebarFooter({
+ title,
+ currentIndex,
+ totalCount,
+ onPrevious,
+ onNext,
+}: SidebarFooterProps) {
+ return (
+
+
+ Agreement to provide insurance
+CRE #00000000000-00
+
+
+ );
+}
diff --git a/apps/loan-qc/src/components/layout/SplitViewLayout.tsx b/apps/loan-qc/src/components/layout/SplitViewLayout.tsx
new file mode 100644
index 000000000..766adcc6f
--- /dev/null
+++ b/apps/loan-qc/src/components/layout/SplitViewLayout.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import {
+ ResizablePanelGroup,
+ ResizablePanel,
+ ResizableHandle,
+} from '@/components/ui/resizable';
+import type { ReactNode } from 'react';
+import { SidebarFooter } from './SidebarFooter';
+
+interface SplitViewLayoutProps {
+ validationPanel?: ReactNode;
+ documentArea?: ReactNode;
+ leftDocument?: ReactNode;
+ rightDocument?: ReactNode;
+}
+
+export function SplitViewLayout({
+ validationPanel,
+ documentArea,
+ leftDocument,
+ rightDocument,
+}: SplitViewLayoutProps) {
+ // If validationPanel is provided, render the main layout with sidebar
+ if (validationPanel) {
+ return (
+ + {title} + {` ${currentIndex} of ${totalCount}`} +
+
+
+
+
+
+ {/* Decorative ellipse background */}
+
+
+
+ {/* Validation Checklist Panel */}
+
+
+
+
+ {documentArea}
+
+
+
+ );
+ }
+
+ // Otherwise, render just the document split view
+ return (
+
+
+
+ {validationPanel}
+
+
+
+ {/* Left Document */}
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/loan-qc/src/components/ui/avatar.tsx b/apps/loan-qc/src/components/ui/avatar.tsx
new file mode 100644
index 000000000..1393f5097
--- /dev/null
+++ b/apps/loan-qc/src/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Avatar({
+ className,
+ ...props
+}: React.ComponentProps
+ {leftDocument}
+
+
+ {rightDocument}
+
+
+
+ )}
+
+ {/* AI Badge */}
+
+
+
+ {/* Human Badge */}
+
+
+
+ );
+}
diff --git a/apps/loan-qc/src/components/validation/HumanEvaluationToggle.tsx b/apps/loan-qc/src/components/validation/HumanEvaluationToggle.tsx
new file mode 100644
index 000000000..f1d432ad4
--- /dev/null
+++ b/apps/loan-qc/src/components/validation/HumanEvaluationToggle.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { MessageSquareText } from 'lucide-react';
+import type { HumanEvaluationStatus } from '@/lib/types';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { Button } from '@/components/ui/button';
+
+interface HumanEvaluationToggleProps {
+ value: HumanEvaluationStatus;
+ onChange: (value: HumanEvaluationStatus) => void;
+ onCommentClick?: () => void;
+}
+
+export function HumanEvaluationToggle({
+ value,
+ onChange,
+ onCommentClick,
+}: HumanEvaluationToggleProps) {
+ return (
+
+
+ );
+}
diff --git a/apps/loan-qc/src/components/validation/IdentifiedFields.tsx b/apps/loan-qc/src/components/validation/IdentifiedFields.tsx
new file mode 100644
index 000000000..9404e4a95
--- /dev/null
+++ b/apps/loan-qc/src/components/validation/IdentifiedFields.tsx
@@ -0,0 +1,51 @@
+import type { IdentifiedField } from '@/lib/types';
+
+interface IdentifiedFieldsProps {
+ fields: IdentifiedField[];
+}
+
+export function IdentifiedFields({ fields }: IdentifiedFieldsProps) {
+ if (!fields || fields.length === 0) {
+ return null;
+ }
+
+ return (
+ + Human evaluation +
+ +
+ {/* Toggle Group */}
+ {
+ if (newValue) onChange(newValue as HumanEvaluationStatus);
+ }}
+ variant="outline"
+ spacing={0}
+ className="shadow-[0px_1px_2px_0px_var(--shadow-xs)]"
+ >
+
+ Yes
+
+
+ No
+
+
+ N/A
+
+
+
+ {/* Comment Button */}
+
+
+
+ {fields.map((field, index) => {
+ // If field has sourceValue/targetValue, show comparison format
+ if (field.sourceValue !== undefined || field.targetValue !== undefined) {
+ const sourceLabel = 'Source';
+ const targetLabel = 'Target';
+
+ return (
+
+ );
+}
diff --git a/apps/loan-qc/src/components/validation/ValidationChecklist.tsx b/apps/loan-qc/src/components/validation/ValidationChecklist.tsx
new file mode 100644
index 000000000..b93e41252
--- /dev/null
+++ b/apps/loan-qc/src/components/validation/ValidationChecklist.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { ValidationItem } from './ValidationItem';
+import { Separator } from '@/components/ui/separator';
+import type { ValidationItem as ValidationItemType, HumanEvaluationStatus } from '@/lib/types';
+
+interface ValidationChecklistProps {
+ items: ValidationItemType[];
+ onUpdateEvaluation: (itemId: string, status: HumanEvaluationStatus) => void;
+ onAddComment: (itemId: string, text: string) => void;
+ expandedItemId?: string | null;
+ onItemClick?: (itemId: string) => void;
+}
+
+export function ValidationChecklist({
+ items,
+ onUpdateEvaluation,
+ onAddComment,
+ expandedItemId,
+ onItemClick,
+}: ValidationChecklistProps) {
+ return (
+
+ {field.label}
+
+ );
+ }
+
+ // Otherwise show simple format
+ return (
+
+ {field.label}:
+ {field.value}
+
+ );
+ })}
+
+ {field.sourceValue !== undefined && (
+
+ {sourceLabel}:
+ {field.sourceValue}
+
+ )}
+ {field.targetValue !== undefined && (
+
+ {targetLabel}:
+ {field.targetValue}
+
+ )}
+
+
+ {items.map((item, index) => (
+
+ );
+}
diff --git a/apps/loan-qc/src/components/validation/ValidationItem.tsx b/apps/loan-qc/src/components/validation/ValidationItem.tsx
new file mode 100644
index 000000000..64a8fd513
--- /dev/null
+++ b/apps/loan-qc/src/components/validation/ValidationItem.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { MessageSquareText } from 'lucide-react';
+import { EvaluationBadges } from './EvaluationBadges';
+import { IdentifiedFields } from './IdentifiedFields';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import type { ValidationItem as ValidationItemType, HumanEvaluationStatus } from '@/lib/types';
+
+interface ValidationItemProps {
+ item: ValidationItemType;
+ onHumanEvaluation: (status: HumanEvaluationStatus) => void;
+ onAddComment: (text: string) => void;
+ isExpanded?: boolean;
+ onClick?: () => void;
+}
+
+const expandTransition = {
+ duration: 0.3,
+ ease: [0.4, 0, 0.2, 1],
+};
+
+export function ValidationItem({
+ item,
+ onHumanEvaluation,
+ onAddComment,
+ isExpanded = false,
+ onClick,
+}: ValidationItemProps) {
+ const [commentText, setCommentText] = useState('');
+ const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+ const handleSaveComment = () => {
+ if (commentText.trim()) {
+ onAddComment(commentText.trim());
+ setCommentText('');
+ setIsPopoverOpen(false);
+ }
+ };
+
+ const handleCancelComment = () => {
+ setCommentText('');
+ setIsPopoverOpen(false);
+ };
+
+ return (
+
+ {/* Separator for non-first items */}
+ {index > 0 && onUpdateEvaluation(item.id, status)}
+ onAddComment={(text) => onAddComment(item.id, text)}
+ isExpanded={item.id === expandedItemId}
+ onClick={() => onItemClick?.(item.id)}
+ />
+
+ ))}
+
+ {/* Item Name - Always visible */}
+
+
+
+
+ {/* Badges - Always visible */}
+
+
+
+ + {item.title} +
+
+
+
+ {/* Expanded content - Animates in/out */}
+
+
+ {/* Agent Response */}
+
+
+
+ {/* Human Evaluation Section */}
+ + Agent evaluation: {item.aiEvaluation.status.toUpperCase()} +
++ {item.details.agentReasoning} +
+ + {/* Identified Fields - New flexible pattern */} + {item.details.identifiedFields && item.details.identifiedFields.length > 0 && ( +
+ {item.details.sourceText && (
+ <>
+ Grantor:
+ {item.details.sourceText}
+
+
+ )}
+ {item.details.targetText && (
+ <>
+ Borrower Name:
+ {item.details.targetText}
+
+ )}
+
e.stopPropagation()}
+ >
+
+
+ Human evaluation +
+ +
+ {/* Toggle Group */}
+ {
+ // onValueChange fires with empty string when clicking selected item again
+ onHumanEvaluation(newValue === "" ? null : (newValue as HumanEvaluationStatus));
+ }}
+ variant="outline"
+ spacing={0}
+ className="shadow-[0px_1px_2px_0px_var(--shadow-xs)]"
+ >
+
+ Yes
+
+
+ No
+
+
+ N/A
+
+
+
+ {/* Comment Popover */}
+
+
+
+
+
+
+