@austinthesing/magic-shell 0.2.27 → 0.2.28

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,11 @@ var inputHintText;
 var helpBarText;
 var modelSelector = null;
 var providerSelector = null;
+var slashCommandContainer = null;
+var slashCommandSelector = null;
+var slashCommandMatches = [];
+var slashCommandSelectedIndex = 0;
+var slashCommandSyncQueued = false;
 var pendingMessageId = null;
 var awaitingConfirmation = false;
 function generateMessageId() {
@@ -77119,6 +77124,7 @@ function createMainUI() {
   });
   mainContainer.add(helpBarText);
   renderer.keyInput.on("keypress", handleKeypress);
+  renderer.keyInput.on("keypress", queueSlashCommandSync);
   inputField.focus();
 }
 function getStatusBarContent() {
@@ -77428,13 +77434,28 @@ function refreshThemeColors() {
   if (inputHintText) {
     inputHintText.content = getInputHintContent();
   }
+  if (slashCommandContainer) {
+    slashCommandContainer.borderColor = theme.colors.border;
+    slashCommandContainer.backgroundColor = theme.colors.backgroundPanel;
+  }
+  if (slashCommandSelector) {
+    slashCommandSelector.selectedBackgroundColor = theme.colors.backgroundElement;
+    slashCommandSelector.textColor = theme.colors.text;
+    slashCommandSelector.selectedTextColor = theme.colors.primary;
+    slashCommandSelector.descriptionColor = theme.colors.textMuted;
+    slashCommandSelector.selectedDescriptionColor = theme.colors.textMuted;
+  }
 }
 async function handleInput(value) {
   const input = value.trim();
   if (!input)
     return;
   inputField.setText("");
-  if (input.startsWith("!") || input.startsWith("/")) {
+  closeSlashCommandMenu();
+  if (input.startsWith("/") && await tryHandleSlashCommand(input)) {
+    return;
+  }
+  if (input.startsWith("!")) {
     await handleSpecialCommand(input);
     return;
   }
@@ -77445,6 +77466,18 @@ async function handleInput(value) {
   }
   await translateAndProcess(input);
 }
+async function tryHandleSlashCommand(input) {
+  if (!input.startsWith("/"))
+    return false;
+  const slashBody = input.slice(1).trim();
+  if (!slashBody.includes(" ") && slashCommandMatches.length > 0) {
+    const selected = slashCommandMatches[Math.min(slashCommandSelectedIndex, slashCommandMatches.length - 1)];
+    await handleSpecialCommand(`/${selected.slash}`);
+    return true;
+  }
+  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 +77653,7 @@ async function handleSpecialCommand(input) {
   }
 }
 function clearChat() {
+  closeSlashCommandMenu();
   for (const msg of chatMessages) {
     chatScrollBox.remove(`msg-${msg.id}`);
   }
@@ -78031,6 +78065,166 @@ function getCommandPaletteOptions() {
     }
   ];
 }
+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 ensureSlashCommandMenu() {
+  if (slashCommandContainer && slashCommandSelector)
+    return;
+  slashCommandContainer = new BoxRenderable(renderer, {
+    id: "slash-command-container",
+    width: "100%",
+    border: true,
+    borderColor: getTheme().colors.border,
+    borderStyle: "single",
+    backgroundColor: getTheme().colors.backgroundPanel,
+    paddingLeft: 1,
+    paddingRight: 1,
+    paddingTop: 0,
+    paddingBottom: 0,
+    marginTop: 1
+  });
+  inputContainer.add(slashCommandContainer);
+  slashCommandSelector = new SelectRenderable(renderer, {
+    id: "slash-command-select",
+    width: "100%",
+    height: 6,
+    options: [],
+    backgroundColor: "transparent",
+    focusedBackgroundColor: "transparent",
+    selectedBackgroundColor: getTheme().colors.backgroundElement,
+    textColor: getTheme().colors.text,
+    selectedTextColor: getTheme().colors.primary,
+    descriptionColor: getTheme().colors.textMuted,
+    selectedDescriptionColor: getTheme().colors.textMuted,
+    showDescription: true,
+    wrapSelection: true
+  });
+  slashCommandContainer.add(slashCommandSelector);
+}
+function updateSlashCommandMenuOptions() {
+  if (!slashCommandSelector)
+    return;
+  slashCommandSelector.options = slashCommandMatches.map((cmd) => ({
+    name: `/${cmd.slash}`,
+    description: cmd.description,
+    value: cmd
+  }));
+  slashCommandSelector.height = Math.min(Math.max(slashCommandMatches.length, 1), 6);
+  slashCommandSelector.setSelectedIndex(slashCommandSelectedIndex);
+}
+function closeSlashCommandMenu() {
+  if (slashCommandContainer) {
+    inputContainer.remove("slash-command-container");
+    slashCommandContainer = null;
+    slashCommandSelector = null;
+  }
+  slashCommandMatches = [];
+  slashCommandSelectedIndex = 0;
+}
+function syncSlashCommandMenu() {
+  const inputText = inputField.editBuffer.getText();
+  const matches = getSlashCommandMatches(inputText);
+  if (matches.length === 0) {
+    closeSlashCommandMenu();
+    return;
+  }
+  ensureSlashCommandMenu();
+  slashCommandMatches = matches;
+  slashCommandSelectedIndex = Math.min(slashCommandSelectedIndex, slashCommandMatches.length - 1);
+  updateSlashCommandMenuOptions();
+}
+function queueSlashCommandSync() {
+  if (slashCommandSyncQueued)
+    return;
+  slashCommandSyncQueued = true;
+  setTimeout(() => {
+    slashCommandSyncQueued = false;
+    if (inputField)
+      syncSlashCommandMenu();
+  }, 0);
+}
 function showCommandPalette() {
   if (commandPalette) {
     return;
@@ -78118,6 +78312,24 @@ function closeCommandPalette() {
 }
 function handleKeypress(key) {
   const commands = getCommandPaletteOptions();
+  if (slashCommandMatches.length > 0) {
+    if (key.name === "up") {
+      slashCommandSelectedIndex = slashCommandSelectedIndex === 0 ? slashCommandMatches.length - 1 : slashCommandSelectedIndex - 1;
+      updateSlashCommandMenuOptions();
+      return;
+    }
+    if (key.name === "down") {
+      slashCommandSelectedIndex = (slashCommandSelectedIndex + 1) % slashCommandMatches.length;
+      updateSlashCommandMenuOptions();
+      return;
+    }
+    if (key.name === "tab") {
+      inputField.setText(`/${slashCommandMatches[slashCommandSelectedIndex].slash}`);
+      syncSlashCommandMenu();
+      inputField.focus();
+      return;
+    }
+  }
   if (key.ctrl && key.name === "p") {
     showCommandPalette();
     return;
@@ -78162,6 +78374,10 @@ function handleKeypress(key) {
       closeCommandPalette();
       return;
     }
+    if (slashCommandMatches.length > 0) {
+      closeSlashCommandMenu();
+      return;
+    }
     if (modelSelector) {
       renderer.root.remove("model-selector-container");
       modelSelector = null;
@@ -78189,6 +78405,10 @@ function handleKeypress(key) {
       closeCommandPalette();
       return;
     }
+    if (slashCommandMatches.length > 0) {
+      closeSlashCommandMenu();
+      return;
+    }
     if (modelSelector) {
       renderer.root.remove("model-selector-container");
       modelSelector = null;

package/dist/tui.js

@@ -76817,6 +76817,11 @@ var inputHintText;
 var helpBarText;
 var modelSelector = null;
 var providerSelector = null;
+var slashCommandContainer = null;
+var slashCommandSelector = null;
+var slashCommandMatches = [];
+var slashCommandSelectedIndex = 0;
+var slashCommandSyncQueued = false;
 var pendingMessageId = null;
 var awaitingConfirmation = false;
 function generateMessageId() {
@@ -77119,6 +77124,7 @@ function createMainUI() {
   });
   mainContainer.add(helpBarText);
   renderer.keyInput.on("keypress", handleKeypress);
+  renderer.keyInput.on("keypress", queueSlashCommandSync);
   inputField.focus();
 }
 function getStatusBarContent() {
@@ -77428,13 +77434,28 @@ function refreshThemeColors() {
   if (inputHintText) {
     inputHintText.content = getInputHintContent();
   }
+  if (slashCommandContainer) {
+    slashCommandContainer.borderColor = theme.colors.border;
+    slashCommandContainer.backgroundColor = theme.colors.backgroundPanel;
+  }
+  if (slashCommandSelector) {
+    slashCommandSelector.selectedBackgroundColor = theme.colors.backgroundElement;
+    slashCommandSelector.textColor = theme.colors.text;
+    slashCommandSelector.selectedTextColor = theme.colors.primary;
+    slashCommandSelector.descriptionColor = theme.colors.textMuted;
+    slashCommandSelector.selectedDescriptionColor = theme.colors.textMuted;
+  }
 }
 async function handleInput(value) {
   const input = value.trim();
   if (!input)
     return;
   inputField.setText("");
-  if (input.startsWith("!") || input.startsWith("/")) {
+  closeSlashCommandMenu();
+  if (input.startsWith("/") && await tryHandleSlashCommand(input)) {
+    return;
+  }
+  if (input.startsWith("!")) {
     await handleSpecialCommand(input);
     return;
   }
@@ -77445,6 +77466,18 @@ async function handleInput(value) {
   }
   await translateAndProcess(input);
 }
+async function tryHandleSlashCommand(input) {
+  if (!input.startsWith("/"))
+    return false;
+  const slashBody = input.slice(1).trim();
+  if (!slashBody.includes(" ") && slashCommandMatches.length > 0) {
+    const selected = slashCommandMatches[Math.min(slashCommandSelectedIndex, slashCommandMatches.length - 1)];
+    await handleSpecialCommand(`/${selected.slash}`);
+    return true;
+  }
+  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 +77653,7 @@ async function handleSpecialCommand(input) {
   }
 }
 function clearChat() {
+  closeSlashCommandMenu();
   for (const msg of chatMessages) {
     chatScrollBox.remove(`msg-${msg.id}`);
   }
@@ -78031,6 +78065,166 @@ function getCommandPaletteOptions() {
     }
   ];
 }
+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 ensureSlashCommandMenu() {
+  if (slashCommandContainer && slashCommandSelector)
+    return;
+  slashCommandContainer = new BoxRenderable(renderer, {
+    id: "slash-command-container",
+    width: "100%",
+    border: true,
+    borderColor: getTheme().colors.border,
+    borderStyle: "single",
+    backgroundColor: getTheme().colors.backgroundPanel,
+    paddingLeft: 1,
+    paddingRight: 1,
+    paddingTop: 0,
+    paddingBottom: 0,
+    marginTop: 1
+  });
+  inputContainer.add(slashCommandContainer);
+  slashCommandSelector = new SelectRenderable(renderer, {
+    id: "slash-command-select",
+    width: "100%",
+    height: 6,
+    options: [],
+    backgroundColor: "transparent",
+    focusedBackgroundColor: "transparent",
+    selectedBackgroundColor: getTheme().colors.backgroundElement,
+    textColor: getTheme().colors.text,
+    selectedTextColor: getTheme().colors.primary,
+    descriptionColor: getTheme().colors.textMuted,
+    selectedDescriptionColor: getTheme().colors.textMuted,
+    showDescription: true,
+    wrapSelection: true
+  });
+  slashCommandContainer.add(slashCommandSelector);
+}
+function updateSlashCommandMenuOptions() {
+  if (!slashCommandSelector)
+    return;
+  slashCommandSelector.options = slashCommandMatches.map((cmd) => ({
+    name: `/${cmd.slash}`,
+    description: cmd.description,
+    value: cmd
+  }));
+  slashCommandSelector.height = Math.min(Math.max(slashCommandMatches.length, 1), 6);
+  slashCommandSelector.setSelectedIndex(slashCommandSelectedIndex);
+}
+function closeSlashCommandMenu() {
+  if (slashCommandContainer) {
+    inputContainer.remove("slash-command-container");
+    slashCommandContainer = null;
+    slashCommandSelector = null;
+  }
+  slashCommandMatches = [];
+  slashCommandSelectedIndex = 0;
+}
+function syncSlashCommandMenu() {
+  const inputText = inputField.editBuffer.getText();
+  const matches = getSlashCommandMatches(inputText);
+  if (matches.length === 0) {
+    closeSlashCommandMenu();
+    return;
+  }
+  ensureSlashCommandMenu();
+  slashCommandMatches = matches;
+  slashCommandSelectedIndex = Math.min(slashCommandSelectedIndex, slashCommandMatches.length - 1);
+  updateSlashCommandMenuOptions();
+}
+function queueSlashCommandSync() {
+  if (slashCommandSyncQueued)
+    return;
+  slashCommandSyncQueued = true;
+  setTimeout(() => {
+    slashCommandSyncQueued = false;
+    if (inputField)
+      syncSlashCommandMenu();
+  }, 0);
+}
 function showCommandPalette() {
   if (commandPalette) {
     return;
@@ -78118,6 +78312,24 @@ function closeCommandPalette() {
 }
 function handleKeypress(key) {
   const commands = getCommandPaletteOptions();
+  if (slashCommandMatches.length > 0) {
+    if (key.name === "up") {
+      slashCommandSelectedIndex = slashCommandSelectedIndex === 0 ? slashCommandMatches.length - 1 : slashCommandSelectedIndex - 1;
+      updateSlashCommandMenuOptions();
+      return;
+    }
+    if (key.name === "down") {
+      slashCommandSelectedIndex = (slashCommandSelectedIndex + 1) % slashCommandMatches.length;
+      updateSlashCommandMenuOptions();
+      return;
+    }
+    if (key.name === "tab") {
+      inputField.setText(`/${slashCommandMatches[slashCommandSelectedIndex].slash}`);
+      syncSlashCommandMenu();
+      inputField.focus();
+      return;
+    }
+  }
   if (key.ctrl && key.name === "p") {
     showCommandPalette();
     return;
@@ -78162,6 +78374,10 @@ function handleKeypress(key) {
       closeCommandPalette();
       return;
     }
+    if (slashCommandMatches.length > 0) {
+      closeSlashCommandMenu();
+      return;
+    }
     if (modelSelector) {
       renderer.root.remove("model-selector-container");
       modelSelector = null;
@@ -78189,6 +78405,10 @@ function handleKeypress(key) {
       closeCommandPalette();
       return;
     }
+    if (slashCommandMatches.length > 0) {
+      closeSlashCommandMenu();
+      return;
+    }
     if (modelSelector) {
       renderer.root.remove("model-selector-container");
       modelSelector = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@austinthesing/magic-shell",
-  "version": "0.2.27",
+  "version": "0.2.28",
   "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",