[web] add PostgreSQL backend support

Add ability to configure PostgreSQL as a backend in the web UI settings.
Users can now select PostgreSQL from the backend dropdown and provide
a connection URL to view workflow data stored in a postgres database.

Author: alex-holovach

packages/web/package.json

@@ -42,6 +42,7 @@
     "@types/react-dom": "19",
     "@workflow/core": "workspace:*",
     "@workflow/world": "workspace:*",
+    "@workflow/world-postgres": "workspace:*",
     "@workflow/web-shared": "workspace:*",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",

packages/web/src/components/settings-sidebar.tsx

@@ -32,6 +32,7 @@ export function SettingsSidebar() {
 
   const backend = localConfig.backend || 'embedded';
   const isEmbedded = backend === 'embedded';
+  const isPostgres = backend === 'postgres';
 
   // Update local config when query params change
   useEffect(() => {
@@ -123,6 +124,7 @@ export function SettingsSidebar() {
                     <SelectContent>
                       <SelectItem value="embedded">Embedded</SelectItem>
                       <SelectItem value="vercel">Vercel</SelectItem>
+                      <SelectItem value="postgres">PostgreSQL</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
@@ -175,7 +177,33 @@ export function SettingsSidebar() {
                   </>
                 )}
 
-                {!isEmbedded && (
+                {isPostgres && (
+                  <>
+                    <div className="space-y-2">
+                      <Label htmlFor="postgresUrl">Connection URL</Label>
+                      <Input
+                        id="postgresUrl"
+                        value={localConfig.postgresUrl || ''}
+                        onChange={(e) =>
+                          handleInputChange('postgresUrl', e.target.value)
+                        }
+                        placeholder="postgres://user:pass@host:5432/db"
+                        className={
+                          getFieldError('postgresUrl')
+                            ? 'border-destructive'
+                            : ''
+                        }
+                      />
+                      {getFieldError('postgresUrl') && (
+                        <p className="text-sm text-destructive">
+                          {getFieldError('postgresUrl')}
+                        </p>
+                      )}
+                    </div>
+                  </>
+                )}
+
+                {!isEmbedded && !isPostgres && (
                   <>
                     <div className="space-y-2">
                       <Label htmlFor="env">Environment</Label>

packages/web/src/lib/config-world.ts

@@ -11,6 +11,8 @@ export interface WorldConfig {
   team?: string;
   port?: string;
   dataDir?: string;
+  // Postgres fields
+  postgresUrl?: string;
 }
 
 export interface ValidationError {
@@ -49,5 +51,24 @@ export async function validateWorldConfig(
     }
   }
 
+  if (backend === 'postgres') {
+    // Validate postgres connection string
+    if (!config.postgresUrl) {
+      errors.push({
+        field: 'postgresUrl',
+        message: 'PostgreSQL connection string is required',
+      });
+    } else if (
+      !config.postgresUrl.startsWith('postgres://') &&
+      !config.postgresUrl.startsWith('postgresql://')
+    ) {
+      errors.push({
+        field: 'postgresUrl',
+        message:
+          'Invalid PostgreSQL connection string format (must start with postgres:// or postgresql://)',
+      });
+    }
+  }
+
   return errors;
 }

packages/web/src/lib/config.ts

@@ -22,6 +22,7 @@ const CONFIG_PARAM_KEYS = [
   'team',
   'port',
   'dataDir',
+  'postgresUrl',
 ] as const;
 
 /**
@@ -132,13 +133,19 @@ export function buildUrlWithConfig(
 }
 
 export const worldConfigToEnvMap = (config: WorldConfig): EnvMap => {
+  const isPostgres = config.backend === 'postgres';
+
   return {
-    WORKFLOW_TARGET_WORLD: config.backend,
+    WORKFLOW_TARGET_WORLD: isPostgres
+      ? '@workflow/world-postgres'
+      : config.backend,
     WORKFLOW_VERCEL_ENV: config.env,
     WORKFLOW_VERCEL_AUTH_TOKEN: config.authToken,
     WORKFLOW_VERCEL_PROJECT: config.project,
     WORKFLOW_VERCEL_TEAM: config.team,
     PORT: config.port,
     WORKFLOW_EMBEDDED_DATA_DIR: config.dataDir,
+    // Postgres env vars
+    WORKFLOW_POSTGRES_URL: config.postgresUrl,
   };
 };