feat(tui): add pairing password toggle

packages/tui/src/component/dialog-pair.tsx

@@ -3,6 +3,7 @@ import { useTerminalDimensions } from "@opentui/solid"
 import { createMemo, createResource, createSignal, For, Show } from "solid-js"
 import { renderUnicodeCompact } from "uqr"
 import { useClient } from "../context/client"
+import { Keymap } from "../context/keymap"
 import { useTheme } from "../context/theme"
 import { useDialog } from "../ui/dialog"
 import { errorMessage } from "../util/error"
@@ -20,6 +21,22 @@ export function DialogPair(props: { credentials?: DialogPairCredentials }) {
   const [loadError, setLoadError] = createSignal<unknown>()
   const [showPassword, setShowPassword] = createSignal(false)
   const [passwordHover, setPasswordHover] = createSignal(false)
+  const shortcuts = Keymap.useShortcuts()
+  const togglePassword = () => {
+    setShowPassword((current) => !current)
+  }
+
+  Keymap.createLayer(() => ({
+    mode: "modal",
+    commands: [
+      {
+        id: "dialog.pair.toggle_password",
+        title: showPassword() ? "Hide pairing password" : "Show pairing password",
+        group: "Dialog",
+        run: togglePassword,
+      },
+    ],
+  }))
 
   dialog.setSize("large")
   dialog.setCentered(true)
@@ -61,10 +78,14 @@ export function DialogPair(props: { credentials?: DialogPairCredentials }) {
               wrapMode="word"
               onMouseOver={() => setPasswordHover(true)}
               onMouseOut={() => setPasswordHover(false)}
-              onMouseUp={() => setShowPassword((current) => !current)}
+              onMouseUp={togglePassword}
             >
               {showPassword() ? value.password : "************"}
             </text>
+            <text fg={theme.text.default} onMouseUp={togglePassword}>
+              {shortcuts.get("dialog.pair.toggle_password")} {" "}
+              <span style={{ fg: theme.text.subdued }}>{showPassword() ? "hide password" : "show password"}</span>
+            </text>
           </box>
           <Show when={value.urls.some((url) => ["localhost", "127.0.0.1", "[::1]"].includes(new URL(url).hostname))}>
             <text fg={theme.text.subdued} wrapMode="word">

packages/tui/src/config/v1/keybind.ts

@@ -220,6 +220,7 @@ export const Definitions = {
   "dialog.move_session.new": keybind("ctrl+m", "New project copy"),
   "dialog.move_session.delete": keybind("ctrl+d", "Delete project copy"),
   "dialog.move_session.refresh": keybind("ctrl+r", "Refresh project copies"),
+  "dialog.pair.toggle_password": keybind("space", "Show or hide pairing password"),
   "prompt.autocomplete.prev": keybind("up,ctrl+p", "Move to previous autocomplete item"),
   "prompt.autocomplete.next": keybind("down,ctrl+n", "Move to next autocomplete item"),
   "prompt.autocomplete.hide": keybind("escape", "Hide autocomplete"),

packages/tui/test/keybind.test.ts

@@ -5,3 +5,7 @@ test("binds agent cycling only to shift+tab by default", () => {
   expect(TuiKeybind.Definitions.agent_cycle.default).toBe("shift+tab")
   expect(TuiKeybind.Definitions.agent_cycle_reverse.default).toBe("none")
 })
+
+test("binds pairing password visibility to space by default", () => {
+  expect(TuiKeybind.Definitions["dialog.pair.toggle_password"].default).toBe("space")
+})