@hailer/mcp 1.1.12 → 1.1.13

package/.claude/hooks/design-system-lint.cjs

@@ -1,271 +0,0 @@
-#!/usr/bin/env node
-/**
- * <hook-name>design-system-lint</hook-name>
- *
- * <purpose>
- * Warns if app code doesn't follow Hailer Design System patterns.
- * Runs after Giuseppe writes/edits files in app directories.
- * </purpose>
- *
- * <triggers>
- * - PostToolUse on Write and Edit
- * - Only for files in apps/ or containing Chakra imports
- * </triggers>
- *
- * <checks>
- * - Hardcoded colors (hex, rgb, hsl)
- * - External icon libraries (react-icons, heroicons, etc.)
- * - Plain HTML table elements instead of Chakra Table
- * - Missing theme import when using ChakraProvider
- * </checks>
- *
- * <behavior>
- * 1. Check if file is in app directory or has Chakra imports
- * 2. Scan content for violations
- * 3. Output warnings to stderr (non-blocking)
- * </behavior>
- */
-
-const fs = require('fs');
-const path = require('path');
-
-// Read hook input from stdin
-let input = '';
-process.stdin.setEncoding('utf8');
-process.stdin.on('data', chunk => input += chunk);
-process.stdin.on('end', () => {
-  try {
-    const data = JSON.parse(input);
-    processHook(data);
-  } catch (e) {
-    console.error(`[design-system-lint] Warning: ${e.message}`);
-    process.exit(0);
-  }
-});
-
-// Design system violation patterns
-const VIOLATIONS = [
-  {
-    name: 'hardcoded-hex-color',
-    pattern: /(?:color|bg|background|border|fill|stroke)[:=]\s*(?:["'`]#[0-9a-fA-F]{3,8}["'`]|\$\{[^}]*#[0-9a-fA-F]{3,8}[^}]*\})/g,
-    message: 'Hardcoded hex color found',
-    suggestion: 'Use Chakra color tokens (e.g., "gray.500", "green.400") or semantic tokens ("subtleText", "bodyText")'
-  },
-  {
-    name: 'hardcoded-rgb-color',
-    pattern: /(?:color|bg|background|border)[:=]\s*(?:["'`]rgba?\([^)]+\)["'`]|\$\{[^}]*rgba?\([^)]+\)[^}]*\})/g,
-    message: 'Hardcoded RGB/RGBA color found',
-    suggestion: 'Use Chakra color tokens instead'
-  },
-  {
-    name: 'external-icons',
-    pattern: /import\s+.*\s+from\s+["'](react-icons|@heroicons|@fortawesome|lucide-react|@tabler\/icons)/g,
-    message: 'External icon library imported',
-    suggestion: 'Use Hailer icons from design-system/theme/icons (e.g., HailerPlus, HailerSettings)'
-  },
-  {
-    name: 'plain-html-table',
-    pattern: /<(table|thead|tbody|tr|th|td)[\s>]/gi,
-    message: 'Plain HTML table elements found',
-    suggestion: 'Use Chakra UI Table components: <Table>, <Thead>, <Tbody>, <Tr>, <Th>, <Td>'
-  },
-  {
-    name: 'missing-theme-import',
-    pattern: /ChakraProvider/,
-    message: 'ChakraProvider without theme prop',
-    suggestion: 'Import and pass the Hailer theme: <ChakraProvider theme={theme}>'
-  },
-  {
-    name: 'inline-style',
-    pattern: /style\s*=\s*\{\s*\{[^}]*(?:color|background|border)[^}]*\}\s*\}/g,
-    message: 'Inline style with color/background',
-    suggestion: 'Use Chakra style props instead of inline styles'
-  },
-  {
-    name: 'wrong-stat-pattern',
-    pattern: /<Box[^>]*>[\s\S]*?<Text[^>]*fontSize=["']sm["'][^>]*>[\s\S]*?<\/Text>[\s\S]*?<(?:Heading|Text)[^>]*fontSize=["'](?:2xl|3xl|xl)["']/g,
-    message: 'Manual stat card pattern detected',
-    suggestion: 'Use Chakra Stat components: <Stat>, <StatLabel>, <StatNumber>, <StatHelpText>'
-  }
-];
-
-// Files/patterns to skip
-const SKIP_PATTERNS = [
-  /node_modules/,
-  /\.d\.ts$/,
-  /\.json$/,
-  /\.md$/,
-  /\.css$/,
-  /theme\.ts$/,  // Don't lint the theme file itself
-  /customColors\.ts$/
-];
-
-function shouldLintFile(filePath) {
-  // Skip certain files
-  for (const pattern of SKIP_PATTERNS) {
-    if (pattern.test(filePath)) {
-      return false;
-    }
-  }
-
-  // Check if it's in apps/ directory
-  if (filePath.includes('/apps/') || filePath.includes('\\apps\\')) {
-    return true;
-  }
-
-  // Check if it's a TypeScript/JavaScript file that might be an app
-  if (/\.(tsx?|jsx?)$/.test(filePath)) {
-    return true;
-  }
-
-  return false;
-}
-
-function lintContent(content, filePath) {
-  const warnings = [];
-
-  // Only lint if file has Chakra imports (indicates it's a UI file)
-  const hasChakraImport = content.includes('@chakra-ui/react') || content.includes('chakra-ui');
-  const isInApps = filePath.includes('/apps/') || filePath.includes('\\apps\\');
-
-  if (!hasChakraImport && !isInApps) {
-    return warnings;
-  }
-
-  // Single-pass scan: loop through violations once, check content for each pattern
-  // Performance: O(n*m) where n=violations, m=pattern matches. Acceptable for typical files (<50KB)
-  for (const violation of VIOLATIONS) {
-    const matches = content.match(violation.pattern);
-    if (matches) {
-      // Special handling for missing-theme-import
-      if (violation.name === 'missing-theme-import') {
-        // Only warn if ChakraProvider exists but no theme= prop nearby
-        if (content.includes('ChakraProvider') && !content.includes('theme={') && !content.includes('theme=')) {
-          warnings.push({
-            name: violation.name,
-            message: violation.message,
-            suggestion: violation.suggestion,
-            count: 1
-          });
-        }
-        continue;
-      }
-
-      warnings.push({
-        name: violation.name,
-        message: violation.message,
-        suggestion: violation.suggestion,
-        count: matches.length,
-        examples: matches.slice(0, 2).map(m => m.substring(0, 60))
-      });
-    }
-  }
-
-  return warnings;
-}
-
-function processHook(data) {
-  const { tool_name, tool_input, tool_response } = data;
-
-  // Only check Write and Edit tools on PostToolUse
-  if (tool_name !== 'Write' && tool_name !== 'Edit') {
-    process.exit(0);
-  }
-
-  // Need tool_response to confirm it's PostToolUse
-  if (tool_response === undefined) {
-    process.exit(0);
-  }
-
-  const filePath = tool_input?.file_path;
-  if (!filePath) {
-    process.exit(0);
-  }
-
-  // Check if we should lint this file
-  if (!shouldLintFile(filePath)) {
-    process.exit(0);
-  }
-
-  // Read the file content
-  let content;
-  try {
-    content = fs.readFileSync(filePath, 'utf8');
-  } catch (e) {
-    console.error(`[design-system-lint] Warning: ${e.message}`);
-    process.exit(0);
-  }
-
-  // Lint the content
-  const warnings = lintContent(content, filePath);
-
-  if (warnings.length > 0) {
-    const output = `
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-🎨 DESIGN SYSTEM LINT WARNINGS
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-File: ${path.basename(filePath)}
-
-${warnings.map(w => `
-⚠️  ${w.message}${w.count > 1 ? ` (${w.count} occurrences)` : ''}
-   → ${w.suggestion}
-${w.examples ? w.examples.map(e => `   Example: ${e}...`).join('\n') : ''}`).join('\n')}
-
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-📚 Reference: Load \`hailer-design-system\` skill for full guide
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-`;
-    console.error(output);
-  }
-
-  process.exit(0);
-}
-
-// CLI: Lint a specific file
-if (process.argv[2] && !process.argv[2].startsWith('-')) {
-  const filePath = path.resolve(process.argv[2]);
-
-  if (!fs.existsSync(filePath)) {
-    console.error(`File not found: ${filePath}`);
-    process.exit(1);
-  }
-
-  const content = fs.readFileSync(filePath, 'utf8');
-  const warnings = lintContent(content, filePath);
-
-  if (warnings.length === 0) {
-    console.log(`✅ No design system issues found in ${path.basename(filePath)}`);
-  } else {
-    console.log(`Found ${warnings.length} issue(s) in ${path.basename(filePath)}:\n`);
-    for (const w of warnings) {
-      console.log(`⚠️  ${w.message}${w.count > 1 ? ` (${w.count}x)` : ''}`);
-      console.log(`   → ${w.suggestion}\n`);
-    }
-  }
-  process.exit(0);
-}
-
-// CLI: Help
-if (process.argv[2] === '--help' || process.argv[2] === '-h') {
-  console.log(`
-Design System Lint - Checks app code for Hailer Design System compliance
-
-Usage:
-  node design-system-lint.cjs <file>    Lint a specific file
-  node design-system-lint.cjs --help    Show this help
-
-Checks for:
-  - Hardcoded colors (hex, rgb, rgba)
-  - External icon libraries
-  - Plain HTML table elements
-  - Missing theme in ChakraProvider
-  - Inline styles with colors
-  - Manual stat card patterns
-
-As a hook:
-  PostToolUse on Write/Edit
-  Outputs warnings to stderr (non-blocking)
-`);
-  process.exit(0);
-}

package/.claude/hooks/post-scaffold-hook.cjs

@@ -1,181 +0,0 @@
-#!/usr/bin/env node
-/**
- * <hook-name>post-scaffold-hook</hook-name>
- *
- * <purpose>
- * Prompts user to spawn builder agent after scaffold_hailer_app completes.
- * Registers new app with app-edit-guard for edit protection.
- * </purpose>
- *
- * <triggers>
- * - PostToolUse on mcp__hailer__scaffold_hailer_app
- * - Only when output contains "Setup Complete"
- * </triggers>
- *
- * <behavior>
- * 1. Detects successful scaffold completion
- * 2. Registers app in /tmp/.claude-scaffolded-apps/
- * 3. Outputs AskUserQuestion template for builder spawn decision
- * 4. Provides instructions for both "spawn builder" and "build manually" paths
- * </behavior>
- *
- * <user-choices>
- * - "Yes, spawn builder": Load spawn-app-builder skill, spawn giuseppe
- * - "No, build manually": Load building-hailer-apps-skill in current session
- * </user-choices>
- *
- * <tracker-dir>/tmp/.claude-scaffolded-apps/</tracker-dir>
- */
-
-const path = require('path');
-const fs = require('fs');
-const os = require('os');
-
-const TEMP_DIR = os.tmpdir();
-const TRACKER_DIR = path.join(TEMP_DIR, '.claude-scaffolded-apps');
-
-// Ensure tracker directory exists
-if (!fs.existsSync(TRACKER_DIR)) {
-  fs.mkdirSync(TRACKER_DIR, { recursive: true });
-}
-
-// Read hook input from stdin
-let input = '';
-process.stdin.setEncoding('utf8');
-process.stdin.on('data', chunk => input += chunk);
-process.stdin.on('end', () => {
-  try {
-    const data = JSON.parse(input);
-    processHook(data);
-  } catch {
-    // Invalid JSON, exit silently
-    process.exit(0);
-  }
-});
-
-function processHook(data) {
-  const { tool_name, tool_input, tool_output } = data;
-
-  // Only trigger for scaffold_hailer_app
-  if (tool_name !== 'mcp__hailer__scaffold_hailer_app') {
-    process.exit(0);
-  }
-
-  // Check if scaffold was successful (look for "Setup Complete" in output)
-  if (!tool_output || !tool_output.includes('Setup Complete')) {
-    process.exit(0);
-  }
-
-  // Extract project info from tool_input
-  const projectName = tool_input?.projectName || 'the app';
-  const description = tool_input?.description || 'Hailer data app';
-
-  // Try to determine project path
-  const cwd = process.env.CLAUDE_PROJECT_DIR || process.cwd();
-  const projectPath = tool_input?.targetDirectory
-    ? path.join(tool_input.targetDirectory, projectName)
-    : path.join(cwd, projectName);
-
-  // Register app with edit guard to block direct edits
-  registerScaffoldedApp(projectName, projectPath);
-
-  // Build the AskUserQuestion instruction
-  const output = `
-============================================================
-✅ App Scaffolded Successfully!
-============================================================
-
-**Project:** ${projectName}
-**Location:** ${projectPath}
-**Dev Server:** http://localhost:3000 (running)
-
-The app structure is ready. Now you need to build the actual components.
-
-----------------------------------------
-⚠️ MANDATORY: ASK THE USER
-----------------------------------------
-
-You MUST use AskUserQuestion with EXACTLY this format:
-
-\`\`\`json
-{
-  "questions": [
-    {
-      "question": "Would you like me to spawn a builder agent to create the app components?",
-      "header": "Build App",
-      "options": [
-        {
-          "label": "Yes, spawn builder",
-          "description": "Spawn isolated agent with TypeScript + SDK patterns"
-        },
-        {
-          "label": "No, I'll build manually",
-          "description": "Continue in current session"
-        }
-      ],
-      "multiSelect": false
-    }
-  ]
-}
-\`\`\`
-
-----------------------------------------
-IF USER SAYS YES: Follow these steps
-----------------------------------------
-
-0. Enable builder mode (required for Giuseppe to edit app files):
-   \`\`\`bash
-   node .claude/hooks/app-edit-guard.cjs --agent-on
-   \`\`\`
-
-1. Load the spawn-app-builder skill:
-   \`\`\`javascript
-   Skill("spawn-app-builder")
-   \`\`\`
-
-2. Get workflow context:
-   \`\`\`javascript
-   list_workflows_minimal()
-   \`\`\`
-
-3. Use the Task tool template from the skill with:
-   - PROJECT_PATH: ${projectPath}
-   - TASK_DESCRIPTION: ${description}
-   - WORKFLOWS_INFO: (from list_workflows_minimal)
-
-----------------------------------------
-IF USER SAYS NO: Load skills in current session
-----------------------------------------
-
-\`\`\`javascript
-Skill("building-hailer-apps-skill")
-Skill("hailer-app-builder")
-\`\`\`
-
-Then continue building in the current conversation.
-
-============================================================
-ASK THE USER NOW - Do not skip this question!
-============================================================
-`;
-
-  console.log(JSON.stringify({ decision: 'allow', message: output }));
-  process.exit(0);
-}
-
-/**
- * Register scaffolded app in tracker so app-edit-guard can block direct edits
- */
-function registerScaffoldedApp(name, appPath) {
-  try {
-    const trackerFile = path.join(TRACKER_DIR, `${name}.json`);
-    fs.writeFileSync(trackerFile, JSON.stringify({
-      name,
-      path: path.resolve(appPath),
-      scaffoldedAt: new Date().toISOString()
-    }));
-    console.error(`📝 Registered app "${name}" for edit protection`);
-  } catch (err) {
-    console.error(`Warning: Could not register app for edit protection: ${err.message}`);
-  }
-}