@slingr/cli 0.0.2 → 0.0.4

package/dist/commands/run.js

@@ -9,22 +9,121 @@ const node_child_process_1 = require("node:child_process");
 const node_path_1 = __importDefault(require("node:path"));
 const datasourceParser_js_1 = require("../utils/datasourceParser.js");
 const portChecker_js_1 = require("../utils/portChecker.js");
+const checkFramework_js_1 = require("../utils/checkFramework.js");
+const viewsGenerator_js_1 = require("../utils/viewsGenerator.js");
+const buildCache_js_1 = require("../utils/buildCache.js");
 class Run extends core_1.Command {
-    static description = 'Run a Slingr application locally';
+    static description = 'Run a Slingr application locally with both backend and frontend on a single port.\n\n' +
+        'By default, runs in production mode (unified server). Use --dev flag for hot-reload development with separate processes.';
     static examples = [
         '<%= config.bin %> <%= command.id %>',
         '<%= config.bin %> <%= command.id %> --skip-infra',
+        '<%= config.bin %> <%= command.id %> --dev',
+        '<%= config.bin %> <%= command.id %> --ui-only',
+        '<%= config.bin %> <%= command.id %> --backend',
     ];
     static flags = {
         help: core_1.Flags.help({ char: 'h' }),
         'skip-infra': core_1.Flags.boolean({
             char: 'i',
-            description: 'Skip infrastructure setup and checks',
+            description: 'Skip infrastructure setup and checks (use when database containers are already running)',
+            required: false,
+        }),
+        dev: core_1.Flags.boolean({
+            char: 'd',
+            description: 'Run in development mode with hot-reload (starts UI dev server and backend separately). Mutually exclusive with --ui-only and --backend.',
+            required: false,
+            exclusive: ['ui-only', 'backend'],
+        }),
+        'ui-only': core_1.Flags.boolean({
+            description: 'Start only the UI development server (backend must be running separately). Mutually exclusive with --dev and --backend.',
+            required: false,
+            exclusive: ['dev', 'backend'],
+        }),
+        backend: core_1.Flags.boolean({
+            char: 'b',
+            description: 'Start only the backend server (use with --ui-only for split development). Mutually exclusive with --dev and --ui-only.',
+            required: false,
+            exclusive: ['dev', 'ui-only'],
+        }),
+        port: core_1.Flags.integer({
+            char: 'p',
+            description: 'Custom port for the server (default: 3000 or first available)',
+            required: false,
+        }),
+        verbose: core_1.Flags.boolean({
+            char: 'v',
+            description: 'Show detailed build and setup output and enable DEBUG level logs',
             required: false,
         }),
     };
+    verbose = false;
+    stepResults = [];
+    summarized = false;
+    /** Log only when --verbose is active. */
+    vlog(msg) {
+        if (this.verbose) {
+            this.log(msg);
+        }
+    }
+    /** Record the result of a step for the final summary. */
+    recordStep(name, status, message) {
+        const step = { name, status };
+        if (message !== undefined)
+            step.message = message;
+        this.stepResults.push(step);
+    }
+    /** Extract build output from an execSync error (includes both stdout and stderr). */
+    extractBuildOutput(error) {
+        const parts = [];
+        if (error?.stdout) {
+            const stdout = error.stdout.toString().trim();
+            if (stdout)
+                parts.push(stdout);
+        }
+        if (error?.stderr) {
+            const stderr = error.stderr.toString().trim();
+            if (stderr)
+                parts.push(stderr);
+        }
+        return parts.length > 0 ? '\n' + parts.join('\n') : '';
+    }
+    /** Print a summary of all recorded steps. */
+    printSummary() {
+        if (this.stepResults.length === 0 || this.summarized)
+            return;
+        this.summarized = true;
+        const hasErrors = this.stepResults.some(s => s.status === 'error');
+        const hasWarnings = this.stepResults.some(s => s.status === 'warning');
+        this.log('');
+        this.log('━'.repeat(60));
+        if (hasErrors) {
+            this.log('❌ Process completed with errors');
+        }
+        else if (hasWarnings) {
+            this.log('⚠️  Process completed with warnings');
+        }
+        else {
+            this.log('✅ All steps completed successfully');
+        }
+        this.log('━'.repeat(60));
+        for (const step of this.stepResults) {
+            const icon = step.status === 'success' ? '✅'
+                : step.status === 'warning' ? '⚠️ '
+                    : step.status === 'skipped' ? '⏭️ '
+                        : '❌';
+            const msg = step.status === 'skipped'
+                ? ` — skipped${step.message ? ` (${step.message})` : ''}`
+                : step.message ? ` — ${step.message}` : '';
+            this.log(`  ${icon} ${step.name}${msg}`);
+        }
+        this.log('━'.repeat(60));
+        this.log('');
+    }
     async run() {
         const { flags } = await this.parse(Run);
+        this.verbose = flags.verbose ?? false;
+        process.env.SLINGR_VERBOSE = this.verbose ? 'true' : 'false';
         try {
             // Check if we're in a Slingr app directory
             const packageJsonPath = node_path_1.default.join(process.cwd(), 'package.json');
@@ -32,154 +131,144 @@ class Run extends core_1.Command {
                 this.error("Not in a Slingr application directory. Please run this command from your app's root directory.");
             }
             const packageJson = await fs_extra_1.default.readJSON(packageJsonPath);
-            if (!packageJson.dependencies?.['slingr-framework']) {
+            if (!(await (0, checkFramework_js_1.hasSlingrFramework)())) {
                 this.error('This directory does not contain a Slingr application.');
             }
-            // Check if src/index.ts exists
-            const srcIndexPath = node_path_1.default.join(process.cwd(), 'src', 'index.ts');
-            if (!(await fs_extra_1.default.pathExists(srcIndexPath))) {
-                this.error('src/index.ts not found. This does not appear to be a valid Slingr application.');
+            // Verify entrypoint exists
+            const backendPath = (0, checkFramework_js_1.getBackendPath)();
+            const srcAppPath = node_path_1.default.join(backendPath, 'src', 'App.ts');
+            if (!(await fs_extra_1.default.pathExists(srcAppPath))) {
+                this.error('backend/src/App.ts not found. This does not appear to be a valid Slingr application.');
             }
-            // Step 1: Build slingr-framework
+            // 1. Build/Prepare Framework (Conditioned)
             await this.buildFramework();
-            // Step 2: Generate actions index
-            await this.generateActionsIndex();
-            // Step 3: Generate code
-            await this.generateCode();
-            // Step 4: Update and check infrastructure
-            if (!flags['skip-infra']) {
-                await this.checkInfrastructure();
+            // 2. Execution Mode
+            if (flags['ui-only']) {
+                await this.runUIOnly(flags.port);
+            }
+            else if (flags.backend) {
+                await this.runBackendOnly(flags);
+            }
+            else if (flags.dev) {
+                await this.runDevMode(flags);
+            }
+            else {
+                // Production / Default Unified Mode - needs UI
+                await (0, viewsGenerator_js_1.generateViewsContext)(process.cwd(), this.verbose);
+                await this.buildUI();
+                await this.generateCode();
+                if (!flags['skip-infra']) {
+                    await this.checkInfrastructure();
+                }
+                else {
+                    this.recordStep('Infrastructure', 'skipped', '--skip-infra');
+                }
+                this.printSummary();
+                await this.executeApp(flags.port, {}, true); // true = production mode
             }
-            // Step 4: Execute the application
-            await this.executeApp();
         }
         catch (error) {
+            this.printSummary();
             this.error(error.message);
         }
     }
-    async buildFramework(silent = false) {
-        const currentDir = process.cwd();
-        const nodeModulesPath = node_path_1.default.join(currentDir, 'node_modules', 'slingr-framework');
-        if (!silent) {
-            this.log(`Looking for slingr-framework in: ${nodeModulesPath}`);
-        }
-        if (!(await fs_extra_1.default.pathExists(nodeModulesPath))) {
-            this.error('slingr-framework not found in node_modules. Please run npm install first.');
+    /**
+     * Helper to resolve where the compiled UI is located.
+     */
+    async resolveUiPath() {
+        const cwd = process.cwd();
+        // Check for app's frontend/dist directory
+        const frontendDistPath = node_path_1.default.join(cwd, 'frontend', 'dist');
+        if (await fs_extra_1.default.pathExists(node_path_1.default.join(frontendDistPath, 'index.html'))) {
+            return { path: frontendDistPath, exists: true };
         }
-        // For linked packages, the framework should already be built
-        // Just check if it's available
+        // UI not found
+        return { path: frontendDistPath, exists: false };
+    }
+    async buildFramework(silent = false) {
+        // Only attempts to build if it detects it's a local linked dependency,
+        // otherwise just verifies existence.
         try {
-            require.resolve('slingr-framework');
-            if (!silent) {
-                this.log('✅ slingr-framework is available');
+            const frameworkPath = require.resolve('@slingr/framework-backend');
+            if (frameworkPath && !silent && this.verbose) {
+                this.log('✅ @slingr/framework-backend is available');
             }
         }
         catch (error) {
-            this.error('slingr-framework module cannot be loaded. Please ensure it is properly installed.');
-        }
-    }
-    async checkGraphQLSetup() {
-        const schemaPath = node_path_1.default.join(process.cwd(), 'generated', 'gql', 'schema.graphql');
-        const sdkPath = node_path_1.default.join(process.cwd(), 'generated', 'gql', 'sdk.ts');
-        const indexPath = node_path_1.default.join(process.cwd(), 'generated', 'gql', 'index.ts');
-        const schemaExists = await fs_extra_1.default.pathExists(schemaPath);
-        const sdkExists = await fs_extra_1.default.pathExists(sdkPath);
-        const indexExists = await fs_extra_1.default.pathExists(indexPath);
-        if (!schemaExists || !sdkExists || !indexExists) {
-            this.log('');
-            this.log('⚠️  GraphQL schema and SDK not found!');
-            this.log('');
-            this.log('The GraphQL server requires a generated schema and SDK to run.');
-            this.log('');
-            if (!schemaExists) {
-                this.log('❌ Missing: generated/gql/schema.graphql');
-            }
-            if (!sdkExists) {
-                this.log('❌ Missing: generated/gql/sdk.ts');
-            }
-            if (!indexExists) {
-                this.log('❌ Missing: generated/gql/index.ts');
+            const nodeModulesPath = node_path_1.default.join(process.cwd(), 'node_modules', '@slingr');
+            if (!(await fs_extra_1.default.pathExists(nodeModulesPath))) {
+                this.error('@slingr/framework-backend not found. Please run npm install.');
             }
-            this.log('');
-            this.log('📋 To generate the required files, run:');
-            this.log('');
-            this.log('   1. Generate GraphQL schema:');
-            this.log('      $ slingr gql generate-schema');
-            this.log('');
-            this.log('   2. Generate SDK:');
-            this.log('      $ slingr gql generate-sdk');
-            this.log('');
-            this.log('   3. Then run the server:');
-            this.log('      $ slingr run');
-            this.log('');
-            this.error('GraphQL setup incomplete. Please run the commands above.');
         }
-        this.log('✅ GraphQL schema and SDK found');
     }
     async checkInfrastructure() {
         const dataSources = await this.loadDataSources();
-        // Check if docker is installed
+        // Check Docker availability
         try {
             (0, node_child_process_1.execSync)('docker --version', { stdio: 'pipe' });
         }
         catch {
-            this.error('Docker is not installed. Please install Docker to run infrastructure services.');
-        }
-        // Check if Docker Engine is running BEFORE checking ports
-        if (!(0, portChecker_js_1.isDockerRunning)()) {
-            this.error('🐳 Docker is not running. Please start Docker and try again.\n\n' +
-                'On macOS/Windows: Start Docker Desktop\n' +
-                'On Linux: Run "sudo systemctl start docker" or "sudo service docker start"');
+            this.recordStep('Infrastructure', 'error', 'Docker is not installed');
+            this.error('Docker is not installed.');
         }
-        // Check if docker-compose is installed
+        const { ensureDockerIsRunning } = await import('../utils/dockerManager.js');
         try {
-            (0, node_child_process_1.execSync)('docker compose version', { stdio: 'pipe' });
+            await ensureDockerIsRunning('slingr run');
         }
-        catch {
-            this.error('Docker Compose is not installed. Please install Docker Compose to run infrastructure services.');
+        catch (error) {
+            this.recordStep('Infrastructure', 'error', error.message);
+            this.error(error.message);
         }
-        // Check port availability before starting services
         await this.checkPortAvailability();
-        // Run infra update command to ensure latest infrastructure configuration
         await this.config.runCommand('infra:update', ['--all']);
-        // Start infrastructure services
-        this.log('Starting infrastructure services...');
+        this.vlog('Starting infrastructure services...');
         try {
-            (0, node_child_process_1.execSync)('docker compose up -d', { stdio: 'inherit' });
+            (0, node_child_process_1.execSync)('docker compose up -d', { stdio: this.verbose ? 'inherit' : 'pipe' });
         }
         catch {
-            this.error('Failed to start Docker services. This might be due to port conflicts or other Docker issues.');
+            this.recordStep('Infrastructure', 'error', 'Failed to start Docker services');
+            this.error('Failed to start Docker services.');
         }
-        // Wait for services to be healthy
-        this.log('Waiting for services to be ready...');
+        // Health check loop
+        this.vlog('Waiting for services to be ready...');
+        let infraWarnings = [];
         for (const ds of dataSources) {
             const serviceName = `${ds.name}-db`;
-            this.log(`Checking ${serviceName}...`);
             let attempts = 0;
             const maxAttempts = 30;
+            if (this.verbose) {
+                process.stdout.write(`Checking ${serviceName}... `);
+            }
             while (attempts < maxAttempts) {
                 try {
                     const containerInfo = (0, node_child_process_1.execSync)(`docker ps -f name=${serviceName} --format '{{.Status}}'`, {
                         encoding: 'utf-8',
                     });
                     if (containerInfo.includes('healthy')) {
-                        this.log(`Service ${serviceName} is healthy`);
+                        if (this.verbose) {
+                            console.log('✅');
+                        }
                         break;
                     }
                 }
-                catch {
-                    // Continue trying
-                }
+                catch { }
                 await new Promise(resolve => setTimeout(resolve, 1000));
                 attempts++;
-                if (attempts === maxAttempts) {
-                    this.error(`Service ${serviceName} is not healthy after ${maxAttempts} seconds`);
-                }
             }
+            if (attempts === maxAttempts) {
+                this.warn(`Service ${serviceName} is not reporting healthy yet.`);
+                infraWarnings.push(`${serviceName} not healthy`);
+            }
+        }
+        if (infraWarnings.length > 0) {
+            this.recordStep('Infrastructure', 'warning', infraWarnings.join(', '));
+        }
+        else {
+            this.recordStep('Infrastructure', 'success');
         }
     }
     async checkPortAvailability() {
-        this.log('Checking port availability for datasources...');
+        this.vlog('Checking port availability for datasources...');
         const dataSourcePorts = await (0, datasourceParser_js_1.extractDataSourcePorts)();
         if (dataSourcePorts.length === 0) {
             return;
@@ -188,8 +277,8 @@ class Run extends core_1.Command {
         const portUsage = await (0, portChecker_js_1.checkPortsUsage)(ports);
         const conflictingPorts = portUsage.filter(p => p.inUse && !p.isProjectDocker);
         const dockerPorts = portUsage.filter(p => p.inUse && p.isProjectDocker);
-        // Show info about existing Docker containers
-        if (dockerPorts.length > 0) {
+        // Show info about existing Docker containers (verbose only)
+        if (dockerPorts.length > 0 && this.verbose) {
             this.log('ℹ️  Found existing project containers:');
             for (const dockerPort of dockerPorts) {
                 const dataSource = dataSourcePorts.find(ds => ds.port === dockerPort.port);
@@ -200,6 +289,7 @@ class Run extends core_1.Command {
             this.log('');
         }
         if (conflictingPorts.length > 0) {
+            // Conflict info is always shown — it precedes a fatal error
             this.log('⚠️  Port conflicts detected!');
             this.log('');
             for (const conflictPort of conflictingPorts) {
@@ -230,36 +320,375 @@ class Run extends core_1.Command {
             this.error(`Cannot start infrastructure due to port conflicts. Please resolve the port conflicts above.`);
         }
         else {
-            this.log('✅ All required ports are available');
+            this.vlog('✅ All required ports are available');
         }
     }
-    async generateActionsIndex() {
-        this.log('🔄 Generating actions index...');
-        const actionsPath = node_path_1.default.join(process.cwd(), 'src', 'actions');
-        // Check if actions directory exists
-        if (!(await fs_extra_1.default.pathExists(actionsPath))) {
-            this.log('ℹ️  No actions directory found, skipping action index generation');
-            return;
+    async buildUI() {
+        const frontendPath = node_path_1.default.join(process.cwd(), 'frontend');
+        // Check if frontend directory exists
+        if (!(await fs_extra_1.default.pathExists(frontendPath))) {
+            this.error('Frontend directory not found. This application does not have a frontend project.\n\n' +
+                'Expected frontend directory at: ' +
+                frontendPath +
+                '\n\n' +
+                'Please ensure your Slingr application has a frontend/ directory.');
+        }
+        // Check if frontend/package.json exists
+        const frontendPackageJson = node_path_1.default.join(frontendPath, 'package.json');
+        if (!(await fs_extra_1.default.pathExists(frontendPackageJson))) {
+            this.error('Frontend package.json not found.\n\n' + 'Expected at: ' + frontendPackageJson);
+        }
+        const uiInfo = await this.resolveUiPath();
+        if (uiInfo.exists) {
+            this.vlog('✅ Using pre-built UI from frontend/dist');
+            this.recordStep('Frontend build', 'skipped', 'Using pre-built UI');
         }
+        else {
+            this.vlog('📦 Building frontend...');
+            try {
+                if (this.verbose) {
+                    // Stream build output directly to the console in verbose mode
+                    (0, node_child_process_1.execSync)('npm run build', { stdio: 'inherit', cwd: frontendPath });
+                }
+                else {
+                    // Capture output for potential error reporting in non-verbose mode
+                    (0, node_child_process_1.execSync)('npm run build', { stdio: 'pipe', cwd: frontendPath });
+                }
+                this.vlog('✅ Frontend built successfully');
+                this.recordStep('Frontend build', 'success');
+            }
+            catch (error) {
+                const detail = this.extractBuildOutput(error);
+                this.recordStep('Frontend build', 'error', 'Compilation failed');
+                this.error(`Frontend build failed:${detail || ` ${error.message}`}`);
+            }
+        }
+        // Copy built UI to backend/dist/ui so the backend can serve it
+        await this.copyUIToBackend();
+    }
+    async copyUIToBackend() {
+        const frontendDistPath = node_path_1.default.join(process.cwd(), 'frontend', 'dist');
+        const backendPath = (0, checkFramework_js_1.getBackendPath)();
+        const backendUiPath = node_path_1.default.join(backendPath, 'dist', 'ui');
+        // Check if frontend/dist exists
+        if (!(await fs_extra_1.default.pathExists(frontendDistPath))) {
+            this.error('Frontend build not found.\n\n' +
+                'Expected at: ' +
+                frontendDistPath +
+                '\n\n' +
+                'The frontend build failed or was not created.');
+        }
+        this.vlog('📋 Copying UI to backend/dist/ui...');
         try {
-            // Import and call the generateActionsIndex function directly from the framework
-            const framework = await import('slingr-framework');
-            await framework.generateActionsIndex(process.cwd(), 'src/actions');
-            this.log('✅ Actions index generated successfully');
+            // Remove old UI if exists
+            await fs_extra_1.default.remove(backendUiPath);
+            // Create backend/dist directory if it doesn't exist
+            await fs_extra_1.default.ensureDir(node_path_1.default.join(backendPath, 'dist'));
+            // Copy frontend/dist to backend/dist/ui
+            await fs_extra_1.default.copy(frontendDistPath, backendUiPath);
+            this.vlog('✅ UI copied to backend successfully');
         }
         catch (error) {
-            this.warn(`Failed to generate actions index: ${error.message}`);
-            this.warn('Continuing anyway, but actions might not be registered correctly.');
+            this.error(`Failed to copy UI to backend: ${error.message}`);
         }
     }
     async generateCode() {
-        // Compile TypeScript code
-        this.log('Compiling TypeScript code...');
-        (0, node_child_process_1.execSync)('npm run build', { stdio: 'inherit' });
+        const cwd = process.cwd();
+        const backendPath = (0, checkFramework_js_1.getBackendPath)();
+        // 1. Backend TypeScript compilation
+        const compileOutputFile = 'backend/dist/src/App.js';
+        const compileUpToDate = await (0, buildCache_js_1.isUpToDate)({
+            cwd,
+            sourceGlobs: ['backend/src/**/*.ts', 'backend/package-lock.json'],
+            outputFiles: [compileOutputFile],
+        });
+        if (compileUpToDate) {
+            this.vlog('✅ Backend compilation up-to-date, skipping');
+            this.recordStep('Backend compilation', 'skipped', 'Up-to-date');
+        }
+        else {
+            this.vlog('Compiling TypeScript code...');
+            try {
+                // Clean TypeScript output directories to remove stale compiled files from deleted models.
+                // Only remove src/ and generated/ (not dist/ui/ which holds the copied frontend build).
+                await fs_extra_1.default.remove(node_path_1.default.join(backendPath, 'dist', 'src'));
+                await fs_extra_1.default.remove(node_path_1.default.join(backendPath, 'dist', 'generated'));
+                if (this.verbose) {
+                    // Stream build output directly to the terminal in verbose mode to avoid buffering.
+                    (0, node_child_process_1.execSync)('npm run build', { stdio: 'inherit', cwd: backendPath });
+                }
+                else {
+                    // Capture output in non-verbose mode so it can be inspected on failure without spamming the console.
+                    (0, node_child_process_1.execSync)('npm run build', { stdio: 'pipe', cwd: backendPath });
+                }
+                this.recordStep('Backend compilation', 'success');
+            }
+            catch (error) {
+                const detail = this.extractBuildOutput(error);
+                this.recordStep('Backend compilation', 'error', 'Compilation failed');
+                this.error(`TypeScript compilation failed:${detail || ` ${error.message}`}`);
+            }
+        }
+        // 2. GraphQL schema generation
+        const schemaUpToDate = await (0, buildCache_js_1.isUpToDate)({
+            cwd,
+            sourceGlobs: [
+                'backend/src/data/**/*.ts',
+                'backend/src/dataSources/**/*.ts',
+                'backend/src/actions/**/*.ts',
+                'backend/package-lock.json',
+            ],
+            outputFiles: ['backend/generated/gql/schema.graphql'],
+        });
+        // 3. GraphQL SDK generation (depends on schema)
+        // Evaluate before schema runs; if schema regenerates, SDK must too (see sdkShouldRun below)
+        const sdkUpToDate = await (0, buildCache_js_1.isUpToDate)({
+            cwd,
+            sourceGlobs: ['backend/generated/gql/schema.graphql'],
+            outputFiles: ['frontend/generated/gql/types.ts'],
+        });
+        try {
+            if (!schemaUpToDate) {
+                this.vlog('Generating GraphQL schema and SDK...');
+                await this.config.runCommand('gql', ['generate-schema']);
+            }
+            else {
+                this.vlog('✅ GraphQL schema up-to-date, skipping');
+            }
+            // Run SDK if schema was regenerated OR SDK output was stale
+            const sdkShouldRun = !schemaUpToDate || !sdkUpToDate;
+            if (sdkShouldRun) {
+                if (schemaUpToDate) {
+                    this.vlog('Generating GraphQL SDK...');
+                }
+                await this.config.runCommand('gql', ['generate-sdk']);
+            }
+            else {
+                this.vlog('✅ GraphQL SDK up-to-date, skipping');
+            }
+            if (schemaUpToDate && !sdkShouldRun) {
+                this.vlog('✅ GraphQL schema and SDK up-to-date');
+                this.recordStep('GraphQL schema & SDK', 'skipped', 'Up-to-date');
+            }
+            else {
+                this.vlog('✅ GraphQL schema and SDK generated');
+                this.recordStep('GraphQL schema & SDK', 'success');
+            }
+        }
+        catch (error) {
+            this.warn(`Warning: Failed to generate GraphQL artifacts: ${error.message}`);
+            this.warn('You can manually generate them with "slingr gql generate-schema" and "slingr gql generate-sdk"');
+            this.recordStep('GraphQL schema & SDK', 'warning', error.message);
+        }
+    }
+    async runDevMode(flags) {
+        this.log('🚀 Starting in development mode (Backend hot-reload + UI dev server)...');
+        await this.buildFramework(true);
+        await (0, viewsGenerator_js_1.generateViewsContext)(process.cwd(), this.verbose);
+        await this.generateCode();
+        if (!flags['skip-infra']) {
+            await this.checkInfrastructure();
+        }
+        else {
+            this.recordStep('Infrastructure', 'skipped', '--skip-infra');
+        }
+        const backendPort = flags.port || 3000;
+        const uiPort = flags.port || 8000;
+        // Check for frontend directory
+        const frontendPath = node_path_1.default.join(process.cwd(), 'frontend');
+        if (!(await fs_extra_1.default.pathExists(node_path_1.default.join(frontendPath, 'package.json')))) {
+            this.error('Frontend directory not found. Cannot run in development mode.\n\n' +
+                'Expected frontend directory at: ' +
+                frontendPath);
+        }
+        // Frontend TypeScript type-check (dev servers use transpile-only, so errors don't surface otherwise)
+        await this.typeCheckFrontend(frontendPath);
+        this.log('ℹ️  Starting development servers:');
+        this.log(`   • Backend with hot-reload on port ${backendPort}`);
+        this.log(`   • UI dev server on port ${uiPort}`);
+        this.log('');
+        const backendPath = (0, checkFramework_js_1.getBackendPath)();
+        const env = {
+            ...process.env,
+            PORT: backendPort.toString(),
+            SLINGR_SKIP_UI: 'true', // Skip UI serving in dev mode - frontend runs separately
+            LOG_LEVEL: this.verbose ? 'debug' : process.env.LOG_LEVEL || 'info',
+        };
+        // Filter out noisy UmiJS startup messages that aren't actionable
+        const umiNoise = /你知道吗|Using mako@|Mako is an extremely fast/;
+        const forwardStream = (src, dest) => {
+            src.on('data', (chunk) => {
+                const text = chunk.toString();
+                const filtered = text
+                    .split('\n')
+                    .filter(line => !umiNoise.test(line))
+                    .join('\n');
+                if (filtered.trim() || text.endsWith('\n')) {
+                    dest.write(filtered.endsWith('\n') || !filtered ? filtered : filtered + '\n');
+                }
+            });
+        };
+        // Start Backend Process
+        this.vlog('🔧 Starting backend server...');
+        const backendArgs = ['ts-node', 'src/App.ts'];
+        const backendCmd = 'npx';
+        const backendProcess = (0, node_child_process_1.spawn)(backendCmd, backendArgs, {
+            stdio: ['inherit', 'pipe', 'pipe'],
+            cwd: backendPath,
+            env,
+            shell: true,
+        });
+        forwardStream(backendProcess.stdout, process.stdout);
+        forwardStream(backendProcess.stderr, process.stderr);
+        // Start UI Process
+        this.vlog('🎨 Starting UI development server...');
+        const uiProcess = (0, node_child_process_1.spawn)('npm', ['run', 'dev'], {
+            stdio: ['inherit', 'pipe', 'pipe'],
+            cwd: frontendPath,
+            env: { ...process.env, PORT: uiPort.toString() },
+            shell: true,
+        });
+        forwardStream(uiProcess.stdout, process.stdout);
+        forwardStream(uiProcess.stderr, process.stderr);
+        // Wait for both servers to signal ready, then show the pre-flight summary at the bottom
+        await Promise.all([
+            this.waitForReady(backendProcess, /Slingr application is ready/, 15000),
+            this.waitForReady(uiProcess, /App listening at/, 30000),
+        ]);
+        this.printSummary();
+        // Graceful Shutdown
+        let isShuttingDown = false;
+        const cleanup = async () => {
+            if (isShuttingDown) {
+                return;
+            }
+            isShuttingDown = true;
+            this.log('\n👋 Shutting down development servers...');
+            try {
+                if (backendProcess) {
+                    if (process.platform === 'win32' && backendProcess.pid) {
+                        (0, node_child_process_1.execSync)(`taskkill /F /T /PID ${backendProcess.pid}`, { stdio: 'ignore' });
+                    }
+                    else {
+                        backendProcess.kill('SIGTERM');
+                    }
+                }
+                if (uiProcess) {
+                    if (process.platform === 'win32' && uiProcess.pid) {
+                        (0, node_child_process_1.execSync)(`taskkill /F /T /PID ${uiProcess.pid}`, { stdio: 'ignore' });
+                    }
+                    else {
+                        uiProcess.kill('SIGTERM');
+                    }
+                }
+            }
+            catch { }
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            process.exit(0);
+        };
+        process.on('SIGINT', cleanup);
+        process.on('SIGTERM', cleanup);
+        process.on('exit', cleanup);
+        // Keep process alive to listen for signals
+        await new Promise(() => { });
+    }
+    /** Run tsc --noEmit in the frontend directory to surface TypeScript errors before the dev server starts. */
+    async typeCheckFrontend(frontendPath) {
+        // Skip if no tsconfig.json — project may not use TypeScript
+        const tsconfig = node_path_1.default.join(frontendPath, 'tsconfig.json');
+        if (!(await fs_extra_1.default.pathExists(tsconfig))) {
+            this.recordStep('Frontend type check', 'skipped', 'no tsconfig.json');
+            return;
+        }
+        // Prefer a non-interactive local invocation of tsc to avoid npx network installs/prompts
+        const localTsc = node_path_1.default.join(frontendPath, 'node_modules', '.bin', process.platform === 'win32' ? 'tsc.cmd' : 'tsc');
+        if (!(await fs_extra_1.default.pathExists(localTsc))) {
+            this.recordStep('Frontend type check', 'skipped', 'TypeScript tooling not found in frontend node_modules');
+            this.warn('Skipping frontend type check: local TypeScript compiler not found (install dev dependencies to enable this check).');
+            return;
+        }
+        this.vlog('🔍 Type-checking frontend...');
+        try {
+            const output = (0, node_child_process_1.execSync)(`"${localTsc}" --noEmit`, { stdio: 'pipe', cwd: frontendPath });
+            if (this.verbose && output.toString().trim()) {
+                process.stdout.write(output.toString());
+            }
+            this.recordStep('Frontend type check', 'success');
+        }
+        catch (error) {
+            const detail = this.extractBuildOutput(error);
+            this.recordStep('Frontend type check', 'warning', 'TypeScript errors detected');
+            // Show errors but continue — dev server still runs with transpile-only mode
+            if (detail) {
+                this.warn(`Frontend TypeScript errors:${detail}`);
+            }
+        }
+    }
+    /** Resolves when the process emits output matching `pattern`, or after `timeoutMs` as a fallback. */
+    waitForReady(proc, pattern, timeoutMs) {
+        return new Promise((resolve, reject) => {
+            let done = false;
+            let timeout;
+            const cleanup = () => {
+                if (timeout) {
+                    clearTimeout(timeout);
+                    timeout = undefined;
+                }
+                proc.stdout?.off('data', onData);
+                proc.stderr?.off('data', onData);
+                proc.off('exit', onExit);
+                proc.off('close', onClose);
+                proc.off('error', onError);
+            };
+            const finishResolve = () => {
+                if (done)
+                    return;
+                done = true;
+                cleanup();
+                resolve();
+            };
+            const finishReject = (error) => {
+                if (done)
+                    return;
+                done = true;
+                cleanup();
+                reject(error);
+            };
+            const onData = (chunk) => {
+                if (pattern.test(chunk.toString())) {
+                    finishResolve();
+                }
+            };
+            const onExit = (code) => {
+                if (!done) {
+                    finishReject(new Error(`Process exited before matching readiness pattern (code ${code ?? 'null'})`));
+                }
+            };
+            const onClose = (code) => {
+                if (!done) {
+                    finishReject(new Error(`Process closed before matching readiness pattern (code ${code ?? 'null'})`));
+                }
+            };
+            const onError = (error) => {
+                if (!done) {
+                    finishReject(error);
+                }
+            };
+            proc.stdout?.on('data', onData);
+            proc.stderr?.on('data', onData);
+            proc.on('exit', onExit);
+            proc.on('close', onClose);
+            proc.on('error', onError);
+            timeout = setTimeout(() => {
+                // Preserve previous behavior: resolve after timeout as a fallback.
+                finishResolve();
+            }, timeoutMs);
+        });
     }
     async loadDataSources() {
         const dataSources = [];
-        const dataSourcesPath = node_path_1.default.join(process.cwd(), 'src', 'dataSources');
+        const backendPath = (0, checkFramework_js_1.getBackendPath)();
+        const dataSourcesPath = node_path_1.default.join(backendPath, 'src', 'dataSources');
         if (await fs_extra_1.default.pathExists(dataSourcesPath)) {
             const files = await fs_extra_1.default.readdir(dataSourcesPath);
             for (const file of files) {
@@ -281,32 +710,101 @@ class Run extends core_1.Command {
         }
         return dataSources;
     }
-    async executeApp() {
-        this.log('🚀 Starting Slingr application...');
-        // Execute using the npm run dev script which is more reliable
+    async runUIOnly(port) {
+        const uiPort = port || 8000;
+        // Check for frontend directory
+        const frontendPath = node_path_1.default.join(process.cwd(), 'frontend');
+        if (!(await fs_extra_1.default.pathExists(node_path_1.default.join(frontendPath, 'package.json')))) {
+            this.error('Frontend directory not found. Cannot run UI-only mode.\n\n' + 'Expected frontend directory at: ' + frontendPath);
+        }
+        await (0, viewsGenerator_js_1.generateViewsContext)(process.cwd(), this.verbose);
+        this.log('🎨 Starting UI development server...');
+        this.log(`Starting UI dev server on port ${uiPort}...`);
+        this.log('');
         try {
-            this.log('');
             (0, node_child_process_1.execSync)('npm run dev', {
                 stdio: 'inherit',
-                cwd: process.cwd(),
+                cwd: frontendPath,
+                env: { ...process.env, PORT: uiPort.toString() },
             });
         }
         catch (error) {
-            // If it's Ctrl+C, exit gracefully
             if (error.signal === 'SIGINT') {
-                this.log('\n👋 Application stopped gracefully');
+                this.log('\n👋 UI server stopped gracefully');
                 process.exit(0);
             }
-            // If npm run dev failed, try with the compiled version
-            this.log('🔄 npm run dev failed, trying with compiled version...');
+            this.error(`Failed to start UI server: ${error.message}`);
+        }
+    }
+    async runBackendOnly(flags) {
+        this.vlog('⚙️  Starting backend server only...');
+        await this.buildFramework();
+        await this.generateCode();
+        if (!flags['skip-infra']) {
+            await this.checkInfrastructure();
+        }
+        else {
+            this.recordStep('Infrastructure', 'skipped', '--skip-infra');
+        }
+        this.printSummary();
+        await this.executeApp(flags.port);
+    }
+    async executeApp(port, extraEnv = {}, production = false) {
+        this.vlog('🚀 Starting Slingr application...');
+        const backendPath = (0, checkFramework_js_1.getBackendPath)();
+        const env = { ...process.env, ...extraEnv };
+        env.LOG_LEVEL = this.verbose ? 'debug' : process.env.LOG_LEVEL || 'info';
+        if (port) {
+            env.PORT = port.toString();
+            this.vlog(`Using port: ${port}`);
+        }
+        if (production) {
+            // Production mode: run compiled version
             try {
-                (0, node_child_process_1.execSync)('node dist/index.js', {
+                this.vlog('');
+                const entryJs = 'dist/src/App.js';
+                const entryJsPath = node_path_1.default.join(backendPath, entryJs);
+                if (!(await fs_extra_1.default.pathExists(entryJsPath))) {
+                    this.error('Compiled backend not found at: ' +
+                        entryJsPath +
+                        '\n\n' +
+                        'Please ensure the backend was compiled successfully.');
+                }
+                (0, node_child_process_1.execSync)(`node ${entryJs}`, {
                     stdio: 'inherit',
-                    cwd: process.cwd(),
+                    cwd: backendPath,
+                    env,
                 });
             }
-            catch (nodeError) {
-                this.error(`Failed to start application: ${nodeError.message}`);
+            catch (error) {
+                // If it's Ctrl+C, exit gracefully
+                if (error.signal === 'SIGINT') {
+                    this.log('\n👋 Application stopped gracefully');
+                    process.exit(0);
+                }
+                this.error(`Failed to start application: ${error.message}`);
+            }
+        }
+        else {
+            // Development mode: use ts-node src/App.ts or npm run dev
+            try {
+                this.vlog('');
+                const devCmd = 'npx ts-node src/App.ts';
+                this.vlog(`Running: ${devCmd} (cwd: ${backendPath})`);
+                (0, node_child_process_1.execSync)(devCmd, {
+                    stdio: 'inherit',
+                    cwd: backendPath,
+                    env,
+                });
+            }
+            catch (error) {
+                // If it's Ctrl+C, exit gracefully
+                if (error.signal === 'SIGINT') {
+                    this.log('\n👋 Application stopped gracefully');
+                    process.exit(0);
+                }
+                // In dev mode, fail if startup fails - don't fall back to production
+                this.error(`Failed to start application in development mode: ${error.message}`);
             }
         }
     }