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 1/4] 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 2/4] 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 3/4] 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 4/4] 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$/);
   });
 });