Boss Mode
Relevant source files
The following files were used as context for generating this wiki page:
Boss Mode is a specialized privacy and productivity utility within the DevUtils suite designed to provide users with an instant "panic" mechanism. Its primary purpose is to overlay a fake, professional-looking Excel spreadsheet onto the application interface when a user-defined shortcut is triggered, effectively hiding development activities from bypassers.
The feature is integrated into the broader tool ecosystem, allowing it to be active across different tabs while maintaining global listener capabilities. It includes a dedicated configuration interface for managing the activation state, custom hotkeys, and testing the visual decoy.
Sources: components/tools/boss-mode.tsx:103-118, messages/en.json:206-209
System Architecture and Logic
The Boss Mode system consists of two primary functional parts: the configuration interface (BossMode component) and the global event listener (BossModeListener). Both components interface with a centralized settings store to synchronize the feature's operational state and the specific "panic key" used for activation.
Operational Workflow
Boss Mode operates by monitoring keyboard events at the window level. When the active state is enabled in the settings, the system listens for a keydown event matching the stored panicKey. Upon detection, it toggles a full-screen decoy overlay.
The diagram above illustrates the logic flow from enabling the feature to triggering and dismissing the decoy screen.
Sources: components/tools/boss-mode.tsx:120-141, components/boss-mode-listener.tsx:61-84
Key Components
| Component | File Path | Description |
|---|---|---|
BossMode | components/tools/boss-mode.tsx | Provides the UI for enabling/disabling the tool and recording custom panic keys. |
BossModeListener | components/boss-mode-listener.tsx | A background component that renders the full-screen decoy when the hotkey is pressed. |
spreadsheetData | components/tools/boss-mode.tsx | Static dataset representing fake Q1-Q4 revenue used for the decoy display. |
monthlyData | components/tools/boss-mode.tsx | Static dataset representing monthly sales breakdowns for the decoy display. |
Sources: components/tools/boss-mode.tsx:32-75, components/boss-mode-listener.tsx:55-58
Configuration and Customization
Users manage Boss Mode through a dedicated settings card that controls the global state of the listener and the specific key code used to trigger the overlay.
Panic Key Recording
The system supports dynamic key recording. When the "Change" button is clicked, the component enters a recording state where it captures the next KeyboardEvent.key or KeyboardEvent.code and updates the settings-store.
The sequence diagram shows the interaction between the user interface and the state management during key configuration.
Sources: components/tools/boss-mode.tsx:144-159
Configurable Options
| Option | Type | Default Behavior | Description |
|---|---|---|---|
isActive | Boolean | Disabled | Controls whether the global window listener is active. |
panicKey | String | System Dependent | The key identifier used to trigger the decoy. |
decoyVisible | Boolean | false | Internal state controlling the visibility of the overlay. |
Sources: components/tools/boss-mode.tsx:107-111, messages/en.json:214-222
Visual Decoy Implementation
The decoy is designed to mimic a professional spreadsheet application (e.g., Microsoft Excel) to ensure visual authenticity.
UI Elements
The decoy overlay includes several mock interface elements:
- Green Ribbon/Header: Displays "Q4 Revenue Analysis - Excel" and an "AutoSave On" badge.
- Ribbon Tabs: Mock navigation for "Home", "Insert", "Page Layout", "Formulas", and "Data".
- Formula Bar: Displays a fake formula (e.g.,
=SUM(B2:B13)) for cell A1. - Spreadsheet Grids: Two tables containing revenue and monthly breakdown data.
- Status Bar: Displays a fake summary including Sum, Average, and Count.
Sources: components/tools/boss-mode.tsx:288-348, components/boss-mode-listener.tsx:116-170
Dismissal Logic
Once the decoy is active, it remains on screen until the user dismisses it. Dismissal is triggered by:
- Mouse Click: Clicking anywhere on the overlay calls the
hideDecoyfunction. - Keyboard Input: Pressing any key while the decoy is visible triggers the dismissal via the window listener.
Sources: components/tools/boss-mode.tsx:125-130, components/boss-mode-listener.tsx:66-70
Implementation Snippets
Listening for the Panic Key
The following logic handles the global key detection:
useEffect(() => {
if (!bossMode.isActive || isRecordingKey) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (decoyVisible) {
hideDecoy();
return;
}
if (e.key === bossMode.panicKey || e.code === bossMode.panicKey) {
e.preventDefault();
showDecoy();
}
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [bossMode.isActive, bossMode.panicKey, decoyVisible]);
Sources: components/tools/boss-mode.tsx:120-141
Localization Support
Boss Mode is fully localized, supporting multiple languages through JSON translation files.
"bossMode": {
"name": "Boss Mode Decoy",
"title": "Boss Mode Decoy",
"subtitle": "Instantly overlay a fake Excel spreadsheet when the boss walks by",
"panicKey": "Panic Key",
"activated": "Boss Mode Activated!"
}
Sources: messages/en.json:206-222, messages/zh.json:206-222
Summary
Boss Mode is a specialized privacy tool within DevUtils that leverages global window event listeners and a synchronized settings store to provide a reactive UI overlay. By simulating a complex spreadsheet environment, it provides a functional safety net for developers, managed through a straightforward configuration interface that supports custom keybindings and localization.