tri-cli 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,67 @@
+# tri-cli
+
+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
+
+```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
+tri --dir src  -ns   # create tree without dir/file size (faster, but no treemap)
+```
+
+### 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)    |
+| `-ns`          | Don't calculate sizes (faster, but no treemap)  |
+| `-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.
+
+**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,13 +4,17 @@ 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',
-  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',
@@ -19,8 +23,6 @@ const oneHunter = {
   purple: 'rgb(139, 126, 200)',
   magenta: 'rgb(206, 93, 151)'
 };
-
-// Function to format bytes to human readable
 const formatBytes = bytes => {
   if (bytes === 0) return '0 B';
   const k = 1024;
@@ -29,55 +31,62 @@ const formatBytes = bytes => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 };
 
-// Function to get directory size recursively
-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;
+  }
 };
-
-// Function to read directory structure (unbounded depth)
-const readDirTree = dirPath => {
+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 = stats.size;
+      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))).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: getDirSize(dirPath),
-      children: children.length > 0 ? children : undefined
+      size: 0,
+      children
     };
   } catch {
     return null;
   }
 };
-
-// Get color based on file extension
 const getFileColor = filename => {
   const ext = path.extname(filename).toLowerCase();
   const colorMap = {
@@ -90,7 +99,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,14 +109,15 @@ 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
+// 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 = '';
@@ -118,177 +128,341 @@ const generateShortcut = (index, isFile, parentShortcut = '') => {
   }
   return parentShortcut + label;
 };
-
-// TreeRow
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 const TreeRow = /*#__PURE__*/React.memo(({
   node,
   isSelected,
   collapsed,
-  shortcutInput
+  shortcutInput,
+  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, ")"), node.data.size > 0 && /*#__PURE__*/React.createElement(Text, {
-    color: oneHunter.green
-  }, " ", formatBytes(node.data.size)), renderShortcut()));
-}, (p, n) => p.isSelected === n.isSelected && p.collapsed === n.collapsed && p.shortcutInput === n.shortcutInput);
+  }, " (", node.children.length, ")"), isLoading ? /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.yellow
+  }, " ", SPINNER_FRAMES[spinnerFrame]) : displaySize > 0 ? /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.cyan
+  }, " ", formatBytes(displaySize)) : /*#__PURE__*/React.createElement(Text, null, " "), renderShortcut()));
+});
 const TreeVisualization = ({
   dirPath = '.',
-  maxLevel = 1
+  maxLevel = 1,
+  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), [dirPath]);
-  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 ---
+  // 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]);
-
-  // Assign shortcuts
-  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]);
-
-  // Flatten visible nodes
+  }, []);
+  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') {
-      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;
     }
-
-    // ✅ 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 => {
-            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;
-      }
-
-      // Otherwise toggle current node
       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;
     }
@@ -296,85 +470,96 @@ 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));
-      }
+      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
     });
   }
-
-  // --- Viewport logic ---
-  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"
+  }, /*#__PURE__*/React.createElement(Box, {
+    justifyContent: "space-between"
   }, /*#__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 | 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
-  })), end < visibleNodes.length && /*#__PURE__*/React.createElement(Text, {
-    color: oneHunter.yellow
-  }, "\u22EE (", visibleNodes.length - end, " more below)"));
+    shortcutInput: shortcutInput,
+    noSize: noSize,
+    calculatedSizes: calculatedSizes,
+    loadingPaths: loadingPaths,
+    spinnerFrame: spinnerFrame
+  })));
 };
 
-// --- CLI args ---
+// --- CLI ---
 const args = process.argv.slice(2);
+if (args.includes('--help') || args.includes('-h')) {
+  console.log(`
+Usage:
+  tri [directory] [options]
 
-// Dir flag
+Options:
+  -L <level>       Depth (default 1)
+  -s, --size       Preload all sizes (default off)
+  -c, --collapse   Start collapsed
+  -h, --help       Show help
+`);
+  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;
+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
+  maxLevel: maxLevel,
+  noSize: !preloadSizes,
+  collapseAll: collapseAll
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tri-cli",
-	"version": "0.0.2",
+	"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",

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
-```