tri-cli 0.0.2 → 0.0.3

package/README.md

@@ -0,0 +1,51 @@
+# tri-cli
+
+A terminal-based interactive directory visualizer, like `tree` but with interactivity and treemaps:
+
+## Installation
+
+```bash
+npm install -g tri-cli
+```
+
+## Usage
+
+```bash
+tri [directory] [options]
+```
+
+### Examples
+
+```bash
+tri .                # visualize current directory
+tri ../bionemo -L 2  # show 2 levels deep
+tri --dir src        # specify directory with flag
+```
+
+### Interactive Controls
+
+| Key   | Action                         |
+| ----- | ------------------------------ |
+| ↑ / ↓ | Navigate files and folders     |
+| Enter | Expand or collapse a directory |
+| t     | Toggle Treemap view            |
+| Esc   | Clear typed shortcut           |
+| q     | Quit                           |
+
+### Options
+
+| Option         | Description                                     |
+| -------------- | ----------------------------------------------- |
+| `--dir <path>` | Directory to visualize (optional if positional) |
+| `-L <level>`   | Depth level to expand initially (default: 1)    |
+| `-h, --help`   | Show help message                               |
+
+---
+
+**Example:**
+
+```bash
+tri ../bionemo -L 2
+```
+
+Type `t` to open (and close) the treemap view, navigate with arrow keys, and press `q` to quit.

package/dist/cli.js

@@ -8,9 +8,10 @@ import { TreeMapView } from './Treemap.js';
 const oneHunter = {
   bg: '#282c34',
   bgAlt: '#21252b',
-  text: '#abb2bf',
+  text: 'rgb(206, 205, 195)',
+  text2: 'rgb(135, 133, 128)',
   textAlt: 'white',
-  red: '#e06c75',
+  red: 'rgb(209, 77, 65)',
   orange: 'rgb(218, 112, 44)',
   yellow: '#e5c07b',
   green: '#98c379',
@@ -20,7 +21,7 @@ const oneHunter = {
   magenta: 'rgb(206, 93, 151)'
 };
 
-// Function to format bytes to human readable
+// --- Helpers ---
 const formatBytes = bytes => {
   if (bytes === 0) return '0 B';
   const k = 1024;
@@ -28,8 +29,6 @@ const formatBytes = bytes => {
   const i = Math.floor(Math.log(bytes) / Math.log(k));
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 };
-
-// Function to get directory size recursively
 const getDirSize = dirPath => {
   let size = 0;
   try {
@@ -49,13 +48,13 @@ const getDirSize = dirPath => {
   return size;
 };
 
-// Function to read directory structure (unbounded depth)
-const readDirTree = dirPath => {
+// ✅ Updated: allow skipping size computation
+const readDirTree = (dirPath, noSize = false) => {
   try {
     const stats = fs.statSync(dirPath);
     const name = path.basename(dirPath) || dirPath;
     if (!stats.isDirectory()) {
-      const size = stats.size;
+      const size = noSize ? 0 : stats.size;
       return {
         name,
         path: dirPath,
@@ -64,21 +63,21 @@ const readDirTree = dirPath => {
         value: size > 0 ? size : 100
       };
     }
-    const children = fs.readdirSync(dirPath).filter(file => !file.startsWith('.')).map(file => readDirTree(path.join(dirPath, file))).filter(Boolean);
+    const children = fs.readdirSync(dirPath).filter(file => !file.startsWith('.')).map(file => readDirTree(path.join(dirPath, file), noSize)).filter(Boolean);
     return {
       name,
       path: dirPath,
       isFile: false,
-      size: getDirSize(dirPath),
+      size: noSize ? 0 : getDirSize(dirPath),
       children: children.length > 0 ? children : undefined
     };
   } catch {
     return null;
   }
 };
-
-// Get color based on file extension
 const getFileColor = filename => {
+  if (filename === 'VERSION') return oneHunter.purple;
+  if (filename === 'Dockerfile') return oneHunter.blue;
   const ext = path.extname(filename).toLowerCase();
   const colorMap = {
     '.js': oneHunter.yellow,
@@ -90,7 +89,7 @@ const getFileColor = filename => {
     '.json': oneHunter.purple,
     '.html': oneHunter.cyan,
     '.css': oneHunter.cyan,
-    '.md': oneHunter.text,
+    '.md': oneHunter.orange,
     '.txt': oneHunter.textAlt,
     '.sh': oneHunter.green,
     '.yml': oneHunter.purple,
@@ -100,12 +99,11 @@ const getFileColor = filename => {
     '.png': oneHunter.blue,
     '.jpg': oneHunter.blue,
     '.gif': oneHunter.blue,
-    '.pdf': oneHunter.red
+    '.pdf': oneHunter.red,
+    '.toml': oneHunter.text2
   };
   return colorMap[ext] || oneHunter.text;
 };
-
-// Generate shortcut label
 const generateShortcut = (index, isFile, parentShortcut = '') => {
   const letters = 'abcdefghijklmnoprsuvwxyz'; // omitting q, t
   const base = letters.length;
@@ -119,12 +117,13 @@ const generateShortcut = (index, isFile, parentShortcut = '') => {
   return parentShortcut + label;
 };
 
-// TreeRow
+// --- Components ---
 const TreeRow = /*#__PURE__*/React.memo(({
   node,
   isSelected,
   collapsed,
-  shortcutInput
+  shortcutInput,
+  noSize
 }) => {
   const isCollapsed = collapsed.has(node.data.path);
   const hasChildren = node.children && node.children.length > 0;
@@ -175,13 +174,14 @@ const TreeRow = /*#__PURE__*/React.memo(({
     backgroundColor: isSelected ? oneHunter.green : undefined
   }, node.data.name), hasChildren && !isCollapsed && /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.textAlt
-  }, " (", node.children.length, ")"), node.data.size > 0 && /*#__PURE__*/React.createElement(Text, {
-    color: oneHunter.green
+  }, " (", node.children.length, ")"), !noSize && node.data.size > 0 && /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.cyan
   }, " ", formatBytes(node.data.size)), renderShortcut()));
-}, (p, n) => p.isSelected === n.isSelected && p.collapsed === n.collapsed && p.shortcutInput === n.shortcutInput);
+}, (p, n) => p.isSelected === n.isSelected && p.collapsed === n.collapsed && p.shortcutInput === n.shortcutInput && p.noSize === n.noSize);
 const TreeVisualization = ({
   dirPath = '.',
-  maxLevel = 1
+  maxLevel = 1,
+  noSize = false
 }) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [collapsed, setCollapsed] = useState(new Set());
@@ -193,13 +193,11 @@ const TreeVisualization = ({
   } = useStdout();
   const terminalHeight = stdout?.rows || 24;
   const viewportHeight = Math.max(5, terminalHeight - 7);
-  const treeData = useMemo(() => readDirTree(dirPath), [dirPath]);
+  const treeData = useMemo(() => readDirTree(dirPath, noSize), [dirPath, noSize]);
   if (!treeData) return /*#__PURE__*/React.createElement(Text, {
     color: "red"
   }, "Error: Could not read directory");
   const root = useMemo(() => hierarchy(treeData), [treeData]);
-
-  // --- Initial collapse based on -L ---
   useEffect(() => {
     const newCollapsed = new Set();
     const applyLevel = (node, level = 0) => {
@@ -212,8 +210,6 @@ const TreeVisualization = ({
     setCollapsed(newCollapsed);
     setInitialized(true);
   }, [maxLevel, root]);
-
-  // Assign shortcuts
   const rootWithShortcuts = useMemo(() => {
     const assignShortcuts = (node, parentShortcut = '', siblingIndex = 0) => {
       const isFile = node.data.isFile;
@@ -226,8 +222,6 @@ const TreeVisualization = ({
     assignShortcuts(cloned);
     return cloned;
   }, [root]);
-
-  // Flatten visible nodes
   const visibleNodes = useMemo(() => {
     const nodes = [];
     const traverse = node => {
@@ -247,7 +241,7 @@ const TreeVisualization = ({
   useInput((input, key) => {
     if (input === 'q') process.exit(0);
     if (input === 't') {
-      setShowTreeMap(p => !p);
+      if (!noSize) setShowTreeMap(p => !p);
       return;
     }
     if (showTreeMap) return;
@@ -260,14 +254,10 @@ const TreeVisualization = ({
       setShortcutInput('');
       return;
     }
-
-    // ✅ ENTER behavior
     if (key.return) {
       if (shortcutInput && shortcutMap.has(shortcutInput)) {
         const shortcutIndex = shortcutMap.get(shortcutInput);
         const shortcutNode = visibleNodes[shortcutIndex];
-
-        // Jump and toggle collapse (in one go)
         setSelectedIndex(shortcutIndex);
         if (shortcutNode.children) {
           setCollapsed(prev => {
@@ -279,8 +269,6 @@ const TreeVisualization = ({
         setShortcutInput('');
         return;
       }
-
-      // Otherwise toggle current node
       const node = visibleNodes[selectedIndex];
       if (node.children) {
         setCollapsed(prev => {
@@ -296,13 +284,9 @@ const TreeVisualization = ({
       setShortcutInput('');
       return;
     }
-
-    // Typing a shortcut
     if (input && /^[a-z0-9]$/.test(input)) {
       const newInput = shortcutInput + input;
       setShortcutInput(newInput);
-
-      // Move highlight immediately
       if (shortcutMap.has(newInput)) {
         setSelectedIndex(shortcutMap.get(newInput));
       }
@@ -318,8 +302,6 @@ const TreeVisualization = ({
       stdout: stdout
     });
   }
-
-  // --- Viewport logic ---
   const getViewportWindow = () => {
     let start = Math.max(0, selectedIndex - Math.floor(viewportHeight / 2));
     let end = start + viewportHeight;
@@ -340,17 +322,21 @@ const TreeVisualization = ({
   if (!initialized) return null;
   return /*#__PURE__*/React.createElement(Box, {
     flexDirection: "column"
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, !noSize ? /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.textAlt,
     dimColor: true
-  }, "\u2191/\u2193: Navigate | Enter: Toggle | t: TreeMap | Esc: Clear | q: Quit"), start > 0 && /*#__PURE__*/React.createElement(Text, {
+  }, "\u2191/\u2193: Navigate | Enter: Toggle | t: TreeMap | Esc: Clear | q: Quit") : /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.textAlt,
+    dimColor: true
+  }, "\u2191/\u2193: Navigate | Enter: Toggle | Esc: Clear | q: Quit"), start > 0 && /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.yellow
   }, "\u22EE (", start, " more above)"), viewportNodes.map((node, i) => /*#__PURE__*/React.createElement(TreeRow, {
     key: start + i,
     node: node,
     isSelected: start + i === selectedIndex,
     collapsed: collapsed,
-    shortcutInput: shortcutInput
+    shortcutInput: shortcutInput,
+    noSize: noSize
   })), end < visibleNodes.length && /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.yellow
   }, "\u22EE (", visibleNodes.length - end, " more below)"));
@@ -359,22 +345,33 @@ const TreeVisualization = ({
 // --- CLI args ---
 const args = process.argv.slice(2);
 
-// Dir flag
+// Help
+if (args.includes('--help') || args.includes('-h')) {
+  console.log(`
+Usage:
+  tri [directory] [options]
+
+Examples:
+  tri .                # visualize current directory
+  tri ../bionemo -L 2  # show 2 levels deep
+  tri --dir src        # specify directory with flag
+
+Options:
+  --dir <path>     Directory to visualize (optional if positional)
+  -L <level>       Depth level to expand initially (default: 1)
+  --no-size, -ns   Skip file size calculation (faster, disables treemap)
+  -h, --help       Show this help message
+`);
+  process.exit(0);
+}
 const dirIndex = args.indexOf('--dir');
-let dirPath;
 const firstNonFlagArg = args.find(arg => !arg.startsWith('-'));
-if (dirIndex !== -1 && args[dirIndex + 1]) {
-  dirPath = args[dirIndex + 1];
-} else if (firstNonFlagArg) {
-  dirPath = firstNonFlagArg;
-} else {
-  dirPath = '.';
-}
-
-// Handle -L flag
+const dirPath = dirIndex !== -1 && args[dirIndex + 1] ? args[dirIndex + 1] : firstNonFlagArg || '.';
 const levelIndex = args.indexOf('-L');
 const maxLevel = levelIndex !== -1 && args[levelIndex + 1] ? parseInt(args[levelIndex + 1], 10) : 1;
+const noSize = args.includes('--no-size') || args.includes('-ns');
 render(/*#__PURE__*/React.createElement(TreeVisualization, {
   dirPath: dirPath,
-  maxLevel: maxLevel
+  maxLevel: maxLevel,
+  noSize: noSize
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tri-cli",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"description": "Interactive CLI directory tree visualizer with treemap view",
 	"author": "Jared Wilber",
 	"license": "MIT",

package/readme.md

@@ -1,25 +0,0 @@
-# tri
-
-> This readme is automatically generated by [create-ink-app](https://github.com/vadimdemedes/create-ink-app)
-
-## Install
-
-```bash
-$ npm install --global tri
-```
-
-## CLI
-
-```
-$ tri --help
-
-  Usage
-    $ tri
-
-  Options
-    --name  Your name
-
-  Examples
-    $ tri --name=Jane
-    Hello, Jane
-```