project-compass 3.3.9 → 3.4.1

package/README.md

@@ -25,7 +25,7 @@ npm install -g project-compass
 ## Usage
 
 ```bash
-project-compass [--dir /path/to/workspace] [--studio]
+project-compass [--dir /path/to/workspace] [--studio] [--version]
 ```
 
 ### Keyboard Guide

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "project-compass",
-  "version": "3.3.9",
-  "description": "Ink-based project explorer that detects local repos and lets you build/test/run them without memorizing commands.",
+  "version": "3.4.1",
+  "description": "Futuristic project navigator and runner for Node, Python, Rust, and Go",
   "main": "src/cli.js",
-  "type": "module",
   "bin": {
     "project-compass": "src/cli.js"
   },
+  "type": "module",
   "scripts": {
     "start": "node src/cli.js",
     "test": "node src/cli.js --mode test",
@@ -14,21 +14,22 @@
   },
   "keywords": [
     "cli",
+    "navigator",
     "ink",
-    "project",
     "runner",
-    "dashboard"
+    "projects"
   ],
   "author": "Satyaa & Clawdy",
   "license": "MIT",
   "dependencies": {
-    "execa": "^9.6.1",
+    "execa": "^9.5.2",
     "fast-glob": "^3.3.3",
-    "ink": "^6.6.0",
-    "kleur": "^4.1.5"
+    "ink": "^5.1.0",
+    "kleur": "^4.1.5",
+    "react": "^18.2.0"
   },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "eslint": "^10.0.0"
+    "eslint": "^9.19.0",
+    "@eslint/js": "^9.19.0"
   }
 }

package/src/cli.js

@@ -2,12 +2,19 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState, memo} from 'react';
 import {render, Box, Text, useApp, useInput} from 'ink';
 import path from 'path';
+import {fileURLToPath} from 'url';
 import fs from 'fs';
 import kleur from 'kleur';
 import {execa} from 'execa';
-import {discoverProjects, SCHEMA_GUIDE, checkBinary} from './projectDetection.js';
+import {discoverProjects, SCHEMA_GUIDE} from './projectDetection.js';
 import {CONFIG_PATH, ensureConfigDir} from './configPaths.js';
 
+// Modular Components
+import Studio from './components/Studio.js';
+import TaskManager from './components/TaskManager.js';
+import PackageRegistry from './components/PackageRegistry.js';
+import ProjectArchitect from './components/ProjectArchitect.js';
+
 const create = React.createElement;
 const ART_CHARS = ['▁', '▃', '▄', '▅', '▇'];
 const ART_COLORS = ['magenta', 'blue', 'cyan', 'yellow', 'red'];
@@ -90,81 +97,6 @@ function buildDetailCommands(project, config) {
   return [...builtins, ...custom];
 }
 
-const Studio = memo(() => {
-  const [runtimes, setRuntimes] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const checks = [
-      {name: 'Node.js', binary: 'node', versionCmd: ['-v']},
-      {name: 'npm', binary: 'npm', versionCmd: ['-v']},
-      {name: 'Python', binary: process.platform === 'win32' ? 'python' : 'python3', versionCmd: ['--version']},
-      {name: 'Rust (Cargo)', binary: 'cargo', versionCmd: ['--version']},
-      {name: 'Go', binary: 'go', versionCmd: ['version']},
-      {name: 'Java', binary: 'java', versionCmd: ['-version']},
-      {name: 'PHP', binary: 'php', versionCmd: ['-v']},
-      {name: 'Ruby', binary: 'ruby', versionCmd: ['-v']},
-      {name: '.NET', binary: 'dotnet', versionCmd: ['--version']}
-    ];
-
-    (async () => {
-      const results = await Promise.all(checks.map(async (lang) => {
-        if (!checkBinary(lang.binary)) {
-          return {...lang, status: 'missing', version: 'not installed'};
-        }
-        try {
-          const {stdout, stderr} = await execa(lang.binary, lang.versionCmd);
-          const version = (stdout || stderr || '').split('\n')[0].trim();
-          return {...lang, status: 'ok', version};
-        } catch {
-          return {...lang, status: 'error', version: 'failed to check'};
-        }
-      }));
-      setRuntimes(results);
-      setLoading(false);
-    })();
-  }, []);
-
-  return create(
-    Box,
-    {flexDirection: 'column', borderStyle: 'double', borderColor: 'blue', padding: 1},
-    create(Text, {bold: true, color: 'blue'}, '💎 Omni-Studio | Environment Intelligence'),
-    create(Text, {dimColor: true, marginBottom: 1}, 'Overview of installed languages and build tools.'),
-    loading
-      ? create(Text, {dimColor: true}, 'Gathering intelligence...')
-      : create(
-          Box,
-          {flexDirection: 'column'},
-          ...runtimes.map(r => create(
-            Box,
-            {key: r.name, marginBottom: 0},
-            create(Text, {width: 20, color: r.status === 'ok' ? 'green' : 'red'}, `${r.status === 'ok' ? '✓' : '✗'} ${r.name}`),
-            create(Text, {dimColor: r.status !== 'ok'}, `:  ${r.version}`)
-          )),
-          create(Text, {marginTop: 1, color: 'yellow'}, '🛠️ Interactive Project Creator coming soon in v3.0'),
-          create(Text, {dimColor: true}, 'Press Shift+A to return to Navigator.')
-        )
-  );
-});
-
-const TaskManager = memo(({tasks, activeTaskId, renameMode, renameInput, renameCursor}) => {
-  return create(
-    Box,
-    {flexDirection: 'column', borderStyle: 'round', borderColor: 'yellow', padding: 1},
-    create(Text, {bold: true, color: 'yellow'}, '🛰️ Task Manager | Background Processes'),
-    create(Text, {dimColor: true, marginBottom: 1}, 'Up/Down: focus, Shift+K: Force Kill, Shift+R: Rename'),
-    ...tasks.map(t => create(
-      Box,
-      {key: t.id, marginBottom: 0, flexDirection: 'column'},
-      t.id === activeTaskId && renameMode 
-        ? create(Box, {flexDirection: 'row'}, create(Text, {color: 'cyan'}, '→ Rename to: '), create(CursorText, {value: renameInput, cursorIndex: renameCursor}))
-        : create(Text, {color: t.id === activeTaskId ? 'cyan' : 'white', bold: t.id === activeTaskId}, `${t.id === activeTaskId ? '→' : ' '} [${t.status.toUpperCase()}] ${t.name}`)
-    )),
-    !tasks.length && create(Text, {dimColor: true}, 'No active or background tasks.'),
-    create(Text, {marginTop: 1, dimColor: true}, 'Press Enter or Shift+T to return to Navigator.')
-  );
-});
-
 function CursorText({value, cursorIndex, active = true}) {
   const before = value.slice(0, cursorIndex);
   const charAt = value[cursorIndex] || ' ';
@@ -427,34 +359,15 @@ function Compass({rootPath, initialView = 'navigator'}) {
     const normalizedInput = input?.toLowerCase();
     const shiftCombo = (char) => key.shift && normalizedInput === char;
     
-    if (shiftCombo('h')) { 
-      setConfig(prev => {
-        const next = {...prev, showHelpCards: !prev.showHelpCards};
-        saveConfig(next);
-        return next;
-      });
-      return; 
-    }
-    if (shiftCombo('s')) { 
-      setConfig(prev => {
-        const next = {...prev, showStructureGuide: !prev.showStructureGuide};
-        saveConfig(next);
-        return next;
-      });
-      return; 
-    }
+    if (shiftCombo('h')) { setConfig(prev => { const next = {...prev, showHelpCards: !prev.showHelpCards}; saveConfig(next); return next; }); return; }
+    if (shiftCombo('s')) { setConfig(prev => { const next = {...prev, showStructureGuide: !prev.showStructureGuide}; saveConfig(next); return next; }); return; }
     if (shiftCombo('a')) { setMainView((prev) => (prev === 'navigator' ? 'studio' : 'navigator')); return; }
+    if (shiftCombo('p')) { setMainView((prev) => (prev === 'navigator' ? 'registry' : 'navigator')); return; }
+    if (shiftCombo('n')) { setMainView((prev) => (prev === 'navigator' ? 'architect' : 'navigator')); return; }
     if (shiftCombo('x')) { setTasks(prev => prev.map(t => t.id === activeTaskId ? {...t, logs: []} : t)); setLogOffset(0); return; }
     if (shiftCombo('e')) { exportLogs(); return; }
     if (shiftCombo('d')) { setActiveTaskId(null); return; }
-    if (shiftCombo('b')) { 
-      setConfig(prev => {
-        const next = {...prev, showArtBoard: !prev.showArtBoard};
-        saveConfig(next);
-        return next;
-      });
-      return; 
-    }
+    if (shiftCombo('b')) { setConfig(prev => { const next = {...prev, showArtBoard: !prev.showArtBoard}; saveConfig(next); return next; }); return; }
     
     if (shiftCombo('t')) { 
       setMainView((prev) => {
@@ -485,6 +398,11 @@ function Compass({rootPath, initialView = 'navigator'}) {
       return;
     }
 
+    if (mainView === 'registry' || mainView === 'architect') {
+      // Inputs handled inside components
+      return;
+    }
+
     if (running && activeTaskId && runningProcessMap.current.has(activeTaskId)) {
       if (isCtrlC) { handleKillTask(activeTaskId); setStdinBuffer(''); setStdinCursor(0); return; }
       if (key.return) {
@@ -612,18 +530,14 @@ function Compass({rootPath, initialView = 'navigator'}) {
     create(Text, {dimColor: true}, tile.subtext)
   )), [projectCountLabel, rootPath, selectedProject, tasks.length, running]);
 
-  const helpCards = [
-    {label: 'Navigation', color: 'magenta', body: ['↑ / ↓ move focus, Enter: details', 'Shift+↑ / ↓ scroll output', 'Shift+H toggle help cards', 'Shift+D detach from task']},
-    {label: 'Commands', color: 'cyan', body: ['B / T / R build/test/run', '1-9 / S+A-Z numbered commands', 'Shift+L rerun last command', 'Shift+X clear / Shift+E export']},
-    {label: 'Orbit & Studio', color: 'yellow', body: ['Shift+T task manager', 'Shift+A studio / Shift+B art board', 'Shift+S structure / Shift+Q quit']}
-  ];
-
   if (quitConfirm) {
     return create(Box, {flexDirection: 'column', borderStyle: 'round', borderColor: 'red', padding: 1}, create(Text, {bold: true, color: 'red'}, '⚠️ Confirm Exit'), create(Text, null, `There are ${tasks.filter(t=>t.status==='running').length} tasks still running in the background.`), create(Text, null, 'Are you sure you want to quit and stop all processes?'), create(Text, {marginTop: 1}, kleur.bold('Y') + ' to Quit, ' + kleur.bold('N') + ' to Cancel'));
   }
 
   if (mainView === 'studio') return create(Studio);
-  if (mainView === 'tasks') return create(TaskManager, {tasks, activeTaskId, renameMode, renameInput, renameCursor});
+  if (mainView === 'tasks') return create(TaskManager, {tasks, activeTaskId, setActiveTaskId, renameMode, renameInput, renameCursor, CursorText});
+  if (mainView === 'registry') return create(PackageRegistry, {selectedProject, onRunCommand: runProjectCommand, CursorText});
+  if (mainView === 'architect') return create(ProjectArchitect, {onRunCommand: runProjectCommand, CursorText});
 
   return create(Box, {flexDirection: 'column', padding: 1},
     create(Box, {justifyContent: 'space-between'},
@@ -646,11 +560,15 @@ function Compass({rootPath, initialView = 'navigator'}) {
       create(Box, {flexDirection: 'row', justifyContent: 'space-between'}, create(Text, {bold: true, color: 'yellow'}, `Output: ${activeTask?.name || 'None'}`), create(Text, {dimColor: true}, logOffset ? `Scrolled ${logOffset} lines` : 'Live log view')),
       create(OutputPanel, {activeTask, logOffset}),
       create(Box, {marginTop: 1, flexDirection: 'row', justifyContent: 'space-between'}, create(Text, {dimColor: true}, running ? 'Type to feed stdin; Enter: submit, Ctrl+C: abort.' : 'Run a command or press Shift+T to switch tasks.'), create(Text, {dimColor: true}, `${toggleHint}, Shift+S: Structure Guide`)),
-      create(Box, {marginTop: 1, flexDirection: 'row', borderStyle: 'round', borderColor: running ? 'green' : 'gray', paddingX: 1}, create(Text, {bold: true, color: running ? 'green' : 'white'}, running ? ' Stdin buffer ' : ' Input ready '), create(Box, {marginLeft: 1}, create(CursorText, {value: stdinBuffer || (running ? '' : 'Start a command to feed stdin'), cursorIndex: stdinCursor, active: running})))
+      create(Box, {marginTop: 1, flexDirection: 'row', borderStyle: 'round', borderColor: running ? 'green' : 'gray', paddingX: 1}, create(Text, {bold: true, color: 'green'}, running ? ' Stdin buffer ' : ' Input ready '), create(Box, {marginLeft: 1}, create(CursorText, {value: stdinBuffer || (running ? '' : 'Start a command to feed stdin'), cursorIndex: stdinCursor, active: running})))
     ),
-    config.showHelpCards && create(Box, {marginTop: 1, flexDirection: 'row', justifyContent: 'space-between', flexWrap: 'wrap'}, ...helpCards.map((card, idx) => create(Box, {key: card.label, flexGrow: 1, flexBasis: 0, minWidth: HELP_CARD_MIN_WIDTH, marginRight: idx < 2 ? 1 : 0, marginBottom: 1, borderStyle: 'round', borderColor: card.color, padding: 1, flexDirection: 'column'}, create(Text, {color: card.color, bold: true, marginBottom: 1}, card.label), ...card.body.map((line, lidx) => create(Text, {key: lidx, dimColor: card.color === 'yellow'}, line))))),
+    config.showHelpCards && create(Box, {marginTop: 1, flexDirection: 'row', justifyContent: 'space-between', flexWrap: 'wrap'}, [
+      {label: 'Navigation', color: 'magenta', body: ['↑ / ↓ move focus, Enter: details', 'Shift+↑ / ↓ scroll output', 'Shift+H toggle help cards', 'Shift+D detach from task']},
+      {label: 'Management', color: 'cyan', body: ['Shift+P Package Registry', 'Shift+N Project Architect', 'Shift+X clear / Shift+E export']},
+      {label: 'Orbit & Studio', color: 'yellow', body: ['Shift+T task manager', 'Shift+A studio / Shift+B art board', 'Shift+S structure / Shift+Q quit']}
+    ].map((card, idx) => create(Box, {key: card.label, flexGrow: 1, flexBasis: 0, minWidth: HELP_CARD_MIN_WIDTH, marginRight: idx < 2 ? 1 : 0, marginBottom: 1, borderStyle: 'round', borderColor: card.color, padding: 1, flexDirection: 'column'}, create(Text, {color: card.color, bold: true, marginBottom: 1}, card.label), ...card.body.map((line, lidx) => create(Text, {key: lidx, dimColor: card.color === 'yellow'}, line))))),
     config.showStructureGuide && create(Box, {flexDirection: 'column', borderStyle: 'round', borderColor: 'blue', marginTop: 1, padding: 1}, create(Text, {color: 'cyan', bold: true}, 'Structure guide · press Shift+S to hide'), ...SCHEMA_GUIDE.map(e => create(Text, {key: e.type, dimColor: true}, `• ${e.icon} ${e.label}: ${e.files.join(', ')}`))),
-    showHelp && create(Box, {flexDirection: 'column', borderStyle: 'double', borderColor: 'cyan', marginTop: 1, padding: 1}, create(Text, {color: 'cyan', bold: true}, 'Help overlay'), create(Text, null, 'Shift+↑/↓ scrolls logs; Shift+X clears; Shift+E exports; Shift+A Studio; Shift+T Tasks; Shift+D Detach; Shift+B Toggle Art Board.'))
+    showHelp && create(Box, {flexDirection: 'column', borderStyle: 'double', borderColor: 'cyan', marginTop: 1, padding: 1}, create(Text, {color: 'cyan', bold: true}, 'Help overlay'), create(Text, null, 'Shift+↑/↓ scrolls logs; Shift+X clears; Shift+E exports; Shift+A Studio; Shift+T Tasks; Shift+D Detach; Shift+B Toggle Art Board; Shift+P Packages; Shift+N Creator.'))
   );
 }
 
@@ -663,6 +581,7 @@ function parseArgs() {
     if ((token === '--dir' || token === '--path') && tokens[i + 1]) { args.root = tokens[i + 1]; i += 1; }
     else if (token === '--mode' && tokens[i + 1]) { args.mode = tokens[i + 1]; i += 1; }
     else if (token === '--help' || token === '-h') args.help = true;
+    else if (token === '--version' || token === '-v') args.version = true;
     else if (token === '--studio') args.view = 'studio';
   }
   return args;
@@ -670,6 +589,12 @@ function parseArgs() {
 
 async function main() {
   const args = parseArgs();
+  if (args.version) {
+    const __dirname = path.dirname(fileURLToPath(import.meta.url));
+    const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '../package.json'), 'utf-8'));
+    console.log(`v${pkg.version}`);
+    return;
+  }
   if (args.help) {
     console.log(kleur.cyan('Project Compass · Ink project navigator/runner'));
     console.log('');
@@ -686,6 +611,8 @@ async function main() {
     console.log('  Enter                 Toggle detail view for selected project');
     console.log('  Shift+A               Switch to Omni-Studio (Environment Health)');
     console.log('  Shift+T               Open Orbit Task Manager (Manage background processes)');
+    console.log('  Shift+P               Open Package Registry (Add/Remove packages)');
+    console.log('  Shift+N               Open Project Architect (Scaffold new projects)');
     console.log('  Shift+D               Detach from active task (Keep it running in background)');
     console.log('  Shift+B               Toggle Art Board visibility');
     console.log('  Shift+H               Toggle Help Cards visibility');

package/src/components/PackageRegistry.js

@@ -0,0 +1,109 @@
+import React, {useState, memo} from 'react';
+import {Box, Text, useInput} from 'ink';
+
+const create = React.createElement;
+
+const PackageRegistry = memo(({selectedProject, onRunCommand, CursorText}) => {
+  const [mode, setMode] = useState('list'); // list | add | remove
+  const [input, setInput] = useState('');
+  const [cursor, setCursor] = useState(0);
+
+  const projectType = selectedProject?.type || 'Unknown';
+  const deps = selectedProject?.metadata?.dependencies || [];
+
+  useInput((inputStr, key) => {
+    if (mode === 'add' || mode === 'remove') {
+      if (key.return) {
+        if (input.trim()) {
+          const cmd = mode === 'add' ? getAddCmd(projectType, input.trim()) : getRemoveCmd(projectType, input.trim());
+          if (cmd) onRunCommand({label: `${mode === 'add' ? 'Add' : 'Remove'} ${input}`, command: cmd});
+        }
+        setMode('list'); setInput(''); setCursor(0);
+        return;
+      }
+      if (key.escape) { setMode('list'); setInput(''); setCursor(0); return; }
+      if (key.backspace || key.delete) {
+        if (cursor > 0) {
+          setInput(prev => prev.slice(0, cursor - 1) + prev.slice(cursor));
+          setCursor(c => Math.max(0, c - 1));
+        }
+        return;
+      }
+      if (key.leftArrow) { setCursor(c => Math.max(0, c - 1)); return; }
+      if (key.rightArrow) { setCursor(c => Math.min(input.length, c + 1)); return; }
+      if (inputStr) {
+        setInput(prev => prev.slice(0, cursor) + inputStr + prev.slice(cursor));
+        setCursor(c => c + inputStr.length);
+      }
+      return;
+    }
+
+    if (inputStr.toLowerCase() === 'a') { setMode('add'); setInput(''); setCursor(0); }
+    if (inputStr.toLowerCase() === 'r') { setMode('remove'); setInput(''); setCursor(0); }
+    if (inputStr.toLowerCase() === 'v' && projectType === 'Python') {
+      onRunCommand({label: 'Create venv', command: ['python3', '-m', 'venv', '.venv']});
+    }
+  });
+
+  const getAddCmd = (type, pkg) => {
+    if (type === 'Node.js') return ['npm', 'install', pkg];
+    if (type === 'Python') return ['pip', 'install', pkg];
+    if (type === 'Rust') return ['cargo', 'add', pkg];
+    if (type === '.NET') return ['dotnet', 'add', 'package', pkg];
+    if (type === 'PHP') return ['composer', 'require', pkg];
+    return null;
+  };
+
+  const getRemoveCmd = (type, pkg) => {
+    if (type === 'Node.js') return ['npm', 'uninstall', pkg];
+    if (type === 'Python') return ['pip', 'uninstall', '-y', pkg];
+    if (type === 'Rust') return ['cargo', 'remove', pkg];
+    if (type === '.NET') return ['dotnet', 'remove', 'package', pkg];
+    if (type === 'PHP') return ['composer', 'remove', pkg];
+    return null;
+  };
+
+  return create(
+    Box,
+    {flexDirection: 'column', borderStyle: 'round', borderColor: 'magenta', padding: 1},
+    create(
+      Box,
+      {justifyContent: 'space-between'},
+      create(Text, {bold: true, color: 'magenta'}, `📦 Package Registry | ${selectedProject?.name}`),
+      create(Text, {dimColor: true}, projectType)
+    ),
+    create(Text, {dimColor: true, marginBottom: 1}, 'Manage dependencies and environments for this project.'),
+    mode === 'list'
+      ? create(
+          Box,
+          {flexDirection: 'column'},
+          create(Text, {bold: true}, `Installed Dependencies (${deps.length}):`),
+          create(
+            Box,
+            {flexDirection: 'row', flexWrap: 'wrap'},
+            ...deps.map(d => create(Text, {key: d, dimColor: true}, ` ${d} `))
+          ),
+          create(
+            Box,
+            {marginTop: 1, flexDirection: 'column'},
+            create(Text, {color: 'cyan'}, 'A: Add Package  |  R: Remove Package'),
+            projectType === 'Python' && create(Text, {color: 'yellow'}, 'V: Create .venv'),
+            create(Text, {dimColor: true, marginTop: 1}, 'Press Shift+P to return to Navigator.')
+          )
+        )
+      : create(
+          Box,
+          {flexDirection: 'column'},
+          create(Text, {bold: true, color: 'cyan'}, mode === 'add' ? 'ADD NEW PACKAGE' : 'REMOVE PACKAGE'),
+          create(
+            Box,
+            {flexDirection: 'row'},
+            create(Text, null, 'Enter package name: '),
+            create(CursorText, {value: input, cursorIndex: cursor})
+          ),
+          create(Text, {dimColor: true, marginTop: 1}, 'Enter: Confirm, Esc: Cancel')
+        )
+  );
+});
+
+export default PackageRegistry;

package/src/components/ProjectArchitect.js

@@ -0,0 +1,83 @@
+import React, {useState, memo} from 'react';
+import {Box, Text, useInput} from 'ink';
+
+const create = React.createElement;
+
+const ProjectArchitect = memo(({onRunCommand, CursorText}) => {
+  const [step, setStep] = useState('framework'); // framework | name
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const [name, setName] = useState('');
+  const [cursor, setCursor] = useState(0);
+
+  const frameworks = [
+    {name: 'Next.js', cmd: (n) => ['npx', 'create-next-app@latest', n]},
+    {name: 'React (Vite)', cmd: (n) => ['npm', 'create', 'vite@latest', n, '--', '--template', 'react']},
+    {name: 'Vue (Vite)', cmd: (n) => ['npm', 'create', 'vite@latest', n, '--', '--template', 'vue']},
+    {name: 'Rust (Binary)', cmd: (n) => ['cargo', 'new', n]},
+    {name: 'Python (Basic)', cmd: (n) => ['mkdir', n]},
+    {name: 'Go Module', cmd: (n) => ['mkdir', n, '&&', 'cd', n, '&&', 'go', 'mod', 'init', n]}
+  ];
+
+  useInput((inputStr, key) => {
+    if (step === 'framework') {
+      if (key.upArrow) setSelectedIdx(prev => (prev - 1 + frameworks.length) % frameworks.length);
+      if (key.downArrow) setSelectedIdx(prev => (prev + 1) % frameworks.length);
+      if (key.return) setStep('name');
+      return;
+    }
+
+    if (step === 'name') {
+      if (key.return) {
+        if (name.trim()) {
+          const f = frameworks[selectedIdx];
+          onRunCommand({label: `Create ${f.name} project: ${name}`, command: f.cmd(name.trim())});
+        }
+        setStep('framework'); setName(''); setCursor(0);
+        return;
+      }
+      if (key.escape) { setStep('framework'); setName(''); setCursor(0); return; }
+      if (key.backspace || key.delete) {
+        if (cursor > 0) {
+          setName(prev => prev.slice(0, cursor - 1) + prev.slice(cursor));
+          setCursor(c => Math.max(0, c - 1));
+        }
+        return;
+      }
+      if (key.leftArrow) { setCursor(c => Math.max(0, c - 1)); return; }
+      if (key.rightArrow) { setCursor(c => Math.min(name.length, c + 1)); return; }
+      if (inputStr) {
+        setName(prev => prev.slice(0, cursor) + inputStr + prev.slice(cursor));
+        setCursor(c => c + inputStr.length);
+      }
+    }
+  });
+
+  return create(
+    Box,
+    {flexDirection: 'column', borderStyle: 'round', borderColor: 'cyan', padding: 1},
+    create(Text, {bold: true, color: 'cyan'}, '🏗️ Project Architect | Generator'),
+    create(Text, {dimColor: true, marginBottom: 1}, 'Create new projects from industry-standard templates.'),
+    step === 'framework'
+      ? create(
+          Box,
+          {flexDirection: 'column'},
+          create(Text, {bold: true}, 'Select Framework:'),
+          ...frameworks.map((f, i) => create(Text, {key: f.name, color: i === selectedIdx ? 'cyan' : 'white'}, `${i === selectedIdx ? '→' : ' '} ${f.name}`)),
+          create(Text, {dimColor: true, marginTop: 1}, 'Enter: Pick Framework, Shift+N: Return to Navigator.')
+        )
+      : create(
+          Box,
+          {flexDirection: 'column'},
+          create(Text, {bold: true, color: 'cyan'}, 'PROJECT NAME'),
+          create(
+            Box,
+            {flexDirection: 'row'},
+            create(Text, null, 'Enter name: '),
+            create(CursorText, {value: name, cursorIndex: cursor})
+          ),
+          create(Text, {dimColor: true, marginTop: 1}, 'Enter: Create Project, Esc: Back to Frameworks')
+        )
+  );
+});
+
+export default ProjectArchitect;

package/src/components/Studio.js

@@ -0,0 +1,65 @@
+import React, {useState, useEffect, memo} from 'react';
+import {Box, Text} from 'ink';
+import {execa} from 'execa';
+import {checkBinary} from '../projectDetection.js';
+
+const create = React.createElement;
+
+const Studio = memo(() => {
+  const [runtimes, setRuntimes] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const checks = [
+      {name: 'Node.js', binary: 'node', versionCmd: ['-v']},
+      {name: 'npm', binary: 'npm', versionCmd: ['-v']},
+      {name: 'Python', binary: process.platform === 'win32' ? 'python' : 'python3', versionCmd: ['--version']},
+      {name: 'Rust (Cargo)', binary: 'cargo', versionCmd: ['--version']},
+      {name: 'Go', binary: 'go', versionCmd: ['version']},
+      {name: 'Java', binary: 'java', versionCmd: ['-version']},
+      {name: 'PHP', binary: 'php', versionCmd: ['-v']},
+      {name: 'Ruby', binary: 'ruby', versionCmd: ['-v']},
+      {name: '.NET', binary: 'dotnet', versionCmd: ['--version']}
+    ];
+
+    (async () => {
+      const results = await Promise.all(checks.map(async (lang) => {
+        if (!checkBinary(lang.binary)) {
+          return {...lang, status: 'missing', version: 'not installed'};
+        }
+        try {
+          const {stdout, stderr} = await execa(lang.binary, lang.versionCmd);
+          const version = (stdout || stderr || '').split('\n')[0].trim();
+          return {...lang, status: 'ok', version};
+        } catch {
+          return {...lang, status: 'error', version: 'failed to check'};
+        }
+      }));
+      setRuntimes(results);
+      setLoading(false);
+    })();
+  }, []);
+
+  return create(
+    Box,
+    {flexDirection: 'column', borderStyle: 'double', borderColor: 'blue', padding: 1},
+    create(Text, {bold: true, color: 'blue'}, '💎 Omni-Studio | Environment Intelligence'),
+    create(Text, {dimColor: true, marginBottom: 1}, 'Overview of installed languages and build tools.'),
+    loading
+      ? create(Text, {dimColor: true}, 'Gathering intelligence...')
+      : create(
+          Box,
+          {flexDirection: 'column'},
+          ...runtimes.map(r => create(
+            Box,
+            {key: r.name, marginBottom: 0},
+            create(Text, {width: 20, color: r.status === 'ok' ? 'green' : 'red'}, `${r.status === 'ok' ? '✓' : '✗'} ${r.name}`),
+            create(Text, {dimColor: r.status !== 'ok'}, `:  ${r.version}`)
+          )),
+          create(Text, {marginTop: 1, color: 'yellow'}, '🛠️ Interactive Project Creator coming soon in v3.0'),
+          create(Text, {dimColor: true}, 'Press Shift+A to return to Navigator.')
+        )
+  );
+});
+
+export default Studio;

package/src/components/TaskManager.js

@@ -0,0 +1,24 @@
+import React, {memo} from 'react';
+import {Box, Text} from 'ink';
+
+const create = React.createElement;
+
+const TaskManager = memo(({tasks, activeTaskId, renameMode, renameInput, renameCursor, CursorText}) => {
+  return create(
+    Box,
+    {flexDirection: 'column', borderStyle: 'round', borderColor: 'yellow', padding: 1},
+    create(Text, {bold: true, color: 'yellow'}, '🛰️ Orbit Task Manager | Background Processes'),
+    create(Text, {dimColor: true, marginBottom: 1}, 'Up/Down: focus, Shift+K: Force Kill, Shift+R: Rename'),
+    ...tasks.map(t => create(
+      Box,
+      {key: t.id, marginBottom: 0, flexDirection: 'column'},
+      t.id === activeTaskId && renameMode 
+        ? create(Box, {flexDirection: 'row'}, create(Text, {color: 'cyan'}, '→ Rename to: '), create(CursorText, {value: renameInput, cursorIndex: renameCursor}))
+        : create(Text, {color: t.id === activeTaskId ? 'cyan' : 'white', bold: t.id === activeTaskId}, `${t.id === activeTaskId ? '→' : ' '} [${t.status.toUpperCase()}] ${t.name}`)
+    )),
+    !tasks.length && create(Text, {dimColor: true}, 'No active or background tasks.'),
+    create(Text, {marginTop: 1, dimColor: true}, 'Press Enter or Shift+T to return to Navigator.')
+  );
+});
+
+export default TaskManager;