feat(ui): add toast feedback, payment confirm dialog, and queue auto-triage#21
Merged
chitcommit merged 4 commits intomainfrom Mar 7, 2026
Merged
feat(ui): add toast feedback, payment confirm dialog, and queue auto-triage#21chitcommit merged 4 commits intomainfrom
chitcommit merged 4 commits intomainfrom
Conversation
|
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (11)
📝 WalkthroughWalkthroughAdds a toast notification system and ConfirmDialog component, integrates toast UX across dashboard and action-queue flows (including auto-triage and payment confirmation), updates obligation button labels to "Mark Paid", and adds an adversarial-review planning document. No public API surface changes beyond UI exports. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Dashboard as Dashboard UI
participant API as Server API
participant Toast as ToastProvider/Viewport
rect rgba(200,220,255,0.5)
User->>Dashboard: click "Mark Paid" (requestPayNow)
Dashboard->>Dashboard: set pendingPayment & open ConfirmDialog
User->>Dashboard: confirm payment
Dashboard->>API: POST /pay (mark paid)
API-->>Dashboard: 200 OK
Dashboard->>Toast: show success toast
Dashboard->>Dashboard: reload data, clear pendingPayment
end
sequenceDiagram
participant User
participant ActionQueue as ActionQueue UI
participant API as Server API
participant Toast as ToastProvider/Viewport
rect rgba(220,255,200,0.5)
User->>ActionQueue: open queue (empty)
ActionQueue->>ActionQueue: runTriage(auto)
ActionQueue->>API: POST /triage/auto
API-->>ActionQueue: triage results
ActionQueue->>Toast: show success/info/error toast
ActionQueue->>ActionQueue: loadQueue(refresh)
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Adds shared UI primitives (toasts + confirm dialog) and uses them to improve safety/feedback around payment actions and queue triage behavior in the ChittyCommand UI.
Changes:
- Introduces a global toast system (
ToastProvider,useToast,ToastViewport) and wires it into the app root. - Adds a reusable
ConfirmDialogand applies it to Dashboard “mark paid” flow (with toast feedback). - Adds first-load auto-triage when the Action Queue is empty and adds toast feedback for triage + decisions.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/src/pages/Dashboard.tsx | Adds payment confirmation dialog and success/error toast feedback around markPaid. |
| ui/src/pages/ActionQueue.tsx | Adds auto-triage on empty first load and toast feedback for triage + approve/reject/defer. |
| ui/src/main.tsx | Wraps the app in ToastProvider to enable global toasts. |
| ui/src/lib/toast.tsx | Implements toast state/timers, ToastProvider, and useToast hook. |
| ui/src/components/ui/Toast.tsx | Adds toast viewport UI rendering and interactions. |
| ui/src/components/ui/ConfirmDialog.tsx | Adds reusable confirmation modal for risky actions. |
| ui/src/components/dashboard/ObligationsWidget.tsx | Renames “Pay” button label to “Mark Paid”. |
| ui/src/components/dashboard/FocusView.tsx | Renames “Pay Now” CTA to “Mark Paid”. |
| docs/plans/2026-03-05-adversarial-review-restated.md | Adds a planning/restatement doc capturing verified findings and priority order. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@ui/src/components/ui/ConfirmDialog.tsx`:
- Around line 28-76: ConfirmDialog lacks focus management: implement focus
trapping, initial focus, aria-describedby, and focus restoration. In the
ConfirmDialog component, add refs for the dialog container and the confirm
ActionButton (e.g., confirmButtonRef and dialogRef), set aria-describedby on the
dialog to the message element id, save document.activeElement on open and
restore it on close, move initial focus to the confirm button when open
(confirmButtonRef.focus()), and implement a focus trap inside the useEffect
(handle Tab/Shift+Tab to cycle focus within dialogRef) or replace the component
with an accessible dialog from a library like Radix UI or Headless UI; ensure
onCancel/onConfirm still respect loading and that event listeners are cleaned up
on unmount.
In `@ui/src/lib/toast.tsx`:
- Around line 66-72: The toast cap currently keeps the last four then appends
nextToast (allowing 5) and never clears timers for evicted toasts; change the
queuing logic so you keep only the last three existing toasts before appending
nextToast (use prev.slice(-3) as the kept list) and compute which toasts were
dropped (prev minus kept) and for each dropped toast id clearTimeout on
timers.current.get(id) and delete the entry from timers.current before calling
setToasts([...kept, nextToast]); ensure you still register the new timeout using
timers.current.set(id, timer) and use existing dismissToast for removal.
In `@ui/src/pages/ActionQueue.tsx`:
- Around line 90-112: handleDecide can be invoked multiple times before the
first async request completes; to prevent duplicate decideQueue() mutations, add
a pending-tracker (e.g., a Set stored on a ref like pendingDecisionsRef) and
check it at the start of handleDecide: if the id is present, return early;
otherwise add id to the set before awaiting api.decideQueue and remove it in a
finally block so the id is cleared on success or failure. Update references in
handleDecide (sessionId, items, setItems, loadStats, toast) accordingly so the
guard prevents duplicate network calls and duplicate toasts while the first
decision is pending.
In `@ui/src/pages/Dashboard.tsx`:
- Around line 30-49: The handler handleConfirmPayNow can be invoked twice before
payingId state updates, causing duplicate api.markPaid calls; fix by adding a
synchronous guard using a ref (e.g., payingIdRef) that is checked and set at the
start of handleConfirmPayNow (alongside setting state via setPayingId) to
prevent re-entry, then clear the ref in the finally block; update references to
use pendingPayment.id and api.markPaid as before and keep setting/clearing the
payingId state for UI, ensuring the ref is the authoritative in-flight marker so
rapid double-clicks cannot trigger duplicate requests (also maintain the
existing error/toast/finally behavior).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: decd6a0b-cd07-493e-b82c-0e42392b882a
📒 Files selected for processing (9)
docs/plans/2026-03-05-adversarial-review-restated.mdui/src/components/dashboard/FocusView.tsxui/src/components/dashboard/ObligationsWidget.tsxui/src/components/ui/ConfirmDialog.tsxui/src/components/ui/Toast.tsxui/src/lib/toast.tsxui/src/main.tsxui/src/pages/ActionQueue.tsxui/src/pages/Dashboard.tsx
Contributor
Author
|
@codex[agent] open a new pull request to apply changes based on the comments in this thread |
Contributor
|
@chitcommit I've opened a new pull request, #22, to work on those changes. Once the pull request is ready, I'll request review from you. |
|
Summary
Testing
|
|
|
I'll conduct a full adversarial review of this PR, evaluating security, policy bypass paths, regression risk, and merge-gating bypass attempts as requested. Adversarial review requested. Please evaluate with focus on: (1) security vulnerabilities in the new toast/dialog/payment flows, (2) policy bypass paths (e.g., payment confirmation bypass, auto-triage policy bypasses), (3) regression risk against existing dashboard and queue behavior, and (4) any patterns that could be used to bypass merge-gating checks (e.g., test coverage gaps, suppressed errors, misleading loading states). 🧠 Learnings used✅ Actions performedFull review triggered. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Improve dashboard and queue UX by adding structured feedback and safer payment actions.
What Changed
ToastProvider,useToast, toast viewport UI).ConfirmDialog).markPaid.Validation
npm run typecheckpassednpm testpassed (15/15)npm run ui:buildpassedNotes
Summary by CodeRabbit
New Features
Documentation
Updates