From 1a80a5f4aff669b389f70ea8d25000991a6d0659 Mon Sep 17 00:00:00 2001
From: ChrisLi <chris.li@senao.com>
Date: Fri, 15 May 2026 16:39:12 +0800
Subject: [PATCH 1/3] feat: customizable tab navigation shortcuts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add Ctrl+Shift+PageUp/PageDown to move the active tab left/right
(with wrap-around), and expose all four tab-navigation actions
(prev/next/move-left/move-right) for rebinding in Settings → Hotkeys.

Bindings persist via localStorage; each action accepts multiple
bindings and ships with the previous hardcoded defaults
(Shift+ArrowUp/Down, Ctrl+PageUp/Down, Ctrl+Shift+PageUp/Down).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/App.tsx                       |  36 +++---
 src/components/SettingsDialog.tsx | 177 +++++++++++++++++++++++++++++-
 src/stores/shortcuts.ts           | 145 ++++++++++++++++++++++++
 3 files changed, 341 insertions(+), 17 deletions(-)
 create mode 100644 src/stores/shortcuts.ts

diff --git a/src/App.tsx b/src/App.tsx
index f304551..43e74d8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,6 +17,7 @@ import { api, type Connection } from "./ipc/api";
 import { loadConnections } from "./stores/connections";
 import { loadGeneral } from "./stores/general";
 import { closeSearch, openSearch, searchTabId } from "./stores/search";
+import { actionFor } from "./stores/shortcuts";
 import { C } from "./theme";
 import {
   activeTab,
@@ -31,6 +32,7 @@ import {
   markCwdTabId,
   newTabId,
   reconnectTabFromProfile,
+  reorderTabs,
   restoreTabs,
   setActiveTab,
   tabs,
@@ -123,23 +125,18 @@ export default function App() {
 
     window.addEventListener("beforeunload", () => flushPersistedState());
 
-    // Shift+ArrowUp/Down and Ctrl+PageUp/PageDown: cycle tabs. Registered in
-    // the capture phase so it fires before xterm's textarea handler —
-    // otherwise xterm swallows the event (translates it to a PTY escape
-    // sequence) and the tab bar only responds after the user clicks the
-    // sidebar to move focus. Skipped when focus is in a real text input /
+    // Tab cycle / move shortcuts (user-customizable; see stores/shortcuts.ts).
+    // Registered in the capture phase so it fires before xterm's textarea
+    // handler — otherwise xterm swallows the event (translates it to a PTY
+    // escape sequence) and the tab bar only responds after the user clicks
+    // the sidebar to move focus. Skipped when focus is in a real text input /
     // passthrough mode so the key can still extend selection / be forwarded
     // to the remote agent.
     window.addEventListener(
       "keydown",
       (e) => {
-        const shiftCombo =
-          e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey &&
-          (e.key === "ArrowUp" || e.key === "ArrowDown");
-        const ctrlCombo =
-          e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey &&
-          (e.key === "PageUp" || e.key === "PageDown");
-        if (!shiftCombo && !ctrlCombo) return;
+        const action = actionFor(e);
+        if (!action) return;
         if (isActiveTabPassthrough()) return;
         // xterm's own input is a hidden <textarea>, so we can't blanket-skip
         // text inputs — instead, allow if focus is inside an .xterm container,
@@ -153,8 +150,21 @@ export default function App() {
         if (list.length < 2) return;
         e.preventDefault();
         e.stopPropagation();
-        const goPrev = e.key === "ArrowUp" || e.key === "PageUp";
+        const goPrev = action === "prevTab" || action === "moveTabPrev";
         const idx = list.findIndex((t) => t.id === activeTabId());
+        if (action === "moveTabPrev" || action === "moveTabNext") {
+          if (idx < 0) return;
+          let target: string | null;
+          if (goPrev) {
+            target = idx === 0 ? null : list[idx - 1].id;
+          } else {
+            if (idx === list.length - 1) target = list[0].id;
+            else if (idx + 2 >= list.length) target = null;
+            else target = list[idx + 2].id;
+          }
+          reorderTabs(list[idx].id, target);
+          return;
+        }
         const next = goPrev
           ? (idx - 1 + list.length) % list.length
           : (idx + 1) % list.length;
diff --git a/src/components/SettingsDialog.tsx b/src/components/SettingsDialog.tsx
index a40fe40..8a4cc6b 100644
--- a/src/components/SettingsDialog.tsx
+++ b/src/components/SettingsDialog.tsx
@@ -1,4 +1,4 @@
-import { createResource, createSignal, For, Show, type JSX } from "solid-js";
+import { createResource, createSignal, For, onMount, Show, type JSX } from "solid-js";
 import { getVersion } from "@tauri-apps/api/app";
 import { api, type Connection, type CommandButton, type TabState } from "../ipc/api";
 import { C, overlayStyle as baseOverlay, inputStyle, btnPrimary, btnSecondary, btnDanger } from "../theme";
@@ -23,6 +23,17 @@ import {
   removeButton,
   saveButton,
 } from "../stores/buttons";
+import {
+  ACTIONS,
+  type ActionId,
+  type Binding,
+  bindingFromEvent,
+  formatBinding,
+  resetAction,
+  resetAll,
+  setBindings,
+  shortcuts,
+} from "../stores/shortcuts";
 
 interface Props {
   onClose: () => void;
@@ -164,7 +175,8 @@ function GeneralPane() {
 }
 
 // ──────────────────────────────────────────────────────────────────────
-// Hotkeys pane — read-only reference of all keyboard shortcuts
+// Hotkeys pane — editable tab-navigation bindings + read-only reference
+// for the remaining (hardcoded) shortcuts.
 // ──────────────────────────────────────────────────────────────────────
 
 interface HotkeyGroup {
@@ -187,8 +199,6 @@ const HOTKEY_GROUPS: HotkeyGroup[] = [
       { keys: ["Ctrl", "Tab"], desc: "Next tab" },
       { keys: ["Ctrl", "Shift", "Tab"], desc: "Previous tab" },
       { keys: ["Ctrl", "1–9"], desc: "Jump to tab by index" },
-      { keys: ["Shift", "↑ / ↓"], desc: "Previous / next tab (capture phase)" },
-      { keys: ["Ctrl", "PageUp / PageDown"], desc: "Previous / next tab (capture phase)" },
       { keys: ["Ctrl", "F"], desc: "Open / close terminal search" },
       { keys: ["Ctrl", "Shift", "F"], desc: "Open / close terminal search" },
     ],
@@ -224,9 +234,168 @@ function Kbd(p: { label: string }) {
   );
 }
 
+function BindingPill(p: { binding: Binding; onRemove: () => void }) {
+  return (
+    <div style={{
+      display: "inline-flex",
+      "align-items": "center",
+      gap: "4px",
+      padding: "2px 4px 2px 8px",
+      background: "rgba(255,255,255,0.07)",
+      border: `1px solid rgba(255,255,255,0.18)`,
+      "border-radius": "6px",
+      "font-family": "monospace",
+      "font-size": "11px",
+    }}>
+      <span>{formatBinding(p.binding)}</span>
+      <button
+        onClick={p.onRemove}
+        title="Remove binding"
+        style={{
+          all: "unset",
+          cursor: "pointer",
+          padding: "0 4px",
+          "border-radius": "3px",
+          color: C.text3,
+          "font-size": "13px",
+          "line-height": "1",
+        }}
+      >×</button>
+    </div>
+  );
+}
+
+function CapturePill(p: { onCommit: (b: Binding) => void; onCancel: () => void }) {
+  let ref: HTMLDivElement | undefined;
+  onMount(() => ref?.focus());
+  return (
+    <div
+      ref={ref}
+      tabIndex={0}
+      onBlur={p.onCancel}
+      onKeyDown={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.key === "Escape") { p.onCancel(); return; }
+        const b = bindingFromEvent(e);
+        if (b) p.onCommit(b);
+      }}
+      style={{
+        display: "inline-flex",
+        "align-items": "center",
+        padding: "3px 10px",
+        background: "rgba(120,160,255,0.15)",
+        border: `1px dashed ${C.accent ?? "rgba(120,160,255,0.6)"}`,
+        "border-radius": "6px",
+        "font-size": "11px",
+        outline: "none",
+        cursor: "text",
+      }}
+    >
+      Press keys… (Esc to cancel)
+    </div>
+  );
+}
+
+function ShortcutRow(p: { action: typeof ACTIONS[number] }) {
+  const [capturing, setCapturing] = createSignal(false);
+  const bindings = () => shortcuts()[p.action.id];
+
+  function commit(b: Binding) {
+    setBindings(p.action.id, [...bindings(), b]);
+    setCapturing(false);
+  }
+  function removeAt(i: number) {
+    const next = bindings().slice();
+    next.splice(i, 1);
+    setBindings(p.action.id, next);
+  }
+
+  return (
+    <div style={{
+      display: "flex",
+      "align-items": "center",
+      gap: "12px",
+      padding: "10px 14px",
+      "border-top": `1px solid ${C.borderSub}`,
+    }}>
+      <div style={{ "min-width": "150px", flex: "0 0 150px" }}>
+        <div style={{ "font-size": "13px", "font-weight": 500 }}>{p.action.label}</div>
+        <div style={{ "font-size": "11px", opacity: 0.6 }}>{p.action.desc}</div>
+      </div>
+      <div style={{ display: "flex", "flex-wrap": "wrap", gap: "6px", "align-items": "center", flex: 1 }}>
+        <For each={bindings()}>
+          {(b, i) => <BindingPill binding={b} onRemove={() => removeAt(i())} />}
+        </For>
+        <Show
+          when={capturing()}
+          fallback={
+            <button
+              onClick={() => setCapturing(true)}
+              style={{
+                ...btnSecondary,
+                padding: "2px 8px",
+                "font-size": "11px",
+              }}
+            >+ Add</button>
+          }
+        >
+          <CapturePill onCommit={commit} onCancel={() => setCapturing(false)} />
+        </Show>
+      </div>
+      <button
+        onClick={() => resetAction(p.action.id)}
+        title="Reset to default"
+        style={{
+          ...btnSecondary,
+          padding: "2px 8px",
+          "font-size": "11px",
+          opacity: 0.7,
+        }}
+      >Reset</button>
+    </div>
+  );
+}
+
 function HotkeysPane() {
   return (
     <div style={{ display: "flex", "flex-direction": "column", gap: "20px" }}>
+      <div>
+        <div style={{
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "space-between",
+          "margin-bottom": "8px",
+        }}>
+          <div style={{
+            "font-size": "11px",
+            "font-weight": 600,
+            color: C.text3,
+            "letter-spacing": "0.06em",
+            "text-transform": "uppercase",
+          }}>
+            Tab navigation (customizable)
+          </div>
+          <button
+            onClick={resetAll}
+            style={{ ...btnSecondary, padding: "2px 10px", "font-size": "11px" }}
+          >Reset all</button>
+        </div>
+        <div style={{
+          background: C.bg3,
+          border: `1px solid ${C.borderSub}`,
+          "border-radius": "8px",
+          overflow: "hidden",
+        }}>
+          <div style={{ "font-size": "11px", opacity: 0.6, padding: "8px 14px" }}>
+            Click <b>+ Add</b> then press the key combination. Multiple bindings per action are allowed.
+          </div>
+          <For each={ACTIONS}>
+            {(a) => <ShortcutRow action={a} />}
+          </For>
+        </div>
+      </div>
+
       <For each={HOTKEY_GROUPS}>
         {(group) => (
           <div>
diff --git a/src/stores/shortcuts.ts b/src/stores/shortcuts.ts
new file mode 100644
index 0000000..6f0c9c0
--- /dev/null
+++ b/src/stores/shortcuts.ts
@@ -0,0 +1,145 @@
+import { createSignal } from "solid-js";
+
+// User-editable keybindings for tab navigation. Persisted via localStorage —
+// these are frontend-only state, no Rust round-trip needed. Other hotkeys
+// (Ctrl+Shift+T, Ctrl+1-9, Ctrl+Shift+P, etc.) remain hardcoded for now.
+
+export interface Binding {
+  ctrl: boolean;
+  shift: boolean;
+  alt: boolean;
+  meta: boolean;
+  key: string; // KeyboardEvent.key, normalized (PageUp, ArrowUp, etc.)
+}
+
+export type ActionId =
+  | "prevTab"
+  | "nextTab"
+  | "moveTabPrev"
+  | "moveTabNext";
+
+export interface ActionDef {
+  id: ActionId;
+  label: string;
+  desc: string;
+}
+
+export const ACTIONS: ActionDef[] = [
+  { id: "prevTab",     label: "Previous tab",      desc: "Switch focus to the previous tab" },
+  { id: "nextTab",     label: "Next tab",          desc: "Switch focus to the next tab" },
+  { id: "moveTabPrev", label: "Move tab left",     desc: "Reorder active tab one position left (wraps)" },
+  { id: "moveTabNext", label: "Move tab right",    desc: "Reorder active tab one position right (wraps)" },
+];
+
+const defaults: Record<ActionId, Binding[]> = {
+  prevTab: [
+    { ctrl: false, shift: true, alt: false, meta: false, key: "ArrowUp" },
+    { ctrl: true, shift: false, alt: false, meta: false, key: "PageUp" },
+  ],
+  nextTab: [
+    { ctrl: false, shift: true, alt: false, meta: false, key: "ArrowDown" },
+    { ctrl: true, shift: false, alt: false, meta: false, key: "PageDown" },
+  ],
+  moveTabPrev: [
+    { ctrl: true, shift: true, alt: false, meta: false, key: "PageUp" },
+  ],
+  moveTabNext: [
+    { ctrl: true, shift: true, alt: false, meta: false, key: "PageDown" },
+  ],
+};
+
+const STORAGE_KEY = "bookshell.shortcuts.v1";
+
+function loadInitial(): Record<ActionId, Binding[]> {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return structuredClone(defaults);
+    const parsed = JSON.parse(raw) as Partial<Record<ActionId, Binding[]>>;
+    const out = structuredClone(defaults);
+    for (const id of Object.keys(defaults) as ActionId[]) {
+      if (Array.isArray(parsed[id])) out[id] = parsed[id]!;
+    }
+    return out;
+  } catch {
+    return structuredClone(defaults);
+  }
+}
+
+const [shortcuts, setShortcuts] = createSignal<Record<ActionId, Binding[]>>(loadInitial());
+export { shortcuts };
+
+function persist(next: Record<ActionId, Binding[]>) {
+  setShortcuts(next);
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+  } catch (e) {
+    console.warn("shortcuts persist", e);
+  }
+}
+
+export function setBindings(action: ActionId, bindings: Binding[]) {
+  persist({ ...shortcuts(), [action]: bindings });
+}
+
+export function resetAction(action: ActionId) {
+  persist({ ...shortcuts(), [action]: structuredClone(defaults[action]) });
+}
+
+export function resetAll() {
+  persist(structuredClone(defaults));
+}
+
+/** Does the keyboard event match this binding? */
+export function matches(e: KeyboardEvent, b: Binding): boolean {
+  return (
+    e.ctrlKey === b.ctrl &&
+    e.shiftKey === b.shift &&
+    e.altKey === b.alt &&
+    e.metaKey === b.meta &&
+    e.key === b.key
+  );
+}
+
+/** Returns the first action whose bindings include this event, or null. */
+export function actionFor(e: KeyboardEvent): ActionId | null {
+  const map = shortcuts();
+  for (const id of Object.keys(map) as ActionId[]) {
+    if (map[id].some((b) => matches(e, b))) return id;
+  }
+  return null;
+}
+
+/** Build a Binding from a captured KeyboardEvent. Returns null for modifier-only events. */
+export function bindingFromEvent(e: KeyboardEvent): Binding | null {
+  const key = e.key;
+  if (key === "Control" || key === "Shift" || key === "Alt" || key === "Meta") return null;
+  return {
+    ctrl: e.ctrlKey,
+    shift: e.shiftKey,
+    alt: e.altKey,
+    meta: e.metaKey,
+    key,
+  };
+}
+
+/** Human-readable representation, e.g. "Ctrl+Shift+PageUp". */
+export function formatBinding(b: Binding): string {
+  const parts: string[] = [];
+  if (b.ctrl) parts.push("Ctrl");
+  if (b.shift) parts.push("Shift");
+  if (b.alt) parts.push("Alt");
+  if (b.meta) parts.push("Meta");
+  parts.push(prettyKey(b.key));
+  return parts.join("+");
+}
+
+function prettyKey(k: string): string {
+  switch (k) {
+    case "ArrowUp": return "↑";
+    case "ArrowDown": return "↓";
+    case "ArrowLeft": return "←";
+    case "ArrowRight": return "→";
+    case " ": return "Space";
+    default: return k.length === 1 ? k.toUpperCase() : k;
+  }
+}

From de688d32e72a3789c543f51f4d8313f42473418e Mon Sep 17 00:00:00 2001
From: ChrisLi <chris.li@senao.com>
Date: Fri, 15 May 2026 16:39:17 +0800
Subject: [PATCH 2/3] fix: focus right-hand neighbor when closing active tab

Ctrl+Shift+W was jumping to the last tab regardless of which tab was
closed. Capture the closed tab's index before removal and pick the
next index (clamped to remaining length), so closing tab N selects
tab N+1 (or the new last tab if N was already last).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/stores/tabs.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/stores/tabs.ts b/src/stores/tabs.ts
index 55bcccb..11bbd97 100644
--- a/src/stores/tabs.ts
+++ b/src/stores/tabs.ts
@@ -293,10 +293,18 @@ export async function closeTab(id: string) {
   closeListeners.delete(id);
   bufferDumpers.delete(id);
 
+  // Capture the closed tab's index BEFORE removal so we can pick the
+  // right-hand neighbor (falling back to the left if it was the last one).
+  const closedIdx = state.tabs.findIndex((x) => x.id === id);
   setState("tabs", (prev) => prev.filter((x) => x.id !== id));
   if (state.activeTabId === id) {
     const remaining = state.tabs;
-    setState("activeTabId", remaining.length > 0 ? remaining[remaining.length - 1].id : null);
+    if (remaining.length === 0) {
+      setState("activeTabId", null);
+    } else {
+      const nextIdx = Math.min(closedIdx, remaining.length - 1);
+      setState("activeTabId", remaining[nextIdx].id);
+    }
   }
 }
 

From d0a4bb1db73f673622d4f2ad5afcf5a09aa9b1d7 Mon Sep 17 00:00:00 2001
From: ChrisLi <chris.li@senao.com>
Date: Fri, 15 May 2026 16:39:21 +0800
Subject: [PATCH 3/3] chore: bump version to v1.0.9

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 package.json              | 2 +-
 src-tauri/tauri.conf.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d16ba80..d544f82 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bookshell",
-  "version": "1.0.5",
+  "version": "1.0.9",
   "description": "BOOKSHELL — SSH terminal for AI agents (Phase 0 prototype)",
   "type": "module",
   "scripts": {
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index a67132b..493dddf 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "BOOKSHELL",
-  "version": "1.0.6",
+  "version": "1.0.9",
   "identifier": "dev.bookshell.app",
   "build": {
     "beforeDevCommand": "npm run dev",