Add help overlay: titlebar ? button, F1 hotkey, shortcuts and tips

src/App.tsx

@@ -52,6 +52,7 @@ import Gutter from "./lib/layout/Gutter";
 import Notifications, { type Toast } from "./components/Notifications";
 import Palette from "./components/Palette";
 import HostManager from "./components/HostManager";
+import Help from "./components/Help";
 import "./App.css";
 import "./lib/layout/Gutter.css";
 
@@ -84,6 +85,7 @@ export default function App() {
   });
   const [hosts, setHosts] = useState<SshHost[]>([]);
   const [hostManagerOpen, setHostManagerOpen] = useState(false);
+  const [helpOpen, setHelpOpen] = useState(false);
   const [ready, setReady] = useState(false);
   const [notifications, setNotifications] = useState<Toast[]>([]);
   const [paletteOpen, setPaletteOpen] = useState(false);
@@ -353,6 +355,14 @@ export default function App() {
       const key = e.key.toLowerCase();
       const { activeLeafId, tree } = kbdStateRef.current;
 
+      // F1 — toggle help overlay
+      if (key === "f1") {
+        e.preventDefault();
+        e.stopPropagation();
+        setHelpOpen((v) => !v);
+        return;
+      }
+
       // Ctrl+K — palette
       if (ctrl && !shift && !alt && key === "k") {
         e.preventDefault();
@@ -713,6 +723,14 @@ export default function App() {
         >
           🔔
         </button>
+        <button
+          className="palette-btn"
+          onClick={() => setHelpOpen(true)}
+          title="Show keyboard shortcuts and tips (F1)"
+          aria-label="Help"
+        >
+          ?
+        </button>
 
         <span className="layout-info">
           {leafCount(tree)} pane{leafCount(tree) === 1 ? "" : "s"}
@@ -774,6 +792,8 @@ export default function App() {
           onClose={closeHostManager}
         />
       )}
+
+      {helpOpen && <Help onClose={() => setHelpOpen(false)} />}
     </div>
   );
 }