@claudiv/cli 0.1.0

package/bin/claudiv.js

@@ -0,0 +1,407 @@
+#!/usr/bin/env node
+
+/**
+ * Claudiv CLI — Universal Declarative Generation Platform
+ *
+ * Usage:
+ *   npx @claudiv/cli <command> [options]
+ *   claudiv <command> [options]
+ *
+ * Commands:
+ *   new <name>        Create a new .cdml file
+ *   gen <name>        Generate code from .cdml file
+ *   reverse <file>    Reverse-engineer file to .cdml
+ *   watch <name>      Watch .cdml file for changes
+ *   help              Show this help message
+ */
+
+import { spawn } from 'child_process';
+import { existsSync, writeFileSync, readdirSync } from 'fs';
+import { join, basename, extname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const VERSION = '0.1.0';
+
+// ─── Parse Arguments ───────────────────────────────────────────
+
+const args = process.argv.slice(2);
+
+// Parse flags
+const flags = {};
+const positional = [];
+for (let i = 0; i < args.length; i++) {
+  const arg = args[i];
+  if (arg === '-s' || arg === '--spec') {
+    flags.spec = args[++i];
+  } else if (arg === '-g' || arg === '--gen') {
+    flags.gen = true;
+  } else if (arg === '-t' || arg === '--target') {
+    flags.target = args[++i];
+  } else if (arg === '-f' || arg === '--framework') {
+    flags.framework = args[++i];
+  } else if (arg === '-w' || arg === '--watch') {
+    flags.watch = true;
+  } else if (arg === '-o' || arg === '--output') {
+    flags.output = args[++i];
+  } else if (arg === '--dry-run') {
+    flags.dryRun = true;
+  } else if (arg === '-v' || arg === '--version') {
+    console.log(`claudiv ${VERSION}`);
+    process.exit(0);
+  } else if (arg === '-h' || arg === '--help') {
+    showHelp();
+    process.exit(0);
+  } else if (!arg.startsWith('-')) {
+    positional.push(arg);
+  }
+}
+
+// ─── Route Commands ────────────────────────────────────────────
+
+switch (positional[0]) {
+  case 'new':
+    cmdNew(positional[1], flags);
+    break;
+  case 'gen':
+    cmdGen(positional[1], flags);
+    break;
+  case 'reverse':
+    cmdReverse(positional[1], flags);
+    break;
+  case 'watch':
+    cmdWatch(positional[1], flags);
+    break;
+  case 'help':
+    showHelp();
+    break;
+  case undefined:
+    // No command: look for .cdml in current directory and watch
+    cmdDefault(flags);
+    break;
+  default:
+    // Check if it's a .cdml file path
+    if (positional[0].endsWith('.cdml')) {
+      cmdGen(positional[0], flags);
+    } else {
+      console.error(`Unknown command: ${positional[0]}`);
+      console.log('Run "claudiv help" for usage information.');
+      process.exit(1);
+    }
+}
+
+// ─── Commands ──────────────────────────────────────────────────
+
+/**
+ * claudiv new <name> [-s|--spec '<xml>'] [-g|--gen] [-t|--target <lang>]
+ */
+function cmdNew(name, flags) {
+  if (!name) {
+    console.error('Usage: claudiv new <name> [options]');
+    console.log('');
+    console.log('Examples:');
+    console.log('  claudiv new myapp');
+    console.log('  claudiv new txt2img -s \'<txt2img lang="python" type="cli" gen="">...</txt2img>\'');
+    console.log('  claudiv new api -t python -f fastapi');
+    console.log('  claudiv new myapp -s \'<spec>\' -g');
+    process.exit(1);
+  }
+
+  // Strip .cdml extension if provided
+  const baseName = name.replace(/\.cdml$/, '');
+  const cdmlFile = `${baseName}.cdml`;
+  const cdmlPath = join(process.cwd(), cdmlFile);
+
+  if (existsSync(cdmlPath)) {
+    console.error(`File already exists: ${cdmlFile}`);
+    console.log(`Use "claudiv gen ${cdmlFile}" to generate from it.`);
+    process.exit(1);
+  }
+
+  let content;
+
+  if (flags.spec) {
+    // Use provided spec
+    content = flags.spec;
+  } else {
+    // Generate default template
+    const target = flags.target || 'html';
+    const framework = flags.framework ? ` framework="${flags.framework}"` : '';
+    content = `<${baseName} target="${target}"${framework} gen>
+  <!-- Describe what you want here -->
+</${baseName}>
+`;
+  }
+
+  writeFileSync(cdmlPath, content, 'utf-8');
+  console.log(`Created ${cdmlFile}`);
+
+  if (flags.gen) {
+    console.log(`Generating from ${cdmlFile}...`);
+    startEngine(cdmlPath, flags);
+  }
+}
+
+/**
+ * claudiv gen <name> [-t|--target <component>] [-w|--watch] [-o|--output <file>]
+ *
+ * Examples:
+ *   claudiv gen myapp                    # generate all from myapp.cdml
+ *   claudiv gen myapp -t config          # generate config component only
+ *   claudiv gen txt2img -t config        # generate txt2img.config
+ *   claudiv gen myapp.cdml               # explicit .cdml path
+ *   claudiv gen myapp -w                 # generate + watch for changes
+ *   claudiv gen myapp -o output.py       # generate to specific file
+ */
+function cmdGen(name, flags) {
+  if (!name) {
+    console.error('Usage: claudiv gen <name> [options]');
+    console.log('');
+    console.log('Examples:');
+    console.log('  claudiv gen myapp');
+    console.log('  claudiv gen myapp -t config');
+    console.log('  claudiv gen myapp -w');
+    console.log('  claudiv gen myapp -o output.py');
+    process.exit(1);
+  }
+
+  // Resolve .cdml file
+  const cdmlFile = name.endsWith('.cdml') ? name : `${name}.cdml`;
+  const cdmlPath = join(process.cwd(), cdmlFile);
+
+  if (!existsSync(cdmlPath)) {
+    console.error(`File not found: ${cdmlFile}`);
+    console.log(`Create it with: claudiv new ${name}`);
+    process.exit(1);
+  }
+
+  // If -t flag, it selects a component/target within the .cdml
+  if (flags.target) {
+    console.log(`Generating "${flags.target}" from ${cdmlFile}...`);
+  } else {
+    console.log(`Generating from ${cdmlFile}...`);
+  }
+
+  startEngine(cdmlPath, flags);
+}
+
+/**
+ * claudiv reverse <file> [-o|--output <name.cdml>]
+ *
+ * Examples:
+ *   claudiv reverse api.py               # → api.cdml
+ *   claudiv reverse Button.tsx            # → Button.cdml
+ *   claudiv reverse backup.sh             # → backup.cdml
+ *   claudiv reverse styles.css            # → styles.cdml
+ *   claudiv reverse api.py -o spec.cdml   # → spec.cdml
+ */
+function cmdReverse(file, flags) {
+  if (!file) {
+    console.error('Usage: claudiv reverse <file> [options]');
+    console.log('');
+    console.log('Examples:');
+    console.log('  claudiv reverse api.py');
+    console.log('  claudiv reverse Button.tsx');
+    console.log('  claudiv reverse backup.sh');
+    console.log('  claudiv reverse api.py -o spec.cdml');
+    process.exit(1);
+  }
+
+  const filePath = join(process.cwd(), file);
+  if (!existsSync(filePath)) {
+    console.error(`File not found: ${file}`);
+    process.exit(1);
+  }
+
+  const base = basename(file, extname(file));
+  const outputFile = flags.output || `${base}.cdml`;
+  console.log(`Reverse engineering: ${file} → ${outputFile}`);
+
+  // TODO: Implement reverse generation via Claude
+  console.log('Reverse generation coming soon.');
+}
+
+/**
+ * claudiv watch <name>
+ *
+ * Watch .cdml file for changes and regenerate automatically.
+ */
+function cmdWatch(name, flags) {
+  if (!name) {
+    console.error('Usage: claudiv watch <name>');
+    process.exit(1);
+  }
+
+  flags.watch = true;
+  cmdGen(name, flags);
+}
+
+/**
+ * Default: no command given. Look for .cdml files in cwd.
+ */
+function cmdDefault(flags) {
+  // Look for .cdml files in current directory
+  const files = readdirSync(process.cwd());
+  const cdmlFiles = files.filter(f => f.endsWith('.cdml'));
+
+  if (cdmlFiles.length === 0) {
+    console.log('Claudiv — Claude in a Div');
+    console.log('');
+    console.log('No .cdml files found. Get started:');
+    console.log('');
+    console.log('  claudiv new myapp                          # Create myapp.cdml');
+    console.log('  claudiv new myapp -t python                # Python project');
+    console.log('  claudiv new myapp -s \'<app gen>...</app>\'  # With inline spec');
+    console.log('  claudiv new myapp -s \'<app gen>...</app>\' -g  # Create + generate');
+    console.log('');
+    console.log('  claudiv gen myapp                          # Generate from myapp.cdml');
+    console.log('  claudiv gen myapp -t config                # Generate specific target');
+    console.log('  claudiv gen myapp -w                       # Watch mode');
+    console.log('');
+    console.log('  claudiv reverse api.py                     # Reverse → api.cdml');
+    console.log('');
+    console.log('  claudiv help                               # Full help');
+    process.exit(0);
+  }
+
+  if (cdmlFiles.length === 1) {
+    console.log(`Found ${cdmlFiles[0]}, starting...`);
+    startEngine(join(process.cwd(), cdmlFiles[0]), flags);
+  } else {
+    console.log('Multiple .cdml files found:');
+    cdmlFiles.forEach((f, i) => console.log(`  ${i + 1}. ${f}`));
+    console.log('');
+    console.log('Specify which file to use:');
+    console.log(`  claudiv gen ${cdmlFiles[0]}`);
+    process.exit(0);
+  }
+}
+
+// ─── Engine ────────────────────────────────────────────────────
+
+function startEngine(cdmlPath, flags) {
+  const mode = process.env.MODE || 'cli';
+  const envVars = { ...process.env, MODE: mode };
+
+  if (flags.target) envVars.CLAUDIV_TARGET = flags.target;
+  if (flags.output) envVars.CLAUDIV_OUTPUT = flags.output;
+  if (flags.watch) envVars.CLAUDIV_WATCH = '1';
+
+  const editor = spawn('node', [join(__dirname, '../dist/index.js'), cdmlPath], {
+    stdio: 'inherit',
+    cwd: process.cwd(),
+    env: envVars,
+  });
+
+  editor.on('exit', (exitCode) => {
+    process.exit(exitCode || 0);
+  });
+
+  editor.on('error', (err) => {
+    console.error(`Failed to start: ${err.message}`);
+    process.exit(1);
+  });
+}
+
+// ─── Help ──────────────────────────────────────────────────────
+
+function showHelp() {
+  console.log(`
+Claudiv ${VERSION} — Claude in a Div
+Universal Declarative Generation Platform
+
+USAGE
+  claudiv <command> [name] [options]
+  npx @claudiv/cli <command> [name] [options]
+
+COMMANDS
+  new <name>       Create a new .cdml file
+  gen <name>       Generate code from .cdml file
+  reverse <file>   Reverse-engineer existing file to .cdml
+  watch <name>     Watch .cdml file and regenerate on changes
+  help             Show this help message
+
+OPTIONS
+  -s, --spec <xml>      Inline .cdml content for 'new' command
+  -g, --gen             Immediately generate after 'new'
+  -t, --target <name>   Target component or language
+  -f, --framework <fw>  Framework (fastapi, express, nextjs, etc.)
+  -o, --output <file>   Output file path
+  -w, --watch           Watch mode (regenerate on save)
+  --dry-run             Preview without writing files
+  -v, --version         Show version
+  -h, --help            Show help
+
+EXAMPLES
+
+  Getting Started:
+    claudiv new myapp                              Create myapp.cdml
+    claudiv new myapp -t python                    Create Python project spec
+    claudiv new myapp -g                           Create and generate immediately
+
+  Inline Spec:
+    claudiv new txt2img -s '<txt2img lang="python" type="cli" gen="">
+      <ai provider="openai" />
+      <config apikey organizationid />
+      <args input="text|file, size" output="filename, format" />
+    </txt2img>'
+
+    claudiv new txt2img -s '<txt2img lang="python" type="cli" gen="">
+      <ai provider="openai" />
+      <config apikey organizationid />
+      <args input="text|file, size" output="filename, format" />
+    </txt2img>' -g                                 Create + generate immediately
+
+  Generate:
+    claudiv gen myapp                              Generate all from myapp.cdml
+    claudiv gen myapp.cdml                         Explicit .cdml path
+    claudiv gen txt2img -t config                  Generate only config component
+    claudiv gen myapp -w                           Watch mode
+    claudiv gen myapp -o output.py                 Custom output file
+
+  Component Target (-t):
+    claudiv gen txt2img -t config                  Generates txt2img.config
+    claudiv gen myapp -t api                       Generates myapp.api
+    claudiv gen myapp -t database                  Generates myapp.database
+
+  Reverse Engineering:
+    claudiv reverse api.py                         → api.cdml
+    claudiv reverse Button.tsx                     → Button.cdml
+    claudiv reverse backup.sh                      → backup.cdml
+    claudiv reverse styles.css                     → styles.cdml
+    claudiv reverse api.py -o spec.cdml            Custom output name
+
+  Watch Mode:
+    claudiv watch myapp                            Watch myapp.cdml for changes
+    claudiv gen myapp -w                           Same as above
+
+  Run in Empty Folder:
+    npx @claudiv/cli new myapp -t python -g
+
+FILE FORMAT
+  Input:   <name>.cdml
+  Output:  <name>.<ext>  (based on target language)
+
+  Examples:
+    app.cdml      → app.html       (target=html)
+    api.cdml      → api.py         (target=python)
+    backup.cdml   → backup.sh      (target=bash)
+    deploy.cdml   → deploy.yaml    (target=kubernetes)
+
+SPEC SYNTAX
+  <element-name [attributes] gen[="instructions"]>
+    Natural language description
+  </element-name>
+
+  Action attributes:
+    gen           Generate new code
+    gen="..."     Generate with specific instructions
+    retry         Regenerate (not satisfied)
+    undo          Revert to previous version
+    lock          Protect from regeneration
+    unlock        Allow regeneration of locked element
+
+MORE INFO
+  https://github.com/claudiv-ai/claudiv
+`);
+}

package/dist/claude-api.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Anthropic API integration for direct API access
+ */
+import type { HierarchyContext } from '@claudiv/core';
+export declare class ClaudeAPIClient {
+    private client;
+    constructor(apiKey: string);
+    /**
+     * Send prompt to Claude API and stream response
+     */
+    sendPrompt(userMessage: string, context: HierarchyContext): AsyncGenerator<string>;
+    /**
+     * Check if API is available
+     */
+    checkAvailable(): Promise<boolean>;
+    /**
+     * Build system prompt with context
+     */
+    private buildSystemPrompt;
+}

package/dist/claude-api.js

@@ -0,0 +1,117 @@
+/**
+ * Anthropic API integration for direct API access
+ */
+import Anthropic from '@anthropic-ai/sdk';
+import { logger } from './utils/logger.js';
+import { buildPromptContext } from '@claudiv/core';
+export class ClaudeAPIClient {
+    client;
+    constructor(apiKey) {
+        this.client = new Anthropic({
+            apiKey,
+        });
+    }
+    /**
+     * Send prompt to Claude API and stream response
+     */
+    async *sendPrompt(userMessage, context) {
+        logger.processing('Sending request to Claude API...');
+        // Build system prompt with hierarchy context
+        const systemPrompt = this.buildSystemPrompt(context);
+        try {
+            // Stream from API
+            const stream = await this.client.messages.stream({
+                model: 'claude-opus-4-6',
+                max_tokens: 4096,
+                system: systemPrompt,
+                messages: [
+                    {
+                        role: 'user',
+                        content: userMessage,
+                    },
+                ],
+            });
+            let chunkCount = 0;
+            for await (const chunk of stream) {
+                if (chunk.type === 'content_block_delta' &&
+                    chunk.delta.type === 'text_delta') {
+                    chunkCount++;
+                    yield chunk.delta.text;
+                }
+            }
+            logger.debug(`Received ${chunkCount} chunks from API`);
+        }
+        catch (error) {
+            const err = error;
+            logger.error(`Claude API error: ${err.message}`);
+            throw error;
+        }
+    }
+    /**
+     * Check if API is available
+     */
+    async checkAvailable() {
+        try {
+            // Test with a minimal request
+            await this.client.messages.create({
+                model: 'claude-opus-4-6',
+                max_tokens: 10,
+                messages: [{ role: 'user', content: 'test' }],
+            });
+            return true;
+        }
+        catch (error) {
+            logger.error('Claude API not available');
+            return false;
+        }
+    }
+    /**
+     * Build system prompt with context
+     */
+    buildSystemPrompt(context) {
+        const contextStr = buildPromptContext(context);
+        return `You are an AI assistant helping generate HTML/CSS code from natural language requests.
+
+${contextStr}
+
+**CRITICAL IMPLEMENTATION REQUIREMENTS:**
+⚠️ NEVER use placeholder comments like "<!-- Child components render here -->" or "<!-- TODO: implement X -->"
+⚠️ If the user request lists NESTED COMPONENTS TO IMPLEMENT, you MUST generate complete, working HTML/CSS for EVERY single one
+⚠️ Each nested component specification MUST result in actual HTML elements with proper styling, NOT comments
+⚠️ If you see a list like "1. <nav-menu>", "2. <pages>", etc., these are REQUIRED components that need full implementations
+
+**Instructions:**
+1. Structure your response as XML elements (NOT plain text)
+2. ${context.existingCode ? 'Modify ONLY what the user requested, keeping everything else exactly the same' : 'Generate the necessary HTML/CSS code appropriate for this context'}
+3. Consider the hierarchy - you're working on: ${context.elementPath}
+4. If referenced elements are provided above, use their definitions to inform your implementation
+5. If the user request contains a section "NESTED COMPONENTS TO IMPLEMENT", you MUST implement EACH ONE with complete HTML/CSS:
+   - Create actual HTML elements for each component
+   - Add proper CSS styling for each component
+   - Use the attributes as specifications for styling and behavior
+   - Use the content as guidance for what to include
+   - Do NOT use placeholder comments - implement the actual functionality
+   - **CRITICAL EXCEPTION - LOCKED COMPONENTS**:
+     - Components marked with "[LOCKED - DO NOT REGENERATE]" are already implemented
+     - You MUST preserve locked components exactly as they are
+     - Do NOT regenerate, modify, or replace locked components
+     - Include them as-is or reference them in your generated code
+     - Only implement components that are NOT marked as locked
+
+**Response Format (use semantic XML tags, NOT plain text):**
+<changes>Brief description of what was created/modified</changes>
+<details>
+  <tag-name>Specific detail about the implementation</tag-name>
+  <another-tag>Another detail</another-tag>
+</details>
+<summary>Overall summary</summary>
+
+IMPORTANT:
+- Use semantic tag names that describe the content (e.g., <styling>, <background>, <effect>, <feature>, etc.)
+- DO NOT use plain text or bullet points
+- Structure your response with nested XML elements
+- Still include code blocks with \`\`\`html and \`\`\`css for implementation
+- EVERY nested component must be fully implemented, not just mentioned in comments
+`;
+    }
+}

package/dist/claude-cli.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Claude Code CLI integration via subprocess
+ */
+import type { HierarchyContext } from '@claudiv/core';
+export declare class ClaudeCLIClient {
+    /**
+     * Send prompt to Claude Code CLI and stream response
+     */
+    sendPrompt(userMessage: string, context: HierarchyContext): AsyncGenerator<string>;
+    /**
+     * Check if Claude CLI is installed
+     */
+    checkAvailable(): Promise<boolean>;
+    /**
+     * Build prompt with hierarchy context
+     */
+    private buildPrompt;
+}

package/dist/claude-cli.js

@@ -0,0 +1,124 @@
+/**
+ * Claude Code CLI integration via subprocess
+ */
+import { spawn } from 'child_process';
+import { logger } from './utils/logger.js';
+import { buildPromptContext } from '@claudiv/core';
+export class ClaudeCLIClient {
+    /**
+     * Send prompt to Claude Code CLI and stream response
+     */
+    async *sendPrompt(userMessage, context) {
+        logger.processing('Sending request to Claude CLI...');
+        // Build full prompt with context
+        const fullPrompt = this.buildPrompt(userMessage, context);
+        // Spawn Claude process with --print for non-interactive mode
+        // Unset CLAUDECODE to allow nested invocation
+        const claude = spawn('claude', ['--print', fullPrompt], {
+            stdio: ['ignore', 'pipe', 'pipe'],
+            env: {
+                ...process.env,
+                CLAUDECODE: '', // Unset to allow nested sessions
+            },
+        });
+        let hasOutput = false;
+        // Stream stdout chunks
+        for await (const chunk of claude.stdout) {
+            hasOutput = true;
+            yield chunk.toString('utf-8');
+        }
+        // Collect errors
+        let errorOutput = '';
+        claude.stderr.on('data', (data) => {
+            errorOutput += data.toString();
+        });
+        // Wait for process to complete
+        const exitCode = await new Promise((resolve) => {
+            claude.on('close', resolve);
+        });
+        if (exitCode !== 0) {
+            logger.error(`Claude CLI exited with code ${exitCode}`);
+            if (errorOutput) {
+                logger.error(`Error output: ${errorOutput}`);
+            }
+            throw new Error(`Claude CLI failed with exit code ${exitCode}`);
+        }
+        if (!hasOutput) {
+            logger.warn('No output received from Claude CLI');
+        }
+        logger.debug('Claude CLI request completed');
+    }
+    /**
+     * Check if Claude CLI is installed
+     */
+    async checkAvailable() {
+        try {
+            const check = spawn('claude', ['--version'], {
+                env: {
+                    ...process.env,
+                    CLAUDECODE: '', // Unset to allow check
+                },
+            });
+            const exitCode = await new Promise((resolve) => {
+                check.on('close', resolve);
+                check.on('error', () => resolve(null));
+            });
+            return exitCode === 0;
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    /**
+     * Build prompt with hierarchy context
+     */
+    buildPrompt(userMessage, context) {
+        const contextStr = buildPromptContext(context);
+        return `You are an AI assistant helping generate HTML/CSS code from natural language requests.
+
+${contextStr}
+
+**User Request:** ${userMessage}
+
+**CRITICAL IMPLEMENTATION REQUIREMENTS:**
+⚠️ NEVER use placeholder comments like "<!-- Child components render here -->" or "<!-- TODO: implement X -->"
+⚠️ If the user request lists NESTED COMPONENTS TO IMPLEMENT, you MUST generate complete, working HTML/CSS for EVERY single one
+⚠️ Each nested component specification MUST result in actual HTML elements with proper styling, NOT comments
+⚠️ If you see a list like "1. <nav-menu>", "2. <pages>", etc., these are REQUIRED components that need full implementations
+
+**Instructions:**
+1. Structure your response as XML elements (NOT plain text)
+2. ${context.existingCode ? 'Modify ONLY what the user requested, keeping everything else exactly the same' : 'Generate the necessary HTML/CSS code appropriate for this context'}
+3. Consider the hierarchy - you're working on: ${context.elementPath}
+4. If referenced elements are provided above, use their definitions to inform your implementation
+5. If the user request contains a section "NESTED COMPONENTS TO IMPLEMENT", you MUST implement EACH ONE with complete HTML/CSS:
+   - Create actual HTML elements for each component
+   - Add proper CSS styling for each component
+   - Use the attributes as specifications for styling and behavior
+   - Use the content as guidance for what to include
+   - Do NOT use placeholder comments - implement the actual functionality
+   - **CRITICAL EXCEPTION - LOCKED COMPONENTS**:
+     - Components marked with "[LOCKED - DO NOT REGENERATE]" are already implemented
+     - You MUST preserve locked components exactly as they are
+     - Do NOT regenerate, modify, or replace locked components
+     - Include them as-is or reference them in your generated code
+     - Only implement components that are NOT marked as locked
+
+**Response Format (use semantic XML tags, NOT plain text):**
+<changes>Brief description of what was created/modified</changes>
+<details>
+  <tag-name>Specific detail about the implementation</tag-name>
+  <another-tag>Another detail</another-tag>
+</details>
+<summary>Overall summary</summary>
+
+IMPORTANT:
+- Use semantic tag names that describe the content (e.g., <styling>, <background>, <effect>, <feature>, etc.)
+- DO NOT use plain text or bullet points
+- Structure your response with nested XML elements
+- Still include code blocks with \`\`\`html and \`\`\`css for implementation
+- EVERY nested component must be fully implemented, not just mentioned in comments
+
+Please respond now.`;
+    }
+}