workon 1.2.1 → 1.4.0

package/cli/manage.js

@@ -127,18 +127,29 @@ 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' }
                 ]
             }
         ];
 
         const answers = await inquirer.prompt(questions);
 
-        // Convert events array to object
+        // Convert events array to object and configure advanced options
         const events = {};
-        answers.events.forEach(event => {
-            events[event] = 'true';
-        });
+        for (const event of answers.events) {
+            if (event === 'claude') {
+                // 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';
+            }
+        }
 
         const projectConfig = {
             path: answers.path,
@@ -241,18 +252,59 @@ 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') }
                 ]
             }
         ];
 
         const answers = await inquirer.prompt(questions);
 
-        // Convert events array to object
+        // Convert events array to object and configure advanced options
         const events = {};
-        answers.events.forEach(event => {
-            events[event] = 'true';
-        });
+        for (const event of answers.events) {
+            if (event === 'claude') {
+                // If claude was previously configured with advanced options, preserve or update them
+                const existingClaudeConfig = project.events && project.events.claude;
+                if (existingClaudeConfig && typeof existingClaudeConfig === 'object') {
+                    const keepConfig = await inquirer.prompt([{
+                        type: 'confirm',
+                        name: 'keep',
+                        message: 'Keep existing Claude configuration?',
+                        default: true
+                    }]);
+                    
+                    if (keepConfig.keep) {
+                        events[event] = existingClaudeConfig;
+                    } else {
+                        events[event] = await me.configureClaudeEvent();
+                    }
+                } 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';
+            }
+        }
 
         const updatedProject = {
             path: answers.path,
@@ -371,6 +423,123 @@ class manage extends command {
             return me.startManagement();
         }
     }
+
+    async configureClaudeEvent() {
+        let me = this;
+        
+        me.log.log('\n⚙️  Configure Claude Event\n');
+        
+        const claudeQuestions = [
+            {
+                type: 'confirm',
+                name: 'useAdvanced',
+                message: 'Configure advanced Claude options?',
+                default: false
+            }
+        ];
+
+        const claudeAnswer = await inquirer.prompt(claudeQuestions);
+        
+        if (!claudeAnswer.useAdvanced) {
+            return 'true';
+        }
+
+        const advancedQuestions = [
+            {
+                type: 'input',
+                name: 'flags',
+                message: 'Claude flags (comma-separated, e.g. --resume,--debug):',
+                filter: (input) => {
+                    if (!input.trim()) return [];
+                    return input.split(',').map(flag => flag.trim()).filter(flag => flag);
+                }
+            },
+            {
+                type: 'confirm',
+                name: 'split_terminal',
+                message: 'Enable split terminal (Claude + shell side-by-side with tmux)?',
+                default: false
+            }
+        ];
+
+        const advancedAnswers = await inquirer.prompt(advancedQuestions);
+        
+        const config = {};
+
+        if (advancedAnswers.flags && advancedAnswers.flags.length > 0) {
+            config.flags = advancedAnswers.flags;
+        }
+
+        if (advancedAnswers.split_terminal) {
+            config.split_terminal = true;
+        }
+
+        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

@@ -3,6 +3,7 @@ const Project = require('../lib/project');
 const { ProjectEnvironment } = require('../lib/environment');
 const spawn = require('child_process').spawn;
 const File = require('phylo');
+const TmuxManager = require('../lib/tmux');
 
 class open extends command {
     execute (params) {
@@ -15,7 +16,7 @@ class open extends command {
         }
     }
 
-    processProject (project) {
+    async processProject (project) {
         let me = this;
         let environment = me.root().environment;
 
@@ -29,7 +30,7 @@ class open extends command {
                 if (project in projects) {
                     let cfg = projects[project];
                     cfg.name = project;
-                    me.switchTo(ProjectEnvironment.load(cfg, me.config.get('project_defaults')));
+                    await me.switchTo(ProjectEnvironment.load(cfg, me.config.get('project_defaults')));
                 } else {
                     me.log.debug(`Project '${project}' not found, starting interactive mode`);
                     return me.startInteractiveMode(project);
@@ -46,7 +47,7 @@ class open extends command {
         return interactiveCmd.dispatch(new me.args.constructor([project]))
     }
 
-    switchTo (environment) {
+    async switchTo (environment) {
         let me = this;
         me.root().environment = environment;
         let project = environment.project;
@@ -63,7 +64,30 @@ class open extends command {
             me.shellCommands = [];
         }
 
-        events.forEach(me.processEvent.bind(me));
+        // Intelligent layout detection
+        const hasCwd = events.includes('cwd');
+        const hasClaudeEvent = events.includes('claude');
+        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 => !['cwd', 'claude'].includes(e)).forEach(me.processEvent.bind(me));
+        } else {
+            // Normal event processing
+            events.forEach(me.processEvent.bind(me));
+        }
 
         // Output collected shell commands if in shell mode
         if (isShellMode && me.shellCommands.length > 0) {
@@ -71,6 +95,167 @@ class open extends command {
         }
     }
 
+    async handleSplitTerminal(project, isShellMode) {
+        let me = this;
+        const tmux = new TmuxManager();
+        const claudeConfig = project.events.claude;
+        const claudeArgs = (claudeConfig && claudeConfig.flags) ? claudeConfig.flags : [];
+        
+        if (isShellMode) {
+            // Check if tmux is available
+            if (await tmux.isTmuxAvailable()) {
+                const commands = tmux.buildShellCommands(
+                    project.name, 
+                    project.path.path, 
+                    claudeArgs
+                );
+                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);
+            }
+        } else {
+            // Direct execution mode
+            if (await tmux.isTmuxAvailable()) {
+                try {
+                    const sessionName = await tmux.createSplitSession(
+                        project.name, 
+                        project.path.path, 
+                        claudeArgs
+                    );
+                    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');
+                }
+            } else {
+                me.log.debug('Tmux not available, falling back to normal mode');
+                // Fall back to normal behavior
+                me.processEvent('cwd');
+                me.processEvent('claude');
+            }
+        }
+    }
+
+    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;
@@ -126,10 +311,36 @@ class open extends command {
                     }
                 break;
                 case 'claude':
+                    let claudeArgs = [];
+                    let claudeConfig = project.events.claude;
+                    
+                    // Handle advanced Claude configuration
+                    if (claudeConfig && typeof claudeConfig === 'object') {
+                        if (claudeConfig.flags && Array.isArray(claudeConfig.flags)) {
+                            claudeArgs = claudeArgs.concat(claudeConfig.flags);
+                        }
+                        // Additional config options can be handled here in the future
+                    }
+                    
+                    if (isShellMode) {
+                        let claudeCommand = claudeArgs.length > 0 
+                            ? `claude ${claudeArgs.join(' ')}`
+                            : 'claude';
+                        me.shellCommands.push(claudeCommand);
+                    } else {
+                        spawn('claude', claudeArgs, {
+                            cwd: environment.project.path.path,
+                            stdio: 'inherit'
+                        });
+                    }
+                break;
+                case 'npm':
+                    let npmCommand = me.getNpmCommand(project.events.npm);
+                    
                     if (isShellMode) {
-                        me.shellCommands.push(`claude`);
+                        me.shellCommands.push(npmCommand);
                     } else {
-                        spawn('claude', [], {
+                        spawn('npm', ['run', npmCommand.replace('npm run ', '')], {
                             cwd: environment.project.path.path,
                             stdio: 'inherit'
                         });

package/docs/ideas.md

@@ -2,48 +2,92 @@
 
 This document contains ideas for future enhancements to the workon project.
 
-## Interactive Project Management
-
-### Project Configuration Editor
-Create an interactive mode for editing project configurations through guided prompts instead of manual file editing.
-
-**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
+## NPM Command Integration
 
-**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
+### 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`)
+
+**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
 
-## Enhanced Events
+**Configuration:**
+```json
+{
+  "events": {
+    "cwd": "true",
+    "claude": {
+      "flags": ["--resume"],
+      "split_terminal": true
+    },
+    "npm": "dev"
+  }
+}
+```
 
-### Advanced claude Event Options
-Extend the claude event with more configuration options:
+**Alternative configuration:**
 ```json
-"claude": {
-  "mode": "interactive",
-  "flags": ["--resume"],
-  "project_context": true
+{
+  "events": {
+    "cwd": "true", 
+    "claude": "true",
+    "npm": {
+      "command": "dev",
+      "watch": true,
+      "auto_restart": false
+    }
+  }
 }
 ```
 
+**Benefits:**
+- Complete development environment in one tmux session
+- Claude AI + Terminal + Development server all visible
+- Perfect for web development workflows
+- Automatic npm script execution
+
+**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...*