tri-cli 0.0.3 → 0.0.51

package/README.md

@@ -1,13 +1,52 @@
 # 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 navigation, shortcuts, colors, and [treemap](https://en.wikipedia.org/wiki/Treemapping) visuals:
+
+![tri demo in gif](/assets/readme.gif)
+
 
 ## Installation
 
+### Global Installation (Recommended)
+
+It's recommended to install globally:
+
 ```bash
 npm install -g tri-cli
 ```
 
+After global installation, you can run `tri` directly from anywhere:
+
+```bash
+tri .
+```
+
+### Local Installation
+
+If you don't want to install globally, you can install locally and then run anywhere with `npx`:
+
+```bash
+npm install tri-cli
+```
+
+For local installations, use `npx` to run the command:
+
+```bash
+npx tri .
+```
+
+Or add it to your `package.json` scripts:
+
+```json
+{
+  "scripts": {
+    "tree": "tri"
+  }
+}
+```
+
+Then run with `npm run tree`.
+
 ## Usage
 
 ```bash
@@ -20,32 +59,72 @@ tri [directory] [options]
 tri .                # visualize current directory
 tri ../bionemo -L 2  # show 2 levels deep
 tri --dir src        # specify directory with flag
+tri src -s           # preload all sizes (enables immediate treemap)
+tri --dir src -c     # start with all directories collapsed
 ```
 
 ### Interactive Controls
 
-| Key   | Action                         |
-| ----- | ------------------------------ |
-| ↑ / ↓ | Navigate files and folders     |
-| Enter | Expand or collapse a directory |
-| t     | Toggle Treemap view            |
-| Esc   | Clear typed shortcut           |
-| q     | Quit                           |
+| Key           | Action                                    |
+| ------------- | ----------------------------------------- |
+| ↑ / ↓         | Navigate files and folders                |
+| Enter         | Expand or collapse a directory            |
+| [a-z]/[0-9]   | Type shortcut to jump to item             |
+| d             | Calculate and display sizes recursively   |
+| l             | Show last modified dates (ls -l style)    |
+| m             | Toggle treemap view                       |
+| Esc           | Clear typed shortcut                      |
+| q             | Quit                                      |
+
+### Command Line Options
+
+| Option           | Description                                      |
+| ---------------- | ------------------------------------------------ |
+| `[directory]`    | Directory to visualize (default: current dir)    |
+| `-L <level>`     | Maximum depth to load initially (default: 1)     |
+| `-s, --size`     | Preload all file/directory sizes                 |
+| `-c, --collapse` | Start with all directories collapsed             |
+| `-h, --help`     | Show help message                                |
+
+## Features
 
-### Options
+### Tree View
+- **Keyboard shortcuts**: Each item gets a shortcut label - just type it to jump there instantly
+- **Tree-style lines**: Visual hierarchy with Unicode box-drawing characters (├─, ╰─, │)
+- **Color coding**: Different colors for different file types
+- **Lazy loading**: Only loads directory contents when you expand them (fast for large directories)
+- **Size calculation**: Press `d` on any item to calculate disk usage recursively
+- **Date display**: Press `l` to show last modified dates in `ls -l` format
 
-| Option         | Description                                     |
-| -------------- | ----------------------------------------------- |
-| `--dir <path>` | Directory to visualize (optional if positional) |
-| `-L <level>`   | Depth level to expand initially (default: 1)    |
-| `-h, --help`   | Show help message                               |
+### Treemap View
+- Press `m` to visualize the selected directory as a treemap
+- Visual representation of file/directory sizes
+- Hierarchical rectangles sized proportionally to disk usage
+- Color-coded by file type or directory group
 
----
+## Development
 
-**Example:**
+Clone the repository and install dependencies:
 
 ```bash
-tri ../bionemo -L 2
+git clone https://github.com/jwilber/tri-cli.git
+cd tri-cli
+npm install
 ```
 
-Type `t` to open (and close) the treemap view, navigate with arrow keys, and press `q` to quit.
+Build and link for local development:
+
+```bash
+npm run build
+npm link
+```
+
+Now you can run `tri` from anywhere and it will use your local development version.
+
+## License
+
+MIT
+
+## Author
+
+Jared Wilber

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,82 @@ 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;
+const formatDate = timestamp => {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  const month = months[date.getMonth()];
+  const day = date.getDate().toString().padStart(2, ' ');
+
+  // If file is from this year, show time; otherwise show year
+  if (diffDays < 180) {
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    return `${month} ${day} ${hours}:${minutes}`;
+  } else {
+    const year = date.getFullYear();
+    return `${month} ${day}  ${year}`;
+  }
+};
+
+// 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 +132,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 = 'abcefgijknopqrsuvwxyz';
   const base = letters.length;
   if (isFile) return `${parentShortcut}${index + 1}`;
   let label = '';
@@ -117,160 +147,420 @@ const generateShortcut = (index, isFile, parentShortcut = '') => {
   return parentShortcut + label;
 };
 
-// --- Components ---
+// Generate tree lines (like the `tree` command)
+const getTreeLines = node => {
+  if (node.depth === 0) return ''; // Root has no lines
+
+  const lines = [];
+  let current = node;
+
+  // Build the lines from current node up to (but not including) root
+  while (current.parent && current.parent.depth > 0) {
+    const parent = current.parent;
+    const isLastChild = parent.children && current === parent.children[parent.children.length - 1];
+    lines.unshift(isLastChild ? '   ' : '│  ');
+    current = parent;
+  }
+
+  // Add the final connector for this node
+  const parent = node.parent;
+  if (parent && parent.depth === 0) {
+    // Direct child of root
+    const isLastChild = parent.children && node === parent.children[parent.children.length - 1];
+    return isLastChild ? '╰─' : '├─';
+  } else if (parent) {
+    const isLastChild = parent.children && node === parent.children[parent.children.length - 1];
+    return lines.join('') + (isLastChild ? '╰─' : '├─');
+  }
+  return '';
+};
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 const TreeRow = /*#__PURE__*/React.memo(({
   node,
   isSelected,
   collapsed,
   shortcutInput,
-  noSize
+  noSize,
+  calculatedSizes,
+  loadingPaths,
+  spinnerFrame,
+  lastModifiedDates
 }) => {
   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;
+  const isRoot = node.depth === 0;
+  const isDirectory = !node.data.isFile;
+  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;
+  }
+  const lastModified = lastModifiedDates.get(node.data.path);
+  const treeLines = getTreeLines(node);
+
+  // ✅ 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, {
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, null, !isRoot && /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.textAlt
+  }, treeLines), !isRoot && isDirectory && /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.textAlt
-  }, prefix), /*#__PURE__*/React.createElement(Text, {
-    color: hasChildren ? oneHunter.cyan : oneHunter.textAlt
-  }, icon), /*#__PURE__*/React.createElement(Text, {
+  }, hasChildren && !isCollapsed ? '▼ ' : '▶ '), !isRoot && !isDirectory && /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.textAlt
+  }, "\u2500 "), /*#__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, {
+  }, node.data.name, !node.data.isFile && !isRoot ? '/' : ''), 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(), lastModified && /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.text2
+  }, " ", formatDate(lastModified))));
+});
 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 [lastModifiedDates, setLastModifiedDates] = useState(new Map());
   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 getLastModifiedAsync = async node => {
+    // Collect node and all its descendants
+    const nodesToProcess = [];
+    const collectNodes = n => {
+      // Skip if already have date
+      if (lastModifiedDates.has(n.data.path)) {
+        // Still recurse to children in case they need dates
+        if (n.children) {
+          n.children.forEach(collectNodes);
+        }
+        return;
+      }
+      nodesToProcess.push(n);
+      if (n.children) {
+        n.children.forEach(collectNodes);
+      }
+    };
+    collectNodes(node);
+    if (nodesToProcess.length === 0) return; // Nothing to process
+
+    const newMap = new Map(lastModifiedDates);
+
+    // Get mtime for each node
+    for (const targetNode of nodesToProcess) {
+      try {
+        const stats = fs.statSync(targetNode.data.path);
+        newMap.set(targetNode.data.path, stats.mtimeMs);
+      } catch {
+        // If we can't stat the file, skip it
+      }
+
+      // Stream the update immediately
+      React.startTransition(() => {
+        setLastModifiedDates(new Map(newMap));
+      });
+      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 === 't') {
-      if (!noSize) setShowTreeMap(p => !p);
+    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 === 'm') {
+      const node = visibleNodes[selectedIndex];
+      if (!node) return;
+      // Always start calculating sizes in the background (calculateSizeAsync skips already-calculated nodes)
+      calculateSizeAsync(node);
+      // Show treemap immediately
+      setShowTreeMap(true);
+      return;
+    }
+    if (input === 'd') {
+      const node = visibleNodes[selectedIndex];
+      if (node) await calculateSizeAsync(node);
+      return;
+    }
+    if (input === 'l') {
+      const node = visibleNodes[selectedIndex];
+      if (node) await getLastModifiedAsync(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) {
+      if (!node) return;
+
+      // Don't allow collapsing/expanding the root
+      if (node.depth === 0) return;
+      if (node.data.isFile) return; // Do nothing for files
+
+      // If it's a directory with no children loaded yet, traverse into it
+      if (node.data.children === undefined) {
+        await traverseDir(node);
+      } else if (node.children) {
+        // Children already loaded, toggle collapse
         setCollapsed(prev => {
           const next = new Set(prev);
           if (next.has(node.data.path)) next.delete(node.data.path);else next.add(node.data.path);
@@ -287,80 +577,99 @@ 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 on DATA objects for treemap visualization
+    // This is important because TreeMapView creates a new hierarchy from node.data,
+    // so we need to set values on the data objects, not the hierarchy nodes
+    const populateValues = hierarchyNode => {
+      if (!hierarchyNode) return;
+
+      // Recursively populate children first (depth-first, bottom-up)
+      if (hierarchyNode.children) {
+        hierarchyNode.children.forEach(populateValues);
+      }
+
+      // Set value on the DATA object
+      const data = hierarchyNode.data;
+      if (data.isFile) {
+        // Files: use calculatedSize or read from disk
+        const calcSize = calculatedSizes.get(data.path);
+        if (calcSize !== undefined) {
+          data.value = calcSize;
+        } else {
+          try {
+            data.value = fs.statSync(data.path).size;
+          } catch {
+            data.value = 0;
+          }
+        }
+      } else if (data.children === undefined || !hierarchyNode.children || hierarchyNode.children.length === 0) {
+        // Directory with no children loaded OR empty directory
+        // Use calculatedSize if available
+        const calcSize = calculatedSizes.get(data.path);
+        if (calcSize !== undefined) {
+          data.value = calcSize;
+        } else {
+          // For unloaded directories without calculated size, will show as 0
+          data.value = data.size || 0;
+        }
+      } else {
+        // Directory with loaded children - let d3's .sum() aggregate from children
+        data.value = undefined;
+      }
+    };
+    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: Expand/Traverse | d: Size | l: Date | 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,
+    lastModifiedDates: lastModifiedDates
+  })));
 };
 
-// --- 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 +678,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.51",
 	"description": "Interactive CLI directory tree visualizer with treemap view",
 	"author": "Jared Wilber",
 	"license": "MIT",
@@ -28,7 +28,7 @@
 		"postbuild": "chmod +x dist/cli.js",
 		"dev": "babel --out-dir=dist --watch source",
 		"test": "prettier --check . && xo && ava",
-		"test:local": "npm run build && tri --dir . -L 2"
+		"test:local": "npm run build && node dist/cli.js --dir . -L 2"
 	},
 	"files": [
 		"dist"
@@ -65,7 +65,8 @@
 		"extends": "xo-react",
 		"prettier": true,
 		"rules": {
-			"react/prop-types": "off"
+			"react/prop-types": "off",
+			"unicorn/expiring-todo-comments": "off"
 		}
 	},
 	"prettier": "@vdemedes/prettier-config",
@@ -74,4 +75,4 @@
 			"@babel/preset-react"
 		]
 	}
-}
+}

package/readme.tape

@@ -0,0 +1,78 @@
+Output assets/readme.gif
+Set FontSize 18
+Set Width 1000
+Set Height 600
+Set Theme "Dracula"
+
+Type "# tri: interactive tree + treemap visual"
+Enter
+Sleep 500ms
+
+Type "tri ."
+Enter
+Sleep 2s
+
+Down
+Sleep 250ms
+Down
+Sleep 250ms
+Enter
+Sleep 500ms
+Type "d"
+Enter
+Sleep 500ms
+Down
+Sleep 250ms
+Down
+Sleep 250ms
+Down
+Sleep 250ms
+Type "l"
+Sleep 1.5s
+
+Enter
+Sleep 1.5s
+Type "m"
+Sleep 1.5s
+Type "m"
+Sleep 500ms
+Down
+Sleep 250ms
+Down
+Sleep 250ms
+Enter
+Sleep 1.5s
+
+
+# Toggle treemap view
+Type "m"
+Sleep 2s
+
+# Return to tree view
+Type "m"
+Sleep 2s
+
+Type "a"
+Sleep 250ms
+Type "c"
+Sleep 500ms
+Enter
+Sleep 1s
+
+Type "a"
+Sleep 250ms
+Type "h"
+Sleep 500ms
+Enter
+Sleep 1s
+
+Enter
+Sleep 1s
+
+# Quit
+Type "q"
+Sleep 1s
+
+Type "# install with:   npm i -g tri-cli"
+Enter
+Sleep 2s