Show "not installed" in tool panels, re-check on each open

- nano/vim/tmux panels show yellow "not installed" message if tool missing
- Tool versions re-fetched each time a tool tab is opened (catches new installs)
- File opener and session picker hidden when tool not available
- Tabs always visible for discoverability

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

Author: davindicode

app/components/terminal/InputBox.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback } from "react";
+import { useState, useRef, useCallback, useEffect } from "react";
 import { useTerminalStore } from "~/stores/terminalStore";
 
 interface QuickKey {
@@ -260,16 +260,22 @@ export default function InputBox() {
     onContextMenu: (e: React.MouseEvent) => e.preventDefault(),
   });
 
+  // Fetch tool versions (re-fetch each time a tool tab is opened to catch new installs)
   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 {}
   };
 
+  // Initial fetch
+  useEffect(() => {
+    if (toolVersionsFetched.current) return;
+    toolVersionsFetched.current = true;
+    fetchToolVersions();
+  }, []);
+
   const toggleGroup = (id: string) => {
     if (activeGroup === id) {
       setActiveGroup(null);
@@ -581,6 +587,9 @@ export default function InputBox() {
       )}
       {activeGroup === NANO_TAB && inEditor !== "nano" && (
         <div className="border-b border-gray-700/50 bg-[#12122a] px-3 py-2">
+          {!toolVersions.nano ? (
+            <span className="text-[11px] text-yellow-400">nano is not installed. Install it via your package manager.</span>
+          ) : (
           <div className="flex items-center gap-2">
             <span className="text-[11px] text-gray-500">nano{toolVersions.nano ? ` v${toolVersions.nano}` : ""}</span>
             <input
@@ -598,6 +607,7 @@ export default function InputBox() {
               Open
             </button>
           </div>
+          )}
         </div>
       )}
 
@@ -621,8 +631,11 @@ export default function InputBox() {
       )}
       {activeGroup === VIM_TAB && inEditor !== "vim" && (
         <div className="border-b border-gray-700/50 bg-[#12122a] px-3 py-2">
+          {!toolVersions.vim ? (
+            <span className="text-[11px] text-yellow-400">vim is not installed. Install it via your package manager.</span>
+          ) : (
           <div className="flex items-center gap-2">
-            <span className="text-[11px] text-gray-500">vim{toolVersions.vim ? ` v${toolVersions.vim}` : ""}</span>
+            <span className="text-[11px] text-gray-500">vim v{toolVersions.vim}</span>
             <input
               value={editorFileName}
               onChange={(e) => setEditorFileName(e.target.value)}
@@ -638,6 +651,7 @@ export default function InputBox() {
               Open
             </button>
           </div>
+          )}
         </div>
       )}
 
@@ -658,9 +672,10 @@ 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>
-          )}
+          {!toolVersions.tmux ? (
+            <span className="text-[11px] text-yellow-400">tmux is not installed. Install it via your package manager.</span>
+          ) : (<>
+          <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 ? (
@@ -708,6 +723,7 @@ export default function InputBox() {
               Create
             </button>
           </div>
+          </>)}
         </div>
       )}