workon 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="1.4.0"></a>
+# [1.4.0](https://github.com/israelroldan/workon/compare/v1.3.0...v1.4.0) (2025-08-06)
+
+
+### Features
+
+* Integrate NPM command support and enhance terminal layouts ([f877ec4](https://github.com/israelroldan/workon/commit/f877ec4))
+
+
+
 <a name="1.3.0"></a>
 # [1.3.0](https://github.com/israelroldan/workon/compare/v1.2.1...v1.3.0) (2025-08-06)
 

package/cli/manage.js

@@ -127,7 +127,8 @@ class manage extends command {
                     { name: 'Change directory (cwd)', value: 'cwd', checked: true },
                     { name: 'Open in IDE', value: 'ide', checked: true },
                     { name: 'Open homepage in browser', value: 'web' },
-                    { name: 'Launch Claude Code', value: 'claude' }
+                    { name: 'Launch Claude Code', value: 'claude' },
+                    { name: 'Run NPM command', value: 'npm' }
                 ]
             }
         ];
@@ -141,6 +142,10 @@ class manage extends command {
                 // Ask for Claude-specific configuration
                 const claudeConfig = await me.configureClaudeEvent();
                 events[event] = claudeConfig;
+            } else if (event === 'npm') {
+                // Ask for NPM-specific configuration
+                const npmConfig = await me.configureNpmEvent();
+                events[event] = npmConfig;
             } else {
                 events[event] = 'true';
             }
@@ -247,7 +252,8 @@ class manage extends command {
                     { name: 'Change directory (cwd)', value: 'cwd', checked: currentEvents.includes('cwd') },
                     { name: 'Open in IDE', value: 'ide', checked: currentEvents.includes('ide') },
                     { name: 'Open homepage in browser', value: 'web', checked: currentEvents.includes('web') },
-                    { name: 'Launch Claude Code', value: 'claude', checked: currentEvents.includes('claude') }
+                    { name: 'Launch Claude Code', value: 'claude', checked: currentEvents.includes('claude') },
+                    { name: 'Run NPM command', value: 'npm', checked: currentEvents.includes('npm') }
                 ]
             }
         ];
@@ -276,6 +282,25 @@ class manage extends command {
                 } else {
                     events[event] = await me.configureClaudeEvent();
                 }
+            } else if (event === 'npm') {
+                // If npm was previously configured with advanced options, preserve or update them
+                const existingNpmConfig = project.events && project.events.npm;
+                if (existingNpmConfig && typeof existingNpmConfig === 'object') {
+                    const keepConfig = await inquirer.prompt([{
+                        type: 'confirm',
+                        name: 'keep',
+                        message: 'Keep existing NPM configuration?',
+                        default: true
+                    }]);
+                    
+                    if (keepConfig.keep) {
+                        events[event] = existingNpmConfig;
+                    } else {
+                        events[event] = await me.configureNpmEvent();
+                    }
+                } else {
+                    events[event] = await me.configureNpmEvent();
+                }
             } else {
                 events[event] = 'true';
             }
@@ -451,6 +476,70 @@ class manage extends command {
 
         return config;
     }
+
+    async configureNpmEvent() {
+        let me = this;
+        
+        me.log.log('\n📦 Configure NPM Event\n');
+        
+        const npmQuestions = [
+            {
+                type: 'input',
+                name: 'command',
+                message: 'NPM script to run (e.g., dev, start, test):',
+                default: 'dev',
+                validate: (value) => {
+                    if (!value.trim()) {
+                        return 'NPM command cannot be empty';
+                    }
+                    return true;
+                }
+            },
+            {
+                type: 'confirm',
+                name: 'useAdvanced',
+                message: 'Configure advanced NPM options?',
+                default: false
+            }
+        ];
+
+        const basicAnswers = await inquirer.prompt(npmQuestions);
+        
+        if (!basicAnswers.useAdvanced) {
+            return basicAnswers.command;
+        }
+
+        const advancedQuestions = [
+            {
+                type: 'confirm',
+                name: 'watch',
+                message: 'Enable watch mode (if supported by command)?',
+                default: true
+            },
+            {
+                type: 'confirm',
+                name: 'auto_restart',
+                message: 'Auto-restart on crashes?',
+                default: false
+            }
+        ];
+
+        const advancedAnswers = await inquirer.prompt(advancedQuestions);
+        
+        const config = {
+            command: basicAnswers.command
+        };
+
+        if (advancedAnswers.watch) {
+            config.watch = true;
+        }
+
+        if (advancedAnswers.auto_restart) {
+            config.auto_restart = true;
+        }
+
+        return config;
+    }
 }
 
 manage.define({

package/cli/open.js

@@ -64,17 +64,26 @@ class open extends command {
             me.shellCommands = [];
         }
 
-        // Check for split terminal scenario
+        // Intelligent layout detection
         const hasCwd = events.includes('cwd');
         const hasClaudeEvent = events.includes('claude');
-        const claudeConfig = project.events.claude;
-        const shouldUseSplitTerminal = hasCwd && hasClaudeEvent && 
-            claudeConfig && typeof claudeConfig === 'object' && claudeConfig.split_terminal;
-
-        if (shouldUseSplitTerminal) {
+        const hasNpmEvent = events.includes('npm');
+        
+        if (hasCwd && hasClaudeEvent && hasNpmEvent) {
+            // Three-pane layout: Claude + Terminal + NPM
+            await me.handleThreePaneLayout(project, isShellMode);
+            // Process other events except cwd, claude, and npm
+            events.filter(e => !['cwd', 'claude', 'npm'].includes(e)).forEach(me.processEvent.bind(me));
+        } else if (hasCwd && hasNpmEvent) {
+            // Two-pane layout: Terminal + NPM (no Claude)
+            await me.handleTwoPaneNpmLayout(project, isShellMode);
+            // Process other events except cwd and npm
+            events.filter(e => !['cwd', 'npm'].includes(e)).forEach(me.processEvent.bind(me));
+        } else if (hasCwd && hasClaudeEvent) {
+            // Two-pane layout: Claude + Terminal (existing split terminal)
             await me.handleSplitTerminal(project, isShellMode);
             // Process other events except cwd and claude
-            events.filter(e => e !== 'cwd' && e !== 'claude').forEach(me.processEvent.bind(me));
+            events.filter(e => !['cwd', 'claude'].includes(e)).forEach(me.processEvent.bind(me));
         } else {
             // Normal event processing
             events.forEach(me.processEvent.bind(me));
@@ -135,6 +144,118 @@ class open extends command {
         }
     }
 
+    async handleThreePaneLayout(project, isShellMode) {
+        let me = this;
+        const tmux = new TmuxManager();
+        const claudeConfig = project.events.claude;
+        const claudeArgs = (claudeConfig && claudeConfig.flags) ? claudeConfig.flags : [];
+        const npmConfig = project.events.npm;
+        const npmCommand = me.getNpmCommand(npmConfig);
+        
+        if (isShellMode) {
+            // Check if tmux is available
+            if (await tmux.isTmuxAvailable()) {
+                const commands = tmux.buildThreePaneShellCommands(
+                    project.name, 
+                    project.path.path, 
+                    claudeArgs,
+                    npmCommand
+                );
+                me.shellCommands.push(...commands);
+            } else {
+                // Fall back to normal behavior if tmux is not available
+                me.log.debug('Tmux not available, falling back to normal mode');
+                me.shellCommands.push(`cd "${project.path.path}"`);
+                const claudeCommand = claudeArgs.length > 0 
+                    ? `claude ${claudeArgs.join(' ')}`
+                    : 'claude';
+                me.shellCommands.push(claudeCommand);
+                me.shellCommands.push(npmCommand);
+            }
+        } else {
+            // Direct execution mode
+            if (await tmux.isTmuxAvailable()) {
+                try {
+                    const sessionName = await tmux.createThreePaneSession(
+                        project.name, 
+                        project.path.path, 
+                        claudeArgs,
+                        npmCommand
+                    );
+                    await tmux.attachToSession(sessionName);
+                } catch (error) {
+                    me.log.debug(`Failed to create tmux session: ${error.message}`);
+                    // Fall back to normal behavior
+                    me.processEvent('cwd');
+                    me.processEvent('claude');
+                    me.processEvent('npm');
+                }
+            } else {
+                me.log.debug('Tmux not available, falling back to normal mode');
+                // Fall back to normal behavior
+                me.processEvent('cwd');
+                me.processEvent('claude');
+                me.processEvent('npm');
+            }
+        }
+    }
+
+    async handleTwoPaneNpmLayout(project, isShellMode) {
+        let me = this;
+        const tmux = new TmuxManager();
+        const npmConfig = project.events.npm;
+        const npmCommand = me.getNpmCommand(npmConfig);
+        
+        if (isShellMode) {
+            // Check if tmux is available
+            if (await tmux.isTmuxAvailable()) {
+                const commands = tmux.buildTwoPaneNpmShellCommands(
+                    project.name, 
+                    project.path.path, 
+                    npmCommand
+                );
+                me.shellCommands.push(...commands);
+            } else {
+                // Fall back to normal behavior if tmux is not available
+                me.log.debug('Tmux not available, falling back to normal mode');
+                me.shellCommands.push(`cd "${project.path.path}"`);
+                me.shellCommands.push(npmCommand);
+            }
+        } else {
+            // Direct execution mode
+            if (await tmux.isTmuxAvailable()) {
+                try {
+                    const sessionName = await tmux.createTwoPaneNpmSession(
+                        project.name, 
+                        project.path.path, 
+                        npmCommand
+                    );
+                    await tmux.attachToSession(sessionName);
+                } catch (error) {
+                    me.log.debug(`Failed to create tmux session: ${error.message}`);
+                    // Fall back to normal behavior
+                    me.processEvent('cwd');
+                    me.processEvent('npm');
+                }
+            } else {
+                me.log.debug('Tmux not available, falling back to normal mode');
+                // Fall back to normal behavior
+                me.processEvent('cwd');
+                me.processEvent('npm');
+            }
+        }
+    }
+
+    getNpmCommand(npmConfig) {
+        if (typeof npmConfig === 'string') {
+            return `npm run ${npmConfig}`;
+        } else if (npmConfig && typeof npmConfig === 'object' && npmConfig.command) {
+            return `npm run ${npmConfig.command}`;
+        } else {
+            return 'npm run dev';
+        }
+    }
+
     processEvent (event) {
         let me = this;
         let environment = me.root().environment;
@@ -213,6 +334,18 @@ class open extends command {
                         });
                     }
                 break;
+                case 'npm':
+                    let npmCommand = me.getNpmCommand(project.events.npm);
+                    
+                    if (isShellMode) {
+                        me.shellCommands.push(npmCommand);
+                    } else {
+                        spawn('npm', ['run', npmCommand.replace('npm run ', '')], {
+                            cwd: environment.project.path.path,
+                            stdio: 'inherit'
+                        });
+                    }
+                break;
             }
         }
         if (`before${capitalEvt}` in scripts) {

package/docs/ideas.md

@@ -2,86 +2,92 @@
 
 This document contains ideas for future enhancements to the workon project.
 
-## Interactive Project Management
+## NPM Command Integration
 
-### Project Configuration Editor
-Create an interactive mode for editing project configurations through guided prompts instead of manual file editing.
+### Three-Pane Development Layout
+When `cwd`, `claude`, and `npm` events are enabled, create a three-pane tmux layout:
+- **Left pane**: Claude Code running in project directory (full height)
+- **Top-right pane**: Shell terminal in project directory  
+- **Bottom-right pane**: NPM command running (e.g., `npm run dev`, `npm test`)
 
-**Features:**
-- Interactive project creation wizard with step-by-step guidance
-- Edit existing project properties (name, path, IDE, events) through prompts
-- Validate project paths and IDE commands during configuration
-- Preview configuration changes before saving
-- Bulk operations for managing multiple projects
-
-**Implementation considerations:**
-- Extend existing inquirer-based interactive system
-- Add new command like `workon config` or `workon manage --interactive`
-- Provide different flows for:
-  - Creating new projects
-  - Editing existing projects
-  - Bulk project management
-- Include validation for:
-  - Directory paths existence
-  - IDE command availability
-  - Event configuration correctness
-
-**Benefits:**
-- Lower barrier to entry for new users
-- Reduced configuration errors through validation
-- More discoverable project management features
-- Better UX compared to manual JSON editing
-
-## Enhanced Events
+**Implementation approach:**
+- Extend current split terminal to support three panes
+- Create initial vertical split (Claude | Terminal)
+- Split the right terminal pane horizontally (Terminal | npm)
+- Use tmux: `split-window -v` on the right pane
+- Auto-run specified npm command in bottom-right pane
 
-### Advanced claude Event Options ✅ IMPLEMENTED
-The claude event now supports advanced configuration options:
+**Configuration:**
 ```json
-"claude": {
-  "flags": ["--resume", "--debug"]
+{
+  "events": {
+    "cwd": "true",
+    "claude": {
+      "flags": ["--resume"],
+      "split_terminal": true
+    },
+    "npm": "dev"
+  }
 }
 ```
 
-**Available through:** `workon manage` → Configure advanced Claude options
-
-### Split Terminal with Claude + CWD
-When both `claude` and `cwd` events are enabled, automatically create a split terminal layout:
-- **Left pane**: Claude Code running in project directory
-- **Right pane**: Shell terminal in project directory  
-
-**Implementation approach:**
-- Use tmux to create split session
-- Detect when both events are present
-- Create session: `tmux new-session -d -s "workon-{project}"`
-- Split horizontally: `tmux split-window -h`
-- Run claude in left pane, shell in right pane
-- Attach to session
-
-**Configuration:**
+**Alternative configuration:**
 ```json
-"claude": {
-  "flags": ["--resume"],
-  "split_terminal": true
+{
+  "events": {
+    "cwd": "true", 
+    "claude": "true",
+    "npm": {
+      "command": "dev",
+      "watch": true,
+      "auto_restart": false
+    }
+  }
 }
 ```
 
 **Benefits:**
-- Claude and terminal side-by-side for optimal workflow
-- Easy switching between AI assistance and command execution
-- Persistent session that can be reattached
+- Complete development environment in one tmux session
+- Claude AI + Terminal + Development server all visible
+- Perfect for web development workflows
+- Automatic npm script execution
 
-### Future claude Event Enhancements
-Additional options that could be implemented:
-```json
-"claude": {
-  "flags": ["--resume"],
-  "mode": "interactive", 
-  "project_context": true,
-  "working_directory": "src/",
-  "tmux_layout": "even-horizontal"
-}
+**Tmux Layout:**
+```
+┌──────────────┬──────────────┐
+│              │   Terminal   │
+│    Claude    ├──────────────┤
+│   (full      │ npm run dev  │
+│   height)    │              │
+└──────────────┴──────────────┘
+```
+
+### Two-Pane Terminal + NPM Layout
+When `cwd` and `npm` events are enabled (without Claude), create a two-pane tmux layout:
+- **Left pane**: Shell terminal in project directory
+- **Right pane**: NPM command running (e.g., `npm run dev`, `npm test`)
+
+**Tmux Layout:**
+```
+┌──────────────┬──────────────┐
+│              │              │
+│   Terminal   │ npm run dev  │
+│              │              │
+│              │              │
+└──────────────┴──────────────┘
 ```
 
+**Use cases:**
+- Traditional development workflow without AI assistance
+- Monitoring build output while running commands
+- Side-by-side terminal and dev server
+
 ## Future Ideas
 
+### Auto-enable Split Terminal
+When both `cwd` and `claude` events are enabled, automatically enable split terminal mode without requiring explicit configuration.
+
+### Project Templates
+Pre-configured project templates for common development stacks (React, Node.js, Python, etc.) with appropriate events and npm commands.
+
 *Add more ideas here as they come up...*

package/lib/tmux.js

@@ -62,6 +62,53 @@ class TmuxManager {
         return sessionName;
     }
 
+    async createThreePaneSession(projectName, projectPath, claudeArgs = [], npmCommand = 'npm run dev') {
+        const sessionName = this.getSessionName(projectName);
+        
+        // Kill existing session if it exists
+        if (await this.sessionExists(sessionName)) {
+            await this.killSession(sessionName);
+        }
+
+        const claudeCommand = claudeArgs.length > 0 
+            ? `claude ${claudeArgs.join(' ')}`
+            : 'claude';
+
+        // Create new tmux session with claude in the first pane (left side)
+        await exec(`tmux new-session -d -s "${sessionName}" -c "${projectPath}" '${claudeCommand}'`);
+        
+        // Split window vertically - creates right side
+        await exec(`tmux split-window -h -t "${sessionName}" -c "${projectPath}"`);
+        
+        // Split the right pane horizontally - creates top-right and bottom-right
+        await exec(`tmux split-window -v -t "${sessionName}:0.1" -c "${projectPath}" '${npmCommand}'`);
+        
+        // Set focus on claude pane (left pane)
+        await exec(`tmux select-pane -t "${sessionName}:0.0"`);
+
+        return sessionName;
+    }
+
+    async createTwoPaneNpmSession(projectName, projectPath, npmCommand = 'npm run dev') {
+        const sessionName = this.getSessionName(projectName);
+        
+        // Kill existing session if it exists
+        if (await this.sessionExists(sessionName)) {
+            await this.killSession(sessionName);
+        }
+
+        // Create new tmux session with shell in the first pane (left side)
+        await exec(`tmux new-session -d -s "${sessionName}" -c "${projectPath}"`);
+        
+        // Split window vertically and run npm command in right pane
+        await exec(`tmux split-window -h -t "${sessionName}" -c "${projectPath}" '${npmCommand}'`);
+        
+        // Set focus on terminal pane (left pane)
+        await exec(`tmux select-pane -t "${sessionName}:0.0"`);
+
+        return sessionName;
+    }
+
     async attachToSession(sessionName) {
         // Check if we're already in a tmux session
         if (process.env.TMUX) {
@@ -93,6 +140,40 @@ class TmuxManager {
         ];
     }
 
+    buildThreePaneShellCommands(projectName, projectPath, claudeArgs = [], npmCommand = 'npm run dev') {
+        const sessionName = this.getSessionName(projectName);
+        const claudeCommand = claudeArgs.length > 0 
+            ? `claude ${claudeArgs.join(' ')}`
+            : 'claude';
+
+        return [
+            `# Create tmux three-pane session for ${projectName}`,
+            `tmux has-session -t "${sessionName}" 2>/dev/null && tmux kill-session -t "${sessionName}"`,
+            `tmux new-session -d -s "${sessionName}" -c "${projectPath}" '${claudeCommand}'`,
+            `tmux split-window -h -t "${sessionName}" -c "${projectPath}"`,
+            `tmux split-window -v -t "${sessionName}:0.1" -c "${projectPath}" '${npmCommand}'`,
+            `tmux select-pane -t "${sessionName}:0.0"`,
+            process.env.TMUX 
+                ? `tmux switch-client -t "${sessionName}"`
+                : `tmux attach-session -t "${sessionName}"`
+        ];
+    }
+
+    buildTwoPaneNpmShellCommands(projectName, projectPath, npmCommand = 'npm run dev') {
+        const sessionName = this.getSessionName(projectName);
+
+        return [
+            `# Create tmux two-pane session with npm for ${projectName}`,
+            `tmux has-session -t "${sessionName}" 2>/dev/null && tmux kill-session -t "${sessionName}"`,
+            `tmux new-session -d -s "${sessionName}" -c "${projectPath}"`,
+            `tmux split-window -h -t "${sessionName}" -c "${projectPath}" '${npmCommand}'`,
+            `tmux select-pane -t "${sessionName}:0.0"`,
+            process.env.TMUX 
+                ? `tmux switch-client -t "${sessionName}"`
+                : `tmux attach-session -t "${sessionName}"`
+        ];
+    }
+
     async listWorkonSessions() {
         try {
             const { stdout } = await exec('tmux list-sessions -F "#{session_name}"');

package/lib/validation.js

@@ -79,7 +79,7 @@ class ProjectValidator {
             return 'Events must be an object';
         }
 
-        const validEvents = ['cwd', 'ide', 'web', 'claude'];
+        const validEvents = ['cwd', 'ide', 'web', 'claude', 'npm'];
         const invalidEvents = Object.keys(events).filter(event => !validEvents.includes(event));
         
         if (invalidEvents.length > 0) {
@@ -94,6 +94,14 @@ class ProjectValidator {
             }
         }
 
+        // Validate npm event configuration if present
+        if (events.npm && typeof events.npm === 'object') {
+            const npmValidation = this.validateNpmConfig(events.npm);
+            if (npmValidation !== true) {
+                return npmValidation;
+            }
+        }
+
         return true;
     }
 
@@ -126,6 +134,31 @@ class ProjectValidator {
         return true;
     }
 
+    validateNpmConfig(config) {
+        if (typeof config !== 'object') {
+            return 'NPM configuration must be an object';
+        }
+
+        // Validate command if present
+        if (config.command) {
+            if (typeof config.command !== 'string' || config.command.trim() === '') {
+                return 'NPM command must be a non-empty string';
+            }
+        }
+
+        // Validate watch if present
+        if (config.watch !== undefined && typeof config.watch !== 'boolean') {
+            return 'NPM watch must be a boolean';
+        }
+
+        // Validate auto_restart if present
+        if (config.auto_restart !== undefined && typeof config.auto_restart !== 'boolean') {
+            return 'NPM auto_restart must be a boolean';
+        }
+
+        return true;
+    }
+
     validateUrl(url) {
         if (!url) return true; // Optional field
         

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "workon",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Work on something great!",
   "main": "index.js",
   "scripts": {