@austinthesing/magic-shell 0.2.28 → 0.2.29

package/dist/cli.js

@@ -76817,11 +76817,10 @@ 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 slashCommandExecuting = false;
 var pendingMessageId = null;
 var awaitingConfirmation = false;
 function generateMessageId() {
@@ -77106,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);
     }
@@ -77434,27 +77437,18 @@ 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("");
-  closeSlashCommandMenu();
   if (input.startsWith("/") && await tryHandleSlashCommand(input)) {
+    inputField.setText("");
+    closeSlashCommandMenu();
     return;
   }
+  inputField.setText("");
+  closeSlashCommandMenu();
   if (input.startsWith("!")) {
     await handleSpecialCommand(input);
     return;
@@ -77466,15 +77460,22 @@ 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;
-  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;
 }
@@ -77957,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() {
@@ -78149,60 +78153,100 @@ function getSlashCommandMatches(inputText) {
     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%",
+function openModalList(config3) {
+  const theme = getTheme();
+  const width = MODAL_LIST_WIDTH;
+  const termWidth = process.stdout.columns || 80;
+  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: config3.containerId,
+    position: "absolute",
+    left,
+    top: 3,
+    width,
+    height: containerHeight,
+    backgroundColor: theme.colors.backgroundPanel,
     border: true,
-    borderColor: getTheme().colors.border,
+    borderColor: theme.colors.primary,
     borderStyle: "single",
-    backgroundColor: getTheme().colors.backgroundPanel,
-    paddingLeft: 1,
-    paddingRight: 1,
-    paddingTop: 0,
-    paddingBottom: 0,
-    marginTop: 1
+    title: config3.title,
+    titleAlignment: "center",
+    zIndex: 200,
+    padding: 1
   });
-  inputContainer.add(slashCommandContainer);
-  slashCommandSelector = new SelectRenderable(renderer, {
-    id: "slash-command-select",
+  renderer.root.add(container);
+  const selector = new SelectRenderable(renderer, {
+    id: config3.selectorId,
     width: "100%",
-    height: 6,
-    options: [],
+    height: listHeight,
+    options: config3.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,
+    selectedBackgroundColor: theme.colors.backgroundElement,
+    textColor: theme.colors.text,
+    selectedTextColor: theme.colors.primary,
+    descriptionColor: theme.colors.textMuted,
+    selectedDescriptionColor: theme.colors.textMuted,
     showDescription: true,
     wrapSelection: true
   });
-  slashCommandContainer.add(slashCommandSelector);
+  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 updateSlashCommandMenuOptions() {
-  if (!slashCommandSelector)
-    return;
-  slashCommandSelector.options = slashCommandMatches.map((cmd) => ({
+function getSlashCommandSelectOptions() {
+  return 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;
+  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);
@@ -78210,10 +78254,21 @@ function syncSlashCommandMenu() {
     closeSlashCommandMenu();
     return;
   }
-  ensureSlashCommandMenu();
   slashCommandMatches = matches;
   slashCommandSelectedIndex = Math.min(slashCommandSelectedIndex, slashCommandMatches.length - 1);
-  updateSlashCommandMenuOptions();
+  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)
@@ -78226,55 +78281,24 @@ function queueSlashCommandSync() {
   }, 0);
 }
 function showCommandPalette() {
-  if (commandPalette) {
+  if (commandPaletteModal) {
     return;
   }
   commandPaletteQuery = "";
-  const commands = getCommandPaletteOptions();
-  const paletteWidth = 55;
-  const termWidth = process.stdout.columns || 80;
-  const paletteLeft = Math.max(2, Math.floor((termWidth - paletteWidth) / 2));
-  const container = new BoxRenderable(renderer, {
-    id: "command-palette-container",
-    position: "absolute",
-    left: paletteLeft,
-    top: 3,
-    width: paletteWidth,
-    height: Math.min(commands.length + 4, 16),
-    backgroundColor: "#1e293b",
-    border: true,
-    borderColor: "#60a5fa",
-    borderStyle: "single",
+  commandPaletteModal = openModalList({
+    containerId: "command-palette-container",
+    selectorId: "command-palette-select",
     title: "Commands",
-    titleAlignment: "center",
-    zIndex: 200,
-    padding: 1
-  });
-  renderer.root.add(container);
-  commandPalette = new SelectRenderable(renderer, {
-    id: "command-palette-select",
-    width: "100%",
-    height: Math.min(commands.length + 2, 12),
     options: getCommandPaletteSelectOptions(),
-    backgroundColor: "transparent",
-    focusedBackgroundColor: "transparent",
-    selectedBackgroundColor: "#334155",
-    textColor: "#e2e8f0",
-    selectedTextColor: "#60a5fa",
-    descriptionColor: "#64748b",
-    selectedDescriptionColor: "#94a3b8",
-    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();
+    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();
@@ -78297,30 +78321,28 @@ 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 (slashCommandMatches.length > 0) {
+  if (slashCommandModal && slashCommandMatches.length > 0) {
     if (key.name === "up") {
       slashCommandSelectedIndex = slashCommandSelectedIndex === 0 ? slashCommandMatches.length - 1 : slashCommandSelectedIndex - 1;
-      updateSlashCommandMenuOptions();
+      updateSlashCommandModalOptions();
       return;
     }
     if (key.name === "down") {
       slashCommandSelectedIndex = (slashCommandSelectedIndex + 1) % slashCommandMatches.length;
-      updateSlashCommandMenuOptions();
+      updateSlashCommandModalOptions();
       return;
     }
     if (key.name === "tab") {
@@ -78329,6 +78351,10 @@ function handleKeypress(key) {
       inputField.focus();
       return;
     }
+    if (key.name === "return" && !key.shift && !key.ctrl && !key.meta) {
+      executeSelectedSlashCommand();
+      return;
+    }
   }
   if (key.ctrl && key.name === "p") {
     showCommandPalette();
@@ -78356,7 +78382,7 @@ function handleKeypress(key) {
     }
     return;
   }
-  if (commandPalette) {
+  if (commandPaletteModal) {
     if (key.name === "backspace" || key.name === "delete") {
       commandPaletteQuery = commandPaletteQuery.slice(0, -1);
       updateCommandPaletteOptions();
@@ -78370,7 +78396,7 @@ function handleKeypress(key) {
     }
   }
   if (key.ctrl && key.name === "c") {
-    if (commandPalette) {
+    if (commandPaletteModal) {
       closeCommandPalette();
       return;
     }
@@ -78401,7 +78427,7 @@ function handleKeypress(key) {
   }
   if (key.name === "escape") {
     chordMode = "none";
-    if (commandPalette) {
+    if (commandPaletteModal) {
       closeCommandPalette();
       return;
     }
@@ -78448,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,11 +76817,10 @@ 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 slashCommandExecuting = false;
 var pendingMessageId = null;
 var awaitingConfirmation = false;
 function generateMessageId() {
@@ -77106,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);
     }
@@ -77434,27 +77437,18 @@ 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("");
-  closeSlashCommandMenu();
   if (input.startsWith("/") && await tryHandleSlashCommand(input)) {
+    inputField.setText("");
+    closeSlashCommandMenu();
     return;
   }
+  inputField.setText("");
+  closeSlashCommandMenu();
   if (input.startsWith("!")) {
     await handleSpecialCommand(input);
     return;
@@ -77466,15 +77460,22 @@ 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;
-  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;
 }
@@ -77957,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() {
@@ -78149,60 +78153,100 @@ function getSlashCommandMatches(inputText) {
     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%",
+function openModalList(config3) {
+  const theme = getTheme();
+  const width = MODAL_LIST_WIDTH;
+  const termWidth = process.stdout.columns || 80;
+  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: config3.containerId,
+    position: "absolute",
+    left,
+    top: 3,
+    width,
+    height: containerHeight,
+    backgroundColor: theme.colors.backgroundPanel,
     border: true,
-    borderColor: getTheme().colors.border,
+    borderColor: theme.colors.primary,
     borderStyle: "single",
-    backgroundColor: getTheme().colors.backgroundPanel,
-    paddingLeft: 1,
-    paddingRight: 1,
-    paddingTop: 0,
-    paddingBottom: 0,
-    marginTop: 1
+    title: config3.title,
+    titleAlignment: "center",
+    zIndex: 200,
+    padding: 1
   });
-  inputContainer.add(slashCommandContainer);
-  slashCommandSelector = new SelectRenderable(renderer, {
-    id: "slash-command-select",
+  renderer.root.add(container);
+  const selector = new SelectRenderable(renderer, {
+    id: config3.selectorId,
     width: "100%",
-    height: 6,
-    options: [],
+    height: listHeight,
+    options: config3.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,
+    selectedBackgroundColor: theme.colors.backgroundElement,
+    textColor: theme.colors.text,
+    selectedTextColor: theme.colors.primary,
+    descriptionColor: theme.colors.textMuted,
+    selectedDescriptionColor: theme.colors.textMuted,
     showDescription: true,
     wrapSelection: true
   });
-  slashCommandContainer.add(slashCommandSelector);
+  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 updateSlashCommandMenuOptions() {
-  if (!slashCommandSelector)
-    return;
-  slashCommandSelector.options = slashCommandMatches.map((cmd) => ({
+function getSlashCommandSelectOptions() {
+  return 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;
+  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);
@@ -78210,10 +78254,21 @@ function syncSlashCommandMenu() {
     closeSlashCommandMenu();
     return;
   }
-  ensureSlashCommandMenu();
   slashCommandMatches = matches;
   slashCommandSelectedIndex = Math.min(slashCommandSelectedIndex, slashCommandMatches.length - 1);
-  updateSlashCommandMenuOptions();
+  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)
@@ -78226,55 +78281,24 @@ function queueSlashCommandSync() {
   }, 0);
 }
 function showCommandPalette() {
-  if (commandPalette) {
+  if (commandPaletteModal) {
     return;
   }
   commandPaletteQuery = "";
-  const commands = getCommandPaletteOptions();
-  const paletteWidth = 55;
-  const termWidth = process.stdout.columns || 80;
-  const paletteLeft = Math.max(2, Math.floor((termWidth - paletteWidth) / 2));
-  const container = new BoxRenderable(renderer, {
-    id: "command-palette-container",
-    position: "absolute",
-    left: paletteLeft,
-    top: 3,
-    width: paletteWidth,
-    height: Math.min(commands.length + 4, 16),
-    backgroundColor: "#1e293b",
-    border: true,
-    borderColor: "#60a5fa",
-    borderStyle: "single",
+  commandPaletteModal = openModalList({
+    containerId: "command-palette-container",
+    selectorId: "command-palette-select",
     title: "Commands",
-    titleAlignment: "center",
-    zIndex: 200,
-    padding: 1
-  });
-  renderer.root.add(container);
-  commandPalette = new SelectRenderable(renderer, {
-    id: "command-palette-select",
-    width: "100%",
-    height: Math.min(commands.length + 2, 12),
     options: getCommandPaletteSelectOptions(),
-    backgroundColor: "transparent",
-    focusedBackgroundColor: "transparent",
-    selectedBackgroundColor: "#334155",
-    textColor: "#e2e8f0",
-    selectedTextColor: "#60a5fa",
-    descriptionColor: "#64748b",
-    selectedDescriptionColor: "#94a3b8",
-    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();
+    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();
@@ -78297,30 +78321,28 @@ 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 (slashCommandMatches.length > 0) {
+  if (slashCommandModal && slashCommandMatches.length > 0) {
     if (key.name === "up") {
       slashCommandSelectedIndex = slashCommandSelectedIndex === 0 ? slashCommandMatches.length - 1 : slashCommandSelectedIndex - 1;
-      updateSlashCommandMenuOptions();
+      updateSlashCommandModalOptions();
       return;
     }
     if (key.name === "down") {
       slashCommandSelectedIndex = (slashCommandSelectedIndex + 1) % slashCommandMatches.length;
-      updateSlashCommandMenuOptions();
+      updateSlashCommandModalOptions();
       return;
     }
     if (key.name === "tab") {
@@ -78329,6 +78351,10 @@ function handleKeypress(key) {
       inputField.focus();
       return;
     }
+    if (key.name === "return" && !key.shift && !key.ctrl && !key.meta) {
+      executeSelectedSlashCommand();
+      return;
+    }
   }
   if (key.ctrl && key.name === "p") {
     showCommandPalette();
@@ -78356,7 +78382,7 @@ function handleKeypress(key) {
     }
     return;
   }
-  if (commandPalette) {
+  if (commandPaletteModal) {
     if (key.name === "backspace" || key.name === "delete") {
       commandPaletteQuery = commandPaletteQuery.slice(0, -1);
       updateCommandPaletteOptions();
@@ -78370,7 +78396,7 @@ function handleKeypress(key) {
     }
   }
   if (key.ctrl && key.name === "c") {
-    if (commandPalette) {
+    if (commandPaletteModal) {
       closeCommandPalette();
       return;
     }
@@ -78401,7 +78427,7 @@ function handleKeypress(key) {
   }
   if (key.name === "escape") {
     chordMode = "none";
-    if (commandPalette) {
+    if (commandPaletteModal) {
       closeCommandPalette();
       return;
     }
@@ -78448,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.28",
+  "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",