Fix welcome screen theme violation and unwanted profile display #1027

acoliver · 2026-01-06T20:51:47Z

Summary

This PR addresses two issues with the new welcome screen:

1. Theme Violation

When the "greenscreen" theme is selected, text elements were displaying in white instead of respecting the theme colors. This has been fixed by explicitly setting color={Colors.Foreground} on all text elements in the welcome screen components.

Fixed components:

WelcomeStep
ProviderSelectStep
ModelSelectStep
AuthMethodStep
AuthenticationStep
CompletionStep
SkipExitStep

2. Unwanted Display

The welcome screen was still appearing even when users had configured profiles/models via various methods. The welcome screen now properly suppresses display when:

User has a default profile configured (settings.merged.defaultProfile)
The LLXPRT_PROFILE environment variable is set
An active provider is already configured
An active model is selected

Changes

Modified packages/cli/src/ui/hooks/useWelcomeOnboarding.ts to add suppression checks
Modified all 7 welcome screen components to use theme colors explicitly

Testing

All 2,525 tests pass
TypeScript compilation successful
Build successful

Summary by CodeRabbit

Style
- Unified foreground coloring across the entire welcome onboarding flow for headers, prompts, status lines and profile/details for clearer, more consistent UI.
New Features
- Expanded onboarding flow to include model selection, auth method choice, authentication progress, completion, and skipped flows.
Bug Fixes
- Onboarding now more reliably detects existing configuration and environment conditions and will skip when appropriate, reducing incorrect prompts.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2026-01-06T20:52:00Z

Walkthrough

Apply theme-aware foreground color to WelcomeOnboarding text nodes and add memoized suppression logic in the onboarding hook to skip the welcome flow when environment/profile/provider/model indicate a preconfigured setup; no exported API surface changes.

Changes

Cohort / File(s)	Summary
WelcomeOnboarding Step Styling `packages/cli/src/ui/components/WelcomeOnboarding/AuthMethodStep.tsx`, `packages/cli/src/ui/components/WelcomeOnboarding/AuthenticationStep.tsx`, `packages/cli/src/ui/components/WelcomeOnboarding/CompletionStep.tsx`, `packages/cli/src/ui/components/WelcomeOnboarding/ModelSelectStep.tsx`, `packages/cli/src/ui/components/WelcomeOnboarding/ProviderSelectStep.tsx`, `packages/cli/src/ui/components/WelcomeOnboarding/SkipExitStep.tsx`, `packages/cli/src/ui/components/WelcomeOnboarding/WelcomeStep.tsx`	Replaced plain/unstyled text and empty spacer nodes with `Text` components using `Colors.Foreground` to respect theme colors; removed some empty spacer Texts; small message tweak in CompletionStep ("✓" → "[OK] Authentication complete!"). No control-flow changes.
Onboarding Hook Logic `packages/cli/src/ui/hooks/useWelcomeOnboarding.ts`	Added `useMemo`-backed checks (placeholder model list, isSystemDefaultModelName) and a `shouldSuppressWelcome` computation that suppresses onboarding when `LLXPRT_PROFILE` is set, when a non-default provider is active, or when an active model is non-placeholder; wrapped provider/model lookups in try/catch. Expanded step type union to include additional onboarding steps.

Sequence Diagram(s)

(omitted — changes are presentation and a local readiness check without a multi-component sequential flow that benefits from visualization)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

feat: Implement welcome onboarding flow for first-time users #1001 — Directly modifies the same WelcomeOnboarding components and hook; likely the most closely related change set.
fix: Theme violations and URL fixes for #651, #652, #653, #685, #742 #820 — Broad UI color/styling changes applying Colors.Foreground across UI text components; relevant for theme-consistency overlap.
Add gpt-5.2-codex to Codex static model menu #912 — Adds provider/model flags handling in the CLI entrypoint (related to onboarding suppression when profile/provider/model are supplied).

Poem

🐰 I hopped through strings and shaded light,
Now themes glow true, no glaring white.
If profile, provider, or model’s set,
I tip my hat and skip the rest.
✨🐇

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The PR partially addresses issue #1005 but has a critical gap: the suppression logic does not distinguish between explicit user configuration and system fallback defaults, potentially suppressing the welcome screen incorrectly on first run.	Clarify whether suppression should occur only after explicit onboarding completion, or implement a mechanism to distinguish fallback defaults from explicit configuration to prevent unintended suppression on first run.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the two main changes: fixing a theme violation and addressing unwanted profile/model display on the welcome screen.
Description check	✅ Passed	The description includes a clear summary with sections covering both issues, the fixed components, changes made, and testing results, aligning well with the template sections.
Out of Scope Changes check	✅ Passed	All changes are scoped to the linked issue #1005: styling updates to welcome components and suppression logic in the onboarding hook. No unrelated code modifications detected.

✨ Finishing touches

📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-01-06T20:53:37Z

LLxprt PR Review – PR #1027

Issue Alignment
The PR addresses both parts of issue #1005 effectively:

Theme violation: All welcome screen components now explicitly use color={Colors.Foreground} for text elements, ensuring theme compliance (greenscreen and others).
Unwanted display: useWelcomeOnboarding.ts implements robust suppression logic checking for LLXPRT_PROFILE env var, active provider, and non-default model configuration.

Side Effects

Conservative suppression approach prevents false positives but may still show welcome in edge cases (system defaults)
Color changes may affect accessibility contrasts in some themes (unverified)
No breaking API changes detected

Code Quality

Implementation correctly follows existing patterns and TypeScript conventions
Error handling present provider/model checks with try-catch blocks
Comments explain intentional design choices (e.g., not suppressing on defaultProfile alone)
Consistent color application across all 7 welcome components

Tests & Coverage

Coverage impact: unchanged – No test files added/modified for the new behavior
Test gap: Critical suppression logic in useWelcomeOnboarding.ts lacks automated tests
Welcome screen color changes are purely presentational but untested

Verdict

coderabbitai

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

packages/cli/src/ui/hooks/useWelcomeOnboarding.ts (1)

1-397: Fix Prettier formatting issues before merging.

The CI pipeline detected formatting issues in this file. Please run prettier --write packages/cli/src/ui/hooks/useWelcomeOnboarding.ts to resolve them.

packages/cli/src/ui/components/WelcomeOnboarding/AuthenticationStep.tsx (1)

1-174: Fix Prettier formatting issues before merging.

The CI pipeline detected formatting issues in this file. Please run prettier --write packages/cli/src/ui/components/WelcomeOnboarding/AuthenticationStep.tsx to resolve them.

packages/cli/src/ui/components/WelcomeOnboarding/CompletionStep.tsx (1)

1-162: Fix Prettier formatting issues before merging.

The CI pipeline detected formatting issues in this file. Please run prettier --write packages/cli/src/ui/components/WelcomeOnboarding/CompletionStep.tsx to resolve them.

🤖 Fix all issues with AI Agents

In @packages/cli/src/ui/components/WelcomeOnboarding/ModelSelectStep.tsx:
- Around line 83-84: Prettier formatting violations in ModelSelectStep.tsx are
causing CI to fail; run the formatter or fix the spacing around the two <Text>
elements (the empty <Text color={Colors.Foreground}> and the <Text
color={Colors.Foreground}>Select a model for {providerDisplay}:</Text>) to match
project Prettier rules—e.g., run `prettier --write
packages/cli/src/ui/components/WelcomeOnboarding/ModelSelectStep.tsx` or apply
the equivalent editor formatting and commit the changes.

🧹 Nitpick comments (3)

packages/cli/src/ui/hooks/useWelcomeOnboarding.ts (3)
110-113: Improve error logging for better debugging.

The error object is passed directly to debug.log(), which may not produce useful output. Consider using error instanceof Error ? error.message : String(error) for clearer error messages.
🔎 Proposed fix
       } catch (error) {
         // If we can't check for active provider, continue normally
-        debug.log('Could not check for active provider:', error);
+        debug.log('Could not check for active provider:', error instanceof Error ? error.message : String(error));
       }
     }
 
     // Check if a model has been selected
     try {
       const activeModel = runtime.getActiveModelName();
       if (activeModel && activeModel !== 'placeholder-model') {
         debug.log('Welcome suppressed: active model configured');
         return true;
       }
     } catch (error) {
-      debug.log('Could not check for active model:', error);
+      debug.log('Could not check for active model:', error instanceof Error ? error.message : String(error));
     }
Also applies to: 117-125

128-128: Optimize useMemo dependencies to prevent unnecessary re-computation.

The dependency _settings.merged is an object reference that may change even when defaultProfile hasn't changed, causing unnecessary re-computation of hasUserConfiguration. Consider using _settings.merged.defaultProfile instead.
🔎 Proposed fix
     return false;
-  }, [_settings.merged, runtime]);
+  }, [_settings.merged.defaultProfile, runtime]);
103-109: Simplify provider check logic.

Line 104 checks both providerName and hasActiveProvider(). Based on the relevant code snippet showing hasActiveProvider() already validates the active provider, checking providerName first appears redundant.
🔎 Proposed fix
     if (providerManager) {
       try {
-        const providerName = providerManager.getActiveProviderName();
         const hasActiveProvider = providerManager.hasActiveProvider?.() ?? false;
 
-        if (providerName || hasActiveProvider) {
+        if (hasActiveProvider) {
           debug.log('Welcome suppressed: active provider configured');
           return true;
         }

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2304bc7 and 29ffdb8.

📒 Files selected for processing (8)

packages/cli/src/ui/components/WelcomeOnboarding/AuthMethodStep.tsx
packages/cli/src/ui/components/WelcomeOnboarding/AuthenticationStep.tsx
packages/cli/src/ui/components/WelcomeOnboarding/CompletionStep.tsx
packages/cli/src/ui/components/WelcomeOnboarding/ModelSelectStep.tsx
packages/cli/src/ui/components/WelcomeOnboarding/ProviderSelectStep.tsx
packages/cli/src/ui/components/WelcomeOnboarding/SkipExitStep.tsx
packages/cli/src/ui/components/WelcomeOnboarding/WelcomeStep.tsx
packages/cli/src/ui/hooks/useWelcomeOnboarding.ts

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Don't use any - Always specify proper types. Use unknown if the type is truly unknown and add proper type guards.
Do not use console.log or console.debug - Use the sophisticated logging system instead. Log files are written to ~/.llxprt/debug/
Fix all linting errors, including warnings about any types

Files:

packages/cli/src/ui/components/WelcomeOnboarding/ModelSelectStep.tsx
packages/cli/src/ui/components/WelcomeOnboarding/CompletionStep.tsx
packages/cli/src/ui/hooks/useWelcomeOnboarding.ts
packages/cli/src/ui/components/WelcomeOnboarding/ProviderSelectStep.tsx
packages/cli/src/ui/components/WelcomeOnboarding/AuthenticationStep.tsx
packages/cli/src/ui/components/WelcomeOnboarding/SkipExitStep.tsx
packages/cli/src/ui/components/WelcomeOnboarding/WelcomeStep.tsx
packages/cli/src/ui/components/WelcomeOnboarding/AuthMethodStep.tsx

🧠 Learnings (1)

📚 Learning: 2025-11-17T08:33:42.962Z

Learnt from: MinWooPark-dotcom
Repo: vybestack/llxprt-code PR: 577
File: packages/cli/src/ui/components/messages/ToolMessage.tsx:89-167
Timestamp: 2025-11-17T08:33:42.962Z
Learning: In the vybestack/llxprt-code repository, single-use helper functions in React components can be kept inline rather than extracted to separate utilities, especially when the extraction doesn't provide immediate value (no reuse, no isolated testing planned) and keeps the PR scope focused on feature delivery.

Applied to files:

packages/cli/src/ui/hooks/useWelcomeOnboarding.ts

🧬 Code graph analysis (6)

packages/cli/src/ui/components/WelcomeOnboarding/ModelSelectStep.tsx (2)

packages/cli/test-utils/ink-stub.ts (1)

Text (23-23)

packages/cli/src/ui/colors.ts (1)

Colors (12-78)

packages/cli/src/ui/hooks/useWelcomeOnboarding.ts (1)

packages/core/src/providers/ProviderManager.ts (1)

hasActiveProvider (851-855)

packages/cli/src/ui/components/WelcomeOnboarding/ProviderSelectStep.tsx (2)

packages/cli/test-utils/ink-stub.ts (1)

Text (23-23)

packages/cli/src/ui/colors.ts (1)

Colors (12-78)

packages/cli/src/ui/components/WelcomeOnboarding/AuthenticationStep.tsx (2)

packages/cli/test-utils/ink-stub.ts (2)

Text (23-23)

Box (22-22)

packages/cli/src/ui/colors.ts (1)

Colors (12-78)

packages/cli/src/ui/components/WelcomeOnboarding/SkipExitStep.tsx (2)

packages/cli/test-utils/ink-stub.ts (2)

Text (23-23)

Box (22-22)

packages/cli/src/ui/colors.ts (1)

Colors (12-78)

packages/cli/src/ui/components/WelcomeOnboarding/AuthMethodStep.tsx (2)

packages/cli/test-utils/ink-stub.ts (1)

Text (23-23)

packages/cli/src/ui/colors.ts (1)

Colors (12-78)

🪛 GitHub Actions: LLxprt Code CI

packages/cli/src/ui/components/WelcomeOnboarding/ModelSelectStep.tsx