tri-cli 0.0.4 → 0.0.52

package/README.md

@@ -1,15 +1,52 @@
 # 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:
+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
@@ -22,46 +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 --dir src  -ns   # create tree without dir/file size (faster, but no treemap)
+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                           |
-
-### 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:**
+| 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
+
+### 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
+
+### 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
+
+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.
-
-**Example:**
-
-It's probably easiest to just uninstall and link:
+Build and link for local development:
 
 ```bash
 npm run build
-
 npm link
 ```
 
-**License:**
+Now you can run `tri` from anywhere and it will use your local development version.
+
+## License
 
 MIT
+
+## Author
+
+Jared Wilber

package/dist/Treemap.js

@@ -32,7 +32,8 @@ const formatBytes = bytes => {
 
 // Get color based on file extension
 const getFileColor = filename => {
-  const ext = filename.match(/\.[^.]+$/)?.[0]?.toLowerCase();
+  var _filename$match;
+  const ext = (_filename$match = filename.match(/\.[^.]+$/)) === null || _filename$match === void 0 || (_filename$match = _filename$match[0]) === null || _filename$match === void 0 ? void 0 : _filename$match.toLowerCase();
   const colorMap = {
     '.js': oneHunter.yellow,
     '.jsx': oneHunter.yellow,
@@ -111,8 +112,8 @@ export const TreeMapView = ({
       color: oneHunter.textAlt
     }, "Press 't' to go back to tree view"));
   }
-  const width = Math.min(stdout?.columns || 80, 120) - 4;
-  const height = Math.min(stdout?.rows || 24, 40) - 8;
+  const width = Math.min((stdout === null || stdout === void 0 ? void 0 : stdout.columns) || 80, 120) - 4;
+  const height = Math.min((stdout === null || stdout === void 0 ? void 0 : stdout.rows) || 24, 40) - 8;
 
   // If it's a file, show just that file as a big rectangle
   if (selectedNode.data.isFile) {
@@ -307,8 +308,9 @@ export const TreeMapView = ({
       const maxLength = boxWidth - 2;
       let label;
       if (isFile) {
+        var _name$match;
         // Show extension for files
-        const ext = name.match(/\.([^.]{1,3})$/)?.[1];
+        const ext = (_name$match = name.match(/\.([^.]{1,3})$/)) === null || _name$match === void 0 ? void 0 : _name$match[1];
         label = ext || name.slice(0, maxLength);
       } else {
         // Show first few chars for directories

package/dist/cli.js

@@ -30,6 +30,24 @@ 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 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 => {
@@ -117,7 +135,7 @@ const getFileColor = filename => {
 
 // Exclude m, t, d
 const generateShortcut = (index, isFile, parentShortcut = '') => {
-  const letters = 'abcefgijklnopqrsuvwxyz';
+  const letters = 'abcefgijknopqrsuvwxyz';
   const base = letters.length;
   if (isFile) return `${parentShortcut}${index + 1}`;
   let label = '';
@@ -128,6 +146,34 @@ const generateShortcut = (index, isFile, parentShortcut = '') => {
   }
   return parentShortcut + label;
 };
+
+// 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,
@@ -137,12 +183,15 @@ const TreeRow = /*#__PURE__*/React.memo(({
   noSize,
   calculatedSizes,
   loadingPaths,
-  spinnerFrame
+  spinnerFrame,
+  lastModifiedDates
 }) => {
   const isCollapsed = collapsed.has(node.data.path);
   const hasChildren = node.children && node.children.length > 0;
   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)) {
@@ -150,6 +199,8 @@ const TreeRow = /*#__PURE__*/React.memo(({
   } else {
     displaySize = node.data.size;
   }
+  const lastModified = lastModifiedDates.get(node.data.path);
+  const treeLines = getTreeLines(node);
 
   // ✅ Restore highlight logic
   const renderShortcut = () => {
@@ -172,21 +223,25 @@ const TreeRow = /*#__PURE__*/React.memo(({
       dimColor: true
     }, '  ', "[", 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
-  }, node.depth > 0 ? ' '.repeat(node.depth * 2) : ''), /*#__PURE__*/React.createElement(Text, {
-    color: hasChildren ? oneHunter.cyan : oneHunter.textAlt
-  }, hasChildren ? isCollapsed ? '▶ ' : '▼ ' : '  '), /*#__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, ")"), 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()));
+  }, " ", formatBytes(displaySize)) : /*#__PURE__*/React.createElement(Text, null, " "), renderShortcut(), lastModified && /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.text2
+  }, " ", formatDate(lastModified))));
 });
 const TreeVisualization = ({
   dirPath = '.',
@@ -203,10 +258,11 @@ const TreeVisualization = ({
   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 terminalHeight = (stdout === null || stdout === void 0 ? void 0 : stdout.rows) || 24;
   const viewportHeight = Math.max(5, terminalHeight - 7);
 
   // Spinner animation loop
@@ -329,6 +385,44 @@ const TreeVisualization = ({
       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;
 
@@ -425,18 +519,11 @@ const TreeVisualization = ({
       });
       return;
     }
-    if (input === 't') {
-      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);
-      }
+      // Always start calculating sizes in the background (calculateSizeAsync skips already-calculated nodes)
+      calculateSizeAsync(node);
       // Show treemap immediately
       setShowTreeMap(true);
       return;
@@ -446,6 +533,11 @@ const TreeVisualization = ({
       if (node) await calculateSizeAsync(node);
       return;
     }
+    if (input === 'l') {
+      const node = visibleNodes[selectedIndex];
+      if (node) await getLastModifiedAsync(node);
+      return;
+    }
     if (key.upArrow) {
       setSelectedIndex(p => Math.max(0, p - 1));
       setShortcutInput('');
@@ -458,11 +550,24 @@ const TreeVisualization = ({
     }
     if (key.return) {
       const node = visibleNodes[selectedIndex];
-      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;
-      });
+      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 {
+        // ← Changed from `else if (node.children)`
+        // Children already loaded, toggle collapse (even if empty)
+        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;
     }
@@ -479,22 +584,44 @@ const TreeVisualization = ({
   if (showTreeMap) {
     const node = visibleNodes[selectedIndex];
 
-    // 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;
+    // 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);
       }
-      // Recursively populate children
-      if (n.children) {
-        n.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);
@@ -516,7 +643,7 @@ const TreeVisualization = ({
   }, /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.textAlt,
     dimColor: true
-  }, "\u2191/\u2193: Navigate | Enter: Toggle | d: Size | t: Traverse | m: Map | q: Quit"), loadingPaths.size > 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
   }, ' ', SPINNER_FRAMES[spinnerFrame], " Loading ", loadingPaths.size, "...")), viewportNodes.map((node, i) => /*#__PURE__*/React.createElement(TreeRow, {
     key: start + i,
@@ -527,7 +654,8 @@ const TreeVisualization = ({
     noSize: noSize,
     calculatedSizes: calculatedSizes,
     loadingPaths: loadingPaths,
-    spinnerFrame: spinnerFrame
+    spinnerFrame: spinnerFrame,
+    lastModifiedDates: lastModifiedDates
   })));
 };
 

package/package.json

@@ -1,9 +1,10 @@
 {
 	"name": "tri-cli",
-	"version": "0.0.4",
+	"version": "0.0.52",
 	"description": "Interactive CLI directory tree visualizer with treemap view",
 	"author": "Jared Wilber",
 	"license": "MIT",
+	"type": "module",
 	"keywords": [
 		"cli",
 		"tree",
@@ -19,7 +20,6 @@
 	"bin": {
 		"tri": "dist/cli.js"
 	},
-	"type": "module",
 	"engines": {
 		"node": ">=16"
 	},
@@ -28,20 +28,20 @@
 		"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"
 	],
 	"dependencies": {
 		"d3-hierarchy": "^3.1.2",
-		"ink": "^4.1.0",
-		"meow": "^11.0.0",
-		"react": "^18.2.0",
-		"tri-cli": "^0.0.3"
+		"ink": "^3.2.0",
+		"meow": "^9.0.0",
+		"react": "^18.2.0"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.21.0",
+		"@babel/preset-env": "^7.22.0",
 		"@babel/preset-react": "^7.28.5",
 		"@vdemedes/prettier-config": "^2.0.1",
 		"ava": "^5.2.0",
@@ -73,6 +73,15 @@
 	"prettier": "@vdemedes/prettier-config",
 	"babel": {
 		"presets": [
+			[
+				"@babel/preset-env",
+				{
+					"targets": {
+						"node": "16"
+					},
+					"modules": false
+				}
+			],
 			"@babel/preset-react"
 		]
 	}

package/readme.tape

@@ -0,0 +1,65 @@
+Output readme2.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 1s
+
+Down
+Sleep 250ms
+Down
+Sleep 250ms
+Down
+Sleep 250ms
+Enter
+Sleep 1s
+Type "d"
+Sleep 1.5s
+
+Type "a"
+Sleep 250ms
+Type "e"
+Sleep 500ms
+Enter
+Sleep 1s
+
+
+Type "a"
+Sleep 250ms
+Type "e"
+Sleep 500ms
+Type "b"
+Sleep 500ms
+Enter
+Sleep 1s
+
+# Toggle treemap view
+Type "m"
+Sleep 2s
+
+# Return to tree view
+Type "m"
+Sleep 2s
+
+Type "a"
+Sleep 250ms
+Type "e"
+Sleep 500ms
+Enter
+Sleep 1s
+
+
+# Quit
+Type "q"
+Sleep 1s
+
+Type "# install with:   npm i -g tri-cli"
+Enter
+Sleep 2s