From a9ffeecdc66a242e13d014fb75486efcb970b6c0 Mon Sep 17 00:00:00 2001
From: "Vincent (Wen Yu) Ge" <gewenyu99@gmail.com>
Date: Sun, 24 May 2026 17:40:41 -0400
Subject: [PATCH 1/5] Rebase, fix issues with agent sandbox allow list

---
 bin.ts                                        |  10 +-
 src/lib/agent/agent-interface.ts              |  29 +++-
 .../content/feature-flags-experiments.tsx     |  16 +++
 .../workflows/migration/content/free-tier.tsx |  58 ++++++++
 .../workflows/migration/content/funnel.tsx    | 101 +++++++++++++
 src/lib/workflows/migration/content/index.tsx |  32 +++++
 .../migration/content/line-chart.tsx          |  65 +++++++++
 .../workflows/migration/content/migration.tsx | 136 ++++++++++++++++++
 .../migration/content/pricing-structure.tsx   |  41 ++++++
 .../migration/content/product-suite.tsx       |  70 +++++++++
 .../migration/content/vendor-stack.tsx        |  47 ++++++
 src/lib/workflows/migration/index.ts          |  68 +++++++++
 src/lib/workflows/migration/steps.ts          |  36 +++++
 src/lib/workflows/workflow-registry.ts        |   2 +
 src/lib/workflows/workflow-step.ts            |  14 ++
 src/ui/tui/components/StatusPeekTrigger.tsx   |   1 +
 src/ui/tui/flows.ts                           |   2 +
 src/ui/tui/playground/demos/RunScreenDemo.tsx |   6 +-
 src/ui/tui/screen-registry.tsx                |   2 +
 src/ui/tui/screens/MigrationIntroScreen.tsx   |  43 ++++++
 20 files changed, 768 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/workflows/migration/content/feature-flags-experiments.tsx
 create mode 100644 src/lib/workflows/migration/content/free-tier.tsx
 create mode 100644 src/lib/workflows/migration/content/funnel.tsx
 create mode 100644 src/lib/workflows/migration/content/index.tsx
 create mode 100644 src/lib/workflows/migration/content/line-chart.tsx
 create mode 100644 src/lib/workflows/migration/content/migration.tsx
 create mode 100644 src/lib/workflows/migration/content/pricing-structure.tsx
 create mode 100644 src/lib/workflows/migration/content/product-suite.tsx
 create mode 100644 src/lib/workflows/migration/content/vendor-stack.tsx
 create mode 100644 src/lib/workflows/migration/index.ts
 create mode 100644 src/lib/workflows/migration/steps.ts
 create mode 100644 src/ui/tui/screens/MigrationIntroScreen.tsx

diff --git a/bin.ts b/bin.ts
index 4a5eaacf..9da65731 100644
--- a/bin.ts
+++ b/bin.ts
@@ -599,9 +599,15 @@ for (const wfConfig of getSubcommandWorkflows()) {
   cli.command(
     wfConfig.command!,
     wfConfig.description,
-    (y) => y.options(skillSubcommandOptions),
+    (y) =>
+      y.options({
+        ...skillSubcommandOptions,
+        ...(wfConfig.cliOptions ?? {}),
+      }),
     (argv) => {
-      const options = { ...argv };
+      const extras =
+        wfConfig.mapCliOptions?.(argv as Record<string, unknown>) ?? {};
+      const options = { ...argv, ...extras };
       if (options.ci) {
         runWizardCI(wfConfig, options);
       } else {
diff --git a/src/lib/agent/agent-interface.ts b/src/lib/agent/agent-interface.ts
index 2144f49d..d354be0b 100644
--- a/src/lib/agent/agent-interface.ts
+++ b/src/lib/agent/agent-interface.ts
@@ -954,14 +954,29 @@ export async function runAgent(
               '//tmp/**',
               '//private/tmp',
               '//private/tmp/**',
-              // Package manager stores — allow writes so pnpm/npm can
-              // install packages without breaking the user's existing setup
-              '~/Library/pnpm/store/**', // pnpm global store (macOS)
-              '~/.local/share/pnpm/store/**', // pnpm global store (Linux)
+              // Package manager stores and toolchain installs — allow writes
+              // so pnpm/npm/yarn/bun and version managers (corepack, volta)
+              // can install packages and self-update without breaking the
+              // user's existing setup.
+              '~/Library/pnpm/**', // pnpm root (macOS) — store + .tools/ for packageManager pinning
+              '~/.local/share/pnpm/**', // pnpm root (Linux)
               '~/.pnpm-store/**', // pnpm alternate store
-              '~/.npm/**', // npm cache
-              '~/.yarn/**', // yarn classic cache
-              '~/.yarn/berry/**', // yarn berry cache
+              '~/.npm/**', // npm cache (covers _npx too)
+              '~/.yarn/**', // yarn classic + berry cache
+              '~/.bun/install/**', // bun cache + global installs
+              '~/.cache/node/corepack/**', // corepack version downloads (Linux/macOS)
+              '~/Library/Caches/node/corepack/**', // corepack on older macOS layouts
+              '~/.volta/**', // Volta toolchain (referenced by workbench package.json)
+              // Python — used by django/flask/fastapi wizards
+              '~/.cache/pip/**',
+              '~/Library/Caches/pip/**',
+              '~/.cache/uv/**',
+              '~/Library/Caches/uv/**',
+              '~/.cache/pypoetry/**',
+              '~/Library/Caches/pypoetry/**',
+              // Ruby — used by rails wizard
+              '~/.bundle/**',
+              '~/.gem/**',
             ],
           },
           network: {
diff --git a/src/lib/workflows/migration/content/feature-flags-experiments.tsx b/src/lib/workflows/migration/content/feature-flags-experiments.tsx
new file mode 100644
index 00000000..6bbe809a
--- /dev/null
+++ b/src/lib/workflows/migration/content/feature-flags-experiments.tsx
@@ -0,0 +1,16 @@
+/**
+ * Feature flags + experiments learn material. Plays alongside the generic
+ * migration deck when the source product is a feature-flag / experimentation
+ * tool (e.g. Statsig). Placeholder content for now.
+ *
+ * Examples of what could go here: how PostHog represents flags vs configs vs
+ * experiments, how flags wire into analytics and replays, how rollouts work,
+ * how multivariate flags carry JSON payloads.
+ */
+
+import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+
+export const FEATURE_FLAGS_EXPERIMENTS_BLOCKS: ContentBlock[] = [
+  { content: 'Feature flags and experiments in PostHog.', pause: 3000 },
+  // TODO: replace with real FF/experiments narrative.
+];
diff --git a/src/lib/workflows/migration/content/free-tier.tsx b/src/lib/workflows/migration/content/free-tier.tsx
new file mode 100644
index 00000000..50801ca2
--- /dev/null
+++ b/src/lib/workflows/migration/content/free-tier.tsx
@@ -0,0 +1,58 @@
+/**
+ * PostHog free-tier highlights — the numbers a migrating team gets back when
+ * they consolidate. Sourced from posthog.com/pricing.md.
+ */
+
+import { Text } from 'ink';
+import { Colors } from '../../../../ui/tui/styles.js';
+import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+
+export const FREE_TIER_BLOCK: ContentBlock = {
+  type: 'lines',
+  interval: 400,
+  pause: 9000,
+  lines: [
+    <Text bold>{'  Free every month, on every product'}</Text>,
+    <Text> </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  1,000,000  '}</Text>
+      <Text>events </Text>
+      <Text dimColor>product analytics</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  1,000,000  '}</Text>
+      <Text>requests </Text>
+      <Text dimColor>feature flags + experiments</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'      5,000  '}</Text>
+      <Text>recordings </Text>
+      <Text dimColor>session replay</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'    100,000  '}</Text>
+      <Text>exceptions </Text>
+      <Text dimColor>error tracking</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'    100,000  '}</Text>
+      <Text>events </Text>
+      <Text dimColor>LLM analytics</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'      50 GB  '}</Text>
+      <Text>logs </Text>
+      <Text dimColor>logs</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'      1,500  '}</Text>
+      <Text>responses </Text>
+      <Text dimColor>surveys</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  1,000,000  '}</Text>
+      <Text>rows </Text>
+      <Text dimColor>data warehouse</Text>
+    </Text>,
+  ],
+};
diff --git a/src/lib/workflows/migration/content/funnel.tsx b/src/lib/workflows/migration/content/funnel.tsx
new file mode 100644
index 00000000..0d8340e3
--- /dev/null
+++ b/src/lib/workflows/migration/content/funnel.tsx
@@ -0,0 +1,101 @@
+/**
+ * ASCII funnel — illustrates a conversion funnel. Same shape as the
+ * integration script's variant; kept separate so the migration narrative
+ * can evolve independently.
+ */
+
+import { Text } from 'ink';
+import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+
+export const FUNNEL_BLOCK: ContentBlock = {
+  type: 'lines',
+  interval: 200,
+  pause: 8000,
+  lines: [
+    <Text bold>{'  Funnel · ride conversion'}</Text>,
+    <Text> </Text>,
+    <Text>
+      {'  '}
+      <Text bold>1</Text>
+      {'  app_launched'}
+      {'                     '}
+      <Text bold color="green">
+        100.00%
+      </Text>
+    </Text>,
+    <Text color="cyan">{'     ██████████████████████████████'}</Text>,
+    <Text dimColor>{'     → 1,200 users'}</Text>,
+    <Text> </Text>,
+    <Text>
+      {'  '}
+      <Text bold>2</Text>
+      {'  ride_requested'}
+      {'       '}
+      <Text dimColor>{'avg 2m 30s'}</Text>
+      {'   '}
+      <Text bold color="green">
+        72.00%
+      </Text>
+    </Text>,
+    <Text>
+      {'     '}
+      <Text color="cyan">{'██████████████████████'}</Text>
+      <Text dimColor>{'░░░░░░░░░'}</Text>
+    </Text>,
+    <Text>
+      {'     '}
+      <Text dimColor>→ 864 users</Text>
+      {'  '}
+      <Text color="red">↘</Text>
+      <Text dimColor>{' 336 (28%)'}</Text>
+    </Text>,
+    <Text> </Text>,
+    <Text>
+      {'  '}
+      <Text bold>3</Text>
+      {'  ride_accepted'}
+      {'        '}
+      <Text dimColor>{'avg 5m 12s'}</Text>
+      {'   '}
+      <Text bold color="green">
+        51.00%
+      </Text>
+    </Text>,
+    <Text>
+      {'     '}
+      <Text color="cyan">{'██████████████████'}</Text>
+      <Text dimColor>{'░░░░░░░░░░░░░'}</Text>
+    </Text>,
+    <Text>
+      {'     '}
+      <Text dimColor>→ 612 users</Text>
+      {'  '}
+      <Text color="red">↘</Text>
+      <Text dimColor>{' 252 (29%)'}</Text>
+    </Text>,
+    <Text> </Text>,
+    <Text>
+      {'  '}
+      <Text bold>4</Text>
+      {'  ride_started'}
+      {'         '}
+      <Text dimColor>{'avg 1m 45s'}</Text>
+      {'   '}
+      <Text bold color="green">
+        38.00%
+      </Text>
+    </Text>,
+    <Text>
+      {'     '}
+      <Text color="cyan">{'█████████████'}</Text>
+      <Text dimColor>{'░░░░░░░░░░░░░░░░░░'}</Text>
+    </Text>,
+    <Text>
+      {'     '}
+      <Text dimColor>→ 456 users</Text>
+      {'  '}
+      <Text color="red">↘</Text>
+      <Text dimColor>{' 156 (25%)'}</Text>
+    </Text>,
+  ],
+};
diff --git a/src/lib/workflows/migration/content/index.tsx b/src/lib/workflows/migration/content/index.tsx
new file mode 100644
index 00000000..84fbf48f
--- /dev/null
+++ b/src/lib/workflows/migration/content/index.tsx
@@ -0,0 +1,32 @@
+/**
+ * Migration learn-deck composer. Picks topic decks to play alongside the
+ * generic migration deck based on the command + product combo the operator
+ * invoked.
+ *
+ * The active variant is read from `session.skillId`, which the wizard sets
+ * from `migrate --product=<id>` (`mapCliOptions` in migration/index.ts).
+ * Variants whose source SDK is a feature flag / experimentation tool play
+ * the FF/experiments deck. Add more topic decks to TOPIC_DECKS_BY_PRODUCT
+ * as new variants ship.
+ */
+
+import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+import type { WizardStore } from '../../../../ui/tui/store.js';
+import { getMigrationBlocks } from './migration.js';
+import { FEATURE_FLAGS_EXPERIMENTS_BLOCKS } from './feature-flags-experiments.js';
+
+const TOPIC_DECKS_BY_PRODUCT: Record<string, ContentBlock[]> = {
+  statsig: FEATURE_FLAGS_EXPERIMENTS_BLOCKS,
+};
+
+function productFromSkillId(skillId: string | null): string | null {
+  const prefix = 'migrate-';
+  if (!skillId || !skillId.startsWith(prefix)) return null;
+  return skillId.slice(prefix.length);
+}
+
+export const getContentBlocks = (store?: WizardStore): ContentBlock[] => {
+  const product = productFromSkillId(store?.session.skillId ?? null);
+  const topicDeck = product ? TOPIC_DECKS_BY_PRODUCT[product] ?? [] : [];
+  return [...getMigrationBlocks(store), ...topicDeck];
+};
diff --git a/src/lib/workflows/migration/content/line-chart.tsx b/src/lib/workflows/migration/content/line-chart.tsx
new file mode 100644
index 00000000..ebcd1c07
--- /dev/null
+++ b/src/lib/workflows/migration/content/line-chart.tsx
@@ -0,0 +1,65 @@
+/**
+ * ASCII line chart — illustrates a Trends insight. Same shape as the
+ * integration script's variant; kept separate so the migration narrative
+ * can evolve independently.
+ */
+
+import { Text } from 'ink';
+import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+
+export const LINE_CHART_BLOCK: ContentBlock = {
+  type: 'lines',
+  interval: 300,
+  pause: 6000,
+  lines: [
+    <Text bold>{'  Trends · user signups (monthly)'}</Text>,
+    <Text> </Text>,
+    <Text>
+      <Text color="gray">{'  10k ┤'}</Text>
+      {'                          '}
+      <Text color="cyan">{'╭──'}</Text>
+      <Text dimColor>{' 9,575'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{'      │'}</Text>
+      {'                         '}
+      <Text color="cyan">{'╭╯'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{' 7.5k ┤'}</Text>
+      {'                        '}
+      <Text color="cyan">{'╭╯'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{'      │'}</Text>
+      {'                      '}
+      <Text color="cyan">{'╭─╯'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{'   5k ┤'}</Text>
+      {'                    '}
+      <Text color="cyan">{'╭─╯'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{'      │'}</Text>
+      {'                 '}
+      <Text color="cyan">{'╭──╯'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{' 2.5k ┤'}</Text>
+      {'             '}
+      <Text color="cyan">{'╭───╯'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{'      │'}</Text>
+      {'      '}
+      <Text color="cyan">{'╭──────╯'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{'    0 ┤'}</Text>
+      <Text color="cyan">{'──────╯'}</Text>
+    </Text>,
+    <Text color="gray">{'      └┬─────┬─────┬─────┬─────┬──'}</Text>,
+    <Text dimColor>{'       May   Aug   Nov   Feb   May'}</Text>,
+  ],
+};
diff --git a/src/lib/workflows/migration/content/migration.tsx b/src/lib/workflows/migration/content/migration.tsx
new file mode 100644
index 00000000..c279b45a
--- /dev/null
+++ b/src/lib/workflows/migration/content/migration.tsx
@@ -0,0 +1,136 @@
+/**
+ * Generic migration learn material. Plays for every `migrate` run regardless
+ * of source product. The narrative focuses on multi-vendor consolidation:
+ * cost comparison, free-tier breakdown, pricing model, then familiar analyses
+ * (trends + funnels) the team already had.
+ */
+
+import { Text } from 'ink';
+import type { WizardStore } from '../../../../ui/tui/store.js';
+import { Colors } from '../../../../ui/tui/styles.js';
+import { TextRevealMode } from '../../../../ui/tui/primitives/TextBlock.js';
+import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+import { StatusPeekTrigger } from '../../../../ui/tui/components/StatusPeekTrigger.js';
+import { VENDOR_STACK_BLOCK } from './vendor-stack.js';
+import { FREE_TIER_BLOCK } from './free-tier.js';
+import { PRICING_STRUCTURE_BLOCK } from './pricing-structure.js';
+import { PRODUCT_SUITE_BLOCK } from './product-suite.js';
+import { LINE_CHART_BLOCK } from './line-chart.js';
+import { FUNNEL_BLOCK } from './funnel.js';
+
+/**
+ * Human-readable display name for each `--product=<id>` variant of the
+ * `migrate` command. The intro line reads "migrate from <label> to PostHog"
+ * when the variant is known, and "migrate this project to PostHog" otherwise.
+ */
+const PRODUCT_LABELS: Record<string, string> = {
+  statsig: 'Statsig',
+};
+
+function migrationIntroPhrase(store?: WizardStore): string {
+  const skillId = store?.session.skillId ?? '';
+  const prefix = 'migrate-';
+  if (!skillId.startsWith(prefix)) return 'migrate this project to PostHog';
+  const variant = skillId.slice(prefix.length);
+  const label = PRODUCT_LABELS[variant];
+  return label
+    ? `migrate from ${label} to PostHog`
+    : 'migrate this project to PostHog';
+}
+
+export const getMigrationBlocks = (store?: WizardStore): ContentBlock[] => [
+  {
+    content: 'Hello.',
+    pause: 3000,
+    mode: TextRevealMode.Typewriter,
+    animationInterval: 160,
+  },
+
+  { content: 'The Wizard is an agent.', pause: 4000 },
+
+  {
+    content: `As we speak, it's making a plan to ${migrationIntroPhrase(
+      store,
+    )}.`,
+    pause: 6000,
+  },
+
+  {
+    content: 'PostHog covers the cost of running this agent.',
+    pause: 4000,
+  },
+
+  { type: 'clear', pause: 2000 },
+
+  {
+    pause: 5000,
+    persist: true,
+    content: <StatusPeekTrigger store={store} />,
+  },
+
+  {
+    pause: 6000,
+    content: (
+      <Text>
+        Press{' '}
+        <Text color={Colors.accent} bold>
+          S
+        </Text>{' '}
+        to expand or collapse the status.
+      </Text>
+    ),
+  },
+
+  { type: 'clear', pause: 2000 },
+
+  { content: 'It takes about five minutes.', pause: 2000 },
+
+  {
+    content: 'So stick around — here’s what you’re moving onto.',
+    pause: 4000,
+  },
+
+  { type: 'clear', pause: 1500 },
+
+  {
+    content: 'PostHog replaces multi-vendor stacks with one platform.',
+    pause: 5000,
+  },
+
+  { content: 'Here’s the math.', pause: 1500 },
+
+  VENDOR_STACK_BLOCK,
+
+  { type: 'clear', pause: 1500 },
+
+  { content: 'All the dev and AI tools you need in one place.', pause: 3000 },
+
+  PRODUCT_SUITE_BLOCK,
+
+  { type: 'clear', pause: 1500 },
+
+  {
+    content: 'Pricing is usage-based, with a generous free tier.',
+    pause: 4000,
+  },
+
+  FREE_TIER_BLOCK,
+
+  { type: 'clear', pause: 1500 },
+
+  PRICING_STRUCTURE_BLOCK,
+
+  { type: 'clear', pause: 1500 },
+
+  { content: 'You still get every analysis you had before.', pause: 4000 },
+
+  { content: 'Trends to measure growth.', pause: 2500 },
+
+  LINE_CHART_BLOCK,
+
+  { type: 'clear', pause: 500 },
+
+  { content: 'Funnels to reveal bottlenecks.', pause: 2500 },
+
+  FUNNEL_BLOCK,
+];
diff --git a/src/lib/workflows/migration/content/pricing-structure.tsx b/src/lib/workflows/migration/content/pricing-structure.tsx
new file mode 100644
index 00000000..e8dc75b7
--- /dev/null
+++ b/src/lib/workflows/migration/content/pricing-structure.tsx
@@ -0,0 +1,41 @@
+/**
+ * Pricing structure block — what happens after the free tier.
+ */
+
+import { Text } from 'ink';
+import { Colors } from '../../../../ui/tui/styles.js';
+import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+
+export const PRICING_STRUCTURE_BLOCK: ContentBlock = {
+  type: 'lines',
+  interval: 500,
+  pause: 8000,
+  lines: [
+    <Text bold>{'  After the free tier'}</Text>,
+    <Text> </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  $0 '}</Text>
+      <Text>base price · pay only for what you use</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  ◆ '}</Text>
+      <Text>per-event prices decrease with volume</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  ◆ '}</Text>
+      <Text>no per-seat charges — your whole team is included</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  ◆ '}</Text>
+      <Text>web analytics bundled with product analytics</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  ◆ '}</Text>
+      <Text>experiments bundled with feature flags</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  ◆ '}</Text>
+      <Text>revenue analytics bundled with data warehouse</Text>
+    </Text>,
+  ],
+};
diff --git a/src/lib/workflows/migration/content/product-suite.tsx b/src/lib/workflows/migration/content/product-suite.tsx
new file mode 100644
index 00000000..2a016b9d
--- /dev/null
+++ b/src/lib/workflows/migration/content/product-suite.tsx
@@ -0,0 +1,70 @@
+/**
+ * 2-column list of PostHog product surfaces. Intentionally a separate copy
+ * from the posthog-integration variant — the migration narrative can evolve
+ * independently (e.g. ordering products to highlight migration-relevant ones).
+ */
+
+import { Text } from 'ink';
+import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+
+export const PRODUCT_SUITE_BLOCK: ContentBlock = {
+  type: 'lines',
+  interval: 1000,
+  pause: 15000,
+  lines: [
+    <Text>
+      <Text color="cyan">{'  ◆ '}</Text>
+      {'Product Analytics     '}
+      <Text color="cyan">{'◆ '}</Text>
+      {'Error Tracking'}
+    </Text>,
+    <Text>
+      <Text color="cyan">{'  ◆ '}</Text>
+      {'Web Analytics         '}
+      <Text color="cyan">{'◆ '}</Text>
+      {'Session Replay'}
+    </Text>,
+    <Text>
+      <Text color="cyan">{'  ◆ '}</Text>
+      {'Feature Flags         '}
+      <Text color="cyan">{'◆ '}</Text>
+      {'Data Pipelines'}
+    </Text>,
+    <Text>
+      <Text color="cyan">{'  ◆ '}</Text>
+      {'Experiments           '}
+      <Text color="cyan">{'◆ '}</Text>
+      {'Data Warehouse'}
+    </Text>,
+    <Text>
+      <Text color="cyan">{'  ◆ '}</Text>
+      {'LLM Analytics         '}
+      <Text color="cyan">{'◆ '}</Text>
+      {'Surveys'}
+    </Text>,
+    <Text>
+      <Text color="cyan">{'  ◆ '}</Text>
+      {'Workflows             '}
+      <Text color="cyan">{'◆ '}</Text>
+      {'Logs'}
+    </Text>,
+    <Text>
+      <Text color="cyan">{'  ◆ '}</Text>
+      {'Product Tours         '}
+      <Text color="cyan">{'◆ '}</Text>
+      {'Support'}
+    </Text>,
+    <Text>
+      <Text color="cyan">{'  ◆ '}</Text>
+      {'Revenue Analytics     '}
+      <Text color="cyan">{'◆ '}</Text>
+      {'Endpoints'}
+    </Text>,
+    <Text>
+      <Text color="cyan">{'  ◆ '}</Text>
+      {'Customer Analytics'}
+      <Text color="cyan">{'    ◆ '}</Text>
+      {'PostHog AI'}
+    </Text>,
+  ],
+};
diff --git a/src/lib/workflows/migration/content/vendor-stack.tsx b/src/lib/workflows/migration/content/vendor-stack.tsx
new file mode 100644
index 00000000..d4723eae
--- /dev/null
+++ b/src/lib/workflows/migration/content/vendor-stack.tsx
@@ -0,0 +1,47 @@
+/**
+ * Vendor cost stack — the multi-tool baseline a typical migration target has
+ * before consolidating onto PostHog. Numbers from each vendor's published
+ * starter pricing.
+ */
+
+import { Text } from 'ink';
+import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+
+export const VENDOR_STACK_BLOCK: ContentBlock = {
+  type: 'lines',
+  interval: 600,
+  pause: 9000,
+  lines: [
+    <Text bold>{'  Typical pre-migration stack'}</Text>,
+    <Text> </Text>,
+    <Text>
+      <Text color="gray">{'  Sentry'}</Text>
+      <Text>{'         error tracking      '}</Text>
+      <Text color="red">{'$26/mo+'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{'  LaunchDarkly'}</Text>
+      <Text>{'   feature flags       '}</Text>
+      <Text color="red">{'$8.33/mo+'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{'  Amplitude'}</Text>
+      <Text>{'      product analytics   '}</Text>
+      <Text color="red">{'$49/mo+'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{'  Braintrust'}</Text>
+      <Text>{'     LLM analytics       '}</Text>
+      <Text color="red">{'$50/mo+'}</Text>
+    </Text>,
+    <Text color="gray">{'  ─────────────────────────────────────'}</Text>,
+    <Text>
+      <Text>{'  Total'}</Text>
+      <Text>{'                              '}</Text>
+      <Text bold color="red">
+        {'$133/mo+'}
+      </Text>
+    </Text>,
+    <Text dimColor>{'  plus ~450KB of JavaScript SDKs'}</Text>,
+  ],
+};
diff --git a/src/lib/workflows/migration/index.ts b/src/lib/workflows/migration/index.ts
new file mode 100644
index 00000000..384f4105
--- /dev/null
+++ b/src/lib/workflows/migration/index.ts
@@ -0,0 +1,68 @@
+import type { WorkflowConfig } from '../workflow-step.js';
+import type { AbortCase } from '../../agent/agent-runner.js';
+import { MIGRATION_WORKFLOW } from './steps.js';
+import { getContentBlocks } from './content/index.js';
+
+const MIGRATION_REPORT_FILE = 'migration-report.md';
+
+const MIGRATION_ABORT_CASES: AbortCase[] = [
+  {
+    match: /^no source-sdk calls found$/i,
+    message: 'No source-SDK calls found',
+    body:
+      'The migration needs an existing third-party SDK to migrate from. No ' +
+      'calls to the source SDK appear anywhere in this project. If you ' +
+      "haven't installed PostHog yet, you don't need this command — run " +
+      '`npx @posthog/wizard@latest` to add PostHog from scratch.',
+  },
+  {
+    match: /^no project framework detected$/i,
+    message: 'No project framework detected',
+    body:
+      'The migration could not identify the framework this project sits on ' +
+      'top of from its dependency manifests. PostHog needs a framework match ' +
+      'to install the right SDK package. Make sure the project has a ' +
+      'recognizable manifest at the root and re-run.',
+  },
+];
+
+const MIGRATE_PRODUCTS = ['statsig'] as const;
+
+export const migrationConfig: WorkflowConfig = {
+  command: 'migrate',
+  description: 'Migrate to PostHog from another analytics provider',
+  flowKey: 'migration',
+  skillId: 'migrate-statsig',
+  steps: MIGRATION_WORKFLOW,
+  reportFile: MIGRATION_REPORT_FILE,
+  getContentBlocks,
+  cliOptions: {
+    product: {
+      describe: 'Source SDK to migrate from',
+      type: 'string',
+      choices: MIGRATE_PRODUCTS,
+      demandOption: true,
+    },
+  },
+  mapCliOptions: (argv) => ({ skillId: `migrate-${argv.product as string}` }),
+  run: {
+    skillId: 'migrate-statsig',
+    integrationLabel: 'migration',
+    customPrompt: () =>
+      'Migrate this project from its existing third-party analytics, ' +
+      'feature-flag, and observability tools to PostHog. Run the `migrate` ' +
+      'skill end-to-end: follow the step chain starting at ' +
+      'references/1-presence.md. Only replace existing source-SDK call sites ' +
+      'with PostHog equivalents — make zero unrelated changes and no ' +
+      `net-new instrumentation. The final report is written to ./${MIGRATION_REPORT_FILE}.`,
+    successMessage: `Migration complete! View the report at ./${MIGRATION_REPORT_FILE}`,
+    reportFile: MIGRATION_REPORT_FILE,
+    docsUrl: '',
+    spinnerMessage: 'Migrating to PostHog...',
+    estimatedDurationMinutes: 8,
+    abortCases: MIGRATION_ABORT_CASES,
+  },
+  requires: ['posthog-integration'],
+};
+
+export { MIGRATION_WORKFLOW } from './steps.js';
diff --git a/src/lib/workflows/migration/steps.ts b/src/lib/workflows/migration/steps.ts
new file mode 100644
index 00000000..7ee5ab47
--- /dev/null
+++ b/src/lib/workflows/migration/steps.ts
@@ -0,0 +1,36 @@
+import type { Workflow } from '../workflow-step.js';
+import { RunPhase } from '../../wizard-session.js';
+
+export const MIGRATION_WORKFLOW: Workflow = [
+  {
+    id: 'intro',
+    label: 'Welcome',
+    screen: 'migration-intro',
+    gate: (session) => session.setupConfirmed,
+  },
+  {
+    id: 'auth',
+    label: 'Authentication',
+    screen: 'auth',
+    isComplete: (session) => session.credentials !== null,
+  },
+  {
+    id: 'run',
+    label: 'Migration',
+    screen: 'run',
+    isComplete: (session) =>
+      session.runPhase === RunPhase.Completed ||
+      session.runPhase === RunPhase.Error,
+  },
+  {
+    id: 'outro',
+    label: 'Done',
+    screen: 'outro',
+    isComplete: (session) => session.outroDismissed,
+  },
+  {
+    id: 'skills',
+    label: 'Skills',
+    screen: 'keep-skills',
+  },
+];
diff --git a/src/lib/workflows/workflow-registry.ts b/src/lib/workflows/workflow-registry.ts
index 3f02e5c9..e8aa3b68 100644
--- a/src/lib/workflows/workflow-registry.ts
+++ b/src/lib/workflows/workflow-registry.ts
@@ -18,6 +18,7 @@ import { auditConfig } from './audit/index.js';
 import { eventsAuditConfig } from './events-audit/index.js';
 import { audit3000Config } from './audit-3000/index.js';
 import { posthogDoctorConfig } from './posthog-doctor/index.js';
+import { migrationConfig } from './migration/index.js';
 
 export const WORKFLOW_REGISTRY: WorkflowConfig[] = [
   posthogIntegrationConfig,
@@ -26,6 +27,7 @@ export const WORKFLOW_REGISTRY: WorkflowConfig[] = [
   eventsAuditConfig,
   audit3000Config,
   posthogDoctorConfig,
+  migrationConfig,
 ];
 
 /** Look up a workflow config by its flowKey. */
diff --git a/src/lib/workflows/workflow-step.ts b/src/lib/workflows/workflow-step.ts
index 8016ff4a..ddc5d2cb 100644
--- a/src/lib/workflows/workflow-step.ts
+++ b/src/lib/workflows/workflow-step.ts
@@ -145,6 +145,20 @@ export interface WorkflowConfig {
    * or skip the run step (posthog-doctor) leave this unset.
    */
   getContentBlocks?: (store?: WizardStore) => ContentBlock[];
+  /**
+   * Subcommand-specific CLI options. Spread into yargs `.options(...)` when the
+   * workflow's subcommand is registered. Workflow-specific knowledge stays in
+   * the workflow config, not in bin.ts. Typed as `unknown` to avoid pulling a
+   * yargs dependency into this module.
+   */
+  cliOptions?: Record<string, unknown>;
+  /**
+   * Translate parsed CLI argv into extra options the runner consumes. Runs
+   * after yargs validation, before runWizard/runWizardCI. Use this when a flag
+   * needs to derive another field (e.g. `--product=statsig` → `skillId:
+   * 'migrate-statsig'`).
+   */
+  mapCliOptions?: (argv: Record<string, unknown>) => Record<string, unknown>;
 }
 
 /**
diff --git a/src/ui/tui/components/StatusPeekTrigger.tsx b/src/ui/tui/components/StatusPeekTrigger.tsx
index ce228e88..882cd5b8 100644
--- a/src/ui/tui/components/StatusPeekTrigger.tsx
+++ b/src/ui/tui/components/StatusPeekTrigger.tsx
@@ -13,6 +13,7 @@ let peekedOnce = false;
 
 interface StatusPeekTriggerProps {
   store?: WizardStore;
+  /** How long the status bar stays expanded, in ms. */
   duration?: number;
 }
 
diff --git a/src/ui/tui/flows.ts b/src/ui/tui/flows.ts
index 93727f73..09cc7753 100644
--- a/src/ui/tui/flows.ts
+++ b/src/ui/tui/flows.ts
@@ -23,6 +23,7 @@ import { AGENT_SKILL_STEPS } from '../../lib/workflows/agent-skill/index.js';
 export enum Screen {
   Intro = 'intro',
   RevenueIntro = 'revenue-intro',
+  MigrationIntro = 'migration-intro',
   AgentSkillIntro = 'agent-skill-intro',
   AuditIntro = 'audit-intro',
   AuditRun = 'audit-run',
@@ -48,6 +49,7 @@ export enum Screen {
 export enum Flow {
   PostHogIntegration = 'posthog-integration',
   RevenueAnalyticsSetup = 'revenue-analytics-setup',
+  Migration = 'migration',
   Audit = 'audit',
   EventsAudit = 'events-audit',
   Audit3000 = 'audit-3000',
diff --git a/src/ui/tui/playground/demos/RunScreenDemo.tsx b/src/ui/tui/playground/demos/RunScreenDemo.tsx
index 8655cd10..0c454b38 100644
--- a/src/ui/tui/playground/demos/RunScreenDemo.tsx
+++ b/src/ui/tui/playground/demos/RunScreenDemo.tsx
@@ -18,8 +18,8 @@ import {
 import type { ProgressItem } from '../../primitives/index.js';
 import { LearnCard } from '../../components/LearnCard.js';
 import { TipsCard } from '../../components/TipsCard.js';
+import { getContentBlocks as getMigrationContentBlocks } from '../../../../lib/workflows/migration/content/index.js';
 import { WIZARD_LOG_FILE } from '../../../../utils/paths.js';
-import { getContentBlocks as getIntegrationContentBlocks } from '../../../../lib/workflows/posthog-integration/content/index.js';
 
 const MOCK_TASKS = [
   {
@@ -162,6 +162,8 @@ export const RunScreenDemo = ({ store }: RunScreenDemoProps) => {
   const statuses =
     store.statusMessages.length > 0 ? store.statusMessages : undefined;
 
+  const learnBlocks = getMigrationContentBlocks(store);
+
   const tabs = [
     {
       id: 'status',
@@ -174,7 +176,7 @@ export const RunScreenDemo = ({ store }: RunScreenDemoProps) => {
             ) : (
               <LearnCard
                 store={store}
-                blocks={getIntegrationContentBlocks(store)}
+                blocks={learnBlocks}
                 onComplete={() => store.setLearnCardComplete()}
               />
             )
diff --git a/src/ui/tui/screen-registry.tsx b/src/ui/tui/screen-registry.tsx
index 7bea2952..31234240 100644
--- a/src/ui/tui/screen-registry.tsx
+++ b/src/ui/tui/screen-registry.tsx
@@ -20,6 +20,7 @@ import { ManagedSettingsScreen } from './screens/ManagedSettingsScreen.js';
 import { PortConflictScreen } from './screens/PortConflictScreen.js';
 import { PostHogIntegrationIntroScreen } from './screens/PostHogIntegrationIntroScreen.js';
 import { RevenueIntroScreen } from './screens/RevenueIntroScreen.js';
+import { MigrationIntroScreen } from './screens/MigrationIntroScreen.js';
 import { AgentSkillIntroScreen } from './screens/AgentSkillIntroScreen.js';
 import { AuditIntroScreen } from './screens/audit/AuditIntroScreen.js';
 import { AuditRunScreen } from './screens/audit/AuditRunScreen.js';
@@ -64,6 +65,7 @@ export function createScreens(
     // Wizard flow
     [Screen.Intro]: <PostHogIntegrationIntroScreen store={store} />,
     [Screen.RevenueIntro]: <RevenueIntroScreen store={store} />,
+    [Screen.MigrationIntro]: <MigrationIntroScreen store={store} />,
     [Screen.AgentSkillIntro]: <AgentSkillIntroScreen store={store} />,
     [Screen.AuditIntro]: <AuditIntroScreen store={store} />,
     [Screen.AuditRun]: <AuditRunScreen store={store} />,
diff --git a/src/ui/tui/screens/MigrationIntroScreen.tsx b/src/ui/tui/screens/MigrationIntroScreen.tsx
new file mode 100644
index 00000000..0fa1b695
--- /dev/null
+++ b/src/ui/tui/screens/MigrationIntroScreen.tsx
@@ -0,0 +1,43 @@
+import { Box, Text } from 'ink';
+import { useSyncExternalStore } from 'react';
+import type { WizardStore } from '../store.js';
+import { IntroScreenLayout } from './IntroScreenLayout.js';
+
+interface MigrationIntroScreenProps {
+  store: WizardStore;
+}
+
+export const MigrationIntroScreen = ({ store }: MigrationIntroScreenProps) => {
+  useSyncExternalStore(
+    (cb) => store.subscribe(cb),
+    () => store.getSnapshot(),
+  );
+
+  const { session } = store;
+
+  const body = (
+    <Box flexDirection="column" alignItems="center">
+      <Text>Let's migrate this project to PostHog.</Text>
+    </Box>
+  );
+
+  return (
+    <IntroScreenLayout
+      installDir={session.installDir}
+      body={body}
+      workflowLabel={session.workflowLabel}
+      skillId={session.skillId}
+      menuOptions={[
+        { label: 'Continue', value: 'continue' },
+        { label: 'Cancel', value: 'cancel' },
+      ]}
+      onSelect={(value) => {
+        if (value === 'cancel') {
+          process.exit(0);
+        } else {
+          store.completeSetup();
+        }
+      }}
+    />
+  );
+};

From ecbd57dc21e44d6b871cb81a5cddc941666fec8e Mon Sep 17 00:00:00 2001
From: "Vincent (Wen Yu) Ge" <gewenyu99@gmail.com>
Date: Mon, 25 May 2026 10:30:27 -0400
Subject: [PATCH 2/5] Slide show for the migration wizard

---
 .../content/feature-flags-experiments.tsx     |  16 --
 .../workflows/migration/content/free-tier.tsx |  58 ----
 .../workflows/migration/content/funnel.tsx    | 101 -------
 src/lib/workflows/migration/content/index.tsx | 250 ++++++++++++++++--
 .../migration/content/line-chart.tsx          |  65 -----
 .../workflows/migration/content/migration.tsx | 136 ----------
 .../migration/content/pricing-structure.tsx   |  41 ---
 .../migration/content/product-suite.tsx       |  70 -----
 .../migration/content/vendor-stack.tsx        |  47 ----
 .../content/product-suite.tsx                 |   4 +
 src/ui/tui/playground/PlaygroundApp.tsx       |   6 +
 src/ui/tui/playground/demos/LearnDeckDemo.tsx | 210 +++++++++++++++
 12 files changed, 443 insertions(+), 561 deletions(-)
 delete mode 100644 src/lib/workflows/migration/content/feature-flags-experiments.tsx
 delete mode 100644 src/lib/workflows/migration/content/free-tier.tsx
 delete mode 100644 src/lib/workflows/migration/content/funnel.tsx
 delete mode 100644 src/lib/workflows/migration/content/line-chart.tsx
 delete mode 100644 src/lib/workflows/migration/content/migration.tsx
 delete mode 100644 src/lib/workflows/migration/content/pricing-structure.tsx
 delete mode 100644 src/lib/workflows/migration/content/product-suite.tsx
 delete mode 100644 src/lib/workflows/migration/content/vendor-stack.tsx
 create mode 100644 src/ui/tui/playground/demos/LearnDeckDemo.tsx

diff --git a/src/lib/workflows/migration/content/feature-flags-experiments.tsx b/src/lib/workflows/migration/content/feature-flags-experiments.tsx
deleted file mode 100644
index 6bbe809a..00000000
--- a/src/lib/workflows/migration/content/feature-flags-experiments.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Feature flags + experiments learn material. Plays alongside the generic
- * migration deck when the source product is a feature-flag / experimentation
- * tool (e.g. Statsig). Placeholder content for now.
- *
- * Examples of what could go here: how PostHog represents flags vs configs vs
- * experiments, how flags wire into analytics and replays, how rollouts work,
- * how multivariate flags carry JSON payloads.
- */
-
-import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
-
-export const FEATURE_FLAGS_EXPERIMENTS_BLOCKS: ContentBlock[] = [
-  { content: 'Feature flags and experiments in PostHog.', pause: 3000 },
-  // TODO: replace with real FF/experiments narrative.
-];
diff --git a/src/lib/workflows/migration/content/free-tier.tsx b/src/lib/workflows/migration/content/free-tier.tsx
deleted file mode 100644
index 50801ca2..00000000
--- a/src/lib/workflows/migration/content/free-tier.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * PostHog free-tier highlights — the numbers a migrating team gets back when
- * they consolidate. Sourced from posthog.com/pricing.md.
- */
-
-import { Text } from 'ink';
-import { Colors } from '../../../../ui/tui/styles.js';
-import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
-
-export const FREE_TIER_BLOCK: ContentBlock = {
-  type: 'lines',
-  interval: 400,
-  pause: 9000,
-  lines: [
-    <Text bold>{'  Free every month, on every product'}</Text>,
-    <Text> </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'  1,000,000  '}</Text>
-      <Text>events </Text>
-      <Text dimColor>product analytics</Text>
-    </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'  1,000,000  '}</Text>
-      <Text>requests </Text>
-      <Text dimColor>feature flags + experiments</Text>
-    </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'      5,000  '}</Text>
-      <Text>recordings </Text>
-      <Text dimColor>session replay</Text>
-    </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'    100,000  '}</Text>
-      <Text>exceptions </Text>
-      <Text dimColor>error tracking</Text>
-    </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'    100,000  '}</Text>
-      <Text>events </Text>
-      <Text dimColor>LLM analytics</Text>
-    </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'      50 GB  '}</Text>
-      <Text>logs </Text>
-      <Text dimColor>logs</Text>
-    </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'      1,500  '}</Text>
-      <Text>responses </Text>
-      <Text dimColor>surveys</Text>
-    </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'  1,000,000  '}</Text>
-      <Text>rows </Text>
-      <Text dimColor>data warehouse</Text>
-    </Text>,
-  ],
-};
diff --git a/src/lib/workflows/migration/content/funnel.tsx b/src/lib/workflows/migration/content/funnel.tsx
deleted file mode 100644
index 0d8340e3..00000000
--- a/src/lib/workflows/migration/content/funnel.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * ASCII funnel — illustrates a conversion funnel. Same shape as the
- * integration script's variant; kept separate so the migration narrative
- * can evolve independently.
- */
-
-import { Text } from 'ink';
-import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
-
-export const FUNNEL_BLOCK: ContentBlock = {
-  type: 'lines',
-  interval: 200,
-  pause: 8000,
-  lines: [
-    <Text bold>{'  Funnel · ride conversion'}</Text>,
-    <Text> </Text>,
-    <Text>
-      {'  '}
-      <Text bold>1</Text>
-      {'  app_launched'}
-      {'                     '}
-      <Text bold color="green">
-        100.00%
-      </Text>
-    </Text>,
-    <Text color="cyan">{'     ██████████████████████████████'}</Text>,
-    <Text dimColor>{'     → 1,200 users'}</Text>,
-    <Text> </Text>,
-    <Text>
-      {'  '}
-      <Text bold>2</Text>
-      {'  ride_requested'}
-      {'       '}
-      <Text dimColor>{'avg 2m 30s'}</Text>
-      {'   '}
-      <Text bold color="green">
-        72.00%
-      </Text>
-    </Text>,
-    <Text>
-      {'     '}
-      <Text color="cyan">{'██████████████████████'}</Text>
-      <Text dimColor>{'░░░░░░░░░'}</Text>
-    </Text>,
-    <Text>
-      {'     '}
-      <Text dimColor>→ 864 users</Text>
-      {'  '}
-      <Text color="red">↘</Text>
-      <Text dimColor>{' 336 (28%)'}</Text>
-    </Text>,
-    <Text> </Text>,
-    <Text>
-      {'  '}
-      <Text bold>3</Text>
-      {'  ride_accepted'}
-      {'        '}
-      <Text dimColor>{'avg 5m 12s'}</Text>
-      {'   '}
-      <Text bold color="green">
-        51.00%
-      </Text>
-    </Text>,
-    <Text>
-      {'     '}
-      <Text color="cyan">{'██████████████████'}</Text>
-      <Text dimColor>{'░░░░░░░░░░░░░'}</Text>
-    </Text>,
-    <Text>
-      {'     '}
-      <Text dimColor>→ 612 users</Text>
-      {'  '}
-      <Text color="red">↘</Text>
-      <Text dimColor>{' 252 (29%)'}</Text>
-    </Text>,
-    <Text> </Text>,
-    <Text>
-      {'  '}
-      <Text bold>4</Text>
-      {'  ride_started'}
-      {'         '}
-      <Text dimColor>{'avg 1m 45s'}</Text>
-      {'   '}
-      <Text bold color="green">
-        38.00%
-      </Text>
-    </Text>,
-    <Text>
-      {'     '}
-      <Text color="cyan">{'█████████████'}</Text>
-      <Text dimColor>{'░░░░░░░░░░░░░░░░░░'}</Text>
-    </Text>,
-    <Text>
-      {'     '}
-      <Text dimColor>→ 456 users</Text>
-      {'  '}
-      <Text color="red">↘</Text>
-      <Text dimColor>{' 156 (25%)'}</Text>
-    </Text>,
-  ],
-};
diff --git a/src/lib/workflows/migration/content/index.tsx b/src/lib/workflows/migration/content/index.tsx
index 84fbf48f..77fb8cb0 100644
--- a/src/lib/workflows/migration/content/index.tsx
+++ b/src/lib/workflows/migration/content/index.tsx
@@ -1,32 +1,228 @@
 /**
- * Migration learn-deck composer. Picks topic decks to play alongside the
- * generic migration deck based on the command + product combo the operator
- * invoked.
+ * Migration learn deck (statsig variant). Statsig is the only `migrate`
+ * variant today, so this deck plays as-is when the wizard runs
+ * `migrate --product=statsig`. Three movements:
  *
- * The active variant is read from `session.skillId`, which the wizard sets
- * from `migrate --product=<id>` (`mapCliOptions` in migration/index.ts).
- * Variants whose source SDK is a feature flag / experimentation tool play
- * the FF/experiments deck. Add more topic decks to TOPIC_DECKS_BY_PRODUCT
- * as new variants ship.
+ *   1. Welcome and reassure.
+ *   2. What to expect — the migration is replacement-only, takes a few
+ *      minutes, leaves the build green.
+ *   3. What's a little different — how flags and experiments work in
+ *      PostHog, presented as right-way guidance rather than gotchas.
+ *
+ * FF/experiments guidance paraphrased from PostHog public docs:
+ *   - posthog.com/docs/feature-flags/best-practices
+ *   - posthog.com/docs/feature-flags/common-questions
+ *   - posthog.com/docs/experiments/best-practices
  */
 
-import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+import { Box, Text } from 'ink';
 import type { WizardStore } from '../../../../ui/tui/store.js';
-import { getMigrationBlocks } from './migration.js';
-import { FEATURE_FLAGS_EXPERIMENTS_BLOCKS } from './feature-flags-experiments.js';
-
-const TOPIC_DECKS_BY_PRODUCT: Record<string, ContentBlock[]> = {
-  statsig: FEATURE_FLAGS_EXPERIMENTS_BLOCKS,
-};
-
-function productFromSkillId(skillId: string | null): string | null {
-  const prefix = 'migrate-';
-  if (!skillId || !skillId.startsWith(prefix)) return null;
-  return skillId.slice(prefix.length);
-}
-
-export const getContentBlocks = (store?: WizardStore): ContentBlock[] => {
-  const product = productFromSkillId(store?.session.skillId ?? null);
-  const topicDeck = product ? TOPIC_DECKS_BY_PRODUCT[product] ?? [] : [];
-  return [...getMigrationBlocks(store), ...topicDeck];
-};
+import { Colors } from '../../../../ui/tui/styles.js';
+import { TextRevealMode } from '../../../../ui/tui/primitives/TextBlock.js';
+import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+import { StatusPeekTrigger } from '../../../../ui/tui/components/StatusPeekTrigger.js';
+import { PRODUCT_SUITE_BLOCK } from '../../posthog-integration/content/product-suite.js';
+import { LINE_CHART_BLOCK } from '../../posthog-integration/content/line-chart.js';
+import { FUNNEL_BLOCK } from '../../posthog-integration/content/funnel.js';
+
+export const getContentBlocks = (store?: WizardStore): ContentBlock[] => [
+  // ── Welcome ────────────────────────────────────────────────────────────
+  {
+    content: 'Hello.',
+    pause: 3000,
+    mode: TextRevealMode.Typewriter,
+    animationInterval: 160,
+  },
+
+  { content: 'The Wizard is an agent.', pause: 4000 },
+
+  {
+    content:
+      'As we speak, it’s making a plan to migrate from Statsig to PostHog.',
+    pause: 6000,
+  },
+
+  {
+    content: 'PostHog covers the cost of running this agent.',
+    pause: 4000,
+  },
+
+  { type: 'clear', pause: 2000 },
+
+  {
+    pause: 5000,
+    persist: true,
+    content: <StatusPeekTrigger store={store} />,
+  },
+
+  {
+    pause: 6000,
+    content: (
+      <Text>
+        Press{' '}
+        <Text color={Colors.accent} bold>
+          S
+        </Text>{' '}
+        to expand or collapse the status.
+      </Text>
+    ),
+  },
+
+  { type: 'clear', pause: 2000 },
+
+  // ── What to expect ─────────────────────────────────────────────────────
+  { content: 'Here’s what to expect.', pause: 3000 },
+
+  { content: 'The migration takes about ten minutes.', pause: 3000 },
+
+  {
+    content:
+      'Every Statsig call gets replaced in place with its PostHog equivalent.',
+    pause: 5500,
+  },
+
+  {
+    content:
+      'Nothing new gets added. No extra captures, no surprise instrumentation.',
+    pause: 5500,
+  },
+
+  {
+    content:
+      'The Statsig package gets removed at the end. We’ll run build and lint to clean up after ourselves.',
+    pause: 6500,
+  },
+
+  { type: 'clear', pause: 2000 },
+
+  // ── What's a little different ─────────────────────────────────────────
+  {
+    content: 'A few things work a little differently in PostHog.',
+    pause: 4500,
+  },
+
+  {
+    content: (
+      <Text>
+        Flags evaluate against a stable user. Call{' '}
+        <Text bold color={Colors.accent}>
+          identify()
+        </Text>{' '}
+        first, then check the flag.
+      </Text>
+    ),
+    pause: 6000,
+  },
+
+  {
+    content:
+      'For anything in the first paint, evaluate server-side and bootstrap the values into the client.',
+    pause: 6500,
+  },
+
+  {
+    content: (
+      <Box flexDirection="column">
+        <Text>
+          In production, route requests through a reverse proxy to avoid ad
+          blockers breaking your flags.
+        </Text>
+        <Text dimColor>https://posthog.com/docs/advanced/proxy</Text>
+      </Box>
+    ),
+    pause: 6500,
+  },
+
+  {
+    content:
+      'When a flag reaches 100% rollout, retire it. Flags are signals, not switches.',
+    pause: 5500,
+  },
+
+  {
+    content: (
+      <Text>
+        Name flags descriptively. No double negatives. Reflect the return type.{' '}
+        <Text dimColor>For example </Text>
+        <Text bold>show-new-checkout</Text>
+        <Text dimColor>.</Text>
+      </Text>
+    ),
+    pause: 6500,
+  },
+
+  { type: 'clear', pause: 1500 },
+
+  // ── Experiments ────────────────────────────────────────────────────────
+  {
+    content: (
+      <Text bold color={Colors.accent}>
+        Experiments
+      </Text>
+    ),
+    pause: 2500,
+  },
+
+  {
+    content:
+      'Change one thing per variant. Multiple changes in one variant blur the result.',
+    pause: 5500,
+  },
+
+  {
+    content:
+      'Decide the running time up front. PostHog includes a sample-size and duration calculator in the setup flow.',
+    pause: 6500,
+  },
+
+  {
+    content: 'Roll out to 5–10% first. Watch the metrics. Then increase.',
+    pause: 5000,
+  },
+
+  {
+    content:
+      'Exclude users who already completed the flow. They can’t be affected by the test.',
+    pause: 5500,
+  },
+
+  { type: 'clear', pause: 1500 },
+
+  // ── Close ──────────────────────────────────────────────────────────────
+  {
+    content: 'Flags and experiments live alongside the rest of your data.',
+    pause: 4500,
+  },
+
+  {
+    content: 'Ship behind a flag, watch replays, check analytics for impact.',
+    pause: 4500,
+  },
+
+  { type: 'clear', pause: 1500 },
+
+  {
+    content:
+      'PostHog also provides every other analytics and AI tool to build your product.',
+    pause: 4500,
+  },
+
+  PRODUCT_SUITE_BLOCK,
+
+  { type: 'clear', pause: 1500 },
+
+  {
+    content: 'Gain clarity and really understand your users.',
+    pause: 4000,
+  },
+
+  { content: 'Use trends to measure growth.', pause: 2500 },
+
+  LINE_CHART_BLOCK,
+
+  { type: 'clear', pause: 500 },
+
+  { content: 'Use funnels to reveal bottlenecks.', pause: 2500 },
+
+  FUNNEL_BLOCK,
+];
diff --git a/src/lib/workflows/migration/content/line-chart.tsx b/src/lib/workflows/migration/content/line-chart.tsx
deleted file mode 100644
index ebcd1c07..00000000
--- a/src/lib/workflows/migration/content/line-chart.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * ASCII line chart — illustrates a Trends insight. Same shape as the
- * integration script's variant; kept separate so the migration narrative
- * can evolve independently.
- */
-
-import { Text } from 'ink';
-import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
-
-export const LINE_CHART_BLOCK: ContentBlock = {
-  type: 'lines',
-  interval: 300,
-  pause: 6000,
-  lines: [
-    <Text bold>{'  Trends · user signups (monthly)'}</Text>,
-    <Text> </Text>,
-    <Text>
-      <Text color="gray">{'  10k ┤'}</Text>
-      {'                          '}
-      <Text color="cyan">{'╭──'}</Text>
-      <Text dimColor>{' 9,575'}</Text>
-    </Text>,
-    <Text>
-      <Text color="gray">{'      │'}</Text>
-      {'                         '}
-      <Text color="cyan">{'╭╯'}</Text>
-    </Text>,
-    <Text>
-      <Text color="gray">{' 7.5k ┤'}</Text>
-      {'                        '}
-      <Text color="cyan">{'╭╯'}</Text>
-    </Text>,
-    <Text>
-      <Text color="gray">{'      │'}</Text>
-      {'                      '}
-      <Text color="cyan">{'╭─╯'}</Text>
-    </Text>,
-    <Text>
-      <Text color="gray">{'   5k ┤'}</Text>
-      {'                    '}
-      <Text color="cyan">{'╭─╯'}</Text>
-    </Text>,
-    <Text>
-      <Text color="gray">{'      │'}</Text>
-      {'                 '}
-      <Text color="cyan">{'╭──╯'}</Text>
-    </Text>,
-    <Text>
-      <Text color="gray">{' 2.5k ┤'}</Text>
-      {'             '}
-      <Text color="cyan">{'╭───╯'}</Text>
-    </Text>,
-    <Text>
-      <Text color="gray">{'      │'}</Text>
-      {'      '}
-      <Text color="cyan">{'╭──────╯'}</Text>
-    </Text>,
-    <Text>
-      <Text color="gray">{'    0 ┤'}</Text>
-      <Text color="cyan">{'──────╯'}</Text>
-    </Text>,
-    <Text color="gray">{'      └┬─────┬─────┬─────┬─────┬──'}</Text>,
-    <Text dimColor>{'       May   Aug   Nov   Feb   May'}</Text>,
-  ],
-};
diff --git a/src/lib/workflows/migration/content/migration.tsx b/src/lib/workflows/migration/content/migration.tsx
deleted file mode 100644
index c279b45a..00000000
--- a/src/lib/workflows/migration/content/migration.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * Generic migration learn material. Plays for every `migrate` run regardless
- * of source product. The narrative focuses on multi-vendor consolidation:
- * cost comparison, free-tier breakdown, pricing model, then familiar analyses
- * (trends + funnels) the team already had.
- */
-
-import { Text } from 'ink';
-import type { WizardStore } from '../../../../ui/tui/store.js';
-import { Colors } from '../../../../ui/tui/styles.js';
-import { TextRevealMode } from '../../../../ui/tui/primitives/TextBlock.js';
-import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
-import { StatusPeekTrigger } from '../../../../ui/tui/components/StatusPeekTrigger.js';
-import { VENDOR_STACK_BLOCK } from './vendor-stack.js';
-import { FREE_TIER_BLOCK } from './free-tier.js';
-import { PRICING_STRUCTURE_BLOCK } from './pricing-structure.js';
-import { PRODUCT_SUITE_BLOCK } from './product-suite.js';
-import { LINE_CHART_BLOCK } from './line-chart.js';
-import { FUNNEL_BLOCK } from './funnel.js';
-
-/**
- * Human-readable display name for each `--product=<id>` variant of the
- * `migrate` command. The intro line reads "migrate from <label> to PostHog"
- * when the variant is known, and "migrate this project to PostHog" otherwise.
- */
-const PRODUCT_LABELS: Record<string, string> = {
-  statsig: 'Statsig',
-};
-
-function migrationIntroPhrase(store?: WizardStore): string {
-  const skillId = store?.session.skillId ?? '';
-  const prefix = 'migrate-';
-  if (!skillId.startsWith(prefix)) return 'migrate this project to PostHog';
-  const variant = skillId.slice(prefix.length);
-  const label = PRODUCT_LABELS[variant];
-  return label
-    ? `migrate from ${label} to PostHog`
-    : 'migrate this project to PostHog';
-}
-
-export const getMigrationBlocks = (store?: WizardStore): ContentBlock[] => [
-  {
-    content: 'Hello.',
-    pause: 3000,
-    mode: TextRevealMode.Typewriter,
-    animationInterval: 160,
-  },
-
-  { content: 'The Wizard is an agent.', pause: 4000 },
-
-  {
-    content: `As we speak, it's making a plan to ${migrationIntroPhrase(
-      store,
-    )}.`,
-    pause: 6000,
-  },
-
-  {
-    content: 'PostHog covers the cost of running this agent.',
-    pause: 4000,
-  },
-
-  { type: 'clear', pause: 2000 },
-
-  {
-    pause: 5000,
-    persist: true,
-    content: <StatusPeekTrigger store={store} />,
-  },
-
-  {
-    pause: 6000,
-    content: (
-      <Text>
-        Press{' '}
-        <Text color={Colors.accent} bold>
-          S
-        </Text>{' '}
-        to expand or collapse the status.
-      </Text>
-    ),
-  },
-
-  { type: 'clear', pause: 2000 },
-
-  { content: 'It takes about five minutes.', pause: 2000 },
-
-  {
-    content: 'So stick around — here’s what you’re moving onto.',
-    pause: 4000,
-  },
-
-  { type: 'clear', pause: 1500 },
-
-  {
-    content: 'PostHog replaces multi-vendor stacks with one platform.',
-    pause: 5000,
-  },
-
-  { content: 'Here’s the math.', pause: 1500 },
-
-  VENDOR_STACK_BLOCK,
-
-  { type: 'clear', pause: 1500 },
-
-  { content: 'All the dev and AI tools you need in one place.', pause: 3000 },
-
-  PRODUCT_SUITE_BLOCK,
-
-  { type: 'clear', pause: 1500 },
-
-  {
-    content: 'Pricing is usage-based, with a generous free tier.',
-    pause: 4000,
-  },
-
-  FREE_TIER_BLOCK,
-
-  { type: 'clear', pause: 1500 },
-
-  PRICING_STRUCTURE_BLOCK,
-
-  { type: 'clear', pause: 1500 },
-
-  { content: 'You still get every analysis you had before.', pause: 4000 },
-
-  { content: 'Trends to measure growth.', pause: 2500 },
-
-  LINE_CHART_BLOCK,
-
-  { type: 'clear', pause: 500 },
-
-  { content: 'Funnels to reveal bottlenecks.', pause: 2500 },
-
-  FUNNEL_BLOCK,
-];
diff --git a/src/lib/workflows/migration/content/pricing-structure.tsx b/src/lib/workflows/migration/content/pricing-structure.tsx
deleted file mode 100644
index e8dc75b7..00000000
--- a/src/lib/workflows/migration/content/pricing-structure.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Pricing structure block — what happens after the free tier.
- */
-
-import { Text } from 'ink';
-import { Colors } from '../../../../ui/tui/styles.js';
-import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
-
-export const PRICING_STRUCTURE_BLOCK: ContentBlock = {
-  type: 'lines',
-  interval: 500,
-  pause: 8000,
-  lines: [
-    <Text bold>{'  After the free tier'}</Text>,
-    <Text> </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'  $0 '}</Text>
-      <Text>base price · pay only for what you use</Text>
-    </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'  ◆ '}</Text>
-      <Text>per-event prices decrease with volume</Text>
-    </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'  ◆ '}</Text>
-      <Text>no per-seat charges — your whole team is included</Text>
-    </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'  ◆ '}</Text>
-      <Text>web analytics bundled with product analytics</Text>
-    </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'  ◆ '}</Text>
-      <Text>experiments bundled with feature flags</Text>
-    </Text>,
-    <Text>
-      <Text color={Colors.accent}>{'  ◆ '}</Text>
-      <Text>revenue analytics bundled with data warehouse</Text>
-    </Text>,
-  ],
-};
diff --git a/src/lib/workflows/migration/content/product-suite.tsx b/src/lib/workflows/migration/content/product-suite.tsx
deleted file mode 100644
index 2a016b9d..00000000
--- a/src/lib/workflows/migration/content/product-suite.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * 2-column list of PostHog product surfaces. Intentionally a separate copy
- * from the posthog-integration variant — the migration narrative can evolve
- * independently (e.g. ordering products to highlight migration-relevant ones).
- */
-
-import { Text } from 'ink';
-import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
-
-export const PRODUCT_SUITE_BLOCK: ContentBlock = {
-  type: 'lines',
-  interval: 1000,
-  pause: 15000,
-  lines: [
-    <Text>
-      <Text color="cyan">{'  ◆ '}</Text>
-      {'Product Analytics     '}
-      <Text color="cyan">{'◆ '}</Text>
-      {'Error Tracking'}
-    </Text>,
-    <Text>
-      <Text color="cyan">{'  ◆ '}</Text>
-      {'Web Analytics         '}
-      <Text color="cyan">{'◆ '}</Text>
-      {'Session Replay'}
-    </Text>,
-    <Text>
-      <Text color="cyan">{'  ◆ '}</Text>
-      {'Feature Flags         '}
-      <Text color="cyan">{'◆ '}</Text>
-      {'Data Pipelines'}
-    </Text>,
-    <Text>
-      <Text color="cyan">{'  ◆ '}</Text>
-      {'Experiments           '}
-      <Text color="cyan">{'◆ '}</Text>
-      {'Data Warehouse'}
-    </Text>,
-    <Text>
-      <Text color="cyan">{'  ◆ '}</Text>
-      {'LLM Analytics         '}
-      <Text color="cyan">{'◆ '}</Text>
-      {'Surveys'}
-    </Text>,
-    <Text>
-      <Text color="cyan">{'  ◆ '}</Text>
-      {'Workflows             '}
-      <Text color="cyan">{'◆ '}</Text>
-      {'Logs'}
-    </Text>,
-    <Text>
-      <Text color="cyan">{'  ◆ '}</Text>
-      {'Product Tours         '}
-      <Text color="cyan">{'◆ '}</Text>
-      {'Support'}
-    </Text>,
-    <Text>
-      <Text color="cyan">{'  ◆ '}</Text>
-      {'Revenue Analytics     '}
-      <Text color="cyan">{'◆ '}</Text>
-      {'Endpoints'}
-    </Text>,
-    <Text>
-      <Text color="cyan">{'  ◆ '}</Text>
-      {'Customer Analytics'}
-      <Text color="cyan">{'    ◆ '}</Text>
-      {'PostHog AI'}
-    </Text>,
-  ],
-};
diff --git a/src/lib/workflows/migration/content/vendor-stack.tsx b/src/lib/workflows/migration/content/vendor-stack.tsx
deleted file mode 100644
index d4723eae..00000000
--- a/src/lib/workflows/migration/content/vendor-stack.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Vendor cost stack — the multi-tool baseline a typical migration target has
- * before consolidating onto PostHog. Numbers from each vendor's published
- * starter pricing.
- */
-
-import { Text } from 'ink';
-import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
-
-export const VENDOR_STACK_BLOCK: ContentBlock = {
-  type: 'lines',
-  interval: 600,
-  pause: 9000,
-  lines: [
-    <Text bold>{'  Typical pre-migration stack'}</Text>,
-    <Text> </Text>,
-    <Text>
-      <Text color="gray">{'  Sentry'}</Text>
-      <Text>{'         error tracking      '}</Text>
-      <Text color="red">{'$26/mo+'}</Text>
-    </Text>,
-    <Text>
-      <Text color="gray">{'  LaunchDarkly'}</Text>
-      <Text>{'   feature flags       '}</Text>
-      <Text color="red">{'$8.33/mo+'}</Text>
-    </Text>,
-    <Text>
-      <Text color="gray">{'  Amplitude'}</Text>
-      <Text>{'      product analytics   '}</Text>
-      <Text color="red">{'$49/mo+'}</Text>
-    </Text>,
-    <Text>
-      <Text color="gray">{'  Braintrust'}</Text>
-      <Text>{'     LLM analytics       '}</Text>
-      <Text color="red">{'$50/mo+'}</Text>
-    </Text>,
-    <Text color="gray">{'  ─────────────────────────────────────'}</Text>,
-    <Text>
-      <Text>{'  Total'}</Text>
-      <Text>{'                              '}</Text>
-      <Text bold color="red">
-        {'$133/mo+'}
-      </Text>
-    </Text>,
-    <Text dimColor>{'  plus ~450KB of JavaScript SDKs'}</Text>,
-  ],
-};
diff --git a/src/lib/workflows/posthog-integration/content/product-suite.tsx b/src/lib/workflows/posthog-integration/content/product-suite.tsx
index e9f37422..5bbe7683 100644
--- a/src/lib/workflows/posthog-integration/content/product-suite.tsx
+++ b/src/lib/workflows/posthog-integration/content/product-suite.tsx
@@ -62,5 +62,9 @@ export const PRODUCT_SUITE_BLOCK: ContentBlock = {
       <Text color="cyan">{'  ◆ '}</Text>
       {'Customer Analytics'}
     </Text>,
+    <Text>
+      <Text color="cyan">{'  ◆ '}</Text>
+      {'PostHog Code'}
+    </Text>,
   ],
 };
diff --git a/src/ui/tui/playground/PlaygroundApp.tsx b/src/ui/tui/playground/PlaygroundApp.tsx
index 5eb87511..2e315a89 100644
--- a/src/ui/tui/playground/PlaygroundApp.tsx
+++ b/src/ui/tui/playground/PlaygroundApp.tsx
@@ -19,6 +19,7 @@ import { ModalDemo } from './demos/ModalDemo.js';
 import { McpDemo } from './demos/McpDemo.js';
 import { KeyboardHintsDemo } from './demos/KeyboardHintsDemo.js';
 import { AuditChecksDemo } from './demos/AuditChecksDemo.js';
+import { LearnDeckDemo } from './demos/LearnDeckDemo.js';
 
 interface PlaygroundAppProps {
   store: WizardStore;
@@ -65,6 +66,11 @@ export const PlaygroundApp = ({ store }: PlaygroundAppProps) => {
       label: 'Audit checks',
       component: <AuditChecksDemo />,
     },
+    {
+      id: 'learn-deck',
+      label: 'Learn deck',
+      component: <LearnDeckDemo store={store} />,
+    },
   ];
 
   return (
diff --git a/src/ui/tui/playground/demos/LearnDeckDemo.tsx b/src/ui/tui/playground/demos/LearnDeckDemo.tsx
new file mode 100644
index 00000000..742f0646
--- /dev/null
+++ b/src/ui/tui/playground/demos/LearnDeckDemo.tsx
@@ -0,0 +1,210 @@
+/**
+ * LearnDeckDemo — flip through every workflow's content deck one block at
+ * a time so wording, pauses, and visual blocks can be reviewed without
+ * waiting for the auto-advance timer.
+ *
+ *   n / p   step block (next / previous)
+ *   [ / ]   switch deck
+ *   r       replay current block (re-runs the reveal animation)
+ *
+ * Arrow keys are reserved for the playground's tab switcher, so this demo
+ * uses letter keys.
+ *
+ * Decks are pulled from `WORKFLOW_REGISTRY` so every workflow that ships a
+ * deck is reviewable here. Migration also gets per-variant entries (one
+ * per `--product=<id>` choice) so the variant composer in
+ * `migration/content/index.tsx` can be exercised side-by-side with the
+ * generic deck.
+ */
+
+import { Box, Text, useInput } from 'ink';
+import { useMemo, useState } from 'react';
+import { ContentSequencer, TextRevealMode } from '../../primitives/index.js';
+import type { ContentBlock } from '../../primitives/index.js';
+import { Colors } from '../../styles.js';
+import type { WizardStore } from '../../store.js';
+import { WORKFLOW_REGISTRY } from '../../../../lib/workflows/workflow-registry.js';
+import { AUDIT_AREA_SLIDES } from '../../screens/audit/slides/index.js';
+import { AUDIT_3000_AREA_SLIDES } from '../../screens/audit-3000/slides/index.js';
+import type { AreaSlide } from '../../screens/audit/slides/shared.js';
+
+interface Deck {
+  id: string;
+  label: string;
+  blocks: ContentBlock[];
+}
+
+interface LearnDeckDemoProps {
+  store: WizardStore;
+}
+
+export const LearnDeckDemo = ({ store }: LearnDeckDemoProps) => {
+  const decks: Deck[] = useMemo(() => {
+    const all: Deck[] = [];
+
+    // Every workflow in the registry that ships a deck. Seed the store's
+    // skillId from the workflow config so decks that template the skill
+    // name (e.g. agent-skill's "Running the <skill> skill...") render the
+    // real value instead of "unknown".
+    for (const wf of WORKFLOW_REGISTRY) {
+      if (!wf.getContentBlocks) continue;
+      const stub = wf.skillId
+        ? withSessionOverride(store, { skillId: wf.skillId })
+        : store;
+      all.push({
+        id: `workflow:${wf.flowKey}`,
+        label: `${wf.flowKey} (${wf.command ?? 'default'})${
+          wf.skillId ? ` · skill: ${wf.skillId}` : ''
+        }`,
+        blocks: wf.getContentBlocks(stub),
+      });
+    }
+
+    // Audit + audit-3000 ship their own per-area slide model (not the
+    // ContentBlock deck most workflows use). Adapt each AreaSlide into a
+    // flat ContentBlock list so the flipper can review them the same way.
+    all.push({
+      id: 'audit:area-slides',
+      label: 'audit · area slides',
+      blocks: areaSlidesToBlocks(AUDIT_AREA_SLIDES),
+    });
+    all.push({
+      id: 'audit-3000:area-slides',
+      label: 'audit-3000 · area slides',
+      blocks: areaSlidesToBlocks(AUDIT_3000_AREA_SLIDES),
+    });
+
+    return all;
+  }, [store]);
+
+  const [deckIdx, setDeckIdx] = useState(0);
+  const [blockIdx, setBlockIdx] = useState(0);
+  const [replayKey, setReplayKey] = useState(0);
+
+  const deck = decks[deckIdx];
+  const block = deck.blocks[blockIdx];
+
+  useInput((input) => {
+    if (input === 'p') {
+      setBlockIdx((i) => Math.max(0, i - 1));
+    } else if (input === 'n') {
+      setBlockIdx((i) => Math.min(deck.blocks.length - 1, i + 1));
+    } else if (input === '[') {
+      setDeckIdx((i) => (i - 1 + decks.length) % decks.length);
+      setBlockIdx(0);
+    } else if (input === ']') {
+      setDeckIdx((i) => (i + 1) % decks.length);
+      setBlockIdx(0);
+    } else if (input === 'r') {
+      setReplayKey((k) => k + 1);
+    }
+  });
+
+  const pauseMs =
+    typeof block === 'object' && 'pause' in block ? block.pause : '—';
+  const blockKind = describeBlockKind(block);
+
+  return (
+    <Box flexDirection="column" flexGrow={1} paddingX={1}>
+      <Text bold color={Colors.accent}>
+        Learn deck flipper
+      </Text>
+      <Text dimColor>n/p step block · [ ] switch deck · r replay</Text>
+      <Box height={1} />
+
+      <Text>
+        <Text bold>Deck:</Text> {deck.label}{' '}
+        <Text dimColor>
+          ({deckIdx + 1}/{decks.length})
+        </Text>
+      </Text>
+      <Text>
+        <Text bold>Block:</Text> {blockIdx + 1}/{deck.blocks.length}{' '}
+        <Text dimColor>
+          · kind: {blockKind} · pause: {String(pauseMs)}ms
+        </Text>
+      </Text>
+      <Box height={1} />
+
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor={Colors.muted}
+        paddingX={1}
+        flexGrow={1}
+      >
+        <ContentSequencer
+          key={`${deck.id}-${blockIdx}-${replayKey}`}
+          blocks={[block]}
+          mode={TextRevealMode.SentenceBySentence}
+          startDelay={0}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * Build a store proxy that exposes an overridden `session` while keeping
+ * every prototype method (e.g. `setStatusExpanded`) and atom reference
+ * intact. A plain `{...store, session: ...}` spread would drop the
+ * prototype, so anything that called a store method on the result would
+ * crash at render time.
+ */
+function withSessionOverride(
+  store: WizardStore,
+  patch: Partial<WizardStore['session']>,
+): WizardStore {
+  const stub = Object.create(Object.getPrototypeOf(store)) as WizardStore;
+  Object.assign(stub, store);
+  Object.defineProperty(stub, 'session', {
+    value: { ...store.session, ...patch },
+    writable: false,
+    configurable: true,
+  });
+  return stub;
+}
+
+/**
+ * Adapter: turn each audit AreaSlide into a sequence of ContentBlocks so it
+ * fits the flipper's renderer. One block per intro paragraph, one for the
+ * visual when present. Each slide is preceded by a heading block naming the
+ * area so flipping between areas is obvious.
+ */
+function areaSlidesToBlocks(slides: AreaSlide[]): ContentBlock[] {
+  const out: ContentBlock[] = [];
+  for (const slide of slides) {
+    out.push({
+      content: (
+        <Text bold color={Colors.accent}>
+          {slide.area}
+        </Text>
+      ),
+      pause: 3000,
+    });
+    for (const paragraph of slide.intro) {
+      out.push({ content: paragraph, pause: 5000 });
+    }
+    if (slide.visual) {
+      out.push({
+        content: slide.visual,
+        pause: 8000,
+        persist: true,
+      });
+    }
+    out.push({ type: 'clear', pause: 1000 });
+  }
+  return out;
+}
+
+function describeBlockKind(block: ContentBlock): string {
+  if (typeof block === 'string') return 'string';
+  if (typeof block === 'object' && block !== null) {
+    if ('type' in block && block.type === 'clear') return 'clear';
+    if ('type' in block && block.type === 'lines') return 'lines';
+    if ('content' in block) {
+      return typeof block.content === 'string' ? 'text' : 'jsx';
+    }
+  }
+  return 'unknown';
+}

From e7f71e364f60959c8a3540e523d62e6cb6cc2960 Mon Sep 17 00:00:00 2001
From: "Vincent (Wen Yu) Ge" <gewenyu99@gmail.com>
Date: Mon, 25 May 2026 10:31:09 -0400
Subject: [PATCH 3/5] Improve layout

---
 .../workflows/posthog-integration/content/product-suite.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/lib/workflows/posthog-integration/content/product-suite.tsx b/src/lib/workflows/posthog-integration/content/product-suite.tsx
index 5bbe7683..2ab19921 100644
--- a/src/lib/workflows/posthog-integration/content/product-suite.tsx
+++ b/src/lib/workflows/posthog-integration/content/product-suite.tsx
@@ -60,10 +60,8 @@ export const PRODUCT_SUITE_BLOCK: ContentBlock = {
     </Text>,
     <Text>
       <Text color="cyan">{'  ◆ '}</Text>
-      {'Customer Analytics'}
-    </Text>,
-    <Text>
-      <Text color="cyan">{'  ◆ '}</Text>
+      {'Customer Analytics    '}
+      <Text color="cyan">{'◆ '}</Text>
       {'PostHog Code'}
     </Text>,
   ],

From c766fc35a4eb7d7c1e34db61d976d3c44ceea4d6 Mon Sep 17 00:00:00 2001
From: "Vincent (Wen Yu) Ge" <gewenyu99@gmail.com>
Date: Mon, 25 May 2026 12:45:06 -0400
Subject: [PATCH 4/5] Improve slides

---
 .../workflows/migration/content/free-tier.tsx | 58 ++++++++++++++
 src/lib/workflows/migration/content/index.tsx | 44 +++++++++--
 .../migration/content/pricing-structure.tsx   | 41 ++++++++++
 .../migration/content/vendor-stack.tsx        | 47 ++++++++++++
 src/lib/workflows/migration/index.ts          |  9 ---
 src/ui/tui/playground/demos/LearnDeckDemo.tsx | 76 +++++++++++++++----
 6 files changed, 245 insertions(+), 30 deletions(-)
 create mode 100644 src/lib/workflows/migration/content/free-tier.tsx
 create mode 100644 src/lib/workflows/migration/content/pricing-structure.tsx
 create mode 100644 src/lib/workflows/migration/content/vendor-stack.tsx

diff --git a/src/lib/workflows/migration/content/free-tier.tsx b/src/lib/workflows/migration/content/free-tier.tsx
new file mode 100644
index 00000000..50801ca2
--- /dev/null
+++ b/src/lib/workflows/migration/content/free-tier.tsx
@@ -0,0 +1,58 @@
+/**
+ * PostHog free-tier highlights — the numbers a migrating team gets back when
+ * they consolidate. Sourced from posthog.com/pricing.md.
+ */
+
+import { Text } from 'ink';
+import { Colors } from '../../../../ui/tui/styles.js';
+import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+
+export const FREE_TIER_BLOCK: ContentBlock = {
+  type: 'lines',
+  interval: 400,
+  pause: 9000,
+  lines: [
+    <Text bold>{'  Free every month, on every product'}</Text>,
+    <Text> </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  1,000,000  '}</Text>
+      <Text>events </Text>
+      <Text dimColor>product analytics</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  1,000,000  '}</Text>
+      <Text>requests </Text>
+      <Text dimColor>feature flags + experiments</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'      5,000  '}</Text>
+      <Text>recordings </Text>
+      <Text dimColor>session replay</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'    100,000  '}</Text>
+      <Text>exceptions </Text>
+      <Text dimColor>error tracking</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'    100,000  '}</Text>
+      <Text>events </Text>
+      <Text dimColor>LLM analytics</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'      50 GB  '}</Text>
+      <Text>logs </Text>
+      <Text dimColor>logs</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'      1,500  '}</Text>
+      <Text>responses </Text>
+      <Text dimColor>surveys</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  1,000,000  '}</Text>
+      <Text>rows </Text>
+      <Text dimColor>data warehouse</Text>
+    </Text>,
+  ],
+};
diff --git a/src/lib/workflows/migration/content/index.tsx b/src/lib/workflows/migration/content/index.tsx
index 77fb8cb0..45d842e1 100644
--- a/src/lib/workflows/migration/content/index.tsx
+++ b/src/lib/workflows/migration/content/index.tsx
@@ -15,7 +15,7 @@
  *   - posthog.com/docs/experiments/best-practices
  */
 
-import { Box, Text } from 'ink';
+import { Text } from 'ink';
 import type { WizardStore } from '../../../../ui/tui/store.js';
 import { Colors } from '../../../../ui/tui/styles.js';
 import { TextRevealMode } from '../../../../ui/tui/primitives/TextBlock.js';
@@ -24,6 +24,9 @@ import { StatusPeekTrigger } from '../../../../ui/tui/components/StatusPeekTrigg
 import { PRODUCT_SUITE_BLOCK } from '../../posthog-integration/content/product-suite.js';
 import { LINE_CHART_BLOCK } from '../../posthog-integration/content/line-chart.js';
 import { FUNNEL_BLOCK } from '../../posthog-integration/content/funnel.js';
+import { VENDOR_STACK_BLOCK } from './vendor-stack.js';
+import { FREE_TIER_BLOCK } from './free-tier.js';
+import { PRICING_STRUCTURE_BLOCK } from './pricing-structure.js';
 
 export const getContentBlocks = (store?: WizardStore): ContentBlock[] => [
   // ── Welcome ────────────────────────────────────────────────────────────
@@ -57,6 +60,7 @@ export const getContentBlocks = (store?: WizardStore): ContentBlock[] => [
 
   {
     pause: 6000,
+    persist: true,
     content: (
       <Text>
         Press{' '}
@@ -112,6 +116,7 @@ export const getContentBlocks = (store?: WizardStore): ContentBlock[] => [
       </Text>
     ),
     pause: 6000,
+    persist: true,
   },
 
   {
@@ -122,15 +127,14 @@ export const getContentBlocks = (store?: WizardStore): ContentBlock[] => [
 
   {
     content: (
-      <Box flexDirection="column">
-        <Text>
-          In production, route requests through a reverse proxy to avoid ad
-          blockers breaking your flags.
-        </Text>
+      <Text>
+        In production, route requests through a reverse proxy to avoid ad
+        blockers breaking your flags.{'\n'}
         <Text dimColor>https://posthog.com/docs/advanced/proxy</Text>
-      </Box>
+      </Text>
     ),
     pause: 6500,
+    persist: true,
   },
 
   {
@@ -149,6 +153,7 @@ export const getContentBlocks = (store?: WizardStore): ContentBlock[] => [
       </Text>
     ),
     pause: 6500,
+    persist: true,
   },
 
   { type: 'clear', pause: 1500 },
@@ -161,6 +166,7 @@ export const getContentBlocks = (store?: WizardStore): ContentBlock[] => [
       </Text>
     ),
     pause: 2500,
+    persist: true,
   },
 
   {
@@ -211,6 +217,30 @@ export const getContentBlocks = (store?: WizardStore): ContentBlock[] => [
 
   { type: 'clear', pause: 1500 },
 
+  {
+    content: 'And consolidating onto one platform saves real money.',
+    pause: 4500,
+  },
+
+  { content: 'Here’s the math.', pause: 1500 },
+
+  VENDOR_STACK_BLOCK,
+
+  { type: 'clear', pause: 1500 },
+
+  {
+    content: 'Pricing is usage-based, with a generous free tier.',
+    pause: 4000,
+  },
+
+  FREE_TIER_BLOCK,
+
+  { type: 'clear', pause: 1500 },
+
+  PRICING_STRUCTURE_BLOCK,
+
+  { type: 'clear', pause: 1500 },
+
   {
     content: 'Gain clarity and really understand your users.',
     pause: 4000,
diff --git a/src/lib/workflows/migration/content/pricing-structure.tsx b/src/lib/workflows/migration/content/pricing-structure.tsx
new file mode 100644
index 00000000..e8dc75b7
--- /dev/null
+++ b/src/lib/workflows/migration/content/pricing-structure.tsx
@@ -0,0 +1,41 @@
+/**
+ * Pricing structure block — what happens after the free tier.
+ */
+
+import { Text } from 'ink';
+import { Colors } from '../../../../ui/tui/styles.js';
+import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+
+export const PRICING_STRUCTURE_BLOCK: ContentBlock = {
+  type: 'lines',
+  interval: 500,
+  pause: 8000,
+  lines: [
+    <Text bold>{'  After the free tier'}</Text>,
+    <Text> </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  $0 '}</Text>
+      <Text>base price · pay only for what you use</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  ◆ '}</Text>
+      <Text>per-event prices decrease with volume</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  ◆ '}</Text>
+      <Text>no per-seat charges — your whole team is included</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  ◆ '}</Text>
+      <Text>web analytics bundled with product analytics</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  ◆ '}</Text>
+      <Text>experiments bundled with feature flags</Text>
+    </Text>,
+    <Text>
+      <Text color={Colors.accent}>{'  ◆ '}</Text>
+      <Text>revenue analytics bundled with data warehouse</Text>
+    </Text>,
+  ],
+};
diff --git a/src/lib/workflows/migration/content/vendor-stack.tsx b/src/lib/workflows/migration/content/vendor-stack.tsx
new file mode 100644
index 00000000..d4723eae
--- /dev/null
+++ b/src/lib/workflows/migration/content/vendor-stack.tsx
@@ -0,0 +1,47 @@
+/**
+ * Vendor cost stack — the multi-tool baseline a typical migration target has
+ * before consolidating onto PostHog. Numbers from each vendor's published
+ * starter pricing.
+ */
+
+import { Text } from 'ink';
+import type { ContentBlock } from '../../../../ui/tui/primitives/content-types.js';
+
+export const VENDOR_STACK_BLOCK: ContentBlock = {
+  type: 'lines',
+  interval: 600,
+  pause: 9000,
+  lines: [
+    <Text bold>{'  Typical pre-migration stack'}</Text>,
+    <Text> </Text>,
+    <Text>
+      <Text color="gray">{'  Sentry'}</Text>
+      <Text>{'         error tracking      '}</Text>
+      <Text color="red">{'$26/mo+'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{'  LaunchDarkly'}</Text>
+      <Text>{'   feature flags       '}</Text>
+      <Text color="red">{'$8.33/mo+'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{'  Amplitude'}</Text>
+      <Text>{'      product analytics   '}</Text>
+      <Text color="red">{'$49/mo+'}</Text>
+    </Text>,
+    <Text>
+      <Text color="gray">{'  Braintrust'}</Text>
+      <Text>{'     LLM analytics       '}</Text>
+      <Text color="red">{'$50/mo+'}</Text>
+    </Text>,
+    <Text color="gray">{'  ─────────────────────────────────────'}</Text>,
+    <Text>
+      <Text>{'  Total'}</Text>
+      <Text>{'                              '}</Text>
+      <Text bold color="red">
+        {'$133/mo+'}
+      </Text>
+    </Text>,
+    <Text dimColor>{'  plus ~450KB of JavaScript SDKs'}</Text>,
+  ],
+};
diff --git a/src/lib/workflows/migration/index.ts b/src/lib/workflows/migration/index.ts
index 384f4105..1789a211 100644
--- a/src/lib/workflows/migration/index.ts
+++ b/src/lib/workflows/migration/index.ts
@@ -15,15 +15,6 @@ const MIGRATION_ABORT_CASES: AbortCase[] = [
       "haven't installed PostHog yet, you don't need this command — run " +
       '`npx @posthog/wizard@latest` to add PostHog from scratch.',
   },
-  {
-    match: /^no project framework detected$/i,
-    message: 'No project framework detected',
-    body:
-      'The migration could not identify the framework this project sits on ' +
-      'top of from its dependency manifests. PostHog needs a framework match ' +
-      'to install the right SDK package. Make sure the project has a ' +
-      'recognizable manifest at the root and re-run.',
-  },
 ];
 
 const MIGRATE_PRODUCTS = ['statsig'] as const;
diff --git a/src/ui/tui/playground/demos/LearnDeckDemo.tsx b/src/ui/tui/playground/demos/LearnDeckDemo.tsx
index 742f0646..f26f0a62 100644
--- a/src/ui/tui/playground/demos/LearnDeckDemo.tsx
+++ b/src/ui/tui/playground/demos/LearnDeckDemo.tsx
@@ -19,8 +19,13 @@
 
 import { Box, Text, useInput } from 'ink';
 import { useMemo, useState } from 'react';
-import { ContentSequencer, TextRevealMode } from '../../primitives/index.js';
-import type { ContentBlock } from '../../primitives/index.js';
+import {
+  ContentSequencer,
+  ProgressList,
+  SplitView,
+  TextRevealMode,
+} from '../../primitives/index.js';
+import type { ContentBlock, ProgressItem } from '../../primitives/index.js';
 import { Colors } from '../../styles.js';
 import type { WizardStore } from '../../store.js';
 import { WORKFLOW_REGISTRY } from '../../../../lib/workflows/workflow-registry.js';
@@ -34,6 +39,49 @@ interface Deck {
   blocks: ContentBlock[];
 }
 
+/**
+ * Fake task list to fill the right-hand pane so the SplitView layout matches
+ * what operators actually see during a real run. Mix of statuses so the
+ * spinner glyph, the in-progress row, and completed rows all render.
+ */
+const MOCK_TASKS: ProgressItem[] = [
+  {
+    label: 'Confirm Statsig is in use',
+    activeForm: 'Confirming Statsig is in use',
+    status: 'completed',
+  },
+  {
+    label: 'Install PostHog',
+    activeForm: 'Installing PostHog',
+    status: 'completed',
+  },
+  {
+    label: 'Plan call site replacements',
+    activeForm: 'Planning call site replacements',
+    status: 'in_progress',
+  },
+  {
+    label: 'Rewrite call sites',
+    activeForm: 'Rewriting call sites',
+    status: 'pending',
+  },
+  {
+    label: 'Remove Statsig',
+    activeForm: 'Removing Statsig',
+    status: 'pending',
+  },
+  {
+    label: 'Verify the project still builds',
+    activeForm: 'Verifying the build',
+    status: 'pending',
+  },
+  {
+    label: 'Write migration report',
+    activeForm: 'Writing migration report',
+    status: 'pending',
+  },
+];
+
 interface LearnDeckDemoProps {
   store: WizardStore;
 }
@@ -126,18 +174,18 @@ export const LearnDeckDemo = ({ store }: LearnDeckDemoProps) => {
       </Text>
       <Box height={1} />
 
-      <Box
-        flexDirection="column"
-        borderStyle="single"
-        borderColor={Colors.muted}
-        paddingX={1}
-        flexGrow={1}
-      >
-        <ContentSequencer
-          key={`${deck.id}-${blockIdx}-${replayKey}`}
-          blocks={[block]}
-          mode={TextRevealMode.SentenceBySentence}
-          startDelay={0}
+      <Box flexGrow={1}>
+        <SplitView
+          left={
+            <ContentSequencer
+              key={`${deck.id}-${blockIdx}-${replayKey}`}
+              blocks={deck.blocks.slice(0, blockIdx + 1)}
+              mode={TextRevealMode.SentenceBySentence}
+              startDelay={0}
+              initialBlockIdx={blockIdx}
+            />
+          }
+          right={<ProgressList items={MOCK_TASKS} title="Tasks" />}
         />
       </Box>
     </Box>

From fee2b99664f93995ecebb30c7a3efbc0d2a4fe23 Mon Sep 17 00:00:00 2001
From: "Vincent (Wen Yu) Ge" <gewenyu99@gmail.com>
Date: Mon, 25 May 2026 13:00:19 -0400
Subject: [PATCH 5/5] map skill and product better

---
 src/lib/workflows/migration/index.ts | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/lib/workflows/migration/index.ts b/src/lib/workflows/migration/index.ts
index 1789a211..3fe437df 100644
--- a/src/lib/workflows/migration/index.ts
+++ b/src/lib/workflows/migration/index.ts
@@ -17,13 +17,23 @@ const MIGRATION_ABORT_CASES: AbortCase[] = [
   },
 ];
 
-const MIGRATE_PRODUCTS = ['statsig'] as const;
+/**
+ * Map each `--product=<id>` choice to the context-mill skill ID that handles
+ * it. Adding a variant: drop a new row here. The CLI `choices` and the
+ * runtime lookup both read from this map, so the two stay in sync.
+ */
+const PRODUCT_TO_SKILL_ID = {
+  statsig: 'migrate-statsig',
+} as const;
+
+type MigrateProduct = keyof typeof PRODUCT_TO_SKILL_ID;
+const MIGRATE_PRODUCTS = Object.keys(PRODUCT_TO_SKILL_ID) as MigrateProduct[];
 
 export const migrationConfig: WorkflowConfig = {
   command: 'migrate',
   description: 'Migrate to PostHog from another analytics provider',
   flowKey: 'migration',
-  skillId: 'migrate-statsig',
+  skillId: PRODUCT_TO_SKILL_ID.statsig,
   steps: MIGRATION_WORKFLOW,
   reportFile: MIGRATION_REPORT_FILE,
   getContentBlocks,
@@ -35,9 +45,11 @@ export const migrationConfig: WorkflowConfig = {
       demandOption: true,
     },
   },
-  mapCliOptions: (argv) => ({ skillId: `migrate-${argv.product as string}` }),
+  mapCliOptions: (argv) => ({
+    skillId: PRODUCT_TO_SKILL_ID[argv.product as MigrateProduct],
+  }),
   run: {
-    skillId: 'migrate-statsig',
+    skillId: PRODUCT_TO_SKILL_ID.statsig,
     integrationLabel: 'migration',
     customPrompt: () =>
       'Migrate this project from its existing third-party analytics, ' +