ftreeview 0.1.1

package/src/components/StatusBar.jsx

@@ -0,0 +1,270 @@
+/**
+ * StatusBar Component for ftree
+ *
+ * Fixed bottom status bar showing helpful information about the current state.
+ * Displays version, path, file counts, watch status, git status, and keybind hints.
+ *
+ * Features:
+ * - Inverse background for visibility
+ * - Truncated paths for narrow terminals
+ * - Optional keybind hints (second line)
+ * - Watch status indicator
+ * - Git integration indicator
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { VSCODE_THEME } from '../lib/theme.js';
+
+/**
+ * Truncates a path to fit within the available width
+ * Shows the beginning and end of the path with "..." in between if needed
+ *
+ * Examples:
+ * - "./very/long/path/to/project" → ".../path/to/project"
+ * - "./short" → "./short"
+ *
+ * @param {string} path - The path to truncate
+ * @param {number} maxWidth - Maximum width available
+ * @returns {string} Truncated path with ellipsis if needed
+ */
+function truncatePath(path, maxWidth) {
+  if (maxWidth >= path.length) {
+    return path;
+  }
+
+  // Reserve 3 chars for "..." separator
+  // Show at least 10 chars from the end
+  const endLength = Math.min(15, maxWidth - 3);
+  const startLength = Math.max(3, maxWidth - endLength - 3);
+
+  if (startLength + endLength + 3 > maxWidth) {
+    // Path is very short - just truncate with leading ellipsis
+    return '...' + path.slice(Math.max(0, path.length - maxWidth + 3));
+  }
+
+  return path.slice(0, startLength) + '...' + path.slice(path.length - endLength);
+}
+
+/**
+ * Get a shortened path display
+ * For nested paths, shows just the last 2 segments with leading ...
+ * For short paths, shows as-is
+ *
+ * @param {string} path - Full path
+ * @param {number} maxWidth - Maximum available width
+ * @returns {string} Formatted path string
+ */
+function formatPath(path, maxWidth) {
+  const segments = path.split('/');
+  const segmentCount = segments.length;
+
+  // If path is short enough or only has 2-3 segments, show as-is
+  if (path.length <= maxWidth || segmentCount <= 3) {
+    return truncatePath(path, maxWidth);
+  }
+
+  // For deep paths, show first segment ... last 2 segments
+  // e.g., "project/.../src/components" from "project/a/b/c/src/components"
+  const first = segments[0];
+  const lastTwo = segments.slice(-2).join('/');
+  const ellipsisPath = `${first}/.../${lastTwo}`;
+
+  if (ellipsisPath.length <= maxWidth) {
+    return ellipsisPath;
+  }
+
+  return truncatePath(ellipsisPath, maxWidth);
+}
+
+/**
+ * Calculate git status summary from statusMap
+ * Returns a summary string like "clean" or "3M 1A"
+ *
+ * @param {Map<string, string>} statusMap - Map of file paths to git status codes
+ * @returns {{isRepo: boolean, summary: string}} Git repository status and summary
+ */
+export function calculateGitStatus(statusMap) {
+  if (!statusMap || statusMap.size === 0) {
+    return { isRepo: false, summary: '' };
+  }
+
+  // Count each status type
+  const counts = { M: 0, A: 0, D: 0, U: 0, R: 0 };
+  for (const status of statusMap.values()) {
+    if (counts.hasOwnProperty(status)) {
+      counts[status]++;
+    }
+  }
+
+  // Build summary string (non-zero counts only, in priority order)
+  const parts = [];
+  if (counts.D) parts.push(`${counts.D}D`);
+  if (counts.M) parts.push(`${counts.M}M`);
+  if (counts.A) parts.push(`${counts.A}A`);
+  if (counts.U) parts.push(`${counts.U}U`);
+  if (counts.R) parts.push(`${counts.R}R`);
+
+  const summary = parts.length > 0 ? parts.join(' ') : 'clean';
+  return { isRepo: true, summary };
+}
+
+/**
+ * StatusBar Component Props:
+ * @property {string} version - Version string (e.g., "v0.1.0")
+ * @property {string} rootPath - Root directory path
+ * @property {number} fileCount - Total number of files
+ * @property {number} dirCount - Total number of directories
+ * @property {boolean} isWatching - File watcher active status
+ * @property {boolean} gitEnabled - Git integration enabled
+ * @property {boolean} isGitRepo - Whether current directory is a git repo
+ * @property {string} gitSummary - Git status summary (e.g., "clean" or "3M 1A")
+ * @property {boolean} showHelp - Show keybind hints
+ * @property {number} termWidth - Terminal width in columns
+ */
+export function StatusBar({
+  version = 'v0.1.0',
+  rootPath = '.',
+  fileCount = 0,
+  dirCount = 0,
+  isWatching = false,
+  gitEnabled = false,
+  isGitRepo = false,
+  gitSummary = '',
+  showHelp = true,
+  termWidth = 80,
+  iconSet = 'emoji',
+  theme = VSCODE_THEME,
+}) {
+  const finalTheme = theme || VSCODE_THEME;
+
+  const barIcons = (() => {
+    if (iconSet === 'nerd') {
+      return {
+        file: '',
+        folder: '',
+        watch: '',
+        git: '',
+      };
+    }
+    if (iconSet === 'ascii') {
+      return {
+        file: 'F',
+        folder: 'D',
+        watch: 'W',
+        git: 'git',
+      };
+    }
+    // emoji default
+    return {
+      file: '📄',
+      folder: '📁',
+      watch: '👁',
+      git: '🌿',
+    };
+  })();
+
+  const sep = ` ${finalTheme.statusBar.separator} `;
+  const paddingWidth = 2; // paddingX={1}
+
+  const versionText = `ftree ${version}`;
+  const countsText = `${barIcons.file} ${fileCount}  ${barIcons.folder} ${dirCount}`;
+  const watchText = `${barIcons.watch} ${isWatching ? 'Watching' : 'Static'}`;
+  const gitText = gitEnabled && isGitRepo ? `${barIcons.git} ${gitSummary || 'clean'}` : '';
+
+  const fixedSegments = [versionText, countsText, watchText].concat(gitText ? [gitText] : []);
+  const fixedWidth = fixedSegments.reduce((sum, part) => sum + part.length, 0)
+    + (fixedSegments.length /* separators count incl. path */) * sep.length
+    + paddingWidth;
+
+  // Calculate available width for path section
+  const pathMaxWidth = Math.max(8, termWidth - fixedWidth);
+
+  // Format the path to fit
+  const displayPath = formatPath(rootPath, pathMaxWidth);
+
+  return (
+    <Box flexDirection="column" width={termWidth}>
+      {/* Main status line */}
+      <Box
+        width={termWidth}
+        paddingX={1}
+      >
+        <Text color={finalTheme.colors.accent} bold>
+          ftree
+        </Text>
+        <Text color={finalTheme.colors.muted} dimColor>
+          {' '}{version}
+        </Text>
+
+        <Text {...finalTheme.statusBar.separatorStyle}>
+          {sep}
+        </Text>
+        <Text color={finalTheme.colors.fg} bold>
+          {displayPath}
+        </Text>
+
+        <Text {...finalTheme.statusBar.separatorStyle}>
+          {sep}
+        </Text>
+        <Text color={finalTheme.colors.muted}>
+          {countsText}
+        </Text>
+
+        <Text {...finalTheme.statusBar.separatorStyle}>
+          {sep}
+        </Text>
+        <Text color={isWatching ? finalTheme.colors.success : finalTheme.colors.muted}>
+          {watchText}
+        </Text>
+
+        {gitEnabled && isGitRepo && (
+          <>
+            <Text {...finalTheme.statusBar.separatorStyle}>
+              {sep}
+            </Text>
+            <Text color={gitSummary === 'clean' ? finalTheme.colors.success : finalTheme.colors.warning}>
+              {gitText}
+            </Text>
+          </>
+        )}
+      </Box>
+
+      {/* Keybind hints line (optional) */}
+      {showHelp && (
+        <Box
+          width={termWidth}
+          paddingX={1}
+        >
+          <Text {...finalTheme.statusBar.hintStyle}>
+            q quit  ↑↓/jk move  ←→/hl expand  space toggle  r refresh
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Calculate file and directory counts from flatList
+ *
+ * @param {FileNode[]} flatList - Flattened list of FileNodes
+ * @returns {{fileCount: number, dirCount: number}} Count of files and directories
+ */
+export function calculateCounts(flatList = []) {
+  let fileCount = 0;
+  let dirCount = 0;
+
+  // Only count items INSIDE directories (depth > 0), not root-level items
+  for (const node of flatList) {
+    if (node.depth > 0 && node.isDir) {
+      dirCount++;
+    } else if (node.depth > 0) {
+      fileCount++;
+    }
+  }
+
+  return { fileCount, dirCount };
+}
+
+export default StatusBar;

package/src/components/TreeLine.jsx

@@ -0,0 +1,190 @@
+/**
+ * TreeLine Component for ftree
+ *
+ * Renders a single line in the file tree display with:
+ * - Tree connector prefix (│, ├─, └─)
+ * - File/directory icon
+ * - Filename with appropriate color
+ * - Git status badge (right-aligned)
+ * - Cursor highlighting (inverse background)
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+
+import { getIcon, detectFileType } from '../lib/icons.js';
+import { normalizeChangeStatus } from '../lib/changeStatus.js';
+import { getPrefix } from '../lib/connectors.js';
+import { VSCODE_THEME } from '../lib/theme.js';
+
+/**
+ * Truncates a filename to fit within the available width
+ * Adds "…" ellipsis in the middle if truncation is needed
+ *
+ * @param {string} name - The filename to truncate
+ * @param {number} maxWidth - Maximum width available
+ * @returns {string} Truncated filename with ellipsis if needed
+ */
+function truncateFilename(name, maxWidth) {
+  if (maxWidth >= name.length) {
+    return name;
+  }
+
+  // Need to truncate - show first part + … + last part
+  // Reserve 1 char for ellipsis and at least 4 chars for end
+  const endLength = Math.min(4, Math.floor(maxWidth / 2));
+  const startLength = maxWidth - endLength - 1;
+
+  if (startLength <= 0) {
+    // Not enough space - just show the end with ellipsis
+    return '…' + name.slice(Math.max(0, name.length - maxWidth + 1));
+  }
+
+  return name.slice(0, startLength) + '…' + name.slice(name.length - endLength);
+}
+
+/**
+ * Get the color for a git status badge
+ * Colors match git status conventions:
+ * - M (modified) → yellow
+ * - A (added) → green
+ * - D (deleted) → red
+ * - U (untracked) → green
+ * - R (renamed) → cyan
+ *
+ * @param {string} status - Single character git status code
+ * @returns {string} Chalk color name
+ */
+function getGitBadgeColor(status) {
+  const colorMap = {
+    'M': 'yellow',
+    'A': 'green',
+    'D': 'red',
+    'U': 'green',
+    'R': 'cyan',
+  };
+  return colorMap[status] || 'white';
+}
+
+/**
+ * Get icon and color for the A/M change indicator.
+ *
+ * @param {string} status - Change status (A/M)
+ * @returns {{icon: string, color: string}|null} Indicator display config
+ */
+function getChangeIndicator(status) {
+  const normalizedStatus = normalizeChangeStatus(status);
+  if (normalizedStatus === 'M') {
+    return { icon: '●', color: 'yellow' };
+  }
+  if (normalizedStatus === 'A') {
+    return { icon: '✚', color: 'green' };
+  }
+  return null;
+}
+
+/**
+ * TreeLine Component Props:
+ * @property {Object} node - FileNode containing name, isDir, expanded, mode, isSymlink, depth
+ * @property {boolean} isLast - Is this the last child of its parent?
+ * @property {boolean[]} ancestorIsLast - Array of ancestor "is last" states
+ * @property {boolean} isCursor - Is the cursor on this line?
+ * @property {number} termWidth - Terminal width (for truncation)
+ * @property {boolean} showIcons - --no-icons flag (false means hide icons)
+ * @property {string} gitStatus - Git status code (empty, M, A, D, U, R)
+ * @property {string} changeStatus - Combined indicator status (A/M/empty)
+ */
+export function TreeLine({
+  node,
+  isLast = false,
+  ancestorIsLast = [],
+  isCursor = false,
+  termWidth = 80,
+  iconSet = 'emoji',
+  theme = VSCODE_THEME,
+  gitStatus = '',
+  changeStatus = '',
+}) {
+  const finalTheme = theme || VSCODE_THEME;
+
+  // Compute the tree prefix (connectors)
+  const prefix = getPrefix(node, isLast, ancestorIsLast);
+
+  // Detect special file types from mode
+  const fileType = detectFileType(node.mode);
+
+  // Get icon (emoji/nerd/ascii)
+  const icon = getIcon(
+    node.name,
+    node.isDir,
+    node.expanded,
+    node.isSymlink,
+    node.hasError,
+    fileType,
+    { iconSet }
+  );
+  const changeIndicator = getChangeIndicator(changeStatus);
+
+  const baseNameStyle = (() => {
+    if (node.hasError) return finalTheme.tree.error;
+    if (node.isSymlink) return finalTheme.tree.symlink;
+    if (node.name?.startsWith('.')) return finalTheme.tree.hidden;
+    if (node.isDir) return finalTheme.tree.dirName;
+    return finalTheme.tree.fileName;
+  })();
+
+  const cursorStyle = isCursor ? finalTheme.tree.cursor : null;
+  const badgeCursorStyle = cursorStyle?.backgroundColor ? { backgroundColor: cursorStyle.backgroundColor } : null;
+  const connectorStyle = finalTheme.tree.connector;
+
+  // Calculate available width for filename
+  // Reserve space for: prefix + icon + right badges + padding
+  const iconWidth = icon ? 2 : 0; // icon + space
+  const changeIndicatorWidth = changeIndicator ? 3 : 0; // space + indicator + space
+  const gitBadgeWidth = gitStatus ? 3 : 0; // space + status char + space
+  const reservedWidth = prefix.length + iconWidth + changeIndicatorWidth + gitBadgeWidth + 2;
+  const maxFilenameWidth = Math.max(4, termWidth - reservedWidth);
+
+  // Truncate filename if needed
+  const displayName = truncateFilename(node.name, maxFilenameWidth);
+
+  // Build the main content (prefix + icon + filename)
+  const mainContent = (
+    <Box>
+      <Text {...connectorStyle} {...(cursorStyle || {})}>{prefix}</Text>
+      {icon && <Text {...(cursorStyle || {})}>{icon} </Text>}
+      <Text
+        {...baseNameStyle}
+        {...(cursorStyle || {})}
+      >
+        {displayName}
+      </Text>
+    </Box>
+  );
+
+  // Add right-aligned badges if present
+  if (gitStatus || changeIndicator) {
+    return (
+      <Box justifyContent="spaceBetween" width={termWidth}>
+        {mainContent}
+        <Box>
+          {gitStatus && (
+            <Text color={getGitBadgeColor(gitStatus)} {...(badgeCursorStyle || {})}>
+              {' '}{gitStatus}{' '}
+            </Text>
+          )}
+          {changeIndicator && (
+            <Text color={changeIndicator.color} {...(badgeCursorStyle || {})}>
+              {' '}{changeIndicator.icon}{' '}
+            </Text>
+          )}
+        </Box>
+      </Box>
+    );
+  }
+
+  // No git badge - just return main content
+  return mainContent;
+}
+
+export default TreeLine;

package/src/components/TreeView.jsx

@@ -0,0 +1,129 @@
+/**
+ * TreeView Component for ftree
+ *
+ * Main tree view component that renders the file tree with viewport support.
+ * Handles slicing the visible nodes, computing connector states, and managing
+ * the tree visualization.
+ *
+ * Features:
+ * - Viewport rendering (only visible lines are rendered)
+ * - Tree connector state computation for proper tree structure
+ * - Empty directory handling
+ * - Cursor highlighting support
+ * - Icon display toggle (--no-icons flag)
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+
+import { TreeLine } from './TreeLine.jsx';
+import { computeAncestorPrefixes } from '../lib/connectors.js';
+
+/**
+ * Determines if a node at the given index is a last child of its parent.
+ *
+ * A node is a last child if there are no siblings following it in the
+ * flattened list before the depth decreases.
+ *
+ * @param {FileNode[]} flatList - Flattened list of FileNodes
+ * @param {number} index - Index of the node to check
+ * @returns {boolean} True if this node is the last child of its parent
+ */
+function isLastChild(flatList, index) {
+  if (index >= flatList.length - 1) {
+    return true;
+  }
+
+  const currentNode = flatList[index];
+  const nextNode = flatList[index + 1];
+
+  // If next node is shallower or at same depth (not a child), this is a last child
+  // If next node is deeper (a child), this is NOT a last child
+  return nextNode.depth <= currentNode.depth;
+}
+
+/**
+ * Empty directory message component
+ * Displays a centered, dimmed message when the tree is empty
+ */
+function EmptyDirectory() {
+  return (
+    <Box justifyContent="center" paddingY={1}>
+      <Text dimColor>(empty directory)</Text>
+    </Box>
+  );
+}
+
+/**
+ * TreeView Component Props:
+ * @property {FileNode[]} flatList - Flattened visible nodes from useTree
+ * @property {number} cursor - Current cursor index (in flatList coordinates)
+ * @property {number} viewportStart - First visible line index (in flatList coordinates)
+ * @property {number} viewportHeight - Number of visible lines
+ * @property {number} termWidth - Terminal width in columns
+ * @property {'emoji'|'nerd'|'ascii'} iconSet - Icon set selection
+ * @property {object} theme - Theme tokens
+ */
+export function TreeView({
+  flatList = [],
+  cursor = 0,
+  viewportStart = 0,
+  viewportHeight = 20,
+  termWidth = 80,
+  iconSet = 'emoji',
+  theme = null,
+}) {
+  // Handle empty directory case
+  if (flatList.length === 0) {
+    return <EmptyDirectory />;
+  }
+
+  // Compute the visible slice of the flat list
+  // Ensure we don't go out of bounds
+  const safeViewportStart = Math.max(0, Math.min(viewportStart, flatList.length - 1));
+  const safeViewportHeight = Math.min(viewportHeight, flatList.length - safeViewportStart);
+  const visibleNodes = flatList.slice(safeViewportStart, safeViewportStart + safeViewportHeight);
+
+  // DEBUG: Log what we're rendering
+  if (process.env.FTREE_DEBUG) {
+    console.log(`[DEBUG] TreeView rendering: flatList.length=${flatList.length}, viewportHeight=${viewportHeight}`);
+    console.log(`[DEBUG] TreeView: safeViewportStart=${safeViewportStart}, safeViewportHeight=${safeViewportHeight}`);
+    console.log(`[DEBUG] TreeView: visibleNodes count=${visibleNodes.length}`);
+  }
+
+  return (
+    <Box flexDirection="column" width={termWidth}>
+      {visibleNodes.map((node, visibleIndex) => {
+        // Calculate the actual index in the flat list
+        const actualIndex = safeViewportStart + visibleIndex;
+
+        // Determine if this node is the last child of its parent
+        const isLast = isLastChild(flatList, actualIndex);
+
+        // Compute ancestor prefixes for connector state
+        // ancestorIsLast array indicates which ancestors are last children
+        const ancestorIsLast = computeAncestorPrefixes(flatList, actualIndex);
+
+        // Check if cursor is on this line
+        const isCursor = actualIndex === cursor;
+
+        return (
+          <TreeLine
+            key={node.path}
+            node={node}
+            isLast={isLast}
+            ancestorIsLast={ancestorIsLast}
+            isCursor={isCursor}
+            termWidth={termWidth}
+            iconSet={iconSet}
+            theme={theme}
+            gitStatus={node.gitStatus || ''}
+            changeStatus={node.changeStatus || ''}
+          />
+        );
+      })}
+    </Box>
+  );
+}
+
+export default TreeView;

package/src/hooks/useChangedFiles.js

@@ -0,0 +1,82 @@
+/**
+ * useChangedFiles - Track recently changed files for visual highlighting
+ *
+ * Provides a map of file paths to A/M status values that changed recently
+ * due to file watcher events. Files are automatically removed
+ * from the changed set after a timeout period.
+ */
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+import {
+  mergeChangeStatus,
+  normalizeChangeStatus,
+} from '../lib/changeStatus.js';
+
+// How long to show the "changed" indicator (in milliseconds)
+// Keep these fairly long to ensure users actually notice new items,
+// especially on filesystems where watcher events arrive in bursts (add -> change).
+const MODIFY_HIGHLIGHT_DURATION = 60000; // 60 seconds
+const ADD_HIGHLIGHT_DURATION = 120000; // 120 seconds (helps empty new folders with no git signal)
+
+export function useChangedFiles() {
+  const [changedFiles, setChangedFiles] = useState(new Map());
+  const timeoutMapRef = useRef(new Map());
+
+  const markChanged = useCallback((filePath, status = 'M') => {
+    const normalizedStatus = normalizeChangeStatus(status);
+    if (!filePath || !normalizedStatus) {
+      return;
+    }
+
+    let mergedStatus = normalizedStatus;
+    setChangedFiles(prev => {
+      const next = new Map(prev);
+      const existingStatus = next.get(filePath) || '';
+      mergedStatus = mergeChangeStatus(existingStatus, normalizedStatus);
+      next.set(filePath, mergedStatus);
+      return next;
+    });
+
+    const existingTimer = timeoutMapRef.current.get(filePath);
+    if (existingTimer) {
+      clearTimeout(existingTimer);
+    }
+
+    const durationMs = mergedStatus === 'A'
+      ? ADD_HIGHLIGHT_DURATION
+      : MODIFY_HIGHLIGHT_DURATION;
+
+    const timer = setTimeout(() => {
+      setChangedFiles(prev => {
+        if (!prev.has(filePath)) {
+          return prev;
+        }
+
+        const next = new Map(prev);
+        next.delete(filePath);
+        return next;
+      });
+      timeoutMapRef.current.delete(filePath);
+    }, durationMs);
+
+    timeoutMapRef.current.set(filePath, timer);
+  }, []);
+
+  // Cleanup all pending timers on unmount
+  useEffect(() => {
+    return () => {
+      for (const timer of timeoutMapRef.current.values()) {
+        clearTimeout(timer);
+      }
+      timeoutMapRef.current.clear();
+    };
+  }, []);
+
+  return {
+    changedFiles,
+    markChanged,
+    getStatus: (filePath) => normalizeChangeStatus(changedFiles.get(filePath) || ''),
+  };
+}
+
+export default useChangedFiles;