@codeyam/codeyam-cli 0.1.24 → 0.1.26

package/analyzer-template/.build-info.json

@@ -1,10 +1,10 @@
 {
-  "buildTimestamp": "2026-03-26T12:55:43.726Z",
-  "buildTime": 1774529743726,
-  "gitCommit": "2c142d4185f95cc4ef22693e7f0cad3a09f021d4",
+  "buildTimestamp": "2026-03-27T20:00:52.922Z",
+  "buildTime": 1774641652922,
+  "gitCommit": "2a3a412834b1cc8d46883263d3695bd29b8157dc",
   "nodeVersion": "v20.20.1",
   "contentHash": "c92230c027acb71cab56d2a696876a6a52206bfadd59fbc31a512b00a7ee8826",
-  "buildNumber": 1241,
-  "semanticVersion": "0.1.1241",
-  "version": "0.1.1241 (2026-03-26T12:55+c92230c)"
+  "buildNumber": 1262,
+  "semanticVersion": "0.1.1262",
+  "version": "0.1.1262 (2026-03-27T20:00+c92230c)"
 }

package/analyzer-template/log.txt

@@ -1,7 +1,7 @@
 
-[3/26/2026, 12:55:43 PM] > codeyam-combo@1.0.0 mergeDependencies
-[3/26/2026, 12:55:43 PM] > node ./scripts/mergePackageJsonFiles.cjs
+[3/27/2026, 8:00:52 PM] > codeyam-combo@1.0.0 mergeDependencies
+[3/27/2026, 8:00:52 PM] > node ./scripts/mergePackageJsonFiles.cjs
 
 
-[3/26/2026, 12:55:43 PM] Merged dependencies into root package.json
+[3/27/2026, 8:00:52 PM] Merged dependencies into root package.json
 

package/codeyam-cli/src/commands/editor.js

@@ -189,6 +189,44 @@ function getProjectDimensions(root) {
         return { defaultName: 'Desktop', names: [] };
     }
 }
+function getTechStackContext(root) {
+    const state = readState(root);
+    const techStackId = state?.techStackId || '';
+    const stack = TECH_STACKS.find((s) => s.id === techStackId);
+    const isExpo = techStackId === 'expo-react-native';
+    const isChromeExt = techStackId === 'chrome-extension-react';
+    const isNextjs = techStackId.startsWith('nextjs-') || (!isExpo && !isChromeExt);
+    return {
+        id: techStackId || 'nextjs-prisma-sqlite',
+        isExpo,
+        isNextjs,
+        isChromeExt,
+        hasDatabase: isNextjs,
+        testRunner: isNextjs ? 'vitest' : 'jest',
+        testRunCommand: isNextjs ? 'npx vitest run' : 'npx jest',
+        storageType: isExpo
+            ? 'asyncStorage'
+            : isChromeExt
+                ? 'chromeStorage'
+                : 'prisma',
+        routerImport: isExpo
+            ? 'expo-router'
+            : isChromeExt
+                ? 'react-router-dom'
+                : 'next/navigation',
+        componentPrimitives: isExpo
+            ? '<View>, <Text>, <ScrollView>'
+            : '<div>, <span>, <h1>',
+        rawPrimitivesList: isExpo
+            ? '<View>, <Text>, <Image>, <ScrollView>, <FlatList>'
+            : '<div>, <span>, <h1>, <p>, <img>, <ul>',
+        patternsFile: isExpo
+            ? 'MOBILE_SETUP.md'
+            : isChromeExt
+                ? 'EXTENSION_SETUP.md'
+                : 'FEATURE_PATTERNS.md',
+    };
+}
 /**
  * Print dimension guidance when the project has multiple screen sizes.
  * Tells Claude to pick the right dimension for the content being previewed
@@ -267,6 +305,10 @@ function printAppScenarioInstructions(pageName, route) {
         console.log(chalk.dim('    Example: "Page - Full Data", "Page - Empty State", "Page - Error State"'));
     }
     console.log();
+    checkbox('Ensure every page file used in app scenarios has a glossary entry with its filePath:');
+    console.log(chalk.dim('    The register command validates pageFilePath against the glossary — add missing pages now.'));
+    console.log(chalk.dim('    Example: {"name":"CounterScreen","filePath":"app/(tabs)/index.tsx","type":"page","description":"Main counter page"}'));
+    console.log();
     checkbox('Register each scenario with type "application", the real page URL, and pageFilePath:');
     console.log(chalk.dim(`    codeyam editor register '{"name":"${pageName || 'Page'} - Full Data",`));
     console.log(chalk.dim(`      "type":"application","url":"${route || '/'}","pageFilePath":"src/path/to/Page.tsx",...}'`));
@@ -281,7 +323,12 @@ function printAppScenarioInstructions(pageName, route) {
         console.log(chalk.dim('    For external APIs: also add "externalApis":{"GET https://...":{"body":[...],"status":200}}'));
     }
     else {
+        const appCtx = getTechStackContext(root);
         checkbox('Include data in every app scenario — without it the page will be empty:');
+        if (appCtx.isExpo) {
+            console.log(chalk.dim('    Use "localStorage":{"items":"[...]"} to pre-populate AsyncStorage (values are JSON strings)'));
+            console.log(chalk.dim("    AsyncStorage uses localStorage on web — CodeYam's injection works automatically."));
+        }
         console.log(chalk.dim('    Use "mockData":{"routes":{"/api/...":{"body":[...]}}} to mock API responses'));
         console.log(chalk.dim('    For external APIs: add "externalApis":{"GET https://...":{"body":[...],"status":200}}'));
     }
@@ -356,10 +403,18 @@ function printExtractionPlanInstructions() {
  * Shared component capture instructions used by editor Step 7 and migration Steps 3/8.
  * Prints the full isolation route setup, codeyam-capture wrapper, register command, and error checking.
  */
-function printComponentCaptureInstructions() {
-    checkbox('Create isolation route dirs: `codeyam editor isolate ComponentA ComponentB ...`');
-    console.log(chalk.dim('    This creates app/isolated-components/layout.tsx (with production notFound() guard) and'));
-    console.log(chalk.dim('    a directory per component. List ALL components that need isolation routes.'));
+function printComponentCaptureInstructions(root) {
+    const ctx = root ? getTechStackContext(root) : undefined;
+    const isExpo = ctx?.isExpo ?? false;
+    checkbox('Set up isolation routes: `codeyam editor isolate ComponentA ComponentB ...`');
+    if (isExpo) {
+        console.log(chalk.dim('    This creates app/isolated-components/_layout.tsx (with __DEV__ guard).'));
+        console.log(chalk.dim('    You then create a flat .tsx file per component (NOT subdirectories — Expo Router uses flat files).'));
+    }
+    else {
+        console.log(chalk.dim(`    This creates app/isolated-components/layout.tsx (with notFound() guard) and`));
+        console.log(chalk.dim('    a directory per component. List ALL components that need isolation routes.'));
+    }
     checkbox('For each visual component:');
     console.log(chalk.dim('    1. Read the source AND find where it is used in the app to understand:'));
     console.log(chalk.dim('       — Props/interface'));
@@ -370,14 +425,28 @@ function printComponentCaptureInstructions() {
     console.log(chalk.dim('       — Different visual states: loading, error, disabled, selected, hover'));
     console.log(chalk.dim('       — Boundary values: single item vs many, min/max ratings, very long names'));
     console.log(chalk.dim('    3. Create ONE isolation route per component with a scenarios map and ?s= query param:'));
-    console.log(chalk.dim('       Remix:   app/routes/isolated-components.ComponentName.tsx → /isolated-components/ComponentName'));
-    console.log(chalk.dim('       Next.js: app/isolated-components/ComponentName/page.tsx → /isolated-components/ComponentName'));
+    if (isExpo) {
+        console.log(chalk.dim('       Expo:    app/isolated-components/ComponentName.tsx → /isolated-components/ComponentName'));
+        console.log(chalk.dim('       Use useLocalSearchParams() from expo-router to read ?s=ScenarioName.'));
+    }
+    else {
+        console.log(chalk.dim('       Remix:   app/routes/isolated-components.ComponentName.tsx → /isolated-components/ComponentName'));
+        console.log(chalk.dim('       Next.js: app/isolated-components/ComponentName/page.tsx → /isolated-components/ComponentName'));
+    }
     console.log(chalk.dim('       The route defines a `scenarios` object mapping scenario names to props,'));
     console.log(chalk.dim('       reads `?s=ScenarioName` from the URL, and renders the component with those props.'));
-    console.log(chalk.dim('       Wrap the component in a capture container with id="codeyam-capture":'));
-    console.log(chalk.dim('       <div id="codeyam-capture" style={{ display:"inline-block" }}>'));
-    console.log(chalk.dim('         <div style={{ width:"100%", maxWidth:"..." }}> ← match the app\'s container width'));
-    console.log(chalk.dim('       e.g. card in a 3-col grid → maxWidth:"24rem", full-width component → omit maxWidth'));
+    if (isExpo) {
+        console.log(chalk.dim('       Wrap the component in a capture container with nativeID="codeyam-capture":'));
+        console.log(chalk.dim('       <View nativeID="codeyam-capture" style={{ display:"flex" }}>'));
+    }
+    else {
+        console.log(chalk.dim('       Wrap the component in a capture container with id="codeyam-capture":'));
+        console.log(chalk.dim('       <div id="codeyam-capture" style={{ display:"inline-block" }}>'));
+    }
+    console.log(chalk.dim(isExpo
+        ? '         <View style={{ width:"100%", maxWidth:... }}> ← match the app\'s container width'
+        : '         <div style={{ width:"100%", maxWidth:"..." }}> ← match the app\'s container width'));
+    console.log(chalk.dim('       e.g. card in a 3-col grid → maxWidth: 384, full-width component → omit maxWidth'));
     console.log(chalk.dim('       The screenshot captures just this wrapper, so the component fills the image.'));
     console.log(chalk.dim('       Center the wrapper on the page (flexbox center both axes) and set a page background'));
     console.log(chalk.dim('       color that matches where the component normally appears (e.g. white for light UIs).'));
@@ -746,8 +815,8 @@ function printSetup(root) {
     console.log(chalk.bold('Tech Stack Selection:'));
     console.log(chalk.dim('  Based on the selected formats, present ONLY the matching tech stacks.'));
     console.log(chalk.dim('  A stack matches if ANY of the user\'s selected formats appears in its "Supports" list.'));
-    console.log(chalk.dim('  Show ALL matching stacks even if there is only one. Mark the recommended option.'));
-    console.log(chalk.dim('  Use AskUserQuestion to let the user pick one.'));
+    console.log(chalk.dim('  If only ONE stack matches, confirm it directly (e.g. "Expo + React Native is the only stack for mobile apps — using that.").'));
+    console.log(chalk.dim('  If MULTIPLE stacks match, use AskUserQuestion to let the user pick one.'));
     console.log();
     console.log(chalk.bold('  Available Tech Stacks:'));
     for (const stack of TECH_STACKS) {
@@ -780,7 +849,7 @@ function printSetup(root) {
     console.log(chalk.yellow('    ( ) Mobile') + chalk.dim(' — 375 × 667'));
     console.log(chalk.yellow('    ( ) Custom') + chalk.dim(' — ask for width × height'));
     console.log();
-    console.log(chalk.dim('  Pre-select based on app format: mobile-responsive-web-app/desktop-app → Desktop, mobile-app → Mobile, chrome-extension → Custom (400×600).'));
+    console.log(chalk.dim('  Pre-select based on app format: mobile-responsive-web-app/desktop-app → Desktop, mobile-app → iPhone 16 (393×852), chrome-extension → Custom (400×600).'));
     console.log(chalk.dim('  If only one obvious choice, confirm it rather than asking.'));
     console.log(chalk.dim(`  Save the choice via: curl -s -X POST http://localhost:${port}/api/editor-project-info -H "Content-Type: application/json" -d '{"defaultScreenSize":{"name":"Desktop","width":1440,"height":900}}'`));
     console.log();
@@ -989,33 +1058,64 @@ function printStep2(root, feature) {
     }
     console.log('Get the project ready to build.');
     console.log();
+    const ctx = getTechStackContext(root);
     // If no project exists yet, include scaffolding instructions first
     if (!projectExists) {
         console.log(chalk.bold('Scaffold the project:'));
         checkbox('Run `codeyam editor template` to scaffold, install dependencies, init git, and configure CodeYam');
-        console.log(chalk.dim('  This copies the Next.js + Prisma 7 + SQLite template, runs npm install,'));
+        if (ctx.isExpo) {
+            console.log(chalk.dim('  This copies the Expo + React Native template, runs npm install,'));
+        }
+        else if (ctx.isChromeExt) {
+            console.log(chalk.dim('  This copies the Chrome Extension + React template, runs npm install,'));
+        }
+        else {
+            console.log(chalk.dim('  This copies the Next.js + Prisma 7 + SQLite template, runs npm install,'));
+        }
         console.log(chalk.dim('  initializes git, runs codeyam init, and refreshes the editor — all in one command.'));
         console.log();
-        checkbox('Define your data models in `prisma/schema.prisma`');
-        console.log(chalk.dim("  Replace the placeholder Todo model with your app's models"));
-        console.log();
-        checkbox('Push schema and seed the database');
-        console.log(chalk.dim('  npm run db:push'));
-        console.log(chalk.dim('  # Edit prisma/seed.ts with your seed data, then:'));
-        console.log(chalk.dim('  npm run db:seed'));
-        console.log(chalk.dim(`  # After re-seeding, restart the dev server to pick up fresh data:`));
-        console.log(chalk.dim(`  # codeyam editor dev-server '{"action":"restart"}'`));
-        console.log();
-        console.log(chalk.yellow('  IMPORTANT: When adding new required columns to existing tables,'));
-        console.log(chalk.yellow('  provide a @default(...) value so `db push` can fill existing rows.'));
-        console.log(chalk.dim('  Example: userId String @default("anonymous")  — existing rows get "anonymous"'));
-        console.log(chalk.dim('  Without a default, Prisma requires --force-reset which drops ALL data.'));
-        console.log(chalk.dim('  NEVER use --force-reset — it is blocked in this environment.'));
-        console.log();
-        console.log(chalk.dim('  See DATABASE.md for Prisma patterns and important warnings.'));
-        console.log(chalk.dim('  Key: import { prisma } from "@/app/lib/prisma" in API routes.'));
-        console.log(chalk.dim('  Key: Seed scripts must use the adapter pattern (see prisma/seed.ts).'));
-        console.log();
+        if (ctx.isExpo) {
+            // Expo: no database, use AsyncStorage + theme
+            checkbox('Define your data types in `lib/types.ts`');
+            console.log(chalk.dim("  Create TypeScript interfaces for your app's data models"));
+            console.log();
+            checkbox('Set up initial data using the storage helper in `lib/storage.ts`');
+            console.log(chalk.dim('  import { storage } from "@/lib/storage";'));
+            console.log(chalk.dim('  await storage.set("items", [{ id: "1", title: "First item" }]);'));
+            console.log();
+            console.log(chalk.dim('  Read MOBILE_SETUP.md for data storage, navigation, and testing patterns.'));
+            console.log();
+        }
+        else if (ctx.isChromeExt) {
+            // Chrome Extension: use chrome.storage
+            checkbox('Set up data storage using chrome.storage (with localStorage fallback for dev)');
+            console.log();
+            console.log(chalk.dim('  Read EXTENSION_SETUP.md for storage, messaging, and manifest patterns.'));
+            console.log();
+        }
+        else {
+            // Next.js: Prisma + database
+            checkbox('Define your data models in `prisma/schema.prisma`');
+            console.log(chalk.dim("  Replace the placeholder Todo model with your app's models"));
+            console.log();
+            checkbox('Push schema and seed the database');
+            console.log(chalk.dim('  npm run db:push'));
+            console.log(chalk.dim('  # Edit prisma/seed.ts with your seed data, then:'));
+            console.log(chalk.dim('  npm run db:seed'));
+            console.log(chalk.dim(`  # After re-seeding, restart the dev server to pick up fresh data:`));
+            console.log(chalk.dim(`  # codeyam editor dev-server '{"action":"restart"}'`));
+            console.log();
+            console.log(chalk.yellow('  IMPORTANT: When adding new required columns to existing tables,'));
+            console.log(chalk.yellow('  provide a @default(...) value so `db push` can fill existing rows.'));
+            console.log(chalk.dim('  Example: userId String @default("anonymous")  — existing rows get "anonymous"'));
+            console.log(chalk.dim('  Without a default, Prisma requires --force-reset which drops ALL data.'));
+            console.log(chalk.dim('  NEVER use --force-reset — it is blocked in this environment.'));
+            console.log();
+            console.log(chalk.dim('  See DATABASE.md for Prisma patterns and important warnings.'));
+            console.log(chalk.dim('  Key: import { prisma } from "@/app/lib/prisma" in API routes.'));
+            console.log(chalk.dim('  Key: Seed scripts must use the adapter pattern (see prisma/seed.ts).'));
+            console.log();
+        }
         printDataStructureInstructions();
     }
     else {
@@ -1057,26 +1157,42 @@ function printStep3(root, feature) {
     if (isResuming) {
         printResumptionHeader(3);
     }
+    const ctx = getTechStackContext(root);
     console.log('Build fast with real data. Prioritize speed over quality.');
     console.log();
     console.log(chalk.bold('Checklist:'));
-    checkbox('Create API routes that read from the database via Prisma');
-    if (!projectExists) {
-        checkbox('Seed the database with demo data');
-        checkbox('Create `.codeyam/seed-adapter.ts` so CodeYam can seed the database for scenarios');
-        console.log(chalk.dim('    The seed adapter reads a JSON file (path passed as CLI arg), wipes tables, inserts rows.'));
-        console.log(chalk.dim("    Use the project's own ORM (Prisma, Drizzle, etc.). See template for example."));
-        console.log(chalk.dim('    Run with: npx tsx .codeyam/seed-adapter.ts <path-to-seed-data.json>'));
-        console.log();
-        console.log(chalk.bold.cyan('Make seed data visually rich:'));
-        console.log(chalk.cyan('  • Use real placeholder images from Unsplash (https://images.unsplash.com/photo-<id>?w=400&h=300&fit=crop)'));
-        console.log(chalk.cyan('  • Use avatar services like i.pravatar.cc for user profile photos'));
-        console.log(chalk.cyan('  • Write realistic, varied content — not "Item 1", "Item 2", "Test Description"'));
-        console.log(chalk.cyan('  • Include different text lengths, categories, dates, and statuses'));
-        console.log(chalk.cyan('  • Rich seed data makes the prototype look real and surfaces layout issues early'));
+    if (ctx.isExpo) {
+        checkbox('Build screens that read from AsyncStorage via `lib/storage.ts` or fetch from APIs');
+        if (!projectExists) {
+            checkbox('Populate initial data in AsyncStorage for development');
+            console.log(chalk.dim('    import { storage } from "@/lib/storage";'));
+            console.log(chalk.dim('    await storage.set("items", [{ id: "1", title: "Buy groceries" }]);'));
+            console.log();
+            console.log(chalk.bold.cyan('Make data visually rich:'));
+            console.log(chalk.cyan('  • Write realistic, varied content — not "Item 1", "Item 2", "Test Description"'));
+            console.log(chalk.cyan('  • Include different text lengths, categories, dates, and statuses'));
+            console.log(chalk.cyan('  • Rich data makes the prototype look real and surfaces layout issues early'));
+        }
+    }
+    else {
+        checkbox('Create API routes that read from the database via Prisma');
+        if (!projectExists) {
+            checkbox('Seed the database with demo data');
+            checkbox('Create `.codeyam/seed-adapter.ts` so CodeYam can seed the database for scenarios');
+            console.log(chalk.dim('    The seed adapter reads a JSON file (path passed as CLI arg), wipes tables, inserts rows.'));
+            console.log(chalk.dim("    Use the project's own ORM (Prisma, Drizzle, etc.). See template for example."));
+            console.log(chalk.dim('    Run with: npx tsx .codeyam/seed-adapter.ts <path-to-seed-data.json>'));
+            console.log();
+            console.log(chalk.bold.cyan('Make seed data visually rich:'));
+            console.log(chalk.cyan('  • Use real placeholder images from Unsplash (https://images.unsplash.com/photo-<id>?w=400&h=300&fit=crop)'));
+            console.log(chalk.cyan('  • Use avatar services like i.pravatar.cc for user profile photos'));
+            console.log(chalk.cyan('  • Write realistic, varied content — not "Item 1", "Item 2", "Test Description"'));
+            console.log(chalk.cyan('  • Include different text lengths, categories, dates, and statuses'));
+            console.log(chalk.cyan('  • Rich seed data makes the prototype look real and surfaces layout issues early'));
+        }
     }
     checkbox('Verify the dev server shows the changes');
-    checkbox('If the feature involves auth, email, payments, or other common patterns: read FEATURE_PATTERNS.md');
+    checkbox(`If the feature involves auth, email, payments, or other common patterns: read ${ctx.patternsFile}`);
     // Responsive design guidance when building a mobile-responsive web app
     if (prevState?.appFormats?.includes('mobile-responsive-web-app')) {
         console.log();
@@ -1093,16 +1209,29 @@ function printStep3(root, feature) {
         console.log();
         console.log(designSystem);
         console.log();
-        checkbox('Define ALL design tokens as CSS custom properties in globals.css — not just colors');
-        console.log(chalk.dim('    Colors: --bg-surface, --text-primary, --accent-green-a, etc.'));
-        console.log(chalk.dim('    Typography: --text-xs, --text-sm, --text-lg, --text-2xl (font-size values)'));
-        console.log(chalk.dim('    Font weights: --font-weight-normal, --font-weight-medium, --font-weight-semibold'));
-        console.log(chalk.dim('    Spacing: --spacing-xs, --spacing-sm, --spacing-md, --spacing-lg, etc.'));
-        console.log(chalk.dim('    Border radius, shadows, transitions — every value the design system defines.'));
-        checkbox('Reference tokens from components — ZERO hardcoded px values for font-size, spacing, or colors');
-        console.log(chalk.dim('    Bad:  fontSize: 14, padding: "12px 16px", gap: 8'));
-        console.log(chalk.dim('    Good: fontSize: "var(--text-sm)", padding: "var(--spacing-md) var(--spacing-lg)", gap: "var(--spacing-sm)"'));
-        console.log(chalk.dim('    This ensures the entire app updates when the design system changes.'));
+        if (ctx.isExpo) {
+            checkbox('Define ALL design tokens in `lib/theme.ts` — this is the single source of truth');
+            console.log(chalk.dim('    Colors: theme.colors.bgSurface, theme.colors.textPrimary, etc.'));
+            console.log(chalk.dim('    Typography: theme.fontSize.sm, theme.fontSize.lg, theme.fontFamily.mono'));
+            console.log(chalk.dim('    Spacing: theme.spacing.sm, theme.spacing.md, theme.spacing.lg, etc.'));
+            console.log(chalk.dim('    Border radius: theme.borderRadius.sm, theme.borderRadius.lg, etc.'));
+            checkbox('Import theme in every component — ZERO hardcoded color strings or pixel values');
+            console.log(chalk.dim('    Bad:  color: "#333", fontSize: 14, padding: 12'));
+            console.log(chalk.dim('    Good: color: theme.colors.textPrimary, fontSize: theme.fontSize.sm, padding: theme.spacing.md'));
+            console.log(chalk.dim('    Do NOT use CSS custom properties (var(--token)) — they do not work in React Native.'));
+        }
+        else {
+            checkbox('Define ALL design tokens as CSS custom properties in globals.css — not just colors');
+            console.log(chalk.dim('    Colors: --bg-surface, --text-primary, --accent-green-a, etc.'));
+            console.log(chalk.dim('    Typography: --text-xs, --text-sm, --text-lg, --text-2xl (font-size values)'));
+            console.log(chalk.dim('    Font weights: --font-weight-normal, --font-weight-medium, --font-weight-semibold'));
+            console.log(chalk.dim('    Spacing: --spacing-xs, --spacing-sm, --spacing-md, --spacing-lg, etc.'));
+            console.log(chalk.dim('    Border radius, shadows, transitions — every value the design system defines.'));
+            checkbox('Reference tokens from components — ZERO hardcoded px values for font-size, spacing, or colors');
+            console.log(chalk.dim('    Bad:  fontSize: 14, padding: "12px 16px", gap: 8'));
+            console.log(chalk.dim('    Good: fontSize: "var(--text-sm)", padding: "var(--spacing-md) var(--spacing-lg)", gap: "var(--spacing-sm)"'));
+            console.log(chalk.dim('    This ensures the entire app updates when the design system changes.'));
+        }
     }
     console.log();
     console.log(chalk.bold.cyan('Keep the preview moving:'));
@@ -1156,6 +1285,14 @@ function printStep4(root, feature) {
     console.log(chalk.dim('    The user is looking at the preview — a blank page means something is broken.'));
     console.log(chalk.dim('    If any check fails, fix the issue and re-verify before proceeding.'));
     console.log();
+    const ctx4 = getTechStackContext(root);
+    if (ctx4.isExpo) {
+        console.log(chalk.magenta.bold('  EXPO WEB PREVIEW NOTE:'));
+        console.log(chalk.magenta('  The preview renders via react-native-web in a browser. Some differences'));
+        console.log(chalk.magenta('  from native devices are expected (fonts, SafeAreaView, shadows, Platform.OS).'));
+        console.log(chalk.magenta('  The preview is for layout and data verification. Test final polish on device.'));
+        console.log();
+    }
     console.log(chalk.bold('Update README and setup script:'));
     checkbox('Update `README.md`: set the project name, write a one-line description, and list any setup prerequisites');
     checkbox('Update `npm run setup` in `package.json` if setup requires extra steps (e.g. env vars, external services)');
@@ -1268,6 +1405,7 @@ function printStep7(root, feature) {
     if (isResuming) {
         printResumptionHeader(7);
     }
+    const ctx = getTechStackContext(root);
     console.log('Execute your extraction plan from step 6.');
     console.log();
     console.log(chalk.bold('Components:'));
@@ -1281,18 +1419,24 @@ function printStep7(root, feature) {
     console.log(chalk.dim('    Cover: typical inputs, edge cases, empty/null inputs, error conditions'));
     console.log(chalk.dim('    Aim for 3-8 test cases per function depending on complexity'));
     console.log(chalk.dim('    Hooks count as functions — useDrinks, useAuth, etc. all need test files'));
-    checkbox('Place test files next to source: `app/lib/drinks.ts` → `app/lib/drinks.test.ts`');
+    console.log(chalk.dim('    Wrap all tests in a describe("FunctionName", ...) block — the audit matches on this name'));
+    if (ctx.isExpo) {
+        checkbox('Place test files next to source but OUTSIDE `app/` (Expo Router treats all files in app/ as routes): `lib/storage.ts` → `lib/storage.test.ts`, `app/hooks/useCounter.ts` → `__tests__/hooks/useCounter.test.ts`');
+    }
+    else {
+        checkbox('Place test files next to source: `app/lib/drinks.ts` → `app/lib/drinks.test.ts`');
+    }
     console.log(chalk.yellow('  Tests ARE the only coverage for library functions/hooks — step 9 only captures component screenshots.'));
     console.log();
     console.log(chalk.bold('Recursive pass:'));
     checkbox('Re-read EVERY new file you just created — extract components from components, functions from functions');
     checkbox('Keep going until every file is a thin shell: just imports and composition');
-    console.log(chalk.yellow('    Check: does any file contain raw <div>, <span>, <h1>, <p>, <img>, or <ul>?'));
+    console.log(chalk.yellow(`    Check: does any file contain raw ${ctx.rawPrimitivesList}?`));
     console.log(chalk.yellow('    If yes → that JSX section is a component waiting to be extracted.'));
     console.log();
     console.log(chalk.bold('Verify before proceeding:'));
     checkbox('Run all tests and verify they pass');
-    checkbox('Page files contain ONLY imports + component composition — no raw HTML tags');
+    checkbox(`Page files contain ONLY imports + component composition — no raw ${ctx.isExpo ? 'React Native primitives' : 'HTML tags'}`);
     checkbox('Every component renders ONE thing or composes sub-components — no multi-section JSX');
     checkbox(`Refresh the preview after each batch of extractions: \`codeyam editor preview '{"dimension":"${dim}"}'\``);
     printDimensionGuidance(dim, dimNames);
@@ -1353,11 +1497,12 @@ function printStep9(root, feature) {
     console.log(chalk.dim('    Reuse and improve existing scenarios where possible — update mock data'));
     console.log(chalk.dim('    to reflect current changes. Add new scenarios only for genuinely new states.'));
     console.log(chalk.dim('    Ensure at least one scenario clearly demonstrates what changed in this session.'));
-    printComponentCaptureInstructions();
+    const ctx9 = getTechStackContext(root);
+    printComponentCaptureInstructions(root);
     console.log();
     console.log(chalk.bold('Library Functions — run tests:'));
     checkbox('Run ALL test files created in step 7');
-    console.log(chalk.dim('    Example: npx vitest run app/lib/drinks.test.ts'));
+    console.log(chalk.dim(`    Example: ${ctx9.testRunCommand} app/lib/drinks.test.ts`));
     checkbox('Verify every test passes');
     checkbox('If any test fails, fix the source code and re-run');
     console.log();
@@ -1838,7 +1983,7 @@ function printMigrateStep3(root) {
     console.log(chalk.dim('  Component scenarios use isolation routes with a codeyam-capture wrapper for tight screenshots.'));
     console.log(chalk.dim('  These supplement the app scenarios from step 2 with focused component-level views.'));
     console.log();
-    printComponentCaptureInstructions();
+    printComponentCaptureInstructions(root);
     console.log();
     migrationStopGate(3, pageName, pageIndex, totalPages);
 }
@@ -1981,7 +2126,7 @@ function printMigrateStep8(root) {
     console.log();
     console.log(chalk.bold('Component Scenarios:'));
     console.log(chalk.dim('  For each visual component extracted in step 7, create isolation routes and register scenarios.'));
-    printComponentCaptureInstructions();
+    printComponentCaptureInstructions(root);
     console.log();
     console.log(chalk.bold('Verify:'));
     checkbox('Run `codeyam editor analyze-imports` to populate import graph (or `codeyam editor analyze-imports path/to/file.tsx ...` for specific files)');
@@ -2744,41 +2889,78 @@ function handleDesignSystem(designSystemId) {
 }
 function handleIsolate(componentNames) {
     const root = process.cwd();
+    const ctx = getTechStackContext(root);
     if (componentNames.length === 0) {
         console.error(chalk.red('Usage: codeyam editor isolate "ComponentA ComponentB ..."'));
         process.exit(1);
     }
     const isolateDir = path.join(root, 'app', 'isolated-components');
-    // Create layout.tsx with production guard if missing
-    const layoutPath = path.join(isolateDir, 'layout.tsx');
+    // Create the framework-appropriate layout guard if missing.
+    // Clean up wrong-framework layout from a previous CLI version.
+    const layoutPath = path.join(isolateDir, ctx.isExpo ? '_layout.tsx' : 'layout.tsx');
+    const wrongLayoutPath = path.join(isolateDir, ctx.isExpo ? 'layout.tsx' : '_layout.tsx');
+    if (fs.existsSync(wrongLayoutPath)) {
+        fs.unlinkSync(wrongLayoutPath);
+    }
     if (!fs.existsSync(layoutPath)) {
         fs.mkdirSync(isolateDir, { recursive: true });
-        fs.writeFileSync(layoutPath, [
-            'import { notFound } from "next/navigation";',
-            '',
-            'export default function CaptureLayout({ children }: { children: React.ReactNode }) {',
-            '  if (process.env.NODE_ENV === "production") notFound();',
-            '  return <>{children}</>;',
-            '}',
-            '',
-        ].join('\n'), 'utf8');
-        console.log(chalk.green(`Created layout guard: app/isolated-components/layout.tsx`));
-    }
-    // Create a directory for each component
+        if (ctx.isExpo) {
+            fs.writeFileSync(layoutPath, [
+                'import { Redirect, Slot } from "expo-router";',
+                '',
+                'export default function CaptureLayout() {',
+                '  if (!__DEV__) return <Redirect href="/" />;',
+                '  return <Slot />;',
+                '}',
+                '',
+            ].join('\n'), 'utf8');
+        }
+        else {
+            fs.writeFileSync(layoutPath, [
+                'import { notFound } from "next/navigation";',
+                '',
+                'export default function CaptureLayout({ children }: { children: React.ReactNode }) {',
+                '  if (process.env.NODE_ENV === "production") notFound();',
+                '  return <>{children}</>;',
+                '}',
+                '',
+            ].join('\n'), 'utf8');
+        }
+        console.log(chalk.green(`Created layout guard: app/isolated-components/${ctx.isExpo ? '_layout.tsx' : 'layout.tsx'}`));
+    }
+    // Create isolation route for each component.
+    // Expo Router uses flat files (ComponentName.tsx), Next.js uses subdirectories (ComponentName/page.tsx).
     const created = [];
     const existed = [];
     for (const name of componentNames) {
-        const dir = path.join(isolateDir, name);
-        if (fs.existsSync(dir)) {
-            existed.push(name);
+        if (ctx.isExpo) {
+            const filePath = path.join(isolateDir, `${name}.tsx`);
+            if (fs.existsSync(filePath)) {
+                existed.push(name);
+            }
+            else {
+                created.push(name);
+            }
         }
         else {
-            fs.mkdirSync(dir, { recursive: true });
-            created.push(name);
+            const dir = path.join(isolateDir, name);
+            if (fs.existsSync(dir)) {
+                existed.push(name);
+            }
+            else {
+                fs.mkdirSync(dir, { recursive: true });
+                created.push(name);
+            }
         }
     }
     if (created.length > 0) {
-        console.log(chalk.green(`Created ${created.length} isolation route dir(s): ${created.join(', ')}`));
+        if (ctx.isExpo) {
+            console.log(chalk.green(`Ready for ${created.length} isolation route(s): ${created.map((n) => `app/isolated-components/${n}.tsx`).join(', ')}`));
+            console.log(chalk.dim('    Create each file with useLocalSearchParams, a scenarios map, and nativeID="codeyam-capture"'));
+        }
+        else {
+            console.log(chalk.green(`Created ${created.length} isolation route dir(s): ${created.join(', ')}`));
+        }
     }
     if (existed.length > 0) {
         console.log(chalk.dim(`Already existed: ${existed.join(', ')}`));
@@ -2832,6 +3014,12 @@ function formatApiSubcommandResult(subcommand, data) {
                 parts.push(`scenarioId="${data.scenarioId}"`);
             if (data.sessionsNotified != null)
                 parts.push(`notified=${data.sessionsNotified}`);
+            // Surface the HTTP health check from the dev server
+            if (data.preview) {
+                parts.push(`healthy=${data.preview.healthy}`);
+                if (data.preview.error)
+                    parts.push(`error="${data.preview.error}"`);
+            }
             return parts.join(' ');
         }
         case 'dev-server': {
@@ -3788,7 +3976,8 @@ async function handleAudit(options) {
                     if (f.errorMessage) {
                         detail += `\n      ${chalk.red(f.errorMessage)}`;
                         detail += `\n      ${chalk.yellow('Note: This is NOT a test failure — the test runner itself could not execute.')}`;
-                        detail += `\n      ${chalk.yellow('Try running the test manually: npx vitest run ' + f.testFile)}`;
+                        const ctx = getTechStackContext(process.cwd());
+                        detail += `\n      ${chalk.yellow('Try running the test manually: ' + ctx.testRunCommand + ' ' + f.testFile)}`;
                     }
                     break;
                 case 'failing':
@@ -4371,7 +4560,7 @@ async function handleTemplate() {
         _: [],
     });
     console.log(chalk.green('  CodeYam initialized.'));
-    // 5. Verify config has startCommand
+    // 5. Verify config has startCommand and set format-specific defaults
     const configPath = path.join(root, '.codeyam', 'config.json');
     if (fs.existsSync(configPath)) {
         try {
@@ -4382,6 +4571,26 @@ async function handleTemplate() {
                 console.log(chalk.yellow('  Warning: No startCommand found in .codeyam/config.json webapps.'));
                 console.log(chalk.dim('  You may need to add: "startCommand": { "command": "sh", "args": ["-c", "npm run dev -- --port $PORT"] }'));
             }
+            // Store appFormats from the tech stack so the editor UI can adapt
+            if (stack?.supportedFormats) {
+                config.appFormats = stack.supportedFormats;
+            }
+            // Set mobile-first defaults for mobile-app projects
+            if (stack?.supportedFormats?.includes('mobile-app')) {
+                config.defaultScreenSize = {
+                    name: 'iPhone 16',
+                    width: 393,
+                    height: 852,
+                };
+                config.screenSizes = {
+                    'iPhone 16': { width: 393, height: 852 },
+                    'iPhone 16 Pro Max': { width: 430, height: 932 },
+                    'iPhone SE': { width: 375, height: 667 },
+                    'Pixel 8': { width: 412, height: 915 },
+                    'iPad mini': { width: 744, height: 1133 },
+                };
+            }
+            fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
         }
         catch {
             // Config parse error is non-fatal
@@ -4416,7 +4625,15 @@ async function handleTemplate() {
     }
     console.log();
     console.log(chalk.green.bold('Project scaffolded and ready!'));
-    console.log(chalk.dim('Next: Define your Prisma models, push the schema, seed the database, and build your feature.'));
+    if (stack?.id === 'expo-react-native') {
+        console.log(chalk.dim('Next: Set up your data types, configure the theme in lib/theme.ts, and build your feature.'));
+    }
+    else if (stack?.id === 'chrome-extension-react') {
+        console.log(chalk.dim('Next: Configure your extension manifest and build your feature.'));
+    }
+    else {
+        console.log(chalk.dim('Next: Define your Prisma models, push the schema, seed the database, and build your feature.'));
+    }
 }
 // ─── Sync subcommand ─────────────────────────────────────────────────
 /**