UX: Surface PROOF9 gate link in execution completion banner

[frankbria]

Problem

The completion banner on the execution page shows CTAs for 'View Changes' (→ /review) and 'Back to Tasks', but doesn't guide users to verify quality with PROOF9 gates — which should logically follow execution.

Impact

Users miss the Prove phase of the pipeline entirely. Code ships without proof gate validation because the natural flow skips /proof.

Recommendation

1. Add 'Verify with PROOF9 →' button to completion banner
2. Adjust visual order: COMPLETED → suggest Proof first, then Review
3. Update explanatory text: "Execution complete. Run PROOF9 gates to verify quality before shipping."
4. On BLOCKED status, also show 'View Blockers' CTA more prominently

Acceptance Criteria

• 'View Proof Gates' button visible on execution completion
• Button links to /proof with workspace context
• Button appears before or alongside 'View Changes' button
• Text explains why proof matters (quality verification before ship)
• BLOCKED state shows clear recovery path

Affected Components

web-ui/src/app/execution/[taskId]/page.tsx (CompletionBanner)

[coderabbitai]

🔗 Related PRs

#76 - Add dismissible warning banner to QualityGateStatus component [merged]
#461 - feat(web-ui): PROOF9 requirements list, detail, and dashboard widget (#458) [closed]

---

📝 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.}

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

---

🧪 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

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!

Warning

Something went wrong while processing your request.

Reference ID: 5e07a0bd-6670-425d-9ad6-4f7937994383

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

[coderabbitai]

Coding Plan

Summary

• Extend the existing CompletionBanner props interface with two new callback props for proof and blocker navigation
• Follow the established navigation pattern (plain router.push() without query params) since workspace context is already shared via localStorage
• Reorder and restyle buttons to reflect the recommended user flow: Proof → Review → Tasks
• Add explicit blocker recovery CTA to improve the blocked state UX

Implementation Steps

Enhance CompletionBanner CTAs and Messaging

Update the CompletionBanner component to guide users toward the PROOF9 verification step and provide clearer recovery options when blocked.

Task 1: Update Completed State Banner

Add PROOF9 verification CTA and reorder buttons to reflect the recommended workflow sequence.

• Add onViewProof callback prop to CompletionBanner alongside existing onViewChanges and onBackToTasks props
• Update the success message text from the current completion message to emphasize quality verification (e.g., "Execution complete. Run PROOF9 gates to verify quality before shipping.")
• Add a new "Verify with PROOF9" button styled as the primary CTA (filled green, positioned first)
• Demote "View Changes" to secondary styling (outline) and position it after the proof button
• Keep "Back to Tasks" as the tertiary option
• Wire onViewProof in the parent to navigate to /proof using router.push('/proof') (workspace context is already available via localStorage)

Task 2: Update Blocked State Banner

Add explicit blocker resolution CTA to provide a clearer recovery path.

• Add onViewBlockers callback prop to CompletionBanner
• In the blocked state rendering, add a "View Blockers" button that navigates to /blockers
• Style "View Blockers" as the primary action (filled amber) to draw attention to the resolution path
• Keep existing "Back to Tasks" as a secondary option (outline amber)
• Wire onViewBlockers in the parent to navigate using router.push('/blockers')

🤖 Prompt for AI agents

Update the `CompletionBanner` component in
`web-ui/src/app/execution/[taskId]/page.tsx` to add new navigation CTAs and
update messaging for both the completed and blocked states.

**Completed State changes:**
- Extend the `CompletionBanner` props interface with a new `onViewProof`
callback prop (alongside existing `onViewChanges` and `onBackToTasks`)
- Update the success message text to emphasize quality verification (e.g.,
"Execution complete. Run PROOF9 gates to verify quality before shipping.")
- Add a "Verify with PROOF9" button as the primary CTA — styled filled green,
positioned first in the button group
- Change "View Changes" to secondary styling (outline) and place it after the
proof button
- Keep "Back to Tasks" as the tertiary option, unchanged
- In the parent component, wire `onViewProof` to call `router.push('/proof')`

**Blocked State changes:**
- Extend the `CompletionBanner` props interface with a new `onViewBlockers`
callback prop
- Add a "View Blockers" button in the blocked state rendering — styled filled
amber, positioned as the primary action
- Keep the existing "Back to Tasks" button as a secondary option with outline
amber styling
- In the parent component, wire `onViewBlockers` to call
`router.push('/blockers')`

No query parameters are needed for either navigation call, as workspace context
is already shared via localStorage (`codeframe_workspace_path` key).

Research

The execution page (web-ui/src/app/execution/[taskId]/page.tsx) contains an inline CompletionBanner component that renders different states for completed, failed, and blocked executions. Navigation throughout the app uses router.push() without query parameters; workspace context is shared implicitly via localStorage (codeframe_workspace_path key), which all pages read independently on mount. The /proof route already exists and follows this same workspace pattern, so navigating to it requires no special context passing.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Update the `CompletionBanner` component in
`web-ui/src/app/execution/[taskId]/page.tsx` to add new navigation CTAs and
update messaging for both the completed and blocked states.

**Completed State changes:**
- Extend the `CompletionBanner` props interface with a new `onViewProof`
callback prop (alongside existing `onViewChanges` and `onBackToTasks`)
- Update the success message text to emphasize quality verification (e.g.,
"Execution complete. Run PROOF9 gates to verify quality before shipping.")
- Add a "Verify with PROOF9" button as the primary CTA — styled filled green,
positioned first in the button group
- Change "View Changes" to secondary styling (outline) and place it after the
proof button
- Keep "Back to Tasks" as the tertiary option, unchanged
- In the parent component, wire `onViewProof` to call `router.push('/proof')`

**Blocked State changes:**
- Extend the `CompletionBanner` props interface with a new `onViewBlockers`
callback prop
- Add a "View Blockers" button in the blocked state rendering — styled filled
amber, positioned as the primary action
- Keep the existing "Back to Tasks" button as a secondary option with outline
amber styling
- In the parent component, wire `onViewBlockers` to call
`router.push('/blockers')`

No query parameters are needed for either navigation call, as workspace context
is already shared via localStorage (`codeframe_workspace_path` key).

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!