Stage UI

Stage UI (the browser-based testing interface) provides a Discord-like interface for interactive bot testing. Send messages, run commands, and watch your bot respond in real-time without touching Discord's servers.

Opening Stage UI

Stage UI opens automatically when you start mock mode:

npx robo dev --mock

You should see the mock server start in your terminal, followed by a browser window opening to the Stage UI. If the browser does not open, navigate to http://localhost:3000/mock/stage manually.

The Interface

Stage UI mirrors Discord's layout:

Full Stage UI interface showing the Discord-like layout with a server list on the far left, a channel list and user area beside it, a header bar with channel name and toolbar, a central message area with bot conversation, and a toggleable member list on the right, all above a bottom bar containing playback controls and a status bar

FocusLabel the major areas: Server List, Channel List, User Area, Header, Message Area, Member List, Playback Controls, Status BarZoom100%NotesShow the interface in live mode with a connected bot. The User Area is at the bottom of the channel list sidebar showing the current user's avatar and name. The Status Bar at the bottom right shows event count, latency, bot connection status, and session ID. The playback controls at the bottom left show live/playback mode toggle and event count.

Server List (far left) - Test guilds and Home button for DMs
Channel List - Text, voice, forum, and thread channels grouped by category
User Area (below channels) - Shows current user, click to switch between users
Header (top) - Channel name, member toggle, thread toggle, search, and notification icons
Message Area (center) - Conversation view with message input, autocomplete, and context menus
Member List (right, toggleable) - Users in the current guild grouped by role
Playback Controls (bottom left) - Live/playback mode toggle, transport controls, and timeline scrubber
Status Bar (bottom right) - Event count, latency, bot status, and session ID

Sending Messages

Type in the message input and press Enter. Messages appear from the currently selected user.

Switch Users

Click your avatar in the User Area (bottom of the channel list) to open the user switcher. Select a different user to send messages as that person. This lets you test multi-user scenarios like:

One user sends a message, bot responds
Different user reacts, triggers another action
Admin user runs moderation command

Stage UI User Area with the user switcher popout open, showing a list of multiple test users with different avatars to select from

FocusThe user switcher popout showing available test usersZoom100%NotesClick the avatar in the User Area to open the user switcher. Show at least 3 test users in the popout list with different usernames and avatars. One user should be highlighted as currently selected.

Message Actions

Right-click or hover over messages for actions:

Add Reaction - Test reaction handlers
Reply - Create message references
Pin/Unpin - Test pin functionality
Delete - Remove messages

Running Commands

Press Ctrl/Cmd + K to focus the input with a / prefix. Autocomplete shows available commands.

Stage UI showing the slash command autocomplete dropdown above the message input, listing available bot commands with their descriptions, or a modal dialog that appeared after a bot interaction

FocusThe command autocomplete dropdown or a modal interaction in the message areaZoom100%NotesShow the message input with a '/' typed and the autocomplete popup listing several commands. Alternatively, show a modal form that appeared after clicking a button or running a command. Either screenshot demonstrates the interactive testing capabilities.

Command Options

Slash command options appear as you type:

Type the command name (e.g., /ban)
Tab or click to select options
Enter values for required options
Press Enter to execute

Context Menus

Right-click users or messages to access context menu commands:

User Context - Commands registered as user context menus
Message Context - Commands registered as message context menus

Interacting with Components

When your bot sends messages with buttons, select menus, or other components:

Click buttons directly to trigger interactions
Open select menus and choose options
Fill modal forms when they appear

Component interactions are recorded and visible in DevTools.

Stage UI message area showing a bot message with clickable action row buttons and an open select menu dropdown displaying selectable options

FocusInteractive components in the message area: buttons and an open select menuZoom100%NotesShow a bot message with at least two buttons (e.g., Confirm and Cancel with different styles) and a select menu that is open showing dropdown options. The components should look like Discord's native button and select menu styling.

Voice Channels

Click a voice channel to simulate joining. Visual indicators show:

Which users are in voice
Speaking state
Mute/deafen status

Voice Gateway handles connection handshakes. Actual audio streaming is not simulated.

Voice channel in the Stage UI sidebar showing connected users with speaking, mute, and deafen indicators, plus the voice connection status card at the bottom

FocusVoice channel with connected users and their voice state indicatorsZoom100%NotesShow a voice channel in the channel list with 2-3 users connected. Include visual indicators for speaking (green outline), self-muted (microphone icon), and deafened (headphone icon). Show the voice connection card at the bottom of the sidebar.

Forum Channels

Stage UI renders forum channels with a dedicated post-browsing view. Click a forum channel in the channel list to see existing posts and create new ones. Forum posts appear as threaded conversations within the forum layout.

DM Channels

Click the Home button at the top of the server list to navigate to the DM view. This shows a friends list with online/all/pending tabs and a sidebar of direct message conversations. Select a conversation to open a one-on-one message view.

Stage UI showing either the forum channel post list view with post titles and preview text, or the Home/DM view with friends list tabs and direct message conversation sidebar

FocusForum channel post browsing view or the DM/Home view with friends listZoom100%NotesShow either: (1) A forum channel with several posts listed showing titles, authors, and reply counts, OR (2) The Home/DM view with the friends list showing online/all/pending tabs and a sidebar of DM conversations. Either screenshot demonstrates non-standard channel types.

Emoji Picker

An emoji picker is available when adding reactions to messages and within the DevTools Emojis tab. Click the reaction icon on a message to open the picker, browse categories, and select an emoji to react with.

Channel Management

Create and reorder channels and categories directly in Stage UI. Right-click or use the channel list header to create new text, voice, or forum channels and categories. Drag and drop channels to reorder them within or across categories using the built-in sortable interface.

Testing Activities

Stage UI provides a complete environment for testing Discord activities locally.

Launching Activities

Click the activities icon in the message input toolbar to open the Activities Picker. Select an activity to launch it in the current channel. The activity loads in an iframe within Stage UI, connected to the mock RPC host.

Stage UI showing the Activities Picker with a list of available activities to launch, and an activity running in an iframe within the message area

FocusThe Activities Picker and the embedded activity iframe viewZoom100%NotesShow the Activities Picker open with at least one activity listed. If possible, also show an activity loaded in the iframe area. The activity view replaces the message area when active.

Activity View

When an activity is running, it appears as an iframe embedded in the channel view. A control bar at the bottom provides activity controls.

Minimize -- Click the Minimize button in the control bar to enter PIP (picture-in-picture) mode. The activity shrinks to a small floating window that you can drag between corners while you continue interacting with channels.
Restore -- Hover over the minimized activity and click the back arrow button to restore it to full size.
Close -- Click the Leave Activity button in the control bar to stop the activity.

When the activity's auth mode is set to manual (via DevTools), an OAuth2-style consent modal appears when the activity calls AUTHORIZE. Approve or deny specific scopes to test different auth flows.

When the activity triggers START_PURCHASE, a purchase confirmation modal appears in Stage UI. Approve or deny the purchase to test in-app purchase flows and verify your activity handles both outcomes.

Recording and Playback

Stage UI records all events for review:

Playback Controls

Control	Action
Live / Playback	Switch between live recording and playback mode
Skip to Start	Jump to the beginning of the recording
Rewind	Jump back 5 seconds (also `←` key)
Play / Pause	Toggle playback (also `Space` key)
Fast Forward	Jump forward 5 seconds (also `→` key)
Skip to End	Jump to the end of the recording
Timeline	Scrub through events with event markers
Speed	Select playback speed (0.5x, 1x, 2x, 4x)

Stage UI playback controls bar in playback mode showing transport buttons (skip to start, rewind, play/pause, fast forward, skip to end), a timeline scrubber with color-coded event markers, and a speed selector

FocusThe playback controls bar with transport buttons, timeline scrubber, and speed selectorZoom100%NotesSwitch to playback mode to show the full playback controls bar. The timeline scrubber should have colored markers representing different event types. Show the speed selector with the current speed visible (e.g., 1x).

Use Cases

Debug timing issues - See exact event order
Share reproductions - Export recordings for bug reports
Demo features - Replay interactions for documentation

Keyboard Shortcuts

Shortcut	Action
`Ctrl/Cmd + K`	Focus message input with `/`
`Ctrl/Cmd + Shift + D`	Toggle DevTools
`Ctrl/Cmd + Shift + L`	Toggle Logs panel
`Space`	Play/pause playback
`←`	Seek backward 5s
`→`	Seek forward 5s
`Escape`	Close modals/dropdowns

Shortcuts are disabled when typing in input fields.

Connection Status

An overlay shows connection state when not connected:

Connecting - Initial connection or reconnecting (shows attempt count)
Disconnected - Connection lost, click Reconnect to retry
Session Invalid - Session no longer exists (server may have restarted), check your terminal for the new Stage URL
Connection Lost - Failed after multiple retry attempts, click Retry Connection

The overlay can be collapsed to a small pill at the bottom of the screen. When connected, no overlay is shown.