feat(FN-1897): rewrite onboarding step copy for mixed-audience clarity
- Rewrite AI Setup step description to explain what Fusion does with AI models - Update GitHub step text to clarify what linking enables (issue import, PR sync) - Refresh First Task step to be more actionable and inviting - Update completion message to guide users to the board - Revise helper text across all steps to be warmer and less technical - Update test assertions to match new copy
This commit is contained in:
Fusion
@@ -641,14 +641,15 @@ export function ModelOnboardingModal({
|
||||
{step === "ai-setup" && (
|
||||
<div className="model-onboarding-ai-setup">
|
||||
<p className="model-onboarding-description">
|
||||
Connect an AI provider and choose a default model. You can
|
||||
authenticate via OAuth or enter an API key.
|
||||
Fusion uses AI models to plan, write, and review code for you.
|
||||
Connect an AI provider below to get started — you can use a hosted
|
||||
service or enter an API key.
|
||||
</p>
|
||||
|
||||
{/* Show helper text when providers exist but none are authenticated */}
|
||||
{authProviders.length > 0 && !authProviders.some((p) => p.authenticated) && (
|
||||
<p className="onboarding-helper-text">
|
||||
You can add API keys or log in to providers later from Settings.
|
||||
Skip this step if you'd like — you can always add providers later from Settings.
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -805,13 +806,13 @@ export function ModelOnboardingModal({
|
||||
Default Model (Optional)
|
||||
</h3>
|
||||
<p className="model-onboarding-description">
|
||||
Select a default model for AI tasks. You can change this later
|
||||
in Settings.
|
||||
Pick a default model for AI tasks, or leave this blank to choose
|
||||
later. Models vary in speed, capability, and cost.
|
||||
</p>
|
||||
|
||||
{availableModels.length === 0 ? (
|
||||
<div className="model-onboarding-empty">
|
||||
No models available. Please configure a provider first.
|
||||
No models available yet. Connect a provider above to see model options.
|
||||
</div>
|
||||
) : (
|
||||
<div className="onboarding-model-selector">
|
||||
@@ -841,15 +842,16 @@ export function ModelOnboardingModal({
|
||||
{step === "github" && (
|
||||
<div className="model-onboarding-github">
|
||||
<p className="model-onboarding-description">
|
||||
Connect GitHub to import issues and manage pull requests. This is
|
||||
optional — you can still use Fusion without GitHub.
|
||||
Linking GitHub lets you import issues as tasks and keep pull
|
||||
requests in sync with your work. This is entirely optional —
|
||||
Fusion works without it.
|
||||
</p>
|
||||
|
||||
{!hasGithubProvider ? (
|
||||
<div className="model-onboarding-github-optional">
|
||||
<GitPullRequest size={48} className="optional-icon" />
|
||||
<p>
|
||||
GitHub integration is not configured. You can set it up later
|
||||
GitHub integration isn't set up yet. You can enable it later
|
||||
in Settings → Authentication.
|
||||
</p>
|
||||
<button
|
||||
@@ -923,7 +925,7 @@ export function ModelOnboardingModal({
|
||||
</div>
|
||||
{!isGithubAuthenticated && (
|
||||
<p className="onboarding-helper-text">
|
||||
You can connect GitHub later from Settings → Authentication.
|
||||
No worries if you're not ready — connect GitHub anytime from Settings → Authentication.
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
@@ -934,7 +936,7 @@ export function ModelOnboardingModal({
|
||||
{step === "first-task" && (
|
||||
<div className="model-onboarding-first-task">
|
||||
<p className="model-onboarding-description">
|
||||
You're all set! What would you like to do first?
|
||||
Your workspace is ready. Here's how to get started:
|
||||
</p>
|
||||
|
||||
<div className="onboarding-cta-options">
|
||||
@@ -948,7 +950,7 @@ export function ModelOnboardingModal({
|
||||
</div>
|
||||
<div className="cta-content">
|
||||
<strong>Create a New Task</strong>
|
||||
<span>Describe a task and let AI handle the rest</span>
|
||||
<span>Describe what you need built and AI will work on it</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@@ -962,14 +964,14 @@ export function ModelOnboardingModal({
|
||||
</div>
|
||||
<div className="cta-content">
|
||||
<strong>Import from GitHub</strong>
|
||||
<span>Bring in issues from your repositories</span>
|
||||
<span>Turn GitHub issues into tasks you can track here</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="onboarding-skip-note">
|
||||
You can always create tasks later from the board or use{" "}
|
||||
<code>fn task create</code> from the CLI.
|
||||
You can create tasks anytime from the board, or use{" "}
|
||||
<code>fn task create</code> in the terminal.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -978,8 +980,8 @@ export function ModelOnboardingModal({
|
||||
<div className="model-onboarding-complete">
|
||||
<CheckCircle size={48} className="success-icon" />
|
||||
<p>
|
||||
You're ready to start using Fusion! Check out the dashboard to
|
||||
create your first task.
|
||||
Setup complete! Head to the board to create your first task, or
|
||||
explore the dashboard to see what's available.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -308,7 +308,7 @@ describe("ModelOnboardingModal", () => {
|
||||
|
||||
await navigateToGitHubStep();
|
||||
|
||||
expect(screen.getByText(/GitHub integration is not configured/)).toBeTruthy();
|
||||
expect(screen.getByText(/GitHub integration isn't set up yet/)).toBeTruthy();
|
||||
expect(screen.getByText("Continue without GitHub →")).toBeTruthy();
|
||||
});
|
||||
|
||||
@@ -1179,7 +1179,7 @@ describe("ModelOnboardingModal", () => {
|
||||
});
|
||||
|
||||
// Helper text should be visible when no providers are authenticated
|
||||
expect(screen.getByText("You can add API keys or log in to providers later from Settings.")).toBeTruthy();
|
||||
expect(screen.getByText("Skip this step if you'd like — you can always add providers later from Settings.")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("does not show helper text on AI Setup when a provider is authenticated", async () => {
|
||||
@@ -1198,7 +1198,7 @@ describe("ModelOnboardingModal", () => {
|
||||
});
|
||||
|
||||
// Helper text should NOT be visible when a provider is authenticated
|
||||
expect(screen.queryByText("You can add API keys or log in to providers later from Settings.")).toBeNull();
|
||||
expect(screen.queryByText("Skip this step if you'd like — you can always add providers later from Settings.")).toBeNull();
|
||||
});
|
||||
|
||||
it("shows helper text on GitHub step when GitHub is available but not connected", async () => {
|
||||
@@ -1214,7 +1214,7 @@ describe("ModelOnboardingModal", () => {
|
||||
await navigateToGitHubStep();
|
||||
|
||||
// Helper text should be visible when GitHub is available but not connected
|
||||
expect(screen.getByText("You can connect GitHub later from Settings → Authentication.")).toBeTruthy();
|
||||
expect(screen.getByText("No worries if you're not ready — connect GitHub anytime from Settings → Authentication.")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("does not show helper text on GitHub step when GitHub is connected", async () => {
|
||||
@@ -1230,7 +1230,7 @@ describe("ModelOnboardingModal", () => {
|
||||
await navigateToGitHubStep();
|
||||
|
||||
// Helper text should NOT be visible when GitHub is connected
|
||||
expect(screen.queryByText("You can connect GitHub later from Settings → Authentication.")).toBeNull();
|
||||
expect(screen.queryByText("No worries if you're not ready — connect GitHub anytime from Settings → Authentication.")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user