/ui-approve - HITL Approval Interface

Manage Human-in-the-Loop (HITL) approval workflows for UI generation, including reviewing pending approvals, managing action guards, and configuring approval preferences.

Usage

# List pending approvals
/ui-approve list

# Approve specific request
/ui-approve approve <request-id>

# Deny specific request
/ui-approve deny <request-id> --reason "Not aligned with requirements"

# Approve all pending (use with caution)
/ui-approve approve-all

# View approval history
/ui-approve history

# Configure approval preferences
/ui-approve config --auto-approve low-risk
/ui-approve config --timeout 300

# View action guards
/ui-approve guards

# Modify guard settings
/ui-approve guards --disable file_write
/ui-approve guards --enable design_system_change

Output Format

List Pending Approvals

PENDING APPROVALS
═══════════════════════════════════════════════════════════════

ID: req_abc123
───────────────────────────────────────────────────────────────
Type:      Navigation Restructuring
Risk:      ⚠️ MEDIUM
Timeout:   4:32 remaining
Rationale: Flatten 4-level navigation to 2-level

Impact:
├─ Files affected: 8
├─ Components: Header, Sidebar, NavMenu
├─ User flow: Settings section reorganized
└─ Reversible: Yes

Options:
[1] ✓ Approve  - Apply navigation changes
[2] ✗ Deny     - Keep current structure
[3] ⚙ Modify   - Adjust scope

───────────────────────────────────────────────────────────────

ID: req_def456
───────────────────────────────────────────────────────────────
Type:      Design System Token Update
Risk:      🔴 HIGH
Timeout:   No timeout (requires explicit approval)
Rationale: Update primary color from #3b82f6 to #0ea5e9

Impact:
├─ Files affected: 24
├─ Components: All (global change)
├─ User flow: None
└─ Reversible: Yes

Options:
[1] ✓ Approve  - Update design tokens
[2] ✗ Deny     - Keep current tokens

───────────────────────────────────────────────────────────────

Total Pending: 2

Approval Details

APPROVAL REQUEST: req_abc123
═══════════════════════════════════════════════════════════════

Operation: Navigation Restructuring
Category:  navigation_change
Status:    ⏳ PENDING

Risk Assessment
───────────────────────────────────────────────────────────────
Level:   ⚠️ MEDIUM
Factors:
├─ User flow affected
├─ Multiple files changed
└─ Visible to end users

Impact Analysis
───────────────────────────────────────────────────────────────
Files: 8
├─ src/components/Header/Header.tsx
├─ src/components/Sidebar/Sidebar.tsx
├─ src/components/NavMenu/NavMenu.tsx
└─ ... (5 more)

Components: 3 organisms, 2 molecules

Before/After Preview
───────────────────────────────────────────────────────────────
BEFORE:
Settings
└── Account
    └── Security
        └── Two-Factor

AFTER:
Settings ▾
├── Account & Security
│   ├── Profile
│   ├── Password
│   └── Two-Factor
└── Billing

Rollback Available: ✅ Yes (git revert)

Time Remaining: 4:32 (auto-deny on timeout)

Commands

List Approvals

/ui-approve list [options]

Options:
  --status <status>    Filter by status (pending, approved, denied)
  --risk <level>       Filter by risk level (low, medium, high, critical)
  --limit <n>          Limit results

Approve Request

/ui-approve approve <request-id> [options]

Options:
  --scope <scope>      Modify scope before approving
  --comment <text>     Add approval comment

Deny Request

/ui-approve deny <request-id> [options]

Options:
  --reason <text>      Reason for denial (required)

View History

/ui-approve history [options]

Options:
  --days <n>           Number of days to show (default: 7)
  --status <status>    Filter by status
  --export <format>    Export to CSV/JSON

Configure Preferences

/ui-approve config [options]

Options:
  --auto-approve <level>   Auto-approve low/medium risk (use with caution)
  --timeout <seconds>      Default timeout for approvals
  --notify <channel>       Notification channel (slack, email)
  --delegate <user>        Delegate approvals to user

Manage Guards

/ui-approve guards [options]

Options:
  --enable <guard>     Enable specific guard
  --disable <guard>    Disable specific guard
  --list               List all guards with status

Approval History

APPROVAL HISTORY (Last 7 days)
═══════════════════════════════════════════════════════════════

2026-01-19 14:23:45
├─ ID:       req_abc123
├─ Type:     Navigation Restructuring
├─ Decision: ✅ APPROVED
├─ By:       hal.casteel
└─ Duration: 2m 15s

2026-01-19 10:15:30
├─ ID:       req_xyz789
├─ Type:     Design System Update
├─ Decision: ❌ DENIED
├─ By:       hal.casteel
├─ Reason:   "Color doesn't match brand guidelines"
└─ Duration: 5m 42s

2026-01-18 16:45:00
├─ ID:       req_mno456
├─ Type:     File Modification
├─ Decision: ✅ APPROVED (auto)
├─ By:       system (low-risk auto-approve)
└─ Duration: 0s

Summary
───────────────────────────────────────────────────────────────
Total Requests:  12
Approved:        10 (83%)
Denied:          2 (17%)
Auto-approved:   4 (33%)
Avg Response:    3m 24s

Action Guards

ACTION GUARDS
═══════════════════════════════════════════════════════════════

Guard                    Status    Risk     Auto-Approve
────────────────────────────────────────────────────────────
file_write               ✅ ON     Medium   No
design_system_change     ✅ ON     High     No
navigation_restructure   ✅ ON     Medium   No
bulk_modification        ✅ ON     High     No
destructive_action       ✅ ON     Critical No
skill_activation         ✅ ON     Low      Yes (session)
new_file_creation        ❌ OFF    Low      Yes

Agent Invoked

Action	Agent	Purpose
List	moe-ui-hitl-orchestrator	Retrieve pending approvals
Approve/Deny	moe-ui-hitl-orchestrator	Process decision
History	moe-ui-hitl-orchestrator	Query audit log
Guards	moe-ui-hitl-orchestrator	Manage action guards

Exit Codes

Code	Meaning
0	Operation successful
1	No pending approvals
2	Request not found
3	Invalid operation
4	Permission denied

Related Commands

• /ui-optimize - Full optimization (triggers approvals)
• /ui-quality - Quality gates
• /ui-design-system - Design system management

Completion Checklist

Before marking complete:

• Pending approvals listed
• Decision made (approve/deny)
• Comment/reason provided
• Audit log updated
• Downstream agents notified

When NOT to Use

Do NOT use when:

• ❌ No approvals pending
• ❌ Automated pipeline (use --skip-approval flag)
• ❌ Low-risk auto-approved changes

---

Command Version: 1.0.0 Created: 2026-01-19 Part of: CODITECT MoE UI/UX Agent System