@austinthesing/magic-shell 0.2.27 → 0.2.29

package/README.md

@@ -145,7 +145,7 @@ Launch with `mshell` for a full interactive experience.
 
 ### Keyboard Shortcuts
 
-Magic Shell follows OpenCode-style TUI shortcuts where they map cleanly:
+Magic Shell follows OpenCode-style TUI shortcuts where they fit cleanly:
 
 | Shortcut   | Action                 |
 | ---------- | ---------------------- |
@@ -154,23 +154,28 @@ Magic Shell follows OpenCode-style TUI shortcuts where they map cleanly:
 | `Ctrl+X T` | Change theme           |
 | `Ctrl+X Q` | Exit                   |
 | `Ctrl+T`   | Cycle thinking level   |
-| `Ctrl+C`   | Exit / Cancel active UI |
+| `Ctrl+C`   | Exit, or cancel/close the active dialog first |
 | `Ctrl+D`   | Exit                   |
-| `Esc`      | Close dialogs          |
+| `Esc`      | Close dialogs or cancel pending actions |
 
-### Direct Commands in TUI
+### Slash Commands in TUI
 
-You can also type commands directly in the TUI:
+Typing `/` opens a slash command menu under the prompt. Type to filter, use arrow keys to move, `Tab` to complete, and `Enter` to run the selected command.
+
+You can also submit slash commands directly:
 
 - `!help` or `/help` - Show help
-- `!model` or `/model` - Change model
-- `!provider` or `/provider` - Switch provider
+- `!model` or `/models` - Change model
+- `!provider` or `/providers` - Switch provider
+- `!theme` or `/themes` - Change theme
 - `!dry` or `/dry` - Toggle dry-run mode
+- `!thinking` or `/thinking` - Cycle thinking level
 - `!config` or `/config` - Show current configuration
 - `!history` or `/history` - Show command history
 - `!clear` or `/clear` - Clear output
+- `!exit` or `/exit` - Exit the TUI
 
-> **Note:** Both `!` and `/` prefixes work for all commands. Use whichever feels more natural!
+Both `!` and `/` prefixes work for these commands.
 
 ## AI Providers
 

package/dist/cli.js

@@ -76817,6 +76817,10 @@ var inputHintText;
 var helpBarText;
 var modelSelector = null;
 var providerSelector = null;
+var slashCommandMatches = [];
+var slashCommandSelectedIndex = 0;
+var slashCommandSyncQueued = false;
+var slashCommandExecuting = false;
 var pendingMessageId = null;
 var awaitingConfirmation = false;
 function generateMessageId() {
@@ -77101,6 +77105,10 @@ function createMainUI() {
       { name: "j", ctrl: true, action: "newline" }
     ],
     onSubmit: () => {
+      if (slashCommandModal && slashCommandMatches.length > 0) {
+        executeSelectedSlashCommand();
+        return;
+      }
       const value = inputField.editBuffer.getText();
       handleInput(value);
     }
@@ -77119,6 +77127,7 @@ function createMainUI() {
   });
   mainContainer.add(helpBarText);
   renderer.keyInput.on("keypress", handleKeypress);
+  renderer.keyInput.on("keypress", queueSlashCommandSync);
   inputField.focus();
 }
 function getStatusBarContent() {
@@ -77433,8 +77442,14 @@ async function handleInput(value) {
   const input = value.trim();
   if (!input)
     return;
+  if (input.startsWith("/") && await tryHandleSlashCommand(input)) {
+    inputField.setText("");
+    closeSlashCommandMenu();
+    return;
+  }
   inputField.setText("");
-  if (input.startsWith("!") || input.startsWith("/")) {
+  closeSlashCommandMenu();
+  if (input.startsWith("!")) {
     await handleSpecialCommand(input);
     return;
   }
@@ -77445,6 +77460,25 @@ async function handleInput(value) {
   }
   await translateAndProcess(input);
 }
+async function executeSelectedSlashCommand() {
+  if (slashCommandExecuting || !slashCommandModal || slashCommandMatches.length === 0)
+    return;
+  slashCommandExecuting = true;
+  try {
+    const selected = slashCommandMatches[Math.min(slashCommandSelectedIndex, slashCommandMatches.length - 1)];
+    inputField.setText("");
+    closeSlashCommandMenu();
+    await selected.action();
+  } finally {
+    slashCommandExecuting = false;
+  }
+}
+async function tryHandleSlashCommand(input) {
+  if (!input.startsWith("/"))
+    return false;
+  await handleSpecialCommand(input);
+  return true;
+}
 function isDirectCommand(input) {
   const directCommands = ["ls", "pwd", "cd", "cat", "echo", "mkdir", "touch", "rm", "cp", "mv", "git", "npm", "bun", "node", "python", "pip", "brew", "apt", "docker", "kubectl"];
   const firstWord = input.split(/\s+/)[0].toLowerCase();
@@ -77620,6 +77654,7 @@ async function handleSpecialCommand(input) {
   }
 }
 function clearChat() {
+  closeSlashCommandMenu();
   for (const msg of chatMessages) {
     chatScrollBox.remove(`msg-${msg.id}`);
   }
@@ -77923,7 +77958,10 @@ function showThemeSelector() {
   renderer.keyInput.on("keypress", escHandler);
   themeSelector.focus();
 }
-var commandPalette = null;
+var MODAL_LIST_WIDTH = 55;
+var MODAL_LIST_MAX_ITEMS = 12;
+var commandPaletteModal = null;
+var slashCommandModal = null;
 var commandPaletteQuery = "";
 var chordMode = "none";
 function cycleThinkingLevel() {
@@ -78031,56 +78069,236 @@ function getCommandPaletteOptions() {
     }
   ];
 }
-function showCommandPalette() {
-  if (commandPalette) {
-    return;
-  }
-  commandPaletteQuery = "";
-  const commands = getCommandPaletteOptions();
-  const paletteWidth = 55;
+function getSlashCommands() {
+  return [
+    {
+      slash: "help",
+      name: "Help",
+      description: "Show commands and shortcuts",
+      action: () => showHelp()
+    },
+    {
+      slash: "models",
+      name: "Models",
+      description: `Change model · ${currentModel.name}`,
+      action: () => showModelSelector()
+    },
+    {
+      slash: "providers",
+      name: "Providers",
+      description: `Switch provider · ${getProviderDisplayName(config2.provider)}`,
+      action: () => switchProvider()
+    },
+    {
+      slash: "themes",
+      name: "Themes",
+      description: `Change theme · ${getTheme().name}`,
+      action: () => showThemeSelector()
+    },
+    {
+      slash: "dry",
+      name: "Dry Run",
+      description: dryRunMode ? "Turn dry-run off" : "Turn dry-run on",
+      action: () => {
+        dryRunMode = !dryRunMode;
+        statusBarText.content = getStatusBarContent();
+        addSystemMessage(`Dry-run mode: ${dryRunMode ? "ON" : "OFF"}`);
+      }
+    },
+    {
+      slash: "thinking",
+      name: "Thinking",
+      description: `Cycle thinking level · ${config2.thinkingLevel}`,
+      action: () => cycleThinkingLevel()
+    },
+    {
+      slash: "config",
+      name: "Config",
+      description: "Show current configuration",
+      action: () => showConfig()
+    },
+    {
+      slash: "history",
+      name: "History",
+      description: `${history.length} commands`,
+      action: () => showHistory()
+    },
+    {
+      slash: "clear",
+      name: "Clear",
+      description: "Clear the chat history",
+      action: () => clearChat()
+    },
+    {
+      slash: "exit",
+      name: "Exit",
+      description: "Close magic-shell",
+      action: () => {
+        renderer.destroy();
+        process.exit(0);
+      }
+    }
+  ];
+}
+function getSlashCommandMatches(inputText) {
+  if (!inputText.startsWith("/"))
+    return [];
+  const slashBody = inputText.slice(1);
+  if (slashBody.includes(" "))
+    return [];
+  const query = slashBody.trim().toLowerCase();
+  return getSlashCommands().filter((cmd) => {
+    if (!query)
+      return true;
+    return `${cmd.slash} ${cmd.name} ${cmd.description}`.toLowerCase().includes(query);
+  });
+}
+function openModalList(config3) {
+  const theme = getTheme();
+  const width = MODAL_LIST_WIDTH;
   const termWidth = process.stdout.columns || 80;
-  const paletteLeft = Math.max(2, Math.floor((termWidth - paletteWidth) / 2));
+  const left = Math.max(2, Math.floor((termWidth - width) / 2));
+  const itemCount = Math.max(config3.options.length, 1);
+  const listHeight = Math.min(itemCount + 2, MODAL_LIST_MAX_ITEMS);
+  const containerHeight = listHeight + 2;
   const container = new BoxRenderable(renderer, {
-    id: "command-palette-container",
+    id: config3.containerId,
     position: "absolute",
-    left: paletteLeft,
+    left,
     top: 3,
-    width: paletteWidth,
-    height: Math.min(commands.length + 4, 16),
-    backgroundColor: "#1e293b",
+    width,
+    height: containerHeight,
+    backgroundColor: theme.colors.backgroundPanel,
     border: true,
-    borderColor: "#60a5fa",
+    borderColor: theme.colors.primary,
     borderStyle: "single",
-    title: "Commands",
+    title: config3.title,
     titleAlignment: "center",
     zIndex: 200,
     padding: 1
   });
   renderer.root.add(container);
-  commandPalette = new SelectRenderable(renderer, {
-    id: "command-palette-select",
+  const selector = new SelectRenderable(renderer, {
+    id: config3.selectorId,
     width: "100%",
-    height: Math.min(commands.length + 2, 12),
-    options: getCommandPaletteSelectOptions(),
+    height: listHeight,
+    options: config3.options,
     backgroundColor: "transparent",
     focusedBackgroundColor: "transparent",
-    selectedBackgroundColor: "#334155",
-    textColor: "#e2e8f0",
-    selectedTextColor: "#60a5fa",
-    descriptionColor: "#64748b",
-    selectedDescriptionColor: "#94a3b8",
+    selectedBackgroundColor: theme.colors.backgroundElement,
+    textColor: theme.colors.text,
+    selectedTextColor: theme.colors.primary,
+    descriptionColor: theme.colors.textMuted,
+    selectedDescriptionColor: theme.colors.textMuted,
     showDescription: true,
     wrapSelection: true
   });
-  container.add(commandPalette);
-  commandPalette.on(SelectRenderableEvents.ITEM_SELECTED, async (_2, option) => {
-    if (!option.value)
-      return;
-    const cmd = option.value;
-    closeCommandPalette();
-    await cmd.action();
+  container.add(selector);
+  const handle = {
+    containerId: config3.containerId,
+    container,
+    selector,
+    updateOptions(options, selectedIndex = 0) {
+      const count = Math.max(options.length, 1);
+      const newListHeight = Math.min(count + 2, MODAL_LIST_MAX_ITEMS);
+      selector.options = options;
+      selector.height = newListHeight;
+      container.height = newListHeight + 2;
+      selector.setSelectedIndex(Math.min(selectedIndex, Math.max(options.length - 1, 0)));
+    },
+    setSelectedIndex(index) {
+      selector.setSelectedIndex(index);
+    },
+    close() {
+      renderer.root.remove(config3.containerId);
+      inputField?.focus();
+    }
+  };
+  if (config3.onSelect) {
+    selector.on(SelectRenderableEvents.ITEM_SELECTED, async (index, option) => {
+      await config3.onSelect?.(index, option);
+    });
+  }
+  const initialIndex = config3.selectedIndex ?? 0;
+  if (config3.focusList !== false) {
+    selector.focus();
+  } else {
+    selector.setSelectedIndex(initialIndex);
+  }
+  return handle;
+}
+function getSlashCommandSelectOptions() {
+  return slashCommandMatches.map((cmd) => ({
+    name: `/${cmd.slash}`,
+    description: cmd.description,
+    value: cmd
+  }));
+}
+function closeSlashCommandMenu() {
+  if (slashCommandModal) {
+    slashCommandModal.close();
+    slashCommandModal = null;
+  }
+  slashCommandMatches = [];
+  slashCommandSelectedIndex = 0;
+}
+function updateSlashCommandModalOptions() {
+  if (!slashCommandModal)
+    return;
+  slashCommandModal.updateOptions(getSlashCommandSelectOptions(), slashCommandSelectedIndex);
+}
+function syncSlashCommandMenu() {
+  const inputText = inputField.editBuffer.getText();
+  const matches = getSlashCommandMatches(inputText);
+  if (matches.length === 0) {
+    closeSlashCommandMenu();
+    return;
+  }
+  slashCommandMatches = matches;
+  slashCommandSelectedIndex = Math.min(slashCommandSelectedIndex, slashCommandMatches.length - 1);
+  const options = getSlashCommandSelectOptions();
+  if (slashCommandModal) {
+    slashCommandModal.updateOptions(options, slashCommandSelectedIndex);
+    return;
+  }
+  slashCommandModal = openModalList({
+    containerId: "slash-command-modal",
+    selectorId: "slash-command-select",
+    title: "Commands",
+    options,
+    focusList: false,
+    selectedIndex: slashCommandSelectedIndex
+  });
+}
+function queueSlashCommandSync() {
+  if (slashCommandSyncQueued)
+    return;
+  slashCommandSyncQueued = true;
+  setTimeout(() => {
+    slashCommandSyncQueued = false;
+    if (inputField)
+      syncSlashCommandMenu();
+  }, 0);
+}
+function showCommandPalette() {
+  if (commandPaletteModal) {
+    return;
+  }
+  commandPaletteQuery = "";
+  commandPaletteModal = openModalList({
+    containerId: "command-palette-container",
+    selectorId: "command-palette-select",
+    title: "Commands",
+    options: getCommandPaletteSelectOptions(),
+    focusList: true,
+    onSelect: async (_2, option) => {
+      if (!option.value)
+        return;
+      const cmd = option.value;
+      closeCommandPalette();
+      await cmd.action();
+    }
   });
-  commandPalette.focus();
 }
 function getCommandPaletteSelectOptions() {
   const query = commandPaletteQuery.toLowerCase();
@@ -78103,21 +78321,41 @@ function getCommandPaletteSelectOptions() {
   }));
 }
 function updateCommandPaletteOptions() {
-  if (!commandPalette)
+  if (!commandPaletteModal)
     return;
-  commandPalette.options = getCommandPaletteSelectOptions();
-  commandPalette.setSelectedIndex(0);
+  commandPaletteModal.updateOptions(getCommandPaletteSelectOptions(), 0);
 }
 function closeCommandPalette() {
-  if (commandPalette) {
-    renderer.root.remove("command-palette-container");
-    commandPalette = null;
+  if (commandPaletteModal) {
+    commandPaletteModal.close();
+    commandPaletteModal = null;
     commandPaletteQuery = "";
-    inputField?.focus();
   }
 }
 function handleKeypress(key) {
   const commands = getCommandPaletteOptions();
+  if (slashCommandModal && slashCommandMatches.length > 0) {
+    if (key.name === "up") {
+      slashCommandSelectedIndex = slashCommandSelectedIndex === 0 ? slashCommandMatches.length - 1 : slashCommandSelectedIndex - 1;
+      updateSlashCommandModalOptions();
+      return;
+    }
+    if (key.name === "down") {
+      slashCommandSelectedIndex = (slashCommandSelectedIndex + 1) % slashCommandMatches.length;
+      updateSlashCommandModalOptions();
+      return;
+    }
+    if (key.name === "tab") {
+      inputField.setText(`/${slashCommandMatches[slashCommandSelectedIndex].slash}`);
+      syncSlashCommandMenu();
+      inputField.focus();
+      return;
+    }
+    if (key.name === "return" && !key.shift && !key.ctrl && !key.meta) {
+      executeSelectedSlashCommand();
+      return;
+    }
+  }
   if (key.ctrl && key.name === "p") {
     showCommandPalette();
     return;
@@ -78144,7 +78382,7 @@ function handleKeypress(key) {
     }
     return;
   }
-  if (commandPalette) {
+  if (commandPaletteModal) {
     if (key.name === "backspace" || key.name === "delete") {
       commandPaletteQuery = commandPaletteQuery.slice(0, -1);
       updateCommandPaletteOptions();
@@ -78158,10 +78396,14 @@ function handleKeypress(key) {
     }
   }
   if (key.ctrl && key.name === "c") {
-    if (commandPalette) {
+    if (commandPaletteModal) {
       closeCommandPalette();
       return;
     }
+    if (slashCommandMatches.length > 0) {
+      closeSlashCommandMenu();
+      return;
+    }
     if (modelSelector) {
       renderer.root.remove("model-selector-container");
       modelSelector = null;
@@ -78185,10 +78427,14 @@ function handleKeypress(key) {
   }
   if (key.name === "escape") {
     chordMode = "none";
-    if (commandPalette) {
+    if (commandPaletteModal) {
       closeCommandPalette();
       return;
     }
+    if (slashCommandMatches.length > 0) {
+      closeSlashCommandMenu();
+      return;
+    }
     if (modelSelector) {
       renderer.root.remove("model-selector-container");
       modelSelector = null;
@@ -78228,7 +78474,7 @@ function handleKeypress(key) {
       addSystemMessage(`Copied to clipboard: ${msg.command}`);
     }
   }
-  if (key.name === "o" && !awaitingConfirmation && !commandPalette && !modelSelector) {
+  if (key.name === "o" && !awaitingConfirmation && !commandPaletteModal && !modelSelector) {
     toggleLastResultExpand();
   }
 }

package/dist/tui.js

@@ -76817,6 +76817,10 @@ var inputHintText;
 var helpBarText;
 var modelSelector = null;
 var providerSelector = null;
+var slashCommandMatches = [];
+var slashCommandSelectedIndex = 0;
+var slashCommandSyncQueued = false;
+var slashCommandExecuting = false;
 var pendingMessageId = null;
 var awaitingConfirmation = false;
 function generateMessageId() {
@@ -77101,6 +77105,10 @@ function createMainUI() {
       { name: "j", ctrl: true, action: "newline" }
     ],
     onSubmit: () => {
+      if (slashCommandModal && slashCommandMatches.length > 0) {
+        executeSelectedSlashCommand();
+        return;
+      }
       const value = inputField.editBuffer.getText();
       handleInput(value);
     }
@@ -77119,6 +77127,7 @@ function createMainUI() {
   });
   mainContainer.add(helpBarText);
   renderer.keyInput.on("keypress", handleKeypress);
+  renderer.keyInput.on("keypress", queueSlashCommandSync);
   inputField.focus();
 }
 function getStatusBarContent() {
@@ -77433,8 +77442,14 @@ async function handleInput(value) {
   const input = value.trim();
   if (!input)
     return;
+  if (input.startsWith("/") && await tryHandleSlashCommand(input)) {
+    inputField.setText("");
+    closeSlashCommandMenu();
+    return;
+  }
   inputField.setText("");
-  if (input.startsWith("!") || input.startsWith("/")) {
+  closeSlashCommandMenu();
+  if (input.startsWith("!")) {
     await handleSpecialCommand(input);
     return;
   }
@@ -77445,6 +77460,25 @@ async function handleInput(value) {
   }
   await translateAndProcess(input);
 }
+async function executeSelectedSlashCommand() {
+  if (slashCommandExecuting || !slashCommandModal || slashCommandMatches.length === 0)
+    return;
+  slashCommandExecuting = true;
+  try {
+    const selected = slashCommandMatches[Math.min(slashCommandSelectedIndex, slashCommandMatches.length - 1)];
+    inputField.setText("");
+    closeSlashCommandMenu();
+    await selected.action();
+  } finally {
+    slashCommandExecuting = false;
+  }
+}
+async function tryHandleSlashCommand(input) {
+  if (!input.startsWith("/"))
+    return false;
+  await handleSpecialCommand(input);
+  return true;
+}
 function isDirectCommand(input) {
   const directCommands = ["ls", "pwd", "cd", "cat", "echo", "mkdir", "touch", "rm", "cp", "mv", "git", "npm", "bun", "node", "python", "pip", "brew", "apt", "docker", "kubectl"];
   const firstWord = input.split(/\s+/)[0].toLowerCase();
@@ -77620,6 +77654,7 @@ async function handleSpecialCommand(input) {
   }
 }
 function clearChat() {
+  closeSlashCommandMenu();
   for (const msg of chatMessages) {
     chatScrollBox.remove(`msg-${msg.id}`);
   }
@@ -77923,7 +77958,10 @@ function showThemeSelector() {
   renderer.keyInput.on("keypress", escHandler);
   themeSelector.focus();
 }
-var commandPalette = null;
+var MODAL_LIST_WIDTH = 55;
+var MODAL_LIST_MAX_ITEMS = 12;
+var commandPaletteModal = null;
+var slashCommandModal = null;
 var commandPaletteQuery = "";
 var chordMode = "none";
 function cycleThinkingLevel() {
@@ -78031,56 +78069,236 @@ function getCommandPaletteOptions() {
     }
   ];
 }
-function showCommandPalette() {
-  if (commandPalette) {
-    return;
-  }
-  commandPaletteQuery = "";
-  const commands = getCommandPaletteOptions();
-  const paletteWidth = 55;
+function getSlashCommands() {
+  return [
+    {
+      slash: "help",
+      name: "Help",
+      description: "Show commands and shortcuts",
+      action: () => showHelp()
+    },
+    {
+      slash: "models",
+      name: "Models",
+      description: `Change model · ${currentModel.name}`,
+      action: () => showModelSelector()
+    },
+    {
+      slash: "providers",
+      name: "Providers",
+      description: `Switch provider · ${getProviderDisplayName(config2.provider)}`,
+      action: () => switchProvider()
+    },
+    {
+      slash: "themes",
+      name: "Themes",
+      description: `Change theme · ${getTheme().name}`,
+      action: () => showThemeSelector()
+    },
+    {
+      slash: "dry",
+      name: "Dry Run",
+      description: dryRunMode ? "Turn dry-run off" : "Turn dry-run on",
+      action: () => {
+        dryRunMode = !dryRunMode;
+        statusBarText.content = getStatusBarContent();
+        addSystemMessage(`Dry-run mode: ${dryRunMode ? "ON" : "OFF"}`);
+      }
+    },
+    {
+      slash: "thinking",
+      name: "Thinking",
+      description: `Cycle thinking level · ${config2.thinkingLevel}`,
+      action: () => cycleThinkingLevel()
+    },
+    {
+      slash: "config",
+      name: "Config",
+      description: "Show current configuration",
+      action: () => showConfig()
+    },
+    {
+      slash: "history",
+      name: "History",
+      description: `${history.length} commands`,
+      action: () => showHistory()
+    },
+    {
+      slash: "clear",
+      name: "Clear",
+      description: "Clear the chat history",
+      action: () => clearChat()
+    },
+    {
+      slash: "exit",
+      name: "Exit",
+      description: "Close magic-shell",
+      action: () => {
+        renderer.destroy();
+        process.exit(0);
+      }
+    }
+  ];
+}
+function getSlashCommandMatches(inputText) {
+  if (!inputText.startsWith("/"))
+    return [];
+  const slashBody = inputText.slice(1);
+  if (slashBody.includes(" "))
+    return [];
+  const query = slashBody.trim().toLowerCase();
+  return getSlashCommands().filter((cmd) => {
+    if (!query)
+      return true;
+    return `${cmd.slash} ${cmd.name} ${cmd.description}`.toLowerCase().includes(query);
+  });
+}
+function openModalList(config3) {
+  const theme = getTheme();
+  const width = MODAL_LIST_WIDTH;
   const termWidth = process.stdout.columns || 80;
-  const paletteLeft = Math.max(2, Math.floor((termWidth - paletteWidth) / 2));
+  const left = Math.max(2, Math.floor((termWidth - width) / 2));
+  const itemCount = Math.max(config3.options.length, 1);
+  const listHeight = Math.min(itemCount + 2, MODAL_LIST_MAX_ITEMS);
+  const containerHeight = listHeight + 2;
   const container = new BoxRenderable(renderer, {
-    id: "command-palette-container",
+    id: config3.containerId,
     position: "absolute",
-    left: paletteLeft,
+    left,
     top: 3,
-    width: paletteWidth,
-    height: Math.min(commands.length + 4, 16),
-    backgroundColor: "#1e293b",
+    width,
+    height: containerHeight,
+    backgroundColor: theme.colors.backgroundPanel,
     border: true,
-    borderColor: "#60a5fa",
+    borderColor: theme.colors.primary,
     borderStyle: "single",
-    title: "Commands",
+    title: config3.title,
     titleAlignment: "center",
     zIndex: 200,
     padding: 1
   });
   renderer.root.add(container);
-  commandPalette = new SelectRenderable(renderer, {
-    id: "command-palette-select",
+  const selector = new SelectRenderable(renderer, {
+    id: config3.selectorId,
     width: "100%",
-    height: Math.min(commands.length + 2, 12),
-    options: getCommandPaletteSelectOptions(),
+    height: listHeight,
+    options: config3.options,
     backgroundColor: "transparent",
     focusedBackgroundColor: "transparent",
-    selectedBackgroundColor: "#334155",
-    textColor: "#e2e8f0",
-    selectedTextColor: "#60a5fa",
-    descriptionColor: "#64748b",
-    selectedDescriptionColor: "#94a3b8",
+    selectedBackgroundColor: theme.colors.backgroundElement,
+    textColor: theme.colors.text,
+    selectedTextColor: theme.colors.primary,
+    descriptionColor: theme.colors.textMuted,
+    selectedDescriptionColor: theme.colors.textMuted,
     showDescription: true,
     wrapSelection: true
   });
-  container.add(commandPalette);
-  commandPalette.on(SelectRenderableEvents.ITEM_SELECTED, async (_2, option) => {
-    if (!option.value)
-      return;
-    const cmd = option.value;
-    closeCommandPalette();
-    await cmd.action();
+  container.add(selector);
+  const handle = {
+    containerId: config3.containerId,
+    container,
+    selector,
+    updateOptions(options, selectedIndex = 0) {
+      const count = Math.max(options.length, 1);
+      const newListHeight = Math.min(count + 2, MODAL_LIST_MAX_ITEMS);
+      selector.options = options;
+      selector.height = newListHeight;
+      container.height = newListHeight + 2;
+      selector.setSelectedIndex(Math.min(selectedIndex, Math.max(options.length - 1, 0)));
+    },
+    setSelectedIndex(index) {
+      selector.setSelectedIndex(index);
+    },
+    close() {
+      renderer.root.remove(config3.containerId);
+      inputField?.focus();
+    }
+  };
+  if (config3.onSelect) {
+    selector.on(SelectRenderableEvents.ITEM_SELECTED, async (index, option) => {
+      await config3.onSelect?.(index, option);
+    });
+  }
+  const initialIndex = config3.selectedIndex ?? 0;
+  if (config3.focusList !== false) {
+    selector.focus();
+  } else {
+    selector.setSelectedIndex(initialIndex);
+  }
+  return handle;
+}
+function getSlashCommandSelectOptions() {
+  return slashCommandMatches.map((cmd) => ({
+    name: `/${cmd.slash}`,
+    description: cmd.description,
+    value: cmd
+  }));
+}
+function closeSlashCommandMenu() {
+  if (slashCommandModal) {
+    slashCommandModal.close();
+    slashCommandModal = null;
+  }
+  slashCommandMatches = [];
+  slashCommandSelectedIndex = 0;
+}
+function updateSlashCommandModalOptions() {
+  if (!slashCommandModal)
+    return;
+  slashCommandModal.updateOptions(getSlashCommandSelectOptions(), slashCommandSelectedIndex);
+}
+function syncSlashCommandMenu() {
+  const inputText = inputField.editBuffer.getText();
+  const matches = getSlashCommandMatches(inputText);
+  if (matches.length === 0) {
+    closeSlashCommandMenu();
+    return;
+  }
+  slashCommandMatches = matches;
+  slashCommandSelectedIndex = Math.min(slashCommandSelectedIndex, slashCommandMatches.length - 1);
+  const options = getSlashCommandSelectOptions();
+  if (slashCommandModal) {
+    slashCommandModal.updateOptions(options, slashCommandSelectedIndex);
+    return;
+  }
+  slashCommandModal = openModalList({
+    containerId: "slash-command-modal",
+    selectorId: "slash-command-select",
+    title: "Commands",
+    options,
+    focusList: false,
+    selectedIndex: slashCommandSelectedIndex
+  });
+}
+function queueSlashCommandSync() {
+  if (slashCommandSyncQueued)
+    return;
+  slashCommandSyncQueued = true;
+  setTimeout(() => {
+    slashCommandSyncQueued = false;
+    if (inputField)
+      syncSlashCommandMenu();
+  }, 0);
+}
+function showCommandPalette() {
+  if (commandPaletteModal) {
+    return;
+  }
+  commandPaletteQuery = "";
+  commandPaletteModal = openModalList({
+    containerId: "command-palette-container",
+    selectorId: "command-palette-select",
+    title: "Commands",
+    options: getCommandPaletteSelectOptions(),
+    focusList: true,
+    onSelect: async (_2, option) => {
+      if (!option.value)
+        return;
+      const cmd = option.value;
+      closeCommandPalette();
+      await cmd.action();
+    }
   });
-  commandPalette.focus();
 }
 function getCommandPaletteSelectOptions() {
   const query = commandPaletteQuery.toLowerCase();
@@ -78103,21 +78321,41 @@ function getCommandPaletteSelectOptions() {
   }));
 }
 function updateCommandPaletteOptions() {
-  if (!commandPalette)
+  if (!commandPaletteModal)
     return;
-  commandPalette.options = getCommandPaletteSelectOptions();
-  commandPalette.setSelectedIndex(0);
+  commandPaletteModal.updateOptions(getCommandPaletteSelectOptions(), 0);
 }
 function closeCommandPalette() {
-  if (commandPalette) {
-    renderer.root.remove("command-palette-container");
-    commandPalette = null;
+  if (commandPaletteModal) {
+    commandPaletteModal.close();
+    commandPaletteModal = null;
     commandPaletteQuery = "";
-    inputField?.focus();
   }
 }
 function handleKeypress(key) {
   const commands = getCommandPaletteOptions();
+  if (slashCommandModal && slashCommandMatches.length > 0) {
+    if (key.name === "up") {
+      slashCommandSelectedIndex = slashCommandSelectedIndex === 0 ? slashCommandMatches.length - 1 : slashCommandSelectedIndex - 1;
+      updateSlashCommandModalOptions();
+      return;
+    }
+    if (key.name === "down") {
+      slashCommandSelectedIndex = (slashCommandSelectedIndex + 1) % slashCommandMatches.length;
+      updateSlashCommandModalOptions();
+      return;
+    }
+    if (key.name === "tab") {
+      inputField.setText(`/${slashCommandMatches[slashCommandSelectedIndex].slash}`);
+      syncSlashCommandMenu();
+      inputField.focus();
+      return;
+    }
+    if (key.name === "return" && !key.shift && !key.ctrl && !key.meta) {
+      executeSelectedSlashCommand();
+      return;
+    }
+  }
   if (key.ctrl && key.name === "p") {
     showCommandPalette();
     return;
@@ -78144,7 +78382,7 @@ function handleKeypress(key) {
     }
     return;
   }
-  if (commandPalette) {
+  if (commandPaletteModal) {
     if (key.name === "backspace" || key.name === "delete") {
       commandPaletteQuery = commandPaletteQuery.slice(0, -1);
       updateCommandPaletteOptions();
@@ -78158,10 +78396,14 @@ function handleKeypress(key) {
     }
   }
   if (key.ctrl && key.name === "c") {
-    if (commandPalette) {
+    if (commandPaletteModal) {
       closeCommandPalette();
       return;
     }
+    if (slashCommandMatches.length > 0) {
+      closeSlashCommandMenu();
+      return;
+    }
     if (modelSelector) {
       renderer.root.remove("model-selector-container");
       modelSelector = null;
@@ -78185,10 +78427,14 @@ function handleKeypress(key) {
   }
   if (key.name === "escape") {
     chordMode = "none";
-    if (commandPalette) {
+    if (commandPaletteModal) {
       closeCommandPalette();
       return;
     }
+    if (slashCommandMatches.length > 0) {
+      closeSlashCommandMenu();
+      return;
+    }
     if (modelSelector) {
       renderer.root.remove("model-selector-container");
       modelSelector = null;
@@ -78228,7 +78474,7 @@ function handleKeypress(key) {
       addSystemMessage(`Copied to clipboard: ${msg.command}`);
     }
   }
-  if (key.name === "o" && !awaitingConfirmation && !commandPalette && !modelSelector) {
+  if (key.name === "o" && !awaitingConfirmation && !commandPaletteModal && !modelSelector) {
     toggleLastResultExpand();
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@austinthesing/magic-shell",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "description": "Natural language to terminal commands with safety features. Supports OpenCode Zen, OpenRouter, AI gateways, Workers AI, and custom models.",
   "type": "module",
   "main": "dist/index.js",