State Management
Relevant source files
The following files were used as context for generating this wiki page:
State management in DevUtils is primarily handled using Zustand, a small, fast, and scalable barebones state-management solution. The architecture leverages specific stores to manage distinct domains of the application, such as user interface tabs, global application settings, and tool-specific statistics. Most stores utilize the persist middleware to ensure that user data and configurations remain available across application restarts.
Sources: lib/tab-store.ts, lib/settings-store.ts, lib/deploy-stats-store.ts
Core Store Architecture
The application defines specialized stores to manage different aspects of the environment. Each store is defined with a TypeScript interface and instantiated using Zustand's create function.
Tab Management
The useTabStore manages the multi-tab interface, allowing users to open, switch, and close different developer tools. It tracks the list of active tabs, the currently selected tab ID, and persists this state under the name "swiss-blade-tabs".
| Action | Description |
|---|---|
addTab | Creates a new tab with a unique ID based on toolId and a timestamp. |
openOrFocusTab | Checks if a tool is already open; if so, focuses it, otherwise creates a new tab. |
removeTab | Deletes a tab and updates the active tab focus to the next available one. |
updateTabState | Persists internal state specific to a tool instance within the tab object. |
Sources: lib/tab-store.ts:14-68
Global Settings
The useSettingsStore handles application-wide configurations, such as sidebar visibility and "Boss Mode" triggers. This store is persisted as "swiss-blade-settings".
Sources: lib/settings-store.ts:4-29
Tool-Specific State Persistence
Certain tools maintain their own persistent history or statistics to enhance the user experience.
Deploy Roulette Statistics
The useDeployStatsStore tracks the results of the "Deploy Roulette" tool, maintaining a history of spins and overall survival rates. It limits the history log to the 10 most recent results.
| Field | Type | Description |
|---|---|---|
history | SpinResult[] | Array of the last 10 spin results including IDs and timestamps. |
stats | DeployStats | Object containing total counts of deploys and rickrolls. |
directory | string | The configured working directory for deployment commands. |
deployCommand | string | The CLI command string to execute (e.g., npm run deploy). |
Sources: lib/deploy-stats-store.ts:4-30
Ephemeral Component State
While global state is handled by Zustand, individual tools like JwtToothpick and BossMode utilize React's useState and useRef for high-frequency updates or local UI logic that does not require persistence.
State Data Flow: Boss Mode Example
The "Boss Mode" feature demonstrates the interaction between global store state and local component behavior. The component subscribes to the useSettingsStore to listen for a global "panic key."
Summary
The state management system in DevUtils combines centralized Zustand stores for persistent application structure (tabs, settings, stats) with localized React state for tool-specific operations. This hybrid approach ensures that the application remains responsive while preserving the user's workspace and configuration across sessions.
Sources: lib/tab-store.ts, lib/settings-store.ts, lib/deploy-stats-store.ts