ctxman 3.0.0 → 3.1.0

package/lib/ui/progress-bar.js

@@ -1,4 +1,4 @@
-import React from 'react.js';
+import React from 'react';
 
 /**
  * Progress Bar Component for Ink Terminal UI
@@ -7,104 +7,110 @@ import React from 'react.js';
  * Note: Components are passed via props to avoid ESM import issues
  */
 const ProgressBar = ({ current, total, tokens, maxTokens, currentFile, components }) => {
-    const { Box, Text } = components || {};
-
-    if (!Box || !Text) {
-        throw new Error('Box and Text components required in props');
-    }
-
-    const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
-    const barWidth = 40;
-    const filled = Math.round((percentage / 100) * barWidth);
-    const empty = barWidth - filled;
-
-    const bar = '━'.repeat(filled) + '─'.repeat(empty);
-    const tokenPercentage = maxTokens > 0 ? ((tokens / maxTokens) * 100).toFixed(1) : 0;
-
-    const children = [];
-
-    // Title
+  const { Box, Text } = components || {};
+
+  if (!Box || !Text) {
+    throw new Error('Box and Text components required in props');
+  }
+
+  const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
+  const barWidth = 40;
+  const filled = Math.round((percentage / 100) * barWidth);
+  const empty = barWidth - filled;
+
+  const bar = '━'.repeat(filled) + '─'.repeat(empty);
+  const tokenPercentage = maxTokens > 0 ? ((tokens / maxTokens) * 100).toFixed(1) : 0;
+
+  const children = [];
+
+  // Title
+  children.push(
+    React.createElement(
+      Box,
+      { key: 'title' },
+      React.createElement(Text, { bold: true, color: 'cyan' }, '📊 Project Analysis')
+    )
+  );
+
+  // Progress bar
+  children.push(
+    React.createElement(
+      Box,
+      { key: 'bar', marginTop: 1 },
+      React.createElement(Text, { color: 'green' }, bar),
+      React.createElement(Text, { color: 'yellow' }, ` ${percentage}%`),
+      React.createElement(Text, { color: 'gray' }, ` (${current}/${total} files)`)
+    )
+  );
+
+  // Current file
+  if (currentFile) {
     children.push(
-        React.createElement(Box, { key: 'title' },
-            React.createElement(Text, { bold: true, color: 'cyan' }, '📊 Project Analysis')
-        )
+      React.createElement(
+        Box,
+        { key: 'current', marginTop: 1 },
+        React.createElement(Text, { color: 'gray' }, 'Current: '),
+        React.createElement(Text, null, currentFile)
+      )
     );
-
-    // Progress bar
-    children.push(
-        React.createElement(Box, { key: 'bar', marginTop: 1 },
-            React.createElement(Text, { color: 'green' }, bar),
-            React.createElement(Text, { color: 'yellow' }, ` ${percentage}%`),
-            React.createElement(Text, { color: 'gray' }, ` (${current}/${total} files)`)
-        )
+  }
+
+  // Tokens
+  const tokenColor = tokenPercentage > 90 ? 'red' : 'green';
+  const tokenChildren = [
+    React.createElement(Text, { key: 't1', color: 'gray' }, 'Tokens: '),
+    React.createElement(Text, { key: 't2', color: tokenColor }, tokens.toLocaleString()),
+  ];
+
+  if (maxTokens > 0) {
+    tokenChildren.push(
+      React.createElement(
+        Text,
+        { key: 't3', color: 'gray' },
+        ` / ${maxTokens.toLocaleString()} (${tokenPercentage}%)`
+      )
     );
+  }
 
-    // Current file
-    if (currentFile) {
-        children.push(
-            React.createElement(Box, { key: 'current', marginTop: 1 },
-                React.createElement(Text, { color: 'gray' }, 'Current: '),
-                React.createElement(Text, null, currentFile)
-            )
-        );
-    }
-
-    // Tokens
-    const tokenColor = tokenPercentage > 90 ? 'red' : 'green';
-    const tokenChildren = [
-        React.createElement(Text, { key: 't1', color: 'gray' }, 'Tokens: '),
-        React.createElement(Text, { key: 't2', color: tokenColor }, tokens.toLocaleString())
-    ];
-
-    if (maxTokens > 0) {
-        tokenChildren.push(
-            React.createElement(Text, { key: 't3', color: 'gray' },
-                ` / ${maxTokens.toLocaleString()} (${tokenPercentage}%)`)
-        );
-    }
+  children.push(React.createElement(Box, { key: 'tokens', marginTop: 1 }, ...tokenChildren));
 
-    children.push(
-        React.createElement(Box, { key: 'tokens', marginTop: 1 }, ...tokenChildren)
-    );
-
-    return React.createElement(Box, { flexDirection: 'column' }, ...children);
+  return React.createElement(Box, { flexDirection: 'column' }, ...children);
 };
 
 /**
  * Spinner Component with message
  */
 const SpinnerWithText = ({ text, status = 'pending', components }) => {
-    const { Box, Text, Spinner } = components || {};
-
-    if (!Box || !Text) {
-        throw new Error('Box and Text components required in props');
-    }
-
-    const statusIcons = {
-        pending: '○',
-        active: Spinner ? React.createElement(Spinner, { type: 'dots' }) : '⏳',
-        complete: '✓',
-        error: '✗'
-    };
-
-    const statusColors = {
-        pending: 'gray',
-        active: 'cyan',
-        complete: 'green',
-        error: 'red'
-    };
-
-    const icon = status === 'active' && Spinner
-        ? React.createElement(Spinner, { type: 'dots' })
-        : statusIcons[status];
-
-    return React.createElement(Box, null,
-        React.createElement(Text, { color: statusColors[status] },
-            icon,
-            ' ',
-            text
-        )
-    );
+  const { Box, Text, Spinner } = components || {};
+
+  if (!Box || !Text) {
+    throw new Error('Box and Text components required in props');
+  }
+
+  const statusIcons = {
+    pending: '○',
+    active: Spinner ? React.createElement(Spinner, { type: 'dots' }) : '⏳',
+    complete: '✓',
+    error: '✗',
+  };
+
+  const statusColors = {
+    pending: 'gray',
+    active: 'cyan',
+    complete: 'green',
+    error: 'red',
+  };
+
+  const icon =
+    status === 'active' && Spinner
+      ? React.createElement(Spinner, { type: 'dots' })
+      : statusIcons[status];
+
+  return React.createElement(
+    Box,
+    null,
+    React.createElement(Text, { color: statusColors[status] }, icon, ' ', text)
+  );
 };
 
 export { ProgressBar, SpinnerWithText };

package/lib/ui/select-input.js

@@ -10,42 +10,50 @@ import { Box, Text, useInput, useStdin } from 'ink';
  * @param {Function} onSelect - Callback when item is selected
  */
 export default function SelectInput({ items = [], onSelect }) {
-	const [selectedIndex, setSelectedIndex] = useState(0);
-	const { isRawModeSupported } = useStdin();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const { isRawModeSupported } = useStdin();
 
-	useInput(useCallback((input, key) => {
-		if (key.upArrow) {
-			setSelectedIndex(prev =>
-				prev === 0 ? items.length - 1 : prev - 1
-			);
-		}
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (key.upArrow) {
+          setSelectedIndex((prev) => (prev === 0 ? items.length - 1 : prev - 1));
+        }
 
-		if (key.downArrow) {
-			setSelectedIndex(prev =>
-				prev === items.length - 1 ? 0 : prev + 1
-			);
-		}
+        if (key.downArrow) {
+          setSelectedIndex((prev) => (prev === items.length - 1 ? 0 : prev + 1));
+        }
 
-		if (key.return) {
-			if (items[selectedIndex] && onSelect) {
-				onSelect(items[selectedIndex]);
-			}
-		}
+        if (key.return) {
+          if (items[selectedIndex] && onSelect) {
+            onSelect(items[selectedIndex]);
+          }
+        }
 
-		if (key.escape) {
-			process.exit(0);
-		}
-	}, [selectedIndex, items, onSelect]), { isActive: isRawModeSupported });
+        if (key.escape) {
+          process.exit(0);
+        }
+      },
+      [selectedIndex, items, onSelect]
+    ),
+    { isActive: isRawModeSupported }
+  );
 
-	// Show ALL items (no scrolling/limit) - per Ink docs
-	return React.createElement(Box, { flexDirection: 'column' },
-		...items.map((item, index) => {
-			const isSelected = index === selectedIndex;
+  // Show ALL items (no scrolling/limit) - per Ink docs
+  return React.createElement(
+    Box,
+    { flexDirection: 'column' },
+    ...items.map((item, index) => {
+      const isSelected = index === selectedIndex;
 
-			return React.createElement(Text, {
-				key: item.value || item.label || index,  // Use unique value as key
-				color: isSelected ? 'cyan' : undefined
-			}, `${isSelected ? '❯ ' : '  '}${item.label}`);
-		})
-	);
+      return React.createElement(
+        Text,
+        {
+          key: item.value || item.label || index, // Use unique value as key
+          color: isSelected ? 'cyan' : undefined,
+        },
+        `${isSelected ? '❯ ' : '  '}${item.label}`
+      );
+    })
+  );
 }

package/lib/ui/template-selector.js

@@ -0,0 +1,99 @@
+/**
+ * Template Selector UI Component
+ * Interactive template selection for Ink UI
+ * FEAT-009: Context Templates
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import SelectInput from './select-input.js';
+import TemplateManager from '../utils/template-manager.js';
+
+/**
+ * Template Selector Component
+ * Provides interactive template selection in wizard mode
+ */
+export default function TemplateSelector({ onSelect, projectRoot = process.cwd() }) {
+  const [selectedTemplate, setSelectedTemplate] = useState(null);
+  const manager = useMemo(() => new TemplateManager(projectRoot), [projectRoot]);
+
+  // Build template items for selection
+  const templateItems = useMemo(() => {
+    const templates = manager.list();
+
+    return templates.map((t) => ({
+      label: `${t.name} - ${t.description}`,
+      value: t.id,
+      template: t,
+    }));
+  }, [manager]);
+
+  const handleSelect = useCallback(
+    (item) => {
+      const template = manager.get(item.value);
+      setSelectedTemplate(template);
+
+      if (onSelect) {
+        onSelect(template);
+      }
+    },
+    [manager, onSelect]
+  );
+
+  if (selectedTemplate) {
+    return React.createElement(
+      Box,
+      { flexDirection: 'column' },
+      React.createElement(
+        Box,
+        { marginBottom: 1 },
+        React.createElement(Text, { bold: true, color: 'green' }, '✓ Template Selected:'),
+        React.createElement(Text, { color: 'cyan' }, ` ${selectedTemplate.name}`)
+      ),
+      React.createElement(
+        Box,
+        { flexDirection: 'column', marginBottom: 1 },
+        React.createElement(
+          Text,
+          { dimColor: true },
+          `  Description: ${selectedTemplate.description}`
+        ),
+        React.createElement(Text, { dimColor: true }, `  Source: ${selectedTemplate.source}`)
+      )
+    );
+  }
+
+  return React.createElement(
+    Box,
+    { flexDirection: 'column' },
+    React.createElement(
+      Box,
+      { marginBottom: 1 },
+      React.createElement(Text, null, 'Select a context template:')
+    ),
+    React.createElement(SelectInput, {
+      items: templateItems,
+      onSelect: handleSelect,
+    }),
+    React.createElement(
+      Box,
+      { marginTop: 1 },
+      React.createElement(Text, { dimColor: true }, '[↑↓] Navigate  [Enter] Select  [Esc] Cancel')
+    )
+  );
+}
+
+/**
+ * Get template choices for wizard integration
+ * @param {string} projectRoot - Project root directory
+ * @returns {Array} Array of template choice objects
+ */
+export function getTemplateChoices(projectRoot = process.cwd()) {
+  const manager = new TemplateManager(projectRoot);
+  const templates = manager.list();
+
+  return templates.map((t) => ({
+    label: `${t.name} - ${t.description}`,
+    value: t.id,
+  }));
+}