System info popup, fix nano version detection

- Header: info button (i) opens system info popup showing hostname, OS,
  CPU, memory, uptime, shell, node, git, python, tmux, nano, vim versions
- New /api/system-info endpoint with full system details
- Fix nano version: use -V flag (macOS pico hangs with --version)
- 2s timeout on version commands to prevent hangs

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

Author: davindicode

app/components/Header.tsx

@@ -1,17 +1,63 @@
+import { useState, useEffect, useRef } from "react";
 import { useTerminalStore } from "~/stores/terminalStore";
 
+function SystemInfoPopup({ onClose }: { onClose: () => void }) {
+  const [info, setInfo] = useState<Record<string, string | null> | null>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetch("/api/system-info")
+      .then((r) => r.json())
+      .then(setInfo)
+      .catch(() => setInfo({}));
+  }, []);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (popupRef.current && !popupRef.current.contains(e.target as Node)) onClose();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onClose]);
+
+  return (
+    <div ref={popupRef} className="absolute right-2 top-10 z-50 bg-[#16162a] border border-gray-700 rounded-lg shadow-xl w-72 max-h-80 overflow-y-auto">
+      <div className="flex items-center justify-between px-3 py-2 border-b border-gray-700">
+        <span className="text-xs font-medium text-gray-300">System Info</span>
+        <button onClick={onClose} className="text-gray-500 hover:text-white">
+          <svg className="w-3.5 h-3.5" 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>
+      {!info ? (
+        <div className="flex items-center justify-center py-4">
+          <svg className="w-5 h-5 animate-spin text-blue-500" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+        </div>
+      ) : (
+        <div className="px-3 py-2 space-y-1">
+          {Object.entries(info).map(([key, val]) => val ? (
+            <div key={key} className="flex justify-between gap-2 text-[11px]">
+              <span className="text-gray-500 shrink-0">{key}</span>
+              <span className="text-gray-300 text-right break-all">{val}</span>
+            </div>
+          ) : null)}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export default function Header() {
   const socketConnected = useTerminalStore((s) => s.socketConnected);
   const sessions = useTerminalStore((s) => s.sessions);
+  const [showInfo, setShowInfo] = useState(false);
 
-  // Check if any session is actually connected (PTY alive)
   const hasActiveSessions = Object.values(sessions).some(
     (s) => s.status === "connected" || s.status === "connecting"
   );
 
-  // online = socket connected AND at least one session alive
-  // reconnecting = socket connected but all sessions dead (just reconnected)
-  // offline = socket disconnected
   const status = !socketConnected
     ? "offline"
     : hasActiveSessions
@@ -21,12 +67,21 @@ export default function Header() {
         : "online";
 
   return (
-    <header className="flex items-center justify-between px-3 py-1.5 bg-[#0d0d1a] border-b border-gray-800 shrink-0">
+    <header className="flex items-center justify-between px-3 py-1.5 bg-[#0d0d1a] border-b border-gray-800 shrink-0 relative">
       <div className="flex items-center gap-2">
         <img src="/logo-square.png" alt="OTG Code" className="w-6 h-6 rounded" />
         <span className="text-white font-bold text-sm">OTG Code</span>
       </div>
       <div className="flex items-center gap-2">
+        <button
+          onClick={() => setShowInfo(!showInfo)}
+          className="p-1 text-gray-500 hover:text-white transition-colors rounded"
+          title="System info"
+        >
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </button>
         <span
           className={`w-2 h-2 rounded-full ${
             status === "online"
@@ -46,6 +101,7 @@ export default function Header() {
           {status}
         </span>
       </div>
+      {showInfo && <SystemInfoPopup onClose={() => setShowInfo(false)} />}
     </header>
   );
 }

app/routes.ts

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

app/routes/api/system-info.ts

@@ -0,0 +1,59 @@
+import { execSync } from "child_process";
+import { platform, release, arch, hostname, totalmem, freemem, cpus, uptime } from "os";
+import type { Route } from "./+types/system-info";
+
+function run(cmd: string): string {
+  try {
+    return execSync(cmd, { encoding: "utf-8", timeout: 3000, stdio: ["ignore", "pipe", "pipe"] }).trim();
+  } catch {
+    return "";
+  }
+}
+
+function formatBytes(bytes: number): string {
+  const gb = bytes / (1024 * 1024 * 1024);
+  return `${gb.toFixed(1)} GB`;
+}
+
+function formatUptime(seconds: number): string {
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const mins = Math.floor((seconds % 3600) / 60);
+  return [days > 0 ? `${days}d` : "", hours > 0 ? `${hours}h` : "", `${mins}m`].filter(Boolean).join(" ");
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const os = platform();
+  const cpu = cpus();
+
+  const info: Record<string, string | null> = {
+    hostname: hostname(),
+    os: os === "darwin" ? "macOS" : os === "win32" ? "Windows" : os === "linux" ? "Linux" : os,
+    osVersion: release(),
+    arch: arch(),
+    cpu: cpu.length > 0 ? `${cpu[0].model} (${cpu.length} cores)` : null,
+    memory: `${formatBytes(freemem())} free / ${formatBytes(totalmem())} total`,
+    uptime: formatUptime(uptime()),
+    shell: run("echo $SHELL") || run("echo %COMSPEC%") || null,
+    node: process.version,
+    tmux: run("tmux -V")?.replace(/^tmux\s+/i, "") || null,
+    nano: run("nano -V").match(/nano\s+([\d.]+)/i)?.[1] || null,
+    vim: run("vim --version").match(/Vi IMproved\s+([\d.]+)/)?.[1] || null,
+    git: run("git --version")?.replace(/^git version\s+/i, "") || null,
+    python: run("python3 --version")?.replace(/^Python\s+/i, "") || run("python --version")?.replace(/^Python\s+/i, "") || null,
+  };
+
+  // Linux-specific: try to get distro name
+  if (os === "linux") {
+    const distro = run("cat /etc/os-release 2>/dev/null | grep '^PRETTY_NAME=' | cut -d'\"' -f2");
+    if (distro) info.distro = distro;
+  }
+
+  // macOS-specific: get friendly version
+  if (os === "darwin") {
+    const macVer = run("sw_vers -productVersion");
+    if (macVer) info.osVersion = macVer;
+  }
+
+  return Response.json(info);
+}

app/routes/api/tool-versions.ts

@@ -1,19 +1,38 @@
 import { execSync } from "child_process";
 import type { Route } from "./+types/tool-versions";
 
-function getVersion(cmd: string): string | null {
+function run(cmd: string): string | null {
   try {
-    const output = execSync(cmd, { encoding: "utf-8", timeout: 3000, stdio: ["ignore", "pipe", "pipe"] }).trim();
-    return output;
+    return execSync(cmd, { encoding: "utf-8", timeout: 2000, stdio: ["ignore", "pipe", "pipe"] }).trim();
   } 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;
+function getTmuxVersion(): string | null {
+  return run("tmux -V")?.replace(/^tmux\s+/i, "") || null;
+}
+
+function getNanoVersion(): string | null {
+  // GNU nano supports --version; macOS pico doesn't (hangs), so use -V
+  // Try to extract from "GNU nano x.y" or similar
+  const out = run("nano -V");
+  if (!out) return null;
+  const match = out.match(/nano\s+([\d.]+)/i);
+  return match?.[1] || null;
+}
 
-  return Response.json({ tmux, nano, vim });
+function getVimVersion(): string | null {
+  const out = run("vim --version");
+  if (!out) return null;
+  const match = out.match(/Vi IMproved\s+([\d.]+)/);
+  return match?.[1] || null;
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+  return Response.json({
+    tmux: getTmuxVersion(),
+    nano: getNanoVersion(),
+    vim: getVimVersion(),
+  });
 }