claude-cli-advanced-starter-pack 1.8.4 → 1.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-cli-advanced-starter-pack",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "description": "Advanced Claude Code CLI toolkit - agents, hooks, skills, MCP servers, phased development, and GitHub integration",
   "main": "src/index.js",
   "bin": {

package/src/cli/menu.js

@@ -20,11 +20,13 @@ import { runCreatePhaseDev, showPhasDevMainMenu } from '../commands/create-phase
 import { runExploreMcp, showExploreMcpMenu } from '../commands/explore-mcp.js';
 import { runClaudeAudit, showClaudeAuditMenu } from '../commands/claude-audit.js';
 import { runRoadmap, showRoadmapMenu } from '../commands/roadmap.js';
-import { launchPanel } from '../commands/panel.js';
+import { launchPanel, launchPanelInline } from '../commands/panel.js';
 import { hasTestingConfig } from '../testing/config.js';
 import { showHelp } from '../commands/help.js';
 import { hasValidConfig, getVersion, loadTechStack, saveTechStack } from '../utils.js';
 import { performVersionCheck, formatUpdateBanner } from '../utils/version-check.js';
+import { isHappyMode, shouldUseMobileUI } from '../utils/happy-detect.js';
+import { showMobileMenu, showMobilePanel, showMobileSettings, mobileReturnPrompt } from './mobile-menu.js';
 
 /**
  * Get bypass permissions status from settings.json
@@ -655,8 +657,15 @@ async function configureHappy(techStack) {
 
 /**
  * Show main interactive menu
+ * Automatically detects Happy CLI and switches to mobile-optimized UI
  */
 export async function showMainMenu() {
+  // Check if we should use mobile UI (Happy CLI detected or happyMode.enabled)
+  const techStack = loadTechStack();
+  if (shouldUseMobileUI(techStack)) {
+    return showMobileMainMenu();
+  }
+
   console.clear();
   console.log(chalk.cyan(BANNER));
   console.log('');
@@ -790,7 +799,7 @@ export async function showMainMenu() {
       name: 'action',
       message: 'Select an option:',
       choices,
-      pageSize: 10,
+      pageSize: 20,
     },
   ]);
 
@@ -1063,3 +1072,164 @@ export function showWarning(message) {
 export function showInfo(message) {
   console.log(chalk.blue(`ℹ ${message}`));
 }
+
+/**
+ * Mobile-optimized main menu handler
+ * Routes actions from the mobile menu to their handlers
+ */
+async function showMobileMainMenu() {
+  const action = await showMobileMenu();
+
+  switch (action) {
+    case 'create':
+      const configured = hasValidConfig();
+      if (!configured) {
+        console.log(chalk.yellow('Setup required first.'));
+        const { proceed } = await inquirer.prompt([
+          { type: 'confirm', name: 'proceed', message: 'Run setup?', default: true }
+        ]);
+        if (proceed) await runSetup({});
+      } else {
+        await runCreate({});
+      }
+      break;
+
+    case 'decompose':
+      if (!hasValidConfig()) {
+        console.log(chalk.yellow('Setup required first.'));
+      } else {
+        await runDecompose({});
+      }
+      break;
+
+    case 'sync':
+      if (!hasValidConfig()) {
+        console.log(chalk.yellow('Setup required first.'));
+      } else {
+        await runSync({ subcommand: 'status' });
+      }
+      break;
+
+    case 'setup':
+      await runSetup({});
+      break;
+
+    case 'list':
+      if (!hasValidConfig()) {
+        console.log(chalk.yellow('Setup required first.'));
+      } else {
+        await runList({});
+      }
+      break;
+
+    case 'install':
+      await runInstall({});
+      break;
+
+    case 'panel-inline':
+      // Show panel inline instead of launching new window
+      await showMobilePanelLoop();
+      break;
+
+    case 'test-setup':
+      await runTestSetup({});
+      break;
+
+    case 'agent-creator':
+      await runCreateAgent({});
+      break;
+
+    case 'explore-mcp':
+      await showExploreMcpMenu();
+      break;
+
+    case 'project-settings':
+      await showMobileSettingsLoop();
+      break;
+
+    case 'help':
+      showHelp();
+      break;
+
+    case 'exit':
+      console.log(chalk.dim('Goodbye!'));
+      process.exit(0);
+  }
+
+  // Return to menu unless exiting
+  if (action !== 'exit') {
+    const back = await mobileReturnPrompt();
+    if (back) {
+      await showMobileMainMenu();
+    } else {
+      console.log(chalk.dim('Goodbye!'));
+      process.exit(0);
+    }
+  }
+}
+
+/**
+ * Mobile panel loop - inline panel without new window
+ */
+async function showMobilePanelLoop() {
+  while (true) {
+    const action = await showMobilePanel();
+
+    if (action === 'back') {
+      return;
+    }
+
+    // Copy command to clipboard and show instructions
+    console.log('');
+    console.log(chalk.cyan(`Command: ${action}`));
+    console.log(chalk.dim('Paste in Claude Code'));
+    console.log('');
+
+    // Try to copy to clipboard
+    try {
+      const { copyToClipboard } = await import('../panel/queue.js');
+      if (copyToClipboard(action)) {
+        console.log(chalk.green('✓ Copied to clipboard'));
+      }
+    } catch {
+      // Clipboard not available
+    }
+
+    await inquirer.prompt([
+      { type: 'input', name: 'continue', message: 'Enter to continue...' }
+    ]);
+  }
+}
+
+/**
+ * Mobile settings loop
+ */
+async function showMobileSettingsLoop() {
+  while (true) {
+    const action = await showMobileSettings();
+
+    if (action === 'back') {
+      return;
+    }
+
+    const techStack = loadTechStack();
+
+    switch (action) {
+      case 'github':
+        await configureGitHub(techStack);
+        break;
+      case 'deployment':
+        await configureDeployment(techStack);
+        break;
+      case 'tunnel':
+        await configureTunnel(techStack);
+        break;
+      case 'token':
+        await configureToken(techStack);
+        break;
+      case 'happy':
+        await configureHappy(techStack);
+        break;
+    }
+  }
+}

package/src/cli/mobile-menu.js

@@ -0,0 +1,230 @@
+/**
+ * Mobile-Optimized Menu System for Happy CLI
+ *
+ * Renders menus optimized for mobile screens (max 40 chars).
+ * Single-column layout, no overflow, minimal decorations.
+ */
+
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import { getVersion, loadTechStack, hasValidConfig } from '../utils.js';
+import { isHappyMode, getMobileWidth } from '../utils/happy-detect.js';
+
+// Mobile-friendly banner (40 chars max)
+const MOBILE_BANNER = `
+${chalk.cyan('╔══════════════════════════════════╗')}
+${chalk.cyan('║')} ${chalk.bold('CCASP')} ${chalk.dim('v' + getVersion().slice(0, 5))}${' '.repeat(17)}${chalk.cyan('║')}
+${chalk.cyan('║')} ${chalk.dim('Mobile Menu')}${' '.repeat(21)}${chalk.cyan('║')}
+${chalk.cyan('╚══════════════════════════════════╝')}`;
+
+// Compact panel banner for mobile
+const MOBILE_PANEL_BANNER = `
+${chalk.cyan('╔══════════════════════════════════╗')}
+${chalk.cyan('║')} ${chalk.bold('CCASP Panel')}${' '.repeat(20)}${chalk.cyan('║')}
+${chalk.cyan('╚══════════════════════════════════╝')}`;
+
+/**
+ * Truncate text to fit mobile width
+ * @param {string} text - Text to truncate
+ * @param {number} maxLen - Maximum length
+ * @returns {string} Truncated text
+ */
+function truncate(text, maxLen = 30) {
+  if (!text) return '';
+  // Strip ANSI codes for length calculation
+  const plainText = text.replace(/\x1B\[[0-9;]*m/g, '');
+  if (plainText.length <= maxLen) return text;
+  return text.slice(0, maxLen - 2) + '..';
+}
+
+/**
+ * Format a menu item for mobile (single line)
+ * @param {string} key - Shortcut key
+ * @param {string} label - Item label
+ * @returns {string} Formatted menu item
+ */
+function formatMobileItem(key, label) {
+  const truncLabel = truncate(label, 28);
+  return `${chalk.yellow(key + ')')} ${truncLabel}`;
+}
+
+/**
+ * Show mobile-optimized main menu
+ */
+export async function showMobileMenu() {
+  console.clear();
+  console.log(MOBILE_BANNER);
+
+  const configured = hasValidConfig();
+
+  // Status line
+  if (configured) {
+    console.log(chalk.green(' ✓ Configured'));
+  } else {
+    console.log(chalk.yellow(' ⚠ Not configured'));
+  }
+  console.log('');
+
+  // Single-column menu items
+  const choices = [
+    { name: formatMobileItem('1', 'Create Task'), value: 'create' },
+    { name: formatMobileItem('2', 'Decompose Issue'), value: 'decompose' },
+    { name: formatMobileItem('3', 'Sync Tasks'), value: 'sync' },
+    new inquirer.Separator(chalk.dim('─'.repeat(34))),
+    { name: formatMobileItem('4', 'Setup'), value: 'setup' },
+    { name: formatMobileItem('5', 'List Tasks'), value: 'list' },
+    { name: formatMobileItem('6', 'Install Command'), value: 'install' },
+    new inquirer.Separator(chalk.dim('─'.repeat(34))),
+    { name: formatMobileItem('P', 'Panel (inline)'), value: 'panel-inline' },
+    { name: formatMobileItem('T', 'Test Setup'), value: 'test-setup' },
+    { name: formatMobileItem('A', 'Agent Creator'), value: 'agent-creator' },
+    { name: formatMobileItem('M', 'MCP Explorer'), value: 'explore-mcp' },
+    new inquirer.Separator(chalk.dim('─'.repeat(34))),
+    { name: formatMobileItem('S', 'Settings'), value: 'project-settings' },
+    { name: formatMobileItem('?', 'Help'), value: 'help' },
+    { name: formatMobileItem('Q', 'Exit'), value: 'exit' },
+  ];
+
+  const { action } = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'action',
+      message: 'Select:',
+      choices,
+      pageSize: 12,
+    },
+  ]);
+
+  return action;
+}
+
+/**
+ * Show mobile-optimized panel menu (inline, no new window)
+ */
+export async function showMobilePanel() {
+  console.clear();
+  console.log(MOBILE_PANEL_BANNER);
+  console.log('');
+
+  // Single-column panel items
+  const choices = [
+    new inquirer.Separator(chalk.cyan(' Agents & Skills')),
+    { name: formatMobileItem('A', 'Create Agent'), value: '/create-agent' },
+    { name: formatMobileItem('H', 'Create Hook'), value: '/create-hook' },
+    { name: formatMobileItem('S', 'Create Skill'), value: '/create-skill' },
+    { name: formatMobileItem('M', 'Explore MCP'), value: '/explore-mcp' },
+    new inquirer.Separator(chalk.dim('─'.repeat(34))),
+    new inquirer.Separator(chalk.cyan(' Resources')),
+    { name: formatMobileItem('1', 'View Agents'), value: '/view-agents' },
+    { name: formatMobileItem('2', 'View Skills'), value: '/view-skills' },
+    { name: formatMobileItem('3', 'View Hooks'), value: '/view-hooks' },
+    { name: formatMobileItem('4', 'All Commands'), value: '/INDEX' },
+    new inquirer.Separator(chalk.dim('─'.repeat(34))),
+    new inquirer.Separator(chalk.cyan(' Quick Actions')),
+    { name: formatMobileItem('P', 'Phase Dev Plan'), value: '/phase-dev-plan' },
+    { name: formatMobileItem('G', 'GitHub Task'), value: '/github-task' },
+    { name: formatMobileItem('T', 'Run E2E Tests'), value: '/e2e-test' },
+    new inquirer.Separator(chalk.dim('─'.repeat(34))),
+    { name: formatMobileItem('B', 'Back'), value: 'back' },
+  ];
+
+  const { action } = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'action',
+      message: 'Select:',
+      choices,
+      pageSize: 15,
+    },
+  ]);
+
+  return action;
+}
+
+/**
+ * Show mobile-optimized project settings
+ */
+export async function showMobileSettings() {
+  console.clear();
+  console.log(chalk.cyan('╔══════════════════════════════════╗'));
+  console.log(chalk.cyan('║') + chalk.bold(' Settings') + ' '.repeat(23) + chalk.cyan('║'));
+  console.log(chalk.cyan('╚══════════════════════════════════╝'));
+  console.log('');
+
+  const choices = [
+    { name: formatMobileItem('1', 'GitHub Board'), value: 'github' },
+    { name: formatMobileItem('2', 'Deployment'), value: 'deployment' },
+    { name: formatMobileItem('3', 'Tunnel'), value: 'tunnel' },
+    { name: formatMobileItem('4', 'Token Budget'), value: 'token' },
+    { name: formatMobileItem('5', 'Happy Mode'), value: 'happy' },
+    new inquirer.Separator(chalk.dim('─'.repeat(34))),
+    { name: formatMobileItem('B', 'Back'), value: 'back' },
+  ];
+
+  const { action } = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'action',
+      message: 'Select:',
+      choices,
+      pageSize: 10,
+    },
+  ]);
+
+  return action;
+}
+
+/**
+ * Show a mobile-friendly success message
+ * @param {string} message - Success message
+ */
+export function showMobileSuccess(message) {
+  console.log('');
+  console.log(chalk.green(`✓ ${truncate(message, 32)}`));
+  console.log('');
+}
+
+/**
+ * Show a mobile-friendly error message
+ * @param {string} message - Error message
+ */
+export function showMobileError(message) {
+  console.log('');
+  console.log(chalk.red(`✗ ${truncate(message, 32)}`));
+  console.log('');
+}
+
+/**
+ * Show a mobile-friendly info box
+ * @param {string} title - Box title
+ * @param {string[]} lines - Content lines
+ */
+export function showMobileBox(title, lines = []) {
+  const width = getMobileWidth() - 4; // Account for borders
+  console.log('');
+  console.log(chalk.cyan('┌' + '─'.repeat(width) + '┐'));
+  console.log(chalk.cyan('│') + ` ${truncate(title, width - 2)}`.padEnd(width) + chalk.cyan('│'));
+  console.log(chalk.cyan('├' + '─'.repeat(width) + '┤'));
+  for (const line of lines) {
+    console.log(chalk.cyan('│') + ` ${truncate(line, width - 2)}`.padEnd(width) + chalk.cyan('│'));
+  }
+  console.log(chalk.cyan('└' + '─'.repeat(width) + '┘'));
+  console.log('');
+}
+
+/**
+ * Prompt to return to menu (mobile version)
+ * @returns {Promise<boolean>} True if user wants to return
+ */
+export async function mobileReturnPrompt() {
+  console.log('');
+  const { back } = await inquirer.prompt([
+    {
+      type: 'confirm',
+      name: 'back',
+      message: 'Back to menu?',
+      default: true,
+    },
+  ]);
+  return back;
+}

package/src/commands/explore-mcp/claude-md-updater.js

@@ -7,8 +7,33 @@
 
 import chalk from 'chalk';
 import ora from 'ora';
-import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
-import { join } from 'path';
+import { existsSync, readFileSync, writeFileSync, mkdirSync, copyFileSync } from 'fs';
+import { join, basename } from 'path';
+
+/**
+ * Create a backup of CLAUDE.md before modification
+ * @param {string} filePath - Path to CLAUDE.md
+ * @param {string} cwd - Working directory
+ * @returns {string|null} Backup path or null if failed
+ */
+function backupClaudeMd(filePath, cwd) {
+  if (!existsSync(filePath)) return null;
+
+  const backupDir = join(cwd, '.claude', 'backups');
+  if (!existsSync(backupDir)) {
+    mkdirSync(backupDir, { recursive: true });
+  }
+
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+  const backupPath = join(backupDir, `CLAUDE.md.${timestamp}.bak`);
+
+  try {
+    copyFileSync(filePath, backupPath);
+    return backupPath;
+  } catch {
+    return null;
+  }
+}
 
 /**
  * MCP section marker
@@ -158,6 +183,12 @@ ${mcpSection}
       };
     }
 
+    // Backup existing CLAUDE.md before modification
+    const backupPath = backupClaudeMd(claudeMdPath, cwd);
+    if (backupPath) {
+      spinner.text = 'Backed up CLAUDE.md...';
+    }
+
     // Check if MCP section exists
     const hasStartMarker = content.includes(MCP_SECTION_START);
     const hasEndMarker = content.includes(MCP_SECTION_END);
@@ -193,12 +224,13 @@ ${mcpSection}
     }
 
     writeFileSync(claudeMdPath, content, 'utf8');
-    spinner.succeed('Updated CLAUDE.md with MCP documentation');
+    spinner.succeed(`Updated CLAUDE.md with MCP documentation${backupPath ? ' (backup created)' : ''}`);
 
     return {
       success: true,
       action: hasStartMarker ? 'updated' : 'appended',
       path: claudeMdPath,
+      backupPath: backupPath || null,
     };
   } catch (error) {
     spinner.fail(`Failed to update CLAUDE.md: ${error.message}`);
@@ -225,6 +257,9 @@ export function removeMcpSection(cwd = process.cwd()) {
   const hasEndMarker = content.includes(MCP_SECTION_END);
 
   if (hasStartMarker && hasEndMarker) {
+    // Backup before removal
+    backupClaudeMd(claudeMdPath, cwd);
+
     const regex = new RegExp(
       `\\n?${MCP_SECTION_START}[\\s\\S]*?${MCP_SECTION_END}\\n?`,
       'g'

package/src/commands/init.js

@@ -219,6 +219,12 @@ const AVAILABLE_COMMANDS = [
     category: 'Claude Code',
     selected: true,
   },
+  {
+    name: 'detect-tech-stack',
+    description: 'Re-run tech stack detection and update configuration',
+    category: 'Analysis',
+    selected: true,
+  },
   {
     name: 'roadmap-sync',
     description: 'Sync roadmaps with GitHub Project Board',
@@ -2795,3 +2801,86 @@ npx claude-cli-advanced-starter-pack init --force
 
   return content;
 }
+
+/**
+ * Verify and fix legacy installations (pre-v1.0.8)
+ * Issue #8: Ensures update-check hook is properly configured
+ *
+ * @param {string} projectDir - Project directory to verify
+ * @returns {Object} Verification result with fixes applied
+ */
+export async function verifyLegacyInstallation(projectDir = process.cwd()) {
+  const fixes = [];
+  const issues = [];
+
+  const claudeDir = join(projectDir, '.claude');
+  const hooksDir = join(claudeDir, 'hooks');
+  const settingsPath = join(claudeDir, 'settings.json');
+  const updateCheckHookPath = join(hooksDir, 'ccasp-update-check.js');
+
+  // Check if this is a CCASP installation
+  if (!existsSync(claudeDir)) {
+    return { isLegacy: false, message: 'No .claude folder found' };
+  }
+
+  // Check 1: Does the update-check hook file exist?
+  if (!existsSync(updateCheckHookPath)) {
+    issues.push('Missing ccasp-update-check.js hook file');
+
+    // Fix: Create the hook file
+    if (!existsSync(hooksDir)) {
+      mkdirSync(hooksDir, { recursive: true });
+    }
+
+    const templatePath = join(__dirname, '..', '..', 'templates', 'hooks', 'ccasp-update-check.template.js');
+    if (existsSync(templatePath)) {
+      const hookContent = readFileSync(templatePath, 'utf8');
+      writeFileSync(updateCheckHookPath, hookContent, 'utf8');
+      fixes.push('Created ccasp-update-check.js hook file');
+    }
+  }
+
+  // Check 2: Is the hook registered in settings.json?
+  if (existsSync(settingsPath)) {
+    try {
+      const settings = JSON.parse(readFileSync(settingsPath, 'utf8'));
+
+      // Check if UserPromptSubmit hook exists with update-check
+      const hasUpdateHook = settings.hooks?.UserPromptSubmit?.some(
+        (h) => h.hooks?.some((hook) => hook.command?.includes('ccasp-update-check'))
+      );
+
+      if (!hasUpdateHook) {
+        issues.push('Update-check hook not registered in settings.json');
+
+        // Fix: Add the hook to settings.json
+        if (!settings.hooks) settings.hooks = {};
+        if (!settings.hooks.UserPromptSubmit) {
+          settings.hooks.UserPromptSubmit = [];
+        }
+
+        settings.hooks.UserPromptSubmit.push({
+          matcher: '',
+          hooks: [{
+            type: 'command',
+            command: 'node .claude/hooks/ccasp-update-check.js',
+          }],
+        });
+
+        writeFileSync(settingsPath, JSON.stringify(settings, null, 2), 'utf8');
+        fixes.push('Registered update-check hook in settings.json');
+      }
+    } catch {
+      issues.push('Could not parse settings.json');
+    }
+  }
+
+  return {
+    isLegacy: issues.length > 0,
+    issues,
+    fixes,
+    message: fixes.length > 0
+      ? `Fixed ${fixes.length} legacy installation issue(s)`
+      : 'Installation is up to date',
+  };
+}