@symbo.ls/mcp-server 3.6.7 → 3.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/mcp-server",
-  "version": "3.6.7",
+  "version": "3.6.8",
   "description": "HTTP proxy for the Symbols MCP server — runs as a Cloudflare Worker",
   "type": "module",
   "main": "index.js",

package/src/mcp-handler.js

@@ -15,10 +15,70 @@ function readSkill(filename) {
   return skills[filename] || `Skill '${filename}' not found`;
 }
 
+function readSkills(...filenames) {
+  return filenames
+    .map((f) => skills[f])
+    .filter(Boolean)
+    .join('\n\n---\n\n');
+}
+
 function listSkillFiles() {
   return Object.keys(skills);
 }
 
+// ---------------------------------------------------------------------------
+// Audit helpers (deterministic rule checking)
+// ---------------------------------------------------------------------------
+
+const V2_PATTERNS = [
+  [/\bextend\s*:/g, "v2 syntax: use 'extends' (plural) instead of 'extend'"],
+  [/\bchildExtend\s*:/g, "v2 syntax: use 'childExtends' (plural) instead of 'childExtend'"],
+  [/\bon\s*:\s*\{/g, 'v2 syntax: flatten event handlers with onX prefix (e.g. onClick) instead of on: {} wrapper'],
+  [/\bprops\s*:\s*\{(?!\s*\})/g, 'v2 syntax: flatten props directly on the component instead of props: {} wrapper'],
+];
+
+const RULE_CHECKS = [
+  [/\bimport\s+.*\bfrom\s+['"]\.\//, 'FORBIDDEN: No imports between project files — reference components by PascalCase key name'],
+  [/\bexport\s+default\s+\{/, 'Components should use named exports (export const Name = {}), not default exports'],
+  [/\bfunction\s+\w+\s*\(.*\)\s*\{[\s\S]*?return\s*\{/, 'Components must be plain objects, not functions that return objects'],
+  [/(?:padding|margin|gap|width|height)\s*:\s*['"]?\d+px/, 'Use design tokens (A, B, C) instead of hardcoded pixel values'],
+];
+
+function auditCode(code) {
+  const violations = [];
+  const warnings = [];
+
+  for (const [pattern, message] of V2_PATTERNS) {
+    const regex = new RegExp(pattern.source, pattern.flags);
+    let match;
+    while ((match = regex.exec(code)) !== null) {
+      const line = code.slice(0, match.index).split('\n').length;
+      violations.push({ line, severity: 'error', message });
+    }
+  }
+
+  for (const [pattern, message] of RULE_CHECKS) {
+    const regex = new RegExp(pattern.source, pattern.flags);
+    let match;
+    while ((match = regex.exec(code)) !== null) {
+      const line = code.slice(0, match.index).split('\n').length;
+      const level = message.includes('FORBIDDEN') ? 'error' : 'warning';
+      (level === 'error' ? violations : warnings).push({ line, severity: level, message });
+    }
+  }
+
+  const totalIssues = violations.length + warnings.length;
+  const score = Math.max(1, 10 - totalIssues);
+
+  return {
+    passed: violations.length === 0,
+    score,
+    violations,
+    warnings,
+    summary: `${violations.length} errors, ${warnings.length} warnings — compliance score: ${score}/10`,
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Tools
 // ---------------------------------------------------------------------------
@@ -49,6 +109,91 @@ const TOOLS = [
       required: ['query'],
     },
   },
+  {
+    name: 'generate_component',
+    description:
+      'Generate a Symbols.app DOMQL v3 component from a description. Returns rules, syntax, component catalog, cookbook examples, and default library reference as context.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        description: {
+          type: 'string',
+          description: 'What the component should do and look like',
+        },
+        component_name: {
+          type: 'string',
+          description: 'PascalCase name for the component',
+          default: 'MyComponent',
+        },
+      },
+      required: ['description'],
+    },
+  },
+  {
+    name: 'generate_page',
+    description:
+      'Generate a Symbols.app page with routing integration. Returns rules, project structure, patterns, snippets, and default library reference as context.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        description: {
+          type: 'string',
+          description: 'What the page should contain and do',
+        },
+        page_name: {
+          type: 'string',
+          description: 'camelCase name for the page',
+          default: 'home',
+        },
+      },
+      required: ['description'],
+    },
+  },
+  {
+    name: 'convert_react',
+    description:
+      'Convert React/JSX code to Symbols.app DOMQL v3. Returns migration rules, syntax reference, and examples as context.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        source_code: {
+          type: 'string',
+          description: 'The React/JSX source code to convert',
+        },
+      },
+      required: ['source_code'],
+    },
+  },
+  {
+    name: 'convert_html',
+    description:
+      'Convert raw HTML/CSS to Symbols.app DOMQL v3 components. Returns component catalog, syntax reference, and design tokens as context.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        source_code: {
+          type: 'string',
+          description: 'The HTML/CSS source code to convert',
+        },
+      },
+      required: ['source_code'],
+    },
+  },
+  {
+    name: 'audit_component',
+    description:
+      'Audit a Symbols/DOMQL component for v3 compliance and best practices. Returns a structured report with violations, warnings, and compliance score.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        component_code: {
+          type: 'string',
+          description: 'The JavaScript component code to audit',
+        },
+      },
+      required: ['component_code'],
+    },
+  },
 ];
 
 function callTool(name, args = {}) {
@@ -89,6 +234,59 @@ function callTool(name, args = {}) {
       : `No results found for '${query}'. Try a different search term.`;
   }
 
+  if (name === 'generate_component') {
+    const desc = args.description || '';
+    const compName = args.component_name || 'MyComponent';
+    const context = readSkills('RULES.md', 'COMPONENTS.md', 'SYNTAX.md', 'COOKBOOK.md', 'DEFAULT_LIBRARY.md');
+    return `# Generate Component: ${compName}\n\n## Description\n${desc}\n\n## Requirements\n- Named export: \`export const ${compName} = { ... }\`\n- DOMQL v3 syntax only (extends, childExtends, flattened props, onX events)\n- Use design tokens for spacing (A, B, C), colors from theme\n- NO imports between files — PascalCase keys auto-extend registered components\n- Include responsive breakpoints where appropriate (@tabletS, @mobileL)\n- Use the default library components (Button, Avatar, Icon, Field, etc.) via extends\n- Follow modern UI/UX: visual hierarchy, confident typography, minimal cognitive load\n\n## Context — Rules, Syntax & Examples\n\n${context}`;
+  }
+
+  if (name === 'generate_page') {
+    const desc = args.description || '';
+    const pageName = args.page_name || 'home';
+    const context = readSkills('RULES.md', 'PROJECT_STRUCTURE.md', 'PATTERNS.md', 'SNIPPETS.md', 'DEFAULT_LIBRARY.md', 'COMPONENTS.md');
+    return `# Generate Page: ${pageName}\n\n## Description\n${desc}\n\n## Requirements\n- Export as: \`export const ${pageName} = { ... }\`\n- Page is a plain object composing components\n- Add to pages/index.js route map: \`'/${pageName}': ${pageName}\`\n- Use components by PascalCase key (Header, Footer, Hero, etc.)\n- Use design tokens — no hardcoded pixels\n- Include responsive layout adjustments\n\n## Context — Rules, Structure, Patterns & Snippets\n\n${context}`;
+  }
+
+  if (name === 'convert_react') {
+    const source = args.source_code || '';
+    const context = readSkills('RULES.md', 'MIGRATION.md', 'SYNTAX.md', 'COMPONENTS.md', 'LEARNINGS.md');
+    return `# Convert React → Symbols DOMQL v3\n\n## Source Code to Convert\n\`\`\`jsx\n${source}\n\`\`\`\n\n## Conversion Rules\n- Function/class components → plain object exports\n- JSX → nested object children (PascalCase keys auto-extend)\n- import/export between files → REMOVE (reference by key name)\n- useState → state: { key: val } + s.update({ key: newVal })\n- useEffect → onRender (mount), onStateUpdate (deps)\n- props → flattened directly on component (no props wrapper)\n- onClick={handler} → onClick: (event, el, state) => {}\n- className → use design tokens and theme directly\n- map() → children: (el, s) => s.items, childExtends, childProps\n- conditional rendering → if: (el, s) => boolean\n- CSS modules/styled → CSS-in-props with design tokens\n- React.Fragment → not needed, just nest children\n\n## Context — Migration Guide, Syntax & Rules\n\n${context}`;
+  }
+
+  if (name === 'convert_html') {
+    const source = args.source_code || '';
+    const context = readSkills('RULES.md', 'SYNTAX.md', 'COMPONENTS.md', 'DESIGN_SYSTEM.md', 'SNIPPETS.md', 'LEARNINGS.md');
+    return `# Convert HTML → Symbols DOMQL v3\n\n## Source Code to Convert\n\`\`\`html\n${source}\n\`\`\`\n\n## Conversion Rules\n- <div> → Box, Flex, or Grid (based on layout purpose)\n- <span>, <p>, <h1>-<h6> → Text, P, H with tag property\n- <a> → Link (has built-in SPA router)\n- <button> → Button (has icon/text support)\n- <input> → Input, Radio, Checkbox (based on type)\n- <img> → Img\n- <form> → Form (extends Box with tag: 'form')\n- <ul>/<ol> + <li> → children array with childExtends\n- CSS classes → flatten as CSS-in-props on the component\n- CSS px values → design tokens (16px → 'A', 26px → 'B', 42px → 'C')\n- CSS colors → theme color tokens\n- media queries → @tabletS, @mobileL, @screenS breakpoints\n- id/class attributes → not needed (use key names and themes)\n- inline styles → flatten as component properties\n- <style> blocks → distribute to component-level properties\n\n## Context — Syntax, Components & Design System\n\n${context}`;
+  }
+
+  if (name === 'audit_component') {
+    const code = args.component_code || '';
+    const result = auditCode(code);
+    const rulesContext = readSkill('AUDIT.md');
+
+    let output = `# Audit Report\n\n## Summary\n${result.summary}\nPassed: ${result.passed ? 'Yes' : 'No'}\n\n## Violations (Errors)\n`;
+    if (result.violations.length) {
+      for (const v of result.violations) {
+        output += `- **Line ${v.line}**: ${v.message}\n`;
+      }
+    } else {
+      output += 'No violations found.\n';
+    }
+
+    output += '\n## Warnings\n';
+    if (result.warnings.length) {
+      for (const w of result.warnings) {
+        output += `- **Line ${w.line}**: ${w.message}\n`;
+      }
+    } else {
+      output += 'No warnings.\n';
+    }
+
+    output += `\n## Detailed Rules Reference\n\n${rulesContext}`;
+    return output;
+  }
+
   throw new Error(`Unknown tool: ${name}`);
 }
 
@@ -108,6 +306,11 @@ const SKILL_RESOURCES = {
   'symbols://skills/audit': 'AUDIT.md',
   'symbols://skills/design-to-code': 'DESIGN_TO_CODE.md',
   'symbols://skills/seo-metadata': 'SEO-METADATA.md',
+  'symbols://skills/ssr-brender': 'SSR-BRENDER.md',
+  'symbols://skills/cookbook': 'COOKBOOK.md',
+  'symbols://skills/snippets': 'SNIPPETS.md',
+  'symbols://skills/default-library': 'DEFAULT_LIBRARY.md',
+  'symbols://skills/learnings': 'LEARNINGS.md',
 };
 
 function listResources() {
@@ -162,13 +365,23 @@ const PROMPTS = [
     description: 'Prompt template for reviewing Symbols/DOMQL code.',
     arguments: [],
   },
+  {
+    name: 'symbols_convert_html_prompt',
+    description: 'Prompt template for converting HTML to Symbols.app components.',
+    arguments: [],
+  },
+  {
+    name: 'symbols_design_review_prompt',
+    description: 'Prompt template for visual/design audit against the design system.',
+    arguments: [],
+  },
 ];
 
 // ---------------------------------------------------------------------------
 // MCP JSON-RPC handler
 // ---------------------------------------------------------------------------
 
-const SERVER_INFO = { name: 'Symbols MCP', version: '1.0.10' };
+const SERVER_INFO = { name: 'Symbols MCP', version: '1.1.0' };
 
 export function handleJsonRpc(req) {
   const { method, params, id } = req;

package/src/worker-handler.js

@@ -21,7 +21,8 @@ import {
 const CORS_HEADERS = {
   'Access-Control-Allow-Origin': '*',
   'Access-Control-Allow-Methods': 'GET, POST, DELETE, OPTIONS',
-  'Access-Control-Allow-Headers': 'Content-Type, Accept, Authorization, Mcp-Session-Id, MCP-Protocol-Version',
+  'Access-Control-Allow-Headers':
+    'Content-Type, Accept, Authorization, Mcp-Session-Id, MCP-Protocol-Version',
   'Access-Control-Expose-Headers': 'Mcp-Session-Id',
 };
 
@@ -56,7 +57,7 @@ function sseResponse(data, extraHeaders = {}) {
 function generateSessionId() {
   const bytes = new Uint8Array(16);
   crypto.getRandomValues(bytes);
-  return Array.from(bytes, b => b.toString(16).padStart(2, '0')).join('');
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
 }
 
 function isNotificationOrResponse(msg) {