@polymorphism-tech/morph-spec 4.19.0 → 4.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymorphism-tech/morph-spec",
-  "version": "4.19.0",
+  "version": "4.21.0",
   "description": "MORPH-SPEC: AI-First development framework with validation pipeline and multi-stack support",
   "keywords": [
     "claude-code",

package/src/commands/dashboard/dashboard.js

@@ -0,0 +1,53 @@
+import { spawn } from 'child_process';
+import { existsSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import chalk from 'chalk';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export async function dashboardCommand(options = {}) {
+  const port = options.port || '3200';
+  const dashboardDir = resolve(__dirname, '..', '..', 'dashboard');
+  const nodeModules = resolve(dashboardDir, 'node_modules');
+
+  // Check if dashboard dependencies are installed
+  if (!existsSync(nodeModules)) {
+    console.log(chalk.yellow('Installing dashboard dependencies...'));
+    const install = spawn('npm', ['install'], {
+      cwd: dashboardDir,
+      stdio: 'inherit',
+      shell: true,
+    });
+    await new Promise((res, rej) => {
+      install.on('close', (code) => (code === 0 ? res() : rej(new Error(`npm install failed with code ${code}`))));
+    });
+  }
+
+  console.log(chalk.cyan(`\n  Starting morph-spec dashboard at http://localhost:${port}\n`));
+
+  const env = {
+    ...process.env,
+    MORPH_PROJECT_DIR: process.cwd(),
+  };
+
+  const viteArgs = ['vite', '--port', port];
+  if (options.open !== false) viteArgs.push('--open');
+
+  const vite = spawn('npx', viteArgs, {
+    cwd: dashboardDir,
+    stdio: 'inherit',
+    shell: true,
+    env,
+  });
+
+  vite.on('error', (err) => {
+    console.error(chalk.red(`Failed to start dashboard: ${err.message}`));
+    process.exit(1);
+  });
+
+  process.on('SIGINT', () => {
+    vite.kill();
+    process.exit(0);
+  });
+}

package/src/commands/mcp/mcp-setup.js

@@ -13,6 +13,8 @@
 import chalk from 'chalk';
 import inquirer from 'inquirer';
 import ora from 'ora';
+import { readFileSync, existsSync } from 'fs';
+import { join } from 'path';
 import {
   orchestrateMcpSetup,
   installAutoMcps,
@@ -21,15 +23,34 @@ import {
   generateSetupInstructions,
   formatMcpStatusTable,
   loadMcpRegistry,
-  isRemoteMcp
+  isRemoteMcp,
+  generateStitchProxy,
+  patchConfigForPlatform
 } from '../../lib/installers/mcp-installer.js';
 import { detectClaudeConfig } from '../../lib/detectors/claude-config-detector.js';
 import { detectProject } from '../../lib/detectors/index.js';
+import { installMcpServers } from '../../utils/claude-settings-manager.js';
 
 /**
- * Detect the current project's stack
+ * Detect the current project's stack.
+ * Prefers .morph/config/config.json (set during morph-spec init) over filesystem re-detection.
  */
 async function detectStack(targetPath) {
+  // 1. Prefer the authoritative config (handles compound stacks like nextjs+dotnet)
+  try {
+    const configPath = join(targetPath, '.morph', 'config', 'config.json');
+    if (existsSync(configPath)) {
+      const config = JSON.parse(readFileSync(configPath, 'utf-8'));
+      const configStack = config.project?.stack;
+      if (configStack && configStack !== 'unknown') {
+        return configStack;
+      }
+    }
+  } catch {
+    // Fall through to filesystem detection
+  }
+
+  // 2. Fallback: detect from filesystem
   try {
     const results = await detectProject(targetPath, { conversation: false, generateStandards: false });
     return results.structure?.stack || 'unknown';
@@ -186,6 +207,60 @@ async function setupSpecificMcp(targetPath, name, stack, existingMcps) {
 
   const credentials = mcpEntry.install.credentials || [];
 
+  // Stitch MCP — custom OAuth proxy setup
+  if (name === 'stitch' && !mcpEntry.install.autoInstall) {
+    console.log(chalk.cyan(`\n  Setting up Stitch MCP (OAuth proxy)\n`));
+    console.log(chalk.gray(`  Usage: ${mcpEntry.usage}`));
+    console.log('');
+
+    const gcpCred = credentials.find(c => c.envVar === 'STITCH_GCP_PROJECT');
+    const { gcpProject } = await inquirer.prompt([{
+      type: 'input',
+      name: 'gcpProject',
+      message: gcpCred ? `${gcpCred.name}:` : 'GCP Project ID:',
+    }]);
+
+    if (!gcpProject || !gcpProject.trim()) {
+      console.log(chalk.red('  GCP Project ID is required.'));
+      console.log('');
+      return;
+    }
+
+    const spinner = ora('Generating Stitch proxy...').start();
+    const { proxyPath } = generateStitchProxy(targetPath, gcpProject.trim());
+    spinner.succeed(`Proxy script generated: ${proxyPath}`);
+
+    const config = { ...mcpEntry.install.config };
+    const result = await installMcpServers(targetPath, { stitch: patchConfigForPlatform(config) });
+    if (result.added.length > 0) {
+      console.log(chalk.green(`  ✓ Stitch MCP configured (using OAuth proxy)`));
+    } else {
+      console.log(chalk.yellow(`  ⚠ Stitch MCP already configured`));
+    }
+
+    if (mcpEntry.companionSkills?.installCommand) {
+      const { installSkills } = await inquirer.prompt([{
+        type: 'confirm',
+        name: 'installSkills',
+        message: 'Install Stitch companion skills (design, loop, etc.)?',
+        default: true
+      }]);
+      if (installSkills) {
+        const skillResults = installCompanionSkills({ stitch: mcpEntry });
+        for (const r of skillResults) {
+          if (r.success) {
+            console.log(chalk.green(`  ✓ Companion skills installed: ${r.repo}`));
+          } else {
+            console.log(chalk.yellow(`  ⚠ Failed to install companion skills: ${r.repo}`));
+          }
+        }
+      }
+    }
+
+    console.log('');
+    return;
+  }
+
   // Auto-installable — just install
   if (mcpEntry.install.autoInstall) {
     const spinner = ora(`Installing ${name}...`).start();
@@ -349,6 +424,28 @@ async function interactiveWizard(targetPath, stack, existingMcps) {
       }]);
 
       if (setupNow) {
+        // Stitch — custom OAuth proxy flow
+        if (name === 'stitch' && !entry.install.autoInstall) {
+          const gcpCred = entry.install.credentials?.find(c => c.envVar === 'STITCH_GCP_PROJECT');
+          const { gcpProject } = await inquirer.prompt([{
+            type: 'input',
+            name: 'gcpProject',
+            message: gcpCred ? `${gcpCred.name}:` : 'GCP Project ID:',
+          }]);
+          if (gcpProject?.trim()) {
+            const { proxyPath } = generateStitchProxy(targetPath, gcpProject.trim());
+            console.log(chalk.green(`  ✓ Proxy generated: ${proxyPath}`));
+            const config = { ...entry.install.config };
+            await installMcpServers(targetPath, { stitch: patchConfigForPlatform(config) });
+            console.log(chalk.green(`  ✓ Stitch configured (OAuth proxy)`));
+            const skillResults = installCompanionSkills({ stitch: entry });
+            for (const r of skillResults) {
+              if (r.success) console.log(chalk.green(`  ✓ Companion skills: ${r.repo}`));
+            }
+          }
+          continue;
+        }
+
         // Remote MCPs — launch OAuth via claude mcp add
         if (isRemoteMcp(entry.install.config)) {
           console.log(chalk.cyan(`  Launching ${capitalizedName} OAuth...`));

package/src/dashboard/app/App.jsx

@@ -0,0 +1,31 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import Sidebar from './components/Sidebar.jsx';
+import AgentMap from './pages/AgentMap.jsx';
+import PhasePipeline from './pages/PhasePipeline.jsx';
+import HookInspector from './pages/HookInspector.jsx';
+import SkillsLibrary from './pages/SkillsLibrary.jsx';
+import RulesMap from './pages/RulesMap.jsx';
+import Standards from './pages/Standards.jsx';
+import Workflows from './pages/Workflows.jsx';
+import LiveState from './pages/LiveState.jsx';
+
+export default function App() {
+  return (
+    <div className="flex h-screen bg-gray-950 text-gray-100 overflow-hidden">
+      <Sidebar />
+      <main className="flex-1 overflow-auto">
+        <Routes>
+          <Route path="/" element={<Navigate to="/agents" replace />} />
+          <Route path="/agents" element={<AgentMap />} />
+          <Route path="/phases" element={<PhasePipeline />} />
+          <Route path="/hooks" element={<HookInspector />} />
+          <Route path="/skills" element={<SkillsLibrary />} />
+          <Route path="/rules" element={<RulesMap />} />
+          <Route path="/standards" element={<Standards />} />
+          <Route path="/workflows" element={<Workflows />} />
+          <Route path="/state" element={<LiveState />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}

package/src/dashboard/app/components/DetailPanel.jsx

@@ -0,0 +1,11 @@
+export default function DetailPanel({ open, title, onClose, children }) {
+  return (
+    <div className={`fixed top-0 right-0 h-full w-96 bg-gray-900 border-l border-gray-700 shadow-2xl transform transition-transform duration-200 ease-in-out z-50 ${open ? 'translate-x-0' : 'translate-x-full'}`}>
+      <div className="flex items-center justify-between p-4 border-b border-gray-700">
+        <h2 className="text-white font-semibold text-lg truncate">{title}</h2>
+        <button onClick={onClose} className="text-gray-400 hover:text-white text-xl leading-none">×</button>
+      </div>
+      <div className="p-4 overflow-y-auto h-[calc(100%-57px)]">{children}</div>
+    </div>
+  );
+}

package/src/dashboard/app/components/FlowGraph.jsx

@@ -0,0 +1,17 @@
+import { ReactFlow, Controls, MiniMap, Background } from '@xyflow/react';
+
+export default function FlowGraph({ nodes, edges, nodeTypes, onNodeClick, fitView = true, className = '' }) {
+  return (
+    <div className={`w-full h-full ${className}`} style={{ minHeight: '500px' }}>
+      <ReactFlow
+        nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodeClick={onNodeClick}
+        fitView={fitView} proOptions={{ hideAttribution: true }}
+        defaultEdgeOptions={{ type: 'smoothstep', animated: false, style: { stroke: '#475569', strokeWidth: 1.5 } }}
+      >
+        <Background color="#1e293b" gap={20} />
+        <Controls position="bottom-right" />
+        <MiniMap nodeColor={(node) => node.data?.color || '#475569'} maskColor="rgba(0, 0, 0, 0.7)" position="bottom-left" />
+      </ReactFlow>
+    </div>
+  );
+}

package/src/dashboard/app/components/SearchFilter.jsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+export default function SearchFilter({ placeholder = 'Search...', filters = [], onSearchChange, onFilterChange }) {
+  const [search, setSearch] = useState('');
+  function handleSearchChange(e) {
+    setSearch(e.target.value);
+    onSearchChange?.(e.target.value);
+  }
+  return (
+    <div className="flex items-center gap-3 p-3 bg-gray-900 border-b border-gray-800">
+      <input type="text" value={search} onChange={handleSearchChange} placeholder={placeholder}
+        className="flex-1 bg-gray-800 border border-gray-700 rounded-md px-3 py-1.5 text-sm text-gray-100 placeholder-gray-500 focus:outline-none focus:border-blue-500" />
+      {filters.map(({ name, label, options, value }) => (
+        <select key={name} value={value} onChange={(e) => onFilterChange?.(name, e.target.value)}
+          className="bg-gray-800 border border-gray-700 rounded-md px-2 py-1.5 text-sm text-gray-300 focus:outline-none focus:border-blue-500">
+          <option value="">{label}: All</option>
+          {options.map((opt) => (<option key={opt} value={opt}>{opt}</option>))}
+        </select>
+      ))}
+    </div>
+  );
+}

package/src/dashboard/app/components/Sidebar.jsx

@@ -0,0 +1,45 @@
+import { NavLink } from 'react-router-dom';
+
+const NAV_ITEMS = [
+  { to: '/agents', label: 'Agent Map', icon: '🗺️' },
+  { to: '/phases', label: 'Phases', icon: '⚡' },
+  { to: '/hooks', label: 'Hooks', icon: '🔗' },
+  { to: '/skills', label: 'Skills', icon: '🧩' },
+  { to: '/rules', label: 'Rules', icon: '📏' },
+  { to: '/standards', label: 'Standards', icon: '📋' },
+  { to: '/workflows', label: 'Workflows', icon: '🔄' },
+  { to: '/state', label: 'Live State', icon: '📊' },
+];
+
+export default function Sidebar() {
+  return (
+    <nav className="w-52 flex-shrink-0 bg-gray-900 border-r border-gray-800 flex flex-col">
+      <div className="px-4 py-4 border-b border-gray-800">
+        <h1 className="text-sm font-semibold text-gray-300 tracking-wide uppercase">
+          morph-spec
+        </h1>
+        <p className="text-xs text-gray-500 mt-0.5">Dashboard</p>
+      </div>
+      <ul className="flex-1 py-2">
+        {NAV_ITEMS.map(({ to, label, icon }) => (
+          <li key={to}>
+            <NavLink
+              to={to}
+              className={({ isActive }) =>
+                [
+                  'flex items-center gap-2.5 px-4 py-2 text-sm transition-colors',
+                  isActive
+                    ? 'bg-blue-900/40 border-r-2 border-blue-500 text-blue-300'
+                    : 'text-gray-400 hover:bg-gray-800 hover:text-gray-200',
+                ].join(' ')
+              }
+            >
+              <span className="text-base leading-none">{icon}</span>
+              <span>{label}</span>
+            </NavLink>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

package/src/dashboard/app/hooks/useDetailPanel.js

@@ -0,0 +1,15 @@
+import { useState, useCallback } from 'react';
+
+export function useDetailPanel() {
+  const [panel, setPanel] = useState({ open: false, title: '', content: null });
+
+  const openPanel = useCallback((title, content) => {
+    setPanel({ open: true, title, content });
+  }, []);
+
+  const closePanel = useCallback(() => {
+    setPanel((prev) => ({ ...prev, open: false }));
+  }, []);
+
+  return { panel, openPanel, closePanel };
+}

package/src/dashboard/app/main.jsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './styles/index.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);