diff --git a/frontend/documentation/pages/onboarding/OnboardingFlagsTable.stories.tsx b/frontend/documentation/pages/onboarding/OnboardingFlagsTable.stories.tsx
new file mode 100644
index 000000000000..bf37298058af
--- /dev/null
+++ b/frontend/documentation/pages/onboarding/OnboardingFlagsTable.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from 'storybook'
+
+import OnboardingFlagsTable, {
+  OnboardingFlagRow,
+} from 'components/pages/onboarding/OnboardingFlagsTable'
+
+const demoFlag: OnboardingFlagRow = {
+  description: 'Controls the demo button shown to your users',
+  enabled: true,
+  name: 'show_demo_button',
+}
+
+const meta: Meta<typeof OnboardingFlagsTable> = {
+  args: {
+    flags: [demoFlag],
+    onToggle: () => {},
+    status: 'connected',
+  },
+  component: OnboardingFlagsTable,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The "Your flags" card from the onboarding flow, reusing the product FeatureName / Tag / Switch. Prop-driven: the page owns the flag data and the persisted Dev toggle. `connected` lifts the card with the accent border and glow; `waiting` dims it until the first evaluation arrives.',
+      },
+    },
+    layout: 'padded',
+  },
+  title: 'Pages/Onboarding/OnboardingFlagsTable',
+}
+export default meta
+
+type Story = StoryObj<typeof OnboardingFlagsTable>
+
+export const Connected: Story = {}
+
+export const Waiting: Story = {
+  args: { status: 'waiting' },
+}
+
+export const Off: Story = {
+  args: { flags: [{ ...demoFlag, enabled: false }] },
+}
+
+export const WithTag: Story = {
+  args: {
+    flags: [{ ...demoFlag, tags: [{ color: '#6837FC', label: 'demo' }] }],
+  },
+}
diff --git a/frontend/documentation/pages/onboarding/OnboardingTerminal.stories.tsx b/frontend/documentation/pages/onboarding/OnboardingTerminal.stories.tsx
new file mode 100644
index 000000000000..8320c402bdce
--- /dev/null
+++ b/frontend/documentation/pages/onboarding/OnboardingTerminal.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from 'storybook'
+
+import OnboardingTerminal from 'components/pages/onboarding/OnboardingTerminal'
+
+const meta: Meta<typeof OnboardingTerminal> = {
+  args: {
+    connected: false,
+    featureName: 'show_demo_button',
+    installCopied: false,
+    snippetCopied: false,
+  },
+  component: OnboardingTerminal,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The onboarding verify console. The checklist ticks as the user acts (copy install, copy snippet), and the first evaluation flips the badge to LIVE and prints the connection receipt. Always dark, since a terminal reads the same in light and dark mode.',
+      },
+    },
+    layout: 'padded',
+  },
+  title: 'Pages/Onboarding/OnboardingTerminal',
+}
+export default meta
+
+type Story = StoryObj<typeof OnboardingTerminal>
+
+export const Listening: Story = {}
+
+export const InstallCopied: Story = {
+  args: { installCopied: true },
+}
+
+export const SnippetsCopied: Story = {
+  args: { installCopied: true, snippetCopied: true },
+}
+
+export const Connected: Story = {
+  args: { connected: true, installCopied: true, snippetCopied: true },
+}
diff --git a/frontend/web/components/base/forms/GhostInput/GhostInput.tsx b/frontend/web/components/base/forms/GhostInput/GhostInput.tsx
index 2b4b7b381f04..8b1128702a5a 100644
--- a/frontend/web/components/base/forms/GhostInput/GhostInput.tsx
+++ b/frontend/web/components/base/forms/GhostInput/GhostInput.tsx
@@ -63,6 +63,11 @@ const GhostInput = ({
         onKeyDown={onKeyDown}
         aria-label={ariaLabel}
         spellCheck={false}
+        // Opt out of browser autofill + password-manager overlays (1Password,
+        // LastPass); their icons would overlap the trailing edit pencil.
+        autoComplete='off'
+        data-1p-ignore
+        data-lpignore='true'
         style={{ width: inputWidth }}
       />
     </span>
diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/CodeCard.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/CodeCard.tsx
index 5dba7a0fe286..276602c213e5 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/CodeCard.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/CodeCard.tsx
@@ -10,11 +10,18 @@ export type CodeCardProps = {
   language: string
   // Left side of the card header (e.g. the language label or npm/yarn pills).
   headerLeft: ReactNode
+  // Fires when the user copies the code (drives the verify checklist).
+  onCopy?: () => void
 }
 
 // Owns its own "Copied" feedback so each card is independent. Highlight escapes
 // the body for display; Copy uses the raw string.
-const CodeCard: FC<CodeCardProps> = ({ code, headerLeft, language }) => {
+const CodeCard: FC<CodeCardProps> = ({
+  code,
+  headerLeft,
+  language,
+  onCopy,
+}) => {
   const { copied, copy } = useCopyFeedback()
 
   return (
@@ -25,7 +32,10 @@ const CodeCard: FC<CodeCardProps> = ({ code, headerLeft, language }) => {
           theme='primary'
           size='small'
           className='ms-auto'
-          onClick={() => copy(code)}
+          onClick={() => {
+            copy(code)
+            onCopy?.()
+          }}
         >
           <span
             className='d-inline-flex align-items-center gap-1'
diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx
index 7bc0aca6780b..8268e0e1f3b0 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx
@@ -12,13 +12,18 @@ const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'yarn']
 export type ConnectYourCodePanelProps = {
   environmentKey: string
   featureName: string
+  onCopyInstall?: () => void
+  onCopyWire?: () => void
 }
 
 // "Connect your code" tab: pick an SDK, then copy the install + wire snippets,
-// pre-filled with the real env key and flag this onboarding created.
+// pre-filled with the real env key and flag this onboarding created. The copy
+// actions feed the verify checklist.
 const ConnectYourCodePanel: FC<ConnectYourCodePanelProps> = ({
   environmentKey,
   featureName,
+  onCopyInstall,
+  onCopyWire,
 }) => {
   const [sdkLang, setSdkLang] = useState<SdkLang>(SDK_LANGS[0])
   const [installPm, setInstallPm] = useState<PackageManager>('npm')
@@ -40,6 +45,7 @@ const ConnectYourCodePanel: FC<ConnectYourCodePanelProps> = ({
         <CodeCard
           code={installCode}
           language='bash'
+          onCopy={onCopyInstall}
           headerLeft={
             sdkSnippet.installYarn ? (
               <div className='onboarding-connect__pm d-inline-flex'>
@@ -74,6 +80,7 @@ const ConnectYourCodePanel: FC<ConnectYourCodePanelProps> = ({
         <CodeCard
           code={sdkSnippet.wire}
           language={sdkSnippet.language}
+          onCopy={onCopyWire}
           headerLeft={
             <span className='onboarding-connect__codecard-lang'>
               {sdkLang.label}
diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.tsx
index d74c815098fe..3e76d28ae58f 100644
--- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.tsx
@@ -28,6 +28,8 @@ const CONNECT_TABS: OnboardingTab<ConnectTab>[] = [
 export type OnboardingConnectPanelProps = {
   environmentKey: string
   featureName: string
+  onCopyInstall?: () => void
+  onCopyWire?: () => void
 }
 
 // Two ways to connect an app to the pre-created flag: paste an agent-agnostic
@@ -37,6 +39,8 @@ export type OnboardingConnectPanelProps = {
 const OnboardingConnectPanel: FC<OnboardingConnectPanelProps> = ({
   environmentKey,
   featureName,
+  onCopyInstall,
+  onCopyWire,
 }) => {
   const [tab, setTab] = useState<ConnectTab>('manual')
 
@@ -68,6 +72,8 @@ const OnboardingConnectPanel: FC<OnboardingConnectPanelProps> = ({
         <ConnectYourCodePanel
           environmentKey={environmentKey}
           featureName={featureName}
+          onCopyInstall={onCopyInstall}
+          onCopyWire={onCopyWire}
         />
       </OnboardingTabPanel>
     </div>
diff --git a/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.scss b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.scss
new file mode 100644
index 000000000000..3af80a41dbc8
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.scss
@@ -0,0 +1,92 @@
+// "Your flags" card. A normal light/dark surface (unlike the terminal), so it
+// uses the semantic tokens. Connected lifts it with the action/purple border +
+// glow to draw the eye; waiting dims it until the first evaluation lands.
+.onboarding-flags {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+
+  &__title {
+    margin: 0;
+    color: var(--color-text-default);
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  &__table {
+    width: 100%;
+    max-width: 760px;
+    overflow: hidden;
+    border-radius: var(--radius-xl);
+    background: var(--color-surface-default);
+    // Accent border + purple glow to lift the connected card (matches the mock).
+    // Derived from the action colour with oklch alpha so it tracks the theme.
+    border: 1px solid oklch(from var(--color-border-action) l c h / 0.4);
+    box-shadow: 0 18px 44px 2px oklch(from var(--color-border-action) l c h / 0.2),
+      var(--shadow-md);
+    transition: opacity var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard);
+
+    // Until the SDK connects the flag is real but quiet: no accent, dimmed.
+    &--waiting {
+      border-color: var(--color-border-default);
+      box-shadow: none;
+      opacity: 0.7;
+    }
+  }
+
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 20px;
+    border-bottom: 1px solid var(--color-border-default);
+  }
+
+  &__col {
+    color: var(--color-text-secondary);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+
+    &--feature {
+      flex: 1;
+    }
+    &--enabled {
+      width: 96px;
+    }
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 20px;
+  }
+
+  &__feature {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__name-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__desc {
+    margin: 0;
+    color: var(--color-text-secondary);
+    font-size: 12px;
+  }
+
+  // Match the ENABLED header column width so the toggle lines up under it.
+  &__toggle {
+    width: 96px;
+  }
+}
diff --git a/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.tsx b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.tsx
new file mode 100644
index 000000000000..b10cc80f3821
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/OnboardingFlagsTable.tsx
@@ -0,0 +1,82 @@
+import React, { FC } from 'react'
+import classNames from 'classnames'
+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 './OnboardingFlagsTable.scss'
+
+export type OnboardingFlagsTableStatus = 'waiting' | 'connected'
+
+export type OnboardingFlagRow = {
+  name: string
+  description?: string
+  tags?: Partial<TTag>[]
+  enabled: boolean
+}
+
+export type OnboardingFlagsTableProps = {
+  status: OnboardingFlagsTableStatus
+  flags: OnboardingFlagRow[]
+  onToggle: (flag: OnboardingFlagRow, enabled: boolean) => void
+  // Name of the flag whose toggle is mid-flight, so its Switch disables.
+  togglingFlag?: string | null
+}
+
+// The "Your flags" card from the onboarding design: the pre-created flag(s) in a
+// real-looking table that reuses the product FeatureName / Tag / Switch. Prop
+// driven (the page owns the data and the persisted toggle, see
+// useUpdateFeatureStateMutation). `connected` lifts the card with the accent
+// border + glow and enables the toggle; `waiting` dims it until the first
+// evaluation arrives.
+const OnboardingFlagsTable: FC<OnboardingFlagsTableProps> = ({
+  flags,
+  onToggle,
+  status,
+  togglingFlag,
+}) => {
+  const waiting = status === 'waiting'
+  return (
+    <section className='onboarding-flags'>
+      <h3 className='onboarding-flags__title'>Your flags</h3>
+      <div
+        className={classNames('onboarding-flags__table', {
+          'onboarding-flags__table--waiting': waiting,
+        })}
+      >
+        <div className='onboarding-flags__head'>
+          <span className='onboarding-flags__col onboarding-flags__col--feature'>
+            FEATURE
+          </span>
+          <span className='onboarding-flags__col onboarding-flags__col--enabled'>
+            ENABLED
+          </span>
+        </div>
+        {flags.map((flag) => (
+          <div className='onboarding-flags__row' key={flag.name}>
+            <div className='onboarding-flags__feature'>
+              <div className='onboarding-flags__name-row'>
+                <FeatureName name={flag.name} />
+                {flag.tags?.map((tag) => (
+                  <Tag key={tag.id ?? tag.label} tag={tag} />
+                ))}
+              </div>
+              {flag.description && (
+                <p className='onboarding-flags__desc'>{flag.description}</p>
+              )}
+            </div>
+            <div className='onboarding-flags__toggle'>
+              <Switch
+                checked={flag.enabled}
+                disabled={togglingFlag === flag.name}
+                onChange={(enabled) => onToggle(flag, enabled)}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default OnboardingFlagsTable
diff --git a/frontend/web/components/pages/onboarding/OnboardingFlagsTable/index.ts b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/index.ts
new file mode 100644
index 000000000000..435ba4d35415
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/OnboardingFlagsTable/index.ts
@@ -0,0 +1,6 @@
+export { default } from './OnboardingFlagsTable'
+export type {
+  OnboardingFlagRow,
+  OnboardingFlagsTableProps,
+  OnboardingFlagsTableStatus,
+} from './OnboardingFlagsTable'
diff --git a/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx b/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx
index ab5c26ea3354..09c7189196aa 100644
--- a/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx
+++ b/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx
@@ -5,8 +5,12 @@ import Icon from 'components/icons/Icon'
 import OnboardingHeader from 'components/pages/onboarding/OnboardingHeader'
 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 { useEnsureOnboardingResources } from 'components/pages/onboarding/hooks/useEnsureOnboardingResources'
 import { useOnboardingFlagRename } from 'components/pages/onboarding/hooks/useOnboardingFlagRename'
+import { useOnboardingFlag } from 'components/pages/onboarding/hooks/useOnboardingFlag'
+import { useOnboardingConnection } from 'components/pages/onboarding/hooks/useOnboardingConnection'
 import { useUpdateOrganisationMutation } from 'common/services/useOrganisation'
 import { useUpdateProjectMutation } from 'common/services/useProject'
 import './OnboardingFlow.scss'
@@ -16,7 +20,7 @@ import './OnboardingFlow.scss'
 //
 // Resources (org / project / Dev + Prod / first flag) are bootstrapped
 // idempotently by useEnsureOnboardingResources, and the inline header chips
-// persist renames. TODO(#7766): the verify console / flags table land on top.
+// persist renames; the verify terminal and flags table render below (#7766).
 const OnboardingFlow: FC = () => {
   const {
     caseSensitive,
@@ -59,6 +63,20 @@ const OnboardingFlow: FC = () => {
     projectId,
   })
 
+  // Verify terminal + flags table. The checklist ticks as the user copies the
+  // install / wire snippets; the connection step is stubbed until the
+  // first-evaluation signal lands (#7767, behind useOnboardingConnection); the
+  // Dev toggle is real now.
+  const connection = useOnboardingConnection()
+  const [installCopied, setInstallCopied] = useState(false)
+  const [snippetCopied, setSnippetCopied] = useState(false)
+  const {
+    enabled: flagEnabled,
+    isToggling,
+    tags: flagTags,
+    toggle: toggleFlag,
+  } = useOnboardingFlag(environment, projectId, featureName)
+
   // Org/project are single-field PATCHes; the shell nav adopts the new names on
   // its next load.
   const renameOrganisation = async (name: string) => {
@@ -149,6 +167,27 @@ const OnboardingFlow: FC = () => {
       <OnboardingConnectPanel
         environmentKey={environmentKey}
         featureName={featureName}
+        onCopyInstall={() => setInstallCopied(true)}
+        onCopyWire={() => setSnippetCopied(true)}
+      />
+      <OnboardingTerminal
+        featureName={featureName}
+        installCopied={installCopied}
+        snippetCopied={snippetCopied}
+        connected={connection === 'connected'}
+      />
+      <OnboardingFlagsTable
+        status={connection === 'connected' ? 'connected' : 'waiting'}
+        flags={[
+          {
+            description: 'Controls the demo button shown to your users',
+            enabled: flagEnabled,
+            name: featureName,
+            tags: flagTags,
+          },
+        ]}
+        onToggle={(_flag, next) => toggleFlag(next)}
+        togglingFlag={isToggling ? featureName : null}
       />
       <div className='d-flex justify-content-end'>
         <Button theme='text' onClick={skipToApp}>
diff --git a/frontend/web/components/pages/onboarding/OnboardingTerminal/OnboardingTerminal.scss b/frontend/web/components/pages/onboarding/OnboardingTerminal/OnboardingTerminal.scss
new file mode 100644
index 000000000000..a58974973bef
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/OnboardingTerminal/OnboardingTerminal.scss
@@ -0,0 +1,144 @@
+// The onboarding verify console. Always dark (a terminal reads the same in
+// light and dark mode), so it uses the design's literal console palette rather
+// than the theme tokens. Colours match the Pencil "sdk console" frame.
+.onboarding-terminal {
+  overflow: hidden;
+  border-radius: var(--radius-xl);
+  background: #0d1117;
+  font-family: var(--font-family-mono, monospace);
+  font-size: 13px;
+  line-height: 1.6;
+
+  &__bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    background: #161b22;
+  }
+
+  &__dot {
+    flex-shrink: 0;
+    width: 12px;
+    height: 12px;
+    border-radius: var(--radius-full);
+
+    &--red {
+      background: #ff5f57;
+    }
+    &--amber {
+      background: #ffbd2e;
+    }
+    &--green {
+      background: #28c840;
+    }
+  }
+
+  &__title {
+    color: #8b949e;
+    font-size: 12px;
+  }
+
+  &__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: auto;
+    padding: 3px 8px;
+    border-radius: var(--radius-full);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+
+    &--listening {
+      background: #3d2b00;
+      color: #f0883e;
+    }
+    &--live {
+      background: #0d4429;
+      color: #3fb950;
+    }
+  }
+
+  &__badge-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: var(--radius-full);
+    background: currentColor;
+  }
+
+  &__badge--listening &__badge-dot {
+    animation: onboarding-terminal-pulse 1.4s var(--easing-standard, ease-in-out)
+      infinite;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 20px 24px;
+  }
+
+  // Default line = pending checklist grey.
+  &__line {
+    margin: 0;
+    color: #6e7781;
+
+    &--ok {
+      color: #3fb950;
+    }
+    &--strong {
+      font-weight: 600;
+    }
+    &--dim {
+      color: #484f58;
+    }
+    &--muted {
+      color: #8b949e;
+    }
+    &--current {
+      color: #f0883e;
+    }
+    &--prompt {
+      color: #8b949e;
+    }
+  }
+
+  // Blinking cursor block after the prompt - the "typewriter" cue.
+  &__cursor {
+    display: inline-block;
+    width: 8px;
+    height: 1em;
+    vertical-align: text-bottom;
+    background: #3fb950;
+    animation: onboarding-terminal-blink 1.1s steps(1) infinite;
+  }
+}
+
+@keyframes onboarding-terminal-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
+@keyframes onboarding-terminal-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  50.01%,
+  100% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .onboarding-terminal__badge-dot,
+  .onboarding-terminal__cursor {
+    animation: none;
+  }
+}
diff --git a/frontend/web/components/pages/onboarding/OnboardingTerminal/OnboardingTerminal.tsx b/frontend/web/components/pages/onboarding/OnboardingTerminal/OnboardingTerminal.tsx
new file mode 100644
index 000000000000..ab6a240ebc5f
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/OnboardingTerminal/OnboardingTerminal.tsx
@@ -0,0 +1,93 @@
+import React, { FC } from 'react'
+import classNames from 'classnames'
+import './OnboardingTerminal.scss'
+
+export type OnboardingTerminalProps = {
+  featureName: string
+  installCopied: boolean
+  snippetCopied: boolean
+  // First SDK evaluation received (the connection signal, #7767).
+  connected: boolean
+}
+
+// Verify console for the onboarding flow, mirroring the design's "sdk console".
+// The checklist ticks as the user acts: copy install, copy snippet, then the
+// first evaluation flips the badge to LIVE and prints the connection receipt.
+// Always dark - it's a terminal - so it carries its own palette, not the theme
+// tokens.
+const OnboardingTerminal: FC<OnboardingTerminalProps> = ({
+  connected,
+  featureName,
+  installCopied,
+  snippetCopied,
+}) => {
+  const steps = [
+    { done: installCopied, label: 'Copy install command' },
+    { done: snippetCopied, label: 'Copy code snippet' },
+    { done: connected, label: `First evaluation of '${featureName}'` },
+  ]
+  // The first unfinished step is the active one (amber).
+  const currentIndex = steps.findIndex((step) => !step.done)
+
+  return (
+    <div className='onboarding-terminal'>
+      <div className='onboarding-terminal__bar'>
+        <span className='onboarding-terminal__dot onboarding-terminal__dot--red' />
+        <span className='onboarding-terminal__dot onboarding-terminal__dot--amber' />
+        <span className='onboarding-terminal__dot onboarding-terminal__dot--green' />
+        <span className='onboarding-terminal__title'>
+          flagsmith — sdk console
+        </span>
+        <span
+          className={classNames('onboarding-terminal__badge', {
+            'onboarding-terminal__badge--listening': !connected,
+            'onboarding-terminal__badge--live': connected,
+          })}
+        >
+          <span className='onboarding-terminal__badge-dot' />
+          {connected ? 'LIVE' : 'LISTENING'}
+        </span>
+      </div>
+
+      <div className='onboarding-terminal__body' aria-live='polite'>
+        {!connected && (
+          <p className='onboarding-terminal__line onboarding-terminal__line--muted'>
+            awaiting first request
+          </p>
+        )}
+        {steps.map((step, index) => (
+          <p
+            key={step.label}
+            className={classNames('onboarding-terminal__line', {
+              'onboarding-terminal__line--current':
+                !step.done && index === currentIndex,
+              'onboarding-terminal__line--ok': step.done,
+            })}
+          >
+            {step.done ? '[✓]' : '[ ]'} {step.label}
+            {!step.done && index === steps.length - 1 ? '…' : ''}
+          </p>
+        ))}
+        {connected ? (
+          <>
+            <p className='onboarding-terminal__line onboarding-terminal__line--dim'>
+              SDK initialized · flags loaded · {featureName}: true
+            </p>
+            <p className='onboarding-terminal__line onboarding-terminal__line--ok onboarding-terminal__line--strong'>
+              ✓ Connected
+            </p>
+            <p className='onboarding-terminal__line onboarding-terminal__line--ok'>
+              ✓ {featureName} is live
+            </p>
+          </>
+        ) : (
+          <p className='onboarding-terminal__line onboarding-terminal__line--prompt'>
+            $ <span className='onboarding-terminal__cursor' aria-hidden />
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default OnboardingTerminal
diff --git a/frontend/web/components/pages/onboarding/OnboardingTerminal/index.ts b/frontend/web/components/pages/onboarding/OnboardingTerminal/index.ts
new file mode 100644
index 000000000000..38296d63455e
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/OnboardingTerminal/index.ts
@@ -0,0 +1,2 @@
+export { default } from './OnboardingTerminal'
+export type { OnboardingTerminalProps } from './OnboardingTerminal'
diff --git a/frontend/web/components/pages/onboarding/hooks/bootstrapOnboarding.ts b/frontend/web/components/pages/onboarding/hooks/bootstrapOnboarding.ts
index 923286b8f3bc..4e0e57d72dd1 100644
--- a/frontend/web/components/pages/onboarding/hooks/bootstrapOnboarding.ts
+++ b/frontend/web/components/pages/onboarding/hooks/bootstrapOnboarding.ts
@@ -7,10 +7,12 @@ import {
   getEnvironments,
 } from 'common/services/useEnvironment'
 import { projectFlagService } from 'common/services/useProjectFlag'
+import { tagService } from 'common/services/useTag'
 import { Req } from 'common/types/requests'
 import {
   Environment,
   PagedResponse,
+  ProjectFlag,
   ProjectSummary,
 } from 'common/types/responses'
 import { SmartDefaults } from './useSmartDefaults'
@@ -24,6 +26,13 @@ const DEFAULT_PROJECT_NAME = 'My first project'
 // Written on create and matched by name on reuse, so the two must stay in step.
 const DEV_ENVIRONMENT_NAME = 'Development'
 const PROD_ENVIRONMENT_NAME = 'Production'
+// Attached to the demo flag so the flags table shows an "Onboarding" badge.
+// Green from the product tag palette (Constants.tagColors), not an arbitrary hex.
+const ONBOARDING_TAG = {
+  color: '#3cb371',
+  description: 'Created during onboarding',
+  label: 'Onboarding',
+}
 
 type ExistingOrg = { id: number; name: string }
 
@@ -130,11 +139,11 @@ async function ensureEnvironments(
 
 // Reuse the project's existing flag (keeps a renamed flag and stops piling up
 // duplicates on revisit); only create the demo flag when there are none.
-// Returns the real flag name so the header shows what's actually there.
+// Returns the flag so callers see its real name and tags.
 async function ensureFlag(
   store: Store,
   project: ProjectSummary,
-): Promise<string> {
+): Promise<ProjectFlag | undefined> {
   const flags = await store
     .dispatch(
       projectFlagService.endpoints.getProjectFlags.initiate({
@@ -144,9 +153,9 @@ async function ensureFlag(
     .unwrap()
   const existing = flags?.results?.[0]
   if (existing) {
-    return existing.name
+    return existing
   }
-  const created = await store
+  return store
     .dispatch(
       projectFlagService.endpoints.createProjectFlag.initiate({
         body: {
@@ -158,7 +167,46 @@ async function ensureFlag(
       }),
     )
     .unwrap()
-  return created?.name ?? FLAG_NAME
+}
+
+// Attach the "Onboarding" tag to the demo flag (find-or-create), so the flags
+// table shows the badge from the design. Best-effort: tagging is cosmetic and
+// must never block the bootstrap.
+async function ensureOnboardingTag(
+  store: Store,
+  project: ProjectSummary,
+  flag: ProjectFlag,
+): Promise<void> {
+  try {
+    const tags = await store
+      .dispatch(
+        tagService.endpoints.getTags.initiate({ projectId: project.id }),
+      )
+      .unwrap()
+    const tag =
+      tags?.find((t) => t.label === ONBOARDING_TAG.label) ??
+      (await store
+        .dispatch(
+          tagService.endpoints.createTag.initiate({
+            projectId: project.id,
+            tag: ONBOARDING_TAG,
+          }),
+        )
+        .unwrap())
+    if (tag && !flag.tags?.includes(tag.id)) {
+      await store
+        .dispatch(
+          projectFlagService.endpoints.updateProjectFlag.initiate({
+            body: { ...flag, tags: [...(flag.tags ?? []), tag.id] },
+            feature_id: flag.id,
+            project_id: project.id,
+          }),
+        )
+        .unwrap()
+    }
+  } catch {
+    // Cosmetic only - never block onboarding on tagging.
+  }
 }
 
 // Idempotently bring up everything the single-page flow needs: org, project,
@@ -172,12 +220,15 @@ export async function bootstrapOnboarding(
   const organisation = await ensureOrganisation(store, input)
   const project = await ensureProject(store, organisation.id, input.defaults)
   const environment = await ensureEnvironments(store, project)
-  const featureName = await ensureFlag(store, project)
+  const flag = await ensureFlag(store, project)
+  if (flag) {
+    await ensureOnboardingTag(store, project, flag)
+  }
   // Refresh the legacy org store so the shell sees the project.
   AppActions.refreshOrganisation()
   return {
     environment,
-    featureName,
+    featureName: flag?.name ?? FLAG_NAME,
     organisationId: organisation.id,
     organisationName: organisation.name,
     project,
diff --git a/frontend/web/components/pages/onboarding/hooks/useOnboardingConnection.ts b/frontend/web/components/pages/onboarding/hooks/useOnboardingConnection.ts
new file mode 100644
index 000000000000..a47b7c197463
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/hooks/useOnboardingConnection.ts
@@ -0,0 +1,20 @@
+import { useLocation } from 'react-router-dom'
+
+export type OnboardingConnectionStatus = 'listening' | 'connected'
+
+// Single source of truth for the verify console's connection status, so the
+// page never reads the raw signal directly.
+//
+// Today it reports the pre-connection state, with a `?connected` query-param
+// escape hatch so the connected UI can be exercised in the live flow (and
+// screenshots) before the real signal exists.
+//
+// TODO(#7767): replace the body with the real first-evaluation signal (poll /
+// subscribe for the first SDK evaluation of the demo flag). The caller
+// (OnboardingFlow) and the `?connected` test hook stay unchanged.
+export const useOnboardingConnection = (): OnboardingConnectionStatus => {
+  const { search } = useLocation()
+  return new URLSearchParams(search).has('connected')
+    ? 'connected'
+    : 'listening'
+}
diff --git a/frontend/web/components/pages/onboarding/hooks/useOnboardingFlag.ts b/frontend/web/components/pages/onboarding/hooks/useOnboardingFlag.ts
new file mode 100644
index 000000000000..9969d634577c
--- /dev/null
+++ b/frontend/web/components/pages/onboarding/hooks/useOnboardingFlag.ts
@@ -0,0 +1,59 @@
+import { useGetProjectFlagsQuery } from 'common/services/useProjectFlag'
+import {
+  useGetFeatureStatesQuery,
+  useUpdateFeatureStateMutation,
+} from 'common/services/useFeatureState'
+import { useGetTagsQuery } from 'common/services/useTag'
+import { Environment, Tag } from 'common/types/responses'
+
+// Resolves the onboarding demo flag's Development feature state and exposes a
+// real, persisted toggle (updateFeatureState) for the flags table. Finds the
+// flag by name (the bootstrap returns the name, not the id), then its state in
+// the Dev environment. Also resolves the flag's real tags, so attaching a tag
+// to the flag shows up in the onboarding table automatically.
+export const useOnboardingFlag = (
+  environment: Environment | null,
+  projectId: number | null,
+  featureName: string,
+) => {
+  const { data: flags } = useGetProjectFlagsQuery(
+    { project: `${projectId}` },
+    { skip: !projectId },
+  )
+  const flag = flags?.results?.find((f) => f.name === featureName)
+
+  const { data: projectTags } = useGetTagsQuery(
+    { projectId: projectId ?? 0 },
+    { skip: !projectId },
+  )
+  const tags = (flag?.tags ?? [])
+    .map((id) => projectTags?.find((tag) => tag.id === id))
+    .filter((tag): tag is Tag => !!tag)
+
+  const { data: states } = useGetFeatureStatesQuery(
+    { environment: environment?.id, feature: flag?.id },
+    { skip: !environment || !flag },
+  )
+  const state = states?.results?.[0]
+
+  const [updateFeatureState, { isLoading }] = useUpdateFeatureStateMutation()
+
+  const toggle = (enabled: boolean) => {
+    if (!environment || !state) {
+      return
+    }
+    updateFeatureState({
+      body: { enabled },
+      environmentFlagId: state.id,
+      environmentId: environment.api_key,
+    })
+  }
+
+  return {
+    enabled: !!state?.enabled,
+    isToggling: isLoading,
+    ready: !!state,
+    tags,
+    toggle,
+  }
+}