@sun-asterisk/sungen 2.5.2 → 2.6.1

package/src/generators/test-generator/utils/data-resolver.ts

@@ -1,6 +1,4 @@
-import * as fs from 'fs';
 import * as path from 'path';
-import yaml from 'yaml';
 import { readYamlIfExists } from '../../../utils/yaml-io';
 
 /**
@@ -9,17 +7,13 @@ import { readYamlIfExists } from '../../../utils/yaml-io';
  * Two modes:
  * - Compile-time (default): resolves YAML values and bakes them into generated code
  * - Runtime (runtimeMode=true): returns markers that post-processor converts to testData.get() calls
- *
- * Supports override files with priority:
- * 1. .override.yaml (highest - user customizations)
- * 2. -override.yaml (legacy - backward compat)
- * 3. .yaml (lowest - auto-generated base)
  */
 export class DataResolver {
   private dataCache = new Map<string, any>();
   private testDataDir: string;
   private screenName?: string;
   private runtimeMode: boolean;
+  private flowMode: boolean = false;
 
   constructor(testDataDir?: string, screenName?: string, runtimeMode: boolean = false) {
     this.testDataDir = testDataDir || path.join(process.cwd(), 'qa', 'test-data');
@@ -27,13 +21,14 @@ export class DataResolver {
     this.runtimeMode = runtimeMode;
   }
 
-  /**
-   * Set screen context for data resolution
-   */
   setScreenContext(screenName: string): void {
     this.screenName = screenName;
   }
 
+  setFlowMode(enabled: boolean): void {
+    this.flowMode = enabled;
+  }
+
   /**
    * Resolve data reference to actual value
    * @param dataRef - Format: email.valid (path.to.value without filename)
@@ -107,89 +102,42 @@ export class DataResolver {
 
   /**
    * Load data file from disk (with caching)
-   * Searches new screen-based directory structure only
+   * Merges base + env-specific: {name}.yaml + {name}.{SUNGEN_ENV}.yaml
    */
   private loadDataFile(fileName: string): any {
     if (this.dataCache.has(fileName)) {
       return this.dataCache.get(fileName)!;
     }
 
-    // Merge base + override: base provides defaults, override wins on conflict
-    const possiblePaths = this.getPossibleDataPaths(fileName);
-    let merged: any = {};
-    let found = false;
-
-    // Load in reverse priority order (base first, then overrides on top)
-    for (const p of [...possiblePaths].reverse()) {
-      const data = readYamlIfExists(p);
-      if (data && typeof data === 'object' && Object.keys(data).length > 0) {
-        merged = { ...merged, ...data };
-        found = true;
-      }
+    if (!this.screenName) {
+      throw new Error(`Data resolution requires screen/flow context for "${fileName}"`);
     }
 
-    if (!found) {
+    const subDir = this.flowMode ? 'flows' : 'screens';
+    const baseDir = path.join(process.cwd(), 'qa', subDir, this.screenName, 'test-data');
+    const basePath = path.join(baseDir, `${fileName}.yaml`);
+    const data = readYamlIfExists(basePath);
+
+    if (!data || typeof data !== 'object' || Object.keys(data).length === 0) {
       throw new Error(
-        `Data file not found. Tried:\n${possiblePaths.join('\n')}`
+        `Data file not found or empty: qa/${subDir}/${this.screenName}/test-data/${fileName}.yaml`
       );
     }
 
-    this.dataCache.set(fileName, merged);
-    return merged;
-  }
+    let merged = { ...data };
 
-  /**
-   * Find data file path (checks new screen-based structure)
-   * Priority: .override.yaml > -override.yaml > base .yaml
-   * Skips files that exist but contain no data (only comments)
-   */
-  private findDataFilePath(fileName: string): string | null {
-    const possiblePaths = this.getPossibleDataPaths(fileName);
-    
-    for (const p of possiblePaths) {
-      const data = readYamlIfExists(p);
-      if (data !== null) {
-        // Skip if file is empty or only contains null/undefined
-        if (data === undefined || (typeof data === 'object' && Object.keys(data).length === 0)) {
-          continue;
-        }
-        
-        // Emit deprecation warning for old -override.yaml pattern
-        if (p.includes('-override.yaml')) {
-          console.warn(`⚠️  Deprecated: ${path.basename(p)}`);
-          console.warn(`   Rename to: ${fileName}.override.yaml for better compatibility`);
-        }
-        return p;
+    // Merge env-specific data: {name}.{SUNGEN_ENV}.yaml
+    const env = process.env.SUNGEN_ENV;
+    if (env) {
+      const envPath = path.join(baseDir, `${fileName}.${env}.yaml`);
+      const envData = readYamlIfExists(envPath);
+      if (envData && typeof envData === 'object') {
+        merged = { ...merged, ...envData };
       }
     }
-    
-    return null;
-  }
 
-  /**
-   * Get list of possible data file paths (priority order)
-   * Priority: .override.yaml > -override.yaml > base .yaml
-   */
-  private getPossibleDataPaths(fileName: string): string[] {
-    const paths: string[] = [];
-
-    // New structure: qa/screens/{screenName}/test-data/
-    if (this.screenName) {
-      const cwd = process.cwd();
-      const basePath = path.join(cwd, 'qa', 'screens', this.screenName, 'test-data');
-      
-      // Priority 1: New .override.yaml pattern (highest)
-      paths.push(path.join(basePath, `${fileName}.override.yaml`));
-      
-      // Priority 2: Old -override.yaml pattern (backward compat)
-      paths.push(path.join(basePath, `${fileName}-override.yaml`));
-      
-      // Priority 3: Base file (lowest)
-      paths.push(path.join(basePath, `${fileName}.yaml`));
-      paths.push(path.join(basePath, `${fileName}.yml`));
-    }
-
-    return paths;
+    this.dataCache.set(fileName, merged);
+    return merged;
   }
 
   /**

package/src/generators/test-generator/utils/selector-resolver.ts

@@ -82,12 +82,17 @@ export class SelectorResolver {
   private selectorsDir: string;
   private featureName?: string;
   private screenName?: string;
+  private flowMode: boolean = false;
 
   constructor(selectorsDir?: string, screenName?: string) {
     this.selectorsDir = selectorsDir || path.join(process.cwd(), 'qa', 'selectors', 'screens');
     this.screenName = screenName;
   }
 
+  setFlowMode(enabled: boolean): void {
+    this.flowMode = enabled;
+  }
+
   /**
    * Set screen context for base selector file lookup
    */
@@ -160,9 +165,15 @@ export class SelectorResolver {
     // Check if it's legacy format (contains : or has dot with screen prefix)
     // Legacy: "login:email_field" or "login.email_field"
     // Natural: "Email Address", "Password", "Submit Button"
+    // Flow namespaced: "Login:Submit" → key "login:submit" in flow's own YAML
     const hasColonSeparator = selectorRef.includes(':');
     const hasDotSeparator = selectorRef.includes('.');
-    
+
+    // Flow mode: colon is a namespace separator, resolve as natural language key
+    if (hasColonSeparator && this.flowMode) {
+      return this.resolveNaturalLanguage(selectorRef, contextName!, elementType, nth);
+    }
+
     // If it has colon, it's definitely legacy
     if (hasColonSeparator) {
       return this.resolveLegacyFormat(selectorRef);
@@ -601,7 +612,7 @@ export class SelectorResolver {
 
     const selectors: SelectorFile = {};
 
-    // 1. Try load base file (screen-level shared selectors) - OPTIONAL
+    // 1. Try load base file (screen/flow-level shared selectors) - OPTIONAL
     if (this.screenName) {
       const basePath = this.findBaseSelectorPath(this.screenName);
       if (basePath) {
@@ -610,21 +621,11 @@ export class SelectorResolver {
           Object.assign(selectors, SelectorResolver.normalizeKeys(baseSelectors));
         }
       }
-
-      // Load base override file
-      const baseOverridePath = this.findOverrideSelectorPath(this.screenName);
-      if (baseOverridePath) {
-        const overrideSelectors = readYamlIfExists<SelectorFile>(baseOverridePath);
-        if (overrideSelectors) {
-          Object.assign(selectors, SelectorResolver.normalizeKeys(overrideSelectors));
-        }
-      }
     }
 
     // 2. Load feature-specific selectors - REQUIRED
     const featurePath = this.findBaseSelectorPath(featureName);
     if (!featurePath) {
-      // If no base file, that's OK if we have base from screen
       if (Object.keys(selectors).length === 0) {
         throw new Error(
           `Selector file not found for feature "${featureName}". ` +
@@ -638,15 +639,6 @@ export class SelectorResolver {
       }
     }
 
-    // 3. Load feature override file
-    const featureOverridePath = this.findOverrideSelectorPath(featureName);
-    if (featureOverridePath) {
-      const overrideSelectors = readYamlIfExists<SelectorFile>(featureOverridePath);
-      if (overrideSelectors) {
-        Object.assign(selectors, SelectorResolver.normalizeKeys(overrideSelectors));
-      }
-    }
-
     this.selectorCache.set(cacheKey, selectors);
     return selectors;
   }
@@ -657,72 +649,25 @@ export class SelectorResolver {
   private findBaseSelectorPath(name: string): string | null {
     const possiblePaths: string[] = [];
 
-    // New structure: qa/screens/{screenName}/selectors/
+    // New structure: qa/screens/{screenName}/selectors/ or qa/flows/{flowName}/selectors/
     const qaDir = path.dirname(path.dirname(this.selectorsDir));
-    
-    if (this.screenName) {
-      // Priority: Base .yaml only
-      possiblePaths.push(
-        path.join(qaDir, 'screens', this.screenName, 'selectors', `${name}.yaml`)
-      );
-    } else {
-      possiblePaths.push(
-        path.join(qaDir, 'screens', name, 'selectors', `${name}.yaml`)
-      );
-    }
-
-    // Old structure
-    possiblePaths.push(path.join(this.selectorsDir, `${name}.yaml`));
-
-    for (const p of possiblePaths) {
-      if (fs.existsSync(p)) {
-        return p;
-      }
-    }
-    
-    return null;
-  }
-
-  /**
-   * Find OVERRIDE selector file path
-   * Priority: .override.yaml > -override.yaml
-   */
-  private findOverrideSelectorPath(name: string): string | null {
-    const possiblePaths: string[] = [];
+    const subDir = this.flowMode ? 'flows' : 'screens';
 
-    // New structure: qa/screens/{screenName}/selectors/
-    const qaDir = path.dirname(path.dirname(this.selectorsDir));
-    
     if (this.screenName) {
-      // Priority 1: New .override.yaml
       possiblePaths.push(
-        path.join(qaDir, 'screens', this.screenName, 'selectors', `${name}.override.yaml`)
-      );
-      
-      // Priority 2: Old -override.yaml
-      possiblePaths.push(
-        path.join(qaDir, 'screens', this.screenName, 'selectors', `${name}-override.yaml`)
+        path.join(qaDir, subDir, this.screenName, 'selectors', `${name}.yaml`)
       );
     } else {
       possiblePaths.push(
-        path.join(qaDir, 'screens', name, 'selectors', `${name}.override.yaml`)
-      );
-      possiblePaths.push(
-        path.join(qaDir, 'screens', name, 'selectors', `${name}-override.yaml`)
+        path.join(qaDir, subDir, name, 'selectors', `${name}.yaml`)
       );
     }
 
     // Old structure
-    possiblePaths.push(path.join(this.selectorsDir, `${name}.override.yaml`));
-    possiblePaths.push(path.join(this.selectorsDir, `${name}-override.yaml`));
+    possiblePaths.push(path.join(this.selectorsDir, `${name}.yaml`));
 
     for (const p of possiblePaths) {
       if (fs.existsSync(p)) {
-        // Emit deprecation warning for old -override.yaml pattern
-        if (p.includes('-override.yaml')) {
-          console.warn(`⚠️  Deprecated: ${path.basename(p)}`);
-          console.warn(`   Rename to: ${name}.override.yaml for better compatibility`);
-        }
         return p;
       }
     }
@@ -732,59 +677,28 @@ export class SelectorResolver {
 
   /**
    * Find selector file path (checks both old and new structures)
-   * Priority: .override.yaml > -override.yaml > base .yaml
    */
   private findSelectorPath(name: string): string | null {
-    // Build list of possible paths (priority order)
     const possiblePaths: string[] = [];
 
-    // New structure: qa/screens/<screenName>/selectors/
-    const qaDir = path.dirname(path.dirname(this.selectorsDir)); // go up from qa/selectors/screens to qa/
-    
+    const qaDir = path.dirname(path.dirname(this.selectorsDir));
+    const subDir = this.flowMode ? 'flows' : 'screens';
+
     if (this.screenName) {
-      // Priority 1: New .override.yaml pattern (highest)
       possiblePaths.push(
-        path.join(qaDir, 'screens', this.screenName, 'selectors', `${name}.override.yaml`)
-      );
-      
-      // Priority 2: Old -override.yaml pattern (backward compat)
-      possiblePaths.push(
-        path.join(qaDir, 'screens', this.screenName, 'selectors', `${name}-override.yaml`)
-      );
-      
-      // Priority 3: Base file (lowest)
-      possiblePaths.push(
-        path.join(qaDir, 'screens', this.screenName, 'selectors', `${name}.yaml`)
+        path.join(qaDir, subDir, this.screenName, 'selectors', `${name}.yaml`)
       );
     } else {
-      // Fallback: assume name is both screen and feature
-      possiblePaths.push(
-        path.join(qaDir, 'screens', name, 'selectors', `${name}.override.yaml`)
-      );
       possiblePaths.push(
-        path.join(qaDir, 'screens', name, 'selectors', `${name}-override.yaml`)
-      );
-      possiblePaths.push(
-        path.join(qaDir, 'screens', name, 'selectors', `${name}.yaml`)
+        path.join(qaDir, subDir, name, 'selectors', `${name}.yaml`)
       );
     }
 
     // Old structure: qa/selectors/screens/
-    // Priority 1: New .override.yaml
-    possiblePaths.push(path.join(this.selectorsDir, `${name}.override.yaml`));
-    // Priority 2: Old -override.yaml
-    possiblePaths.push(path.join(this.selectorsDir, `${name}-override.yaml`));
-    // Priority 3: Base
     possiblePaths.push(path.join(this.selectorsDir, `${name}.yaml`));
 
-    // Find first existing file and emit deprecation warning for old pattern
     for (const p of possiblePaths) {
       if (fs.existsSync(p)) {
-        // Emit deprecation warning for old -override.yaml pattern
-        if (p.includes('-override.yaml')) {
-          console.warn(`⚠️  Deprecated: ${path.basename(p)}`);
-          console.warn(`   Rename to: ${name}.override.yaml for better compatibility`);
-        }
         return p;
       }
     }

package/src/orchestrator/ai-rules-updater.ts

@@ -16,6 +16,7 @@ export const AI_RULES_FILE_MAPPING: [string, string][] = [
 
   // Commands — Claude Code
   ['claude-cmd-add-screen.md', '.claude/commands/sungen/add-screen.md'],
+  ['claude-cmd-add-flow.md', '.claude/commands/sungen/add-flow.md'],
   ['claude-cmd-create-test.md', '.claude/commands/sungen/create-test.md'],
   ['claude-cmd-run-test.md', '.claude/commands/sungen/run-test.md'],
   ['claude-cmd-review.md', '.claude/commands/sungen/review.md'],
@@ -23,6 +24,7 @@ export const AI_RULES_FILE_MAPPING: [string, string][] = [
 
   // Commands — GitHub Copilot
   ['copilot-cmd-add-screen.md', '.github/prompts/sungen-add-screen.prompt.md'],
+  ['copilot-cmd-add-flow.md', '.github/prompts/sungen-add-flow.prompt.md'],
   ['copilot-cmd-create-test.md', '.github/prompts/sungen-create-test.prompt.md'],
   ['copilot-cmd-run-test.md', '.github/prompts/sungen-run-test.prompt.md'],
   ['copilot-cmd-review.md', '.github/prompts/sungen-review.prompt.md'],
@@ -43,6 +45,9 @@ export const AI_RULES_FILE_MAPPING: [string, string][] = [
   ['claude-skill-capture-live.md', '.claude/skills/sungen-capture-live/SKILL.md'],
   ['claude-skill-figma-source.md', '.claude/skills/sungen-figma-source/SKILL.md'],
 
+  // Skills — Copilot (prompt-based)
+  ['copilot-skill-figma-source.md', '.github/prompts/sungen-figma-source.prompt.md'],
+
   // Skills — GitHub Copilot
   ['github-skill-sungen-gherkin-syntax.md', '.github/skills/sungen-gherkin-syntax/SKILL.md'],
   ['github-skill-sungen-selector-keys.md', '.github/skills/sungen-selector-keys/SKILL.md'],

package/src/orchestrator/flow-manager.ts

@@ -0,0 +1,243 @@
+/**
+ * Flow Manager
+ * Manages flow definition files in qa/flows directory
+ * Flows are independent E2E test journeys spanning multiple screens
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+
+export interface FlowOptions {
+  name: string;
+  path?: string;
+  description?: string;
+}
+
+export class FlowManager {
+  private cwd: string;
+  private flowsDir: string;
+
+  constructor() {
+    this.cwd = process.cwd();
+    this.flowsDir = path.join(this.cwd, 'qa', 'flows');
+  }
+
+  async addFlow(options: FlowOptions): Promise<void> {
+    this.validateFlowName(options.name);
+
+    const flowName = this.normalizeFlowName(options.name);
+    const flowDir = path.join(this.flowsDir, flowName);
+
+    const featuresDir = path.join(flowDir, 'features');
+    const selectorsDir = path.join(flowDir, 'selectors');
+    const testDataDir = path.join(flowDir, 'test-data');
+    const requirementsDir = path.join(flowDir, 'requirements');
+    const requirementsUiDir = path.join(requirementsDir, 'ui');
+
+    const featurePath = path.join(featuresDir, `${flowName}.feature`);
+    const selectorPath = path.join(selectorsDir, `${flowName}.yaml`);
+    const testDataPath = path.join(testDataDir, `${flowName}.yaml`);
+
+    if (fs.existsSync(flowDir)) {
+      console.error(`Error: Flow "${options.name}" already exists at ${flowDir}`);
+      process.exit(1);
+    }
+
+    console.log(`Creating flow: ${options.name}\n`);
+
+    try {
+      if (!fs.existsSync(this.flowsDir)) {
+        fs.mkdirSync(this.flowsDir, { recursive: true });
+      }
+      fs.mkdirSync(featuresDir, { recursive: true });
+      fs.mkdirSync(selectorsDir, { recursive: true });
+      fs.mkdirSync(testDataDir, { recursive: true });
+      fs.mkdirSync(requirementsUiDir, { recursive: true });
+    } catch (error) {
+      console.error(`Error: Failed to create directories`);
+      console.error(`  ${error instanceof Error ? error.message : String(error)}`);
+      process.exit(1);
+    }
+
+    fs.writeFileSync(featurePath, this.generateFeatureTemplate(options, flowName), 'utf-8');
+
+    const startPath = options.path || '/login';
+    fs.writeFileSync(selectorPath, [
+      `# ${options.name} Flow Selectors`,
+      `# Namespace keys by screen to avoid duplicates: "login:submit", "awards:submit"`,
+      ``,
+      `# --- Login screen ---`,
+      `login:`,
+      `  type: 'page'`,
+      `  value: '${startPath}'`,
+      ``,
+      `# "login:email":`,
+      `#   type: 'testid'`,
+      `#   value: 'email-input'`,
+      ``,
+      `# "login:submit":`,
+      `#   type: 'role'`,
+      `#   value: 'button'`,
+      `#   name: 'Login'`,
+      ``,
+    ].join('\n'), 'utf-8');
+
+    fs.writeFileSync(testDataPath, [
+      `# ${options.name} Flow Test Data`,
+      `# Namespace by phase: login.email, submission.nominee`,
+      `# Reference in features using {{variable}} syntax`,
+      ``,
+    ].join('\n'), 'utf-8');
+
+    const specPath = path.join(requirementsDir, 'spec.md');
+    fs.writeFileSync(specPath, this.generateSpecTemplate(options, flowName), 'utf-8');
+
+    const viewpointPath = path.join(requirementsDir, 'test-viewpoint.md');
+    fs.writeFileSync(viewpointPath, this.generateViewpointTemplate(options), 'utf-8');
+
+    console.log(`Created files:`);
+    console.log(`  ${path.relative(this.cwd, featurePath)}`);
+    console.log(`  ${path.relative(this.cwd, selectorPath)}`);
+    console.log(`  ${path.relative(this.cwd, testDataPath)}`);
+    console.log(`  ${path.relative(this.cwd, specPath)}`);
+    console.log(`  ${path.relative(this.cwd, viewpointPath)}`);
+    console.log(`  ${path.relative(this.cwd, requirementsUiDir)}/`);
+    console.log('');
+
+    console.log('Next steps:');
+    console.log(`  1. Fill requirements/spec.md with flow specification (screens, transitions, business rules)`);
+    console.log(`     Optionally add UI designs to requirements/ui/`);
+    console.log(`  2. Generate test cases: /sungen:create-test ${flowName}`);
+    console.log(`  3. Compile: sungen generate --flow ${flowName}`);
+    console.log(`  4. Run: npx playwright test\n`);
+  }
+
+  private validateFlowName(name: string): void {
+    if (!name || name.trim().length === 0) {
+      console.error('Error: Flow name cannot be empty');
+      process.exit(1);
+    }
+    if (!/[a-zA-Z0-9]/.test(name)) {
+      console.error('Error: Flow name must contain at least one alphanumeric character');
+      process.exit(1);
+    }
+  }
+
+  private normalizeFlowName(name: string): string {
+    return name
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '')
+      .replace(/-+/g, '-');
+  }
+
+  private generateSpecTemplate(options: FlowOptions, flowName: string): string {
+    const startPath = options.path || '/login';
+    return `# ${options.name} Flow Specification
+
+## Overview
+- **Start URL:** ${startPath}
+- **Auth Required:** no
+- **Platform:** web
+
+## Screens in Flow
+<!-- List all screens this flow visits, in order -->
+
+| # | Screen | URL Path | Description |
+|---|--------|----------|-------------|
+| 1 | [Screen Name] | ${startPath} | [What user does here] |
+
+## Flow Steps
+
+### Step 1: [Screen Name]
+- **Action:** [What the user does]
+- **Expected:** [What should happen]
+- **Transition:** Navigates to Step 2
+
+## Business Rules
+<!-- Rules that affect the flow: permissions, conditions, limits -->
+- [Rule 1]
+
+## Notes
+<!-- Edge cases, known issues, environment-specific behavior -->
+- [Note 1]
+`;
+  }
+
+  private generateViewpointTemplate(options: FlowOptions): string {
+    return [
+      `# ${options.name} Flow — Test Viewpoints`,
+      '',
+      '## Edge Cases',
+      '',
+      '<!-- Sample — replace with actual edge cases for this flow:',
+      '- Network drops between screen transitions — should resume or show error?',
+      '- Session expires mid-flow — should redirect to login and preserve progress?',
+      '- Browser back button at step 3 — should return to step 2 with data intact?',
+      '- Complete flow twice rapidly — should prevent duplicate submissions',
+      '-->',
+      '',
+      '## Known Issues',
+      '',
+      '<!-- Sample — replace with actual known issues:',
+      '- [BUG-001] Form data lost if user navigates away and returns',
+      '- [BUG-002] Confirmation page shows stale data on slow connections',
+      '-->',
+      '',
+      '## Design Decisions',
+      '',
+      '<!-- Sample — replace with actual design decisions:',
+      '- Flow requires completing all steps in order (no skip)',
+      '- Draft is auto-saved at each step transition',
+      '- Cancel at any step discards the entire flow',
+      '-->',
+      '',
+      '## Cross-Screen Concerns',
+      '',
+      '<!-- Sample — replace with actual cross-screen concerns:',
+      '- Auth role must remain consistent across all screens',
+      '- Data entered in step 1 must be visible in confirmation (step 3)',
+      '- Error in step 2 should allow returning to step 1 without re-entering data',
+      '-->',
+      '',
+      '## Priority Viewpoints',
+      '',
+      '<!-- Rate importance for this flow (High / Medium / Low / Skip):',
+      '',
+      '| VP | Priority | Reason |',
+      '|---|----------|--------|',
+      '| VP-UI | Medium | Standard forms across screens |',
+      '| VP-VAL | High | Cross-screen validation rules |',
+      '| VP-LOGIC | High | Multi-step business logic, state transitions |',
+      '| VP-SEC | Medium | Auth must persist, role-based access at each screen |',
+      '-->',
+      '',
+    ].join('\n');
+  }
+
+  private generateFeatureTemplate(options: FlowOptions, flowName: string): string {
+    const description = options.description || `complete the ${options.name} flow`;
+
+    return `@flow
+Feature: ${options.name} Flow
+
+  As a user
+  I want to ${description}
+  So that I can accomplish my end-to-end goal
+
+  Background:
+    Given User is on [Login] page
+
+  @high @auth:user
+  Scenario: User login successfully
+    When User fill [Login:Email] field with {{login.email}}
+    And User fill [Login:Password] field with {{login.password}}
+    And User click [Login:Submit] button
+    Then User see [Dashboard] page
+
+  Scenario: Sample next step for ${options.name}
+    When User click [Dashboard:Element] button
+    Then User see "expected result" text
+`;
+  }
+}

package/src/orchestrator/project-initializer.ts

@@ -90,6 +90,7 @@ export class ProjectInitializer {
     const dirs = [
       'qa',
       'qa/screens',
+      'qa/flows',
       'specs',
       'specs/generated',
       'specs/storage',

package/src/orchestrator/screen-manager.ts

@@ -358,9 +358,11 @@ export class ScreenManager {
   So that I can accomplish my tasks
   Path: ${featurePath}
 
+  Background:
+    Given User is on [${screenName}] page
+
   @high
   Scenario: Sample scenario for ${options.name}
-    Given User is on [${screenName}] page
     When User click [element] button
     Then User see [result] text with {{success}}
 `;