tuidoscope 0.1.13 → 0.1.14

package/README.md

@@ -26,6 +26,16 @@ A centralized TUI management application for running multiple TUI applications i
 - **Highly Configurable**: Customize themes, keybinds, and application lists via YAML.
 - **Path Expansion**: Supports `~` and `<CONFIG_DIR>` tokens in working directory paths.
 
+## Documentation
+
+For detailed guides, see the [`docs/`](./docs/) directory:
+
+- [Getting Started](./docs/getting-started.md) - Installation and first run
+- [Configuration](./docs/configuration.md) - YAML config reference
+- [Keybindings](./docs/keybindings.md) - Leader key system and shortcuts
+- [Apps](./docs/apps.md) - App configuration examples
+- [Troubleshooting](./docs/troubleshooting.md) - Common issues and solutions
+
 ## Tech Stack
 
 - **Runtime**: [Bun](https://bun.sh/)
@@ -135,6 +145,10 @@ theme:
 - Runtime application configuration (Add/Edit).
 - Path expansion for working directories.
 
+## Contributing
+
+Contributions are welcome! Please feel free to open an issue or submit a pull request on [GitHub](https://github.com/shuv1337/tuidoscope).
+
 ## Acknowledgments
 
 This project is built directly on top of:

package/dist/index.js

@@ -8892,89 +8892,6 @@ var TabList = (props) => {
   })();
 };
 
-// src/components/TerminalPane.tsx
-var TerminalPane = (props) => {
-  const contentWidth = () => Math.max(1, props.width - 2);
-  const contentHeight = () => Math.max(1, props.height - 3);
-  return (() => {
-    var _el$ = createElement("box");
-    setProp(_el$, "flexDirection", "column");
-    setProp(_el$, "flexGrow", 1);
-    setProp(_el$, "borderStyle", "single");
-    insert(_el$, createComponent2(Show, {
-      get when() {
-        return props.runningApp;
-      },
-      get fallback() {
-        return (() => {
-          var _el$2 = createElement("box"), _el$3 = createElement("text");
-          insertNode(_el$2, _el$3);
-          setProp(_el$2, "flexGrow", 1);
-          setProp(_el$2, "justifyContent", "center");
-          setProp(_el$2, "alignItems", "center");
-          insertNode(_el$3, createTextNode(`No app selected. Press Ctrl+T to add one.`));
-          effect((_$p) => setProp(_el$3, "fg", props.theme.muted, _$p));
-          return _el$2;
-        })();
-      },
-      children: (app) => (() => {
-        var _el$5 = createElement("box"), _el$6 = createElement("box"), _el$7 = createElement("text"), _el$8 = createElement("b"), _el$9 = createElement("text"), _el$0 = createTextNode(` (`), _el$10 = createTextNode(`)`), _el$11 = createElement("box"), _el$12 = createElement("ghostty-terminal");
-        insertNode(_el$5, _el$6);
-        insertNode(_el$5, _el$11);
-        setProp(_el$5, "flexDirection", "column");
-        setProp(_el$5, "flexGrow", 1);
-        insertNode(_el$6, _el$7);
-        insertNode(_el$6, _el$9);
-        setProp(_el$6, "height", 1);
-        setProp(_el$6, "flexDirection", "row");
-        insertNode(_el$7, _el$8);
-        insert(_el$8, () => app().entry.name);
-        insertNode(_el$9, _el$0);
-        insertNode(_el$9, _el$10);
-        insert(_el$9, () => app().status, _el$10);
-        insertNode(_el$11, _el$12);
-        setProp(_el$11, "overflow", "hidden");
-        setProp(_el$12, "showCursor", true);
-        effect((_p$) => {
-          var _v$3 = props.theme.accent, _v$4 = props.theme.muted, _v$5 = contentWidth(), _v$6 = contentHeight(), _v$7 = app().buffer, _v$8 = contentWidth(), _v$9 = contentHeight(), _v$0 = {
-            width: contentWidth(),
-            height: contentHeight()
-          };
-          _v$3 !== _p$.e && (_p$.e = setProp(_el$7, "fg", _v$3, _p$.e));
-          _v$4 !== _p$.t && (_p$.t = setProp(_el$9, "fg", _v$4, _p$.t));
-          _v$5 !== _p$.a && (_p$.a = setProp(_el$11, "width", _v$5, _p$.a));
-          _v$6 !== _p$.o && (_p$.o = setProp(_el$11, "height", _v$6, _p$.o));
-          _v$7 !== _p$.i && (_p$.i = setProp(_el$12, "ansi", _v$7, _p$.i));
-          _v$8 !== _p$.n && (_p$.n = setProp(_el$12, "cols", _v$8, _p$.n));
-          _v$9 !== _p$.s && (_p$.s = setProp(_el$12, "rows", _v$9, _p$.s));
-          _v$0 !== _p$.h && (_p$.h = setProp(_el$12, "style", _v$0, _p$.h));
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined,
-          a: undefined,
-          o: undefined,
-          i: undefined,
-          n: undefined,
-          s: undefined,
-          h: undefined
-        });
-        return _el$5;
-      })()
-    }));
-    effect((_p$) => {
-      var _v$ = props.height, _v$2 = props.isFocused ? props.theme.primary : props.theme.muted;
-      _v$ !== _p$.e && (_p$.e = setProp(_el$, "height", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = setProp(_el$, "borderColor", _v$2, _p$.t));
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
-    return _el$;
-  })();
-};
-
 // src/lib/keybinds.ts
 function parseKeybind(keybind) {
   const parts = keybind.toLowerCase().split("+");
@@ -9072,6 +8989,91 @@ function leaderKeyToSequence(leaderKey) {
   return null;
 }
 
+// src/components/TerminalPane.tsx
+var TerminalPane = (props) => {
+  const contentWidth = () => Math.max(1, props.width - 2);
+  const contentHeight = () => Math.max(1, props.height - 3);
+  return (() => {
+    var _el$ = createElement("box");
+    setProp(_el$, "flexDirection", "column");
+    setProp(_el$, "flexGrow", 1);
+    setProp(_el$, "borderStyle", "single");
+    insert(_el$, createComponent2(Show, {
+      get when() {
+        return props.runningApp;
+      },
+      get fallback() {
+        return (() => {
+          var _el$2 = createElement("box"), _el$3 = createElement("text"), _el$4 = createTextNode(`No app selected. Press `), _el$5 = createTextNode(` to add one.`);
+          insertNode(_el$2, _el$3);
+          setProp(_el$2, "flexGrow", 1);
+          setProp(_el$2, "justifyContent", "center");
+          setProp(_el$2, "alignItems", "center");
+          insertNode(_el$3, _el$4);
+          insertNode(_el$3, _el$5);
+          insert(_el$3, () => formatLeaderKeybind(props.leaderKey, props.newTabBinding), _el$5);
+          effect((_$p) => setProp(_el$3, "fg", props.theme.muted, _$p));
+          return _el$2;
+        })();
+      },
+      children: (app) => (() => {
+        var _el$6 = createElement("box"), _el$7 = createElement("box"), _el$8 = createElement("text"), _el$9 = createElement("b"), _el$0 = createElement("text"), _el$1 = createTextNode(` (`), _el$11 = createTextNode(`)`), _el$12 = createElement("box"), _el$13 = createElement("ghostty-terminal");
+        insertNode(_el$6, _el$7);
+        insertNode(_el$6, _el$12);
+        setProp(_el$6, "flexDirection", "column");
+        setProp(_el$6, "flexGrow", 1);
+        insertNode(_el$7, _el$8);
+        insertNode(_el$7, _el$0);
+        setProp(_el$7, "height", 1);
+        setProp(_el$7, "flexDirection", "row");
+        insertNode(_el$8, _el$9);
+        insert(_el$9, () => app().entry.name);
+        insertNode(_el$0, _el$1);
+        insertNode(_el$0, _el$11);
+        insert(_el$0, () => app().status, _el$11);
+        insertNode(_el$12, _el$13);
+        setProp(_el$12, "overflow", "hidden");
+        setProp(_el$13, "showCursor", true);
+        effect((_p$) => {
+          var _v$3 = props.theme.accent, _v$4 = props.theme.muted, _v$5 = contentWidth(), _v$6 = contentHeight(), _v$7 = app().buffer, _v$8 = contentWidth(), _v$9 = contentHeight(), _v$0 = {
+            width: contentWidth(),
+            height: contentHeight()
+          };
+          _v$3 !== _p$.e && (_p$.e = setProp(_el$8, "fg", _v$3, _p$.e));
+          _v$4 !== _p$.t && (_p$.t = setProp(_el$0, "fg", _v$4, _p$.t));
+          _v$5 !== _p$.a && (_p$.a = setProp(_el$12, "width", _v$5, _p$.a));
+          _v$6 !== _p$.o && (_p$.o = setProp(_el$12, "height", _v$6, _p$.o));
+          _v$7 !== _p$.i && (_p$.i = setProp(_el$13, "ansi", _v$7, _p$.i));
+          _v$8 !== _p$.n && (_p$.n = setProp(_el$13, "cols", _v$8, _p$.n));
+          _v$9 !== _p$.s && (_p$.s = setProp(_el$13, "rows", _v$9, _p$.s));
+          _v$0 !== _p$.h && (_p$.h = setProp(_el$13, "style", _v$0, _p$.h));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined,
+          n: undefined,
+          s: undefined,
+          h: undefined
+        });
+        return _el$6;
+      })()
+    }));
+    effect((_p$) => {
+      var _v$ = props.height, _v$2 = props.isFocused ? props.theme.primary : props.theme.muted;
+      _v$ !== _p$.e && (_p$.e = setProp(_el$, "height", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = setProp(_el$, "borderColor", _v$2, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+};
+
 // src/components/StatusBar.tsx
 var StatusBar = (props) => {
   return (() => {
@@ -11214,6 +11216,39 @@ var APP_PRESETS = [
     category: "utility"
   }
 ];
+// src/components/onboarding/keybindingPresets.ts
+var LEADER_PRESETS = [
+  {
+    id: "tmux",
+    key: "ctrl+a",
+    name: "Ctrl+A",
+    description: "tmux-style (recommended)"
+  },
+  {
+    id: "tmux-alt",
+    key: "ctrl+b",
+    name: "Ctrl+B",
+    description: "tmux alternate"
+  },
+  {
+    id: "screen",
+    key: "ctrl+\\",
+    name: "Ctrl+\\",
+    description: "GNU Screen style"
+  },
+  {
+    id: "desktop",
+    key: "alt+space",
+    name: "Alt+Space",
+    description: "Desktop-style"
+  },
+  {
+    id: "custom",
+    key: "",
+    name: "Custom...",
+    description: "Choose your own"
+  }
+];
 // src/components/onboarding/WelcomeStep.tsx
 var WelcomeStep = (props) => {
   useKeyboard((event) => {
@@ -11293,6 +11328,263 @@ var WelcomeStep = (props) => {
     return _el$;
   })();
 };
+// src/lib/key-capture.ts
+function eventToKeybindString(event) {
+  const parts = [];
+  if (event.ctrl)
+    parts.push("ctrl");
+  if (event.option)
+    parts.push("alt");
+  if (event.shift)
+    parts.push("shift");
+  if (event.meta)
+    parts.push("meta");
+  let keyName = event.name.toLowerCase();
+  if (keyName === "return")
+    keyName = "enter";
+  if (keyName === " ")
+    keyName = "space";
+  parts.push(keyName);
+  return parts.join("+");
+}
+function isValidLeaderKey(keybind) {
+  const parts = keybind.toLowerCase().split("+");
+  const key = parts[parts.length - 1];
+  const hasCtrl = parts.includes("ctrl");
+  const hasAlt = parts.includes("alt");
+  const hasMeta = parts.includes("meta") || parts.includes("cmd");
+  const hasModifier = hasCtrl || hasAlt || hasMeta;
+  if (!hasModifier) {
+    return false;
+  }
+  const reservedKeys = ["enter", "return", "escape", "tab", "backspace"];
+  if (reservedKeys.includes(key)) {
+    return false;
+  }
+  return true;
+}
+
+// src/components/onboarding/KeybindingStep.tsx
+var KeybindingStep = (props) => {
+  const [focusedIndex, setFocusedIndex] = createSignal(0);
+  const [isCapturing, setIsCapturing] = createSignal(false);
+  const [capturedKey, setCapturedKey] = createSignal("");
+  const getSelectedIndex = () => {
+    const idx = LEADER_PRESETS.findIndex((p) => p.key === props.selectedLeaderKey);
+    return idx === -1 ? LEADER_PRESETS.length - 1 : idx;
+  };
+  const isSelected = (preset) => {
+    if (preset.id === "custom") {
+      return !LEADER_PRESETS.slice(0, -1).some((p) => p.key === props.selectedLeaderKey);
+    }
+    return preset.key === props.selectedLeaderKey;
+  };
+  useKeyboard((event) => {
+    if (isCapturing()) {
+      if (event.name === "escape") {
+        setIsCapturing(false);
+        setCapturedKey("");
+        event.preventDefault();
+        return;
+      }
+      if (event.name === "return" || event.name === "enter") {
+        if (capturedKey() && isValidLeaderKey(capturedKey())) {
+          props.onSelectLeader(capturedKey());
+          setIsCapturing(false);
+          setCapturedKey("");
+        }
+        event.preventDefault();
+        return;
+      }
+      if (event.ctrl || event.option || event.meta) {
+        const keybind = eventToKeybindString(event);
+        if (isValidLeaderKey(keybind)) {
+          setCapturedKey(keybind);
+        }
+        event.preventDefault();
+        return;
+      }
+      event.preventDefault();
+      return;
+    }
+    const maxIndex = LEADER_PRESETS.length - 1;
+    if (event.name === "j" || event.name === "down") {
+      setFocusedIndex((prev) => Math.min(prev + 1, maxIndex));
+      event.preventDefault();
+      return;
+    }
+    if (event.name === "k" || event.name === "up") {
+      setFocusedIndex((prev) => Math.max(prev - 1, 0));
+      event.preventDefault();
+      return;
+    }
+    if (event.name === "return" || event.name === "enter" || event.name === "space") {
+      const preset = LEADER_PRESETS[focusedIndex()];
+      if (preset.id === "custom") {
+        setIsCapturing(true);
+        setCapturedKey("");
+      } else {
+        props.onSelectLeader(preset.key);
+        if (event.name === "return" || event.name === "enter") {
+          props.onNext();
+        }
+      }
+      event.preventDefault();
+      return;
+    }
+    if (event.name === "escape" || event.name === "backspace") {
+      props.onBack();
+      event.preventDefault();
+      return;
+    }
+  });
+  return (() => {
+    var _el$ = createElement("box"), _el$2 = createElement("box"), _el$3 = createElement("text"), _el$4 = createElement("b"), _el$6 = createElement("box"), _el$7 = createElement("text"), _el$9 = createElement("box"), _el$0 = createElement("box"), _el$1 = createElement("text"), _el$11 = createElement("box");
+    insertNode(_el$, _el$2);
+    insertNode(_el$, _el$6);
+    insertNode(_el$, _el$9);
+    insertNode(_el$, _el$0);
+    insertNode(_el$, _el$11);
+    setProp(_el$, "width", "100%");
+    setProp(_el$, "height", "100%");
+    setProp(_el$, "flexDirection", "column");
+    setProp(_el$, "justifyContent", "center");
+    setProp(_el$, "alignItems", "center");
+    insertNode(_el$2, _el$3);
+    setProp(_el$2, "height", 1);
+    insertNode(_el$3, _el$4);
+    insertNode(_el$4, createTextNode(`Choose Your Leader Key`));
+    insertNode(_el$6, _el$7);
+    setProp(_el$6, "height", 1);
+    insertNode(_el$7, createTextNode(`The leader key activates tuidoscope commands`));
+    setProp(_el$9, "height", 1);
+    insertNode(_el$0, _el$1);
+    setProp(_el$0, "height", 1);
+    insertNode(_el$1, createTextNode(`Example: Leader + n = next tab, Leader + q = quit`));
+    setProp(_el$11, "height", 1);
+    insert(_el$, (() => {
+      var _c$ = memo2(() => !!isCapturing());
+      return () => _c$() ? (() => {
+        var _el$12 = createElement("box"), _el$13 = createElement("box"), _el$14 = createElement("text"), _el$15 = createElement("b"), _el$17 = createElement("box"), _el$18 = createElement("box"), _el$19 = createElement("text"), _el$20 = createTextNode(`Detected: `), _el$21 = createElement("b"), _el$22 = createElement("box"), _el$23 = createElement("box"), _el$24 = createElement("text");
+        insertNode(_el$12, _el$13);
+        insertNode(_el$12, _el$17);
+        insertNode(_el$12, _el$18);
+        insertNode(_el$12, _el$22);
+        insertNode(_el$12, _el$23);
+        setProp(_el$12, "flexDirection", "column");
+        setProp(_el$12, "alignItems", "center");
+        insertNode(_el$13, _el$14);
+        setProp(_el$13, "height", 1);
+        insertNode(_el$14, _el$15);
+        insertNode(_el$15, createTextNode(`Press the key combination you want to use...`));
+        setProp(_el$17, "height", 1);
+        insertNode(_el$18, _el$19);
+        setProp(_el$18, "height", 1);
+        insertNode(_el$19, _el$20);
+        insertNode(_el$19, _el$21);
+        insert(_el$21, () => capturedKey() || "(waiting...)");
+        setProp(_el$22, "height", 1);
+        insertNode(_el$23, _el$24);
+        setProp(_el$23, "height", 1);
+        insert(_el$24, () => capturedKey() && isValidLeaderKey(capturedKey()) ? "Press Enter to confirm, Escape to cancel" : "Press a key with Ctrl, Alt, or Cmd modifier");
+        effect((_p$) => {
+          var _v$4 = props.theme.accent, _v$5 = props.theme.foreground, _v$6 = props.theme.muted;
+          _v$4 !== _p$.e && (_p$.e = setProp(_el$14, "fg", _v$4, _p$.e));
+          _v$5 !== _p$.t && (_p$.t = setProp(_el$19, "fg", _v$5, _p$.t));
+          _v$6 !== _p$.a && (_p$.a = setProp(_el$24, "fg", _v$6, _p$.a));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        return _el$12;
+      })() : [(() => {
+        var _el$25 = createElement("box");
+        setProp(_el$25, "flexDirection", "column");
+        setProp(_el$25, "alignItems", "flex-start");
+        insert(_el$25, createComponent2(For, {
+          each: LEADER_PRESETS,
+          children: (preset, index) => {
+            const isFocused = () => focusedIndex() === index();
+            const selected = () => isSelected(preset);
+            return (() => {
+              var _el$34 = createElement("box"), _el$35 = createElement("text"), _el$36 = createElement("text"), _el$37 = createElement("text"), _el$38 = createTextNode(` `), _el$39 = createElement("text"), _el$40 = createTextNode(` - `);
+              insertNode(_el$34, _el$35);
+              insertNode(_el$34, _el$36);
+              insertNode(_el$34, _el$37);
+              insertNode(_el$34, _el$39);
+              setProp(_el$34, "height", 1);
+              insert(_el$35, () => isFocused() ? "> " : "  ");
+              insert(_el$36, () => selected() ? "(*)" : "( )");
+              insertNode(_el$37, _el$38);
+              insert(_el$37, () => preset.name, null);
+              insertNode(_el$39, _el$40);
+              insert(_el$39, () => preset.description, null);
+              effect((_p$) => {
+                var _v$7 = isFocused() ? props.theme.accent : props.theme.muted, _v$8 = isFocused() ? props.theme.primary : props.theme.background, _v$9 = isFocused() ? props.theme.background : selected() ? "#22c55e" : props.theme.muted, _v$0 = isFocused() ? props.theme.primary : props.theme.background, _v$1 = isFocused() ? props.theme.background : props.theme.foreground, _v$10 = isFocused() ? props.theme.primary : props.theme.background, _v$11 = isFocused() ? props.theme.background : props.theme.muted, _v$12 = isFocused() ? props.theme.primary : props.theme.background;
+                _v$7 !== _p$.e && (_p$.e = setProp(_el$35, "fg", _v$7, _p$.e));
+                _v$8 !== _p$.t && (_p$.t = setProp(_el$35, "bg", _v$8, _p$.t));
+                _v$9 !== _p$.a && (_p$.a = setProp(_el$36, "fg", _v$9, _p$.a));
+                _v$0 !== _p$.o && (_p$.o = setProp(_el$36, "bg", _v$0, _p$.o));
+                _v$1 !== _p$.i && (_p$.i = setProp(_el$37, "fg", _v$1, _p$.i));
+                _v$10 !== _p$.n && (_p$.n = setProp(_el$37, "bg", _v$10, _p$.n));
+                _v$11 !== _p$.s && (_p$.s = setProp(_el$39, "fg", _v$11, _p$.s));
+                _v$12 !== _p$.h && (_p$.h = setProp(_el$39, "bg", _v$12, _p$.h));
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined,
+                o: undefined,
+                i: undefined,
+                n: undefined,
+                s: undefined,
+                h: undefined
+              });
+              return _el$34;
+            })();
+          }
+        }));
+        return _el$25;
+      })(), (() => {
+        var _el$26 = createElement("box");
+        setProp(_el$26, "height", 1);
+        return _el$26;
+      })(), (() => {
+        var _el$27 = createElement("box"), _el$28 = createElement("text");
+        insertNode(_el$27, _el$28);
+        setProp(_el$27, "height", 1);
+        insertNode(_el$28, createTextNode(`Tip: Choose a key that doesn't conflict with your terminal`));
+        effect((_$p) => setProp(_el$28, "fg", props.theme.muted, _$p));
+        return _el$27;
+      })(), (() => {
+        var _el$30 = createElement("box");
+        setProp(_el$30, "height", 1);
+        return _el$30;
+      })(), (() => {
+        var _el$31 = createElement("box"), _el$32 = createElement("text");
+        insertNode(_el$31, _el$32);
+        setProp(_el$31, "height", 1);
+        insertNode(_el$32, createTextNode(`j/k: Navigate | Enter: Select | Esc/Backspace: Back`));
+        effect((_$p) => setProp(_el$32, "fg", props.theme.primary, _$p));
+        return _el$31;
+      })()];
+    })(), null);
+    effect((_p$) => {
+      var _v$ = props.theme.accent, _v$2 = props.theme.foreground, _v$3 = props.theme.muted;
+      _v$ !== _p$.e && (_p$.e = setProp(_el$3, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = setProp(_el$7, "fg", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = setProp(_el$1, "fg", _v$3, _p$.a));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$;
+  })();
+};
 // src/components/onboarding/PresetSelectionStep.tsx
 var PresetSelectionStep = (props) => {
   const [focusedIndex, setFocusedIndex] = createSignal(0);
@@ -11927,10 +12219,11 @@ var ConfirmationStep = (props) => {
       },
       get children() {
         return [(() => {
-          var _el$21 = createElement("box"), _el$22 = createElement("text");
+          var _el$21 = createElement("box"), _el$22 = createElement("text"), _el$23 = createTextNode(`No apps selected. Add more apps later with `);
           insertNode(_el$21, _el$22);
           setProp(_el$21, "height", 1);
-          insertNode(_el$22, createTextNode(`No apps selected. You can add apps later with Ctrl+T`));
+          insertNode(_el$22, _el$23);
+          insert(_el$22, () => formatLeaderKeybind(props.selectedLeaderKey, props.newTabBinding), null);
           effect((_$p) => setProp(_el$22, "fg", props.theme.muted, _$p));
           return _el$21;
         })(), (() => {
@@ -11968,10 +12261,14 @@ var OnboardingWizard = (props) => {
   const [currentStep, setCurrentStep] = createSignal("welcome");
   const [selectedPresets, setSelectedPresets] = createSignal(new Set);
   const [customApps, setCustomApps] = createSignal([]);
+  const [selectedLeaderKey, setSelectedLeaderKey] = createSignal("ctrl+a");
   const goToStep = (step) => setCurrentStep(step);
   const handleNext = () => {
     switch (currentStep()) {
       case "welcome":
+        goToStep("keybindings");
+        break;
+      case "keybindings":
         goToStep("presets");
         break;
       case "presets":
@@ -11991,10 +12288,16 @@ var OnboardingWizard = (props) => {
         goToStep("presets");
         break;
       case "presets":
+        goToStep("keybindings");
+        break;
+      case "keybindings":
         goToStep("welcome");
         break;
     }
   };
+  const handleSelectLeader = (key) => {
+    setSelectedLeaderKey(key);
+  };
   const togglePreset = (presetId) => {
     setSelectedPresets((prev) => {
       const next = new Set(prev);
@@ -12026,19 +12329,21 @@ var OnboardingWizard = (props) => {
       }
     }
     apps.push(...customApps());
-    props.onComplete(apps);
+    props.onComplete(apps, selectedLeaderKey());
   };
   const handleSkip = () => {
     props.onSkip();
   };
   const stepNumber = () => {
-    const steps = ["welcome", "presets", "custom", "confirm"];
+    const steps = ["welcome", "keybindings", "presets", "custom", "confirm"];
     return steps.indexOf(currentStep()) + 1;
   };
   const stepName = () => {
     switch (currentStep()) {
       case "welcome":
         return "Welcome";
+      case "keybindings":
+        return "Keybindings";
       case "presets":
         return "Select Apps";
       case "custom":
@@ -12048,11 +12353,11 @@ var OnboardingWizard = (props) => {
     }
   };
   const stepIndicator = () => {
-    const steps = ["welcome", "presets", "custom", "confirm"];
+    const steps = ["welcome", "keybindings", "presets", "custom", "confirm"];
     return steps.map((step, i) => i < stepNumber() ? "[*]" : "[ ]").join("---");
   };
   return (() => {
-    var _el$ = createElement("box"), _el$2 = createElement("box"), _el$3 = createElement("text"), _el$4 = createTextNode(`Step `), _el$5 = createTextNode(` of 4: `), _el$6 = createElement("box"), _el$7 = createElement("text"), _el$8 = createElement("box");
+    var _el$ = createElement("box"), _el$2 = createElement("box"), _el$3 = createElement("text"), _el$4 = createTextNode(`Step `), _el$5 = createTextNode(` of 5: `), _el$6 = createElement("box"), _el$7 = createElement("text"), _el$8 = createElement("box");
     insertNode(_el$, _el$2);
     insertNode(_el$, _el$6);
     insertNode(_el$, _el$8);
@@ -12087,6 +12392,23 @@ var OnboardingWizard = (props) => {
               onSkip: handleSkip
             });
           }
+        }), createComponent2(Match, {
+          get when() {
+            return currentStep() === "keybindings";
+          },
+          get children() {
+            return createComponent2(KeybindingStep, {
+              get theme() {
+                return props.theme;
+              },
+              get selectedLeaderKey() {
+                return selectedLeaderKey();
+              },
+              onSelectLeader: handleSelectLeader,
+              onNext: handleNext,
+              onBack: handleBack
+            });
+          }
         }), createComponent2(Match, {
           get when() {
             return currentStep() === "presets";
@@ -12140,6 +12462,10 @@ var OnboardingWizard = (props) => {
               get customApps() {
                 return customApps();
               },
+              get selectedLeaderKey() {
+                return selectedLeaderKey();
+              },
+              newTabBinding: "t",
               onConfirm: handleConfirm,
               onBack: handleBack
             });
@@ -12161,6 +12487,141 @@ var OnboardingWizard = (props) => {
     return _el$;
   })();
 };
+// src/components/LeaderHints.tsx
+var LeaderHints = (props) => {
+  const bindingLabels = [{
+    key: "next_tab",
+    label: "Next Tab"
+  }, {
+    key: "prev_tab",
+    label: "Prev Tab"
+  }, {
+    key: "new_tab",
+    label: "New Tab"
+  }, {
+    key: "close_tab",
+    label: "Close Tab"
+  }, {
+    key: "toggle_focus",
+    label: "Focus"
+  }, {
+    key: "edit_app",
+    label: "Edit"
+  }, {
+    key: "restart_app",
+    label: "Restart"
+  }, {
+    key: "command_palette",
+    label: "Palette"
+  }, {
+    key: "stop_app",
+    label: "Stop"
+  }, {
+    key: "kill_all",
+    label: "Kill All"
+  }, {
+    key: "quit",
+    label: "Quit"
+  }];
+  const leftColumn = bindingLabels.slice(0, 6);
+  const rightColumn = bindingLabels.slice(6);
+  const formatKey = (key) => {
+    if (key === "space")
+      return "Space";
+    if (key === "enter")
+      return "Enter";
+    return key;
+  };
+  return (() => {
+    var _el$ = createElement("box"), _el$2 = createElement("box"), _el$3 = createElement("text"), _el$4 = createElement("b"), _el$6 = createElement("box"), _el$7 = createElement("box"), _el$8 = createElement("box"), _el$9 = createElement("box"), _el$0 = createElement("text");
+    insertNode(_el$, _el$2);
+    insertNode(_el$, _el$6);
+    insertNode(_el$, _el$9);
+    setProp(_el$, "position", "absolute");
+    setProp(_el$, "bottom", "15%");
+    setProp(_el$, "left", "25%");
+    setProp(_el$, "width", "50%");
+    setProp(_el$, "flexDirection", "column");
+    setProp(_el$, "borderStyle", "double");
+    insertNode(_el$2, _el$3);
+    setProp(_el$2, "height", 1);
+    setProp(_el$2, "justifyContent", "center");
+    insertNode(_el$3, _el$4);
+    insertNode(_el$4, createTextNode(` Leader Key Bindings `));
+    insertNode(_el$6, _el$7);
+    insertNode(_el$6, _el$8);
+    setProp(_el$6, "flexDirection", "row");
+    setProp(_el$6, "paddingLeft", 1);
+    setProp(_el$6, "paddingRight", 1);
+    setProp(_el$7, "flexDirection", "column");
+    setProp(_el$7, "flexGrow", 1);
+    insert(_el$7, createComponent2(For, {
+      each: leftColumn,
+      children: (binding) => (() => {
+        var _el$10 = createElement("box"), _el$11 = createElement("text"), _el$12 = createElement("text"), _el$13 = createTextNode(`: `);
+        insertNode(_el$10, _el$11);
+        insertNode(_el$10, _el$12);
+        setProp(_el$10, "height", 1);
+        insert(_el$11, () => formatKey(props.bindings[binding.key]));
+        insertNode(_el$12, _el$13);
+        insert(_el$12, () => binding.label, null);
+        effect((_p$) => {
+          var _v$5 = props.theme.accent, _v$6 = props.theme.foreground;
+          _v$5 !== _p$.e && (_p$.e = setProp(_el$11, "fg", _v$5, _p$.e));
+          _v$6 !== _p$.t && (_p$.t = setProp(_el$12, "fg", _v$6, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$10;
+      })()
+    }));
+    setProp(_el$8, "flexDirection", "column");
+    setProp(_el$8, "flexGrow", 1);
+    insert(_el$8, createComponent2(For, {
+      each: rightColumn,
+      children: (binding) => (() => {
+        var _el$14 = createElement("box"), _el$15 = createElement("text"), _el$16 = createElement("text"), _el$17 = createTextNode(`: `);
+        insertNode(_el$14, _el$15);
+        insertNode(_el$14, _el$16);
+        setProp(_el$14, "height", 1);
+        insert(_el$15, () => formatKey(props.bindings[binding.key]));
+        insertNode(_el$16, _el$17);
+        insert(_el$16, () => binding.label, null);
+        effect((_p$) => {
+          var _v$7 = props.theme.accent, _v$8 = props.theme.foreground;
+          _v$7 !== _p$.e && (_p$.e = setProp(_el$15, "fg", _v$7, _p$.e));
+          _v$8 !== _p$.t && (_p$.t = setProp(_el$16, "fg", _v$8, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$14;
+      })()
+    }));
+    insertNode(_el$9, _el$0);
+    setProp(_el$9, "height", 1);
+    setProp(_el$9, "justifyContent", "center");
+    insertNode(_el$0, createTextNode(`Press any key...`));
+    effect((_p$) => {
+      var _v$ = props.theme.primary, _v$2 = props.theme.background, _v$3 = props.theme.accent, _v$4 = props.theme.muted;
+      _v$ !== _p$.e && (_p$.e = setProp(_el$, "borderColor", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = setProp(_el$, "backgroundColor", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = setProp(_el$3, "fg", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = setProp(_el$0, "fg", _v$4, _p$.o));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$;
+  })();
+};
+
 // node_modules/solid-js/store/dist/store.js
 var $RAW = Symbol("store-raw");
 var $NODE = Symbol("store-node");
@@ -17123,6 +17584,8 @@ var App = (props) => {
   const [isQuitting, setIsQuitting] = createSignal(false);
   const [editingEntryId, setEditingEntryId] = createSignal(null);
   const [lastGTime, setLastGTime] = createSignal(0);
+  const [showHints, setShowHints] = createSignal(false);
+  let hintsTimeout = null;
   const getPtyDimensions = () => {
     const dims = terminalDims();
     const cols = dims.width - props.config.tab_width - 2;
@@ -17262,7 +17725,7 @@ var App = (props) => {
       tabsStore.setActiveTab(id);
     }
   };
-  const persistAppsConfig = async () => {
+  const persistAppsConfig = async (keybindsOverride) => {
     const nextApps = appsStore.store.entries.map((entry) => ({
       name: entry.name,
       command: entry.command,
@@ -17274,9 +17737,13 @@ var App = (props) => {
     }));
     const nextConfig = {
       ...props.config,
-      apps: nextApps
+      apps: nextApps,
+      keybinds: keybindsOverride ?? props.config.keybinds
     };
     props.config.apps = nextApps;
+    if (keybindsOverride) {
+      props.config.keybinds = keybindsOverride;
+    }
     try {
       await saveConfig(nextConfig);
       return true;
@@ -17285,11 +17752,39 @@ var App = (props) => {
       return false;
     }
   };
-  const handleWizardComplete = async (apps) => {
+  const handleWizardComplete = async (apps, leaderKey) => {
     for (const appConfig of apps) {
       appsStore.addEntry(appConfig);
     }
-    const success = await persistAppsConfig();
+    const keybindsConfig = {
+      leader: {
+        key: leaderKey,
+        timeout: 1000,
+        show_hints: true,
+        hint_delay: 300
+      },
+      bindings: {
+        next_tab: "n",
+        prev_tab: "p",
+        close_tab: "w",
+        new_tab: "t",
+        toggle_focus: "a",
+        edit_app: "e",
+        restart_app: "r",
+        command_palette: "space",
+        stop_app: "x",
+        kill_all: "K",
+        quit: "q"
+      },
+      direct: {
+        navigate_up: "k",
+        navigate_down: "j",
+        select: "enter",
+        go_top: "g",
+        go_bottom: "G"
+      }
+    };
+    const success = await persistAppsConfig(keybindsConfig);
     if (success) {
       setWizardCompleted(true);
       uiStore.showTemporaryMessage(`Added ${apps.length} app(s)`);
@@ -17411,11 +17906,19 @@ var App = (props) => {
     }
   };
   const handleLeaderBinding = createLeaderBindingHandler(leaderBindings, actionHandlers);
+  const cancelLeader = () => {
+    uiStore.setLeaderActive(false);
+    if (hintsTimeout) {
+      clearTimeout(hintsTimeout);
+      hintsTimeout = null;
+    }
+    setShowHints(false);
+  };
   useKeyboard((event) => {
     debugLog(`[App] key: ${event.name} modal: ${uiStore.store.activeModal} leader: ${uiStore.store.leaderActive} prevented: ${event.defaultPrevented}`);
     if (uiStore.store.activeModal) {
       if (uiStore.store.leaderActive) {
-        uiStore.setLeaderActive(false);
+        cancelLeader();
       }
       if (event.name === "escape") {
         if (uiStore.store.activeModal === "edit-app") {
@@ -17436,7 +17939,7 @@ var App = (props) => {
     }
     if (uiStore.store.leaderActive) {
       if (event.name === "escape") {
-        uiStore.setLeaderActive(false);
+        cancelLeader();
         event.preventDefault();
         return;
       }
@@ -17447,25 +17950,30 @@ var App = (props) => {
             activeApp.pty.write(sequence);
           }
         }
-        uiStore.setLeaderActive(false);
+        cancelLeader();
         event.preventDefault();
         return;
       }
       const action = handleLeaderBinding(event);
       if (action !== null) {
-        uiStore.setLeaderActive(false);
+        cancelLeader();
         event.preventDefault();
         return;
       }
-      uiStore.setLeaderActive(false);
+      cancelLeader();
       event.preventDefault();
       return;
     }
     if (matchesLeaderKey(event, leaderConfig.key)) {
       uiStore.setLeaderActive(true);
       uiStore.startLeaderTimeout(() => {
-        uiStore.setLeaderActive(false);
+        cancelLeader();
       }, leaderConfig.timeout);
+      if (leaderConfig.show_hints) {
+        hintsTimeout = setTimeout(() => {
+          setShowHints(true);
+        }, leaderConfig.hint_delay);
+      }
       event.preventDefault();
       return;
     }
@@ -17652,6 +18160,12 @@ var App = (props) => {
         get theme() {
           return props.config.theme;
         },
+        get leaderKey() {
+          return props.config.keybinds.leader.key;
+        },
+        get newTabBinding() {
+          return props.config.keybinds.bindings.new_tab;
+        },
         onInput: handleTerminalInput
       }), null);
       insert(_el$, createComponent2(StatusBar, {
@@ -17746,6 +18260,24 @@ var App = (props) => {
           });
         }
       }), null);
+      insert(_el$, createComponent2(Show, {
+        get when() {
+          return memo2(() => !!uiStore.store.leaderActive)() && showHints();
+        },
+        get children() {
+          return createComponent2(LeaderHints, {
+            get bindings() {
+              return props.config.keybinds.bindings;
+            },
+            get leaderKey() {
+              return props.config.keybinds.leader.key;
+            },
+            get theme() {
+              return props.config.theme;
+            }
+          });
+        }
+      }), null);
       return _el$;
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuidoscope",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "A centralized TUI management app for running TUI applications in embedded terminal windows",
   "type": "module",
   "main": "dist/index.js",