@claudiv/cli 0.1.0 → 0.1.3

package/dist/config.js

@@ -3,7 +3,7 @@
  */
 import dotenv from 'dotenv';
 import { existsSync, readdirSync } from 'fs';
-import { join } from 'path';
+import { join, isAbsolute } from 'path';
 import { logger } from './utils/logger.js';
 // Load .env file
 dotenv.config();
@@ -32,9 +32,10 @@ export function loadConfig() {
     const cliFile = process.argv[2];
     let specFile;
     if (cliFile) {
-        specFile = join(process.cwd(), cliFile);
+        // If path is already absolute, use it directly; otherwise join with cwd
+        specFile = isAbsolute(cliFile) ? cliFile : join(process.cwd(), cliFile);
         if (!existsSync(specFile)) {
-            logger.error(`File not found: ${cliFile}`);
+            logger.error(`File not found: ${specFile}`);
             process.exit(1);
         }
     }

package/dist/dev-server.d.ts

@@ -4,7 +4,16 @@
 export declare class DevServer {
     private server;
     private port;
+    private outputFile;
+    /**
+     * Set the output file to serve (e.g., 'test.html', 'myapp.html')
+     */
+    setOutputFile(filename: string): void;
     start(): Promise<void>;
     stop(): Promise<void>;
     getPort(): number;
+    /**
+     * Open the browser to the specific file
+     */
+    openInBrowser(filename: string): Promise<void>;
 }

package/dist/dev-server.js

@@ -7,6 +7,13 @@ import { logger } from './utils/logger.js';
 export class DevServer {
     server = null;
     port = 30004;
+    outputFile = 'app.html'; // Default, can be configured
+    /**
+     * Set the output file to serve (e.g., 'test.html', 'myapp.html')
+     */
+    setOutputFile(filename) {
+        this.outputFile = filename;
+    }
     async start() {
         try {
             // Create Vite server
@@ -15,20 +22,21 @@ export class DevServer {
                 server: {
                     port: this.port,
                     strictPort: false, // Auto-increment if port is busy
-                    open: true, // Open browser automatically
+                    open: false, // Don't auto-open on start (we'll open after first generation)
                 },
                 plugins: [
                     {
                         name: 'spec-code-server',
-                        configureServer(server) {
+                        configureServer: (server) => {
+                            const self = this;
                             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)) {
+                                // Serve generated code at its specific path
+                                const requestPath = req.url?.split('?')[0]; // Remove query params
+                                if (requestPath === '/' || requestPath === '/index.html' || requestPath === `/${self.outputFile}`) {
+                                    if (existsSync(self.outputFile)) {
                                         // Read and serve the file directly
                                         const { readFile } = await import('fs/promises');
-                                        const content = await readFile(outputFile, 'utf-8');
+                                        const content = await readFile(self.outputFile, 'utf-8');
                                         res.statusCode = 200;
                                         res.setHeader('Content-Type', 'text/html');
                                         res.end(content);
@@ -115,4 +123,22 @@ export class DevServer {
     getPort() {
         return this.port;
     }
+    /**
+     * Open the browser to the specific file
+     */
+    async openInBrowser(filename) {
+        const url = `http://localhost:${this.port}/${filename}`;
+        try {
+            // Use platform-specific command to open browser
+            const { spawn } = await import('child_process');
+            const command = process.platform === 'darwin' ? 'open' :
+                process.platform === 'win32' ? 'start' : 'xdg-open';
+            spawn(command, [url], { detached: true, stdio: 'ignore' }).unref();
+            logger.info(`Opened ${filename} in browser`);
+        }
+        catch (error) {
+            // If command fails, just log the URL
+            logger.info(`View at: ${url}`);
+        }
+    }
 }

package/dist/index.js

@@ -26,10 +26,14 @@ async function main() {
     // For now, generation happens on-demand through chat patterns
     // Create file watcher
     const watcher = new SpecFileWatcher(config);
+    // Start Vite dev server
+    const devServer = new DevServer();
+    await devServer.start();
+    logger.info('');
     // Handle file changes
     watcher.on('change', async (filePath) => {
         try {
-            await processSpecFile(filePath, config, claudeClient, watcher);
+            await processSpecFile(filePath, config, claudeClient, watcher, devServer);
         }
         catch (error) {
             const err = error;
@@ -46,10 +50,6 @@ async function main() {
     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...');
@@ -63,7 +63,7 @@ async function main() {
 /**
  * Process .cdml file for chat patterns
  */
-async function processSpecFile(filePath, config, claudeClient, watcher) {
+async function processSpecFile(filePath, config, claudeClient, watcher, devServer) {
     // Skip if we're updating the file ourselves
     if (watcher.isCurrentlyUpdating()) {
         logger.debug('Skipping processing (internal update in progress)');
@@ -81,13 +81,13 @@ async function processSpecFile(filePath, config, claudeClient, watcher) {
     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);
+        await processChatPattern(pattern, config, claudeClient, watcher, parsed.dom, devServer);
     }
 }
 /**
  * Process a single chat pattern
  */
-async function processChatPattern(pattern, config, claudeClient, watcher, $) {
+async function processChatPattern(pattern, config, claudeClient, watcher, $, devServer) {
     const { action, element, elementName, specAttributes, userMessage, context, elementPath } = pattern;
     // Build display message
     const attrPreview = Object.entries(specAttributes).length > 0
@@ -126,25 +126,24 @@ async function processChatPattern(pattern, config, claudeClient, watcher, $) {
         // Accumulate full response
         let fullResponse = '';
         // Send to Claude and stream response
+        logger.info('Claude 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');
+            // Stream output to console so user can see progress
+            process.stdout.write(chunk);
         }
-        logger.success('Received response from Claude');
+        process.stdout.write('\n\n');
+        logger.success('✓ Response complete');
         // 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)
+        let outputFileName;
         if (hasCode) {
             const generated = await generateCode(fullResponse, pattern, context);
             // Determine output file path
             const outputFile = config.specFile.replace('.cdml', generated.fileExtension);
+            outputFileName = outputFile.split('/').pop();
             // Write generated code
             await writeFile(outputFile, generated.code, 'utf-8');
             // Make executable if it's a script
@@ -153,11 +152,16 @@ async function processChatPattern(pattern, config, claudeClient, watcher, $) {
                 logger.debug(`Made ${outputFile} executable`);
             }
             logger.success(`Generated ${pattern.target} code → ${outputFile}`);
+            // Set output file on dev server and open in browser (for HTML files)
+            if (outputFileName && generated.fileExtension === '.html') {
+                devServer.setOutputFile(outputFileName);
+                await devServer.openInBrowser(outputFileName);
+            }
         }
         // Update spec.html: remove action attribute and add <ai> child with response
         watcher.setUpdating(true);
         try {
-            await updateSpecWithResponse($, element, action, fullResponse, config.specFile, hasCode);
+            await updateSpecWithResponse($, element, action, fullResponse, config.specFile, hasCode, outputFileName);
         }
         finally {
             watcher.setUpdating(false);

package/dist/updater.d.ts

@@ -6,11 +6,11 @@ import type { Element } from 'domhandler';
 /**
  * Strip code blocks from response and replace with reference
  */
-export declare function stripCodeBlocks(response: string, hasCode: boolean): string;
+export declare function stripCodeBlocks(response: string, hasCode: boolean, outputFileName?: string): 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;
+export declare function updateElementWithResponse($: CheerioAPI, element: Element, action: 'gen' | 'retry' | 'undo', response: string, hasCode?: boolean, outputFileName?: string): void;
 /**
  * Serialize cheerio DOM back to HTML string
  */
@@ -26,4 +26,4 @@ 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>;
+export declare function updateSpecWithResponse($: CheerioAPI, element: Element, action: 'gen' | 'retry' | 'undo', response: string, filePath: string, hasCode?: boolean, outputFileName?: string): Promise<void>;

package/dist/updater.js

@@ -6,25 +6,25 @@ import { logger } from './utils/logger.js';
 /**
  * Strip code blocks from response and replace with reference
  */
-export function stripCodeBlocks(response, hasCode) {
+export function stripCodeBlocks(response, hasCode, outputFileName) {
     // Remove code blocks (```...```)
     const withoutCodeBlocks = response.replace(/```[\s\S]*?```/g, '').trim();
     // If there was code, add a reference
-    if (hasCode) {
-        return `${withoutCodeBlocks}\n\n→ Implementation in spec.code.html`;
+    if (hasCode && outputFileName) {
+        return `${withoutCodeBlocks}\n\n→ Implementation in ${outputFileName}`;
     }
     return withoutCodeBlocks;
 }
 /**
  * Update element with AI response: remove action attribute and add/update <ai> child
  */
-export function updateElementWithResponse($, element, action, response, hasCode = false) {
+export function updateElementWithResponse($, element, action, response, hasCode = false, outputFileName) {
     const $element = $(element);
     // 1. Remove the action attribute (gen/retry/undo)
     $element.removeAttr(action);
     logger.debug(`Removed '${action}' attribute from element`);
     // 2. Strip code blocks and add reference if code was generated
-    const cleanResponse = stripCodeBlocks(response, hasCode);
+    const cleanResponse = stripCodeBlocks(response, hasCode, outputFileName);
     // 3. Add or append <ai> child element with response
     // Create new <ai> element
     const aiElement = $('<ai></ai>');
@@ -66,9 +66,9 @@ export function sleep(ms) {
 /**
  * Complete update flow: remove action attribute, add AI response, serialize, write file
  */
-export async function updateSpecWithResponse($, element, action, response, filePath, hasCode = false) {
+export async function updateSpecWithResponse($, element, action, response, filePath, hasCode = false, outputFileName) {
     // Update the element: remove action attribute and add <ai> child
-    updateElementWithResponse($, element, action, response, hasCode);
+    updateElementWithResponse($, element, action, response, hasCode, outputFileName);
     // Serialize back to HTML
     const updatedHTML = await serializeToHTML($);
     // Write to file

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claudiv/cli",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Claude in a Div — Universal Declarative Generation Platform",
   "main": "dist/index.js",
   "type": "module",