feat(dashboard): level-up actions configuration page

[BillChirico]

Parent: #364

Dashboard page for configuring level-up actions, using the WYSIWYG editor (#370) and embed builder (#371).

Scope

Page: XP & Leveling → Level-Up Actions

Global toggles:

• Enable/disable level-up actions
• Stack roles vs replace (highest only)
• Remove roles on level down

Default actions section:

• Actions that fire on every level-up
• Same action card UI as per-level

Per-level action editor:

• Level selector (pick or type a number)
• Ordered action list per level
• Each action = a card with:
  • Type selector dropdown (grantRole, removeRole, sendDm, announce, xpBonus, addReaction, nickPrefix, webhook)
  • Type-specific config fields (role picker, channel picker, message editor, etc.)
• Drag-and-drop to reorder actions
• Add action button + delete per action

Message editing (per action):

• Inline WYSIWYG Discord markdown editor (feat(dashboard): WYSIWYG Discord markdown editor component #370)
• Variable picker buttons
• Format selector (text / embed / both)
• Embed builder (feat(dashboard): visual Discord embed builder component #371) when embed format selected

Test/Preview:

• Simulate a level-up for a specific level
• Show what would happen: roles granted/removed, messages sent, channels, rendered previews

Depends On

• feat(xp): implement level-up action pipeline engine #365 — Action pipeline engine (backend)
• feat(dashboard): WYSIWYG Discord markdown editor component #370 — WYSIWYG markdown editor
• feat(dashboard): visual Discord embed builder component #371 — Embed builder

Acceptance Criteria

• Config page with global toggles
• Default actions section
• Per-level action editor with drag-and-drop
• All 8 action types have appropriate config UIs
• Role picker for role actions
• Channel picker for announce action
• Inline message editor with variable picker
• Format selector + embed builder integration
• Level-up simulation/preview
• Save/load config via API
• Tests for config page rendering and interaction

[coderabbitai]

Coding Plan

Summary

• Introduce a new top-level "XP & Leveling" nav route at /dashboard/xp for the level-up actions configuration, keeping it separate from the basic XP settings in Settings
• Extend ReputationConfig with a levelUpActions object containing global toggles, default actions array, and per-level actions map
• Build a modular action editor with reusable ActionCard components that support all 8 action types through a factory pattern, with drag-and-drop via @dnd-kit
• Integrate WYSIWYG (#370) and embed builder (#371) as dependencies, wrapping them with a variable picker and format selector for message-based actions

Design Choices

Design Choice 1: Page location: Top-level nav vs Settings sub-page

Options Considered:

1. Add "XP & Leveling" as a new top-level sidebar nav item with /dashboard/xp route
2. Add as a new category under the existing Settings page structure

Chosen Option: 1

Rationale: A dedicated top-level nav item better represents the feature's complexity and avoids cluttering the Settings page. The existing basic XP config (thresholds, XP per message) can remain in Settings → Onboarding & Growth.

Design Choice 2: Config structure: Extend ReputationConfig vs new top-level section

Options Considered:

1. Add levelUpActions as a nested object within ReputationConfig
2. Create a new top-level levelUpActions config section separate from reputation

Chosen Option: 1

Rationale: Nesting within ReputationConfig keeps XP/leveling concerns together and reuses the existing reputation allowlist entry. The section is already writable via the config API.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Foundation & Navigation

Set up the page routing, extend config types to support level-up actions, and implement the global toggles section.

Task 1: Add XP & Leveling to Sidebar Navigation

Add a new primary nav entry for the XP & Leveling page.

• Update web/src/components/layout/sidebar.tsx to add an "XP & Leveling" entry to primaryNav array with route /dashboard/xp and an appropriate icon (e.g., TrendingUp or Award from lucide-react)
• Position the entry logically in the nav order (after Members, before Tickets)

Task 2: Create Page Route Structure

Create the Next.js page route and basic page layout for the level-up actions configuration.

• Create web/src/app/dashboard/xp/page.tsx as the main page component
• Create web/src/components/dashboard/xp/ directory for page-specific components
• Create LevelUpActionsPage component that will house the configuration UI
• Wrap with ConfigProvider context consumption for draft/saved config access
• Include basic page layout with heading and description

Task 3: Extend Config Types for Level-Up Actions

Define TypeScript interfaces for the level-up actions data structure.

• Add to web/src/types/config.ts:
  • LevelActionType union type for the 8 action types: 'grantRole' | 'removeRole' | 'sendDm' | 'announce' | 'xpBonus' | 'addReaction' | 'nickPrefix' | 'webhook'
  • LevelAction interface with id, type, and type-specific config fields
  • LevelUpActionsConfig interface with enabled, stackRoles, removeRolesOnLevelDown, defaultActions, and levelActions (keyed by level number)
• Extend ReputationConfig to include optional levelUpActions: LevelUpActionsConfig
• Update src/modules/reputationDefaults.js to include default values for the new fields

Task 4: Implement Global Toggles Section

Build the global toggles card for level-up actions settings.

• Create web/src/components/dashboard/xp/GlobalTogglesSection.tsx
• Implement enable/disable toggle for entire level-up actions feature
• Implement "Stack roles vs replace (highest only)" toggle
• Implement "Remove roles on level down" toggle
• Use existing ToggleSwitch component pattern
• Wire toggles to updateDraftConfig for reputation.levelUpActions.* paths

🤖 Prompt for AI agents

Set up the foundation for the XP & Leveling dashboard page, including
navigation, routing, config type extensions, and the global toggles UI section.

- In `web/src/components/layout/sidebar.tsx`, add an "XP & Leveling" entry to
the `primaryNav` array with route `/dashboard/xp` and an appropriate
lucide-react icon (e.g., `TrendingUp` or `Award`). Position it after Members and
before Tickets.
- Create `web/src/app/dashboard/xp/page.tsx` as the main Next.js App Router page
component. Create the `web/src/components/dashboard/xp/` directory. Implement a
`LevelUpActionsPage` component that consumes the `ConfigProvider` context via
`useConfigContext` and renders a basic page layout with a heading and
description.
- In `web/src/types/config.ts`:
- Add a `LevelActionType` union type: `'grantRole' | 'removeRole' | 'sendDm' |
'announce' | 'xpBonus' | 'addReaction' | 'nickPrefix' | 'webhook'`
- Add a `LevelAction` interface with `id`, `type`, and type-specific config
fields
- Add a `LevelUpActionsConfig` interface with fields: `enabled`, `stackRoles`,
`removeRolesOnLevelDown`, `defaultActions`, and `levelActions` (keyed by level
number)
- Extend `ReputationConfig` with an optional `levelUpActions:
LevelUpActionsConfig` field
- Update `src/modules/reputationDefaults.js` to include default values for the
newly added fields.
- Create `web/src/components/dashboard/xp/GlobalTogglesSection.tsx` with three
toggles using the existing `ToggleSwitch` pattern: enable/disable the level-up
actions feature, "Stack roles vs replace (highest only)", and "Remove roles on
level down". Wire each toggle to `updateDraftConfig` targeting
`reputation.levelUpActions.*` paths.

Phase 2: Action Editor Components

Build the core per-level action editor with action cards for all 8 action types and drag-and-drop reordering.

Task 1: Create Level Selector Component

Build the level selection UI for choosing which level to configure actions for.

• Create web/src/components/dashboard/xp/LevelSelector.tsx
• Implement dropdown/combobox for selecting existing configured levels
• Support typing a custom level number to add new levels
• Display badge indicators for levels that have actions configured
• Include "Default Actions" as a special selectable option (for actions that fire on every level-up)

Task 2: Create Action Card Component

Build the reusable action card that displays a single action with type selector and type-specific config fields.

• Create web/src/components/dashboard/xp/ActionCard.tsx
• Implement type selector dropdown with all 8 action types
• Add drag handle element for reordering (visual indicator)
• Include delete button for removing the action
• Create placeholder slots for type-specific config fields (populated by Task 2.3)
• Style as a bordered card with clear visual hierarchy

Task 3: Implement Type-Specific Config Fields

Create config field components for each of the 8 action types.

• Create web/src/components/dashboard/xp/action-configs/ directory
• GrantRoleConfig.tsx: Use existing RoleSelector for role selection
• RemoveRoleConfig.tsx: Use existing RoleSelector for role selection
• SendDmConfig.tsx: Message content field (placeholder for WYSIWYG), format selector
• AnnounceConfig.tsx: ChannelSelector for target channel, message content field, format selector
• XpBonusConfig.tsx: Numeric input for bonus XP amount
• AddReactionConfig.tsx: Emoji picker or text input for reaction
• NickPrefixConfig.tsx: Text input for prefix string, preview of result
• WebhookConfig.tsx: Webhook URL input, JSON payload template field
• Create factory function getActionConfigComponent(type) to render the appropriate config

Task 4: Implement Action List with Drag-and-Drop

Build the ordered action list with drag-and-drop reordering capability.

• Install @dnd-kit/core and @dnd-kit/sortable packages
• Create web/src/components/dashboard/xp/ActionList.tsx
• Implement DndContext and SortableContext wrapper
• Make ActionCard a sortable item using useSortable hook
• Handle onDragEnd to reorder actions in the config
• Wire reordering to updateDraftConfig to persist order changes
• Add "Add Action" button at the bottom of the list

Task 5: Create Default Actions Section

Implement the default actions section for actions that fire on every level-up.

• Create web/src/components/dashboard/xp/DefaultActionsSection.tsx
• Reuse ActionList component for the default actions array
• Add section header explaining that these actions fire on every level-up
• Wire to reputation.levelUpActions.defaultActions config path

🤖 Prompt for AI agents

Build the core per-level action editor components, including level selection,
individual action cards, type-specific configuration fields, drag-and-drop
reordering, and the default actions section.

- Create `web/src/components/dashboard/xp/LevelSelector.tsx`: a
dropdown/combobox that lets users select existing configured levels or type a
custom level number. Display badge indicators on levels that have actions
configured. Include "Default Actions" as a special selectable option.
- Create `web/src/components/dashboard/xp/ActionCard.tsx`: a bordered card
component with a type selector dropdown (all 8 action types), a drag handle
element, a delete button, and a slot to render type-specific config fields.
- Create the `web/src/components/dashboard/xp/action-configs/` directory and
implement one component per action type:
- `GrantRoleConfig.tsx` and `RemoveRoleConfig.tsx`: use the existing
`RoleSelector` component
- `SendDmConfig.tsx`: message content field (WYSIWYG placeholder) and format
selector
- `AnnounceConfig.tsx`: `ChannelSelector` for target channel, message content
field, format selector
  - `XpBonusConfig.tsx`: numeric input for bonus XP amount
  - `AddReactionConfig.tsx`: emoji picker or text input for reaction
- `NickPrefixConfig.tsx`: text input for prefix string with a preview of result
  - `WebhookConfig.tsx`: webhook URL input and JSON payload template field
- Add a factory function `getActionConfigComponent(type)` that returns the
appropriate config component based on the `LevelActionType`.
- Install `@dnd-kit/core` and `@dnd-kit/sortable`. Create
`web/src/components/dashboard/xp/ActionList.tsx` wrapping `DndContext` and
`SortableContext`. Use the `useSortable` hook in `ActionCard`. Handle
`onDragEnd` to reorder actions and wire to `updateDraftConfig`. Include an "Add
Action" button at the bottom.
- Create `web/src/components/dashboard/xp/DefaultActionsSection.tsx`: reuse
`ActionList`, add a section header explaining these actions fire on every
level-up, and wire to `reputation.levelUpActions.defaultActions` config path.

Phase 3: Message Editing & Preview

Integrate message editing components and implement the level-up simulation preview.

Task 1: Integrate Message Editor with Variable Picker

Connect the WYSIWYG markdown editor and add variable picker functionality to message-based actions.

• Create web/src/components/dashboard/xp/MessageEditor.tsx wrapper component
• Integrate WYSIWYG editor component (#370) for message content editing
• Implement variable picker button bar with available variables: {user}, {level}, {oldLevel}, {xp}, {server}, {channel}
• Clicking a variable inserts it at cursor position in the editor
• Support both DM and announcement message contexts

Task 2: Implement Format Selector with Embed Builder

Add format selection (text/embed/both) and embed builder integration for message actions.

• Create web/src/components/dashboard/xp/FormatSelector.tsx
• Implement radio/segmented control for format options: "Text Only", "Embed Only", "Both"
• Conditionally render WYSIWYG editor based on format selection (text content)
• Conditionally render embed builder (#371) based on format selection (embed content)
• When "Both" selected, show both editors in a stacked layout
• Store format choice and respective content in action config

Task 3: Implement Level-Up Simulation Preview

Build the test/preview functionality to simulate a level-up and show what would happen.

• Create web/src/components/dashboard/xp/SimulationPreview.tsx
• Add level input to select which level-up to simulate (e.g., "Level 4 → 5")
• Display preview panel showing:
  • Roles that would be granted (with role badges)
  • Roles that would be removed (with role badges)
  • Messages that would be sent (rendered with variable substitution using sample data)
  • Channels that would receive announcements
• Use existing Discord-style message rendering if available, or create simple preview cards
• Include "Run Simulation" button that triggers preview computation

Task 4: Wire Page to Config Save/Load

Ensure the complete page integrates with the config system for persistence.

• Verify all components use updateDraftConfig from useConfigContext
• Ensure config changes are properly tracked for the save confirmation flow
• Test that PATCH calls correctly send reputation.levelUpActions.* paths
• Handle loading states with skeleton UI while config fetches
• Handle error states with appropriate error messages

Task 5: Add Component and Integration Tests

Create tests for the level-up actions configuration page.

• Create web/tests/components/dashboard/xp/ test directory
• Add tests for GlobalTogglesSection - toggle interactions update draft config
• Add tests for ActionCard - type selection, config field rendering, delete action
• Add tests for ActionList - add action, verify drag-drop setup
• Add integration test for the full page - render with mocked config, verify sections appear
• Follow existing test patterns: vi.stubGlobal('fetch'), minimalConfig fixture, fireEvent/userEvent for interactions

🤖 Prompt for AI agents

Integrate message editing with the WYSIWYG editor and embed builder, implement
the level-up simulation preview, wire the full page to the config system, and
add tests.

- Create `web/src/components/dashboard/xp/MessageEditor.tsx`: wrap the WYSIWYG
editor component (`#370`) and add a variable picker button bar with variables
`{user}`, `{level}`, `{oldLevel}`, `{xp}`, `{server}`, `{channel}`. Each
variable button inserts the variable at the cursor position. Support both DM and
announcement message contexts.
- Create `web/src/components/dashboard/xp/FormatSelector.tsx`: implement a
radio/segmented control with options "Text Only", "Embed Only", and "Both".
Conditionally render the WYSIWYG editor for text content and the embed builder
(`#371`) for embed content. When "Both" is selected, show both editors in a
stacked layout. Store the format choice and respective content in the action
config.
- Create `web/src/components/dashboard/xp/SimulationPreview.tsx`: add a level
input to select which level-up to simulate (e.g., "Level 4 → 5"). Display a
preview panel showing roles granted (with role badges), roles removed (with role
badges), messages sent (with variable substitution using sample data), and
channels receiving announcements. Use Discord-style message rendering if
available, otherwise create simple preview cards. Include a "Run Simulation"
button to trigger preview computation.
- Verify all components use `updateDraftConfig` from `useConfigContext`. Ensure
config changes are tracked for the save confirmation flow and that PATCH calls
correctly send `reputation.levelUpActions.*` paths. Add skeleton UI for loading
states and error messages for error states.
- Create `web/tests/components/dashboard/xp/` test directory. Add tests for
`GlobalTogglesSection` (toggle interactions update draft config), `ActionCard`
(type selection, config field rendering, delete action), and `ActionList` (add
action, verify drag-drop setup). Add a full-page integration test that renders
with a mocked config and verifies all sections appear. Follow existing test
patterns: `vi.stubGlobal('fetch')`, `minimalConfig` fixture,
`fireEvent`/`userEvent` for interactions.

Research

The web dashboard uses Next.js App Router with a sidebar navigation (web/src/components/layout/sidebar.tsx) containing primary and secondary nav arrays. Configuration is managed through ConfigProvider/useConfigContext with a draft/saved pattern and leaf-path PATCH API calls. The existing XP/leveling config (ReputationConfig) lives in Settings → Onboarding & Growth and only supports basic fields (xpPerMessage, levelThresholds, roleRewards as a simple level→roleId map). Reusable components include RoleSelector, ChannelSelector, and SettingsFeatureCard. No drag-and-drop library exists yet. WYSIWYG editor (#370) and embed builder (#371) are dependencies assumed to be available.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Set up the foundation for the XP & Leveling dashboard page, including
navigation, routing, config type extensions, and the global toggles UI section.

- In `web/src/components/layout/sidebar.tsx`, add an "XP & Leveling" entry to
the `primaryNav` array with route `/dashboard/xp` and an appropriate
lucide-react icon (e.g., `TrendingUp` or `Award`). Position it after Members and
before Tickets.
- Create `web/src/app/dashboard/xp/page.tsx` as the main Next.js App Router page
component. Create the `web/src/components/dashboard/xp/` directory. Implement a
`LevelUpActionsPage` component that consumes the `ConfigProvider` context via
`useConfigContext` and renders a basic page layout with a heading and
description.
- In `web/src/types/config.ts`:
- Add a `LevelActionType` union type: `'grantRole' | 'removeRole' | 'sendDm' |
'announce' | 'xpBonus' | 'addReaction' | 'nickPrefix' | 'webhook'`
- Add a `LevelAction` interface with `id`, `type`, and type-specific config
fields
- Add a `LevelUpActionsConfig` interface with fields: `enabled`, `stackRoles`,
`removeRolesOnLevelDown`, `defaultActions`, and `levelActions` (keyed by level
number)
- Extend `ReputationConfig` with an optional `levelUpActions:
LevelUpActionsConfig` field
- Update `src/modules/reputationDefaults.js` to include default values for the
newly added fields.
- Create `web/src/components/dashboard/xp/GlobalTogglesSection.tsx` with three
toggles using the existing `ToggleSwitch` pattern: enable/disable the level-up
actions feature, "Stack roles vs replace (highest only)", and "Remove roles on
level down". Wire each toggle to `updateDraftConfig` targeting
`reputation.levelUpActions.*` paths.
===============================================================================

Task: 2

Build the core per-level action editor components, including level selection,
individual action cards, type-specific configuration fields, drag-and-drop
reordering, and the default actions section.

- Create `web/src/components/dashboard/xp/LevelSelector.tsx`: a
dropdown/combobox that lets users select existing configured levels or type a
custom level number. Display badge indicators on levels that have actions
configured. Include "Default Actions" as a special selectable option.
- Create `web/src/components/dashboard/xp/ActionCard.tsx`: a bordered card
component with a type selector dropdown (all 8 action types), a drag handle
element, a delete button, and a slot to render type-specific config fields.
- Create the `web/src/components/dashboard/xp/action-configs/` directory and
implement one component per action type:
- `GrantRoleConfig.tsx` and `RemoveRoleConfig.tsx`: use the existing
`RoleSelector` component
- `SendDmConfig.tsx`: message content field (WYSIWYG placeholder) and format
selector
- `AnnounceConfig.tsx`: `ChannelSelector` for target channel, message content
field, format selector
  - `XpBonusConfig.tsx`: numeric input for bonus XP amount
  - `AddReactionConfig.tsx`: emoji picker or text input for reaction
- `NickPrefixConfig.tsx`: text input for prefix string with a preview of result
  - `WebhookConfig.tsx`: webhook URL input and JSON payload template field
- Add a factory function `getActionConfigComponent(type)` that returns the
appropriate config component based on the `LevelActionType`.
- Install `@dnd-kit/core` and `@dnd-kit/sortable`. Create
`web/src/components/dashboard/xp/ActionList.tsx` wrapping `DndContext` and
`SortableContext`. Use the `useSortable` hook in `ActionCard`. Handle
`onDragEnd` to reorder actions and wire to `updateDraftConfig`. Include an "Add
Action" button at the bottom.
- Create `web/src/components/dashboard/xp/DefaultActionsSection.tsx`: reuse
`ActionList`, add a section header explaining these actions fire on every
level-up, and wire to `reputation.levelUpActions.defaultActions` config path.
===============================================================================

Task: 3

Integrate message editing with the WYSIWYG editor and embed builder, implement
the level-up simulation preview, wire the full page to the config system, and
add tests.

- Create `web/src/components/dashboard/xp/MessageEditor.tsx`: wrap the WYSIWYG
editor component (`#370`) and add a variable picker button bar with variables
`{user}`, `{level}`, `{oldLevel}`, `{xp}`, `{server}`, `{channel}`. Each
variable button inserts the variable at the cursor position. Support both DM and
announcement message contexts.
- Create `web/src/components/dashboard/xp/FormatSelector.tsx`: implement a
radio/segmented control with options "Text Only", "Embed Only", and "Both".
Conditionally render the WYSIWYG editor for text content and the embed builder
(`#371`) for embed content. When "Both" is selected, show both editors in a
stacked layout. Store the format choice and respective content in the action
config.
- Create `web/src/components/dashboard/xp/SimulationPreview.tsx`: add a level
input to select which level-up to simulate (e.g., "Level 4 → 5"). Display a
preview panel showing roles granted (with role badges), roles removed (with role
badges), messages sent (with variable substitution using sample data), and
channels receiving announcements. Use Discord-style message rendering if
available, otherwise create simple preview cards. Include a "Run Simulation"
button to trigger preview computation.
- Verify all components use `updateDraftConfig` from `useConfigContext`. Ensure
config changes are tracked for the save confirmation flow and that PATCH calls
correctly send `reputation.levelUpActions.*` paths. Add skeleton UI for loading
states and error messages for error states.
- Create `web/tests/components/dashboard/xp/` test directory. Add tests for
`GlobalTogglesSection` (toggle interactions update draft config), `ActionCard`
(type selection, config field rendering, delete action), and `ActionList` (add
action, verify drag-drop setup). Add a full-page integration test that renders
with a mocked config and verifies all sections appear. Follow existing test
patterns: `vi.stubGlobal('fetch')`, `minimalConfig` fixture,
`fireEvent`/`userEvent` for interactions.

💡 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!