feat(web-ui): waiver confirmation + audit trail for Proof page (#479)

* feat(web-ui): waiver confirmation dialog + audit trail for Proof page (#479)

- WaiveDialog converted to 2-step flow: form → amber warning confirmation
  before submitting in both proof/page.tsx and proof/[req_id]/page.tsx
- Confirmation step shows compliance warning and summary of entered data
- Back button returns to form with values preserved
- Add waived_at?: string | null to ProofWaiver type; detail page shows
  waiver timestamp when present (reason, approved_by, waived_at, expires)
- Waived rows in requirements list styled with opacity-60 for distinct
  visual treatment from open/satisfied requirements
- Add InformationCircleIcon to @hugeicons/react mock
- 17 new tests covering all acceptance criteria

* fix: address CodeRabbit feedback on PR #521

- Add waived_at to backend Waiver dataclass, ledger serialization, and
  WaiverOut model so the API returns the timestamp when requirements are
  waived; waive endpoint sets waived_at = datetime.now(UTC)
- Extract shared WaiveDialog to src/components/proof/WaiveDialog.tsx;
  both proof/page.tsx and proof/[req_id]/page.tsx now import the single
  implementation instead of duplicating it
- Extract localStorageMock to __tests__/utils/test-helpers.ts and import
  from both proof test files to eliminate duplication
- Strengthen WaiveRequest assertion in tests to validate all payload fields

* fix: move waived_at timestamping from router to core waive_requirement

Per thin-adapter pattern, business logic (setting waived_at) belongs in
core not in the HTTP router. waive_requirement() in ledger.py now stamps
waived_at = datetime.now(UTC) when not already set, ensuring all entry
points (API, CLI) consistently record the audit timestamp.

---------

Co-authored-by: Test User <test@example.com>

Author: frankbria

codeframe/core/proof/ledger.py

@@ -137,18 +137,21 @@ def _waiver_to_json(waiver: Optional[Waiver]) -> Optional[str]:
         "expires": waiver.expires.isoformat() if waiver.expires else None,
         "manual_checklist": waiver.manual_checklist,
         "approved_by": waiver.approved_by,
+        "waived_at": waiver.waived_at.isoformat() if waiver.waived_at else None,
     })
 
 
 def _waiver_from_json(raw: Optional[str]) -> Optional[Waiver]:
     if not raw:
         return None
     data = json.loads(raw)
+    waived_at_raw = data.get("waived_at")
     return Waiver(
         reason=data["reason"],
         expires=date.fromisoformat(data["expires"]) if data.get("expires") else None,
         manual_checklist=data.get("manual_checklist", []),
         approved_by=data.get("approved_by", ""),
+        waived_at=datetime.fromisoformat(waived_at_raw) if waived_at_raw else None,
     )
 
 
@@ -317,6 +320,14 @@ def waive_requirement(
     workspace: Workspace, req_id: str, waiver: Waiver
 ) -> Optional[Requirement]:
     """Waive a requirement with reason and optional expiry."""
+    if waiver.waived_at is None:
+        waiver = Waiver(
+            reason=waiver.reason,
+            expires=waiver.expires,
+            manual_checklist=waiver.manual_checklist,
+            approved_by=waiver.approved_by,
+            waived_at=datetime.now(timezone.utc),
+        )
     _ensure_tables(workspace)
     conn = get_db_connection(workspace)
     cursor = conn.cursor()

codeframe/core/proof/models.py

@@ -98,6 +98,7 @@ class Waiver:
     expires: Optional[date] = None
     manual_checklist: list[str] = field(default_factory=list)
     approved_by: str = ""
+    waived_at: Optional[datetime] = None
 
 
 @dataclass

codeframe/ui/routers/proof_v2.py

@@ -100,6 +100,7 @@ class WaiverOut(BaseModel):
     expires: Optional[str]
     manual_checklist: list[str]
     approved_by: str
+    waived_at: Optional[str] = None
 
 
 class RequirementResponse(BaseModel):
@@ -195,6 +196,7 @@ def _req_to_response(req) -> RequirementResponse:
             expires=req.waiver.expires.isoformat() if req.waiver.expires else None,
             manual_checklist=req.waiver.manual_checklist,
             approved_by=req.waiver.approved_by,
+            waived_at=req.waiver.waived_at.isoformat() if req.waiver.waived_at else None,
         ) if req.waiver else None,
         created_at=req.created_at.isoformat() if req.created_at else None,
         satisfied_at=req.satisfied_at.isoformat() if req.satisfied_at else None,

web-ui/__mocks__/@hugeicons/react.js

@@ -60,4 +60,6 @@ module.exports = {
   Alert01Icon: createIconMock('Alert01Icon'),
   // SplitPane
   ArrowLeft01Icon: createIconMock('ArrowLeft01Icon'),
+  // Proof page
+  InformationCircleIcon: createIconMock('InformationCircleIcon'),
 };

web-ui/__tests__/app/proof/page.test.tsx

@@ -0,0 +1,218 @@
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import ProofPage from '@/app/proof/page';
+import { localStorageMock } from '../../utils/test-helpers';
+
+jest.mock('@/lib/api', () => ({
+  proofApi: {
+    listRequirements: jest.fn(),
+    waive: jest.fn(),
+  },
+}));
+
+jest.mock('@/lib/workspace-storage', () => ({
+  getSelectedWorkspacePath: jest.fn(() => '/test/workspace'),
+}));
+
+jest.mock('swr', () => ({ __esModule: true, default: jest.fn() }));
+
+import useSWR from 'swr';
+import { proofApi } from '@/lib/api';
+
+const mockUseSWR = useSWR as jest.MockedFunction<typeof useSWR>;
+const mockWaive = proofApi.waive as jest.MockedFunction<typeof proofApi.waive>;
+
+const openReq = {
+  id: 'REQ-001',
+  title: 'Test requirement',
+  description: 'A test requirement',
+  severity: 'high',
+  status: 'open',
+  glitch_type: 'regression',
+  obligations: [],
+  evidence_rules: [],
+  waiver: null,
+  created_at: '2026-01-01T00:00:00Z',
+  satisfied_at: null,
+  created_by: 'tester',
+  source_issue: null,
+  related_reqs: [],
+  source: 'manual',
+};
+
+const waivedReq = {
+  ...openReq,
+  id: 'REQ-002',
+  title: 'Waived requirement',
+  status: 'waived',
+  waiver: {
+    reason: 'Not applicable for this release',
+    expires: null,
+    manual_checklist: [],
+    approved_by: 'frank',
+    waived_at: '2026-03-01T12:00:00Z',
+  },
+};
+
+describe('ProofPage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    localStorageMock.clear();
+    mockUseSWR.mockReturnValue({
+      data: {
+        requirements: [openReq, waivedReq],
+        total: 2,
+        by_status: { open: 1, waived: 1, satisfied: 0 },
+      },
+      error: undefined,
+      isLoading: false,
+      mutate: jest.fn(),
+    } as any);
+  });
+
+  describe('waived row visual treatment', () => {
+    it('renders waived rows with muted/strikethrough styling', async () => {
+      render(<ProofPage />);
+      await waitFor(() => screen.getByText('Waived requirement'));
+
+      const waivedRow = screen.getByText('Waived requirement').closest('tr');
+      expect(waivedRow).toHaveClass('opacity-60');
+    });
+
+    it('does not apply muted styling to open rows', async () => {
+      render(<ProofPage />);
+      await waitFor(() => screen.getByText('Test requirement'));
+
+      const openRow = screen.getByText('Test requirement').closest('tr');
+      expect(openRow).not.toHaveClass('opacity-60');
+    });
+
+    it('does not show Waive button for waived requirements', async () => {
+      render(<ProofPage />);
+      await waitFor(() => screen.getByText('Waived requirement'));
+
+      const buttons = screen.getAllByRole('button', { name: /waive/i });
+      // Only one Waive button for the open req
+      expect(buttons).toHaveLength(1);
+    });
+  });
+
+  describe('WaiveDialog — 2-step confirmation flow', () => {
+    it('opens the form step when Waive is clicked', async () => {
+      render(<ProofPage />);
+      await waitFor(() => screen.getByRole('button', { name: /^waive$/i }));
+
+      fireEvent.click(screen.getByRole('button', { name: /^waive$/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText(/waive req-001/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/reason/i)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /continue/i })).toBeInTheDocument();
+      });
+    });
+
+    it('shows error if Continue is clicked without a reason', async () => {
+      render(<ProofPage />);
+      await waitFor(() => screen.getByRole('button', { name: /^waive$/i }));
+      fireEvent.click(screen.getByRole('button', { name: /^waive$/i }));
+
+      await waitFor(() => screen.getByRole('button', { name: /continue/i }));
+      fireEvent.click(screen.getByRole('button', { name: /continue/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText(/reason is required/i)).toBeInTheDocument();
+      });
+    });
+
+    it('advances to confirmation step when reason is provided', async () => {
+      render(<ProofPage />);
+      await waitFor(() => screen.getByRole('button', { name: /^waive$/i }));
+      fireEvent.click(screen.getByRole('button', { name: /^waive$/i }));
+
+      await waitFor(() => screen.getByLabelText(/reason/i));
+      fireEvent.change(screen.getByLabelText(/reason/i), {
+        target: { value: 'Not needed this cycle' },
+      });
+      fireEvent.click(screen.getByRole('button', { name: /continue/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText(/marked satisfied without evidence/i)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /confirm waive/i })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /back/i })).toBeInTheDocument();
+      });
+    });
+
+    it('shows the entered reason in the confirmation summary', async () => {
+      render(<ProofPage />);
+      await waitFor(() => screen.getByRole('button', { name: /^waive$/i }));
+      fireEvent.click(screen.getByRole('button', { name: /^waive$/i }));
+
+      await waitFor(() => screen.getByLabelText(/reason/i));
+      fireEvent.change(screen.getByLabelText(/reason/i), {
+        target: { value: 'Accepted risk for v1' },
+      });
+      fireEvent.click(screen.getByRole('button', { name: /continue/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText('Accepted risk for v1')).toBeInTheDocument();
+      });
+    });
+
+    it('goes back to form when Back is clicked', async () => {
+      render(<ProofPage />);
+      await waitFor(() => screen.getByRole('button', { name: /^waive$/i }));
+      fireEvent.click(screen.getByRole('button', { name: /^waive$/i }));
+
+      await waitFor(() => screen.getByLabelText(/reason/i));
+      fireEvent.change(screen.getByLabelText(/reason/i), {
+        target: { value: 'Temporary waiver' },
+      });
+      fireEvent.click(screen.getByRole('button', { name: /continue/i }));
+
+      await waitFor(() => screen.getByRole('button', { name: /back/i }));
+      fireEvent.click(screen.getByRole('button', { name: /back/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/reason/i)).toBeInTheDocument();
+        expect(screen.getByDisplayValue('Temporary waiver')).toBeInTheDocument();
+      });
+    });
+
+    it('calls proofApi.waive and closes on Confirm Waive', async () => {
+      mockWaive.mockResolvedValueOnce(undefined as any);
+      const mutate = jest.fn();
+      mockUseSWR.mockReturnValue({
+        data: {
+          requirements: [openReq, waivedReq],
+          total: 2,
+          by_status: { open: 1, waived: 1 },
+        },
+        error: undefined,
+        isLoading: false,
+        mutate,
+      } as any);
+
+      render(<ProofPage />);
+      await waitFor(() => screen.getByRole('button', { name: /^waive$/i }));
+      fireEvent.click(screen.getByRole('button', { name: /^waive$/i }));
+
+      await waitFor(() => screen.getByLabelText(/reason/i));
+      fireEvent.change(screen.getByLabelText(/reason/i), {
+        target: { value: 'Risk accepted' },
+      });
+      fireEvent.click(screen.getByRole('button', { name: /continue/i }));
+
+      await waitFor(() => screen.getByRole('button', { name: /confirm waive/i }));
+      fireEvent.click(screen.getByRole('button', { name: /confirm waive/i }));
+
+      await waitFor(() => {
+        expect(mockWaive).toHaveBeenCalledWith('/test/workspace', 'REQ-001', {
+          reason: 'Risk accepted',
+          expires: null,
+          manual_checklist: [],
+          approved_by: '',
+        });
+        expect(mutate).toHaveBeenCalled();
+      });
+    });
+  });
+});