Uh oh!
There was an error while loading. Please reload this page.
feat(web): add self-hosted mode for world configuration - #747
Merged
Conversation
Contributor
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: e826daa The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
📊 Benchmark Results
workflow with no steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) workflow with 1 step💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Nitro | Express workflow with 10 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Express | Nitro Promise.all with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Nitro | Express Promise.all with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) Promise.race with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) Promise.race with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Nitro | Express Stream Benchmarks(includes TTFB metrics)workflow with stream💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Nitro | Express SummaryFastest Framework by WorldWinner determined by most benchmark wins
Fastest World by FrameworkWinner determined by most benchmark wins
Column Definitions
Worlds:
|
Contributor
🧪 E2E Test Results❌ Some tests failed Summary
❌ Failed Tests💻 Local Development (2 failed)sveltekit-stable (2 failed):
🪟 Windows (1 failed)nextjs-turbopack (1 failed):
🌍 Community Worlds (17 failed)mongodb (1 failed):
redis (1 failed):
starter (14 failed):
turso (1 failed):
Details by Category✅ ▲ Vercel Production
❌ 💻 Local Development
✅ 📦 Local Production
✅ 🐘 Local Postgres
❌ 🪟 Windows
❌ 🌍 Community Worlds
❌ Some E2E test jobs failed:
Check the workflow run for details. |
When WORKFLOW_TARGET_WORLD env var is set, the web UI operates in self-hosted mode where the world configuration is locked to server-side environment variables and cannot be changed via query params or UI. - Add getHardcodedConfig server action to detect self-hosted mode - Modify getWorldFromEnv to use server env vars in hardcoded mode - Create WorldConfigContext to provide config state app-wide - Update settings sidebar to show locked state with disabled inputs - Update connection status to show PostgreSQL backend info - Mask sensitive values (postgres URL) in hardcoded mode UI
pranaygpforce-pushed
the
feat/self-hosted-world-config
branch
from
January 8, 2026 08:25
0c6cb81 to
e1636a0Comparepranaygp
commented
Jan 8, 2026
| * - 'dynamic': Config comes from query params and can be changed via UI | ||
| * - 'hardcoded': Config is set via server env vars and cannot be changed | ||
| */ | ||
| export type ConfigMode = 'dynamic' | 'hardcoded'; |
ContributorAuthor
There was a problem hiding this comment.
should we just get rid of the "dynamic" mode and disallow people configuring the workflow at runtime. Make it so the world is setup and created based purely on server side env vars? the CLI controls env vars and can configure it accordingly anyway
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a self-hosted mode feature to the web observability UI, allowing deployment with a locked world configuration controlled by server environment variables. When WORKFLOW_TARGET_WORLD is set on the server, the UI prevents users from changing the backend configuration through query parameters or the settings UI.
Key changes:
- Implements a React context (
WorldConfigContext) to manage configuration state application-wide - Adds server-side detection of hardcoded mode and provides configuration to the client
- Updates UI components to display lock indicators and disable controls when in self-hosted mode
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/web/src/lib/world-config-context.tsx | New context provider that manages world configuration state, supporting both dynamic (query param-based) and hardcoded (environment variable-based) modes |
| packages/web/src/components/settings-sidebar.tsx | Updated to show "Self-Hosted Mode" banner, disable all form inputs, and hide the Apply button when configuration is locked |
| packages/web/src/components/display-utils/connection-status.tsx | Enhanced to display lock icon and postgres connection details, with special handling for hardcoded mode |
| packages/web/src/app/run/[runId]/page.tsx | Migrated from using useQueryParamConfig to useWorldConfig hook for configuration access |
| packages/web/src/app/page.tsx | Migrated from using useQueryParamConfig to useWorldConfig hook for configuration access |
| packages/web/src/app/layout.tsx | Added server-side call to fetch hardcoded config and pass it to client components |
| packages/web/src/app/layout-client.tsx | Added WorldConfigProvider wrapper to provide configuration context to the app |
| packages/web-shared/src/api/workflow-server-actions.ts | Added getHardcodedConfig function and modified getWorldFromEnv to enforce hardcoded mode when WORKFLOW_TARGET_WORLD is set |
| changeset/self-hosted-world-config.md | Documents the new feature with usage examples and supported environment variables |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+15
to
+21
| * Configuration mode for the web UI. | ||
| * - 'dynamic': Config comes from query params and can be changed via UI | ||
| * - 'hardcoded': Config is set via server env vars and cannot be changed | ||
| */ | ||
| export type ConfigMode = 'dynamic' | 'hardcoded'; | ||
| /** |
There was a problem hiding this comment.
The ConfigMode type is exported but never used anywhere in the codebase. Consider removing this unused export to reduce code complexity, or add a comment explaining if it's intended for future use or external consumers.
Suggested change
| *ConfigurationmodeforthewebUI. | |
| *-'dynamic': ConfigcomesfromqueryparamsandcanbechangedviaUI | |
| *-'hardcoded': Config is setviaserverenvvarsandcannotbechanged | |
| */ | |
| exporttypeConfigMode='dynamic'|'hardcoded'; | |
| /** |
Comment on lines
+86
to
+88
| : backend === 'postgres' | ||
| ? 'database' | ||
| : undefined; |
There was a problem hiding this comment.
The substring for postgres backend is hardcoded to the literal string 'database', which will display as "Connected to: PostgreSQL (database)" regardless of the actual database name. This is not informative. Consider either extracting the actual database name from the postgres URL (similar to how it's done in getConnectionInfo), or setting it to undefined to not show a substring at all.
Suggested change
| : backend==='postgres' | |
| ? 'database' | |
| : undefined; | |
| : undefined; |
Comment on lines
+150
to
+161
| function getHardcodedEnvMap(): EnvMap { | ||
| return { | ||
| WORKFLOW_TARGET_WORLD: process.env.WORKFLOW_TARGET_WORLD, | ||
| WORKFLOW_VERCEL_ENV: process.env.WORKFLOW_VERCEL_ENV, | ||
| WORKFLOW_VERCEL_AUTH_TOKEN: process.env.WORKFLOW_VERCEL_AUTH_TOKEN, | ||
| WORKFLOW_VERCEL_PROJECT: process.env.WORKFLOW_VERCEL_PROJECT, | ||
| WORKFLOW_VERCEL_TEAM: process.env.WORKFLOW_VERCEL_TEAM, | ||
| PORT: process.env.PORT, | ||
| WORKFLOW_MANIFEST_PATH: process.env.WORKFLOW_MANIFEST_PATH, | ||
| WORKFLOW_LOCAL_DATA_DIR: process.env.WORKFLOW_LOCAL_DATA_DIR, | ||
| WORKFLOW_POSTGRES_URL: process.env.WORKFLOW_POSTGRES_URL, | ||
| }; |
There was a problem hiding this comment.
The envMap construction logic is duplicated between getHardcodedConfig (lines 78-88) and getHardcodedEnvMap (lines 151-161). Consider extracting this into a shared helper function to reduce duplication and improve maintainability. If these need to diverge in the future, the duplication could lead to inconsistencies.
| 'use client'; | ||
| import { TooltipProvider } from '@radix-ui/react-tooltip'; | ||
| import type { EnvMap } from '@workflow/web-shared/server'; |
There was a problem hiding this comment.
The EnvMap type import is unused in this file. Since HardcodedConfig is imported from the world-config-context module which already includes the EnvMap type in its definition, this import is redundant here.
Suggested change
| import type { EnvMap } from '@workflow/web-shared/server'; |
The CLI sets WORKFLOW_TARGET_WORLD as an env var, which the spawned Next.js server inherits. This caused the web UI to enter self-hosted mode even when launched via CLI. Now we explicitly clear WORKFLOW_TARGET_WORLD from the server's environment so it starts in dynamic mode where config comes from query params as intended.
pranaygp
commented
Jan 9, 2026
ContributorAuthor
@VaguelySerious while doing your manual tests, it looks like CLI is actually doing both - using "hard coded mode" AND setting the query params. I'm gonna update this PR to just get rid of the query params thing and simplify down to just enforcing env variables anyway :) I think that's an improvement and makes things simpler, especially as we move towards mounting o11y natively in the user app I'll ensure all your manual tests scenarios work |
pranaygp
marked this pull request as draft
January 9, 2026 01:42
BREAKING CHANGE: The web UI no longer supports configuring the world backend via URL query parameters. Configuration is now read exclusively from server-side environment variables. Changes: - Remove query param parsing from @workflow/web config.ts - Add ServerConfig interface with non-sensitive display info - Update all components to use useServerConfig() hook - Settings sidebar is now read-only - CLI passes env vars to spawned web server instead of query params - Server actions use process.env directly (envMap param reserved for future use) This simplifies the architecture and improves security by never sending sensitive data (connection strings, auth tokens) to the client.
- Add truncate/overflow handling to settings sidebar config values - Add shortenPath() helper to abbreviate long file paths: - Replaces home directory with ~ - Shows .../last-two-segments if still too long - Add title attributes for full path on hover
pranaygp
commented
Jan 9, 2026
Comment on lines
+261
to
+275
| * Get or create a World instance based on configuration. | ||
| * | ||
| * Configuration priority: | ||
| * 1. If server-side environment variables are set (WORKFLOW_TARGET_WORLD, etc.), | ||
| * those are used and the envMap parameter is ignored. This is the standard | ||
| * mode used by the @workflow/web package. | ||
| * | ||
| * 2. If no server-side env vars are set but envMap is provided, the envMap | ||
| * values are used. This mode is reserved for future use cases where | ||
| * dynamic world configuration at runtime may be needed (e.g., a multi-tenant | ||
| * observability dashboard). | ||
| * | ||
| * 3. If neither is set, createWorld() falls back to its default behavior | ||
| * (vercel if VERCEL_DEPLOYMENT_ID is set, otherwise local). | ||
| * |
ContributorAuthor
There was a problem hiding this comment.
@VaguelySerious fyi I left the dynamic mode stuff in "web-shared" but stopped using it in the web package (for the reasons mentioned in this comment)
figured you could do whatever you like in future PRs for fully getting rid of it, or making it match the config RFC in worlds directly, etc. ITG
pranaygp
commented
Jan 9, 2026
ContributorAuthor
ok made changes and tested all the patterns. was able to run locally and connect to railway easily too and it even looks a bit better: I removed dynamic query params from cli and web package so everything is propagated via env vars, but left dynamic mode in web-shared will need docs for this but will ITG   |
Merged
This was referenced Jan 13, 2026
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
WORKFLOW_TARGET_WORLDis set on the server, query params and UI settings cannot override the configurationChanges
getHardcodedConfigserver action and modifygetWorldFromEnvto respect hardcoded modeWorldConfigContextto provide config state app-wide, update settings sidebar and connection status componentsUse Case
This enables deploying the observability UI as a standalone service connected to a specific world backend (e.g., PostgreSQL) without allowing runtime configuration changes:
Testing
Tested locally with postgres world - the UI now shows "Connected to: PostgreSQL" with a lock icon, and the settings sidebar shows the configuration as locked.