tri-cli 0.0.52 → 0.0.54

package/dist/Treemap.js

@@ -20,6 +20,7 @@ const oneHunter = {
 
 // Expanded color palette for directories
 const dirColors = [oneHunter.blue, oneHunter.cyan, oneHunter.green, oneHunter.yellow, oneHunter.orange, oneHunter.red, oneHunter.purple, oneHunter.magenta, '#4a9eff', '#7ec699', '#e8b339', '#ff7eb6'];
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 
 // Function to format bytes to human readable
 const formatBytes = bytes => {
@@ -30,6 +31,14 @@ const formatBytes = bytes => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 };
 
+// Function to format counts
+const formatCount = count => {
+  if (count === 0) return '0';
+  if (count < 1000) return count.toString();
+  if (count < 1000000) return (count / 1000).toFixed(1) + 'K';
+  return (count / 1000000).toFixed(1) + 'M';
+};
+
 // Get color based on file extension
 const getFileColor = filename => {
   var _filename$match;
@@ -99,8 +108,19 @@ const assignGroupColors = root => {
 };
 export const TreeMapView = ({
   selectedNode,
-  stdout
+  stdout,
+  mode = 'size',
+  loadingPaths = new Set(),
+  calculatedCounts = new Map(),
+  calculatedSizes = new Map()
 }) => {
+  const [spinnerFrame, setSpinnerFrame] = React.useState(0);
+
+  // Spinner animation loop
+  React.useEffect(() => {
+    const interval = setInterval(() => setSpinnerFrame(f => (f + 1) % SPINNER_FRAMES.length), 80);
+    return () => clearInterval(interval);
+  }, []);
   if (!selectedNode || !selectedNode.data) {
     return /*#__PURE__*/React.createElement(Box, {
       flexDirection: "column"
@@ -110,16 +130,20 @@ export const TreeMapView = ({
     }, "Error: Invalid node selected"), /*#__PURE__*/React.createElement(Text, {
       dimColor: true,
       color: oneHunter.textAlt
-    }, "Press 't' to go back to tree view"));
+    }, "Press any key to go back to tree view"));
   }
   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;
 
+  // Choose formatter based on mode
+  const formatValue = mode === 'count' ? formatCount : formatBytes;
+  const modeLabel = mode === 'count' ? 'Count' : 'Size';
+
   // If it's a file, show just that file as a big rectangle
   if (selectedNode.data.isFile) {
     const color = getFileColor(selectedNode.data.name);
     const name = selectedNode.data.name;
-    const sizeStr = selectedNode.data.size ? formatBytes(selectedNode.data.size) : '';
+    const valueStr = mode === 'count' ? '1 file' : selectedNode.data.size ? formatBytes(selectedNode.data.size) : '';
     const grid = Array(height).fill(null).map(() => Array(width).fill(null).map(() => ({
       char: ' ',
       color
@@ -149,12 +173,12 @@ export const TreeMapView = ({
           };
         }
       }
-      if (sizeStr && midY + 2 < height - 2) {
-        const sizeX = Math.floor((width - sizeStr.length) / 2);
-        for (let i = 0; i < sizeStr.length && sizeX + i < width - 2; i++) {
+      if (valueStr && midY + 2 < height - 2) {
+        const sizeX = Math.floor((width - valueStr.length) / 2);
+        for (let i = 0; i < valueStr.length && sizeX + i < width - 2; i++) {
           if (sizeX + i > 0) {
             grid[midY + 2][sizeX + i] = {
-              char: sizeStr[i],
+              char: valueStr[i],
               color
             };
           }
@@ -194,10 +218,10 @@ export const TreeMapView = ({
     }, /*#__PURE__*/React.createElement(Text, {
       bold: true,
       color: oneHunter.cyan
-    }, "TreeMap View: ", name, " (File)"), /*#__PURE__*/React.createElement(Text, {
+    }, "TreeMap View (", modeLabel, "): ", name, " (File)"), /*#__PURE__*/React.createElement(Text, {
       dimColor: true,
       color: oneHunter.textAlt
-    }, "Press 't' to toggle back to tree view | Ctrl+C: Exit"), /*#__PURE__*/React.createElement(Box, {
+    }, "Press any key to go back to tree view | Ctrl+C: Exit"), /*#__PURE__*/React.createElement(Box, {
       borderStyle: "single",
       borderColor: oneHunter.textAlt,
       flexDirection: "column",
@@ -206,7 +230,7 @@ export const TreeMapView = ({
       dimColor: true,
       color: oneHunter.textAlt,
       marginTop: 1
-    }, "File: ", name, " | Size: ", sizeStr || 'Unknown'));
+    }, "File: ", name, " | ", modeLabel, ": ", valueStr || 'Unknown'));
   }
 
   // It's a directory - show treemap of its children
@@ -216,10 +240,10 @@ export const TreeMapView = ({
     }, /*#__PURE__*/React.createElement(Text, {
       bold: true,
       color: oneHunter.cyan
-    }, "TreeMap View: ", selectedNode.data.name, " (Empty Directory)"), /*#__PURE__*/React.createElement(Text, {
+    }, "TreeMap View (", modeLabel, "): ", selectedNode.data.name, " (Empty Directory)"), /*#__PURE__*/React.createElement(Text, {
       dimColor: true,
       color: oneHunter.textAlt
-    }, "Press 't' to toggle back to tree view | Ctrl+C: Exit"), /*#__PURE__*/React.createElement(Box, {
+    }, "Press any key to go back to tree view | Ctrl+C: Exit"), /*#__PURE__*/React.createElement(Box, {
       borderStyle: "single",
       borderColor: oneHunter.textAlt,
       marginTop: 1,
@@ -248,12 +272,18 @@ export const TreeMapView = ({
     const x1 = Math.ceil(node.x1);
     const y1 = Math.ceil(node.y1);
     const isFile = node.data.isFile;
+    const isNodeLoading = loadingPaths.has(node.data.path);
     const boxWidth = x1 - x0;
     const boxHeight = y1 - y0;
     if (boxWidth < 1 || boxHeight < 1) return;
 
-    // Color based on type
-    const color = isFile ? getFileColor(node.data.name) : node.groupColor || oneHunter.blue;
+    // Color based on type (dimmed if loading)
+    let color = isFile ? getFileColor(node.data.name) : node.groupColor || oneHunter.blue;
+
+    // Dim the color if loading
+    if (isNodeLoading) {
+      color = oneHunter.textAlt;
+    }
 
     // Draw border
     for (let y = y0; y < y1 && y < height; y++) {
@@ -277,14 +307,14 @@ export const TreeMapView = ({
 
     // Draw label if there's room
     const name = node.data.name;
-    const sizeStr = node.value ? ` ${formatBytes(node.value)}` : '';
+    const valueStr = isNodeLoading ? ` ${SPINNER_FRAMES[spinnerFrame]}` : node.value ? ` ${formatValue(node.value)}${mode === 'count' ? ' files' : ''}` : '';
     if (boxWidth >= 8 && boxHeight >= 2) {
       const labelY = y0 + 1;
       const labelX = x0 + 1;
       const maxLength = boxWidth - 2;
 
-      // Combine name and size
-      let label = name + sizeStr;
+      // Combine name and value
+      let label = name + valueStr;
       if (label.length > maxLength) {
         // Try just name
         if (name.length <= maxLength) {
@@ -374,15 +404,21 @@ export const TreeMapView = ({
       key: y
     }, segments);
   });
+  const totalLabel = mode === 'count' ? `${formatCount(root.value || 0)} files` : formatBytes(root.value || 0);
+  const isLoading = loadingPaths.size > 0;
   return /*#__PURE__*/React.createElement(Box, {
     flexDirection: "column"
   }, /*#__PURE__*/React.createElement(Text, {
     bold: true,
     color: oneHunter.cyan
-  }, "TreeMap View: ", selectedNode.data.name), /*#__PURE__*/React.createElement(Text, {
+  }, "TreeMap View (", modeLabel, "): ", selectedNode.data.name), /*#__PURE__*/React.createElement(Box, {
+    justifyContent: "space-between"
+  }, /*#__PURE__*/React.createElement(Text, {
     dimColor: true,
     color: oneHunter.textAlt
-  }, "Press 't' to toggle back to tree view | \u2191/\u2193: Navigate in tree | Ctrl+C: Exit"), /*#__PURE__*/React.createElement(Box, {
+  }, "Press any key to go back to tree view | \u2191/\u2193: Navigate in tree | Ctrl+C: Exit"), isLoading && /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.yellow
+  }, ' ', SPINNER_FRAMES[spinnerFrame], " Loading ", loadingPaths.size, "...")), /*#__PURE__*/React.createElement(Box, {
     borderStyle: "single",
     borderColor: oneHunter.textAlt,
     flexDirection: "column",
@@ -391,5 +427,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: ", totalLabel));
 };

package/dist/cli.js

@@ -30,6 +30,12 @@ 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 formatCount = count => {
+  if (count === 0) return '0';
+  if (count < 1000) return count.toString();
+  if (count < 1000000) return (count / 1000).toFixed(1) + 'K';
+  return (count / 1000000).toFixed(1) + 'M';
+};
 const formatDate = timestamp => {
   const date = new Date(timestamp);
   const now = new Date();
@@ -66,6 +72,24 @@ const getDirSizeAsync = async dirPath => {
     return 0;
   }
 };
+
+// Fast file counting using shell command
+const countFilesAsync = async dirPath => {
+  try {
+    const stats = fs.statSync(dirPath);
+    if (!stats.isDirectory()) return 1;
+
+    // Use find command for fast counting, excluding hidden files
+    const escapedPath = dirPath.replace(/"/g, '\\"');
+    const {
+      stdout
+    } = await execAsync(`find "${escapedPath}" -type f ! -path '*/.*' 2>/dev/null | wc -l`);
+    const count = parseInt(stdout.trim(), 10);
+    return isNaN(count) ? 0 : count;
+  } catch {
+    return 0;
+  }
+};
 const readDirTree = (dirPath, noSize = true, currentLevel = 0, maxLevel = Infinity) => {
   try {
     const stats = fs.statSync(dirPath);
@@ -182,6 +206,7 @@ const TreeRow = /*#__PURE__*/React.memo(({
   shortcutInput,
   noSize,
   calculatedSizes,
+  calculatedCounts,
   loadingPaths,
   spinnerFrame,
   lastModifiedDates
@@ -199,6 +224,7 @@ const TreeRow = /*#__PURE__*/React.memo(({
   } else {
     displaySize = node.data.size;
   }
+  const fileCount = calculatedCounts === null || calculatedCounts === void 0 ? void 0 : calculatedCounts.get(node.data.path);
   const lastModified = lastModifiedDates.get(node.data.path);
   const treeLines = getTreeLines(node);
 
@@ -235,7 +261,11 @@ const TreeRow = /*#__PURE__*/React.memo(({
     backgroundColor: isSelected ? oneHunter.green : undefined
   }, node.data.name, !node.data.isFile && !isRoot ? '/' : ''), hasChildren && !isCollapsed && /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.textAlt
-  }, " (", node.children.length, ")"), isLoading ? /*#__PURE__*/React.createElement(Text, {
+  }, " (", node.children.length, ")"), fileCount !== undefined && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.purple
+  }, " [", formatCount(fileCount), " files]"), isLoading && /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.yellow
+  }, " ", SPINNER_FRAMES[spinnerFrame])), isLoading ? /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.yellow
   }, " ", SPINNER_FRAMES[spinnerFrame]) : displaySize > 0 ? /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.cyan
@@ -253,8 +283,10 @@ const TreeVisualization = ({
   const [collapsed, setCollapsed] = useState(new Set());
   const [shortcutInput, setShortcutInput] = useState('');
   const [showTreeMap, setShowTreeMap] = useState(false);
+  const [treeMapMode, setTreeMapMode] = useState('size'); // 'size' or 'count'
   const [initialized, setInitialized] = useState(false);
   const [calculatedSizes, setCalculatedSizes] = useState(new Map());
+  const [calculatedCounts, setCalculatedCounts] = useState(new Map());
   const [loadingPaths, setLoadingPaths] = useState(new Set());
   const [spinnerFrame, setSpinnerFrame] = useState(0);
   const [rootTree, setRootTree] = useState(() => hierarchy(readDirTree(dirPath, noSize, 0, maxLevel)));
@@ -385,6 +417,50 @@ const TreeVisualization = ({
       await new Promise(r => setTimeout(r, 0));
     }
   };
+  const countFilesInTreeAsync = async node => {
+    // Collect node and all its descendants
+    const nodesToCount = [];
+    const collectNodes = n => {
+      // Skip if already counted
+      if (calculatedCounts.has(n.data.path)) {
+        // Still recurse to children in case they need counting
+        if (n.children) {
+          n.children.forEach(collectNodes);
+        }
+        return;
+      }
+      nodesToCount.push(n);
+      if (n.children) {
+        n.children.forEach(collectNodes);
+      }
+    };
+    collectNodes(node);
+    if (nodesToCount.length === 0) return; // Nothing to count
+
+    // Sort nodes by depth (shallowest first) for top-down display
+    nodesToCount.sort((a, b) => a.depth - b.depth);
+
+    // Mark all nodes as loading
+    const loadingSet = new Set(nodesToCount.map(n => n.data.path));
+    setLoadingPaths(loadingSet);
+    const newMap = new Map(calculatedCounts);
+
+    // Process all nodes in parallel, but update UI as each completes
+    const promises = nodesToCount.map(async targetNode => {
+      const count = await countFilesAsync(targetNode.data.path);
+
+      // Update immediately when this specific node completes
+      newMap.set(targetNode.data.path, count);
+      loadingSet.delete(targetNode.data.path);
+
+      // Trigger UI update
+      setCalculatedCounts(new Map(newMap));
+      setLoadingPaths(new Set(loadingSet));
+    });
+
+    // Wait for all counts to complete
+    await Promise.all(promises);
+  };
   const getLastModifiedAsync = async node => {
     // Collect node and all its descendants
     const nodesToProcess = [];
@@ -460,8 +536,8 @@ const TreeVisualization = ({
       return;
     }
     if (input === 'q') process.exit(0);
-    if (input === 'C') {
-      // Toggle collapse/expand all children of the selected node's PARENT
+    if (input === 'C' && !key.shift) {
+      // Toggle collapse/expand all children of the selected node's PARENT (lowercase handling moved)
       const selectedNode = visibleNodes[selectedIndex];
       if (!selectedNode || !selectedNode.parent) return;
       const parentNode = selectedNode.parent;
@@ -492,6 +568,40 @@ const TreeVisualization = ({
       });
       return;
     }
+    if (key.shift && input === 'C') {
+      // Shift+C: Show count treemap
+      const node = visibleNodes[selectedIndex];
+      if (!node) return;
+
+      // Collect all nodes that need counting
+      const nodesToCount = [];
+      const collectNodes = n => {
+        if (calculatedCounts.has(n.data.path)) {
+          if (n.children) {
+            n.children.forEach(collectNodes);
+          }
+          return;
+        }
+        nodesToCount.push(n);
+        if (n.children) {
+          n.children.forEach(collectNodes);
+        }
+      };
+      collectNodes(node);
+
+      // Mark nodes as loading before starting
+      if (nodesToCount.length > 0) {
+        const pathsToLoad = nodesToCount.map(n => n.data.path);
+        setLoadingPaths(prev => new Set([...prev, ...pathsToLoad]));
+      }
+
+      // Start calculating counts in the background
+      countFilesInTreeAsync(node);
+      // Show count treemap immediately
+      setTreeMapMode('count');
+      setShowTreeMap(true);
+      return;
+    }
     if (input === 'O') {
       // Toggle collapse/expand ALL nodes in the entire tree
       const allNodesWithChildren = [];
@@ -524,7 +634,8 @@ const TreeVisualization = ({
       if (!node) return;
       // Always start calculating sizes in the background (calculateSizeAsync skips already-calculated nodes)
       calculateSizeAsync(node);
-      // Show treemap immediately
+      // Show size treemap immediately
+      setTreeMapMode('size');
       setShowTreeMap(true);
       return;
     }
@@ -533,6 +644,11 @@ const TreeVisualization = ({
       if (node) await calculateSizeAsync(node);
       return;
     }
+    if (input === 'c') {
+      const node = visibleNodes[selectedIndex];
+      if (node) await countFilesInTreeAsync(node);
+      return;
+    }
     if (input === 'l') {
       const node = visibleNodes[selectedIndex];
       if (node) await getLastModifiedAsync(node);
@@ -597,31 +713,52 @@ const TreeVisualization = ({
 
       // 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 {
+      if (treeMapMode === 'count') {
+        // COUNT MODE: Use file counts
+        if (data.isFile) {
+          // Files always count as 1
+          data.value = 1;
+        } else if (data.children === undefined || !hierarchyNode.children || hierarchyNode.children.length === 0) {
+          // Directory with no children loaded OR empty directory
+          // Use calculatedCount if available
+          const calcCount = calculatedCounts.get(data.path);
+          if (calcCount !== undefined) {
+            data.value = calcCount;
+          } else {
             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;
+          // Directory with loaded children - let d3's .sum() aggregate from children
+          data.value = undefined;
         }
       } else {
-        // Directory with loaded children - let d3's .sum() aggregate from children
-        data.value = undefined;
+        // SIZE MODE: Use file sizes
+        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);
@@ -629,7 +766,9 @@ const TreeVisualization = ({
       selectedNode: node,
       stdout: stdout,
       calculatedSizes: calculatedSizes,
-      loadingPaths: loadingPaths
+      calculatedCounts: calculatedCounts,
+      loadingPaths: loadingPaths,
+      mode: treeMapMode
     });
   }
   const start = Math.max(0, selectedIndex - Math.floor(viewportHeight / 2));
@@ -643,7 +782,7 @@ const TreeVisualization = ({
   }, /*#__PURE__*/React.createElement(Text, {
     color: oneHunter.textAlt,
     dimColor: true
-  }, "\u2191/\u2193: Navigate | Enter: Expand/Traverse | d: Size | l: Date | m: Map | q: Quit"), loadingPaths.size > 0 && /*#__PURE__*/React.createElement(Text, {
+  }, "\u2191/\u2193: Navigate | Enter: Expand/Traverse | c: Count | d: Size | l: Date | m: Map | Shift+C: CountMap | 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,
@@ -653,6 +792,7 @@ const TreeVisualization = ({
     shortcutInput: shortcutInput,
     noSize: noSize,
     calculatedSizes: calculatedSizes,
+    calculatedCounts: calculatedCounts,
     loadingPaths: loadingPaths,
     spinnerFrame: spinnerFrame,
     lastModifiedDates: lastModifiedDates

package/package.json

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