project-compass 4.3.0 → 4.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-compass",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "description": "🧭 Futuristic TUI workspace navigator & runner - AI-powered project detection for Node, Python, Rust, Go, Java, PHP, Ruby, .NET",
   "main": "src/cli.js",
   "bin": {

package/src/cli.js

@@ -7,7 +7,7 @@ import {fileURLToPath} from 'url';
 import fs from 'fs';
 import kleur from 'kleur';
 import {execa} from 'execa';
-import {discoverProjects, SCHEMA_GUIDE} from './projectDetection.js';
+import {discoverProjects} from './projectDetection.js';
 import {CONFIG_PATH, ensureConfigDir} from './configPaths.js';
 
 // Modular Components
@@ -696,7 +696,33 @@ function Compass({rootPath, initialView = 'navigator'}) {
             {label: 'Management', color: 'cyan', body: ['Shift+P Package Registry', 'Shift+N Project Architect', 'Shift+X clear / Shift+E export']},
             {label: 'Orbit & AI', color: 'yellow', body: ['Shift+T: Tasks, Shift+O: AI, 0: Analyze', 'Shift+A studio / Shift+O AI Horizon', '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, {key: 'structure', 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(', ')}`))),
+          config.showStructureGuide && create(Box, {key: 'structure', flexDirection: 'column', borderStyle: 'round', borderColor: 'blue', marginTop: 1, padding: 1}, 
+            create(Box, {flexDirection: 'row', justifyContent: 'space-between', marginBottom: 0},
+              create(Text, {color: 'cyan', bold: true}, '📁 Structure Guide · Press Shift+S to hide'),
+              create(Text, {dimColor: true}, `${projects.length} project${projects.length !== 1 ? 's' : ''} detected`)
+            ),
+            projects.length === 0 && create(Text, {dimColor: true, marginTop: 0}, 'No projects detected yet...'),
+            projects.length > 0 && projects.map((p, idx) => 
+              create(Box, {key: p.id, flexDirection: 'column', marginBottom: 0, 
+                       borderStyle: 'single', borderColor: p.type === 'Node.js' ? 'cyan' : 
+                                          p.type === 'Python' ? 'green' : 
+                                          p.type === 'Rust' ? 'red' : 
+                                          p.type === 'Go' ? 'blue' : 
+                                          p.type === 'Java' ? 'yellow' : 
+                                          p.type === 'PHP' ? 'purple' : 
+                                          p.type === 'Ruby' ? 'red' : 'gray',
+                       paddingX: 1, paddingY: 0},
+                create(Box, {flexDirection: 'row', alignItems: 'center'},
+                  create(Text, {bold: true, color: selectedIndex === idx ? 'cyan' : 'white'}, 
+                    `${selectedIndex === idx ? '→ ' : '  '}${p.icon} ${p.name}`),
+                  p.missingBinaries && p.missingBinaries.length > 0 && create(Text, {color: 'red'}, ' ⚠')
+                ),
+                create(Text, {dimColor: true}, `  ${p.type} · ${path.relative(rootPath, p.path) || '.'}`),
+                p.frameworks && p.frameworks.length > 0 && create(Text, {dimColor: true}, `  Frameworks: ${p.frameworks.map(f => `${f.icon} ${f.name}`).join(', ')}`),
+                p.description && create(Text, {dimColor: true}, `  ${p.description}`)
+              )
+            )
+          ),
           showHelp && create(Box, {key: 'overlay', 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; Shift+O AI Horizon.'))
         ];
         return create(Box, {flexDirection: 'column'}, ...navigatorBody);

package/src/components/AIHorizon.js

@@ -1,6 +1,8 @@
-/* global fetch */
+/* global fetch, setTimeout */
 import React, {useState, memo} from 'react';
 import {Box, Text, useInput} from 'ink';
+import fs from 'fs';
+import path from 'path';
 
 const create = React.createElement;
 
@@ -20,35 +22,99 @@ const AIHorizon = memo(({selectedProject, CursorText, config, setConfig, saveCon
   const [status, setStatus] = useState('ready');
   const [error, setError] = useState(null);
   const [suggestions, setSuggestions] = useState([]);
+  const [editingIdx, setEditingIdx] = useState(-1);
+  const [editInput, setEditInput] = useState('');
+  const [editCursor, setEditCursor] = useState(0);
+  const [customContext, setCustomContext] = useState('');
+
+  
+  const readProjectFile = (filePath) => {
+    try {
+      const fullPath = selectedProject?.path ? path.join(selectedProject.path, filePath) : filePath;
+      if (fs.existsSync(fullPath)) {
+        const content = fs.readFileSync(fullPath, 'utf-8');
+        return content.slice(0, 2000); // First 2000 chars
+      }
+    } catch { /* ignore */ }
+    return '';
+  };
+  
+  const buildProjectContext = () => {
+    if (!selectedProject) return null;
+    const pm = selectedProject.metadata?.packageManager || 'npm';
+    const frameworks = (selectedProject.frameworks || []).map(f => f.name).join(', ');
+    const scripts = selectedProject.metadata?.scripts || {};
+    const deps = (selectedProject.metadata?.dependencies || []).slice(0, 30);
+    
+    // Read actual project files
+    const readme = readProjectFile('README.md') || readProjectFile('readme.md') || '';
+    const mainFile = readProjectFile('main.py') || readProjectFile('app.py') || 
+                   readProjectFile('src/main.py') || readProjectFile('index.js') || '';
+    const configFile = readProjectFile('pyproject.toml') || readProjectFile('package.json') || '';
+    
+    return {
+      name: selectedProject.name,
+      type: selectedProject.type,
+      path: selectedProject.path,
+      manifest: selectedProject.manifest,
+      packageManager: pm,
+      frameworks: frameworks || 'None detected',
+      scripts: scripts,
+      scriptNames: Object.keys(scripts).join(', ') || 'None',
+      dependencies: deps,
+      description: selectedProject.description || '',
+      hasPort: !!selectedProject.metadata?.port,
+      readme: readme.slice(0, 1500),
+      mainFile: mainFile.slice(0, 1500),
+      configFile: configFile.slice(0, 1500),
+      customContext
+    };
+  };
 
   const runRealAnalysis = async () => {
     setStatus('busy');
     setError(null);
     const provider = AI_PROVIDERS[providerIdx];
+    const context = buildProjectContext();
+    
+    if (!context) {
+      setError('No project selected for analysis');
+      setStatus('ready');
+      return;
+    }
     
     try {
-      const projectData = JSON.stringify({
-        name: selectedProject.name,
-        type: selectedProject.type,
-        manifest: selectedProject.manifest,
-        scripts: selectedProject.metadata?.scripts || {},
-        dependencies: selectedProject.metadata?.dependencies || []
-      });
+      const prompt = `You are analyzing a ${context.type} project named "${context.name}".
+Project Details:
+- Package Manager: ${context.packageManager}
+- Frameworks: ${context.frameworks}
+- Available Scripts: ${context.scriptNames}
+- Key Dependencies: ${JSON.stringify(context.dependencies)}
+- Description: ${context.description}
+
+Based on this REAL project data, suggest the correct CLI commands for:
+1. BUILD (compile/build the project)
+2. RUN (start/run the project in development)
+3. INSTALL (install dependencies)
+4. TEST (run tests)
 
-      const prompt = `Analyze this project structure and suggest valid CLI commands for:
-1. Build
-2. Run
-3. Install
-4. Test
+CRITICAL RULES:
+- Use the ACTUAL package manager: ${context.packageManager}
+- Use ACTUAL script names from: ${context.scriptNames}
+- For Python: use "uv run" if uv is available, else "python" or "pip"
+- For Node: use "npm run", "yarn", "pnpm" or "bun" based on ${context.packageManager}
+- For Rust: use "cargo" commands
+- For Go: use "go" commands
+- DO NOT suggest generic commands - use the project's actual tools
 
-Project Data: ${projectData}
+Return ONLY valid JSON (no markdown, no code blocks):
+{"build": "exact command here", "run": "exact command here", "install": "exact command here", "test": "exact command here"}
 
-Return ONLY a JSON object with this structure: {"build": "cmd", "run": "cmd", "install": "cmd", "test": "cmd"}. 
-Use the project's detected type (${selectedProject.type}) to ensure commands are correct (e.g., npm, pip, cargo).`;
+Example for Node.js with npm: {"build": "npm run build", "run": "npm run dev", "install": "npm install", "test": "npm run test"}`;
 
       let response;
       let aiText = '';
-
+      
       if (provider.id === 'openrouter') {
         response = await fetch(provider.endpoint, {
           method: 'POST',
@@ -103,33 +169,55 @@ Use the project's detected type (${selectedProject.type}) to ensure commands are
         if (!response.ok) throw new Error(data.error || 'Ollama Error');
         aiText = data.response;
       }
-
-      const jsonMatch = aiText.match(/{.*?}/s);
-      if (!jsonMatch) throw new Error("AI returned invalid DNA mapping format.");
+      
+      const jsonMatch = aiText.match(/{[\s\S]*?}/);
+      if (!jsonMatch) throw new Error("AI returned invalid JSON format.");
       
       const parsed = JSON.parse(jsonMatch[0]);
+      
+      // Validate commands are arrays
       const mapped = [
-        { label: 'AI Build', command: parsed.build.split(' ') },
-        { label: 'AI Run', command: parsed.run.split(' ') },
-        { label: 'AI Install', command: parsed.install.split(' ') },
-        { label: 'AI Test', command: parsed.test.split(' ') }
-      ];
-
+        { key: 'build', label: 'Build', command: parsed.build?.split(' ').filter(Boolean) || [] },
+        { key: 'run', label: 'Run', command: parsed.run?.split(' ').filter(Boolean) || [] },
+        { key: 'install', label: 'Install', command: parsed.install?.split(' ').filter(Boolean) || [] },
+        { key: 'test', label: 'Test', command: parsed.test?.split(' ').filter(Boolean) || [] }
+      ].filter(cmd => cmd.command.length > 0);
+      
       setSuggestions(mapped);
-      const projectKey = selectedProject.path;
-      const currentCustom = config.customCommands?.[projectKey] || [];
-      const nextConfig = { 
-        ...config, 
-        customCommands: { ...config.customCommands, [projectKey]: [...currentCustom, ...mapped] } 
-      };
-      setConfig(nextConfig); saveConfig(nextConfig);
-      setStatus('done');
+      setStatus('review'); // NOW go to review step instead of auto-saving
     } catch (err) {
       setError(err.message);
       setStatus('ready');
     }
   };
-
+  
+  const saveSuggestions = () => {
+    if (!selectedProject || suggestions.length === 0) return;
+    
+    const projectKey = selectedProject.path;
+    const currentCustom = config.customCommands?.[projectKey] || [];
+    
+    // Convert suggestions to proper format and add to custom commands
+    const newCommands = suggestions.map(cmd => ({
+      label: `AI ${cmd.label}`,
+      command: cmd.command,
+      source: 'ai'
+    }));
+    
+    const nextConfig = { 
+      ...config, 
+      customCommands: { 
+        ...config.customCommands, 
+        [projectKey]: [...currentCustom, ...newCommands] 
+      } 
+    };
+    setConfig(nextConfig); 
+    saveConfig(nextConfig);
+    setStatus('saved');
+    
+    setTimeout(() => setStatus('ready'), 2000);
+  };
+  
   useInput((input, key) => {
     if (step === 'provider') {
       if (key.upArrow) setProviderIdx(p => (p - 1 + AI_PROVIDERS.length) % AI_PROVIDERS.length);
@@ -167,25 +255,93 @@ Use the project's detected type (${selectedProject.type}) to ensure commands are
       if (key.return && status === 'ready' && selectedProject) {
         runRealAnalysis();
       }
+      if (key.return && status === 'review') {
+        // Toggle edit mode for a suggestion
+        if (editingIdx >= 0) {
+          const updated = [...suggestions];
+          updated[editingIdx] = { ...updated[editingIdx], command: editInput.split(' ').filter(Boolean) };
+          setSuggestions(updated);
+          setEditingIdx(-1);
+        }
+      }
+      if (input === 's' && status === 'review') {
+        saveSuggestions();
+      }
+      if (input === 'e' && status === 'review' && suggestions.length > 0) {
+        setEditingIdx(0);
+        setEditInput(suggestions[0].command.join(' '));
+        setEditCursor(suggestions[0].command.join(' ').length);
+      }
+      if (key.upArrow && status === 'review' && editingIdx < 0) {
+        setEditingIdx(p => Math.max(0, p - 1));
+        if (suggestions[Math.max(0, editingIdx - 1)]) {
+          setEditInput(suggestions[Math.max(0, editingIdx - 1)].command.join(' '));
+          setEditCursor(suggestions[Math.max(0, editingIdx - 1)].command.join(' ').length);
+        }
+      }
+      if (key.downArrow && status === 'review' && editingIdx < 0) {
+        setEditingIdx(p => Math.min(suggestions.length - 1, p + 1));
+        if (suggestions[Math.min(suggestions.length - 1, editingIdx + 1)]) {
+          setEditInput(suggestions[Math.min(suggestions.length - 1, editingIdx + 1)].command.join(' '));
+          setEditCursor(suggestions[Math.min(suggestions.length - 1, editingIdx + 1)].command.join(' ').length);
+        }
+      }
+      if (key.escape) {
+        if (editingIdx >= 0) {
+          setEditingIdx(-1);
+        } else if (status === 'review') {
+          setStatus('ready');
+          setSuggestions([]);
+        }
+      }
       if (input === 'r') {
         const nextConfig = { ...config, aiToken: '' };
         setConfig(nextConfig); saveConfig(nextConfig);
         setStep('provider');
       }
     }
+    
+    // Handle editing input
+    if (editingIdx >= 0) {
+      if (key.return) {
+        const updated = [...suggestions];
+        updated[editingIdx] = { ...updated[editingIdx], command: editInput.split(' ').filter(Boolean) };
+        setSuggestions(updated);
+        setEditingIdx(-1);
+      }
+      if (key.escape) {
+        setEditingIdx(-1);
+      }
+      if (key.backspace || key.delete) {
+        if (editCursor > 0) {
+          setEditInput(prev => prev.slice(0, editCursor - 1) + prev.slice(editCursor));
+          setEditCursor(c => Math.max(0, c - 1));
+        }
+      } else if (key.leftArrow) {
+        setEditCursor(c => Math.max(0, c - 1));
+      } else if (key.rightArrow) {
+        setEditCursor(c => Math.min(editInput.length, c + 1));
+      } else if (input && !key.ctrl && !key.meta) {
+        setEditInput(prev => prev.slice(0, editCursor) + input + prev.slice(editCursor));
+        setEditCursor(c => c + input.length);
+      }
+    }
   });
 
+  const context = selectedProject ? buildProjectContext() : null;
+
   return create(
     Box,
     {flexDirection: 'column', borderStyle: 'double', borderColor: 'magenta', padding: 1, width: '100%'},
-    create(Text, {bold: true, color: 'magenta'}, '🤖 AI Horizon | Integrated Project Intelligence'),
+    create(Text, {bold: true, color: 'magenta'}, '🤖 AI Horizon | Project Intelligence'),
+    create(Text, {dimColor: true}, 'Real AI analysis with project context\n'),
     
     step === 'provider' && create(
       Box,
       {flexDirection: 'column'},
-      create(Text, {bold: true, marginBottom: 1}, 'Step 1: Select AI Infrastructure'),
+      create(Text, {bold: true, marginBottom: 1}, 'Step 1: Select AI Provider'),
       ...AI_PROVIDERS.map((p, i) => create(Text, {key: p.id, color: i === providerIdx ? 'cyan' : 'white'}, (i === providerIdx ? '→ ' : '  ') + p.name)),
-      create(Text, {dimColor: true, marginTop: 1}, 'Enter: Save & Next')
+      create(Text, {dimColor: true, marginTop: 1}, '↑/↓: Navigate, Enter: Select')
     ),
 
     step === 'model' && create(
@@ -193,40 +349,76 @@ Use the project's detected type (${selectedProject.type}) to ensure commands are
       {flexDirection: 'column'},
       create(Text, {bold: true, color: 'yellow', marginBottom: 1}, 'Step 2: Model Configuration'),
       create(Box, {flexDirection: 'row'},
-        create(Text, null, 'Model ID: '),
+        create(Text, null, 'Model: '),
         create(CursorText, {value: model, cursorIndex: cursor})
       ),
-      create(Text, {dimColor: true, marginTop: 1}, 'Enter: Save Model, Esc: Back')
+      create(Text, {dimColor: true, marginTop: 1}, 'Enter: Save, Esc: Back')
     ),
 
     step === 'token' && create(
       Box,
       {flexDirection: 'column'},
-      create(Text, {bold: true, color: 'red', marginBottom: 1}, 'Step 3: API Token Authorization'),
+      create(Text, {bold: true, color: 'red', marginBottom: 1}, 'Step 3: API Token'),
       create(Box, {flexDirection: 'row'},
         create(Text, null, 'Token: '),
         create(CursorText, {value: '*'.repeat(token.length), cursorIndex: cursor})
       ),
-      create(Text, {dimColor: true, marginTop: 1}, 'Enter: Save Token, Esc: Back')
+      create(Text, {dimColor: true, marginTop: 1}, 'Enter: Save, Esc: Back')
     ),
 
     step === 'analyze' && create(
       Box,
       {flexDirection: 'column'},
-      create(Text, {bold: true, color: 'cyan', marginBottom: 1}, 'Ready to analyze: ' + (selectedProject ? selectedProject.name : 'No project selected')),
-      create(Text, {dimColor: true}, 'Active: ' + config.aiProvider + ' (' + config.aiModel + ')'),
+      create(Text, {bold: true, color: 'cyan', marginBottom: 1}, 
+        'Project: ' + (selectedProject ? selectedProject.name : 'No project selected')),
       
-      create(Box, {marginTop: 1, flexDirection: 'column'},
-        status === 'ready' && create(Text, null, 'Press Enter to perform real agentic analysis and auto-configure macros.'),
-        status === 'busy' && create(Text, {color: 'yellow'}, ' ⏳ Contacting AI Agent... mapping project structure...'),
-        status === 'done' && create(Box, {flexDirection: 'column'},
-          create(Text, {color: 'green', bold: true}, ' ✅ DNA Mapped via AI Agent!'),
-          create(Text, null, ' Successfully injected ' + suggestions.length + ' optimized commands. AI detected potential port conflicts? Checking...'),
-          create(Text, {dimColor: true, marginTop: 1}, 'Return to Navigator to use BRIT shortcuts.')
-        ),
-        error && create(Text, {color: 'red', bold: true, marginTop: 1}, ' ✗ AI ERROR: ' + error)
+      context && create(
+        Box,
+        {flexDirection: 'column', marginBottom: 1},
+        create(Text, {dimColor: true}, `Type: ${context.type} | PM: ${context.packageManager}`),
+        create(Text, {dimColor: true}, `Frameworks: ${context.frameworks}`),
+        create(Text, {dimColor: true}, `Scripts: ${context.scriptNames}`)
       ),
-      create(Text, {dimColor: true, marginTop: 1}, 'Esc: Return, R: Reset Credentials')
+      
+      status === 'ready' && create(
+        Box,
+        {flexDirection: 'column'},
+        create(Text, null, 'Press Enter to analyze with AI using real project context'),
+        create(Text, {dimColor: true}, 'Provider: ' + config.aiProvider + ' | Model: ' + config.aiModel)
+      ),
+      
+      status === 'busy' && create(Text, {color: 'yellow', marginTop: 1}, ' ⏳ Analyzing project with AI...'),
+      
+      status === 'review' && create(
+        Box,
+        {flexDirection: 'column', marginTop: 1},
+        create(Text, {bold: true, color: 'green'}, '✅ AI Suggestions (Review & Edit):'),
+        ...suggestions.map((cmd, idx) => {
+          const isEditing = editingIdx === idx;
+          return create(
+            Box,
+            {key: cmd.key, flexDirection: 'column', marginBottom: 0, 
+             borderStyle: isEditing ? 'double' : 'single', 
+             borderColor: isEditing ? 'yellow' : (idx === editingIdx ? 'cyan' : 'gray'),
+             paddingX: 1},
+            create(Text, {bold: true, color: idx === editingIdx ? 'cyan' : 'white'}, 
+              (idx === editingIdx ? '→ ' : '  ') + cmd.label + ':'),
+            isEditing 
+              ? create(CursorText, {value: editInput, cursorIndex: editCursor})
+              : create(Text, {dimColor: true}, '  ' + cmd.command.join(' ')),
+          );
+        }),
+        create(Box, {marginTop: 1, flexDirection: 'row', justifyContent: 'space-between'},
+          create(Text, {dimColor: true}, '↑/↓: Select | E: Edit | S: Save to Config'),
+          create(Text, {color: 'green'}, 'Esc: Cancel')
+        )
+      ),
+      
+      status === 'saved' && create(Text, {color: 'green', bold: true, marginTop: 1}, '✅ Commands saved to config!'),
+      
+      error && create(Text, {color: 'red', bold: true, marginTop: 1}, '✗ Error: ' + error),
+      
+      create(Text, {dimColor: true, marginTop: 1}, 'Esc: Back | R: Reset Auth')
     )
   );
 });

package/src/components/TaskManager.js

@@ -2,22 +2,80 @@ import React, {memo} from 'react';
 import {Box, Text} from 'ink';
 
 const create = React.createElement;
+const STATUC_COLORS = { running: 'green', finished: 'cyan', failed: 'red', killed: 'yellow' };
 
 const TaskManager = memo(({tasks, activeTaskId, renameMode, renameInput, renameCursor, CursorText}) => {
+  const activeTask = tasks.find(t => t.id === activeTaskId);
+  const logLines = activeTask?.logs || [];
+  const visibleLogs = logLines.slice(-5);
+  
   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.')
+    {flexDirection: 'column', borderStyle: 'double', borderColor: 'yellow', padding: 1, height: '100%'},
+    // Header
+    create(Box, {flexDirection: 'row', justifyContent: 'space-between', marginBottom: 1},
+      create(Box, {flexDirection: 'row', alignItems: 'center'},
+        create(Text, {bold: true, color: 'yellow'}, '🛰️ '),
+        create(Text, {bold: true, color: 'yellow'}, 'Orbit Task Manager'),
+        create(Text, {dimColor: true}, ` | ${tasks.length} task${tasks.length !== 1 ? 's' : ''}`)
+      ),
+      tasks.length > 0 && create(Text, {color: 'cyan', bold: true}, 
+        `[${tasks.filter(t => t.status === 'running').length} ACTIVE]`)
+    ),
+    
+    // Task List
+    create(Box, {flexDirection: 'column', flexGrow: 1},
+      ...tasks.map((t, idx) => {
+        const isActive = t.id === activeTaskId;
+        const color = STATUC_COLORS[t.status] || 'white';
+        return create(
+          Box,
+          {key: t.id, marginBottom: 0, 
+           borderStyle: isActive ? 'bold' : 'single',
+           borderColor: isActive ? color : 'gray',
+           paddingX: 1, paddingY: 0},
+          create(Box, {flexDirection: 'column'},
+            // Task header
+            isActive && renameMode 
+              ? create(Box, {flexDirection: 'row'}, 
+                  create(Text, {color: 'cyan'}, '→ Rename: '), 
+                  create(CursorText, {value: renameInput, cursorIndex: renameCursor}))
+              : create(Box, {flexDirection: 'row', justifyContent: 'space-between'},
+                  create(Box, {flexDirection: 'row', alignItems: 'center'},
+                    create(Text, {color: isActive ? color : 'white', bold: isActive}, 
+                      `${isActive ? '→ ' : '  '}[${t.status.toUpperCase()}] ${t.name}`),
+                    t.status === 'running' && create(Text, {color: 'green'}, ' ⚡'),
+                    t.status === 'failed' && create(Text, {color: 'red'}, ' ✗'),
+                    t.status === 'killed' && create(Text, {color: 'yellow'}, ' ⚠')
+                  ),
+                  create(Text, {dimColor: true}, `#${idx + 1}`)
+                ),
+            // Mini log preview for active task
+            isActive && logLines.length > 0 && create(
+              Box, {marginTop: 0, paddingLeft: 2},
+              ...visibleLogs.map((line, i) => 
+                create(Text, {key: i, dimColor: true}, 
+                  `${i === visibleLogs.length - 1 ? '>' : '·'} ${line.slice(0, 60)}`)
+              )
+            )
+          )
+        );
+      }),
+      !tasks.length && create(
+        Box, {alignItems: 'center', justifyContent: 'center', flexGrow: 1},
+        create(Text, {dimColor: true, bold: true}, 'No active tasks'),
+        create(Text, {dimColor: true}, 'Run a command to see it here!')
+      )
+    ),
+    
+    // Footer
+    create(Box, {marginTop: 1, flexDirection: 'column'},
+      create(Box, {flexDirection: 'row', justifyContent: 'space-between'},
+        create(Text, {dimColor: true}, '↑/↓: Navigate | Enter: Select'),
+        create(Text, {dimColor: true}, 'Shift+K: Kill | Shift+R: Rename')
+      ),
+      create(Text, {dimColor: true}, 'Press Enter or Shift+T to return to Navigator.')
+    )
   );
 });
 

package/src/detectors/compass-config.js

@@ -0,0 +1,39 @@
+/**
+ * Compass Config Loader
+ * Loads project-specific config from compass.config.js if it exists
+ */
+import fs from 'fs';
+import path from 'path';
+
+export async function loadProjectConfig(projectPath) {
+  const configPath = path.join(projectPath, 'compass.config.js');
+  if (!fs.existsSync(configPath)) return null;
+  
+  try {
+    // Dynamic import for ESM
+    const config = await import(`file://${configPath}?t=${Date.now()}`);
+    return config.default || config;
+  } catch (e) {
+    console.error(`Failed to load compass.config.js: ${e.message}`);
+    return null;
+  }
+}
+
+export function saveProjectConfig(projectPath, config) {
+  const configPath = path.join(projectPath, 'compass.config.js');
+  const projectName = path.basename(projectPath);
+  const content = `/**
+ * Compass Configuration for ${projectName}
+ * Generated by AI Horizon
+ */
+export default ${JSON.stringify(config, null, 2)};
+`;
+  
+  try {
+    fs.writeFileSync(configPath, content, 'utf-8');
+    return true;
+  } catch (e) {
+    console.error(`Failed to save compass.config.js: ${e.message}`);
+    return false;
+  }
+}

package/src/detectors/python.js

@@ -71,25 +71,34 @@ function gatherPythonDependencies(projectPath) {
 
 function detectPythonFramework(deps) {
   const frameworks = [];
-  const depStr = deps.join(' ').toLowerCase();
   
-  if (depStr.includes('fastapi')) frameworks.push({ name: 'FastAPI', icon: '⚡' });
-  if (depStr.includes('flask')) frameworks.push({ name: 'Flask', icon: '🌶️' });
-  if (depStr.includes('django')) frameworks.push({ name: 'Django', icon: '🌿' });
-  if (depStr.includes('tornado')) frameworks.push({ name: 'Tornado', icon: '🌪️' });
-  if (depStr.includes('aiohttp')) frameworks.push({ name: 'AioHTTP', icon: '🔄' });
-  if (depStr.includes('sanic')) frameworks.push({ name: 'Sanic', icon: '🚀' });
-  if (depStr.includes('pyramid')) frameworks.push({ name: 'Pyramid', icon: '🔺' });
-  if (depStr.includes('falcon')) frameworks.push({ name: 'Falcon', icon: '🦅' });
-  if (depStr.includes('starlette')) frameworks.push({ name: 'Starlette', icon: '⭐' });
-  if (depStr.includes('pandas')) frameworks.push({ name: 'Pandas', icon: '🐼' });
-  if (depStr.includes('numpy')) frameworks.push({ name: 'NumPy', icon: '🔢' });
-  if (depStr.includes('scipy')) frameworks.push({ name: 'SciPy', icon: '🔬' });
-  if (depStr.includes('torch') || depStr.includes('pytorch')) frameworks.push({ name: 'PyTorch', icon: '🔥' });
-  if (depStr.includes('tensorflow')) frameworks.push({ name: 'TensorFlow', icon: '🧠' });
-  if (depStr.includes('sqlalchemy')) frameworks.push({ name: 'SQLAlchemy', icon: '🗄️' });
-  if (depStr.includes('pytest')) frameworks.push({ name: 'Pytest', icon: '✅' });
-  if (depStr.includes('celery')) frameworks.push({ name: 'Celery', icon: '🥬' });
+  const hasDep = (pattern) => 
+    deps.some(dep => {
+      const depLower = dep.toLowerCase();
+      return depLower === pattern.toLowerCase() ||
+             depLower.startsWith(pattern.toLowerCase() + '==') ||
+             depLower.startsWith(pattern.toLowerCase() + '>=') ||
+             depLower.startsWith(pattern.toLowerCase() + '<=') ||
+             depLower.startsWith(pattern.toLowerCase() + '~=');
+    });
+  
+  if (hasDep('fastapi')) frameworks.push({ name: 'FastAPI', icon: '\u26A1' });
+  if (hasDep('flask')) frameworks.push({ name: 'Flask', icon: '\uD83C\uDF36\uFE0F' });
+  if (hasDep('django')) frameworks.push({ name: 'Django', icon: '\uD83C\uDF3F' });
+  if (hasDep('tornado')) frameworks.push({ name: 'Tornado', icon: '\uD83C\uDF2A\uFE0F' });
+  if (hasDep('aiohttp')) frameworks.push({ name: 'AioHTTP', icon: '\uD83D\uDD04' });
+  if (hasDep('sanic')) frameworks.push({ name: 'Sanic', icon: '\uD83D\uDE80' });
+  if (hasDep('pyramid')) frameworks.push({ name: 'Pyramid', icon: '\uD83D\uDE3A' });
+  if (hasDep('falcon')) frameworks.push({ name: 'Falcon', icon: '\uD83D\uDC05' });
+  if (hasDep('starlette')) frameworks.push({ name: 'Starlette', icon: '\u2B50' });
+  if (hasDep('pandas')) frameworks.push({ name: 'Pandas', icon: '\uD83D\uDC3C' });
+  if (hasDep('numpy')) frameworks.push({ name: 'NumPy', icon: '\uD83D\uDD22' });
+  if (hasDep('scipy')) frameworks.push({ name: 'SciPy', icon: '\uD83D\uDD2C' });
+  if (hasDep('torch') || hasDep('pytorch')) frameworks.push({ name: 'PyTorch', icon: '\uD83D\uDD25' });
+  if (hasDep('tensorflow')) frameworks.push({ name: 'TensorFlow', icon: '\uD83E\uDD20' });
+  if (hasDep('sqlalchemy')) frameworks.push({ name: 'SQLAlchemy', icon: '\uD83D\uDCC4\uFE0F' });
+  if (hasDep('pytest')) frameworks.push({ name: 'Pytest', icon: '\u2705' });
+  if (hasDep('celery')) frameworks.push({ name: 'Celery', icon: '\uD83D\uDE2C' });
   
   return frameworks;
 }