ftreeview 0.1.3 → 0.1.5

package/README.md

@@ -13,6 +13,7 @@ A lightweight, interactive CLI file explorer with live monitoring and git awaren
 - **Colored File Types** - Syntax-highlighted file extensions (JS, TS, Python, Go, Rust, etc.)
 - **Smart Icons** - Nerd Font devicons (optional) with emoji fallback; ASCII mode supported
 - **Keyboard Navigation** - Full keyboard control with arrow keys or vim bindings
+- **Optional Size Display** - Show selected file size in status bar when needed
 - **Handles Large Directories** - Efficient traversal with viewport scrolling
 - **Terminal Resize Support** - Adapts to terminal window size changes
 - **Clean Exit** - Graceful shutdown with proper terminal state restoration
@@ -70,6 +71,7 @@ ftreeview [path] [options]
 | `--icon-set <emoji\|nerd\|ascii>` | Choose icon set (default: emoji). You can also set `FTREE_ICON_SET`. |
 | `--theme <vscode>` | UI theme (default: vscode). You can also set `FTREE_THEME`. |
 | `--no-watch` | Disable file watching for static view |
+| `--show-size` | Show selected file size in status bar (non-recursive, lightweight) |
 
 ### Examples
 
@@ -94,6 +96,9 @@ ftreeview --no-git
 
  # Static view (no live watching)
  ftreeview --no-watch
+
+ # Show selected file size in status bar
+ ftreeview --show-size
 ```
 
 ## Environment Variables
@@ -116,6 +121,7 @@ ftreeview --no-git
 | `g` | Jump to first item |
 | `G` | Jump to last item |
 | `r` | Refresh tree |
+| `?` | Toggle keybinding hints |
 | `q` / `Ctrl+C` | Quit |
 
 ## Screenshots

package/dist/cli.js

@@ -321,6 +321,50 @@ function formatPath(path, maxWidth) {
   }
   return truncatePath(ellipsisPath, maxWidth);
 }
+function getEventMessageColor(eventType) {
+  if (eventType === "add" || eventType === "addDir") {
+    return "green";
+  }
+  if (eventType === "change") {
+    return "yellow";
+  }
+  if (eventType === "unlink" || eventType === "unlinkDir") {
+    return "magenta";
+  }
+  return "magenta";
+}
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) {
+    return "";
+  }
+  if (bytes < 1024) {
+    return `${bytes}B`;
+  }
+  const units = ["KB", "MB", "GB", "TB"];
+  let value = bytes / 1024;
+  let unitIndex = 0;
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex++;
+  }
+  const decimals = value >= 10 ? 0 : 1;
+  return `${value.toFixed(decimals)}${units[unitIndex]}`;
+}
+function getWatchDisplay({ isWatching, watchMode, watchError, watchIcon }) {
+  if (watchMode === "off") {
+    return { text: `${watchIcon} Static`, tone: "muted" };
+  }
+  if (watchError) {
+    return { text: `${watchIcon} Paused`, tone: "warning" };
+  }
+  if (!isWatching) {
+    return { text: `${watchIcon} Starting`, tone: "muted" };
+  }
+  if (watchMode === "polling") {
+    return { text: `${watchIcon} Watching (poll)`, tone: "warning" };
+  }
+  return { text: `${watchIcon} Watching`, tone: "success" };
+}
 function calculateGitStatus(statusMap) {
   if (!statusMap || statusMap.size === 0) {
     return { isRepo: false, summary: "" };
@@ -346,10 +390,18 @@ function StatusBar({
   fileCount = 0,
   dirCount = 0,
   isWatching = false,
+  watchMode = "native",
+  watchError = false,
   gitEnabled = false,
   isGitRepo = false,
   gitSummary = "",
   showHelp = true,
+  selectedPath = "",
+  showSize = false,
+  selectedIsDir = false,
+  selectedSize = void 0,
+  eventMessage = "",
+  eventType = "",
   termWidth = 80,
   iconSet = "emoji",
   theme = VSCODE_THEME
@@ -383,9 +435,19 @@ function StatusBar({
   const paddingWidth = 2;
   const versionText = `ftreeview ${version}`;
   const countsText = `${barIcons.file} ${fileCount}  ${barIcons.folder} ${dirCount}`;
-  const watchText = `${barIcons.watch} ${isWatching ? "Watching" : "Static"}`;
+  const watchDisplay = getWatchDisplay({
+    isWatching,
+    watchMode,
+    watchError,
+    watchIcon: barIcons.watch
+  });
+  const watchText = watchDisplay.text;
+  const watchColor = watchDisplay.tone === "success" ? finalTheme.colors.success : watchDisplay.tone === "warning" ? finalTheme.colors.warning : finalTheme.colors.muted;
   const gitText = gitEnabled && isGitRepo ? `${barIcons.git} ${gitSummary || "clean"}` : "";
-  const fixedSegments = [versionText, countsText, watchText].concat(gitText ? [gitText] : []);
+  const sizeValueText = !showSize ? "" : selectedIsDir ? "--" : formatBytes(selectedSize);
+  const showSizeText = Boolean(showSize && sizeValueText);
+  const sizeText = showSizeText ? `size ${sizeValueText}` : "";
+  const fixedSegments = [versionText, countsText, watchText].concat(showSizeText ? [sizeText] : []).concat(gitText ? [gitText] : []);
   const fixedWidth = fixedSegments.reduce((sum, part) => sum + part.length, 0) + fixedSegments.length * sep4.length + paddingWidth;
   const pathMaxWidth = Math.max(8, termWidth - fixedWidth);
   const displayPath = formatPath(rootPath, pathMaxWidth);
@@ -406,7 +468,11 @@ function StatusBar({
           /* @__PURE__ */ jsx3(Text3, { ...finalTheme.statusBar.separatorStyle, children: sep4 }),
           /* @__PURE__ */ jsx3(Text3, { color: finalTheme.colors.muted, children: countsText }),
           /* @__PURE__ */ jsx3(Text3, { ...finalTheme.statusBar.separatorStyle, children: sep4 }),
-          /* @__PURE__ */ jsx3(Text3, { color: isWatching ? finalTheme.colors.success : finalTheme.colors.muted, children: watchText }),
+          /* @__PURE__ */ jsx3(Text3, { color: watchColor, children: watchText }),
+          showSizeText && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx3(Text3, { ...finalTheme.statusBar.separatorStyle, children: sep4 }),
+            /* @__PURE__ */ jsx3(Text3, { color: finalTheme.colors.muted, children: sizeText })
+          ] }),
           gitEnabled && isGitRepo && /* @__PURE__ */ jsxs2(Fragment, { children: [
             /* @__PURE__ */ jsx3(Text3, { ...finalTheme.statusBar.separatorStyle, children: sep4 }),
             /* @__PURE__ */ jsx3(Text3, { color: gitSummary === "clean" ? finalTheme.colors.success : finalTheme.colors.warning, children: gitText })
@@ -419,7 +485,29 @@ function StatusBar({
       {
         width: termWidth,
         paddingX: 1,
-        children: /* @__PURE__ */ jsx3(Text3, { ...finalTheme.statusBar.hintStyle, children: "q quit  \u2191\u2193/jk move  \u2190\u2192/hl expand  space toggle  r refresh" })
+        children: /* @__PURE__ */ jsx3(Text3, { ...finalTheme.statusBar.hintStyle, children: "q quit  \u2191\u2193/jk move  \u2190\u2192/hl expand  space toggle  r refresh  ? help" })
+      }
+    ),
+    selectedPath && /* @__PURE__ */ jsxs2(
+      Box3,
+      {
+        width: termWidth,
+        paddingX: 1,
+        children: [
+          /* @__PURE__ */ jsxs2(Text3, { color: finalTheme.colors.muted, children: [
+            "selected",
+            " "
+          ] }),
+          /* @__PURE__ */ jsx3(Text3, { color: finalTheme.colors.fg, children: formatPath(selectedPath, Math.max(8, termWidth - 11)) })
+        ]
+      }
+    ),
+    eventMessage && /* @__PURE__ */ jsx3(
+      Box3,
+      {
+        width: termWidth,
+        paddingX: 1,
+        children: /* @__PURE__ */ jsx3(Text3, { color: getEventMessageColor(eventType), bold: true, children: eventMessage })
       }
     )
   ] });
@@ -921,7 +1009,7 @@ function useTree(rootPath, options = {}) {
 import { useState as useState2, useEffect, useCallback as useCallback2 } from "react";
 import { useInput, useApp } from "ink";
 var VIEWPORT_MARGIN = 3;
-function useNavigation(flatList = [], rebuildTree, refreshFlatList = null, ensureChildrenLoaded = null) {
+function useNavigation(flatList = [], rebuildTree, refreshFlatList = null, ensureChildrenLoaded = null, onToggleHelp = null) {
   const { exit } = useApp();
   const viewportHeight = process.stdout.rows - 2;
   const [cursor, setCursor] = useState2(0);
@@ -1025,6 +1113,8 @@ function useNavigation(flatList = [], rebuildTree, refreshFlatList = null, ensur
       jumpToBottom();
     } else if (input === "r") {
       refresh();
+    } else if (input === "?" && typeof onToggleHelp === "function") {
+      onToggleHelp();
     }
   });
   useEffect(() => {
@@ -1302,6 +1392,8 @@ function shouldUsePolling(rootPath) {
 function useWatcher(rootPath, onTreeChange, options = {}) {
   const debounceMs = options.debounceMs ?? DEFAULT_CONFIG.debounceDelay;
   const [isWatching, setIsWatching] = useState4(false);
+  const [watchMode, setWatchMode] = useState4(options.noWatch ? "off" : "native");
+  const [watchError, setWatchError] = useState4(false);
   const watcherRef = useRef3(null);
   const onTreeChangeRef = useRef3(onTreeChange);
   const mountedRef = useRef3(true);
@@ -1316,11 +1408,15 @@ function useWatcher(rootPath, onTreeChange, options = {}) {
     mountedRef.current = true;
     if (options.noWatch || !rootPath) {
       setIsWatching(false);
+      setWatchMode("off");
+      setWatchError(false);
       return () => {
         mountedRef.current = false;
       };
     }
     const usePolling = shouldUsePolling(rootPath);
+    setWatchMode(usePolling ? "polling" : "native");
+    setWatchError(false);
     const watcher = chokidar.watch(rootPath, {
       ignored: ignoredPathRef.current,
       persistent: true,
@@ -1363,9 +1459,11 @@ function useWatcher(rootPath, onTreeChange, options = {}) {
       debounceTimerRef.current = setTimeout(flushPendingChange, debounceMs);
     });
     watcher.on("error", () => {
+      setWatchError(true);
       setIsWatching(false);
     });
     watcher.on("ready", () => {
+      setWatchError(false);
       setIsWatching(true);
     });
     return () => {
@@ -1383,7 +1481,7 @@ function useWatcher(rootPath, onTreeChange, options = {}) {
       setIsWatching(false);
     };
   }, [rootPath, options.noWatch, debounceMs]);
-  return { isWatching };
+  return { isWatching, watchMode, watchError };
 }
 
 // src/hooks/useChangedFiles.js
@@ -1474,22 +1572,40 @@ function setupCleanExit() {
     process.off("SIGINT", onSigint);
   };
 }
+function formatWatcherEventMessage(event, relativePath) {
+  if (!relativePath) {
+    return "";
+  }
+  if (event === "add") return `=> File created at ${relativePath}`;
+  if (event === "change") return `=> File modified at ${relativePath}`;
+  if (event === "addDir") return `=> Folder created at ${relativePath}`;
+  if (event === "unlink") return `=> File deleted at ${relativePath}`;
+  if (event === "unlinkDir") return `=> Folder deleted at ${relativePath}`;
+  return "";
+}
 function App({ rootPath, options = {}, version }) {
   const rootAbsPath = resolve2(rootPath);
   const iconSet = resolveIconSet({ cliIconSet: options.iconSet, noIcons: options.noIcons });
   const theme = getTheme(resolveThemeName({ cliTheme: options.theme }));
   const [selectedPath, setSelectedPath] = useState6(null);
+  const [recentEventMessage, setRecentEventMessage] = useState6("");
+  const [recentEventType, setRecentEventType] = useState6("");
+  const [showHelp, setShowHelp] = useState6(options.help !== false);
   useEffect5(() => setupCleanExit(), []);
   const { tree, flatList, refreshFlatList, rebuildTree, ensureChildrenLoaded } = useTree(rootPath, options);
   const { statusMap, pathStatusMap, isGitRepo, refresh: refreshGit } = useGitStatus(
     rootPath,
     !options.noGit
   );
+  const toggleHelp = useCallback5(() => {
+    setShowHelp((prev) => !prev);
+  }, []);
   const { cursor, viewportStart, setCursor } = useNavigation(
     flatList,
     rebuildTree,
     refreshFlatList,
-    ensureChildrenLoaded
+    ensureChildrenLoaded,
+    toggleHelp
   );
   const cursorRef = useRef5(cursor);
   cursorRef.current = cursor;
@@ -1554,6 +1670,8 @@ function App({ rootPath, options = {}, version }) {
   const handleTreeChange = useCallback5((eventsOrEvent, watchPath) => {
     const batch = Array.isArray(eventsOrEvent) ? eventsOrEvent : [{ event: eventsOrEvent, path: watchPath }];
     let hasStructuralChange = false;
+    let latestEventMessage = "";
+    let latestEventType = "";
     for (const item of batch) {
       if (!item) continue;
       if (item.event === "add" || item.event === "addDir" || item.event === "unlink" || item.event === "unlinkDir") {
@@ -1561,10 +1679,19 @@ function App({ rootPath, options = {}, version }) {
       }
       const changeStatus = mapWatcherEventToChangeStatus(item.event);
       const relativePath = toTreeRelativePath(item.path);
+      const eventMessage = formatWatcherEventMessage(item.event, relativePath);
+      if (eventMessage) {
+        latestEventMessage = eventMessage;
+        latestEventType = item.event;
+      }
       if (changeStatus && relativePath) {
         markChanged(relativePath, changeStatus);
       }
     }
+    if (latestEventMessage) {
+      setRecentEventMessage(latestEventMessage);
+      setRecentEventType(latestEventType);
+    }
     if (hasStructuralChange) {
       rebuildTree(true);
     }
@@ -1576,11 +1703,12 @@ function App({ rootPath, options = {}, version }) {
       }
     }
   }, [rebuildTree, isGitRepo, refreshGit, markChanged, toTreeRelativePath]);
-  const { isWatching } = useWatcher(rootPath, handleTreeChange, {
+  const { isWatching, watchMode, watchError } = useWatcher(rootPath, handleTreeChange, {
     noWatch: options.noWatch
   });
-  const helpEnabled = options.help !== false;
-  const statusBarHeight = helpEnabled ? 2 : 1;
+  const selectedNode = cursor >= 0 && cursor < flatList.length ? flatList[cursor] : null;
+  const selectedContextPath = selectedNode?.path || selectedPath || "";
+  const statusBarHeight = 1 + (showHelp ? 1 : 0) + (selectedContextPath ? 1 : 0) + (recentEventMessage ? 1 : 0);
   const viewportHeight = termSize.height - statusBarHeight;
   const termWidth = termSize.width;
   const { fileCount, dirCount } = calculateCounts(flatList);
@@ -1606,10 +1734,18 @@ function App({ rootPath, options = {}, version }) {
         fileCount,
         dirCount,
         isWatching,
+        watchMode,
+        watchError,
         gitEnabled: !options.noGit,
         isGitRepo,
         gitSummary,
-        showHelp: helpEnabled,
+        showHelp,
+        selectedPath: selectedContextPath,
+        showSize: Boolean(options.showSize),
+        selectedIsDir: Boolean(selectedNode?.isDir),
+        selectedSize: selectedNode?.size,
+        eventMessage: recentEventMessage,
+        eventType: recentEventType,
         termWidth,
         iconSet,
         theme
@@ -1638,6 +1774,7 @@ OPTIONS:
       --no-git  Disable git integration
       --no-icons Use ASCII icons (disable emoji/nerd icons)
       --no-watch Disable file watching
+      --show-size Show selected file size in the status bar (lightweight, non-recursive)
       --icon-set <emoji|nerd|ascii>  Icon set (default: emoji). You can also set FTREE_ICON_SET.
       --theme <vscode>  UI theme (default: vscode). You can also set FTREE_THEME.
 
@@ -1695,6 +1832,7 @@ function parseArgs() {
       noIcons: false,
       noGit: false,
       noWatch: false,
+      showSize: false,
       help: true,
       // show help line by default
       iconSet: void 0,
@@ -1723,6 +1861,10 @@ function parseArgs() {
       result.options.noWatch = true;
       continue;
     }
+    if (arg === "--show-size") {
+      result.options.showSize = true;
+      continue;
+    }
     if (arg === "--no-help") {
       result.options.help = false;
       continue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ftreeview",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Terminal file explorer with git awareness and live updates",
   "type": "module",
   "main": "src/index.js",

package/src/App.jsx

@@ -52,6 +52,18 @@ function setupCleanExit() {
   };
 }
 
+function formatWatcherEventMessage(event, relativePath) {
+  if (!relativePath) {
+    return '';
+  }
+  if (event === 'add') return `=> File created at ${relativePath}`;
+  if (event === 'change') return `=> File modified at ${relativePath}`;
+  if (event === 'addDir') return `=> Folder created at ${relativePath}`;
+  if (event === 'unlink') return `=> File deleted at ${relativePath}`;
+  if (event === 'unlinkDir') return `=> Folder deleted at ${relativePath}`;
+  return '';
+}
+
 /**
  * App Component Props
  * @property {string} rootPath - Root directory path to explore
@@ -64,6 +76,9 @@ export default function App({ rootPath, options = {}, version }) {
 
   // Track selected path to preserve cursor position across rebuilds
   const [selectedPath, setSelectedPath] = useState(null);
+  const [recentEventMessage, setRecentEventMessage] = useState('');
+  const [recentEventType, setRecentEventType] = useState('');
+  const [showHelp, setShowHelp] = useState(options.help !== false);
 
   // Setup clean exit handler - ensures proper terminal state on exit
   useEffect(() => setupCleanExit(), []);
@@ -77,12 +92,17 @@ export default function App({ rootPath, options = {}, version }) {
     !options.noGit
   );
 
+  const toggleHelp = useCallback(() => {
+    setShowHelp((prev) => !prev);
+  }, []);
+
   // Get navigation state (cursor, viewport)
   const { cursor, viewportStart, setCursor } = useNavigation(
     flatList,
     rebuildTree,
     refreshFlatList,
-    ensureChildrenLoaded
+    ensureChildrenLoaded,
+    toggleHelp
   );
   const cursorRef = useRef(cursor);
   cursorRef.current = cursor;
@@ -179,6 +199,8 @@ export default function App({ rootPath, options = {}, version }) {
       : [{ event: eventsOrEvent, path: watchPath }];
 
     let hasStructuralChange = false;
+    let latestEventMessage = '';
+    let latestEventType = '';
 
     for (const item of batch) {
       if (!item) continue;
@@ -187,12 +209,22 @@ export default function App({ rootPath, options = {}, version }) {
       }
       const changeStatus = mapWatcherEventToChangeStatus(item.event);
       const relativePath = toTreeRelativePath(item.path);
+      const eventMessage = formatWatcherEventMessage(item.event, relativePath);
+      if (eventMessage) {
+        latestEventMessage = eventMessage;
+        latestEventType = item.event;
+      }
 
       if (changeStatus && relativePath) {
         markChanged(relativePath, changeStatus);
       }
     }
 
+    if (latestEventMessage) {
+      setRecentEventMessage(latestEventMessage);
+      setRecentEventType(latestEventType);
+    }
+
     if (hasStructuralChange) {
       rebuildTree(true);
     }
@@ -207,14 +239,15 @@ export default function App({ rootPath, options = {}, version }) {
     }
   }, [rebuildTree, isGitRepo, refreshGit, markChanged, toTreeRelativePath]);
 
-  const { isWatching } = useWatcher(rootPath, handleTreeChange, {
+  const { isWatching, watchMode, watchError } = useWatcher(rootPath, handleTreeChange, {
     noWatch: options.noWatch,
   });
 
   // Calculate viewport dimensions
-  // Reserve space: 1 line for status bar (2 if help enabled)
-  const helpEnabled = options.help !== false; // Show help by default
-  const statusBarHeight = helpEnabled ? 2 : 1;
+  // Reserve space: 1 main status line + optional hints line + optional selection line + optional event line.
+  const selectedNode = (cursor >= 0 && cursor < flatList.length) ? flatList[cursor] : null;
+  const selectedContextPath = selectedNode?.path || selectedPath || '';
+  const statusBarHeight = 1 + (showHelp ? 1 : 0) + (selectedContextPath ? 1 : 0) + (recentEventMessage ? 1 : 0);
   const viewportHeight = termSize.height - statusBarHeight;
   const termWidth = termSize.width;
 
@@ -246,10 +279,18 @@ export default function App({ rootPath, options = {}, version }) {
         fileCount={fileCount}
         dirCount={dirCount}
         isWatching={isWatching}
+        watchMode={watchMode}
+        watchError={watchError}
         gitEnabled={!options.noGit}
         isGitRepo={isGitRepo}
         gitSummary={gitSummary}
-        showHelp={helpEnabled}
+        showHelp={showHelp}
+        selectedPath={selectedContextPath}
+        showSize={Boolean(options.showSize)}
+        selectedIsDir={Boolean(selectedNode?.isDir)}
+        selectedSize={selectedNode?.size}
+        eventMessage={recentEventMessage}
+        eventType={recentEventType}
         termWidth={termWidth}
         iconSet={iconSet}
         theme={theme}

package/src/cli.js

@@ -39,6 +39,7 @@ OPTIONS:
       --no-git  Disable git integration
       --no-icons Use ASCII icons (disable emoji/nerd icons)
       --no-watch Disable file watching
+      --show-size Show selected file size in the status bar (lightweight, non-recursive)
       --icon-set <emoji|nerd|ascii>  Icon set (default: emoji). You can also set FTREE_ICON_SET.
       --theme <vscode>  UI theme (default: vscode). You can also set FTREE_THEME.
 
@@ -118,6 +119,7 @@ function parseArgs() {
       noIcons: false,
       noGit: false,
       noWatch: false,
+      showSize: false,
       help: true, // show help line by default
       iconSet: undefined,
       theme: undefined,
@@ -148,6 +150,10 @@ function parseArgs() {
       result.options.noWatch = true;
       continue;
     }
+    if (arg === '--show-size') {
+      result.options.showSize = true;
+      continue;
+    }
     if (arg === '--no-help') {
       result.options.help = false;
       continue;

package/src/components/StatusBar.jsx

@@ -77,6 +77,53 @@ function formatPath(path, maxWidth) {
   return truncatePath(ellipsisPath, maxWidth);
 }
 
+function getEventMessageColor(eventType) {
+  if (eventType === 'add' || eventType === 'addDir') {
+    return 'green';
+  }
+  if (eventType === 'change') {
+    return 'yellow';
+  }
+  if (eventType === 'unlink' || eventType === 'unlinkDir') {
+    return 'magenta';
+  }
+  return 'magenta';
+}
+
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) {
+    return '';
+  }
+  if (bytes < 1024) {
+    return `${bytes}B`;
+  }
+  const units = ['KB', 'MB', 'GB', 'TB'];
+  let value = bytes / 1024;
+  let unitIndex = 0;
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex++;
+  }
+  const decimals = value >= 10 ? 0 : 1;
+  return `${value.toFixed(decimals)}${units[unitIndex]}`;
+}
+
+function getWatchDisplay({ isWatching, watchMode, watchError, watchIcon }) {
+  if (watchMode === 'off') {
+    return { text: `${watchIcon} Static`, tone: 'muted' };
+  }
+  if (watchError) {
+    return { text: `${watchIcon} Paused`, tone: 'warning' };
+  }
+  if (!isWatching) {
+    return { text: `${watchIcon} Starting`, tone: 'muted' };
+  }
+  if (watchMode === 'polling') {
+    return { text: `${watchIcon} Watching (poll)`, tone: 'warning' };
+  }
+  return { text: `${watchIcon} Watching`, tone: 'success' };
+}
+
 /**
  * Calculate git status summary from statusMap
  * Returns a summary string like "clean" or "3M 1A"
@@ -116,10 +163,18 @@ export function calculateGitStatus(statusMap) {
  * @property {number} fileCount - Total number of files
  * @property {number} dirCount - Total number of directories
  * @property {boolean} isWatching - File watcher active status
+ * @property {'native'|'polling'|'off'} watchMode - File watcher mode
+ * @property {boolean} watchError - Watcher error state
  * @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 {string} selectedPath - Currently selected tree path
+ * @property {boolean} showSize - Show selected file size in status bar
+ * @property {boolean} selectedIsDir - Whether selected node is a directory
+ * @property {number|undefined} selectedSize - Selected node size in bytes
+ * @property {string} eventMessage - Latest filesystem event message
+ * @property {string} eventType - Latest filesystem event type
  * @property {number} termWidth - Terminal width in columns
  */
 export function StatusBar({
@@ -128,10 +183,18 @@ export function StatusBar({
   fileCount = 0,
   dirCount = 0,
   isWatching = false,
+  watchMode = 'native',
+  watchError = false,
   gitEnabled = false,
   isGitRepo = false,
   gitSummary = '',
   showHelp = true,
+  selectedPath = '',
+  showSize = false,
+  selectedIsDir = false,
+  selectedSize = undefined,
+  eventMessage = '',
+  eventType = '',
   termWidth = 80,
   iconSet = 'emoji',
   theme = VSCODE_THEME,
@@ -169,10 +232,26 @@ export function StatusBar({
 
   const versionText = `ftreeview ${version}`;
   const countsText = `${barIcons.file} ${fileCount}  ${barIcons.folder} ${dirCount}`;
-  const watchText = `${barIcons.watch} ${isWatching ? 'Watching' : 'Static'}`;
+  const watchDisplay = getWatchDisplay({
+    isWatching,
+    watchMode,
+    watchError,
+    watchIcon: barIcons.watch,
+  });
+  const watchText = watchDisplay.text;
+  const watchColor = watchDisplay.tone === 'success'
+    ? finalTheme.colors.success
+    : watchDisplay.tone === 'warning'
+      ? finalTheme.colors.warning
+      : finalTheme.colors.muted;
   const gitText = gitEnabled && isGitRepo ? `${barIcons.git} ${gitSummary || 'clean'}` : '';
+  const sizeValueText = !showSize ? '' : (selectedIsDir ? '--' : formatBytes(selectedSize));
+  const showSizeText = Boolean(showSize && sizeValueText);
+  const sizeText = showSizeText ? `size ${sizeValueText}` : '';
 
-  const fixedSegments = [versionText, countsText, watchText].concat(gitText ? [gitText] : []);
+  const fixedSegments = [versionText, countsText, watchText]
+    .concat(showSizeText ? [sizeText] : [])
+    .concat(gitText ? [gitText] : []);
   const fixedWidth = fixedSegments.reduce((sum, part) => sum + part.length, 0)
     + (fixedSegments.length /* separators count incl. path */) * sep.length
     + paddingWidth;
@@ -214,10 +293,21 @@ export function StatusBar({
         <Text {...finalTheme.statusBar.separatorStyle}>
           {sep}
         </Text>
-        <Text color={isWatching ? finalTheme.colors.success : finalTheme.colors.muted}>
+        <Text color={watchColor}>
           {watchText}
         </Text>
 
+        {showSizeText && (
+          <>
+            <Text {...finalTheme.statusBar.separatorStyle}>
+              {sep}
+            </Text>
+            <Text color={finalTheme.colors.muted}>
+              {sizeText}
+            </Text>
+          </>
+        )}
+
         {gitEnabled && isGitRepo && (
           <>
             <Text {...finalTheme.statusBar.separatorStyle}>
@@ -230,14 +320,38 @@ export function StatusBar({
         )}
       </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
+            q quit  ↑↓/jk move  ←→/hl expand  space toggle  r refresh  ? help
+          </Text>
+        </Box>
+      )}
+
+      {selectedPath && (
+        <Box
+          width={termWidth}
+          paddingX={1}
+        >
+          <Text color={finalTheme.colors.muted}>
+            selected{' '}
+          </Text>
+          <Text color={finalTheme.colors.fg}>
+            {formatPath(selectedPath, Math.max(8, termWidth - 11))}
+          </Text>
+        </Box>
+      )}
+
+      {eventMessage && (
+        <Box
+          width={termWidth}
+          paddingX={1}
+        >
+          <Text color={getEventMessageColor(eventType)} bold>
+            {eventMessage}
           </Text>
         </Box>
       )}

package/src/hooks/useNavigation.js

@@ -20,9 +20,16 @@ const VIEWPORT_MARGIN = 3; // Keep cursor 3 lines from viewport edges
  * @param {Function} rebuildTree - Callback to rebuild tree with modified nodes
  * @param {Function|null} refreshFlatList - Callback to refresh visible list without full rebuild
  * @param {Function|null} ensureChildrenLoaded - Callback to lazy-load directory children when expanding
+ * @param {Function|null} onToggleHelp - Callback to toggle help hints
  * @returns {{cursor: number, viewportStart: number, exit: Function, setCursorByPath: Function, setCursor: Function}} Navigation state
  */
-export function useNavigation(flatList = [], rebuildTree, refreshFlatList = null, ensureChildrenLoaded = null) {
+export function useNavigation(
+  flatList = [],
+  rebuildTree,
+  refreshFlatList = null,
+  ensureChildrenLoaded = null,
+  onToggleHelp = null
+) {
   const { exit } = useApp();
 
   // Calculate viewport height (terminal height minus header and status bar)
@@ -202,6 +209,8 @@ export function useNavigation(flatList = [], rebuildTree, refreshFlatList = null
       jumpToBottom();
     } else if (input === 'r') {
       refresh();
+    } else if (input === '?' && typeof onToggleHelp === 'function') {
+      onToggleHelp();
     }
   });
 

package/src/hooks/useWatcher.js

@@ -31,6 +31,8 @@ function shouldUsePolling(rootPath) {
 export function useWatcher(rootPath, onTreeChange, options = {}) {
   const debounceMs = options.debounceMs ?? DEFAULT_CONFIG.debounceDelay;
   const [isWatching, setIsWatching] = useState(false);
+  const [watchMode, setWatchMode] = useState(options.noWatch ? 'off' : 'native');
+  const [watchError, setWatchError] = useState(false);
   const watcherRef = useRef(null);
   const onTreeChangeRef = useRef(onTreeChange);
   const mountedRef = useRef(true);
@@ -50,12 +52,16 @@ export function useWatcher(rootPath, onTreeChange, options = {}) {
 
     if (options.noWatch || !rootPath) {
       setIsWatching(false);
+      setWatchMode('off');
+      setWatchError(false);
       return () => {
         mountedRef.current = false;
       };
     }
 
     const usePolling = shouldUsePolling(rootPath);
+    setWatchMode(usePolling ? 'polling' : 'native');
+    setWatchError(false);
     const watcher = chokidar.watch(rootPath, {
       ignored: ignoredPathRef.current,
       persistent: true,
@@ -107,10 +113,12 @@ export function useWatcher(rootPath, onTreeChange, options = {}) {
     });
 
     watcher.on('error', () => {
+      setWatchError(true);
       setIsWatching(false);
     });
 
     watcher.on('ready', () => {
+      setWatchError(false);
       setIsWatching(true);
     });
 
@@ -132,7 +140,7 @@ export function useWatcher(rootPath, onTreeChange, options = {}) {
     };
   }, [rootPath, options.noWatch, debounceMs]);
 
-  return { isWatching };
+  return { isWatching, watchMode, watchError };
 }
 
 // Only default export to avoid conflicts with bundling