Problem

Current Behavior

1. Several dialog components use custom implementations instead of Radix UI Dialog
2. ❌ z-index values are inconsistent across dialogs (some missing, some using 1000)
3. ❌ Nested dialogs don't layer correctly (Issue The new skill creation modal layer does not appear at the top. #402: SkillCreationDialog not appearing on top)

Expected Behavior

1. All dialogs use @radix-ui/react-dialog for consistency and accessibility
2. ✅ z-index follows 3-layer hierarchy: Base (9999) → Nested (10000) → Confirm (10001)
3. ✅ Nested dialogs layer correctly

Solution

Migrate all custom dialog implementations to Radix UI Dialog and standardize z-index values.

Changes

Migrated to Radix UI Dialog:

• SlackConnectionRequiredDialog.tsx (z-index: 9999)
• TermsOfUseDialog.tsx (z-index: 10000)
• McpNodeEditDialog.tsx (z-index: 9999)
• SlackShareDialog.tsx (z-index: 9999)
• SlackManualTokenDialog.tsx (z-index: 10000)

z-index fixes for existing Radix UI dialogs:

• SkillCreationDialog.tsx - Added zIndex: 10000 (fixes Issue The new skill creation modal layer does not appear at the top. #402)
• SubAgentFlowDialog.tsx - Added zIndex: 9999

Documentation:

• Updated CLAUDE.md dialog status table to reflect all dialogs as migrated

Migration Pattern

// Before (Custom implementation)
if (!isOpen) return null;
return (
  <div style={{ position: 'fixed', zIndex: 9999, ... }} onClick={onClose}>
    <div onClick={(e) => e.stopPropagation()}>
      {/* content */}
    </div>
  </div>
);

// After (Radix UI)
return (
  <Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
    <Dialog.Portal>
      <Dialog.Overlay style={{ ..., zIndex: 9999 }}>
        <Dialog.Content>
          <Dialog.Title>{title}</Dialog.Title>
          <Dialog.Description>{description}</Dialog.Description>
          {/* content */}
        </Dialog.Content>
      </Dialog.Overlay>
    </Dialog.Portal>
  </Dialog.Root>
);

Impact

• Accessibility: Radix UI provides automatic ARIA attributes, focus management, and keyboard navigation
• Consistency: All dialogs now follow the same implementation pattern
• z-index layering: Nested dialogs (child dialogs, confirmation dialogs) now display correctly on top
• No breaking changes: External API (props) remains unchanged

Testing

• Manual E2E testing completed
  • SlackConnectionRequiredDialog: open/close, ESC key, overlay click
  • TermsOfUseDialog: open/close, checkbox, agree button state
  • McpNodeEditDialog: open/close, mode-specific UI
  • SlackShareDialog: open/close, nested SlackManualTokenDialog layering
  • SlackManualTokenDialog: open/close, delete confirmation dialog (ConfirmDialog)
  • SkillCreationDialog: appears on top of SkillBrowserDialog (Issue The new skill creation modal layer does not appear at the top. #402 fix verified)
• Code quality checks passed (npm run format && npm run lint && npm run check)
• Build succeeded (npm run build)

Related

• Fixes The new skill creation modal layer does not appear at the top. #402

🤖 Generated with Claude Code