Modals & Dialogs Flow

Relevant source files

The following files were used as context for generating this wiki page:

• packages/app/src/app/components/command-palette-modal.tsx
• packages/app/src/app/components/confirm-modal.tsx
• packages/app/src/app/components/create-remote-workspace-modal.tsx
• packages/app/src/app/components/rename-session-modal.tsx
• packages/app/src/app/components/command-modal.tsx
• packages/app/src/app/components/command-run-modal.tsx
• packages/app/src/app/app.tsx

Introduction

The Modals & Dialogs system in OpenWork provides a critical interaction layer for task execution, workspace management, and user confirmation. These components are implemented using SolidJS and typically utilize a consistent UI pattern involving fixed positioning, backdrop blurs, and localized internationalization via the i18n module.

The system handles diverse workflows, ranging from simple confirmations to complex data entry for remote workspaces and command definitions. Most modals are managed as controlled components, receiving visibility state and callback handlers from the main application state or specialized stores like command-state.ts.

Core Modal Architecture

Modals in OpenWork follow a reactive pattern where visibility is controlled by a boolean prop (usually open). They are rendered inside a Show component to ensure they only exist in the DOM when necessary. Standard visual elements include a backdrop with bg-gray-1/60 and backdrop-blur-sm, and a central container with bg-gray-2 and shadow-2xl.

General UI Structure

Component	Primary Purpose	Key Props
ConfirmModal	Generic binary choice (confirm/cancel)	title, message, variant
CommandModal	Creating/Editing workspace and global commands	name, template, onSave
CommandRunModal	Gathering arguments before executing a command	command, details, onRun
CommandPaletteModal	Global search for commands, files, and sessions	groups, query, setQuery
RenameSessionModal	Updating the title of an existing run	title, canSave, onSave
CreateRemoteWorkspaceModal	Connecting to OpenWork servers	onConfirm, submitting

Sources: [confirm-modal.tsx:17-25], [command-modal.tsx:10-24], [command-run-modal.tsx:9-16], [app.tsx:1955-2015]

Component Hierarchy and Flow

The following diagram illustrates how the App component manages and renders various modal types based on application state.

Specialized Interaction Flows

Command Management Flow

The CommandModal and CommandRunModal work together to define and execute tasks. The system includes a sanitization step for command names to ensure filesystem and URL compatibility.

• Sanitization: Names are transformed using sanitizeCommandName to remove slashes and non-alphanumeric characters, replacing spaces with hyphens.
• Overriding: If a user attempts to save a command with an existing name, the CommandModal triggers an internal ConfirmModal to warn the user.
• Arguments: Commands requiring details (detected via the template regex /\$(ARGUMENTS|\d+)/i) will trigger the CommandRunModal before execution.

Command Palette and Search

The CommandPaletteModal acts as a central hub for navigation and action. It organizes items into PaletteGroup objects (e.g., "Commands", "Recent", "Sessions").

• Keyboard Navigation: Supports ArrowDown, ArrowUp, and Enter for selection.
• Fuzzy Filtering: It receives a query and setQuery prop to handle real-time filtering of provided groups.
• Dynamic Content: Groups are generated in app.tsx based on the current view and active workspace.

Sources: [command-palette-modal.tsx:15-35], [app.tsx:1350-1375]

Confirmation Dialogs

The ConfirmModal is a reusable utility for high-stakes actions like deleting sessions or overriding commands.

Variant	Visual Style	Common Use Case
danger	Red highlights/buttons	Deleting a workspace or session
warning	Amber highlights/buttons	Overriding an existing command
info	Blue highlights/buttons	General notifications

Workspace and Session Modals

Remote Workspace Setup

The CreateRemoteWorkspaceModal handles the complex state of connecting to a remote OpenWork server. It manages multiple input fields and a submitting state to disable buttons during network requests.

• Fields: Host URL, Client Token, and Friendly Name.
• Validation: Ensures the URL is present before allowing submission.

Sources: [create-remote-workspace-modal.tsx:7-24]

Session Renaming

A lightweight modal used to update session metadata. It validates the new title against the current one via the canSave prop to prevent unnecessary API calls.

Sources: [rename-session-modal.tsx:7-15]

Summary

Modals in OpenWork are strictly controlled components that encapsulate specific UI workflows. By utilizing shared state in App.tsx and standardized components like ConfirmModal, the application maintains a consistent look and feel while handling complex logic for workspace management, command execution, and search functionality.

Sources: [app.tsx:1955-2015], [command-palette-modal.tsx:38-50]