Show tool versions (tmux, nano, vim) in their respective panels

- New /api/tool-versions endpoint returns versions for tmux, nano, vim
- Versions displayed in file opener and session panels
- Fetched once on first tool tab open, cached for session

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: davindicode

app/components/terminal/InputBox.tsx

@@ -166,6 +166,8 @@ export default function InputBox() {
   const [activeGroup, setActiveGroup] = useState<string | null>(null);
   const [tmuxSessions, setTmuxSessions] = useState<TmuxSession[]>([]);
   const [tmuxLoading, setTmuxLoading] = useState(false);
+  const [toolVersions, setToolVersions] = useState<{ tmux: string | null; nano: string | null; vim: string | null }>({ tmux: null, nano: null, vim: null });
+  const toolVersionsFetched = useRef(false);
   const [tmuxNewName, setTmuxNewName] = useState("");
   const [editorFileName, setEditorFileName] = useState("");
   const [cdDirs, setCdDirs] = useState<string[]>([]);
@@ -258,13 +260,24 @@ export default function InputBox() {
     onContextMenu: (e: React.MouseEvent) => e.preventDefault(),
   });
 
+  const fetchToolVersions = async () => {
+    if (toolVersionsFetched.current) return;
+    toolVersionsFetched.current = true;
+    try {
+      const res = await fetch("/api/tool-versions");
+      const data = await res.json();
+      setToolVersions(data);
+    } catch {}
+  };
+
   const toggleGroup = (id: string) => {
     if (activeGroup === id) {
       setActiveGroup(null);
     } else {
       setActiveGroup(id);
       if (id === TMUX_TAB && !inTmux) fetchTmuxSessions();
       if (id === "cmds") fetchDirs();
+      if ([TMUX_TAB, NANO_TAB, VIM_TAB].includes(id)) fetchToolVersions();
     }
   };
 
@@ -569,7 +582,7 @@ export default function InputBox() {
       {activeGroup === NANO_TAB && inEditor !== "nano" && (
         <div className="border-b border-gray-700/50 bg-[#12122a] px-3 py-2">
           <div className="flex items-center gap-2">
-            <span className="text-[11px] text-gray-500">nano</span>
+            <span className="text-[11px] text-gray-500">nano{toolVersions.nano ? ` v${toolVersions.nano}` : ""}</span>
             <input
               value={editorFileName}
               onChange={(e) => setEditorFileName(e.target.value)}
@@ -609,7 +622,7 @@ export default function InputBox() {
       {activeGroup === VIM_TAB && inEditor !== "vim" && (
         <div className="border-b border-gray-700/50 bg-[#12122a] px-3 py-2">
           <div className="flex items-center gap-2">
-            <span className="text-[11px] text-gray-500">vim</span>
+            <span className="text-[11px] text-gray-500">vim{toolVersions.vim ? ` v${toolVersions.vim}` : ""}</span>
             <input
               value={editorFileName}
               onChange={(e) => setEditorFileName(e.target.value)}
@@ -645,6 +658,9 @@ export default function InputBox() {
       )}
       {activeGroup === TMUX_TAB && !inTmux && (
         <div className="border-b border-gray-700/50 bg-[#12122a] px-3 py-2">
+          {toolVersions.tmux && (
+            <span className="text-[10px] text-gray-600 float-right">v{toolVersions.tmux}</span>
+          )}
           {tmuxLoading ? (
             <span className="text-[11px] text-gray-500">Loading...</span>
           ) : tmuxSessions.length === 0 ? (

app/routes.ts

@@ -11,4 +11,5 @@ export default [
   route("api/files/download", "routes/api/files.download.ts"),
   route("api/files/mkdir", "routes/api/files.mkdir.ts"),
   route("api/tmux/sessions", "routes/api/tmux.sessions.ts"),
+  route("api/tool-versions", "routes/api/tool-versions.ts"),
 ] satisfies RouteConfig;

app/routes/api/tool-versions.ts

@@ -0,0 +1,19 @@
+import { execSync } from "child_process";
+import type { Route } from "./+types/tool-versions";
+
+function getVersion(cmd: string): string | null {
+  try {
+    const output = execSync(cmd, { encoding: "utf-8", timeout: 3000, stdio: ["ignore", "pipe", "pipe"] }).trim();
+    return output;
+  } catch {
+    return null;
+  }
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const tmux = getVersion("tmux -V")?.replace(/^tmux\s+/, "") || null;
+  const nano = getVersion("nano --version")?.split("\n")[0]?.replace(/.*nano\s+/, "")?.trim() || null;
+  const vim = getVersion("vim --version")?.split("\n")[0]?.match(/Vi IMproved (\S+)/)?.[1] || null;
+
+  return Response.json({ tmux, nano, vim });
+}