tri-cli 0.0.3 → 0.0.4

package/README.md

@@ -1,6 +1,8 @@
 # tri-cli
 
-A terminal-based interactive directory visualizer, like `tree` but with interactivity and treemaps:
+A terminal-based interactive directory visualizer, like `tree` but with keyboard navgiation, shortcuts, colors, and [treemap](https://en.wikipedia.org/wiki/Treemapping) visuals:
+
+![tri demo in gif](/assets/readme.gif)
 
 ## Installation
 
@@ -20,6 +22,7 @@ tri [directory] [options]
 tri .                # visualize current directory
 tri ../bionemo -L 2  # show 2 levels deep
 tri --dir src        # specify directory with flag
+tri --dir src  -ns   # create tree without dir/file size (faster, but no treemap)
 ```
 
 ### Interactive Controls
@@ -38,10 +41,9 @@ tri --dir src        # specify directory with flag
 | -------------- | ----------------------------------------------- |
 | `--dir <path>` | Directory to visualize (optional if positional) |
 | `-L <level>`   | Depth level to expand initially (default: 1)    |
+| `-ns`          | Don't calculate sizes (faster, but no treemap)  |
 | `-h, --help`   | Show help message                               |
 
----
-
 **Example:**
 
 ```bash
@@ -49,3 +51,17 @@ tri ../bionemo -L 2
 ```
 
 Type `t` to open (and close) the treemap view, navigate with arrow keys, and press `q` to quit.
+
+**Example:**
+
+It's probably easiest to just uninstall and link:
+
+```bash
+npm run build
+
+npm link
+```
+
+**License:**
+
+MIT

package/dist/Treemap.js

@@ -389,5 +389,5 @@ export const TreeMapView = ({
     dimColor: true,
     color: oneHunter.textAlt,
     marginTop: 1
-  }, "Showing ", firstLevelNodes.length, " items | Total: ", formatBytes(root.value || 0)));
+  }, "Showing ", firstLevelNodes.length, " items | Total:", ' ', formatBytes(root.value || 0)));
 };

package/dist/cli.js

@@ -4,7 +4,10 @@ import { render, Text, Box, useInput, useStdout } from 'ink';
 import { hierarchy } from 'd3-hierarchy';
 import fs from 'fs';
 import path from 'path';
+import { exec } from 'child_process';
+import util from 'util';
 import { TreeMapView } from './Treemap.js';
+const execAsync = util.promisify(exec);
 const oneHunter = {
   bg: '#282c34',
   bgAlt: '#21252b',
@@ -20,8 +23,6 @@ const oneHunter = {
   purple: 'rgb(139, 126, 200)',
   magenta: 'rgb(206, 93, 151)'
 };
-
-// --- Helpers ---
 const formatBytes = bytes => {
   if (bytes === 0) return '0 B';
   const k = 1024;
@@ -29,55 +30,64 @@ const formatBytes = bytes => {
   const i = Math.floor(Math.log(bytes) / Math.log(k));
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 };
-const getDirSize = dirPath => {
-  let size = 0;
+
+// Async non-blocking directory size
+const getDirSizeAsync = async dirPath => {
   try {
-    const items = fs.readdirSync(dirPath);
-    for (const item of items) {
-      const itemPath = path.join(dirPath, item);
-      try {
-        const stats = fs.statSync(itemPath);
-        if (stats.isFile()) {
-          size += stats.size;
-        } else if (stats.isDirectory()) {
-          size += getDirSize(itemPath);
-        }
-      } catch {}
+    const escapedPath = dirPath.replace(/"/g, '\\"');
+    const {
+      stdout
+    } = await execAsync(`du -sk "${escapedPath}" 2>/dev/null`);
+    const match = stdout.trim().split(/\s+/);
+    if (match.length >= 1) {
+      const sizeInKB = parseInt(match[0], 10);
+      return isNaN(sizeInKB) ? 0 : sizeInKB * 1024;
     }
-  } catch {}
-  return size;
+    return 0;
+  } catch {
+    return 0;
+  }
 };
-
-// ✅ Updated: allow skipping size computation
-const readDirTree = (dirPath, noSize = false) => {
+const readDirTree = (dirPath, noSize = true, currentLevel = 0, maxLevel = Infinity) => {
   try {
     const stats = fs.statSync(dirPath);
-    const name = path.basename(dirPath) || dirPath;
+    let name = path.basename(dirPath);
+    // If basename is empty (root) or '.', use the absolute path's last component or full path
+    if (!name || name === '.') {
+      const resolved = path.resolve(dirPath);
+      name = path.basename(resolved) || resolved;
+    }
     if (!stats.isDirectory()) {
       const size = noSize ? 0 : stats.size;
       return {
         name,
         path: dirPath,
         isFile: true,
-        size,
-        value: size > 0 ? size : 100
+        size
       };
     }
-    const children = fs.readdirSync(dirPath).filter(file => !file.startsWith('.')).map(file => readDirTree(path.join(dirPath, file), noSize)).filter(Boolean);
+    if (currentLevel >= maxLevel) {
+      return {
+        name,
+        path: dirPath,
+        isFile: false,
+        size: 0,
+        children: undefined
+      };
+    }
+    const children = fs.readdirSync(dirPath).filter(f => !f.startsWith('.')).map(f => readDirTree(path.join(dirPath, f), noSize, currentLevel + 1, maxLevel)).filter(Boolean);
     return {
       name,
       path: dirPath,
       isFile: false,
-      size: noSize ? 0 : getDirSize(dirPath),
-      children: children.length > 0 ? children : undefined
+      size: 0,
+      children
     };
   } catch {
     return null;
   }
 };
 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,
@@ -104,8 +114,10 @@ const getFileColor = filename => {
   };
   return colorMap[ext] || oneHunter.text;
 };
+
+// Exclude m, t, d
 const generateShortcut = (index, isFile, parentShortcut = '') => {
-  const letters = 'abcdefghijklmnoprsuvwxyz'; // omitting q, t
+  const letters = 'abcefgijklnopqrsuvwxyz';
   const base = letters.length;
   if (isFile) return `${parentShortcut}${index + 1}`;
   let label = '';
@@ -116,167 +128,341 @@ const generateShortcut = (index, isFile, parentShortcut = '') => {
   }
   return parentShortcut + label;
 };
-
-// --- Components ---
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 const TreeRow = /*#__PURE__*/React.memo(({
   node,
   isSelected,
   collapsed,
   shortcutInput,
-  noSize
+  noSize,
+  calculatedSizes,
+  loadingPaths,
+  spinnerFrame
 }) => {
   const isCollapsed = collapsed.has(node.data.path);
   const hasChildren = node.children && node.children.length > 0;
-  let prefix = '';
-  let current = node;
-  const segments = [];
-  while (current.parent) {
-    const parent = current.parent;
-    const siblings = parent.children || [];
-    const isLastChild = siblings[siblings.length - 1] === current;
-    segments.unshift(isLastChild ? '  ' : '│ ');
-    current = parent;
-  }
-  if (node.parent) {
-    const siblings = node.parent.children || [];
-    const isLastChild = siblings[siblings.length - 1] === node;
-    prefix = segments.join('').slice(0, -2) + (isLastChild ? '└─' : '├─');
-  }
-  let icon = hasChildren ? isCollapsed ? '▶ ' : '▼ ' : '  ';
+  const isLoading = loadingPaths.has(node.data.path);
   const fileColor = node.data.isFile ? getFileColor(node.data.name) : oneHunter.magenta;
+  let displaySize = 0;
+  // Use calculated size if available, otherwise fall back to node.data.size
+  if (calculatedSizes && calculatedSizes.has(node.data.path)) {
+    displaySize = calculatedSizes.get(node.data.path);
+  } else {
+    displaySize = node.data.size;
+  }
+
+  // ✅ Restore highlight logic
   const renderShortcut = () => {
     if (!shortcutInput) return /*#__PURE__*/React.createElement(Text, {
       color: oneHunter.textAlt,
       dimColor: true
-    }, ' ', "[", node.shortcut, "]");
+    }, '  ', "[", node.shortcut, "]");
     if (node.shortcut.startsWith(shortcutInput)) {
       const matched = node.shortcut.slice(0, shortcutInput.length);
       const rest = node.shortcut.slice(shortcutInput.length);
       return /*#__PURE__*/React.createElement(Text, {
         color: oneHunter.textAlt
-      }, ' [', /*#__PURE__*/React.createElement(Text, {
+      }, '  ', "[", /*#__PURE__*/React.createElement(Text, {
         underline: true,
         color: oneHunter.yellow
-      }, matched), rest, ']');
+      }, matched), rest, "]");
     }
     return /*#__PURE__*/React.createElement(Text, {
       color: oneHunter.textAlt,
       dimColor: true
-    }, ' ', "[", node.shortcut, "]");
+    }, '  ', "[", node.shortcut, "]");
   };
   return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.textAlt
-  }, prefix), /*#__PURE__*/React.createElement(Text, {
+  }, node.depth > 0 ? ' '.repeat(node.depth * 2) : ''), /*#__PURE__*/React.createElement(Text, {
     color: hasChildren ? oneHunter.cyan : oneHunter.textAlt
-  }, icon), /*#__PURE__*/React.createElement(Text, {
+  }, hasChildren ? isCollapsed ? '▶ ' : '▼ ' : '  '), /*#__PURE__*/React.createElement(Text, {
     bold: isSelected,
     color: isSelected ? oneHunter.bg : fileColor,
     backgroundColor: isSelected ? oneHunter.green : undefined
   }, node.data.name), hasChildren && !isCollapsed && /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.textAlt
-  }, " (", node.children.length, ")"), !noSize && node.data.size > 0 && /*#__PURE__*/React.createElement(Text, {
+  }, " (", node.children.length, ")"), isLoading ? /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.yellow
+  }, " ", SPINNER_FRAMES[spinnerFrame]) : displaySize > 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.noSize === n.noSize);
+  }, " ", formatBytes(displaySize)) : /*#__PURE__*/React.createElement(Text, null, " "), renderShortcut()));
+});
 const TreeVisualization = ({
   dirPath = '.',
   maxLevel = 1,
-  noSize = false
+  noSize = true,
+  collapseAll = false
 }) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [collapsed, setCollapsed] = useState(new Set());
   const [shortcutInput, setShortcutInput] = useState('');
   const [showTreeMap, setShowTreeMap] = useState(false);
   const [initialized, setInitialized] = useState(false);
+  const [calculatedSizes, setCalculatedSizes] = useState(new Map());
+  const [loadingPaths, setLoadingPaths] = useState(new Set());
+  const [spinnerFrame, setSpinnerFrame] = useState(0);
+  const [rootTree, setRootTree] = useState(() => hierarchy(readDirTree(dirPath, noSize, 0, maxLevel)));
   const {
     stdout
   } = useStdout();
   const terminalHeight = stdout?.rows || 24;
   const viewportHeight = Math.max(5, terminalHeight - 7);
-  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]);
+
+  // Spinner animation loop
+  useEffect(() => {
+    const interval = setInterval(() => setSpinnerFrame(f => (f + 1) % SPINNER_FRAMES.length), 80);
+    return () => clearInterval(interval);
+  }, []);
+
+  // Preload all sizes when -s flag is used (noSize is false)
+  useEffect(() => {
+    if (noSize) return; // Only preload when sizes are requested
+
+    const preloadAllSizes = async () => {
+      const newMap = new Map();
+      const nodesToCalculate = [];
+
+      // Collect all nodes
+      const traverse = node => {
+        nodesToCalculate.push(node);
+        if (node.children) {
+          node.children.forEach(traverse);
+        }
+      };
+      traverse(rootTree);
+
+      // Set all nodes as loading
+      setLoadingPaths(new Set(nodesToCalculate.map(n => n.data.path)));
+
+      // Calculate sizes for all nodes with streaming updates
+      for (const node of nodesToCalculate) {
+        const sz = node.data.isFile ? fs.statSync(node.data.path).size : await getDirSizeAsync(node.data.path);
+        newMap.set(node.data.path, sz);
+
+        // Stream update immediately (using startTransition to deprioritize render)
+        React.startTransition(() => {
+          setCalculatedSizes(new Map(newMap));
+          setLoadingPaths(prev => {
+            const next = new Set(prev);
+            next.delete(node.data.path);
+            return next;
+          });
+        });
+        await new Promise(r => setTimeout(r, 0));
+      }
+    };
+    preloadAllSizes();
+  }, [noSize, rootTree]);
   useEffect(() => {
+    // Only initialize collapse state on first mount, not on every rootTree change
+    if (initialized) return;
     const newCollapsed = new Set();
     const applyLevel = (node, level = 0) => {
       if (node.children) {
-        if (level >= maxLevel) newCollapsed.add(node.data.path);
-        node.children.forEach(child => applyLevel(child, level + 1));
+        if (collapseAll && level >= 1 || level >= maxLevel) newCollapsed.add(node.data.path);
+        node.children.forEach(c => applyLevel(c, level + 1));
       }
     };
-    applyLevel(root);
+    applyLevel(rootTree);
     setCollapsed(newCollapsed);
     setInitialized(true);
-  }, [maxLevel, root]);
-  const rootWithShortcuts = useMemo(() => {
-    const assignShortcuts = (node, parentShortcut = '', siblingIndex = 0) => {
-      const isFile = node.data.isFile;
-      node.shortcut = generateShortcut(siblingIndex, isFile, parentShortcut);
-      if (node.children) {
-        node.children.forEach((child, i) => assignShortcuts(child, node.shortcut, i));
-      }
-    };
-    const cloned = root.copy();
-    assignShortcuts(cloned);
-    return cloned;
-  }, [root]);
+  }, []);
+  const assignShortcuts = (node, parentShortcut = '', siblingIndex = 0) => {
+    node.shortcut = generateShortcut(siblingIndex, node.data.isFile, parentShortcut);
+    if (node.children) node.children.forEach((child, i) => assignShortcuts(child, node.shortcut, i));
+  };
+  assignShortcuts(rootTree);
   const visibleNodes = useMemo(() => {
     const nodes = [];
     const traverse = node => {
       nodes.push(node);
-      if (node.children && !collapsed.has(node.data.path)) {
-        node.children.forEach(traverse);
-      }
+      if (node.children && !collapsed.has(node.data.path)) node.children.forEach(traverse);
     };
-    traverse(rootWithShortcuts);
+    traverse(rootTree);
     return nodes;
-  }, [rootWithShortcuts, collapsed]);
+  }, [rootTree, collapsed]);
   const shortcutMap = useMemo(() => {
     const map = new Map();
     visibleNodes.forEach((node, index) => map.set(node.shortcut, index));
     return map;
   }, [visibleNodes]);
-  useInput((input, key) => {
+  const calculateSizeAsync = async node => {
+    // Collect node and all its descendants (not just visible ones)
+    const nodesToCalculate = [];
+    const collectNodes = n => {
+      // Skip if already calculated
+      if (calculatedSizes.has(n.data.path)) {
+        // Still recurse to children in case they need calculation
+        if (n.children) {
+          n.children.forEach(collectNodes);
+        }
+        return;
+      }
+      nodesToCalculate.push(n);
+      if (n.children) {
+        n.children.forEach(collectNodes);
+      }
+    };
+    collectNodes(node);
+    if (nodesToCalculate.length === 0) return; // Nothing to calculate
+
+    // Mark all nodes as loading
+    const pathsToLoad = nodesToCalculate.map(n => n.data.path);
+    setLoadingPaths(prev => new Set([...prev, ...pathsToLoad]));
+    const newMap = new Map(calculatedSizes);
+
+    // Calculate and stream updates for each node individually
+    for (const targetNode of nodesToCalculate) {
+      const sz = targetNode.data.isFile ? fs.statSync(targetNode.data.path).size : await getDirSizeAsync(targetNode.data.path);
+      newMap.set(targetNode.data.path, sz);
+
+      // Stream the update immediately (using startTransition to deprioritize render)
+      React.startTransition(() => {
+        setCalculatedSizes(new Map(newMap));
+        setLoadingPaths(prev => {
+          const next = new Set(prev);
+          next.delete(targetNode.data.path);
+          return next;
+        });
+      });
+      await new Promise(r => setTimeout(r, 0));
+    }
+  };
+  const traverseDir = async node => {
+    if (node.data.isFile) return;
+
+    // If children are undefined (not loaded yet), load them
+    if (node.data.children === undefined) {
+      // Load the children
+      const newTree = readDirTree(node.data.path, true, 0, 1);
+      if (newTree && newTree.children) {
+        node.data.children = newTree.children;
+        // Update both states - remove from collapsed and rebuild tree
+        setCollapsed(prev => {
+          const next = new Set(prev);
+          next.delete(node.data.path);
+          return next;
+        });
+        const newRootData = rootTree.data;
+        setRootTree(hierarchy(newRootData));
+      }
+    } else {
+      // Children already loaded, just toggle expand
+      setCollapsed(prev => {
+        const next = new Set(prev);
+        if (next.has(node.data.path)) {
+          next.delete(node.data.path);
+        } else {
+          next.add(node.data.path);
+        }
+        return next;
+      });
+    }
+  };
+  useInput(async (input, key) => {
+    if (showTreeMap) {
+      setShowTreeMap(false);
+      return;
+    }
     if (input === 'q') process.exit(0);
+    if (input === 'C') {
+      // Toggle collapse/expand all children of the selected node's PARENT
+      const selectedNode = visibleNodes[selectedIndex];
+      if (!selectedNode || !selectedNode.parent) return;
+      const parentNode = selectedNode.parent;
+
+      // Get all descendant nodes with children
+      const descendants = [];
+      const collectDescendants = node => {
+        if (node.children && node.children.length > 0) {
+          descendants.push(node);
+          node.children.forEach(collectDescendants);
+        }
+      };
+      collectDescendants(parentNode);
+      if (descendants.length === 0) return; // No children to collapse
+
+      // Check if all descendants are collapsed
+      const allCollapsed = descendants.every(n => collapsed.has(n.data.path));
+      setCollapsed(prev => {
+        const next = new Set(prev);
+        descendants.forEach(n => {
+          if (allCollapsed) {
+            next.delete(n.data.path);
+          } else {
+            next.add(n.data.path);
+          }
+        });
+        return next;
+      });
+      return;
+    }
+    if (input === 'O') {
+      // Toggle collapse/expand ALL nodes in the entire tree
+      const allNodesWithChildren = [];
+      const collectAll = node => {
+        if (node.children && node.children.length > 0) {
+          allNodesWithChildren.push(node);
+          node.children.forEach(collectAll);
+        }
+      };
+      collectAll(rootTree);
+      if (allNodesWithChildren.length === 0) return;
+
+      // Check if all nodes are collapsed
+      const allCollapsed = allNodesWithChildren.every(n => collapsed.has(n.data.path));
+      setCollapsed(prev => {
+        const next = new Set(prev);
+        allNodesWithChildren.forEach(n => {
+          if (allCollapsed) {
+            next.delete(n.data.path);
+          } else {
+            next.add(n.data.path);
+          }
+        });
+        return next;
+      });
+      return;
+    }
     if (input === 't') {
-      if (!noSize) setShowTreeMap(p => !p);
+      const node = visibleNodes[selectedIndex];
+      if (node) await traverseDir(node);
+      return;
+    }
+    if (input === 'm') {
+      const node = visibleNodes[selectedIndex];
+      if (!node) return;
+      // Start calculating sizes in the background if not already done (don't await)
+      if (!calculatedSizes.has(node.data.path)) {
+        calculateSizeAsync(node);
+      }
+      // Show treemap immediately
+      setShowTreeMap(true);
+      return;
+    }
+    if (input === 'd') {
+      const node = visibleNodes[selectedIndex];
+      if (node) await calculateSizeAsync(node);
       return;
     }
-    if (showTreeMap) return;
     if (key.upArrow) {
       setSelectedIndex(p => Math.max(0, p - 1));
       setShortcutInput('');
       return;
-    } else if (key.downArrow) {
+    }
+    if (key.downArrow) {
       setSelectedIndex(p => Math.min(visibleNodes.length - 1, p + 1));
       setShortcutInput('');
       return;
     }
     if (key.return) {
-      if (shortcutInput && shortcutMap.has(shortcutInput)) {
-        const shortcutIndex = shortcutMap.get(shortcutInput);
-        const shortcutNode = visibleNodes[shortcutIndex];
-        setSelectedIndex(shortcutIndex);
-        if (shortcutNode.children) {
-          setCollapsed(prev => {
-            const next = new Set(prev);
-            if (next.has(shortcutNode.data.path)) next.delete(shortcutNode.data.path);else next.add(shortcutNode.data.path);
-            return next;
-          });
-        }
-        setShortcutInput('');
-        return;
-      }
       const node = visibleNodes[selectedIndex];
-      if (node.children) {
-        setCollapsed(prev => {
-          const next = new Set(prev);
-          if (next.has(node.data.path)) next.delete(node.data.path);else next.add(node.data.path);
-          return next;
-        });
-      }
+      if (node && node.children) setCollapsed(prev => {
+        const next = new Set(prev);
+        if (next.has(node.data.path)) next.delete(node.data.path);else next.add(node.data.path);
+        return next;
+      });
       setShortcutInput('');
       return;
     }
@@ -287,80 +473,76 @@ const TreeVisualization = ({
     if (input && /^[a-z0-9]$/.test(input)) {
       const newInput = shortcutInput + input;
       setShortcutInput(newInput);
-      if (shortcutMap.has(newInput)) {
-        setSelectedIndex(shortcutMap.get(newInput));
-      }
+      if (shortcutMap.has(newInput)) setSelectedIndex(shortcutMap.get(newInput));
     }
   });
   if (showTreeMap) {
     const node = visibleNodes[selectedIndex];
-    if (!node) return /*#__PURE__*/React.createElement(Text, {
-      color: oneHunter.red
-    }, "Error: No node selected");
+
+    // Populate value property for treemap visualization from calculatedSizes
+    const populateValues = n => {
+      if (!n) return;
+      // Set value from calculatedSizes if available
+      const calcSize = calculatedSizes.get(n.data.path);
+      if (calcSize !== undefined) {
+        n.data.value = calcSize;
+      } else if (n.data.isFile) {
+        n.data.value = n.data.size;
+      } else {
+        // For directories without calculated size, use 0 (will be updated as data streams in)
+        n.data.value = 0;
+      }
+      // Recursively populate children
+      if (n.children) {
+        n.children.forEach(populateValues);
+      }
+    };
+    populateValues(node);
     return /*#__PURE__*/React.createElement(TreeMapView, {
       selectedNode: node,
-      stdout: stdout
+      stdout: stdout,
+      calculatedSizes: calculatedSizes,
+      loadingPaths: loadingPaths
     });
   }
-  const getViewportWindow = () => {
-    let start = Math.max(0, selectedIndex - Math.floor(viewportHeight / 2));
-    let end = start + viewportHeight;
-    if (end > visibleNodes.length) {
-      end = visibleNodes.length;
-      start = Math.max(0, end - viewportHeight);
-    }
-    return {
-      start,
-      end
-    };
-  };
-  const {
-    start,
-    end
-  } = getViewportWindow();
+  const start = Math.max(0, selectedIndex - Math.floor(viewportHeight / 2));
+  const end = Math.min(visibleNodes.length, start + viewportHeight);
   const viewportNodes = visibleNodes.slice(start, end);
   if (!initialized) return null;
   return /*#__PURE__*/React.createElement(Box, {
     flexDirection: "column"
-  }, !noSize ? /*#__PURE__*/React.createElement(Text, {
-    color: oneHunter.textAlt,
-    dimColor: true
-  }, "\u2191/\u2193: Navigate | Enter: Toggle | t: TreeMap | Esc: Clear | q: Quit") : /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    justifyContent: "space-between"
+  }, /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.textAlt,
     dimColor: true
-  }, "\u2191/\u2193: Navigate | Enter: Toggle | Esc: Clear | q: Quit"), start > 0 && /*#__PURE__*/React.createElement(Text, {
+  }, "\u2191/\u2193: Navigate | Enter: Toggle | d: Size | t: Traverse | m: Map | q: Quit"), loadingPaths.size > 0 && /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.yellow
-  }, "\u22EE (", start, " more above)"), viewportNodes.map((node, i) => /*#__PURE__*/React.createElement(TreeRow, {
+  }, ' ', SPINNER_FRAMES[spinnerFrame], " Loading ", loadingPaths.size, "...")), viewportNodes.map((node, i) => /*#__PURE__*/React.createElement(TreeRow, {
     key: start + i,
     node: node,
     isSelected: start + i === selectedIndex,
     collapsed: collapsed,
     shortcutInput: shortcutInput,
-    noSize: noSize
-  })), end < visibleNodes.length && /*#__PURE__*/React.createElement(Text, {
-    color: oneHunter.yellow
-  }, "\u22EE (", visibleNodes.length - end, " more below)"));
+    noSize: noSize,
+    calculatedSizes: calculatedSizes,
+    loadingPaths: loadingPaths,
+    spinnerFrame: spinnerFrame
+  })));
 };
 
-// --- CLI args ---
+// --- CLI ---
 const args = process.argv.slice(2);
-
-// 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
+  -L <level>       Depth (default 1)
+  -s, --size       Preload all sizes (default off)
+  -c, --collapse   Start collapsed
+  -h, --help       Show help
 `);
   process.exit(0);
 }
@@ -369,9 +551,15 @@ const firstNonFlagArg = args.find(arg => !arg.startsWith('-'));
 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');
+if (isNaN(maxLevel) || maxLevel < 1) {
+  console.error('tri: Invalid level, must be greater than 0.');
+  process.exit(1);
+}
+const collapseAll = args.includes('--collapse') || args.includes('-c');
+const preloadSizes = args.includes('--size') || args.includes('-s');
 render(/*#__PURE__*/React.createElement(TreeVisualization, {
   dirPath: dirPath,
   maxLevel: maxLevel,
-  noSize: noSize
+  noSize: !preloadSizes,
+  collapseAll: collapseAll
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tri-cli",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"description": "Interactive CLI directory tree visualizer with treemap view",
 	"author": "Jared Wilber",
 	"license": "MIT",
@@ -37,7 +37,8 @@
 		"d3-hierarchy": "^3.1.2",
 		"ink": "^4.1.0",
 		"meow": "^11.0.0",
-		"react": "^18.2.0"
+		"react": "^18.2.0",
+		"tri-cli": "^0.0.3"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.21.0",
@@ -65,7 +66,8 @@
 		"extends": "xo-react",
 		"prettier": true,
 		"rules": {
-			"react/prop-types": "off"
+			"react/prop-types": "off",
+			"unicorn/expiring-todo-comments": "off"
 		}
 	},
 	"prettier": "@vdemedes/prettier-config",