@claudiv/cli 0.1.0

package/dist/claude-client.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Unified Claude client interface (abstracts CLI vs API mode)
+ */
+import type { Config, HierarchyContext } from '@claudiv/core';
+export interface ClaudeClient {
+    sendPrompt(userMessage: string, context: HierarchyContext): AsyncGenerator<string>;
+    checkAvailable(): Promise<boolean>;
+}
+/**
+ * Create Claude client based on configuration
+ */
+export declare function createClaudeClient(config: Config): ClaudeClient;
+/**
+ * Verify Claude is available before starting
+ */
+export declare function verifyClaudeAvailable(client: ClaudeClient, mode: 'cli' | 'api'): Promise<void>;

package/dist/claude-client.js

@@ -0,0 +1,44 @@
+/**
+ * Unified Claude client interface (abstracts CLI vs API mode)
+ */
+import { ClaudeCLIClient } from './claude-cli.js';
+import { ClaudeAPIClient } from './claude-api.js';
+import { logger } from './utils/logger.js';
+/**
+ * Create Claude client based on configuration
+ */
+export function createClaudeClient(config) {
+    if (config.mode === 'cli') {
+        logger.info('Using Claude Code CLI (subscription mode)');
+        return new ClaudeCLIClient();
+    }
+    else {
+        logger.info('Using Anthropic API (pay-per-use mode)');
+        if (!config.apiKey) {
+            logger.error('API key is required for API mode');
+            throw new Error('Missing API key');
+        }
+        return new ClaudeAPIClient(config.apiKey);
+    }
+}
+/**
+ * Verify Claude is available before starting
+ */
+export async function verifyClaudeAvailable(client, mode) {
+    logger.processing(`Checking ${mode === 'cli' ? 'Claude Code CLI' : 'Claude API'} availability...`);
+    const isAvailable = await client.checkAvailable();
+    if (!isAvailable) {
+        if (mode === 'cli') {
+            logger.error('Claude Code CLI is not installed or not working');
+            logger.info('Install Claude Code: https://code.claude.com');
+            logger.info('Or switch to API mode by setting MODE=api in .env');
+        }
+        else {
+            logger.error('Claude API is not available');
+            logger.info('Check your ANTHROPIC_API_KEY in .env');
+            logger.info('Or switch to CLI mode by setting MODE=cli in .env');
+        }
+        process.exit(1);
+    }
+    logger.success(`${mode === 'cli' ? 'Claude Code CLI' : 'Claude API'} is ready`);
+}

package/dist/config.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Configuration loader for GUI-driven spec editor
+ */
+import type { Config } from '@claudiv/core';
+/**
+ * Load and validate configuration
+ */
+export declare function loadConfig(): Config;

package/dist/config.js

@@ -0,0 +1,67 @@
+/**
+ * Configuration loader for GUI-driven spec editor
+ */
+import dotenv from 'dotenv';
+import { existsSync, readdirSync } from 'fs';
+import { join } from 'path';
+import { logger } from './utils/logger.js';
+// Load .env file
+dotenv.config();
+/**
+ * Load and validate configuration
+ */
+export function loadConfig() {
+    // Determine mode
+    const mode = (process.env.MODE?.toLowerCase() || 'cli');
+    if (mode !== 'cli' && mode !== 'api') {
+        logger.error(`Invalid MODE: ${process.env.MODE}. Must be 'cli' or 'api'`);
+        process.exit(1);
+    }
+    // Get API key if in API mode
+    let apiKey;
+    if (mode === 'api') {
+        apiKey = process.env.ANTHROPIC_API_KEY;
+        if (!apiKey) {
+            logger.error('ANTHROPIC_API_KEY is required when MODE=api');
+            logger.info('Set ANTHROPIC_API_KEY in .env file or environment');
+            process.exit(1);
+        }
+    }
+    // Spec file location - look for .cdml files
+    // Check if user specified a file via CLI argument
+    const cliFile = process.argv[2];
+    let specFile;
+    if (cliFile) {
+        specFile = join(process.cwd(), cliFile);
+        if (!existsSync(specFile)) {
+            logger.error(`File not found: ${cliFile}`);
+            process.exit(1);
+        }
+    }
+    else {
+        // Look for .cdml files in current directory
+        const files = readdirSync(process.cwd());
+        const cdmlFiles = files.filter(f => f.endsWith('.cdml'));
+        if (cdmlFiles.length === 0) {
+            logger.error('No .cdml files found in current directory');
+            logger.info('Create a .cdml file to get started (e.g., app.cdml)');
+            logger.info('Example: <app><button gen>Make a blue button</button></app>');
+            process.exit(1);
+        }
+        if (cdmlFiles.length > 1) {
+            logger.warn(`Multiple .cdml files found: ${cdmlFiles.join(', ')}`);
+            logger.info(`Using ${cdmlFiles[0]} (specify file as argument to use a different one)`);
+        }
+        specFile = join(process.cwd(), cdmlFiles[0]);
+    }
+    // Configuration values
+    const config = {
+        mode,
+        apiKey,
+        specFile,
+        debounceMs: 300,
+        claudeTimeout: 60000, // 60 seconds
+    };
+    logger.debug(`Configuration loaded: mode=${mode}, specFile=${specFile}`);
+    return config;
+}

package/dist/dev-server.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Vite dev server for hosting generated code
+ */
+export declare class DevServer {
+    private server;
+    private port;
+    start(): Promise<void>;
+    stop(): Promise<void>;
+    getPort(): number;
+}

package/dist/dev-server.js

@@ -0,0 +1,118 @@
+/**
+ * Vite dev server for hosting generated code
+ */
+import { createServer } from 'vite';
+import { existsSync } from 'fs';
+import { logger } from './utils/logger.js';
+export class DevServer {
+    server = null;
+    port = 30004;
+    async start() {
+        try {
+            // Create Vite server
+            this.server = await createServer({
+                root: process.cwd(),
+                server: {
+                    port: this.port,
+                    strictPort: false, // Auto-increment if port is busy
+                    open: true, // Open browser automatically
+                },
+                plugins: [
+                    {
+                        name: 'spec-code-server',
+                        configureServer(server) {
+                            server.middlewares.use(async (req, res, next) => {
+                                // Serve generated code as the root
+                                const outputFile = 'app.html'; // TODO: Make configurable
+                                if (req.url === '/' || req.url === '/index.html') {
+                                    if (existsSync(outputFile)) {
+                                        // Read and serve the file directly
+                                        const { readFile } = await import('fs/promises');
+                                        const content = await readFile(outputFile, 'utf-8');
+                                        res.statusCode = 200;
+                                        res.setHeader('Content-Type', 'text/html');
+                                        res.end(content);
+                                        return;
+                                    }
+                                    else {
+                                        // Serve a placeholder if output file doesn't exist yet
+                                        res.statusCode = 200;
+                                        res.setHeader('Content-Type', 'text/html');
+                                        res.end(`
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Waiting for generated code</title>
+  <meta http-equiv="refresh" content="2">
+  <style>
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      margin: 0;
+      background: #f5f5f5;
+    }
+    .message {
+      text-align: center;
+      padding: 2rem;
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    .spinner {
+      border: 3px solid #f3f3f3;
+      border-top: 3px solid #3498db;
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      animation: spin 1s linear infinite;
+      margin: 1rem auto;
+    }
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  </style>
+</head>
+<body>
+  <div class="message">
+    <div class="spinner"></div>
+    <h2>Waiting for code generation...</h2>
+    <p>Add a <code>gen</code> attribute to elements in your .cdml file to trigger generation.</p>
+  </div>
+</body>
+</html>
+                `);
+                                        return;
+                                    }
+                                }
+                                next();
+                            });
+                        },
+                    },
+                ],
+            });
+            await this.server.listen();
+            const info = this.server.config.logger.info;
+            this.port = this.server.config.server.port || this.port;
+            logger.success(`🌐 Dev server running at http://localhost:${this.port}`);
+            logger.info('💡 Browser will auto-reload when code is regenerated');
+        }
+        catch (error) {
+            const err = error;
+            logger.error(`Failed to start dev server: ${err.message}`);
+            throw error;
+        }
+    }
+    async stop() {
+        if (this.server) {
+            await this.server.close();
+            logger.info('Dev server stopped');
+        }
+    }
+    getPort() {
+        return this.port;
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Main orchestrator for GUI-driven spec editor
+ */
+export {};

package/dist/index.js

@@ -0,0 +1,305 @@
+/**
+ * Main orchestrator for GUI-driven spec editor
+ */
+import { readFile, writeFile, chmod } from 'fs/promises';
+import { existsSync } from 'fs';
+import { loadConfig } from './config.js';
+import { logger } from './utils/logger.js';
+import { SpecFileWatcher } from './watcher.js';
+import { parseSpecFile, generateCode, extractCodeBlocks } from '@claudiv/core';
+import { createClaudeClient, verifyClaudeAvailable } from './claude-client.js';
+import { updateSpecWithResponse } from './updater.js';
+import { DevServer } from './dev-server.js';
+/**
+ * Main application entry point
+ */
+async function main() {
+    logger.info('🚀 GUI-driven spec editor starting...');
+    // Load configuration
+    const config = loadConfig();
+    // Create Claude client
+    const claudeClient = createClaudeClient(config);
+    // Verify Claude is available
+    await verifyClaudeAvailable(claudeClient, config.mode);
+    // TODO: Implement regeneration for multi-file .cdml architecture
+    // (spec.cdml, rules.cdml, models.cdml, tests.cdml)
+    // For now, generation happens on-demand through chat patterns
+    // Create file watcher
+    const watcher = new SpecFileWatcher(config);
+    // Handle file changes
+    watcher.on('change', async (filePath) => {
+        try {
+            await processSpecFile(filePath, config, claudeClient, watcher);
+        }
+        catch (error) {
+            const err = error;
+            logger.error(`Error processing ${filePath}: ${err.message}`);
+            if (process.env.DEBUG) {
+                console.error(err.stack);
+            }
+        }
+    });
+    // Start watching
+    watcher.start();
+    logger.success(`✓ Watching ${config.specFile.split('/').pop()} for changes...`);
+    logger.info('💡 Tip: Add gen/retry/undo attribute to any element to trigger AI');
+    logger.info('💡 Example: <create-button gen>Make a blue button</create-button>');
+    logger.info('💡 Example: <my-button color="blue" size="large" gen />');
+    logger.info('');
+    // Start Vite dev server
+    const devServer = new DevServer();
+    await devServer.start();
+    logger.info('');
+    // Handle graceful shutdown
+    const shutdown = async () => {
+        logger.info('\n👋 Shutting down...');
+        watcher.stop();
+        await devServer.stop();
+        process.exit(0);
+    };
+    process.on('SIGINT', shutdown);
+    process.on('SIGTERM', shutdown);
+}
+/**
+ * Process .cdml file for chat patterns
+ */
+async function processSpecFile(filePath, config, claudeClient, watcher) {
+    // Skip if we're updating the file ourselves
+    if (watcher.isCurrentlyUpdating()) {
+        logger.debug('Skipping processing (internal update in progress)');
+        return;
+    }
+    logger.processing(`Processing ${filePath.split('/').pop()}...`);
+    // Read file content
+    const content = await readFile(filePath, 'utf-8');
+    // Parse spec file
+    const parsed = parseSpecFile(content);
+    if (parsed.chatPatterns.length === 0) {
+        logger.debug('No new chat patterns found');
+        return;
+    }
+    logger.info(`Found ${parsed.chatPatterns.length} chat pattern(s) to process`);
+    // Process each chat pattern
+    for (const pattern of parsed.chatPatterns) {
+        await processChatPattern(pattern, config, claudeClient, watcher, parsed.dom);
+    }
+}
+/**
+ * Process a single chat pattern
+ */
+async function processChatPattern(pattern, config, claudeClient, watcher, $) {
+    const { action, element, elementName, specAttributes, userMessage, context, elementPath } = pattern;
+    // Build display message
+    const attrPreview = Object.entries(specAttributes).length > 0
+        ? ` [${Object.entries(specAttributes).slice(0, 2).map(([k, v]) => `${k}="${v}"`).join(', ')}...]`
+        : '';
+    const messagePreview = userMessage
+        ? userMessage.substring(0, 60) + (userMessage.length > 60 ? '...' : '')
+        : 'attribute-based spec';
+    logger.info(`Processing ${action}: <${elementName}${attrPreview}>`);
+    logger.info(`  Message: "${messagePreview}"`);
+    logger.debug(`  Context: ${elementPath}`);
+    try {
+        // Read existing code file if it exists (extension depends on target language)
+        const targetExtensions = {
+            html: '.html',
+            bash: '.sh',
+            python: '.py',
+            javascript: '.js',
+            typescript: '.ts',
+            go: '.go',
+            rust: '.rs',
+        };
+        const ext = targetExtensions[pattern.target] || '.html';
+        const codeFilePath = config.specFile.replace('.cdml', ext);
+        if (existsSync(codeFilePath)) {
+            const existingCode = await readFile(codeFilePath, 'utf-8');
+            context.existingCode = existingCode;
+            logger.debug(`Loaded existing ${pattern.target} code for context`);
+        }
+        // Build full prompt combining element name, attributes, user message, and action instructions
+        const fullPrompt = buildFullPrompt($, element, elementName, specAttributes, userMessage, pattern.actionInstructions);
+        // Debug: log the prompt to see what's being sent
+        logger.debug('=== FULL PROMPT BEING SENT ===');
+        logger.debug(fullPrompt);
+        logger.debug('=== END PROMPT ===');
+        // Accumulate full response
+        let fullResponse = '';
+        // Send to Claude and stream response
+        for await (const chunk of claudeClient.sendPrompt(fullPrompt, context)) {
+            fullResponse += chunk;
+            // Optionally: show progress
+            if (process.env.DEBUG) {
+                process.stdout.write('.');
+            }
+        }
+        if (process.env.DEBUG) {
+            process.stdout.write('\n');
+        }
+        logger.success('Received response from Claude');
+        // Check if response contains code blocks
+        const codeBlocks = extractCodeBlocks(fullResponse);
+        const hasCode = codeBlocks.length > 0;
+        // Generate code file using universal generator (if there's code)
+        if (hasCode) {
+            const generated = await generateCode(fullResponse, pattern, context);
+            // Determine output file path
+            const outputFile = config.specFile.replace('.cdml', generated.fileExtension);
+            // Write generated code
+            await writeFile(outputFile, generated.code, 'utf-8');
+            // Make executable if it's a script
+            if (generated.metadata?.executable) {
+                await chmod(outputFile, 0o755);
+                logger.debug(`Made ${outputFile} executable`);
+            }
+            logger.success(`Generated ${pattern.target} code → ${outputFile}`);
+        }
+        // Update spec.html: remove action attribute and add <ai> child with response
+        watcher.setUpdating(true);
+        try {
+            await updateSpecWithResponse($, element, action, fullResponse, config.specFile, hasCode);
+        }
+        finally {
+            watcher.setUpdating(false);
+        }
+    }
+    catch (error) {
+        const err = error;
+        logger.error(`Failed to process chat pattern: ${err.message}`);
+        throw error;
+    }
+}
+/**
+ * Build full prompt from element name, spec attributes, and user message
+ */
+function buildFullPrompt($, element, elementName, specAttributes, userMessage, actionInstructions) {
+    const parts = [];
+    // Add action instructions if provided (e.g. gen="use opus 4.6")
+    if (actionInstructions) {
+        parts.push(`Generation Instructions: ${actionInstructions}`);
+        parts.push('');
+    }
+    // Add element name as semantic header
+    parts.push(`Element: ${elementName}`);
+    parts.push('');
+    // Add spec attributes if any
+    if (Object.keys(specAttributes).length > 0) {
+        parts.push('Specifications:');
+        for (const [key, value] of Object.entries(specAttributes)) {
+            parts.push(`  ${key}: ${value}`);
+        }
+        parts.push('');
+    }
+    // Extract nested element specifications directly from the element's children
+    const nestedSpecs = extractNestedSpecifications($, element);
+    if (nestedSpecs.length > 0) {
+        parts.push('NESTED COMPONENTS TO IMPLEMENT:');
+        parts.push('The following components MUST be implemented (do not use placeholder comments):');
+        parts.push('');
+        function formatSpec(spec, indent, index) {
+            const prefix = index > 0 ? `${index}. ` : '';
+            const lockStatus = spec.isLocked ? ' [LOCKED - DO NOT REGENERATE]' : '';
+            parts.push(`${indent}${prefix}<${spec.elementName}>${lockStatus}`);
+            if (spec.isLocked) {
+                parts.push(`${indent}   ⚠️ This component is LOCKED - keep existing implementation, do NOT regenerate`);
+            }
+            if (Object.keys(spec.attributes).length > 0) {
+                parts.push(`${indent}   Attributes:`);
+                for (const [key, value] of Object.entries(spec.attributes)) {
+                    parts.push(`${indent}     - ${key}: ${value}`);
+                }
+            }
+            if (spec.textContent) {
+                parts.push(`${indent}   Content: ${spec.textContent}`);
+            }
+            // Recursively format children
+            if (spec.children && spec.children.length > 0) {
+                parts.push(`${indent}   Contains nested components:`);
+                spec.children.forEach((child, childIndex) => {
+                    formatSpec(child, indent + '     ', childIndex + 1);
+                });
+            }
+            parts.push('');
+        }
+        nestedSpecs.forEach((spec, index) => {
+            formatSpec(spec, '', index + 1);
+        });
+    }
+    // Add user message if any
+    if (userMessage) {
+        parts.push('Full Description:');
+        parts.push(userMessage);
+    }
+    return parts.join('\n');
+}
+function extractNestedSpecifications($, element) {
+    const specs = [];
+    function extractRecursive(parentElement, depth, parentLocked) {
+        const result = [];
+        const $parent = $(parentElement);
+        $parent.children().each((_, child) => {
+            if (child.type === 'tag') {
+                const childElement = child;
+                const elementName = childElement.name;
+                // Skip <ai> elements (these are AI responses, not specifications)
+                if (elementName === 'ai') {
+                    return;
+                }
+                const $child = $(childElement);
+                const attrs = childElement.attribs || {};
+                // Check lock/unlock status
+                const hasLock = 'lock' in attrs;
+                const hasUnlock = 'unlock' in attrs;
+                // Determine if this element is locked:
+                // - If parent is locked and element doesn't have unlock => locked
+                // - If element has lock attribute => locked
+                // - If element has unlock attribute => unlocked (overrides parent lock)
+                const isLocked = hasLock || (parentLocked && !hasUnlock);
+                // Extract attributes (exclude lock/unlock/gen/retry/undo as they're control attributes)
+                const attributes = {};
+                for (const [key, value] of Object.entries(attrs)) {
+                    if (key !== 'lock' && key !== 'unlock' && key !== 'gen' && key !== 'retry' && key !== 'undo') {
+                        attributes[key] = value;
+                    }
+                }
+                // Get direct text content (not from children)
+                const textContent = $child.contents()
+                    .filter((_, node) => node.type === 'text')
+                    .text()
+                    .trim();
+                // Recursively extract children, passing down the locked state
+                const children = extractRecursive(childElement, depth + 1, isLocked);
+                const hasChildren = children.length > 0;
+                result.push({
+                    elementName,
+                    attributes,
+                    textContent,
+                    hasChildren,
+                    depth,
+                    isLocked,
+                    children: hasChildren ? children : undefined,
+                });
+            }
+        });
+        return result;
+    }
+    try {
+        // Check if the root element (the one with gen/retry/undo) has a lock attribute
+        // If it does, all its children are locked by default (unless they have unlock)
+        const rootAttrs = element.attribs || {};
+        const rootHasLock = 'lock' in rootAttrs;
+        specs.push(...extractRecursive(element, 0, rootHasLock));
+    }
+    catch (error) {
+        logger.debug(`Could not parse nested specifications: ${error}`);
+    }
+    return specs;
+}
+// Start the application
+main().catch((error) => {
+    logger.error(`Fatal error: ${error.message}`);
+    if (process.env.DEBUG) {
+        console.error(error.stack);
+    }
+    process.exit(1);
+});

package/dist/updater.d.ts

@@ -0,0 +1,29 @@
+/**
+ * XML-ish updater - inserts AI responses into spec.html
+ */
+import type { CheerioAPI } from 'cheerio';
+import type { Element } from 'domhandler';
+/**
+ * Strip code blocks from response and replace with reference
+ */
+export declare function stripCodeBlocks(response: string, hasCode: boolean): string;
+/**
+ * Update element with AI response: remove action attribute and add/update <ai> child
+ */
+export declare function updateElementWithResponse($: CheerioAPI, element: Element, action: 'gen' | 'retry' | 'undo', response: string, hasCode?: boolean): void;
+/**
+ * Serialize cheerio DOM back to HTML string
+ */
+export declare function serializeToHTML($: CheerioAPI): Promise<string>;
+/**
+ * Write updated content back to spec.html safely
+ */
+export declare function writeSpecFile(filePath: string, content: string): Promise<void>;
+/**
+ * Grace period to prevent immediate re-trigger of watcher
+ */
+export declare function sleep(ms: number): Promise<void>;
+/**
+ * Complete update flow: remove action attribute, add AI response, serialize, write file
+ */
+export declare function updateSpecWithResponse($: CheerioAPI, element: Element, action: 'gen' | 'retry' | 'undo', response: string, filePath: string, hasCode?: boolean): Promise<void>;