feat: onboarding prototype

[talissoncosta]

Thanks for submitting a PR! Please check the boxes below:

• I have read the Contributing Guide.
• I have added information to docs/ if required so people know about the feature.
• I have filled in the "Changes" section below.
• I have filled in the "How did you test this code" section below.

Changes

Contributes to #7544

Working prototype of the role-branched onboarding quickstart flow, gated behind the onboarding_quickstart_flow feature flag (FORCE_ON = true for local validation — flip to Utils.getFlagsmithHasFeature('onboarding_quickstart_flow') before merge).

Flow shape

• Role selection (Engineer / Product manager / Something else) at start
• Engineer path: SDK install snippet + first-eval polling
• PM path: read-only integrations grid (visual capability check) + invite teammate CTA
• Other path: skips the evaluation step, lands directly on the features page
• Stepper label adapts per role — engineer gets "See it works", PM gets "Connect your tools"

Keyboard navigation (per #7544 hard requirement)

• WAI-ARIA radiogroup pattern on Role + Feature pickers — arrow keys navigate and select, roving tabindex, role='radio' / aria-checked semantics
• Enter on inputs (org / project / custom-feature) advances to next step
• Enter on a focused option with a selection advances — saves a Tab+Enter to reach Next/Finish
• Focus management on step change — first interactive element of the new step receives focus
• Visible :focus-visible outline restored (scoped) — the project-wide .btn:focus-visible { box-shadow: none } in _buttons.scss hides focus for sighted keyboard users; this PR scopes a restoration to .onboarding-quickstart without touching the global rule

Other notable changes

• CodeSnippet rewritten with minimal per-language snippets, correct package names (@flagsmith/flagsmith), and the user's chosen feature name interpolated
• New BareButton primitive at web/components/base/BareButton.tsx for keyboard-accessible custom-styled surfaces (consumed in follow-up)
• Per-block layout constraints (form steps narrow, evaluation step wide) — drops the legacy 1280px page cap
• text-muted used in place of text-secondary throughout to avoid the Bootstrap \$secondary: #fae392 collision

Out of scope (per issue)

• Backend endpoints — handleFinish still stubs the environment key
• Activation signal — useFirstEvaluationPoll is placeholder polling; the real signal needs to pull from Influx (since flag evals go through the edge API now) and is tracked separately
• Baseline metrics + rollout planning

How did you test this code?

• Walked the flow manually as each role (Engineer / PM / Other)
• Verified TypeScript + ESLint clean
• Keyboard navigation:
  • Tab through every interactive element on every step
  • Arrow keys on Role + Feature pickers — selection follows focus
  • Enter on inputs advances; Enter on a focused selected option advances
  • Focus lands on the first interactive element of each new step on transition
  • Visible focus ring on Tab-reached buttons / radio rows
• Confirmed the FF gate at GettingStartedSwitch works (currently FORCE_ON = true)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	Jun 1, 2026 12:12pm
flagsmith-frontend-staging	Ready	Preview, 💬 1 unresolved	Jun 1, 2026 12:12pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Jun 1, 2026 12:12pm

[gemini-code-assist]

Code Review

This pull request introduces a new multi-step onboarding quickstart flow (AHA-first flow) gated by a feature flag, featuring custom wizard steps tailored to user roles, a slide-out progress drawer, and minimal SDK code snippets for various languages. While the implementation is clean and well-structured, several critical issues need to be addressed: unsafe JSON parsing of remote-config integration data could crash the flow for PM users; syntax errors in the generated C# code snippet will cause compiler errors; the FORCE_ON flag remains hardcoded to true; and the final redirection URL incorrectly uses display names and API keys instead of project and environment IDs.

[gemini-code-assist]

The parsing of the remote-config value integration_data is done using JSON.parse and Object.values without any safety guards or error handling. If integration_data is malformed, null, or not a dictionary, this will throw a runtime exception and completely crash the onboarding flow for PM users.

Wrap the parsing logic in a try...catch block and validate that the parsed result is an object/array before calling Object.values or concatenating.

  const pmIntegrations = useMemo(() => {
    if (role !== 'pm') return []
    const remote = Utils.getFlagsmithValue('integration_data')
    if (typeof remote !== 'string' || !remote) {
      return Constants.integrationSummaries.slice(0, 12)
    }
    try {
      const parsed = JSON.parse(remote)
      if (!parsed || typeof parsed !== 'object') {
        return Constants.integrationSummaries.slice(0, 12)
      }
      const remoteValues = Array.isArray(parsed) ? parsed : Object.values(parsed)
      const merged = uniqBy(
        remoteValues.concat(
          Constants.integrationSummaries,
        ) as IntegrationSummary[],
        (v) => v.title?.toLowerCase(),
      )
      return merged.slice(0, 12)
    } catch (e) {
      // eslint-disable-next-line no-console
      console.error('Failed to parse integration_data', e)
      return Constants.integrationSummaries.slice(0, 12)
    }
  }, [role])

[gemini-code-assist]

There are two issues in the generated C# (dotnet) code snippet that will cause compiler errors:

1. The first $ is escaped as \$, which outputs literal ${featureName} in the C# code. Since featureName is not a defined variable in the C# scope, this will fail to compile. It should be unescaped so that the actual feature name is interpolated at generation time.
2. The double quotes inside the interpolation hole {} are escaped as \". In C# interpolated strings, escaping quotes inside the expression hole is a syntax error. They should be unescaped double quotes ".

Let's correct the snippet to generate valid, compilable C# code.

Suggested change

	case 'dotnet':
	return `var flagsmith = new FlagsmithClient(new FlagsmithConfiguration {
	EnvironmentKey = "${environmentKey}"
	});
	var flags = await flagsmith.GetEnvironmentFlags();
	Console.WriteLine($"${featureName}: {await flags.IsFeatureEnabled(\\"${featureName}\\")}");`
	case 'dotnet':
	return `var flagsmith = new FlagsmithClient(new FlagsmithConfiguration {
	EnvironmentKey = "${environmentKey}"
	});
	var flags = await flagsmith.GetEnvironmentFlags();
	Console.WriteLine($"${featureName}: {await flags.IsFeatureEnabled("${featureName}")}");`

[gemini-code-assist]

The FORCE_ON flag is hardcoded to true for local validation. As noted in the comments and PR description, this needs to be reverted to use the actual feature flag check before merging to production to avoid exposing the unfinished flow prematurely.

Suggested change

	const FORCE_ON = true
	const FORCE_ON = false

[gemini-code-assist]

The finishedDestination URL is constructed using projectName and environmentKey (which is the API key) as path parameters:
/project/${projectName}/environment/${environmentKey}/features

However, the application routes (defined in routes.js) expect numeric/alphanumeric IDs for :projectId and :environmentId (e.g., /project/:projectId/environment/:environmentId/features). Using display names or API keys in the URL path will cause routing or API fetch failures.

Please ensure that the real implementation uses the actual projectId and environmentId instead of the display name and API key.