project-compass 3.1.0 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-compass",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "description": "Ink-based project explorer that detects local repos and lets you build/test/run them without memorizing commands.",
   "main": "src/cli.js",
   "type": "module",

package/src/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState, memo} from 'react';
 import {render, Box, Text, useApp, useInput} from 'ink';
 import path from 'path';
 import fs from 'fs';
@@ -90,7 +90,7 @@ function buildDetailCommands(project, config) {
   return [...builtins, ...custom];
 }
 
-function Studio() {
+const Studio = memo(() => {
   const [runtimes, setRuntimes] = useState([]);
   const [loading, setLoading] = useState(true);
 
@@ -145,7 +145,25 @@ function Studio() {
           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: Kill/Delete, 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);
@@ -161,6 +179,32 @@ function CursorText({value, cursorIndex, active = true}) {
   );
 }
 
+const OutputPanel = memo(({activeTask, logOffset}) => {
+  const logs = activeTask?.logs || [];
+  const logWindowStart = Math.max(0, logs.length - OUTPUT_WINDOW_SIZE - logOffset);
+  const logWindowEnd = Math.max(0, logs.length - logOffset);
+  const visibleLogs = logs.slice(logWindowStart, logWindowEnd);
+  
+  const logNodes = visibleLogs.length 
+    ? visibleLogs.map((line, i) => create(Text, {key: i}, line)) 
+    : [create(Text, {key: 'empty', dimColor: true}, 'Select a task or run a command to see logs.')];
+
+  return create(
+    Box,
+    {
+      flexDirection: 'column',
+      borderStyle: 'round',
+      borderColor: 'yellow',
+      padding: 1,
+      minHeight: OUTPUT_WINDOW_HEIGHT,
+      maxHeight: OUTPUT_WINDOW_HEIGHT,
+      height: OUTPUT_WINDOW_HEIGHT,
+      overflow: 'hidden'
+    },
+    ...logNodes
+  );
+});
+
 function Compass({rootPath, initialView = 'navigator'}) {
   const {exit} = useApp();
   const {projects, loading, error} = useScanner(rootPath);
@@ -279,8 +323,8 @@ function Compass({rootPath, initialView = 'navigator'}) {
       const exportPath = path.resolve(process.cwd(), `compass-${activeTask.id}.txt`);
       fs.writeFileSync(exportPath, activeTask.logs.join('\n'));
       addLogToTask(activeTaskId, kleur.green(`✓ Logs exported to ${exportPath}`));
-    } catch (err) {
-      addLogToTask(activeTaskId, kleur.red(`✗ Export failed: ${err.message}`));
+    } catch {
+      addLogToTask(activeTaskId, kleur.red('✗ Export failed'));
     }
   }, [activeTask, activeTaskId, addLogToTask]);
 
@@ -464,117 +508,80 @@ function Compass({rootPath, initialView = 'navigator'}) {
     }
   });
 
-  const projectCountLabel = `${projects.length} project${projects.length === 1 ? '' : 's'}`;
+  const projectCountLabel = useMemo(() => `${projects.length} project${projects.length === 1 ? '' : 's'}`, [projects.length]);
   const toggleHint = config.showHelpCards ? 'Shift+H hide help' : 'Shift+H show help';
   const statusHint = activeTask ? `[${activeTask.status.toUpperCase()}] ${activeTask.name}` : 'Idle Navigator';
   const orbitHint = mainView === 'tasks' ? 'Tasks View' : `Orbit: ${tasks.length} tasks`;
   const artHint = config.showArtBoard ? 'Shift+B hide art' : 'Shift+B show art';
 
-  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(
-      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: Kill/Delete, 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.')
-    );
-  }
-
-  const projectRows = [];
-  if (loading) projectRows.push(create(Text, {key: 'scanning', dimColor: true}, 'Scanning projects…'));
-  if (error) projectRows.push(create(Text, {key: 'error', color: 'red'}, `Unable to scan: ${error}`));
-  if (!loading && !error && projects.length === 0) projectRows.push(create(Text, {key: 'empty', dimColor: true}, 'No recognizable project manifests found.'));
-  
-  if (!loading) {
-    projects.forEach((project, index) => {
+  const projectRows = useMemo(() => {
+    if (loading) return [create(Text, {key: 'scanning', dimColor: true}, 'Scanning projects…')];
+    if (error) return [create(Text, {key: 'error', color: 'red'}, `Unable to scan: ${error}`)];
+    if (projects.length === 0) return [create(Text, {key: 'empty', dimColor: true}, 'No recognizable project manifests found.')];
+    
+    return projects.map((project, index) => {
       const isSelected = index === selectedIndex;
       const frameworkBadges = (project.frameworks || []).map((frame) => `${frame.icon} ${frame.name}`).join(', ');
       const hasMissingRuntime = project.missingBinaries && project.missingBinaries.length > 0;
-      projectRows.push(
+      return create(
+        Box,
+        {key: project.id, flexDirection: 'column', marginBottom: 1, padding: 1},
         create(
           Box,
-          {key: project.id, flexDirection: 'column', marginBottom: 1, padding: 1},
-          create(
-            Box,
-            {flexDirection: 'row'},
-            create(Text, {color: isSelected ? 'cyan' : 'white', bold: isSelected}, `${project.icon} ${project.name}`),
-            hasMissingRuntime && create(Text, {color: 'red', bold: true}, '  ⚠️ Runtime missing')
-          ),
-          create(Text, {dimColor: true}, `  ${project.type} · ${path.relative(rootPath, project.path) || '.'}`),
-          frameworkBadges && create(Text, {dimColor: true}, `   ${frameworkBadges}`)
-        )
+          {flexDirection: 'row'},
+          create(Text, {color: isSelected ? 'cyan' : 'white', bold: isSelected}, `${project.icon} ${project.name}`),
+          hasMissingRuntime && create(Text, {color: 'red', bold: true}, '  ⚠️ Runtime missing')
+        ),
+        create(Text, {dimColor: true}, `  ${project.type} · ${path.relative(rootPath, project.path) || '.'}`),
+        frameworkBadges && create(Text, {dimColor: true}, `   ${frameworkBadges}`)
       );
     });
-  }
+  }, [loading, error, projects, selectedIndex, rootPath]);
 
-  const detailContent = [];
-  if (viewMode === 'detail' && selectedProject) {
-    detailContent.push(
+  const detailContent = useMemo(() => {
+    if (viewMode !== 'detail' || !selectedProject) {
+      return [create(Text, {key: 'e-h', dimColor: true}, 'Press Enter on a project to reveal details.')];
+    }
+    
+    const content = [
       create(Box, {key: 'title-row', flexDirection: 'row'}, 
         create(Text, {color: 'cyan', bold: true}, `${selectedProject.icon} ${selectedProject.name}`),
         selectedProject.missingBinaries && selectedProject.missingBinaries.length > 0 && create(Text, {color: 'red', bold: true}, '  ⚠️ MISSING RUNTIME')
       ),
       create(Text, {key: 'manifest', dimColor: true}, `${selectedProject.type} · ${selectedProject.manifest || 'detected manifest'}`),
       create(Text, {key: 'loc', dimColor: true}, `Location: ${path.relative(rootPath, selectedProject.path) || '.'}`)
-    );
-    if (selectedProject.description) detailContent.push(create(Text, {key: 'desc'}, selectedProject.description));
+    ];
+    if (selectedProject.description) content.push(create(Text, {key: 'desc'}, selectedProject.description));
     const frameworks = (selectedProject.frameworks || []).map((lib) => `${lib.icon} ${lib.name}`).join(', ');
-    if (frameworks) detailContent.push(create(Text, {key: 'frames', dimColor: true}, `Frameworks: ${frameworks}`));
+    if (frameworks) content.push(create(Text, {key: 'frames', dimColor: true}, `Frameworks: ${frameworks}`));
     
     if (selectedProject.missingBinaries && selectedProject.missingBinaries.length > 0) {
-      detailContent.push(
+      content.push(
         create(Text, {key: 'm-t', color: 'red', bold: true, marginTop: 1}, 'MISSING BINARIES:'),
         create(Text, {key: 'm-l', color: 'red'}, `Please install: ${selectedProject.missingBinaries.join(', ')}`)
       );
     }
 
-    detailContent.push(create(Text, {key: 'cmd-header', bold: true, marginTop: 1}, 'Commands'));
+    content.push(create(Text, {key: 'cmd-header', bold: true, marginTop: 1}, 'Commands'));
     detailedIndexed.forEach((command) => {
-      detailContent.push(
+      content.push(
         create(Text, {key: `d-${command.shortcut}`}, `${command.shortcut}. ${command.label} ${command.source === 'custom' ? kleur.magenta('(custom)') : command.source === 'framework' ? kleur.cyan('(framework)') : ''}`),
         create(Text, {key: `dl-${command.shortcut}`, dimColor: true}, `   ↳ ${command.command.join(' ')}`)
       );
     });
-    detailContent.push(create(Text, {key: 'h-l', dimColor: true, marginTop: 1}, 'Press Shift+C → label|cmd to save custom actions, Enter to close detail view.'));
-  } else {
-    detailContent.push(create(Text, {key: 'e-h', dimColor: true}, 'Press Enter on a project to reveal details.'));
-  }
+    content.push(create(Text, {key: 'h-l', dimColor: true, marginTop: 1}, 'Press Shift+C → label|cmd to save custom actions, Enter to close detail view.'));
+    return content;
+  }, [viewMode, selectedProject, rootPath, detailedIndexed]);
 
-  const artTileNodes = [
+  const artTileNodes = useMemo(() => [
     {label: 'Pulse', detail: projectCountLabel, accent: 'magenta', icon: '●', subtext: `Workspace · ${path.basename(rootPath) || rootPath}`},
     {label: 'Focus', detail: selectedProject?.name || 'Selection', accent: 'cyan', icon: '◆', subtext: `${selectedProject?.type || 'Stack'}`},
-    {label: 'Orbit', detail: `${tasks.length} active tasks`, accent: 'yellow', icon: '■', subtext: running ? 'Busy streaming...' : 'Idle'}
+    {label: 'Orbit', detail: `${tasks.length} tasks`, accent: 'yellow', icon: '■', subtext: running ? 'Busy streaming...' : 'Idle'}
   ].map(tile => create(Box, {key: tile.label, flexDirection: 'column', padding: 1, marginRight: 1, borderStyle: 'single', borderColor: tile.accent, minWidth: 24},
     create(Text, {color: tile.accent, bold: true}, `${tile.icon} ${tile.label}`),
     create(Text, {bold: true}, tile.detail),
     create(Text, {dimColor: true}, tile.subtext)
-  ));
-
-  const artBoard = config.showArtBoard ? create(Box, {flexDirection: 'column', marginTop: 1, borderStyle: 'round', borderColor: 'gray', padding: 1},
-    create(Box, {flexDirection: 'row', justifyContent: 'space-between'}, create(Text, {color: 'magenta', bold: true}, 'Art-coded build atlas'), create(Text, {dimColor: true}, 'press ? for overlay help')),
-    create(Box, {flexDirection: 'row', marginTop: 1}, ...ART_CHARS.map((char, i) => create(Text, {key: i, color: ART_COLORS[i % ART_COLORS.length]}, char.repeat(2)))),
-    create(Box, {flexDirection: 'row', marginTop: 1}, ...artTileNodes)
-  ) : null;
-
-  const logs = activeTask?.logs || [];
-  const logWindowStart = Math.max(0, logs.length - OUTPUT_WINDOW_SIZE - logOffset);
-  const logWindowEnd = Math.max(0, logs.length - logOffset);
-  const visibleLogs = logs.slice(logWindowStart, logWindowEnd);
-  const logNodes = visibleLogs.length ? visibleLogs.map((line, i) => create(Text, {key: i}, line)) : [create(Text, {dimColor: true}, 'Select a task or run a command to see logs.')];
+  )), [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']},
@@ -582,6 +589,13 @@ function Compass({rootPath, initialView = 'navigator'}) {
     {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});
+
   return create(Box, {flexDirection: 'column', padding: 1},
     create(Box, {justifyContent: 'space-between'},
       create(Box, {flexDirection: 'column'}, create(Text, {color: 'magenta', bold: true}, 'Project Compass'), create(Text, {dimColor: true}, `${projectCountLabel} detected in ${rootPath}`)),
@@ -590,14 +604,18 @@ function Compass({rootPath, initialView = 'navigator'}) {
         create(Text, {dimColor: true}, `${toggleHint} · ${orbitHint} · ${artHint} · Shift+Q: Quit`)
       )
     ),
-    artBoard,
+    config.showArtBoard && create(Box, {flexDirection: 'column', marginTop: 1, borderStyle: 'round', borderColor: 'gray', padding: 1},
+      create(Box, {flexDirection: 'row', justifyContent: 'space-between'}, create(Text, {color: 'magenta', bold: true}, 'Art-coded build atlas'), create(Text, {dimColor: true}, 'press ? for overlay help')),
+      create(Box, {flexDirection: 'row', marginTop: 1}, ...ART_CHARS.map((char, i) => create(Text, {key: i, color: ART_COLORS[i % ART_COLORS.length]}, char.repeat(2)))),
+      create(Box, {flexDirection: 'row', marginTop: 1}, ...artTileNodes)
+    ),
     create(Box, {marginTop: 1, flexDirection: 'row', alignItems: 'stretch', width: '100%', flexWrap: 'wrap'},
       create(Box, {flexGrow: 1, flexBasis: 0, minWidth: PROJECTS_MIN_WIDTH, marginRight: 1, borderStyle: 'round', borderColor: 'magenta', padding: 1}, create(Text, {bold: true, color: 'magenta'}, 'Projects'), create(Box, {flexDirection: 'column', marginTop: 1}, ...projectRows)),
       create(Box, {flexGrow: 1.3, flexBasis: 0, minWidth: DETAILS_MIN_WIDTH, borderStyle: 'round', borderColor: 'cyan', padding: 1, flexDirection: 'column'}, create(Text, {bold: true, color: 'cyan'}, 'Details'), ...detailContent)
     ),
     create(Box, {marginTop: 1, flexDirection: 'column'},
       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(Box, {flexDirection: 'column', borderStyle: 'round', borderColor: 'yellow', padding: 1, minHeight: OUTPUT_WINDOW_HEIGHT, maxHeight: OUTPUT_WINDOW_HEIGHT, height: OUTPUT_WINDOW_HEIGHT, overflow: 'hidden'}, ...logNodes),
+      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})))
     ),