[Phase 3.5C] Glitch Capture: REQ detail view and sidebar entry point

[frankbria]

Goal

Build the REQ detail view so users can see a captured glitch's full description, its proof obligations, and the evidence history across all gate runs.

Background

Follows the capture form (#568). Once a REQ exists, users need a drill-down view that shows what was captured and whether it's been satisfied by subsequent gate runs. Currently /proof/[req_id] route exists but its content needs the obligation + evidence history sections.

Scope

Check the existing /proof/[req_id] page — it may already have some structure. Add or complete:

REQ detail header:

• Glitch description (full markdown render)
• Where found, scope, severity, expiry (if set)
• Captured-by and capture timestamp

Obligations panel:

• List of required gates for this REQ with current status: pending / satisfied / failed
• Each obligation row links to the most recent gate run that evaluated it

Evidence history:

• Table of gate runs that touched this REQ: run date, gate, result (pass/fail), evidence artifact (expandable)
• "No runs yet" empty state with CTA to [Run Gates]

Sidebar entry point:

• "Capture Glitch" link in the sidebar navigation (reuses modal from [Phase 3.5C] Glitch Capture: entry point and capture form #568)

Acceptance criteria

• REQ detail page shows description, obligations, and evidence history
• Obligation status reflects most recent gate run result
• Sidebar has Capture Glitch link
• npm test and npm run build pass

[traycerai]

Warning

Ticket Assist will be discontinued on May 1, 2026. After that date, the feature will no longer be available. We suggest installing the Traycer IDE Extension for continued AI-powered, spec-driven development. Thank you for choosing Traycer!

Plan

Observations

The /proof/[req_id] page (file:web-ui/src/app/proof/[req_id]/page.tsx) is already substantially built — it has the header, obligations panel, evidence history with filters/sort, and waiver section. The ProofRequirement type lacks where_found/scope/expiry fields (the backend Requirement model has scope as a RequirementScope object, but the API response model RequirementResponse omits it). The AppSidebar (file:web-ui/src/components/layout/AppSidebar.tsx) has no "Capture Glitch" entry. No CaptureGlitchModal component exists yet. react-markdown is already a dependency.

Approach

The work splits into three targeted changes: (1) enhance the REQ detail page header with markdown rendering and the missing metadata fields, (2) add a CaptureGlitchModal component and wire it into the sidebar, and (3) expose scope/where from the backend API so the detail page can display "Where found". Each change is self-contained and follows existing patterns.

---

Implementation Steps

1. Expose scope / where in the backend API response

File: file:codeframe/ui/routers/proof_v2.py

• Add a ScopeOut Pydantic model with fields routes, components, apis, files, tags (all list[str]).
• Add a scope: Optional[ScopeOut] field to RequirementResponse.
• In _req_to_response(), populate scope from req.scope (convert the RequirementScope dataclass to ScopeOut).

File: file:web-ui/src/types/index.ts

• Add a ProofScope interface: { routes: string[]; components: string[]; apis: string[]; files: string[]; tags: string[] }.
• Add scope: ProofScope | null to the ProofRequirement interface.

---

2. Enhance the REQ detail header with markdown and full metadata

File: file:web-ui/src/app/proof/[req_id]/page.tsx

• Import ReactMarkdown from react-markdown (already used in file:web-ui/src/components/prd/MarkdownEditor.tsx).
• Replace the plain <p> description render with a ReactMarkdown block wrapped in the same prose prose-sm Tailwind classes used in MarkdownEditor.tsx.
• Extend the metadata row beneath the title to include:
  • Where found — render req.scope as a comma-joined list of all non-empty scope arrays (routes, components, apis, files, tags). Label it "Where found".
  • Source — already present as req.source_issue; also display req.source (production / qa / dogfooding / etc.).
  • Severity — already rendered as a badge.
  • Expiry — display req.waiver?.expires if present (already shown in the Waiver section; optionally surface it in the header too as a "Waiver expires" chip).
  • Captured by — already rendered as req.created_by.
  • Capture timestamp — already rendered as req.created_at.

No new component is needed; these are inline additions to the existing header <div>.

---

3. Enhance the Obligations panel with links to most-recent gate run

File: file:web-ui/src/app/proof/[req_id]/page.tsx

• After the evidence SWR data is loaded, compute a latestRunByGate map: for each gate, find the evidence entry with the most recent timestamp.
• In the obligations table, add a third column "Latest Run". For each obligation row, look up latestRunByGate[ob.gate]:
  • If found, render the run_id as a <span> (or a link to the artifact path if it's a local path) alongside the result badge (pass/fail coloring matching the evidence table).
  • If not found, render —.
• Update the obligation status cell to reflect the most recent gate run result: if latestRunByGate[ob.gate]?.satisfied === true show "satisfied", if false show "failed", otherwise keep the stored ob.status.

---

4. Add "No runs yet" empty state CTA in Evidence History

File: file:web-ui/src/app/proof/[req_id]/page.tsx

• Replace the current "No evidence recorded yet." plain text with a styled empty-state block:
  • Message: "No gate runs yet for this requirement."
  • A <Link href="/review">Run Gates →</Link> CTA button (using the existing Button component with variant="outline"), pointing to /review where gates are triggered.

---

5. Create the CaptureGlitchModal component

File: file:web-ui/src/components/proof/CaptureGlitchModal.tsx (new file)

Model this after WaiveDialog (file:web-ui/src/components/proof/WaiveDialog.tsx) — same Dialog/DialogContent/DialogHeader/DialogFooter pattern from @radix-ui/react-dialog.

The modal contains a single-step form with these fields (matching CaptureRequirementRequest in the backend):

Field	Input type	Notes
title	<Input>	Required
description	<Textarea>	Required; markdown supported
where	<Input>	Required; placeholder "file path, route, or component"
severity	<select>	Options: critical / high / medium / low
source	<select>	Options: production / qa / dogfooding / monitoring / user_report
created_by	<Input>	Optional; defaults to "human"
source_issue	<Input>	Optional; placeholder "GH-123"

Props: { workspacePath: string; onClose: () => void; onSuccess: (reqId: string) => void }.

On submit, call proofApi.capture(workspacePath, body) (see step 6). On success, call onSuccess(req.id) and optionally navigate to /proof/${req.id} using useRouter.

---

6. Add proofApi.capture to the API client

File: file:web-ui/src/lib/api.ts

• Add a CaptureRequest type to file:web-ui/src/types/index.ts:

  { title: string; description: string; where: string; severity: ProofSeverity; source: string; created_by?: string; source_issue?: string | null }
  

• Add capture method to proofApi:
  • POST /api/v2/proof/requirements with { workspace_path: workspacePath } query param and the body fields.
  • Returns ProofRequirement (the backend returns CaptureRequirementResponse which extends RequirementResponse; the frontend type can stay as ProofRequirement).

---

7. Export CaptureGlitchModal from the proof component index

File: file:web-ui/src/components/proof/index.ts

• Add export { CaptureGlitchModal } from './CaptureGlitchModal';

---

8. Add "Capture Glitch" entry to the sidebar

File: file:web-ui/src/components/layout/AppSidebar.tsx

• Import CaptureGlitchModal from @/components/proof and Alert02Icon (or a suitable icon — BugIcon or Add01Icon from @hugeicons/react; check available icons first) for the entry.
• Add state: const [showCaptureModal, setShowCaptureModal] = useState(false).
• Below the NAV_ITEMS <nav> loop, add a separate <button> element (not a Link) styled identically to the nav links:

  className="flex items-center gap-3 rounded-md px-2 py-2 text-sm text-muted-foreground hover:bg-accent/50 hover:text-foreground lg:px-3"
  

  Label: "Capture Glitch" with an appropriate icon.
• On click, set showCaptureModal(true).
• Render {showCaptureModal && workspacePath && <CaptureGlitchModal workspacePath={workspacePath} onClose={() => setShowCaptureModal(false)} onSuccess={(id) => { setShowCaptureModal(false); router.push(/proof/${id}); }} />}.
• Import useRouter from next/navigation for the navigation after capture.

The sidebar test (file:web-ui/__tests__/components/layout/AppSidebar.test.tsx) currently asserts exactly 8 nav items rendered as links — the Capture Glitch entry is a <button>, not a <Link>, so existing link-count assertions remain unaffected. Add a test assertion that the "Capture Glitch" button is present when a workspace is selected.

---

Sequence of data flow

sequenceDiagram
    participant User
    participant AppSidebar
    participant CaptureGlitchModal
    participant proofApi
    participant Backend

    User->>AppSidebar: clicks "Capture Glitch"
    AppSidebar->>CaptureGlitchModal: renders modal
    User->>CaptureGlitchModal: fills form & submits
    CaptureGlitchModal->>proofApi: capture(workspacePath, body)
    proofApi->>Backend: POST /api/v2/proof/requirements
    Backend-->>proofApi: CaptureRequirementResponse {id, ...}
    proofApi-->>CaptureGlitchModal: ProofRequirement
    CaptureGlitchModal->>AppSidebar: onSuccess(req.id)
    AppSidebar->>User: navigate to /proof/{req.id}

    User->>ProofDetailPage: views /proof/{req.id}
    ProofDetailPage->>proofApi: getRequirement + getEvidence
    proofApi->>Backend: GET /api/v2/proof/requirements/{id} + /evidence
    Backend-->>ProofDetailPage: req (with scope) + evidence[]
    ProofDetailPage->>User: renders markdown description, scope, obligations with latest run, evidence history

Loading

Import In IDE

🤖 Prompt for AI Agents

## Observations

The `/proof/[req_id]` page (`file:web-ui/src/app/proof/[req_id]/page.tsx`) is already substantially built — it has the header, obligations panel, evidence history with filters/sort, and waiver section. The `ProofRequirement` type lacks `where_found`/`scope`/`expiry` fields (the backend `Requirement` model has `scope` as a `RequirementScope` object, but the API response model `RequirementResponse` omits it). The `AppSidebar` (`file:web-ui/src/components/layout/AppSidebar.tsx`) has no "Capture Glitch" entry. No `CaptureGlitchModal` component exists yet. `react-markdown` is already a dependency.

## Approach

The work splits into three targeted changes: (1) enhance the REQ detail page header with markdown rendering and the missing metadata fields, (2) add a `CaptureGlitchModal` component and wire it into the sidebar, and (3) expose `scope`/`where` from the backend API so the detail page can display "Where found". Each change is self-contained and follows existing patterns.

---

## Implementation Steps

### 1. Expose `scope` / `where` in the backend API response

**File:** `file:codeframe/ui/routers/proof_v2.py`

- Add a `ScopeOut` Pydantic model with fields `routes`, `components`, `apis`, `files`, `tags` (all `list[str]`).
- Add a `scope: Optional[ScopeOut]` field to `RequirementResponse`.
- In `_req_to_response()`, populate `scope` from `req.scope` (convert the `RequirementScope` dataclass to `ScopeOut`).

**File:** `file:web-ui/src/types/index.ts`

- Add a `ProofScope` interface: `{ routes: string[]; components: string[]; apis: string[]; files: string[]; tags: string[] }`.
- Add `scope: ProofScope | null` to the `ProofRequirement` interface.

---

### 2. Enhance the REQ detail header with markdown and full metadata

**File:** `file:web-ui/src/app/proof/[req_id]/page.tsx`

- Import `ReactMarkdown` from `react-markdown` (already used in `file:web-ui/src/components/prd/MarkdownEditor.tsx`).
- Replace the plain `<p>` description render with a `ReactMarkdown` block wrapped in the same `prose prose-sm` Tailwind classes used in `MarkdownEditor.tsx`.
- Extend the metadata row beneath the title to include:
  - **Where found** — render `req.scope` as a comma-joined list of all non-empty scope arrays (routes, components, apis, files, tags). Label it "Where found".
  - **Source** — already present as `req.source_issue`; also display `req.source` (production / qa / dogfooding / etc.).
  - **Severity** — already rendered as a badge.
  - **Expiry** — display `req.waiver?.expires` if present (already shown in the Waiver section; optionally surface it in the header too as a "Waiver expires" chip).
  - **Captured by** — already rendered as `req.created_by`.
  - **Capture timestamp** — already rendered as `req.created_at`.

No new component is needed; these are inline additions to the existing header `<div>`.

---

### 3. Enhance the Obligations panel with links to most-recent gate run

**File:** `file:web-ui/src/app/proof/[req_id]/page.tsx`

- After the `evidence` SWR data is loaded, compute a `latestRunByGate` map: for each gate, find the evidence entry with the most recent `timestamp`.
- In the obligations table, add a third column **"Latest Run"**. For each obligation row, look up `latestRunByGate[ob.gate]`:
  - If found, render the `run_id` as a `<span>` (or a link to the artifact path if it's a local path) alongside the result badge (pass/fail coloring matching the evidence table).
  - If not found, render `—`.
- Update the obligation `status` cell to reflect the most recent gate run result: if `latestRunByGate[ob.gate]?.satisfied === true` show "satisfied", if `false` show "failed", otherwise keep the stored `ob.status`.

---

### 4. Add "No runs yet" empty state CTA in Evidence History

**File:** `file:web-ui/src/app/proof/[req_id]/page.tsx`

- Replace the current `"No evidence recorded yet."` plain text with a styled empty-state block:
  - Message: "No gate runs yet for this requirement."
  - A `<Link href="/review">Run Gates →</Link>` CTA button (using the existing `Button` component with `variant="outline"`), pointing to `/review` where gates are triggered.

---

### 5. Create the `CaptureGlitchModal` component

**File:** `file:web-ui/src/components/proof/CaptureGlitchModal.tsx` _(new file)_

Model this after `WaiveDialog` (`file:web-ui/src/components/proof/WaiveDialog.tsx`) — same Dialog/DialogContent/DialogHeader/DialogFooter pattern from `@radix-ui/react-dialog`.

The modal contains a single-step form with these fields (matching `CaptureRequirementRequest` in the backend):

| Field | Input type | Notes |
|---|---|---|
| `title` | `<Input>` | Required |
| `description` | `<Textarea>` | Required; markdown supported |
| `where` | `<Input>` | Required; placeholder "file path, route, or component" |
| `severity` | `<select>` | Options: critical / high / medium / low |
| `source` | `<select>` | Options: production / qa / dogfooding / monitoring / user_report |
| `created_by` | `<Input>` | Optional; defaults to `"human"` |
| `source_issue` | `<Input>` | Optional; placeholder "GH-123" |

Props: `{ workspacePath: string; onClose: () => void; onSuccess: (reqId: string) => void }`.

On submit, call `proofApi.capture(workspacePath, body)` (see step 6). On success, call `onSuccess(req.id)` and optionally navigate to `/proof/${req.id}` using `useRouter`.

---

### 6. Add `proofApi.capture` to the API client

**File:** `file:web-ui/src/lib/api.ts`

- Add a `CaptureRequest` type to `file:web-ui/src/types/index.ts`:
  ```
  { title: string; description: string; where: string; severity: ProofSeverity; source: string; created_by?: string; source_issue?: string | null }
  ```
- Add `capture` method to `proofApi`:
  - `POST /api/v2/proof/requirements` with `{ workspace_path: workspacePath }` query param and the body fields.
  - Returns `ProofRequirement` (the backend returns `CaptureRequirementResponse` which extends `RequirementResponse`; the frontend type can stay as `ProofRequirement`).

---

### 7. Export `CaptureGlitchModal` from the proof component index

**File:** `file:web-ui/src/components/proof/index.ts`

- Add `export { CaptureGlitchModal } from './CaptureGlitchModal';`

---

### 8. Add "Capture Glitch" entry to the sidebar

**File:** `file:web-ui/src/components/layout/AppSidebar.tsx`

- Import `CaptureGlitchModal` from `@/components/proof` and `Alert02Icon` (or a suitable icon — `BugIcon` or `Add01Icon` from `@hugeicons/react`; check available icons first) for the entry.
- Add state: `const [showCaptureModal, setShowCaptureModal] = useState(false)`.
- Below the `NAV_ITEMS` `<nav>` loop, add a separate `<button>` element (not a `Link`) styled identically to the nav links:
  ```
  className="flex items-center gap-3 rounded-md px-2 py-2 text-sm text-muted-foreground hover:bg-accent/50 hover:text-foreground lg:px-3"
  ```
  Label: **"Capture Glitch"** with an appropriate icon.
- On click, set `showCaptureModal(true)`.
- Render `{showCaptureModal && workspacePath && <CaptureGlitchModal workspacePath={workspacePath} onClose={() => setShowCaptureModal(false)} onSuccess={(id) => { setShowCaptureModal(false); router.push(`/proof/${id}`); }} />}`.
- Import `useRouter` from `next/navigation` for the navigation after capture.

The sidebar test (`file:web-ui/__tests__/components/layout/AppSidebar.test.tsx`) currently asserts exactly 8 nav items rendered as links — the Capture Glitch entry is a `<button>`, not a `<Link>`, so existing link-count assertions remain unaffected. Add a test assertion that the "Capture Glitch" button is present when a workspace is selected.

---

### Sequence of data flow

```mermaid
sequenceDiagram
    participant User
    participant AppSidebar
    participant CaptureGlitchModal
    participant proofApi
    participant Backend

    User->>AppSidebar: clicks "Capture Glitch"
    AppSidebar->>CaptureGlitchModal: renders modal
    User->>CaptureGlitchModal: fills form & submits
    CaptureGlitchModal->>proofApi: capture(workspacePath, body)
    proofApi->>Backend: POST /api/v2/proof/requirements
    Backend-->>proofApi: CaptureRequirementResponse {id, ...}
    proofApi-->>CaptureGlitchModal: ProofRequirement
    CaptureGlitchModal->>AppSidebar: onSuccess(req.id)
    AppSidebar->>User: navigate to /proof/{req.id}

    User->>ProofDetailPage: views /proof/{req.id}
    ProofDetailPage->>proofApi: getRequirement + getEvidence
    proofApi->>Backend: GET /api/v2/proof/requirements/{id} + /evidence
    Backend-->>ProofDetailPage: req (with scope) + evidence[]
    ProofDetailPage->>User: renders markdown description, scope, obligations with latest run, evidence history
```

---

Execution Information

Branch: main
Commit: ea0de0a

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

🔗 Related PRs

#461 - feat(web-ui): PROOF9 requirements list, detail, and dashboard widget (#458) [merged]
#496 - feat(web-ui): link failed tasks to PROOF9 gate failure for root cause (#474) [merged]
#521 - feat(web-ui): waiver confirmation + audit trail for Proof page [merged]
#526 - feat(web-ui): sort and filter controls for Proof requirements table [merged]
#528 - feat(web-ui): filter, search, and sort for proof evidence history table [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!