[cli] [web] Allow opening web UI without config validation, show better UI when runs can't be found #684
+203
−52
Conversation
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
Signed-off-by: Peter Wielander <mittgfu@gmail.com>
Signed-off-by: Peter Wielander <mittgfu@gmail.com>
🦋 Changeset detectedLatest commit: 75c7cb9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 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
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
🧪 E2E Test Results❌ Some tests failed Summary
❌ Failed Tests🌍 Community Worlds (11 failed)mongodb (1 failed):
redis (1 failed):
starter (8 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. |
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) | Express | Nitro 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: Express | Nitro | Next.js (Turbopack) Promise.all with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Next.js (Turbopack) | Nitro 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: Nitro | Express | Next.js (Turbopack) Stream Benchmarks (includes TTFB metrics)workflow with stream💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Next.js (Turbopack) | Nitro SummaryFastest Framework by WorldWinner determined by most benchmark wins
Fastest World by FrameworkWinner determined by most benchmark wins
Column Definitions
Worlds:
|
Signed-off-by: Peter Wielander <mittgfu@gmail.com>
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| } | ||
|
|
||
| // If there's a config error, set a flag so web UI shows config screen | ||
| if (configError) { |
Contributor
There was a problem hiding this comment.
The needsConfig query parameter is being set in the CLI but is never read or acted upon by the web UI, so users with missing configuration won't be prompted to fix it.
View Details
📝 Patch Details
diff --git a/packages/web/src/components/settings-dropdown.tsx b/packages/web/src/components/settings-dropdown.tsx
index e587c2d..60a8627 100644
--- a/packages/web/src/components/settings-dropdown.tsx
+++ b/packages/web/src/components/settings-dropdown.tsx
@@ -2,7 +2,7 @@
import { ExternalLink, Monitor, Moon, Settings, Sun } from 'lucide-react';
import { useTheme } from 'next-themes';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
@@ -13,6 +13,7 @@ import {
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { SegmentedControl } from '@/components/ui/segmented-control';
+import { useNeedsConfigState } from '@/lib/url-state';
import { SettingsSidebar } from './settings-sidebar';
// Controlled version that doesn't show the trigger button
@@ -30,6 +31,14 @@ export function SettingsDropdown() {
const [settingsOpen, setSettingsOpen] = useState(false);
const { theme, setTheme } = useTheme();
const currentTheme = theme || 'system';
+ const [needsConfig] = useNeedsConfigState();
+
+ // Auto-open settings sidebar when needsConfig is present
+ useEffect(() => {
+ if (needsConfig) {
+ setSettingsOpen(true);
+ }
+ }, [needsConfig]);
return (
<>
diff --git a/packages/web/src/components/settings-sidebar.tsx b/packages/web/src/components/settings-sidebar.tsx
index ad2eeb8..de9b537 100644
--- a/packages/web/src/components/settings-sidebar.tsx
+++ b/packages/web/src/components/settings-sidebar.tsx
@@ -21,6 +21,7 @@ import {
type WorldConfig,
} from '@/lib/config-world';
import { useDataDirInfo, useWorldsAvailability } from '@/lib/hooks';
+import { useNeedsConfigState } from '@/lib/url-state';
interface SettingsSidebarProps {
open?: boolean;
@@ -33,6 +34,7 @@ export function SettingsSidebar({
}: SettingsSidebarProps = {}) {
const config = useQueryParamConfig();
const updateConfig = useUpdateConfigQueryParams();
+ const [needsConfig] = useNeedsConfigState();
const [internalOpen, setInternalOpen] = useState(false);
const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
@@ -127,6 +129,18 @@ export function SettingsSidebar({
</Button>
</div>
+ {needsConfig && (
+ <Alert className="mb-6 !bg-blue-500/10 !border-blue-500/30">
+ <AlertCircle className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+ <AlertTitle className="text-blue-900 dark:text-blue-200">
+ Configuration required
+ </AlertTitle>
+ <AlertDescription className="text-blue-800 dark:text-blue-300">
+ Please configure your workflow data directory to continue.
+ </AlertDescription>
+ </Alert>
+ )}
+
<div className="space-y-4">
<div className="space-y-2">
<Label htmlFor="backend">Backend</Label>
diff --git a/packages/web/src/lib/url-state.ts b/packages/web/src/lib/url-state.ts
index b5d0a04..9feef34 100644
--- a/packages/web/src/lib/url-state.ts
+++ b/packages/web/src/lib/url-state.ts
@@ -9,6 +9,13 @@ export function useSidebarState() {
return useQueryState('sidebar', parseAsString);
}
+/**
+ * Hook to check if configuration is needed
+ */
+export function useNeedsConfigState() {
+ return useQueryState('needsConfig', parseAsString);
+}
+
/**
* Hook to manage theme state in URL
*/
Analysis
needsConfig parameter not read or handled by web UI, blocking user configuration guidance
What fails: Web UI ignores the needsConfig=1 query parameter set by the CLI when configuration is missing, preventing users from being guided to fix missing workflow-data folder
How to reproduce:
- Run
wf webwhen workflow-data folder is missing - CLI detects error and sets
needsConfig=1parameter in URL - Web UI loads but settings sidebar does NOT automatically open
- User sees normal UI with no indication that configuration is needed
Result: Users must manually click "Configuration" menu to access settings. No guidance shown about missing configuration.
Expected behavior: Per PR goals:
- Settings sidebar should auto-open when
needsConfig=1parameter is present - Informational message should appear guiding user to configure folder
- This matches how other URL parameters trigger auto-navigation (e.g.,
runId,stepId,hookId)
Root cause:
- CLI sets
needsConfigparameter inpackages/cli/src/lib/inspect/web.tsline 377 - Web UI never reads or handles this parameter:
- No parser in
packages/web/src/lib/config.ts(only handles backend, env, authToken, project, team, port, dataDir, manifestPath) - No hook in
packages/web/src/lib/url-state.ts - Not checked in
packages/web/src/components/settings-dropdown.tsx
- No parser in
Fix implemented:
- Added
useNeedsConfigState()hook topackages/web/src/lib/url-state.tsto read the parameter - Updated
SettingsDropdownto auto-open settings sidebar whenneedsConfigis present - Updated
SettingsSidebarto display informational message "Configuration required" when opened this way
Sign up for free
to 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.
This PR makes it so that:
wf webin local world will open the web UI even if the configuration can't be verifiedworkflow-datadir exists)wf i <command> --webandwf i webworkflow-datafolder can't be foundThis is separate from #626, which adds UI to remember and list past configurations, and allows re-connecting to them.