The Settings UI provides a centralized interface for managing system-wide configurations, account security, data lifecycle policies, and diagnostic tools. It is implemented as a modular sub-application within the React frontend, utilizing a sidebar-based layout to organize various functional domains.
The settings module is structured using a parent layout component that manages navigation state and renders sub-pages via a React Router Outlet ui/src/pages/settings/Settings.tsx83 The navigation menu is defined as a static list of tabs including Account, Appearance, SSL Provider, Persistence, Diagnostics, and About ui/src/pages/settings/Settings.tsx13-20
Settings are persisted in a specialized collection named settings in the PocketBase backend internal/domain/settings.go7 Each record in the settings collection uses a unique name as a key and a JSON content field for configuration data ui/src/domain/settings.ts13-16 The frontend uses a repository pattern to fetch and save these typed configurations ui/src/repository/settings.ts28-97
Settings Entity Mapping
Sources: ui/src/domain/settings.ts3-59 ui/src/repository/settings.ts15-26 ui/src/repository/settings.ts28-97 internal/domain/settings.go15-21
The SSL Provider settings manage the global default Certificate Authority (CA) used for ACME certificate issuance.
SettingsSSLProvider ui/src/pages/settings/SettingsSSLProvider.tsx18-55useSSLProviderSettingsStore (Zustand) to synchronize with the backend ui/src/pages/settings/SettingsSSLProvider.tsx23-25CA_PROVIDERS.LETSENCRYPT ui/src/repository/settings.ts71-76The UI dynamically renders configuration forms based on the selected provider ui/src/pages/settings/SettingsSSLProvider.tsx82-107:
ACMECA) ui/src/pages/settings/SettingsSSLProvider.tsx84-105Key ID and HMAC Key (e.g., Google Trust Services, SSL.com).timeout value for ACME operations, defaulting to 0 (no timeout) if not specified internal/domain/settings.go45-47Sources: ui/src/pages/settings/SettingsSSLProvider.tsx1-113 ui/src/domain/settings.ts44-51 ui/src/repository/settings.ts71-76 internal/domain/settings.go25-29
The Persistence settings configure the lifecycle of data within the database and alerting thresholds. This is managed via the SettingsPersistence page.
certificatesWarningDaysBeforeExpire threshold. Certificates reaching this window trigger notifications. Defaults to 21 days ui/src/repository/settings.ts81The system automates the cleanup of historical data based on these settings ui/src/domain/settings.go31-35:
workflowRunsRetentionMaxDays determines how long execution logs and results are kept internal/domain/settings.go34certificatesRetentionMaxDays manages the deletion of certificates that have passed their validity period internal/domain/settings.go33Sources: ui/src/domain/settings.ts54-59 ui/src/repository/settings.ts78-84 internal/domain/settings.go52-69
The Diagnostics page provides real-time visibility into the backend's operational state and background task health.
listLogs from the system repository. It supports log levels (Info, Warn, Error) and expands JSON metadata.Sources: ui/src/pages/settings/Settings.tsx18
The Appearance settings allow users to customize the visual experience, particularly the Workflow Designer.
Users can set a global default for the workflow graph layout, which is applied when initializing the WorkflowDesigner ui/src/pages/workflows/WorkflowDetailDesign.tsx143-147:
FlowLayoutDefault.HORIZONTAL_FIXED_LAYOUT ui/src/pages/workflows/WorkflowDetailDesign.tsx144FlowLayoutDefault.VERTICAL_FIXED_LAYOUT ui/src/pages/workflows/WorkflowDetailDesign.tsx146The Toolbar component provides interactive controls for the visual editor, including:
STATE_MOUSE_FRIENDLY_SELECT) and pointer mode ui/src/components/workflow/designer/Toolbar.tsx72-80Minimap plugin ui/src/components/workflow/designer/Toolbar.tsx147-158Sources: ui/src/pages/workflows/WorkflowDetailDesign.tsx140-151 ui/src/components/workflow/designer/Toolbar.tsx24-162 ui/src/components/workflow/designer/Designer.tsx118-127
Implemented in SettingsAccount.tsx, this section handles identity and security with mandatory re-authentication for sensitive changes.
username). On success, the current session is cleared and the user is redirected to login ui/src/pages/settings/SettingsAccount.tsx52-61authWithPassword using the current password before applying changes to the administrator record ui/src/pages/settings/SettingsAccount.tsx151-161Sources: ui/src/pages/settings/SettingsAccount.tsx1-210
The Presets system allows users to define reusable templates for notifications and scripts, reducing duplication across workflows.
Templates define reusable subject and message structures ui/src/domain/settings.ts25-31 They are stored under SETTINGS_NAMES.NOTIFY_TEMPLATE ui/src/domain/settings.ts5
Templates define reusable shell commands ui/src/domain/settings.ts35-40 They are stored under SETTINGS_NAMES.SCRIPT_TEMPLATE ui/src/domain/settings.ts6
The emails setting stores a list of contact email addresses used for system notifications ui/src/domain/settings.ts19-21
Sources: ui/src/domain/settings.ts4-9 ui/src/domain/settings.ts18-41 ui/src/repository/settings.ts50-70
The Diagnostics UI bridges the frontend to the backend's system-level metadata.
Diagnostics Code Entity Mapping
Sources: ui/src/repository/settings.ts28-46 ui/src/pages/settings/Settings.tsx18
Refresh this wiki