@polymorphism-tech/morph-spec 4.8.16 → 4.8.18

package/src/lib/monitor/renderer.js

@@ -0,0 +1,230 @@
+/**
+ * Monitor Renderer — TUI rendering utilities for `morph-spec monitor`
+ *
+ * Uses chalk (already a project dependency) + native box-drawing characters.
+ * No additional dependencies required.
+ */
+
+import chalk from 'chalk';
+
+// Box-drawing characters
+const BOX = {
+  tl: '┌', tr: '┐', bl: '└', br: '┘',
+  h: '─', v: '│',
+};
+
+const TIER_ICONS = {
+  1: '🎯',
+  2: '⚙️ ',
+  3: '🔧',
+  4: '✅',
+};
+
+const EVENT_COLORS = {
+  SessionStart: 'cyan',
+  UserPromptSubmit: 'yellow',
+  PreToolUse: 'magenta',
+  PostToolUse: 'blue',
+  PostToolUseFailure: 'red',
+  Stop: 'gray',
+  PreCompact: 'gray',
+  Notification: 'white',
+};
+
+/**
+ * Render a bordered box with a title and lines of content.
+ *
+ * @param {string[]} lines   - Content lines
+ * @param {string}   color   - chalk color name ('green'|'blue'|'yellow'|'magenta'|'cyan'|'red'|'white')
+ * @param {string}   [title] - Optional title shown in top border
+ * @param {number}   [width] - Box width (default: 70)
+ * @returns {string}
+ */
+export function renderBox(lines, color, title = '', width = 70) {
+  const paint = chalk[color] || chalk.white;
+  const innerWidth = width - 2;
+
+  // Top border with optional title
+  let topBorder;
+  if (title) {
+    const titleText = ` ${title} `;
+    const remaining = innerWidth - titleText.length;
+    const left = Math.max(0, Math.floor(remaining / 2));
+    const right = Math.max(0, remaining - left);
+    topBorder = paint(BOX.tl + BOX.h.repeat(left) + titleText + BOX.h.repeat(right) + BOX.tr);
+  } else {
+    topBorder = paint(BOX.tl + BOX.h.repeat(innerWidth) + BOX.tr);
+  }
+
+  const bottomBorder = paint(BOX.bl + BOX.h.repeat(innerWidth) + BOX.br);
+
+  const contentLines = lines.map(line => {
+    const truncated = line.length > innerWidth - 2
+      ? line.slice(0, innerWidth - 5) + '...'
+      : line;
+    const padded = truncated.padEnd(innerWidth - 2);
+    return paint(BOX.v) + '  ' + padded + paint(BOX.v);
+  });
+
+  return [topBorder, ...contentLines, bottomBorder].join('\n');
+}
+
+/**
+ * Render the chronological hook event feed.
+ *
+ * @param {Array<{name: string, event: string, result: string, ts: string}>} hooks
+ * @param {number} [maxItems] - Max events to show (most recent first)
+ * @returns {string}
+ */
+export function renderFeed(hooks, maxItems = 12) {
+  if (!hooks || hooks.length === 0) {
+    return renderBox(['  No hook events yet this session.'], 'blue', '🪝 HOOK EVENTS');
+  }
+
+  const recent = [...hooks].reverse().slice(0, maxItems);
+  const lines = recent.map(h => {
+    const color = EVENT_COLORS[h.event] || 'white';
+    const eventLabel = chalk[color] ? chalk[color](h.event) : h.event;
+    return `${h.ts}  ${chalk.bold(h.name)}  ${eventLabel}  → ${h.result}`;
+  });
+
+  return renderBox(lines, 'blue', '🪝 HOOK EVENTS');
+}
+
+/**
+ * Render the agents view, grouped by tier.
+ *
+ * @param {Object} agentsByTier - { tier1: [...], tier2: [...], tier3: [...], tier4: [...] }
+ * @param {string} phase
+ * @returns {string}
+ */
+export function renderAgents(agentsByTier, phase) {
+  const lines = [`Phase: ${chalk.bold(phase || 'unknown')}`];
+  lines.push('');
+
+  for (const [tierKey, agents] of Object.entries(agentsByTier)) {
+    const tierNum = parseInt(tierKey.replace('tier', ''));
+    const icon = TIER_ICONS[tierNum] || '  ';
+    if (!agents || agents.length === 0) continue;
+    const names = agents.map(a => a.name).join('  ·  ');
+    lines.push(`T${tierNum} ${icon}  ${names}`);
+  }
+
+  if (lines.length <= 2) {
+    lines.push('  No active agents for this phase.');
+  }
+
+  const total = Object.values(agentsByTier).flat().length;
+  return renderBox(lines, 'magenta', `🤖 AGENTS ATIVOS (${total} de 39)`);
+}
+
+/**
+ * Render the skills view.
+ *
+ * @param {Array<{name: string, ts: string}>} skills - Skills invoked this session
+ * @param {string[]} [available] - Available skill names
+ * @returns {string}
+ */
+export function renderSkills(skills, available = []) {
+  const lines = [];
+
+  if (skills && skills.length > 0) {
+    lines.push('Invocadas nesta sessão:');
+    for (const s of [...skills].reverse()) {
+      lines.push(`  ${s.ts}  🎯 ${s.name}`);
+    }
+  } else {
+    lines.push('  Nenhuma skill invocada nesta sessão.');
+  }
+
+  if (available.length > 0) {
+    lines.push('');
+    lines.push(`Disponíveis: ${available.slice(0, 8).join(', ')}${available.length > 8 ? ` (+${available.length - 8})` : ''}`);
+  }
+
+  return renderBox(lines, 'yellow', '🎯 SKILLS');
+}
+
+/**
+ * Render the rules view.
+ *
+ * @param {Array<{name: string, glob: string}>} rules
+ * @returns {string}
+ */
+export function renderRules(rules) {
+  if (!rules || rules.length === 0) {
+    return renderBox(['  No rules found.'], 'cyan', '📏 RULES ATIVAS');
+  }
+
+  const lines = rules.map(r => `  ${chalk.bold(r.name).padEnd(35)}  ${chalk.gray(r.glob || '*')}`);
+  return renderBox(lines, 'cyan', `📏 RULES ATIVAS (${rules.length})`);
+}
+
+/**
+ * Render the overview (compact summary of all views).
+ *
+ * @param {Object} data - { feature, phase, agentsByTier, hooks, skills, rules }
+ * @returns {string}
+ */
+export function renderOverview(data) {
+  const { feature, phase, agentsByTier, hooks, skills, rules } = data;
+  const totalAgents = Object.values(agentsByTier || {}).flat().length;
+  const lines = [];
+
+  lines.push(`Feature: ${chalk.bold.green(feature || '(none)')}  |  Phase: ${chalk.bold(phase || 'unknown')}`);
+  lines.push('');
+  lines.push(`🤖 Agents ativos: ${totalAgents} de 39`);
+
+  // Tier breakdown
+  for (const [tierKey, agents] of Object.entries(agentsByTier || {})) {
+    if (!agents || agents.length === 0) continue;
+    const tierNum = parseInt(tierKey.replace('tier', ''));
+    lines.push(`   T${tierNum}: ${agents.map(a => a.name).join(', ')}`);
+  }
+
+  lines.push('');
+  lines.push(`🪝 Hooks disparados: ${hooks?.length || 0}`);
+  if (hooks && hooks.length > 0) {
+    const last = hooks[hooks.length - 1];
+    lines.push(`   Último: ${last.name} (${last.ts})`);
+  }
+
+  lines.push('');
+  lines.push(`🎯 Skills invocadas: ${skills?.length || 0}`);
+  lines.push(`📏 Rules ativas: ${rules?.length || 0}`);
+
+  return renderBox(lines, 'green', '● MORPH-SPEC OVERVIEW');
+}
+
+/**
+ * Render the bottom status bar.
+ *
+ * @param {string} mode   - Current view mode
+ * @param {string[]} modes - All available modes
+ * @returns {string}
+ */
+export function renderStatusBar(mode, modes) {
+  const modeList = modes.map(m =>
+    m === mode ? chalk.bold.white.bgBlue(` ${m} `) : chalk.gray(` ${m} `)
+  ).join('  ');
+
+  return '\n' + modeList + chalk.gray('   shift+tab: cycle  |  q: quit');
+}
+
+/**
+ * Render the feature header (top of screen).
+ *
+ * @param {string} feature
+ * @param {string} phase
+ * @param {Object} tasks - { completed, total }
+ * @returns {string}
+ */
+export function renderHeader(feature, phase, tasks) {
+  const taskInfo = tasks && tasks.total > 0
+    ? ` [${phase} ${tasks.completed}/${tasks.total}]`
+    : ` [${phase}]`;
+  const title = feature
+    ? chalk.bold.green(`● Watching ${feature}${taskInfo}`)
+    : chalk.bold.yellow('● morph-spec monitor — no active feature');
+  return title + '\n';
+}

package/src/scripts/global-install.js

@@ -30,17 +30,29 @@ export async function installGlobalSkill(claudeDir = join(homedir(), '.claude'))
 // Run as postinstall script
 if (process.argv[1] === fileURLToPath(import.meta.url)) {
   const HOOKS_SRC = join(FRAMEWORK_DIR, 'hooks', 'claude-code');
+  const { readFileSync } = await import('fs');
+  const pkg = JSON.parse(readFileSync(new URL('../../package.json', import.meta.url), 'utf8'));
 
-  await Promise.allSettled([
-    installGlobalSkill()
-      .then(() => console.log('✓ morph-init skill installed to ~/.claude/skills/')),
-    installGlobalStatusline(HOOKS_SRC)
-      .then(() => console.log('✓ statusline installed to ~/.claude/')),
-  ]).then(results => {
-    for (const r of results) {
-      if (r.status === 'rejected') {
-        console.warn('  postinstall warning:', r.reason?.message || r.reason);
-      }
-    }
-  });
+  const [skillResult, statuslineResult] = await Promise.allSettled([
+    installGlobalSkill(),
+    installGlobalStatusline(HOOKS_SRC),
+  ]);
+
+  const results = [
+    {
+      ok: skillResult.status === 'fulfilled',
+      label: 'morph-init skill',
+      path: '~/.claude/skills/',
+      error: skillResult.reason?.message,
+    },
+    {
+      ok: statuslineResult.status === 'fulfilled',
+      label: 'statusline',
+      path: '~/.claude/',
+      error: statuslineResult.reason?.message,
+    },
+  ];
+
+  const { printInstallBanner } = await import('../utils/banner.js');
+  printInstallBanner({ version: pkg.version, nodeVersion: process.version, results });
 }

package/src/scripts/setup-infra.js

@@ -13,6 +13,7 @@
 
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
 import {
   copyDirectory,
   copyFile,
@@ -29,19 +30,39 @@ import { installAgents, installDomainAgents } from '../utils/agents-installer.js
 
 const FRAMEWORK_DIR = join(dirname(fileURLToPath(import.meta.url)), '..', '..', 'framework');
 
+const REQUIRED_PLUGINS = [
+  'superpowers@claude-plugins-official',
+  'context7@claude-plugins-official',
+];
+
+async function installRequiredPlugins(log, exec) {
+  log('Step 0: Installing required Claude Code plugins...');
+  for (const plugin of REQUIRED_PLUGINS) {
+    try {
+      exec(`claude plugin install ${plugin}`, { stdio: 'inherit' });
+      log(`  ✓ ${plugin}`);
+    } catch {
+      log(`  ⚠ Failed to install ${plugin} — install manually: claude plugin install ${plugin}`);
+    }
+  }
+}
+
 /**
  * Installs MORPH-SPEC infrastructure into the target project directory.
  * Headless — no prompts, no spinner (suppressed when MORPH_QUIET=1), no stack detection.
  *
  * @param {string} targetPath - Absolute path to the target project directory
  */
-export async function setupInfra(targetPath) {
+export async function setupInfra(targetPath, { _exec = execSync } = {}) {
   const quiet = process.env.MORPH_QUIET === '1';
 
   function log(msg) {
     if (!quiet) process.stdout.write(msg + '\n');
   }
 
+  // --- 0. Install required Claude Code plugins ---
+  await installRequiredPlugins(log, _exec);
+
   // --- 1. Copy CLAUDE.md (backup existing non-MORPH CLAUDE.md) ---
   log('Step 1: Copying CLAUDE.md...');
   const claudeMdSrc = join(FRAMEWORK_DIR, 'CLAUDE.md');

package/src/utils/banner.js

@@ -0,0 +1,51 @@
+// src/utils/banner.js
+import chalk from 'chalk';
+import { type as osType, release as osRelease } from 'os';
+
+const BRAND = chalk.hex('#7C3AED');
+const DIM = chalk.dim;
+
+function platformLabel() {
+  const t = osType();
+  const r = osRelease().split('.').slice(0, 2).join('.');
+  if (t === 'Windows_NT') return `Windows ${r}`;
+  if (t === 'Darwin') return `macOS ${r}`;
+  return `Linux ${r}`;
+}
+
+export function printInstallBanner({ version, nodeVersion, results = [] }) {
+  const TITLE = '◆  M O R P H - S P E C';
+  const pad = `  ${TITLE}  `;
+  const line = '─'.repeat(pad.length);
+
+  const box = [
+    BRAND(`┌${line}┐`),
+    BRAND('│') + chalk.bold.white(pad) + BRAND('│'),
+    BRAND(`└${line}┘`),
+  ].join('\n');
+
+  const sep = (label) => DIM(`  ── ${label} ${'─'.repeat(Math.max(0, 30 - label.length))}`);
+
+  const itemLines = results.map(r =>
+    r.ok
+      ? `  ${chalk.green('✔')} ${r.label.padEnd(20)} ${DIM(r.path)}`
+      : `  ${chalk.red('✖')} ${r.label.padEnd(20)} ${chalk.red(r.error ?? 'failed')}`
+  );
+
+  console.log([
+    '',
+    box,
+    '',
+    `  Version    ${chalk.white(version)}`,
+    `  Platform   ${chalk.white(platformLabel())}`,
+    `  Node       ${chalk.white(nodeVersion)}`,
+    '',
+    sep('Installed'),
+    ...itemLines,
+    '',
+    sep('Next'),
+    `  ${chalk.cyan('1.')} Open your project in Claude Code`,
+    `  ${chalk.cyan('2.')} Run ${chalk.bold.white('/morph-init')}`,
+    '',
+  ].join('\n'));
+}

package/src/utils/hooks-installer.js

@@ -15,7 +15,7 @@ import { homedir } from 'os';
 import { execSync } from 'child_process';
 
 /** Current hooks schema version — bump when hook definitions change */
-const HOOKS_VERSION = '2.6.0';
+const HOOKS_VERSION = '2.8.0';
 
 /** Marker for old dispatch.js (v1) */
 const OLD_DISPATCH_COMMAND = 'node framework/hooks/agent-teams/dispatch.js';
@@ -116,10 +116,16 @@ Otherwise respond: {"ok": true}`
   {
     event: 'PostToolUse',
     matcher: 'Bash',
-    hooks: [{
-      type: 'command',
-      command: 'node framework/hooks/claude-code/post-tool-use/dispatch.js'
-    }]
+    hooks: [
+      {
+        type: 'command',
+        command: 'node framework/hooks/claude-code/post-tool-use/dispatch.js'
+      },
+      {
+        type: 'command',
+        command: 'node framework/hooks/claude-code/post-tool-use/context-refresh.js'
+      }
+    ]
   },
 
   // === Stop ===