Improve Human-in-the-Loop (HITL) Review UX

[cmarteepants]

Description

We need to make “Needs Review” clearer, more actionable, and consistent across the UI. Right now, open and resolved reviews are lumped together under “Required Actions,” and signals are subtle or inconsistent (purple vs. red, icons that don’t match, buried tabs).

This issue explores two approaches for how users interact with reviews (separate tabs vs. modal), and also outlines improvements that should be implemented in either case:

• DAG graph nodes
  • For open reviews: show an amber dashed border around the purple node plus a ✋ badge icon.
  • For ApprovalOperator in older DAG runs: show 👤✔️ if approved or 👤❌ if rejected.
• Home page:
  • Use the ✋ badge icon instead of the stopwatch icon since that is too similar to deferred tasks
  • Pull Required Actions (rename to Needs Review) out of “Stats” and into its own callout bar.
• DAG list page: Add a Needs Review (n) badge with icon inline, so stalled DAGs are immediately visible.

These visibility changes ensure users can see human-blocked tasks without needing to drill into tabs.

Use case/motivation

Option A: Separate Tabs (clearer, inbox-like)

• DAG Run & DAG Overview views
  • Show Needs Review (n)
  • as the default tab when n > 0 (else hidden)
  • Always show a second tab: Review History
• *Needs Review rows
  • Subject (click -> modal)
  • Run After
  • Approver / Assignee (@Lee-W to confirm if that's a thing)
  • Task ID

Pros

• Clear mental model: inbox vs archive
• Easy to scan counts (Needs Review (n))
• Audit trail cleanly separated

Cons

• Adds one more tab to already crowded UI

Option B: Review (n) button in the header with modal

(Leaning towards this after writing it out)

• Add a Review (n) button in the DAG and Task Instance Headers (next to "Add a note")
• Opens a modal with accordion list of open items
• Include secondary History tab for resolved items with the same information as above
• Apply the same pattern should be used for global option under Browse

Pros:

• Avoids increasing tab count
• Modal pattern emphasizes "take action now"
• History still accessible just less prominent

Cons:

• Mixing open and resolved in one place could dilute clarity, even with separate tabs
• More clicks if a user wants to audit history frequently

Applies to both options

• Graph nodes
  • For open reviews: Show an amber dashed border around the purple node and a ✋ badge icon.
  • For Approval Operator specifically: For graphs nodes of dags that have already run, if approved show 👤✔️ if rejected 👤✖️
• Home page: Use the ✋ badge icon and pull "Required Actions" (rename to "Needs Review") out of Stats to its own callout bar.
• DAG list page: Add "Needs Review (n)" badge with icon inline, so stalled DAGs are immediately visible

This issue is primarily about choosing between Option A and Option B, but we should move forward with the graph node, homepage, and DAG list improvements regardless.

Related issues

No response

Are you willing to submit a PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct