From c1a079ec498a2f9973941bd2a6f3974c4f21ff39 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 2 Jul 2026 10:53:46 -0300
Subject: [PATCH 01/19] feat(base): let SelectableCard host arbitrary content

Add an optional content slot (children), make selected optional, and pass
through className, so SelectableCard can back a navigational card and not just
a selection tile. Additive: existing consumers are unaffected.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../base/SelectableCard/SelectableCard.scss   |  2 ++
 .../base/SelectableCard/SelectableCard.tsx    | 22 +++++++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/web/components/base/SelectableCard/SelectableCard.scss b/frontend/web/components/base/SelectableCard/SelectableCard.scss
index 0315b3f4a852..72eae4590544 100644
--- a/frontend/web/components/base/SelectableCard/SelectableCard.scss
+++ b/frontend/web/components/base/SelectableCard/SelectableCard.scss
@@ -36,6 +36,8 @@
     display: flex;
     flex-direction: column;
     gap: 4px;
+    flex: 1;
+    min-width: 0;
   }
 
   &__icon {
diff --git a/frontend/web/components/base/SelectableCard/SelectableCard.tsx b/frontend/web/components/base/SelectableCard/SelectableCard.tsx
index 3a614f228702..a88d42577312 100644
--- a/frontend/web/components/base/SelectableCard/SelectableCard.tsx
+++ b/frontend/web/components/base/SelectableCard/SelectableCard.tsx
@@ -1,11 +1,14 @@
 import React, { FC, ReactNode } from 'react'
+import cn from 'classnames'
 import BareButton from 'components/base/forms/BareButton'
 import './SelectableCard.scss'
 
 type BadgeVariant = 'primary' | 'secondary'
 
 type SelectableCardProps = {
-  selected: boolean
+  // Selection state. Omit for a card that acts on click without a chosen state
+  // (e.g. a card that navigates).
+  selected?: boolean
   onClick: () => void
   icon?: ReactNode
   title: string
@@ -13,10 +16,15 @@ type SelectableCardProps = {
   badge?: { label: string; variant: BadgeVariant }
   tags?: string[]
   disabled?: boolean
+  className?: string
+  // Extra content below the description (e.g. an illustrative preview).
+  children?: ReactNode
 }
 
 const SelectableCard: FC<SelectableCardProps> = ({
   badge,
+  children,
+  className,
   description,
   disabled,
   icon,
@@ -27,9 +35,14 @@ const SelectableCard: FC<SelectableCardProps> = ({
 }) => {
   return (
     <BareButton
-      className={`selectable-card${
-        selected ? ' selectable-card--selected' : ''
-      }${disabled ? ' selectable-card--disabled' : ''}`}
+      className={cn(
+        'selectable-card',
+        {
+          'selectable-card--disabled': disabled,
+          'selectable-card--selected': selected,
+        },
+        className,
+      )}
       onClick={onClick}
       disabled={disabled}
     >
@@ -46,6 +59,7 @@ const SelectableCard: FC<SelectableCardProps> = ({
             ))}
           </div>
         )}
+        {children}
       </div>
       {badge && (
         <div className='selectable-card__aside'>

From 4581b155748597422b1d91c50137cd14aceae667 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 2 Jul 2026 10:54:00 -0300
Subject: [PATCH 02/19] feat(onboarding): make the "next quest" cards
 actionable

The three next-quest cards (gradual rollout, experiment, remote config) are
built on SelectableCard and each deep-links to the flag's real config: rollout
to the segment overrides tab, remote config to the value tab, experiment to
the experiments page. The tab param is the slugified tab label. Locked and
dimmed (inert) until the app connects.

Closes #7739

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../OnboardingNextSteps.stories.tsx           |  30 +++++
 .../OnboardingFlow/OnboardingFlow.tsx         |  26 ++++
 .../OnboardingNextSteps.scss                  |  90 +++++++++++++
 .../OnboardingNextSteps.tsx                   | 120 ++++++++++++++++++
 .../onboarding/OnboardingNextSteps/index.ts   |   5 +
 .../onboarding/hooks/useOnboardingFlag.ts     |   2 +
 6 files changed, 273 insertions(+)
 create mode 100644 frontend/documentation/pages/onboarding/OnboardingNextSteps.stories.tsx
 create mode 100644 frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.scss
 create mode 100644 frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx
 create mode 100644 frontend/web/components/pages/onboarding/OnboardingNextSteps/index.ts

diff --git a/frontend/documentation/pages/onboarding/OnboardingNextSteps.stories.tsx b/frontend/documentation/pages/onboarding/OnboardingNextSteps.stories.tsx
new file mode 100644
index 000000000000..bbbf3e0802fa
--- /dev/null
+++ b/frontend/documentation/pages/onboarding/OnboardingNextSteps.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from 'storybook'
+
+import OnboardingNextSteps from 'components/pages/onboarding/OnboardingNextSteps'
+
+const meta: Meta<typeof OnboardingNextSteps> = {
+  args: {
+    locked: false,
+    onSelect: () => {},
+  },
+  component: OnboardingNextSteps,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The "Choose your next quest" section at the bottom of the onboarding flow: the three ways the demo flag can level up (gradual rollout, experiment, remote config), each linking to its real config. Locked and dimmed until the app connects.',
+      },
+    },
+    layout: 'padded',
+  },
+  title: 'Pages/Onboarding/OnboardingNextSteps',
+}
+export default meta
+
+type Story = StoryObj<typeof OnboardingNextSteps>
+
+export const Connected: Story = {}
+
+export const Locked: Story = {
+  args: { locked: true },
+}
diff --git a/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx b/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx
index b3dcecf573bc..ad32dc2ede47 100644
--- a/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx
@@ -7,6 +7,9 @@ import ThemeToggle from 'components/pages/onboarding/ThemeToggle'
 import OnboardingConnectPanel from 'components/pages/onboarding/OnboardingConnectPanel'
 import OnboardingTerminal from 'components/pages/onboarding/OnboardingTerminal'
 import OnboardingFlagsTable from 'components/pages/onboarding/OnboardingFlagsTable'
+import OnboardingNextSteps, {
+  OnboardingNextStep,
+} from 'components/pages/onboarding/OnboardingNextSteps'
 import { useEnsureOnboardingResources } from 'components/pages/onboarding/hooks/useEnsureOnboardingResources'
 import { useOnboardingFlagRename } from 'components/pages/onboarding/hooks/useOnboardingFlagRename'
 import { useOnboardingFlag } from 'components/pages/onboarding/hooks/useOnboardingFlag'
@@ -64,6 +67,7 @@ const OnboardingFlow: FC = () => {
   const [snippetCopied, setSnippetCopied] = useState(false)
   const {
     enabled: flagEnabled,
+    flagId,
     isToggling,
     ready: flagStateReady,
     tags: flagTags,
@@ -117,6 +121,24 @@ const OnboardingFlow: FC = () => {
     }
   }
 
+  // Each next-step card deep-links to the flag's real config; nothing faked.
+  const goToNextStep = (step: OnboardingNextStep) => {
+    if (projectId === null) {
+      return
+    }
+    const base = `/project/${projectId}/environment/${environmentKey}`
+    if (step === 'experiment') {
+      history.push(`${base}/experiments`)
+      return
+    }
+    if (flagId === null) {
+      return
+    }
+    // Tab param is the slugified tab label (see TabMenu/Tabs urlParam).
+    const tab = step === 'rollout' ? 'segment-overrides' : 'value'
+    history.push(`${base}/features?feature=${flagId}&tab=${tab}`)
+  }
+
   if (status === 'creating') {
     return (
       <div className='onboarding-flow mx-auto text-center'>
@@ -178,6 +200,10 @@ const OnboardingFlow: FC = () => {
         togglingFlag={isToggling ? featureName : null}
         togglesReady={flagStateReady}
       />
+      <OnboardingNextSteps
+        locked={connection !== 'connected'}
+        onSelect={goToNextStep}
+      />
       <div className='d-flex justify-content-end'>
         <Button theme='text' onClick={skipToApp}>
           <span className='d-inline-flex align-items-center gap-1'>
diff --git a/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.scss b/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.scss
new file mode 100644
index 000000000000..073def88fe44
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.scss
@@ -0,0 +1,90 @@
+// "Choose your next quest" section. Layout comes from utilities in the markup;
+// this file holds the type sizes, secondary text colour, the dimmed locked
+// state, and the small per-card preview shapes (rollout track, A/B segmented,
+// value pill). Secondary text isn't a utility: Bootstrap's .text-secondary
+// (gold, !important) would win over our token utility, so it's set here.
+.onboarding-next-steps {
+  &__title {
+    font-size: 16px;
+  }
+
+  &__subtitle {
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--color-text-secondary);
+  }
+
+  // Locked affordance: intentionally faint (disabled look). The lock icon
+  // inherits this via currentColor.
+  &__lock {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+  }
+
+  &__caption {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+  }
+
+  // Dimmed until the app connects (the design's 0.4 locked state). The `inert`
+  // attribute on the same element blocks pointer + keyboard interaction.
+  &__body--locked {
+    opacity: 0.4;
+  }
+
+  // Equal-width cards regardless of their copy length.
+  &__row > * {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  // Illustrative preview sits a little below the card's description.
+  &__preview {
+    margin-top: 6px;
+  }
+
+  // Rollout: a part-filled pill track.
+  &__track {
+    display: block;
+    width: 100%;
+    height: 8px;
+    border-radius: var(--radius-full);
+    background: var(--color-border-default);
+  }
+
+  &__track-fill {
+    display: block;
+    width: 25%;
+    height: 100%;
+    border-radius: var(--radius-full);
+    background: var(--color-surface-action);
+  }
+
+  // Experiment: an A/B segmented control.
+  &__segmented {
+    align-self: flex-start;
+    overflow: hidden;
+    border: 1px solid var(--color-border-default);
+    border-radius: var(--radius-lg);
+  }
+
+  &__segment {
+    padding: 5px 16px;
+    font-size: 12px;
+    color: var(--color-text-secondary);
+    background: var(--color-surface-default);
+
+    &--active {
+      color: var(--color-text-action);
+      background: var(--color-surface-action-subtle);
+    }
+  }
+
+  // Remote config: a value chip.
+  &__value-pill {
+    align-self: flex-start;
+    padding: 5px 10px;
+    border-radius: var(--radius-md);
+    font-size: 12px;
+  }
+}
diff --git a/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx b/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx
new file mode 100644
index 000000000000..e040e335039a
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx
@@ -0,0 +1,120 @@
+import React, { FC, ReactNode } from 'react'
+import classNames from 'classnames'
+import Icon from 'components/icons/Icon'
+import SelectableCard from 'components/base/SelectableCard/SelectableCard'
+import './OnboardingNextSteps.scss'
+
+export type OnboardingNextStep = 'rollout' | 'experiment' | 'remote-config'
+
+export type OnboardingNextStepsProps = {
+  // Locked (dimmed, non-interactive) until the app connects, like the flags
+  // table - the steps only make sense once the flag is live.
+  locked: boolean
+  onSelect: (step: OnboardingNextStep) => void
+}
+
+// A 25%-filled track: "ship to a % of your users".
+const RolloutPreview: FC = () => (
+  <span className='onboarding-next-steps__track'>
+    <span className='onboarding-next-steps__track-fill' />
+  </span>
+)
+
+// An A/B segmented control, A selected.
+const ExperimentPreview: FC = () => (
+  <span className='onboarding-next-steps__segmented d-inline-flex'>
+    <span className='onboarding-next-steps__segment onboarding-next-steps__segment--active'>
+      A
+    </span>
+    <span className='onboarding-next-steps__segment'>B</span>
+  </span>
+)
+
+// A value chip: "serve a value, not just on/off".
+const RemoteConfigPreview: FC = () => (
+  <span className='onboarding-next-steps__value-pill bg-surface-action-subtle text-action'>
+    {'"theme": "dark"'}
+  </span>
+)
+
+const STEPS: {
+  key: OnboardingNextStep
+  title: string
+  description: string
+  preview: ReactNode
+  caption?: string
+}[] = [
+  {
+    caption: '25% of users',
+    description: 'Ship to a % of your users.',
+    key: 'rollout',
+    preview: <RolloutPreview />,
+    title: 'Gradual rollout',
+  },
+  {
+    description: 'A/B test which variant wins.',
+    key: 'experiment',
+    preview: <ExperimentPreview />,
+    title: 'Experiment',
+  },
+  {
+    description: 'Serve a value, not just on/off.',
+    key: 'remote-config',
+    preview: <RemoteConfigPreview />,
+    title: 'Remote config',
+  },
+]
+
+// "Choose your next quest": the three ways the demo flag can level up, each
+// linking to its real config (the page owns where). Locked until the app
+// connects.
+const OnboardingNextSteps: FC<OnboardingNextStepsProps> = ({
+  locked,
+  onSelect,
+}) => (
+  <section className='onboarding-next-steps d-flex flex-column gap-2'>
+    {locked && (
+      <span className='onboarding-next-steps__lock d-flex align-items-center gap-1'>
+        <Icon name='lock' width={13} />
+        Unlocks after your first evaluation
+      </span>
+    )}
+    <div
+      className={classNames('d-flex flex-column gap-3', {
+        'onboarding-next-steps__body--locked': locked,
+      })}
+      inert={locked || undefined}
+    >
+      <div className='d-flex flex-column gap-1'>
+        <h3 className='onboarding-next-steps__title m-0 fw-bold text-default'>
+          Choose your next quest
+        </h3>
+        <p className='onboarding-next-steps__subtitle m-0'>
+          You&apos;ve built a basic on/off feature toggle. The same flag can
+          evolve into any of these, no new code, just configuration.
+        </p>
+      </div>
+      <div className='onboarding-next-steps__row d-flex gap-3'>
+        {STEPS.map((step) => (
+          <SelectableCard
+            key={step.key}
+            title={step.title}
+            description={step.description}
+            onClick={() => onSelect(step.key)}
+          >
+            <span className='onboarding-next-steps__preview d-flex flex-column gap-2'>
+              {step.preview}
+              {step.caption && (
+                <span className='onboarding-next-steps__caption'>
+                  {step.caption}
+                </span>
+              )}
+            </span>
+          </SelectableCard>
+        ))}
+      </div>
+    </div>
+  </section>
+)
+
+export default OnboardingNextSteps
diff --git a/frontend/web/components/pages/onboarding/OnboardingNextSteps/index.ts b/frontend/web/components/pages/onboarding/OnboardingNextSteps/index.ts
new file mode 100644
index 000000000000..277a26e34374
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/OnboardingNextSteps/index.ts
@@ -0,0 +1,5 @@
+export { default } from './OnboardingNextSteps'
+export type {
+  OnboardingNextStep,
+  OnboardingNextStepsProps,
+} from './OnboardingNextSteps'
diff --git a/frontend/web/components/pages/onboarding/hooks/useOnboardingFlag.ts b/frontend/web/components/pages/onboarding/hooks/useOnboardingFlag.ts
index 62ec6e30832b..a931208c0574 100644
--- a/frontend/web/components/pages/onboarding/hooks/useOnboardingFlag.ts
+++ b/frontend/web/components/pages/onboarding/hooks/useOnboardingFlag.ts
@@ -59,6 +59,8 @@ export const useOnboardingFlag = (
 
   return {
     enabled: !!displayEnabled,
+    // The flag's id, so the next-step cards can deep-link to its config.
+    flagId: flag?.id ?? null,
     isToggling: isLoading,
     ready: !!state,
     tags,

From a553b1f518a293fc3d2360f9a304c1f2f0f3930b Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 2 Jul 2026 10:54:10 -0300
Subject: [PATCH 03/19] feat(onboarding): lock hint on the flags table

Add the "Flip it once your app connects" lock affordance beside the Your
flags heading while the toggle is waiting to connect.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../OnboardingFlagsTable.scss                 |  6 ++++++
 .../OnboardingFlagsTable.tsx                  | 21 +++++++++++++------
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.scss b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.scss
index a55b52bb8bce..dc24f8b8f51a 100644
--- a/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.scss
+++ b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.scss
@@ -8,6 +8,12 @@
     font-size: 16px;
   }
 
+  // Lock affordance beside the title while the toggle is waiting to connect.
+  &__hint {
+    font-size: 13px;
+    color: var(--color-text-tertiary);
+  }
+
   &__table {
     width: 100%;
     max-width: 760px;
diff --git a/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.tsx b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.tsx
index 2b3fcf580760..58dc7fffa825 100644
--- a/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.tsx
@@ -4,6 +4,7 @@ import { Tag as TTag } from 'common/types/responses'
 import FeatureName from 'components/feature-summary/FeatureName'
 import Tag from 'components/tags/Tag'
 import Switch from 'components/Switch'
+import Icon from 'components/icons/Icon'
 import './OnboardingFlagsTable.scss'
 
 export type OnboardingFlagsTableStatus = 'waiting' | 'connected'
@@ -41,12 +42,20 @@ const OnboardingFlagsTable: FC<OnboardingFlagsTableProps> = ({
       className='onboarding-flags d-flex flex-column align-items-center'
       aria-labelledby='onboarding-flags-title'
     >
-      <h3
-        className='onboarding-flags__title m-0 fw-bold'
-        id='onboarding-flags-title'
-      >
-        Your flags
-      </h3>
+      <div className='onboarding-flags__heading d-flex align-items-center gap-2'>
+        <h3
+          className='onboarding-flags__title m-0 fw-bold'
+          id='onboarding-flags-title'
+        >
+          Your flags
+        </h3>
+        {waiting && (
+          <span className='onboarding-flags__hint d-flex align-items-center gap-1'>
+            <Icon name='lock' width={13} />
+            Flip it once your app connects
+          </span>
+        )}
+      </div>
       <div
         className={classNames(
           'onboarding-flags__table bg-surface-default rounded-xl',

From 12e69c91ba8a824dd7b1b5a1479eab600401f1db Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Thu, 2 Jul 2026 10:54:12 -0300
Subject: [PATCH 04/19] test(onboarding): e2e for the next-quest cards

Assert the cards are locked before the first evaluation, and that once
connected each one deep-links to the right destination.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/e2e/tests/onboarding-tests.pw.ts | 27 +++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/frontend/e2e/tests/onboarding-tests.pw.ts b/frontend/e2e/tests/onboarding-tests.pw.ts
index a529760f6399..762da7b82585 100644
--- a/frontend/e2e/tests/onboarding-tests.pw.ts
+++ b/frontend/e2e/tests/onboarding-tests.pw.ts
@@ -48,6 +48,11 @@ test.describe('Onboarding', () => {
     await expect(page.getByText('LISTENING')).toBeVisible();
     await expect(page.getByText('Copy install command')).not.toContainText('✓');
 
+    // Before the first evaluation, the next-quest cards are locked.
+    await expect(
+      page.getByText('Unlocks after your first evaluation'),
+    ).toBeVisible();
+
     log('Copy snippets, checklist ticks');
     await page.getByRole('button', { name: 'Copy install command' }).click();
     await expect(page.getByText('Copy install command')).toContainText('✓');
@@ -101,5 +106,27 @@ test.describe('Onboarding', () => {
         .getByText('Onboarding', { exact: true }),
     ).toBeVisible();
     await visualSnapshot(page, 'onboarding-renamed', testInfo);
+
+    // The next-quest cards unlock once connected, each deep-linking to the
+    // flag's real config (nothing faked).
+    log('Next-quest cards link to the real config');
+    await expect(
+      page.getByRole('heading', { name: 'Choose your next quest' }),
+    ).toBeVisible();
+
+    await page.getByRole('button', { name: /Gradual rollout/ }).click();
+    await expect(page).toHaveURL(
+      /\/features\?feature=\d+&tab=segment-overrides/,
+    );
+
+    await page.goto('/getting-started?connected');
+    await flowReady();
+    await page.getByRole('button', { name: /Remote config/ }).click();
+    await expect(page).toHaveURL(/\/features\?feature=\d+&tab=value/);
+
+    await page.goto('/getting-started?connected');
+    await flowReady();
+    await page.getByRole('button', { name: /Experiment/ }).click();
+    await expect(page).toHaveURL(/\/experiments$/);
   });
 });

From 3292d244a0423dc521e82faaf522d8946b8395be Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Jul 2026 14:41:12 -0300
Subject: [PATCH 05/19] chore(onboarding): import classnames as cn to match
 SelectableCard

Review nit: align the classnames import name with SelectableCard's.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx b/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx
index e040e335039a..5cb3b602ca06 100644
--- a/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingNextSteps/OnboardingNextSteps.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react'
-import classNames from 'classnames'
+import cn from 'classnames'
 import Icon from 'components/icons/Icon'
 import SelectableCard from 'components/base/SelectableCard/SelectableCard'
 import './OnboardingNextSteps.scss'
@@ -80,7 +80,7 @@ const OnboardingNextSteps: FC<OnboardingNextStepsProps> = ({
       </span>
     )}
     <div
-      className={classNames('d-flex flex-column gap-3', {
+      className={cn('d-flex flex-column gap-3', {
         'onboarding-next-steps__body--locked': locked,
       })}
       inert={locked || undefined}

From a8fb6bddb63ea2d3bfa5aef12100e2b987ec433d Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Wed, 8 Jul 2026 15:36:03 -0300
Subject: [PATCH 06/19] fix(onboarding): only show the code-card scrollbar on
 overflow

The code card used overflow-x: scroll, rendering an empty scroll track even
when the snippet fits. Switch to auto so the bar shows only on overflow; the
webkit rule still forces it over the global dark-scroll mixin's hover toggle,
so a long snippet's bar doesn't flicker.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../OnboardingConnectPanel.scss                    | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.scss b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.scss
index 55e5df84ecd0..80147b9e5daa 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.scss
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.scss
@@ -47,10 +47,10 @@
       border: 0;
       border-radius: 0;
       color: var(--color-text-default);
-      // Reserve the scrollbar gutter permanently so hover doesn't shove the
-      // layout (the global dark-scroll mixin toggles display:none on a
-      // space-reserving webkit bar otherwise).
-      overflow-x: scroll;
+      // Scroll only when the snippet overflows. When it does, the webkit rule
+      // below forces the bar visible over the global dark-scroll mixin (which
+      // display:none-s it on hover), so a long snippet's bar doesn't flicker.
+      overflow-x: auto;
       overflow-y: hidden;
 
       &::-webkit-scrollbar,
@@ -100,12 +100,6 @@
     border-bottom: 1px solid var(--color-border-default);
   }
 
-  &__codecard-lang {
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: var(--color-text-secondary);
-  }
-
   &__pm {
     border-radius: 6px;
     overflow: hidden;

From fd9d68a5f727e9c9b90639b793a8eb3e22c7b385 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Wed, 8 Jul 2026 15:36:04 -0300
Subject: [PATCH 07/19] style(onboarding): show the selected SDK as a badge in
 the code card

Replace the plain text language label in the code card header with the same
accent badge (logo + label) the SDK picker uses for the selected chip, in
semibold. Reuses the Chip primitive rather than the bespoke label style.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../ConnectYourCodePanel.tsx                  | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx
index b66882d24569..b73ec452890c 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx
@@ -1,5 +1,6 @@
 import React, { FC, useState } from 'react'
 import classNames from 'classnames'
+import Chip from 'components/base/Chip'
 import CodeCard from './CodeCard'
 import SdkPicker from './SdkPicker'
 import { getSdkSnippet } from './sdkSnippets'
@@ -9,6 +10,18 @@ type PackageManager = 'npm' | 'yarn'
 
 const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'yarn']
 
+// The chosen SDK as an accent badge (logo + label), matching the picker's
+// selected chip - the code card labels its language with this.
+const SdkBadge: FC<{ lang: SdkLang }> = ({ lang }) => {
+  const Logo = lang.logo
+  return (
+    <Chip variant='accent' className='fw-semibold'>
+      <Logo />
+      {lang.label}
+    </Chip>
+  )
+}
+
 export type ConnectYourCodePanelProps = {
   environmentKey: string
   featureName: string
@@ -64,9 +77,7 @@ const ConnectYourCodePanel: FC<ConnectYourCodePanelProps> = ({
                 ))}
               </div>
             ) : (
-              <span className='onboarding-connect__codecard-lang'>
-                {sdkLang.label}
-              </span>
+              <SdkBadge lang={sdkLang} />
             )
           }
         />
@@ -83,11 +94,7 @@ const ConnectYourCodePanel: FC<ConnectYourCodePanelProps> = ({
           language={sdkSnippet.language}
           onCopy={onCopyWire}
           copyLabel='Copy code snippet'
-          headerLeft={
-            <span className='onboarding-connect__codecard-lang'>
-              {sdkLang.label}
-            </span>
-          }
+          headerLeft={<SdkBadge lang={sdkLang} />}
         />
       </div>
     </>

From 233b66164519c0004b267c666362b6ef9ba9a153 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Wed, 8 Jul 2026 15:51:06 -0300
Subject: [PATCH 08/19] fix(onboarding): make the JavaScript SDK logo legible
 on light mode

The JS logo hole-punched the letters out of the yellow square, so they showed
the chip behind them and washed out on a light chip. Draw it as the brand badge
instead - solid black JS on a rounded yellow square - so it reads on both light
and dark.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../logos/javascript-logo.tsx                    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/logos/javascript-logo.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/logos/javascript-logo.tsx
index f7299f0ae2f8..dca252b249f8 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/logos/javascript-logo.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/logos/javascript-logo.tsx
@@ -1,8 +1,16 @@
 import React from 'react'
-import Svg from './svg'
 
+// Two-tone on purpose: the other logos are single-fill glyphs, but JS is a
+// filled badge. Drawing the "JS" as solid black over the yellow square (rather
+// than the shared wrapper's hole-punch, which shows the chip through it and
+// washes out on a light chip) keeps it readable on both light and dark. Rounded
+// so it reads as a badge.
 export const JavascriptLogo = () => (
-  <Svg color='#F7DF1E'>
-    <path d='M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z' />
-  </Svg>
+  <svg viewBox='0 0 24 24' width={16} height={16} aria-hidden>
+    <rect width={24} height={24} rx={4} fill='#F7DF1E' />
+    <path
+      fill='#000'
+      d='M22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z'
+    />
+  </svg>
 )

From 8250b5d28e122ff27a7597a3e39705286374907d Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Wed, 8 Jul 2026 15:57:08 -0300
Subject: [PATCH 09/19] fix(code-help): correct the React init snippet

The shared React init snippet was two files mashed into one - two 'export
default function' (App and HomePage, invalid JS), duplicate imports, an unused
useFlagsmith import, and an App that never rendered HomePage. Make it one
coherent example: a named HomePage using useFlags, rendered inside the default
App wrapped in FlagsmithProvider. Shared via codeHelp.INIT, so this fixes the
snippet app-wide, including the onboarding wire step.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/common/code-help/init/init-react.js | 36 +++++++++-----------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/frontend/common/code-help/init/init-react.js b/frontend/common/code-help/init/init-react.js
index 6b1a3412cf0e..2791237c6b1f 100644
--- a/frontend/common/code-help/init/init-react.js
+++ b/frontend/common/code-help/init/init-react.js
@@ -3,9 +3,20 @@ import Constants from 'common/constants'
 export default (
   envId,
   { FEATURE_NAME, FEATURE_NAME_ALT, LIB_NAME, NPM_CLIENT },
-) => `// App root
-import ${LIB_NAME} from "${NPM_CLIENT}";
-import { FlagsmithProvider } from '@flagsmith/flagsmith/react';
+) => `import ${LIB_NAME} from "${NPM_CLIENT}";
+import { FlagsmithProvider, useFlags } from '${NPM_CLIENT}/react';
+
+export function HomePage() {
+  const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change
+  const ${FEATURE_NAME} = flags.${FEATURE_NAME}.enabled
+  const ${FEATURE_NAME_ALT} = flags.${FEATURE_NAME_ALT}.value
+  return (
+    &lt;>
+      {\`${FEATURE_NAME}: \${${FEATURE_NAME}}\`}
+      {\`${FEATURE_NAME_ALT}: \${${FEATURE_NAME_ALT}}\`}
+    &lt;/>
+  );
+}
 
 export default function App() {
   return (
@@ -17,21 +28,8 @@ export default function App() {
     : ''
 }
       }}
-      flagsmith={flagsmith}&gt;
-      {...Your app}
-    &lt;/FlagsmithProvider>
-  );
-}
-
-// Home Page
-import ${LIB_NAME} from '${NPM_CLIENT}';
-import { useFlags, useFlagsmith } from '${NPM_CLIENT}/react';
-
-export default function HomePage() {
-  const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change
-  const ${FEATURE_NAME} = flags.${FEATURE_NAME}.enabled
-  const ${FEATURE_NAME_ALT} = flags.${FEATURE_NAME_ALT}.value
-  return (
-    &lt;>{...}&lt;/>
+      flagsmith={${LIB_NAME}}&gt;
+      &lt;HomePage /&gt;
+    &lt;/FlagsmithProvider&gt;
   );
 }`

From 2cbe93a997eba2504bf4572b26aee3ef5bb2dd54 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Jul 2026 15:05:43 -0300
Subject: [PATCH 10/19] style(onboarding): match SDK picker chips to the badge
 weight

Apply fw-semibold to the selectable SDK chips (and the More/Less chip) so
they match the selected-SDK badge in the code card.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx
index e3f4ea0a3772..a0c4241e0420 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx
@@ -69,6 +69,7 @@ const SdkPicker: FC<SdkPickerProps> = ({ onSelect, selected }) => {
         ref={(el) => {
           refs.current[lang.label] = el
         }}
+        className='fw-semibold'
         role='radio'
         aria-checked={isSelected}
         tabIndex={lang.label === tabStopLabel ? 0 : -1}
@@ -91,6 +92,7 @@ const SdkPicker: FC<SdkPickerProps> = ({ onSelect, selected }) => {
       <div className='d-flex flex-wrap align-items-center gap-2'>
         {popularLangs.map(renderOption)}
         <Chip
+          className='fw-semibold'
           onClick={() => setMoreOpen((open) => !open)}
           aria-expanded={moreOpen}
         >

From c16c0ad643db46c89ad9e5c724d1e23e2edd561d Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Jul 2026 15:13:16 -0300
Subject: [PATCH 11/19] style(onboarding): add breathing room above the theme
 toggle

Review nit: bump the flow's top padding (4px -> 24px) so the theme-toggle
row isn't flush to the top edge.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../pages/onboarding/OnboardingFlow/OnboardingFlow.scss       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.scss b/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.scss
index 8b923ee20edd..9bee42832fe9 100644
--- a/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.scss
+++ b/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.scss
@@ -4,7 +4,7 @@
 // Centring is the `mx-auto` utility on the element.
 .onboarding-flow {
   max-width: 1100px;
-  // Minimal top padding so the theme-toggle row isn't flush to the very edge;
+  // Top padding gives the theme-toggle row room to breathe from the very edge;
   // sides + bottom keep the reading column off the edges.
-  padding: 4px 24px 40px;
+  padding: 24px 24px 40px;
 }

From d1d43882b0ba02c5d0d584761324e56be336c7ac Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Fri, 10 Jul 2026 18:58:19 -0300
Subject: [PATCH 12/19] style(onboarding): make inline-edit fields read as
 editable at rest

Review feedback (Matt): the org/project fields only showed a fill on hover, so
they read as plain text until clicked. Give them a resting fill (matching the
flag pill) and a full-opacity pencil, deepening on hover for feedback.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../onboarding/InlineInput/InlineInput.scss    | 18 ++++--------------
 .../onboarding/InlineInput/InlineInput.tsx     |  4 ++--
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss
index 80fb93e7b9da..1032d4ffac12 100644
--- a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss
+++ b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss
@@ -1,5 +1,3 @@
-// Inline editable value in the welcome sentence: an action underline + pencil,
-// with a faint highlight on hover/focus. Rationale lives in InlineInput.tsx.
 .inline-input {
   display: inline-flex;
   align-items: center;
@@ -8,25 +6,17 @@
   padding: 0 4px;
   border-radius: var(--radius-xs);
   border-bottom: 1px solid var(--color-border-action);
+  // Resting fill so it reads as editable, not only on hover.
+  background-color: var(--color-surface-subtle);
   cursor: text;
   transition: background-color var(--duration-fast) var(--easing-standard);
 
-  svg {
-    opacity: 0.8;
-    transition: opacity var(--duration-fast) var(--easing-standard);
-  }
-
   &:hover,
   &:focus-within {
-    background-color: var(--color-surface-subtle);
-
-    svg {
-      opacity: 1;
-    }
+    background-color: var(--color-surface-muted);
   }
 
-  // The hero value (flag name): a filled soft-purple pill instead of an
-  // underline, so it reads as the thing the user will reference in code.
+  // Flag name: a filled pill rather than an underline (it's referenced in code).
   &--accent {
     padding: 1px 8px;
     border-bottom: none;
diff --git a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.tsx b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.tsx
index 82ac5f2b173e..3e66caaf6db2 100644
--- a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.tsx
+++ b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.tsx
@@ -23,8 +23,8 @@ export type InlineInputProps = {
 }
 
 // Onboarding-local inline editable value (GhostInput + pencil) for the welcome
-// sentence: an action underline + pencil mark it editable, it commits on
-// blur/Enter, and an empty value reverts. Shares the VariationKeyLabel inline
+// sentence: a resting fill, action underline and pencil mark it editable; it
+// commits on blur/Enter, and an empty value reverts. Shares the VariationKeyLabel inline
 // edit's visual language but drops its buttons/validation to stay prose-like;
 // feature-local for now, both should converge on one primitive.
 const InlineInput: FC<InlineInputProps> = ({

From 4550c7a7fe39a48e548f544ed30b3ec110aede07 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Mon, 13 Jul 2026 15:10:22 -0300
Subject: [PATCH 13/19] fix(onboarding): avoid Safari contact autofill on
 inline-edit fields

Safari AutoFill read the "<thing> name" aria-label as a contact-name field
and showed its person icon on the project field. Label the fields "Edit
<thing>" instead: a clear accessible name Safari doesn't classify as a contact.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/pages/onboarding/InlineInput/InlineInput.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.tsx b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.tsx
index 3e66caaf6db2..4eba9d87737d 100644
--- a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.tsx
+++ b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.tsx
@@ -67,7 +67,8 @@ const InlineInput: FC<InlineInputProps> = ({
         value={draft}
         placeholder={label}
         maxLength={maxLength}
-        aria-label={`${label} name`}
+        // Avoid a "name" label here: Safari reads it as a contact field.
+        aria-label={`Edit ${label.toLowerCase()}`}
         onChange={(e) => {
           const raw = e.target.value
           setDraft(transform ? transform(raw) : raw)

From 21e67aaef468d714900e16ea8a539f7216db21b3 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Tue, 14 Jul 2026 09:02:07 -0300
Subject: [PATCH 14/19] test(onboarding): match e2e to the Edit-<field>
 aria-label

The flag rename step located the field via getByLabel('Flag name'); the field
is now labelled 'Edit flag' (Safari autofill fix), so point the selector there.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/e2e/tests/onboarding-tests.pw.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/e2e/tests/onboarding-tests.pw.ts b/frontend/e2e/tests/onboarding-tests.pw.ts
index 762da7b82585..4f7e483ae588 100644
--- a/frontend/e2e/tests/onboarding-tests.pw.ts
+++ b/frontend/e2e/tests/onboarding-tests.pw.ts
@@ -86,7 +86,7 @@ test.describe('Onboarding', () => {
     // Rename the flag. Names are immutable, so this delete + recreates; the
     // Onboarding tag must survive (the recreate carries the old flag's tags).
     log('Rename the flag');
-    const flagInput = page.getByLabel('Flag name');
+    const flagInput = page.getByLabel('Edit flag');
     await flagInput.fill('renamed_demo_flag');
     await flagInput.press('Enter');
 
@@ -99,7 +99,7 @@ test.describe('Onboarding', () => {
     // Reload to prove it persisted (bootstrap reuses the renamed flag).
     await page.reload();
     await flowReady();
-    await expect(page.getByLabel('Flag name')).toHaveValue('renamed_demo_flag');
+    await expect(page.getByLabel('Edit flag')).toHaveValue('renamed_demo_flag');
     await expect(
       page
         .getByRole('region', { name: 'Your flags' })

From 3f2c258946fb0b1e4c459868c61878cc173998ef Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Wed, 15 Jul 2026 09:46:12 -0300
Subject: [PATCH 15/19] fix(onboarding): use font-weight-semibold, fw-semibold
 is a no-op here

Review (Kyle): the chips/badge weren't rendering semibold. The project's
working weight class is .font-weight-semibold (token + !important); Bootstrap's
.fw-semibold has no effect here. Swap it across the connect panel.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../OnboardingConnectPanel/ConnectWithAiPanel.tsx         | 6 ++++--
 .../OnboardingConnectPanel/ConnectYourCodePanel.tsx       | 8 +++++---
 .../pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx | 4 ++--
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectWithAiPanel.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectWithAiPanel.tsx
index 626a1000f44e..f16683da39c6 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectWithAiPanel.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectWithAiPanel.tsx
@@ -32,7 +32,7 @@ Detect my stack, install the SDK, and wire ${featureName} into one place. Then r
 
   return (
     <>
-      <span className='text-default fw-semibold'>
+      <span className='text-default font-weight-semibold'>
         Paste this into your AI coding agent’s chat
       </span>
       <div className='bg-surface-muted p-3 d-flex align-items-start gap-3 rounded-md'>
@@ -50,7 +50,9 @@ Detect my stack, install the SDK, and wire ${featureName} into one place. Then r
         </Button>
       </div>
       <div>
-        <span className='text-default fw-semibold'>What happens next</span>
+        <span className='text-default font-weight-semibold'>
+          What happens next
+        </span>
         <ul className='onboarding-connect__steps text-muted mt-2 mb-0'>
           <li>Detects your stack: language, framework and package manager.</li>
           <li>Installs the Flagsmith SDK and wires it into your code.</li>
diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx
index b73ec452890c..d2477881a1ca 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx
@@ -15,7 +15,7 @@ const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'yarn']
 const SdkBadge: FC<{ lang: SdkLang }> = ({ lang }) => {
   const Logo = lang.logo
   return (
-    <Chip variant='accent' className='fw-semibold'>
+    <Chip variant='accent' className='font-weight-semibold'>
       <Logo />
       {lang.label}
     </Chip>
@@ -53,7 +53,9 @@ const ConnectYourCodePanel: FC<ConnectYourCodePanelProps> = ({
       <div>
         <div className='onboarding-connect__step-head d-flex align-items-center gap-2 mb-2'>
           <span className='onboarding-connect__step-num'>1</span>
-          <span className='text-default fw-semibold'>Install the SDK</span>
+          <span className='text-default font-weight-semibold'>
+            Install the SDK
+          </span>
         </div>
         <CodeCard
           code={installCode}
@@ -85,7 +87,7 @@ const ConnectYourCodePanel: FC<ConnectYourCodePanelProps> = ({
       <div>
         <div className='onboarding-connect__step-head d-flex align-items-center gap-2 mb-2'>
           <span className='onboarding-connect__step-num'>2</span>
-          <span className='text-default fw-semibold'>
+          <span className='text-default font-weight-semibold'>
             Wire it in &amp; take instant control of what users see
           </span>
         </div>
diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx
index a0c4241e0420..2c0b7e81a4dc 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx
@@ -69,7 +69,7 @@ const SdkPicker: FC<SdkPickerProps> = ({ onSelect, selected }) => {
         ref={(el) => {
           refs.current[lang.label] = el
         }}
-        className='fw-semibold'
+        className='font-weight-semibold'
         role='radio'
         aria-checked={isSelected}
         tabIndex={lang.label === tabStopLabel ? 0 : -1}
@@ -92,7 +92,7 @@ const SdkPicker: FC<SdkPickerProps> = ({ onSelect, selected }) => {
       <div className='d-flex flex-wrap align-items-center gap-2'>
         {popularLangs.map(renderOption)}
         <Chip
-          className='fw-semibold'
+          className='font-weight-semibold'
           onClick={() => setMoreOpen((open) => !open)}
           aria-expanded={moreOpen}
         >

From ae7a277db9637b0e036efccefa8908753b8f58f6 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Wed, 15 Jul 2026 09:46:15 -0300
Subject: [PATCH 16/19] style(onboarding): soften inline-edit radius and
 spacing

Review (Kyle): the resting-fill fields felt cramped. Bump the radius to
--radius-sm and the padding to 1px 8px, matching the flag pill.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/pages/onboarding/InlineInput/InlineInput.scss  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss
index 1032d4ffac12..e1dec31ac08b 100644
--- a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss
+++ b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss
@@ -3,8 +3,8 @@
   align-items: center;
   vertical-align: baseline;
   gap: 4px;
-  padding: 0 4px;
-  border-radius: var(--radius-xs);
+  padding: 1px 8px;
+  border-radius: var(--radius-sm);
   border-bottom: 1px solid var(--color-border-action);
   // Resting fill so it reads as editable, not only on hover.
   background-color: var(--color-surface-subtle);

From 8767248170d313d2536982abada7a50a30a915f5 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Wed, 15 Jul 2026 09:49:02 -0300
Subject: [PATCH 17/19] style(onboarding): round only the top of the
 inline-edit fields

Rounded bottom corners fought the action underline. Square the bottom so it
sits flush; the flag pill (no underline) keeps its full radius.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/pages/onboarding/InlineInput/InlineInput.scss  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss
index e1dec31ac08b..68285be954db 100644
--- a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss
+++ b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss
@@ -4,7 +4,9 @@
   vertical-align: baseline;
   gap: 4px;
   padding: 1px 8px;
-  border-radius: var(--radius-sm);
+  // Round the top only; the bottom stays square so it sits flush with the
+  // action underline (rounded bottom corners fight the border).
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   border-bottom: 1px solid var(--color-border-action);
   // Resting fill so it reads as editable, not only on hover.
   background-color: var(--color-surface-subtle);

From 765339e068323e047378abe8e36833ec89d77d0c Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Wed, 15 Jul 2026 09:52:03 -0300
Subject: [PATCH 18/19] style(onboarding): medium weight on the SDK badges

Semibold read too heavy on the chips; use font-weight-medium for the SDK
badge and picker chips. Section headings stay semibold.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../OnboardingConnectPanel/ConnectYourCodePanel.tsx           | 2 +-
 .../pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx
index d2477881a1ca..a32a58387b42 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx
@@ -15,7 +15,7 @@ const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'yarn']
 const SdkBadge: FC<{ lang: SdkLang }> = ({ lang }) => {
   const Logo = lang.logo
   return (
-    <Chip variant='accent' className='font-weight-semibold'>
+    <Chip variant='accent' className='font-weight-medium'>
       <Logo />
       {lang.label}
     </Chip>
diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx
index 2c0b7e81a4dc..fb477210edc1 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx
@@ -69,7 +69,7 @@ const SdkPicker: FC<SdkPickerProps> = ({ onSelect, selected }) => {
         ref={(el) => {
           refs.current[lang.label] = el
         }}
-        className='font-weight-semibold'
+        className='font-weight-medium'
         role='radio'
         aria-checked={isSelected}
         tabIndex={lang.label === tabStopLabel ? 0 : -1}
@@ -92,7 +92,7 @@ const SdkPicker: FC<SdkPickerProps> = ({ onSelect, selected }) => {
       <div className='d-flex flex-wrap align-items-center gap-2'>
         {popularLangs.map(renderOption)}
         <Chip
-          className='font-weight-semibold'
+          className='font-weight-medium'
           onClick={() => setMoreOpen((open) => !open)}
           aria-expanded={moreOpen}
         >

From 2e1fdc23428fb7fbc766003d9992d4a5d1280501 Mon Sep 17 00:00:00 2001
From: Talisson Costa <talisson.odcosta@gmail.com>
Date: Wed, 15 Jul 2026 10:13:16 -0300
Subject: [PATCH 19/19] style(onboarding): tighten inline-edit radius to 2px

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/pages/onboarding/InlineInput/InlineInput.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss
index 68285be954db..045c13b15612 100644
--- a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss
+++ b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss
@@ -6,7 +6,7 @@
   padding: 1px 8px;
   // Round the top only; the bottom stays square so it sits flush with the
   // action underline (rounded bottom corners fight the border).
-  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
   border-bottom: 1px solid var(--color-border-action);
   // Resting fill so it reads as editable, not only on hover.
   background-color: var(--color-surface-subtle);