master

Author: shmuel hizmi

bun.lock

@@ -0,0 +1,58 @@
+/** @jsxImportSource @opentui/react */
+import { useState, useEffect, type ReactNode } from "react";
+import { readFile } from "node:fs/promises";
+
+interface LocalFileViewerProps {
+  readonly filePath: string;
+}
+
+export const LocalFileViewer = ({ filePath }: LocalFileViewerProps): ReactNode => {
+  const [content, setContent] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const name = filePath.split("/").pop() ?? filePath;
+
+  useEffect(() => {
+    let cancelled = false;
+    setContent(null);
+    setError(null);
+    readFile(filePath, "utf-8")
+      .then((text) => { if (!cancelled) setContent(text); })
+      .catch((err) => { if (!cancelled) setError(String(err)); });
+    return () => { cancelled = true; };
+  }, [filePath]);
+
+  if (error) {
+    return (
+      <box flexGrow={1} justifyContent="center" alignItems="center">
+        <text fg="#ff453a">Failed to read: {name}</text>
+      </box>
+    );
+  }
+
+  if (content === null) {
+    return (
+      <box flexGrow={1} justifyContent="center" alignItems="center">
+        <text fg="#636366">Loading {name}...</text>
+      </box>
+    );
+  }
+
+  const lines = content.split("\n");
+  const gutterWidth = String(lines.length).length + 1;
+
+  return (
+    <box flexGrow={1} flexDirection="column">
+      <box height={1} paddingX={1} backgroundColor="#2c2c2e">
+        <text fg="#98989d">{name}</text>
+      </box>
+      <scrollbox flexGrow={1}>
+        {lines.map((line, i) => (
+          <text key={i}>
+            <span fg="#48484a">{String(i + 1).padStart(gutterWidth, " ")} </span>
+            <span fg="#e5e5ea">{line || " "}</span>
+          </text>
+        ))}
+      </scrollbox>
+    </box>
+  );
+};

packages/wmux-client-terminal/src/components/LocalFileViewer.tsx

@@ -5,6 +5,7 @@ import { Sidebar } from "./Sidebar";
 import { StatusBar } from "./StatusBar";
 import { PrefixProvider, useTUIContext } from "./FocusContext";
 import { SearchOverlay } from "./SearchOverlay";
+import { LocalFileViewer } from "./LocalFileViewer";
 import type { CategoryInfo } from "../types";
 
 const SIDEBAR_WIDTH = 30;
@@ -30,9 +31,11 @@ interface SidebarNavigationItem {
 const buildAllNavigationItems = (
   categories: ReadonlyArray<CategoryInfo>,
 ): readonly SidebarNavigationItem[] =>
-  categories
-    .filter((c) => c.type !== "files")
-    .flatMap((c) => c.tabs.map((tab) => ({ categoryName: c.name, tabId: tab.id })));
+  categories.flatMap((c) =>
+    c.type === "files"
+      ? (c.openFiles ?? []).map((file) => ({ categoryName: c.name, tabId: `file::${file.path}` }))
+      : c.tabs.map((tab) => ({ categoryName: c.name, tabId: tab.id })),
+  );
 
 const navigateItem = (
   items: readonly SidebarNavigationItem[],
@@ -105,12 +108,24 @@ export const WmuxApp = (props: {
     return map;
   }, [children]);
 
+  const selectFirstInCategory = useCallback((cat: CategoryInfo) => {
+    if (cat.type === "files") {
+      const firstOpen = (cat.openFiles ?? [])[0];
+      if (firstOpen) { selectTab(`file::${firstOpen.path}`); return; }
+      const firstFile = (cat.fileEntries ?? []).find((e) => !e.isDir);
+      if (firstFile) { selectTab(`file::${firstFile.path}`); openFile(firstFile.path); }
+      return;
+    }
+    if (cat.tabs.length > 0) selectTab(cat.tabs[0]!.id);
+  }, [selectTab, openFile]);
+
   const handleNavigate = useCallback((delta: number) => {
     const target = navigateItem(allNavItems, activeTabId, delta);
     if (!target) return;
     if (target.categoryName !== activeCategory) selectCategory(target.categoryName);
     selectTab(target.tabId);
-  }, [allNavItems, activeTabId, activeCategory, selectCategory, selectTab]);
+    if (target.tabId.startsWith("file::")) openFile(target.tabId.slice(6));
+  }, [allNavItems, activeTabId, activeCategory, selectCategory, selectTab, openFile]);
 
   useKeyboard((key) => {
     // ── Search overlay handles its own keys ──────────────
@@ -147,9 +162,7 @@ export const WmuxApp = (props: {
       if (idx < categories.length) {
         const cat = categories[idx]!;
         selectCategory(cat.name);
-        if (cat.type !== "files" && cat.tabs.length > 0) {
-          selectTab(cat.tabs[0]!.id);
-        }
+        selectFirstInCategory(cat);
       }
       return;
     }
@@ -160,19 +173,15 @@ export const WmuxApp = (props: {
       const nextIdx = (catIdx + 1) % categories.length;
       const nextCat = categories[nextIdx]!;
       selectCategory(nextCat.name);
-      if (nextCat.type !== "files" && nextCat.tabs.length > 0) {
-        selectTab(nextCat.tabs[0]!.id);
-      }
+      selectFirstInCategory(nextCat);
       return;
     }
     if (key.name === "[") {
       const catIdx = categories.findIndex((c) => c.name === activeCategory);
       const prevIdx = (catIdx - 1 + categories.length) % categories.length;
       const prevCat = categories[prevIdx]!;
       selectCategory(prevCat.name);
-      if (prevCat.type !== "files" && prevCat.tabs.length > 0) {
-        selectTab(prevCat.tabs[0]!.id);
-      }
+      selectFirstInCategory(prevCat);
       return;
     }
 
@@ -274,12 +283,14 @@ export const WmuxApp = (props: {
                 onOpenFile={openFile}
                 onClose={handleSearchClose}
               />
+            ) : activeChild ? (
+              activeChild
+            ) : activeTabId.startsWith("file::") ? (
+              <LocalFileViewer filePath={activeTabId.slice(6)} />
             ) : (
-              activeChild ?? (
-                <box flexGrow={1} justifyContent="center" alignItems="center">
-                  <text fg="#636366">No active tab</text>
-                </box>
-              )
+              <box flexGrow={1} justifyContent="center" alignItems="center">
+                <text fg="#636366">No active tab</text>
+              </box>
             )}
           </box>
         </box>