Add tmux session manager: attach, create, kill from UI

- New "tmux ↗" button in quick actions bar (green accent)
- Popup lists running tmux sessions with attach/kill actions
- Create new named session via text input
- Server endpoint /api/tmux/sessions lists sessions via tmux CLI
- Integrated action pattern: UI fetches server state, sends terminal commands

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

Author: davindicode

app/components/terminal/InputBox.tsx

@@ -115,9 +115,18 @@ const GROUPS: QuickKeyGroup[] = [
   },
 ];
 
+interface TmuxSession {
+  name: string;
+  windows: number;
+  attached: boolean;
+}
+
 export default function InputBox() {
   const [text, setText] = useState("");
   const [activeGroup, setActiveGroup] = useState<string | null>(null);
+  const [tmuxSessions, setTmuxSessions] = useState<TmuxSession[]>([]);
+  const [tmuxOpen, setTmuxOpen] = useState(false);
+  const [tmuxLoading, setTmuxLoading] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const activeSessionId = useTerminalStore((s) => s.activeSessionId);
   const sendInput = useTerminalStore((s) => s.sendInput);
@@ -213,6 +222,33 @@ export default function InputBox() {
     onContextMenu: (e: React.MouseEvent) => e.preventDefault(),
   });
 
+  const fetchTmuxSessions = async () => {
+    setTmuxLoading(true);
+    try {
+      const res = await fetch("/api/tmux/sessions");
+      const data = await res.json();
+      setTmuxSessions(data.sessions || []);
+    } catch {
+      setTmuxSessions([]);
+    }
+    setTmuxLoading(false);
+  };
+
+  const handleTmuxAttach = (sessionName: string) => {
+    if (!activeSessionId) return;
+    sendInput(activeSessionId, `tmux attach -t ${sessionName}\n`);
+    setTmuxOpen(false);
+  };
+
+  const [tmuxNewName, setTmuxNewName] = useState("");
+
+  const handleTmuxNew = () => {
+    if (!activeSessionId || !tmuxNewName.trim()) return;
+    sendInput(activeSessionId, `tmux new -s ${tmuxNewName.trim()}\n`);
+    setTmuxNewName("");
+    setTmuxOpen(false);
+  };
+
   const group = activeGroup ? GROUPS.find((g) => g.label === activeGroup) : null;
 
   return (
@@ -247,20 +283,90 @@ export default function InputBox() {
             ))}
           </>
         ) : (
-          /* Top-level group buttons */
-          GROUPS.map((g) => (
+          <>
+            {/* Top-level group buttons */}
+            {GROUPS.map((g) => (
+              <button
+                key={g.label}
+                onClick={() => setActiveGroup(g.label)}
+                title={g.title}
+                className="px-2.5 py-0.5 text-[11px] bg-[#1a1a2e] text-gray-400 hover:text-white hover:bg-[#2a2a4a] rounded border border-gray-700 whitespace-nowrap transition-colors shrink-0 select-none touch-manipulation"
+              >
+                {g.label}
+              </button>
+            ))}
+            {/* Tmux sessions button */}
             <button
-              key={g.label}
-              onClick={() => setActiveGroup(g.label)}
-              title={g.title}
-              className="px-2.5 py-0.5 text-[11px] bg-[#1a1a2e] text-gray-400 hover:text-white hover:bg-[#2a2a4a] rounded border border-gray-700 whitespace-nowrap transition-colors shrink-0 select-none touch-manipulation"
+              onClick={() => { setTmuxOpen(!tmuxOpen); if (!tmuxOpen) fetchTmuxSessions(); }}
+              disabled={!activeSessionId}
+              title="tmux sessions"
+              className="px-2.5 py-0.5 text-[11px] bg-[#1a1a2e] text-green-400 hover:text-green-300 hover:bg-[#2a2a4a] disabled:text-gray-600 rounded border border-green-800 whitespace-nowrap transition-colors shrink-0 select-none touch-manipulation"
             >
-              {g.label}
+              tmux ↗
             </button>
-          ))
+          </>
         )}
         </div>
       </div>
+      {/* Tmux session picker popup */}
+      {tmuxOpen && (
+        <div className="border-b border-gray-700/50 bg-[#12122a] px-3 py-2">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-[11px] text-gray-400 font-medium">tmux sessions</span>
+            <button onClick={() => setTmuxOpen(false)} className="text-gray-500 hover:text-white">
+              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+            </button>
+          </div>
+          {tmuxLoading ? (
+            <span className="text-[11px] text-gray-500">Loading...</span>
+          ) : tmuxSessions.length === 0 ? (
+            <span className="text-[11px] text-gray-500">No tmux sessions running</span>
+          ) : (
+            <div className="flex flex-col gap-1 mb-2">
+              {tmuxSessions.map((s) => (
+                <div key={s.name} className="flex items-center gap-2">
+                  <button
+                    onClick={() => handleTmuxAttach(s.name)}
+                    className="flex-1 text-left px-2 py-1 text-[11px] bg-[#1a1a2e] text-gray-300 hover:text-white hover:bg-[#2a2a4a] rounded border border-gray-700 transition-colors"
+                  >
+                    <span className="font-medium">{s.name}</span>
+                    <span className="text-gray-500 ml-2">{s.windows}w</span>
+                    {s.attached && <span className="text-green-500 ml-1">(attached)</span>}
+                  </button>
+                  <button
+                    onClick={() => {
+                      if (!activeSessionId) return;
+                      sendInput(activeSessionId, `tmux kill-session -t ${s.name}\n`);
+                      setTimeout(fetchTmuxSessions, 500);
+                    }}
+                    className="p-1 text-gray-500 hover:text-red-400 transition-colors"
+                    title={`Kill session ${s.name}`}
+                  >
+                    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+          {/* New session */}
+          <div className="flex items-center gap-2 mt-1">
+            <input
+              value={tmuxNewName}
+              onChange={(e) => setTmuxNewName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleTmuxNew()}
+              placeholder="New session name..."
+              className="flex-1 bg-[#1a1a2e] text-white border border-gray-700 rounded px-2 py-1 text-[11px] focus:outline-none focus:ring-1 focus:ring-green-500"
+            />
+            <button
+              onClick={handleTmuxNew}
+              disabled={!tmuxNewName.trim() || !activeSessionId}
+              className="px-2 py-1 text-[11px] bg-green-700 hover:bg-green-600 disabled:bg-gray-700 disabled:text-gray-500 text-white rounded transition-colors"
+            >
+              Create
+            </button>
+          </div>
+        </div>
+      )}
       {/* Text input */}
       <div className="flex gap-2 p-2">
         <textarea

app/routes.ts

@@ -10,4 +10,5 @@ export default [
   route("api/files/upload", "routes/api/files.upload.ts"),
   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"),
 ] satisfies RouteConfig;

app/routes/api/tmux.sessions.ts

@@ -0,0 +1,25 @@
+import { execSync } from "child_process";
+import type { Route } from "./+types/tmux.sessions";
+
+export async function loader({ request }: Route.LoaderArgs) {
+  try {
+    const output = execSync("tmux list-sessions -F '#{session_name}:#{session_windows}:#{session_attached}'", {
+      encoding: "utf-8",
+      timeout: 3000,
+    }).trim();
+
+    if (!output) {
+      return Response.json({ sessions: [] });
+    }
+
+    const sessions = output.split("\n").map((line) => {
+      const [name, windows, attached] = line.split(":");
+      return { name, windows: parseInt(windows, 10), attached: attached === "1" };
+    });
+
+    return Response.json({ sessions });
+  } catch {
+    // tmux not running or not installed
+    return Response.json({ sessions: [] });
+  }
+}