UX: Add sort and filter controls to Proof requirements table

[frankbria]

Problem

The Proof page shows all requirements in a single unsorted table. With 20+ requirements, users cannot filter by severity, status, or glitch type to prioritize work. There is no search capability.

Impact

Users must manually scroll through the entire list to find actionable items (open, high severity). Critical failing requirements may be buried below satisfactory ones.

Recommendation

1. Add sortable column headers: click to sort by Status, Severity, Created Date, Gate
2. Add filter dropdowns: Status (open/satisfied/waived), Severity (critical/high/medium/low), Glitch Type
3. Add search field for requirement ID or title
4. Default sort: Status (open first), then Severity (critical first)

Acceptance Criteria

• Column headers clickable for ascending/descending sort
• Sort direction arrow indicator shown
• Filter dropdowns visible above table, update results on change
• Search field filters by ID and title
• Multiple filters combine with AND logic
• Reset filters button returns to default view

Affected Components

web-ui/src/app/proof/page.tsx

[coderabbitai]

🔗 Related PRs

#461 - feat(web-ui): PROOF9 requirements list, detail, and dashboard widget (#458) [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[traycerai]

Warning

Something went wrong while processing your request.

Reference ID: 0e35daaa-b775-4d0e-b87c-acdfeb409eaf

Please try again or contact support if the issue persists, referencing this ID.