yap2app 1.1.0 → 1.1.2

package/bridge.js

@@ -1,11 +1,17 @@
-#!/usr/bin/env node
-
 import http from 'http';
-import fs from 'fs/promises';
 import fsSync from 'fs';
 import path from 'path';
+import util from 'util';
 import { scanCodebase } from './scanner.js';
 
+const fs = fsSync.promises || {
+  readdir: util.promisify(fsSync.readdir),
+  readFile: util.promisify(fsSync.readFile),
+  writeFile: util.promisify(fsSync.writeFile),
+  mkdir: util.promisify(fsSync.mkdir),
+  stat: util.promisify(fsSync.stat)
+};
+
 const PORT = process.env.YAP2APP_PORT || 10420;
 const PROJECT_ROOT = process.cwd();
 
@@ -91,11 +97,13 @@ const server = http.createServer(async (req, res) => {
     return;
   }
 
-  // 3. GET /api/context (Shallow Codebase Scanner)
-  if (req.method === 'GET' && req.url === '/api/context') {
+  // 3. GET /api/context (Shallow Codebase Scanner with Optional Prompt Query)
+  if (req.method === 'GET' && req.url.startsWith('/api/context')) {
     try {
-      console.log(`[Yap2App Bridge] 🔍 Scanning shallow codebase context in: ${PROJECT_ROOT}`);
-      const context = await scanCodebase(PROJECT_ROOT);
+      const parsedUrl = new URL(req.url, `http://${req.headers.host || 'localhost'}`);
+      const promptQuery = parsedUrl.searchParams.get('q') || '';
+      console.log(`[Yap2App Bridge] 🔍 Scanning shallow codebase context in: ${PROJECT_ROOT}${promptQuery ? ` (ranking for query: "${promptQuery}")` : ''}`);
+      const context = await scanCodebase(PROJECT_ROOT, promptQuery);
       res.writeHead(200, headers);
       res.end(JSON.stringify(context));
     } catch (e) {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "yap2app",
-  "version": "1.1.0",
-  "description": "Autonomous Vibe-to-Prod Localhost Bridge & Model Context Protocol (MCP) Server",
-  "main": "bridge.js",
+  "version": "1.1.2",
   "type": "module",
+  "description": "Autonomous Vibe-to-Prod Localhost Bridge & Model Context Protocol (MCP) Server",
+  "main": "bin/cli.bundle.js",
   "bin": {
     "yap2app": "./bin/cli.js"
   },

package/scanner.js

@@ -1,6 +1,14 @@
-import fs from 'fs/promises';
 import fsSync from 'fs';
 import path from 'path';
+import util from 'util';
+
+const fs = fsSync.promises || {
+  readdir: util.promisify(fsSync.readdir),
+  readFile: util.promisify(fsSync.readFile),
+  writeFile: util.promisify(fsSync.writeFile),
+  mkdir: util.promisify(fsSync.mkdir),
+  stat: util.promisify(fsSync.stat)
+};
 
 const IGNORED_DIRS = new Set([
   'node_modules',
@@ -28,18 +36,32 @@ async function walkDir(dir, baseDir, maxDepth = 6, currentDepth = 0) {
   if (currentDepth > maxDepth) return [];
   let results = [];
   try {
-    const entries = await fs.readdir(dir, { withFileTypes: true });
-    for (const entry of entries) {
-      const fullPath = path.join(dir, entry.name);
+    const rawEntries = await fs.readdir(dir);
+    for (const rawEntry of rawEntries) {
+      const entryName = typeof rawEntry === 'string' ? rawEntry : rawEntry.name;
+      const fullPath = path.join(dir, entryName);
       const relativePath = path.relative(baseDir, fullPath);
 
-      if (entry.isDirectory()) {
-        if (!IGNORED_DIRS.has(entry.name) && !entry.name.startsWith('.')) {
+      let isDir = false;
+      let isFile = false;
+      if (typeof rawEntry === 'object' && rawEntry.isDirectory && rawEntry.isFile) {
+        isDir = rawEntry.isDirectory();
+        isFile = rawEntry.isFile();
+      } else {
+        try {
+          const st = fsSync.statSync(fullPath);
+          isDir = st.isDirectory();
+          isFile = st.isFile();
+        } catch {}
+      }
+
+      if (isDir) {
+        if (!IGNORED_DIRS.has(entryName) && !entryName.startsWith('.')) {
           const sub = await walkDir(fullPath, baseDir, maxDepth, currentDepth + 1);
           results = results.concat(sub);
         }
-      } else if (entry.isFile()) {
-        const ext = path.extname(entry.name).toLowerCase();
+      } else if (isFile) {
+        const ext = path.extname(entryName).toLowerCase();
         if ([
           '.js', '.jsx', '.ts', '.tsx', '.vue', '.svelte', '.hbs', '.handlebars',
           '.html', '.css', '.scss', '.sass', '.less', '.vm', '.ftl', '.jsp', '.php',
@@ -49,7 +71,7 @@ async function walkDir(dir, baseDir, maxDepth = 6, currentDepth = 0) {
         ].includes(ext)) {
           results.push({
             relative: relativePath,
-            name: entry.name,
+            name: entryName,
             ext,
             dir: path.relative(baseDir, dir)
           });
@@ -84,11 +106,33 @@ function parsePackageJson(content) {
  * Returns null if no verified signature matches with high confidence.
  */
 function detectVerifiedFramework(manifests, allFiles, extensionHistogram) {
-  // 1. Google Brightspot / Glue-Bundle
-  if (manifests['louhi.json'] || manifests['_fields.config.json'] || (manifests['package.json'] && manifests['package.json'].includes('google-marketing-bundle-glue'))) {
+  // 1. Google Brightspot CMS / Glue-Bundle / Handlebars Frontend
+  const hasHbsFiles = (extensionHistogram['.hbs'] || 0) > 0 || (extensionHistogram['.handlebars'] || 0) > 0;
+  const hasBrightspotConfigs = allFiles.some(f => 
+    f.name === 'louhi.json' || 
+    f.name === '_fields.config.json' || 
+    f.name === '_data.json' ||
+    f.name === 'brightspot.json' ||
+    f.name.includes('_config.json') ||
+    f.relative.includes('styleguide/') ||
+    f.relative.includes('brightspot')
+  );
+  const hasBrightspotManifest = manifests['louhi.json'] || 
+                               manifests['_fields.config.json'] || 
+                               (manifests['package.json'] && (
+                                 manifests['package.json'].includes('google-marketing-bundle-glue') ||
+                                 manifests['package.json'].includes('brightspot') ||
+                                 manifests['package.json'].includes('handlebars')
+                               )) ||
+                               (manifests['pom.xml'] && (
+                                 manifests['pom.xml'].includes('brightspot') ||
+                                 manifests['pom.xml'].includes('psddev')
+                               ));
+
+  if (hasHbsFiles || hasBrightspotConfigs || hasBrightspotManifest) {
     return {
       framework: 'brightspot_glue',
-      displayName: 'Google Brightspot CMS / Glue-Bundle'
+      displayName: 'Google Brightspot CMS / Handlebars'
     };
   }
 
@@ -116,28 +160,36 @@ function detectVerifiedFramework(manifests, allFiles, extensionHistogram) {
     return { framework: 'angular', displayName: 'Angular Project' };
   }
 
-  // 4. Python Ecosystem
+  // 4. Standalone UI file distribution inspection
+  const htmlCount = extensionHistogram['.html'] || 0;
+  const scssCount = (extensionHistogram['.scss'] || 0) + (extensionHistogram['.css'] || 0);
+  const jsCount = (extensionHistogram['.js'] || 0) + (extensionHistogram['.ts'] || 0);
+
+  // 5. Python Ecosystem (Only if no primary UI files found)
   if (manifests['requirements.txt'] || manifests['pyproject.toml']) {
     const pyReqs = (manifests['requirements.txt'] || '') + (manifests['pyproject.toml'] || '');
     if (/django/i.test(pyReqs)) return { framework: 'django', displayName: 'Django' };
-    if (/fastapi/i.test(pyReqs)) return { framework: 'fastapi', displayName: 'FastAPI' };
-    if (/flask/i.test(pyReqs)) return { framework: 'flask', displayName: 'Flask' };
+    if (/fastapi/i.test(pyReqs) && htmlCount === 0 && scssCount === 0) return { framework: 'fastapi', displayName: 'FastAPI' };
+    if (/flask/i.test(pyReqs) && htmlCount === 0 && scssCount === 0) return { framework: 'flask', displayName: 'Flask' };
   }
 
-  // 5. PHP Ecosystem
+  // 6. PHP Ecosystem
   if (manifests['composer.json']) {
     if (manifests['composer.json'].includes('laravel/framework')) return { framework: 'laravel', displayName: 'Laravel' };
     if (manifests['composer.json'].includes('symfony/')) return { framework: 'symfony', displayName: 'Symfony' };
   }
 
-  // 6. Java Ecosystem
+  // 7. Java Ecosystem
   if (manifests['pom.xml'] || manifests['build.gradle']) {
     const jContent = (manifests['pom.xml'] || '') + (manifests['build.gradle'] || '');
     if (jContent.includes('spring-boot')) return { framework: 'spring_boot', displayName: 'Spring Boot' };
   }
 
-  // If not 100% verified, return null (do NOT guess or display inaccurate tags)
-  return null;
+  // Fallback to Plain HTML / CSS / JS for standard web projects
+  return {
+    framework: 'plain_html_css_js',
+    displayName: 'Plain HTML / CSS / JS'
+  };
 }
 
 /**
@@ -243,6 +295,119 @@ async function extractUtilitiesAndIcons(projectRoot, allFiles, manifests) {
   return uiEcosystem;
 }
 
+/**
+ * Deep Design System & SCSS Mixins Extraction.
+ * Detects whether the workspace uses Google Glue, Tailwind CSS, Bootstrap, or custom SCSS mixins,
+ * and catalogs reusable project mixins, import paths, and class conventions.
+ */
+async function extractDesignSystemAndMixins(projectRoot, allFiles, manifests) {
+  const designSystem = {
+    name: 'custom_bem',
+    display_name: 'Custom BEM / SCSS',
+    is_glue: false,
+    is_tailwind: false,
+    is_bootstrap: false,
+    class_prefix: '',
+    mixins_available: [],
+    import_paths: [],
+    guidelines: []
+  };
+
+  // 1. Detect Google Glue Design System
+  const hasGluePackage = Boolean(
+    manifests['package.json'] && (
+      manifests['package.json'].includes('@google/glue') ||
+      manifests['package.json'].includes('google-marketing-bundle-glue') ||
+      manifests['package.json'].includes('glue')
+    )
+  );
+  const hasGlueFiles = allFiles.some(f =>
+    f.name.toLowerCase().includes('glue') ||
+    f.relative.toLowerCase().includes('glue/')
+  );
+
+  // Check code samples/style files for glue references
+  let hasGlueClasses = false;
+  const styleAndTemplateFiles = allFiles.filter(f =>
+    ['.scss', '.css', '.hbs', '.handlebars', '.html'].includes(f.ext)
+  ).slice(0, 25);
+
+  for (const f of styleAndTemplateFiles) {
+    try {
+      const fullP = path.join(projectRoot, f.relative);
+      const content = await fs.readFile(fullP, 'utf8');
+      if (content.includes('glue-') || content.includes('@include glue-') || content.includes('@import "glue') || content.includes("@import 'glue")) {
+        hasGlueClasses = true;
+        break;
+      }
+    } catch {}
+  }
+
+  if (hasGluePackage || hasGlueFiles || hasGlueClasses) {
+    designSystem.name = 'google_glue';
+    designSystem.display_name = 'Google Glue Web Design System';
+    designSystem.is_glue = true;
+    designSystem.class_prefix = 'glue-';
+    designSystem.guidelines = [
+      'MUST use official Google Glue HTML classes: glue-headline (glue-headline--1, glue-headline--2, glue-headline--3), glue-button (glue-button--primary, glue-button--secondary), glue-card (glue-card--elevated), glue-grid, glue-mod-elevated, glue-mod-color-primary, glue-eyebrow, glue-body.',
+      'In SCSS, MUST @import existing Glue stylesheets and use Glue mixins (@include glue-typography(...), @include glue-elevation(...), @include glue-button(...)) instead of creating redundant custom mixins, custom classes, or ad-hoc variables.',
+      'Maintain strict Google Glue design system alignment and BEM modifier syntax.'
+    ];
+  } else if (
+    (manifests['package.json'] && manifests['package.json'].includes('tailwindcss')) ||
+    allFiles.some(f => f.name.startsWith('tailwind.config'))
+  ) {
+    designSystem.name = 'tailwind';
+    designSystem.display_name = 'Tailwind CSS';
+    designSystem.is_tailwind = true;
+    designSystem.guidelines = [
+      'Use standard Tailwind utility classes directly on HTML elements.',
+      'Avoid custom ad-hoc CSS rules when standard Tailwind classes can be used.'
+    ];
+  } else if (
+    (manifests['package.json'] && manifests['package.json'].includes('bootstrap')) ||
+    allFiles.some(f => f.name.includes('bootstrap'))
+  ) {
+    designSystem.name = 'bootstrap';
+    designSystem.display_name = 'Bootstrap';
+    designSystem.is_bootstrap = true;
+    designSystem.guidelines = [
+      'Use Bootstrap utility classes and components (container, row, col, btn, card, etc.).'
+    ];
+  }
+
+  // 2. Scan SCSS Files for Available Mixins, Functions, and Import Paths
+  const scssFiles = allFiles.filter(f => f.ext === '.scss').slice(0, 35);
+  for (const sf of scssFiles) {
+    try {
+      const fullP = path.join(projectRoot, sf.relative);
+      const content = await fs.readFile(fullP, 'utf8');
+
+      // Extract @mixin declarations
+      const mixinMatches = content.matchAll(/@mixin\s+([a-zA-Z0-9_-]+)\s*(\([^)]*\))?/g);
+      for (const m of mixinMatches) {
+        if (designSystem.mixins_available.length < 35) {
+          designSystem.mixins_available.push({
+            name: m[1],
+            signature: m[0].trim(),
+            file: sf.relative
+          });
+        }
+      }
+
+      // If this file contains mixins or variables, record as reusable import path
+      if (sf.name.startsWith('_') || sf.relative.includes('mixin') || sf.relative.includes('variable') || sf.relative.includes('theme') || sf.relative.includes('styleguide') || sf.relative.includes('glue')) {
+        const importPath = sf.relative.replace(/\.scss$/, '').replace(/^_/, '');
+        if (!designSystem.import_paths.includes(importPath) && designSystem.import_paths.length < 20) {
+          designSystem.import_paths.push(importPath);
+        }
+      }
+    } catch {}
+  }
+
+  return designSystem;
+}
+
 /**
  * Extracts reusable UI components with their export signatures and interface snippets.
  */
@@ -316,13 +481,100 @@ function extractPathAliases(manifests) {
       }
     } catch {}
   }
-  return '@/;';
+  return '@/';
+}
+
+/**
+ * Deterministic Routing Topology Detection.
+ * Categorizes the project architecture into known routing paradigms.
+ */
+function detectRoutingTopology(projectRoot, allFiles, manifests) {
+  // 1. Brightspot CMS / Glue-Bundle
+  const isBrightspot = allFiles.some(f =>
+    f.name === 'louhi.json' ||
+    f.name === '_fields.config.json' ||
+    f.name === 'brightspot.json' ||
+    f.relative.includes('styleguide/') ||
+    f.relative.includes('brightspot')
+  ) || Boolean(manifests['louhi.json'] || manifests['_fields.config.json']);
+
+  if (isBrightspot) {
+    return 'brightspot-glue';
+  }
+
+  // 2. Next.js App Router (src/app or app/)
+  const hasAppRouter = allFiles.some(f =>
+    (f.relative.startsWith('app/') || f.relative.startsWith('src/app/')) &&
+    (f.name.startsWith('page.') || f.name.startsWith('layout.') || f.name.startsWith('route.'))
+  );
+  if (hasAppRouter) {
+    return 'nextjs-app-router';
+  }
+
+  // 3. Next.js Pages Router (src/pages or pages/)
+  const hasPagesRouter = allFiles.some(f =>
+    (f.relative.startsWith('pages/') || f.relative.startsWith('src/pages/')) &&
+    (f.name.startsWith('_app.') || f.name.startsWith('_document.') || f.name.startsWith('index.'))
+  );
+  if (hasPagesRouter) {
+    return 'nextjs-pages-router';
+  }
+
+  // 4. Default Single Page Application / Static Architecture
+  return 'standard-spa';
+}
+
+/**
+ * Prompt-Aware Lexical Ranking of Reusable Components.
+ * Ranks components by semantic/lexical overlap with a given prompt or keywords,
+ * returning the top 15 most relevant components.
+ */
+export function rankComponentsByRelevance(components = [], prompt = '') {
+  if (!prompt || typeof prompt !== 'string' || !prompt.trim()) {
+    return components.slice(0, 15);
+  }
+
+  // Extract alphanumeric tokens from prompt (lowercased, min length 2)
+  const promptTokens = prompt
+    .toLowerCase()
+    .replace(/[^a-z0-9\s]/g, ' ')
+    .split(/\s+/)
+    .filter(t => t.length >= 2);
+
+  if (promptTokens.length === 0) {
+    return components.slice(0, 15);
+  }
+
+  const scored = components.map(comp => {
+    const compName = (typeof comp === 'string' ? comp : comp.name || comp.path || '').toLowerCase();
+    const compPath = (typeof comp === 'object' && comp.path ? comp.path : '').toLowerCase();
+    const compSig = (typeof comp === 'object' && comp.signature ? comp.signature : '').toLowerCase();
+    const compProps = (typeof comp === 'object' && comp.props ? comp.props : '').toLowerCase();
+
+    const targetText = `${compName} ${compPath} ${compSig} ${compProps}`;
+    let score = 0;
+
+    for (const token of promptTokens) {
+      if (compName.includes(token)) score += 10;
+      if (compPath.includes(token)) score += 5;
+      if (compSig.includes(token)) score += 3;
+      if (compProps.includes(token)) score += 2;
+      if (targetText.includes(token)) score += 1;
+    }
+
+    return { comp, score };
+  });
+
+  // Sort descending by score, maintaining original order on ties
+  scored.sort((a, b) => b.score - a.score);
+
+  return scored.slice(0, 15).map(item => item.comp);
 }
 
 /**
  * AI-Driven Universal Codebase Analyzer for Yap2App.
  */
-export async function scanCodebase(targetDir = process.cwd()) {
+export async function scanCodebase(targetDir = process.cwd(), promptQuery = '') {
   const projectRoot = path.resolve(targetDir);
   const projectName = path.basename(projectRoot) || 'local-project';
 
@@ -375,8 +627,9 @@ export async function scanCodebase(targetDir = process.cwd()) {
     } catch (e) {}
   }
 
-  // 5. Deep Catalog of Component Signatures & Primitives
-  const componentSignatures = await extractComponentSignatures(projectRoot, allFiles);
+  // 5. Deep Catalog of Component Signatures & Primitives (Ranked to top 15)
+  const rawComponentSignatures = await extractComponentSignatures(projectRoot, allFiles);
+  const componentSignatures = rankComponentsByRelevance(rawComponentSignatures, promptQuery);
   const componentNames = componentSignatures.map(c => c.name);
   const realComponents = componentSignatures.map(c => c.path);
 
@@ -386,15 +639,22 @@ export async function scanCodebase(targetDir = process.cwd()) {
   // 7. Extract UI Library Ecosystem & Helpers
   const uiEcosystem = await extractUtilitiesAndIcons(projectRoot, allFiles, manifestsFound);
 
-  // 8. Deterministic Framework Detection (Strict Verification)
+  // 8. Extract Deep Design System & Reusable SCSS Mixins
+  const designSystem = await extractDesignSystemAndMixins(projectRoot, allFiles, manifestsFound);
+  uiEcosystem.design_system = designSystem;
+
+  // 9. Deterministic Framework Detection (Strict Verification)
   const verified = detectVerifiedFramework(manifestsFound, allFiles, extensionHistogram);
   const inferredFramework = verified ? verified.framework : null;
   const frameworkDisplayName = verified ? verified.displayName : null;
 
-  // 9. Path Aliases
+  // 10. Detect Routing Topology
+  const routingTopology = detectRoutingTopology(projectRoot, allFiles, manifestsFound);
+
+  // 11. Path Aliases
   const pathAlias = extractPathAliases(manifestsFound);
 
-  // 10. Extract Routes & Pages
+  // 12. Extract Routes & Pages
   const routesDiscovered = allFiles
     .filter(f => f.relative.includes('pages/') || f.relative.includes('app/') || f.name.startsWith('page.'))
     .map(f => f.relative)
@@ -405,12 +665,14 @@ export async function scanCodebase(targetDir = process.cwd()) {
     project_root: projectRoot,
     framework: inferredFramework,
     framework_display_name: frameworkDisplayName,
+    routing_topology: routingTopology,
     extension_histogram: extensionHistogram,
     manifests: manifestsFound,
     codebase_samples: codeSamples,
     existing_components: realComponents,
     component_signatures: componentSignatures,
     component_names: componentNames,
+    design_system: designSystem,
     ui_ecosystem: uiEcosystem,
     routes_discovered: routesDiscovered,
     discovered_files: discoveredFiles.slice(0, 80),