@austinthesing/magic-shell 0.2.7 → 0.2.8

package/dist/cli.js

@@ -20475,6 +20475,523 @@ class EditBufferRenderable extends Renderable {
     }
   }
 }
+var defaultTextareaKeybindings = [
+  { name: "left", action: "move-left" },
+  { name: "right", action: "move-right" },
+  { name: "up", action: "move-up" },
+  { name: "down", action: "move-down" },
+  { name: "left", shift: true, action: "select-left" },
+  { name: "right", shift: true, action: "select-right" },
+  { name: "up", shift: true, action: "select-up" },
+  { name: "down", shift: true, action: "select-down" },
+  { name: "home", action: "buffer-home" },
+  { name: "end", action: "buffer-end" },
+  { name: "home", shift: true, action: "select-buffer-home" },
+  { name: "end", shift: true, action: "select-buffer-end" },
+  { name: "a", ctrl: true, action: "line-home" },
+  { name: "e", ctrl: true, action: "line-end" },
+  { name: "a", ctrl: true, shift: true, action: "select-line-home" },
+  { name: "e", ctrl: true, shift: true, action: "select-line-end" },
+  { name: "a", meta: true, action: "visual-line-home" },
+  { name: "e", meta: true, action: "visual-line-end" },
+  { name: "a", meta: true, shift: true, action: "select-visual-line-home" },
+  { name: "e", meta: true, shift: true, action: "select-visual-line-end" },
+  { name: "f", ctrl: true, action: "move-right" },
+  { name: "b", ctrl: true, action: "move-left" },
+  { name: "w", ctrl: true, action: "delete-word-backward" },
+  { name: "backspace", ctrl: true, action: "delete-word-backward" },
+  { name: "d", meta: true, action: "delete-word-forward" },
+  { name: "delete", meta: true, action: "delete-word-forward" },
+  { name: "delete", ctrl: true, action: "delete-word-forward" },
+  { name: "d", ctrl: true, shift: true, action: "delete-line" },
+  { name: "k", ctrl: true, action: "delete-to-line-end" },
+  { name: "u", ctrl: true, action: "delete-to-line-start" },
+  { name: "backspace", action: "backspace" },
+  { name: "backspace", shift: true, action: "backspace" },
+  { name: "d", ctrl: true, action: "delete" },
+  { name: "delete", action: "delete" },
+  { name: "delete", shift: true, action: "delete" },
+  { name: "return", action: "newline" },
+  { name: "linefeed", action: "newline" },
+  { name: "return", meta: true, action: "submit" },
+  { name: "-", ctrl: true, action: "undo" },
+  { name: ".", ctrl: true, action: "redo" },
+  { name: "z", super: true, action: "undo" },
+  { name: "z", super: true, shift: true, action: "redo" },
+  { name: "f", meta: true, action: "word-forward" },
+  { name: "b", meta: true, action: "word-backward" },
+  { name: "right", meta: true, action: "word-forward" },
+  { name: "left", meta: true, action: "word-backward" },
+  { name: "right", ctrl: true, action: "word-forward" },
+  { name: "left", ctrl: true, action: "word-backward" },
+  { name: "f", meta: true, shift: true, action: "select-word-forward" },
+  { name: "b", meta: true, shift: true, action: "select-word-backward" },
+  { name: "right", meta: true, shift: true, action: "select-word-forward" },
+  { name: "left", meta: true, shift: true, action: "select-word-backward" },
+  { name: "backspace", meta: true, action: "delete-word-backward" },
+  { name: "left", super: true, action: "visual-line-home" },
+  { name: "right", super: true, action: "visual-line-end" },
+  { name: "up", super: true, action: "buffer-home" },
+  { name: "down", super: true, action: "buffer-end" },
+  { name: "left", super: true, shift: true, action: "select-visual-line-home" },
+  { name: "right", super: true, shift: true, action: "select-visual-line-end" },
+  { name: "up", super: true, shift: true, action: "select-buffer-home" },
+  { name: "down", super: true, shift: true, action: "select-buffer-end" }
+];
+
+class TextareaRenderable extends EditBufferRenderable {
+  _placeholder;
+  _unfocusedBackgroundColor;
+  _unfocusedTextColor;
+  _focusedBackgroundColor;
+  _focusedTextColor;
+  _keyBindingsMap;
+  _keyAliasMap;
+  _keyBindings;
+  _actionHandlers;
+  _initialValueSet = false;
+  _submitListener = undefined;
+  static defaults = {
+    backgroundColor: "transparent",
+    textColor: "#FFFFFF",
+    focusedBackgroundColor: "transparent",
+    focusedTextColor: "#FFFFFF",
+    placeholder: null
+  };
+  constructor(ctx, options) {
+    const defaults = TextareaRenderable.defaults;
+    const baseOptions = {
+      ...options,
+      backgroundColor: options.backgroundColor || defaults.backgroundColor,
+      textColor: options.textColor || defaults.textColor
+    };
+    super(ctx, baseOptions);
+    this._unfocusedBackgroundColor = parseColor(options.backgroundColor || defaults.backgroundColor);
+    this._unfocusedTextColor = parseColor(options.textColor || defaults.textColor);
+    this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || options.backgroundColor || defaults.focusedBackgroundColor);
+    this._focusedTextColor = parseColor(options.focusedTextColor || options.textColor || defaults.focusedTextColor);
+    this._placeholder = options.placeholder ?? defaults.placeholder;
+    this._keyAliasMap = mergeKeyAliases(defaultKeyAliases, options.keyAliasMap || {});
+    this._keyBindings = options.keyBindings || [];
+    const mergedBindings = mergeKeyBindings(defaultTextareaKeybindings, this._keyBindings);
+    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings, this._keyAliasMap);
+    this._actionHandlers = this.buildActionHandlers();
+    this._submitListener = options.onSubmit;
+    if (options.initialValue) {
+      this.setText(options.initialValue);
+      this._initialValueSet = true;
+    }
+    this.updateColors();
+    this.applyPlaceholder(this._placeholder);
+  }
+  applyPlaceholder(placeholder) {
+    if (placeholder === null) {
+      this.editorView.setPlaceholderStyledText([]);
+      return;
+    }
+    if (typeof placeholder === "string") {
+      const defaultGray = fg("#666666");
+      const chunks = [defaultGray(placeholder)];
+      this.editorView.setPlaceholderStyledText(chunks);
+    } else {
+      this.editorView.setPlaceholderStyledText(placeholder.chunks);
+    }
+  }
+  buildActionHandlers() {
+    return new Map([
+      ["move-left", () => this.moveCursorLeft()],
+      ["move-right", () => this.moveCursorRight()],
+      ["move-up", () => this.moveCursorUp()],
+      ["move-down", () => this.moveCursorDown()],
+      ["select-left", () => this.moveCursorLeft({ select: true })],
+      ["select-right", () => this.moveCursorRight({ select: true })],
+      ["select-up", () => this.moveCursorUp({ select: true })],
+      ["select-down", () => this.moveCursorDown({ select: true })],
+      ["line-home", () => this.gotoLineHome()],
+      ["line-end", () => this.gotoLineEnd()],
+      ["select-line-home", () => this.gotoLineHome({ select: true })],
+      ["select-line-end", () => this.gotoLineEnd({ select: true })],
+      ["visual-line-home", () => this.gotoVisualLineHome()],
+      ["visual-line-end", () => this.gotoVisualLineEnd()],
+      ["select-visual-line-home", () => this.gotoVisualLineHome({ select: true })],
+      ["select-visual-line-end", () => this.gotoVisualLineEnd({ select: true })],
+      ["select-buffer-home", () => this.gotoBufferHome({ select: true })],
+      ["select-buffer-end", () => this.gotoBufferEnd({ select: true })],
+      ["buffer-home", () => this.gotoBufferHome()],
+      ["buffer-end", () => this.gotoBufferEnd()],
+      ["delete-line", () => this.deleteLine()],
+      ["delete-to-line-end", () => this.deleteToLineEnd()],
+      ["delete-to-line-start", () => this.deleteToLineStart()],
+      ["backspace", () => this.deleteCharBackward()],
+      ["delete", () => this.deleteChar()],
+      ["newline", () => this.newLine()],
+      ["undo", () => this.undo()],
+      ["redo", () => this.redo()],
+      ["word-forward", () => this.moveWordForward()],
+      ["word-backward", () => this.moveWordBackward()],
+      ["select-word-forward", () => this.moveWordForward({ select: true })],
+      ["select-word-backward", () => this.moveWordBackward({ select: true })],
+      ["delete-word-forward", () => this.deleteWordForward()],
+      ["delete-word-backward", () => this.deleteWordBackward()],
+      ["submit", () => this.submit()]
+    ]);
+  }
+  handlePaste(event) {
+    this.insertText(event.text);
+  }
+  handleKeyPress(key) {
+    const bindingKey = getKeyBindingKey({
+      name: key.name,
+      ctrl: key.ctrl,
+      shift: key.shift,
+      meta: key.meta,
+      super: key.super,
+      action: "move-left"
+    });
+    const action = this._keyBindingsMap.get(bindingKey);
+    if (action) {
+      const handler = this._actionHandlers.get(action);
+      if (handler) {
+        return handler();
+      }
+    }
+    if (!key.ctrl && !key.meta && !key.super && !key.hyper) {
+      if (key.name === "space") {
+        this.insertText(" ");
+        return true;
+      }
+      if (key.sequence) {
+        const firstCharCode = key.sequence.charCodeAt(0);
+        if (firstCharCode < 32) {
+          return false;
+        }
+        if (firstCharCode === 127) {
+          return false;
+        }
+        this.insertText(key.sequence);
+        return true;
+      }
+    }
+    return false;
+  }
+  updateColors() {
+    const effectiveBg = this._focused ? this._focusedBackgroundColor : this._unfocusedBackgroundColor;
+    const effectiveFg = this._focused ? this._focusedTextColor : this._unfocusedTextColor;
+    super.backgroundColor = effectiveBg;
+    super.textColor = effectiveFg;
+  }
+  insertChar(char) {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+    }
+    this.editBuffer.insertChar(char);
+    this.requestRender();
+  }
+  insertText(text) {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+    }
+    this.editBuffer.insertText(text);
+    this.requestRender();
+  }
+  deleteChar() {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+      return true;
+    }
+    this._ctx.clearSelection();
+    this.editBuffer.deleteChar();
+    this.requestRender();
+    return true;
+  }
+  deleteCharBackward() {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+      return true;
+    }
+    this._ctx.clearSelection();
+    this.editBuffer.deleteCharBackward();
+    this.requestRender();
+    return true;
+  }
+  deleteSelectedText() {
+    this.editorView.deleteSelectedText();
+    this._ctx.clearSelection();
+    this.requestRender();
+  }
+  newLine() {
+    this._ctx.clearSelection();
+    this.editBuffer.newLine();
+    this.requestRender();
+    return true;
+  }
+  deleteLine() {
+    this._ctx.clearSelection();
+    this.editBuffer.deleteLine();
+    this.requestRender();
+    return true;
+  }
+  moveCursorLeft(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    this.editBuffer.moveCursorLeft();
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  moveCursorRight(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    this.editBuffer.moveCursorRight();
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  moveCursorUp(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    this.editorView.moveUpVisual();
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  moveCursorDown(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    this.editorView.moveDownVisual();
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoLine(line) {
+    this.editBuffer.gotoLine(line);
+    this.requestRender();
+  }
+  gotoLineHome(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    const cursor = this.editorView.getCursor();
+    if (cursor.col === 0 && cursor.row > 0) {
+      this.editBuffer.setCursor(cursor.row - 1, 0);
+      const prevLineEol = this.editBuffer.getEOL();
+      this.editBuffer.setCursor(prevLineEol.row, prevLineEol.col);
+    } else {
+      this.editBuffer.setCursor(cursor.row, 0);
+    }
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoLineEnd(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    const cursor = this.editorView.getCursor();
+    const eol = this.editBuffer.getEOL();
+    const lineCount = this.editBuffer.getLineCount();
+    if (cursor.col === eol.col && cursor.row < lineCount - 1) {
+      this.editBuffer.setCursor(cursor.row + 1, 0);
+    } else {
+      this.editBuffer.setCursor(eol.row, eol.col);
+    }
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoVisualLineHome(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    const sol = this.editorView.getVisualSOL();
+    this.editBuffer.setCursor(sol.logicalRow, sol.logicalCol);
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoVisualLineEnd(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    const eol = this.editorView.getVisualEOL();
+    this.editBuffer.setCursor(eol.logicalRow, eol.logicalCol);
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoBufferHome(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    this.editBuffer.setCursor(0, 0);
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoBufferEnd(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    this.editBuffer.gotoLine(999999);
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  deleteToLineEnd() {
+    const cursor = this.editorView.getCursor();
+    const eol = this.editBuffer.getEOL();
+    if (eol.col > cursor.col) {
+      this.editBuffer.deleteRange(cursor.row, cursor.col, eol.row, eol.col);
+    }
+    this.requestRender();
+    return true;
+  }
+  deleteToLineStart() {
+    const cursor = this.editorView.getCursor();
+    if (cursor.col > 0) {
+      this.editBuffer.deleteRange(cursor.row, 0, cursor.row, cursor.col);
+    }
+    this.requestRender();
+    return true;
+  }
+  undo() {
+    this._ctx.clearSelection();
+    this.editBuffer.undo();
+    this.requestRender();
+    return true;
+  }
+  redo() {
+    this._ctx.clearSelection();
+    this.editBuffer.redo();
+    this.requestRender();
+    return true;
+  }
+  moveWordForward(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    const nextWord = this.editBuffer.getNextWordBoundary();
+    this.editBuffer.setCursorByOffset(nextWord.offset);
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  moveWordBackward(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    const prevWord = this.editBuffer.getPrevWordBoundary();
+    this.editBuffer.setCursorByOffset(prevWord.offset);
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  deleteWordForward() {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+      return true;
+    }
+    const currentCursor = this.editBuffer.getCursorPosition();
+    const nextWord = this.editBuffer.getNextWordBoundary();
+    if (nextWord.offset > currentCursor.offset) {
+      this.editBuffer.deleteRange(currentCursor.row, currentCursor.col, nextWord.row, nextWord.col);
+    }
+    this._ctx.clearSelection();
+    this.requestRender();
+    return true;
+  }
+  deleteWordBackward() {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+      return true;
+    }
+    const currentCursor = this.editBuffer.getCursorPosition();
+    const prevWord = this.editBuffer.getPrevWordBoundary();
+    if (prevWord.offset < currentCursor.offset) {
+      this.editBuffer.deleteRange(prevWord.row, prevWord.col, currentCursor.row, currentCursor.col);
+    }
+    this._ctx.clearSelection();
+    this.requestRender();
+    return true;
+  }
+  focus() {
+    super.focus();
+    this.updateColors();
+  }
+  blur() {
+    super.blur();
+    if (!this.isDestroyed) {
+      this.updateColors();
+    }
+  }
+  get placeholder() {
+    return this._placeholder;
+  }
+  set placeholder(value) {
+    if (this._placeholder !== value) {
+      this._placeholder = value;
+      this.applyPlaceholder(value);
+      this.requestRender();
+    }
+  }
+  get backgroundColor() {
+    return this._unfocusedBackgroundColor;
+  }
+  set backgroundColor(value) {
+    const newColor = parseColor(value ?? TextareaRenderable.defaults.backgroundColor);
+    if (this._unfocusedBackgroundColor !== newColor) {
+      this._unfocusedBackgroundColor = newColor;
+      this.updateColors();
+    }
+  }
+  get textColor() {
+    return this._unfocusedTextColor;
+  }
+  set textColor(value) {
+    const newColor = parseColor(value ?? TextareaRenderable.defaults.textColor);
+    if (this._unfocusedTextColor !== newColor) {
+      this._unfocusedTextColor = newColor;
+      this.updateColors();
+    }
+  }
+  set focusedBackgroundColor(value) {
+    const newColor = parseColor(value ?? TextareaRenderable.defaults.focusedBackgroundColor);
+    if (this._focusedBackgroundColor !== newColor) {
+      this._focusedBackgroundColor = newColor;
+      this.updateColors();
+    }
+  }
+  set focusedTextColor(value) {
+    const newColor = parseColor(value ?? TextareaRenderable.defaults.focusedTextColor);
+    if (this._focusedTextColor !== newColor) {
+      this._focusedTextColor = newColor;
+      this.updateColors();
+    }
+  }
+  set initialValue(value) {
+    if (!this._initialValueSet) {
+      this.setText(value);
+      this._initialValueSet = true;
+    }
+  }
+  submit() {
+    if (this._submitListener) {
+      this._submitListener({});
+    }
+    return true;
+  }
+  set onSubmit(handler) {
+    this._submitListener = handler;
+  }
+  get onSubmit() {
+    return this._submitListener;
+  }
+  set keyBindings(bindings) {
+    this._keyBindings = bindings;
+    const mergedBindings = mergeKeyBindings(defaultTextareaKeybindings, bindings);
+    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings, this._keyAliasMap);
+  }
+  set keyAliasMap(aliases) {
+    this._keyAliasMap = mergeKeyAliases(defaultKeyAliases, aliases);
+    const mergedBindings = mergeKeyBindings(defaultTextareaKeybindings, this._keyBindings);
+    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings, this._keyAliasMap);
+  }
+  get extmarks() {
+    return this.editorView.extmarks;
+  }
+}
 
 // src/cli.ts
 import { spawn } from "child_process";
@@ -22106,6 +22623,8 @@ var headerText;
 var statusBarText;
 var chatScrollBox;
 var inputField;
+var inputContainer;
+var inputHintText;
 var helpBarText;
 var modelSelector = null;
 var providerSelector = null;
@@ -22333,43 +22852,53 @@ function createMainUI() {
   });
   mainContainer.add(chatScrollBox);
   addSystemMessage(getWelcomeMessage());
-  const inputRow = new BoxRenderable(renderer, {
-    id: "input-row",
-    flexDirection: "row",
+  inputContainer = new BoxRenderable(renderer, {
+    id: "input-container",
+    flexDirection: "column",
     width: "100%",
     marginTop: 1,
-    alignItems: "center"
-  });
-  mainContainer.add(inputRow);
-  const promptText = new TextRenderable(renderer, {
-    id: "prompt-text",
-    content: t`${fg(theme.colors.primary)("~>")} `,
-    width: 3,
-    height: 1
+    border: true,
+    borderColor: theme.colors.primary,
+    borderStyle: "rounded",
+    paddingLeft: 1,
+    paddingRight: 1,
+    paddingTop: 0,
+    paddingBottom: 0,
+    backgroundColor: theme.colors.backgroundPanel
   });
-  inputRow.add(promptText);
-  inputField = new InputRenderable(renderer, {
+  mainContainer.add(inputContainer);
+  inputField = new TextareaRenderable(renderer, {
     id: "input-field",
-    flexGrow: 1,
-    height: 1,
-    placeholder: "describe what you want to do...",
+    width: "100%",
+    height: 3,
+    placeholder: t`${fg(theme.colors.textMuted)("Describe what you want to do...")}`,
     backgroundColor: "transparent",
-    focusedBackgroundColor: theme.colors.backgroundPanel,
+    focusedBackgroundColor: "transparent",
     textColor: theme.colors.text,
-    placeholderColor: theme.colors.textMuted,
-    cursorColor: theme.colors.primary,
-    onPaste: (event) => {
-      inputField.insertText(event.text);
+    keyBindings: [
+      { name: "return", action: "submit" },
+      { name: "linefeed", action: "submit" },
+      { name: "return", shift: true, action: "newline" },
+      { name: "linefeed", shift: true, action: "newline" },
+      { name: "return", meta: true, action: "submit" }
+    ],
+    onSubmit: () => {
+      const value = inputField.editBuffer.getText();
+      handleInput(value);
     }
   });
-  inputRow.add(inputField);
+  inputContainer.add(inputField);
+  inputHintText = new TextRenderable(renderer, {
+    id: "input-hint",
+    content: getInputHintContent()
+  });
+  inputContainer.add(inputHintText);
   helpBarText = new TextRenderable(renderer, {
     id: "help-bar-text",
     content: getHelpBarContent(),
     marginTop: 1
   });
   mainContainer.add(helpBarText);
-  inputField.on(InputRenderableEvents.ENTER, handleInput);
   renderer.keyInput.on("keypress", handleKeypress);
   inputField.focus();
 }
@@ -22389,6 +22918,10 @@ function getHelpBarContent() {
   }
   return t`${fg(theme.colors.primary)("Ctrl+X P")}${fg(theme.colors.textMuted)(" Commands")}  ${fg(theme.colors.primary)("Ctrl+Y")}${fg(theme.colors.textMuted)(" Safety")}  ${fg(theme.colors.primary)("Ctrl+Z")}${fg(theme.colors.textMuted)(" Exit")}`;
 }
+function getInputHintContent() {
+  const theme = getTheme();
+  return t`${fg(theme.colors.textMuted)("Enter")}${fg(theme.colors.border)(" send")}  ${fg(theme.colors.textMuted)("Shift+Enter")}${fg(theme.colors.border)(" newline")}  ${fg(theme.colors.textMuted)("!")}${fg(theme.colors.border)(" shell")}`;
+}
 function getWelcomeMessage() {
   const providerName = config.provider === "opencode-zen" ? "OpenCode Zen" : "OpenRouter";
   const freeNote = config.provider === "opencode-zen" ? `
@@ -22649,17 +23182,23 @@ function refreshThemeColors() {
     };
   }
   if (inputField) {
-    inputField.focusedBackgroundColor = theme.colors.backgroundPanel;
+    inputField.focusedBackgroundColor = "transparent";
     inputField.textColor = theme.colors.text;
-    inputField.placeholderColor = theme.colors.textMuted;
-    inputField.cursorColor = theme.colors.primary;
+    inputField.placeholder = t`${fg(theme.colors.textMuted)("Describe what you want to do...")}`;
+  }
+  if (inputContainer) {
+    inputContainer.borderColor = theme.colors.primary;
+    inputContainer.backgroundColor = theme.colors.backgroundPanel;
+  }
+  if (inputHintText) {
+    inputHintText.content = getInputHintContent();
   }
 }
 async function handleInput(value) {
   const input = value.trim();
   if (!input)
     return;
-  inputField.value = "";
+  inputField.setText("");
   if (input.startsWith("!")) {
     await handleSpecialCommand(input);
     return;
@@ -23404,7 +23943,7 @@ function handleKeypress(key) {
   if (key.name === "e" && awaitingConfirmation && pendingMessageId) {
     const msg = chatMessages.find((m) => m.id === pendingMessageId);
     if (msg && msg.command) {
-      inputField.value = msg.command;
+      inputField.setText(msg.command);
       clearCommandState();
       inputField.focus();
     }

package/dist/tui.js

@@ -20475,6 +20475,523 @@ class EditBufferRenderable extends Renderable {
     }
   }
 }
+var defaultTextareaKeybindings = [
+  { name: "left", action: "move-left" },
+  { name: "right", action: "move-right" },
+  { name: "up", action: "move-up" },
+  { name: "down", action: "move-down" },
+  { name: "left", shift: true, action: "select-left" },
+  { name: "right", shift: true, action: "select-right" },
+  { name: "up", shift: true, action: "select-up" },
+  { name: "down", shift: true, action: "select-down" },
+  { name: "home", action: "buffer-home" },
+  { name: "end", action: "buffer-end" },
+  { name: "home", shift: true, action: "select-buffer-home" },
+  { name: "end", shift: true, action: "select-buffer-end" },
+  { name: "a", ctrl: true, action: "line-home" },
+  { name: "e", ctrl: true, action: "line-end" },
+  { name: "a", ctrl: true, shift: true, action: "select-line-home" },
+  { name: "e", ctrl: true, shift: true, action: "select-line-end" },
+  { name: "a", meta: true, action: "visual-line-home" },
+  { name: "e", meta: true, action: "visual-line-end" },
+  { name: "a", meta: true, shift: true, action: "select-visual-line-home" },
+  { name: "e", meta: true, shift: true, action: "select-visual-line-end" },
+  { name: "f", ctrl: true, action: "move-right" },
+  { name: "b", ctrl: true, action: "move-left" },
+  { name: "w", ctrl: true, action: "delete-word-backward" },
+  { name: "backspace", ctrl: true, action: "delete-word-backward" },
+  { name: "d", meta: true, action: "delete-word-forward" },
+  { name: "delete", meta: true, action: "delete-word-forward" },
+  { name: "delete", ctrl: true, action: "delete-word-forward" },
+  { name: "d", ctrl: true, shift: true, action: "delete-line" },
+  { name: "k", ctrl: true, action: "delete-to-line-end" },
+  { name: "u", ctrl: true, action: "delete-to-line-start" },
+  { name: "backspace", action: "backspace" },
+  { name: "backspace", shift: true, action: "backspace" },
+  { name: "d", ctrl: true, action: "delete" },
+  { name: "delete", action: "delete" },
+  { name: "delete", shift: true, action: "delete" },
+  { name: "return", action: "newline" },
+  { name: "linefeed", action: "newline" },
+  { name: "return", meta: true, action: "submit" },
+  { name: "-", ctrl: true, action: "undo" },
+  { name: ".", ctrl: true, action: "redo" },
+  { name: "z", super: true, action: "undo" },
+  { name: "z", super: true, shift: true, action: "redo" },
+  { name: "f", meta: true, action: "word-forward" },
+  { name: "b", meta: true, action: "word-backward" },
+  { name: "right", meta: true, action: "word-forward" },
+  { name: "left", meta: true, action: "word-backward" },
+  { name: "right", ctrl: true, action: "word-forward" },
+  { name: "left", ctrl: true, action: "word-backward" },
+  { name: "f", meta: true, shift: true, action: "select-word-forward" },
+  { name: "b", meta: true, shift: true, action: "select-word-backward" },
+  { name: "right", meta: true, shift: true, action: "select-word-forward" },
+  { name: "left", meta: true, shift: true, action: "select-word-backward" },
+  { name: "backspace", meta: true, action: "delete-word-backward" },
+  { name: "left", super: true, action: "visual-line-home" },
+  { name: "right", super: true, action: "visual-line-end" },
+  { name: "up", super: true, action: "buffer-home" },
+  { name: "down", super: true, action: "buffer-end" },
+  { name: "left", super: true, shift: true, action: "select-visual-line-home" },
+  { name: "right", super: true, shift: true, action: "select-visual-line-end" },
+  { name: "up", super: true, shift: true, action: "select-buffer-home" },
+  { name: "down", super: true, shift: true, action: "select-buffer-end" }
+];
+
+class TextareaRenderable extends EditBufferRenderable {
+  _placeholder;
+  _unfocusedBackgroundColor;
+  _unfocusedTextColor;
+  _focusedBackgroundColor;
+  _focusedTextColor;
+  _keyBindingsMap;
+  _keyAliasMap;
+  _keyBindings;
+  _actionHandlers;
+  _initialValueSet = false;
+  _submitListener = undefined;
+  static defaults = {
+    backgroundColor: "transparent",
+    textColor: "#FFFFFF",
+    focusedBackgroundColor: "transparent",
+    focusedTextColor: "#FFFFFF",
+    placeholder: null
+  };
+  constructor(ctx, options) {
+    const defaults = TextareaRenderable.defaults;
+    const baseOptions = {
+      ...options,
+      backgroundColor: options.backgroundColor || defaults.backgroundColor,
+      textColor: options.textColor || defaults.textColor
+    };
+    super(ctx, baseOptions);
+    this._unfocusedBackgroundColor = parseColor(options.backgroundColor || defaults.backgroundColor);
+    this._unfocusedTextColor = parseColor(options.textColor || defaults.textColor);
+    this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || options.backgroundColor || defaults.focusedBackgroundColor);
+    this._focusedTextColor = parseColor(options.focusedTextColor || options.textColor || defaults.focusedTextColor);
+    this._placeholder = options.placeholder ?? defaults.placeholder;
+    this._keyAliasMap = mergeKeyAliases(defaultKeyAliases, options.keyAliasMap || {});
+    this._keyBindings = options.keyBindings || [];
+    const mergedBindings = mergeKeyBindings(defaultTextareaKeybindings, this._keyBindings);
+    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings, this._keyAliasMap);
+    this._actionHandlers = this.buildActionHandlers();
+    this._submitListener = options.onSubmit;
+    if (options.initialValue) {
+      this.setText(options.initialValue);
+      this._initialValueSet = true;
+    }
+    this.updateColors();
+    this.applyPlaceholder(this._placeholder);
+  }
+  applyPlaceholder(placeholder) {
+    if (placeholder === null) {
+      this.editorView.setPlaceholderStyledText([]);
+      return;
+    }
+    if (typeof placeholder === "string") {
+      const defaultGray = fg("#666666");
+      const chunks = [defaultGray(placeholder)];
+      this.editorView.setPlaceholderStyledText(chunks);
+    } else {
+      this.editorView.setPlaceholderStyledText(placeholder.chunks);
+    }
+  }
+  buildActionHandlers() {
+    return new Map([
+      ["move-left", () => this.moveCursorLeft()],
+      ["move-right", () => this.moveCursorRight()],
+      ["move-up", () => this.moveCursorUp()],
+      ["move-down", () => this.moveCursorDown()],
+      ["select-left", () => this.moveCursorLeft({ select: true })],
+      ["select-right", () => this.moveCursorRight({ select: true })],
+      ["select-up", () => this.moveCursorUp({ select: true })],
+      ["select-down", () => this.moveCursorDown({ select: true })],
+      ["line-home", () => this.gotoLineHome()],
+      ["line-end", () => this.gotoLineEnd()],
+      ["select-line-home", () => this.gotoLineHome({ select: true })],
+      ["select-line-end", () => this.gotoLineEnd({ select: true })],
+      ["visual-line-home", () => this.gotoVisualLineHome()],
+      ["visual-line-end", () => this.gotoVisualLineEnd()],
+      ["select-visual-line-home", () => this.gotoVisualLineHome({ select: true })],
+      ["select-visual-line-end", () => this.gotoVisualLineEnd({ select: true })],
+      ["select-buffer-home", () => this.gotoBufferHome({ select: true })],
+      ["select-buffer-end", () => this.gotoBufferEnd({ select: true })],
+      ["buffer-home", () => this.gotoBufferHome()],
+      ["buffer-end", () => this.gotoBufferEnd()],
+      ["delete-line", () => this.deleteLine()],
+      ["delete-to-line-end", () => this.deleteToLineEnd()],
+      ["delete-to-line-start", () => this.deleteToLineStart()],
+      ["backspace", () => this.deleteCharBackward()],
+      ["delete", () => this.deleteChar()],
+      ["newline", () => this.newLine()],
+      ["undo", () => this.undo()],
+      ["redo", () => this.redo()],
+      ["word-forward", () => this.moveWordForward()],
+      ["word-backward", () => this.moveWordBackward()],
+      ["select-word-forward", () => this.moveWordForward({ select: true })],
+      ["select-word-backward", () => this.moveWordBackward({ select: true })],
+      ["delete-word-forward", () => this.deleteWordForward()],
+      ["delete-word-backward", () => this.deleteWordBackward()],
+      ["submit", () => this.submit()]
+    ]);
+  }
+  handlePaste(event) {
+    this.insertText(event.text);
+  }
+  handleKeyPress(key) {
+    const bindingKey = getKeyBindingKey({
+      name: key.name,
+      ctrl: key.ctrl,
+      shift: key.shift,
+      meta: key.meta,
+      super: key.super,
+      action: "move-left"
+    });
+    const action = this._keyBindingsMap.get(bindingKey);
+    if (action) {
+      const handler = this._actionHandlers.get(action);
+      if (handler) {
+        return handler();
+      }
+    }
+    if (!key.ctrl && !key.meta && !key.super && !key.hyper) {
+      if (key.name === "space") {
+        this.insertText(" ");
+        return true;
+      }
+      if (key.sequence) {
+        const firstCharCode = key.sequence.charCodeAt(0);
+        if (firstCharCode < 32) {
+          return false;
+        }
+        if (firstCharCode === 127) {
+          return false;
+        }
+        this.insertText(key.sequence);
+        return true;
+      }
+    }
+    return false;
+  }
+  updateColors() {
+    const effectiveBg = this._focused ? this._focusedBackgroundColor : this._unfocusedBackgroundColor;
+    const effectiveFg = this._focused ? this._focusedTextColor : this._unfocusedTextColor;
+    super.backgroundColor = effectiveBg;
+    super.textColor = effectiveFg;
+  }
+  insertChar(char) {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+    }
+    this.editBuffer.insertChar(char);
+    this.requestRender();
+  }
+  insertText(text) {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+    }
+    this.editBuffer.insertText(text);
+    this.requestRender();
+  }
+  deleteChar() {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+      return true;
+    }
+    this._ctx.clearSelection();
+    this.editBuffer.deleteChar();
+    this.requestRender();
+    return true;
+  }
+  deleteCharBackward() {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+      return true;
+    }
+    this._ctx.clearSelection();
+    this.editBuffer.deleteCharBackward();
+    this.requestRender();
+    return true;
+  }
+  deleteSelectedText() {
+    this.editorView.deleteSelectedText();
+    this._ctx.clearSelection();
+    this.requestRender();
+  }
+  newLine() {
+    this._ctx.clearSelection();
+    this.editBuffer.newLine();
+    this.requestRender();
+    return true;
+  }
+  deleteLine() {
+    this._ctx.clearSelection();
+    this.editBuffer.deleteLine();
+    this.requestRender();
+    return true;
+  }
+  moveCursorLeft(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    this.editBuffer.moveCursorLeft();
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  moveCursorRight(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    this.editBuffer.moveCursorRight();
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  moveCursorUp(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    this.editorView.moveUpVisual();
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  moveCursorDown(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    this.editorView.moveDownVisual();
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoLine(line) {
+    this.editBuffer.gotoLine(line);
+    this.requestRender();
+  }
+  gotoLineHome(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    const cursor = this.editorView.getCursor();
+    if (cursor.col === 0 && cursor.row > 0) {
+      this.editBuffer.setCursor(cursor.row - 1, 0);
+      const prevLineEol = this.editBuffer.getEOL();
+      this.editBuffer.setCursor(prevLineEol.row, prevLineEol.col);
+    } else {
+      this.editBuffer.setCursor(cursor.row, 0);
+    }
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoLineEnd(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    const cursor = this.editorView.getCursor();
+    const eol = this.editBuffer.getEOL();
+    const lineCount = this.editBuffer.getLineCount();
+    if (cursor.col === eol.col && cursor.row < lineCount - 1) {
+      this.editBuffer.setCursor(cursor.row + 1, 0);
+    } else {
+      this.editBuffer.setCursor(eol.row, eol.col);
+    }
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoVisualLineHome(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    const sol = this.editorView.getVisualSOL();
+    this.editBuffer.setCursor(sol.logicalRow, sol.logicalCol);
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoVisualLineEnd(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    const eol = this.editorView.getVisualEOL();
+    this.editBuffer.setCursor(eol.logicalRow, eol.logicalCol);
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoBufferHome(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    this.editBuffer.setCursor(0, 0);
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoBufferEnd(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    this.editBuffer.gotoLine(999999);
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  deleteToLineEnd() {
+    const cursor = this.editorView.getCursor();
+    const eol = this.editBuffer.getEOL();
+    if (eol.col > cursor.col) {
+      this.editBuffer.deleteRange(cursor.row, cursor.col, eol.row, eol.col);
+    }
+    this.requestRender();
+    return true;
+  }
+  deleteToLineStart() {
+    const cursor = this.editorView.getCursor();
+    if (cursor.col > 0) {
+      this.editBuffer.deleteRange(cursor.row, 0, cursor.row, cursor.col);
+    }
+    this.requestRender();
+    return true;
+  }
+  undo() {
+    this._ctx.clearSelection();
+    this.editBuffer.undo();
+    this.requestRender();
+    return true;
+  }
+  redo() {
+    this._ctx.clearSelection();
+    this.editBuffer.redo();
+    this.requestRender();
+    return true;
+  }
+  moveWordForward(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    const nextWord = this.editBuffer.getNextWordBoundary();
+    this.editBuffer.setCursorByOffset(nextWord.offset);
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  moveWordBackward(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
+    const prevWord = this.editBuffer.getPrevWordBoundary();
+    this.editBuffer.setCursorByOffset(prevWord.offset);
+    this.updateSelectionForMovement(select, false);
+    this.requestRender();
+    return true;
+  }
+  deleteWordForward() {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+      return true;
+    }
+    const currentCursor = this.editBuffer.getCursorPosition();
+    const nextWord = this.editBuffer.getNextWordBoundary();
+    if (nextWord.offset > currentCursor.offset) {
+      this.editBuffer.deleteRange(currentCursor.row, currentCursor.col, nextWord.row, nextWord.col);
+    }
+    this._ctx.clearSelection();
+    this.requestRender();
+    return true;
+  }
+  deleteWordBackward() {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+      return true;
+    }
+    const currentCursor = this.editBuffer.getCursorPosition();
+    const prevWord = this.editBuffer.getPrevWordBoundary();
+    if (prevWord.offset < currentCursor.offset) {
+      this.editBuffer.deleteRange(prevWord.row, prevWord.col, currentCursor.row, currentCursor.col);
+    }
+    this._ctx.clearSelection();
+    this.requestRender();
+    return true;
+  }
+  focus() {
+    super.focus();
+    this.updateColors();
+  }
+  blur() {
+    super.blur();
+    if (!this.isDestroyed) {
+      this.updateColors();
+    }
+  }
+  get placeholder() {
+    return this._placeholder;
+  }
+  set placeholder(value) {
+    if (this._placeholder !== value) {
+      this._placeholder = value;
+      this.applyPlaceholder(value);
+      this.requestRender();
+    }
+  }
+  get backgroundColor() {
+    return this._unfocusedBackgroundColor;
+  }
+  set backgroundColor(value) {
+    const newColor = parseColor(value ?? TextareaRenderable.defaults.backgroundColor);
+    if (this._unfocusedBackgroundColor !== newColor) {
+      this._unfocusedBackgroundColor = newColor;
+      this.updateColors();
+    }
+  }
+  get textColor() {
+    return this._unfocusedTextColor;
+  }
+  set textColor(value) {
+    const newColor = parseColor(value ?? TextareaRenderable.defaults.textColor);
+    if (this._unfocusedTextColor !== newColor) {
+      this._unfocusedTextColor = newColor;
+      this.updateColors();
+    }
+  }
+  set focusedBackgroundColor(value) {
+    const newColor = parseColor(value ?? TextareaRenderable.defaults.focusedBackgroundColor);
+    if (this._focusedBackgroundColor !== newColor) {
+      this._focusedBackgroundColor = newColor;
+      this.updateColors();
+    }
+  }
+  set focusedTextColor(value) {
+    const newColor = parseColor(value ?? TextareaRenderable.defaults.focusedTextColor);
+    if (this._focusedTextColor !== newColor) {
+      this._focusedTextColor = newColor;
+      this.updateColors();
+    }
+  }
+  set initialValue(value) {
+    if (!this._initialValueSet) {
+      this.setText(value);
+      this._initialValueSet = true;
+    }
+  }
+  submit() {
+    if (this._submitListener) {
+      this._submitListener({});
+    }
+    return true;
+  }
+  set onSubmit(handler) {
+    this._submitListener = handler;
+  }
+  get onSubmit() {
+    return this._submitListener;
+  }
+  set keyBindings(bindings) {
+    this._keyBindings = bindings;
+    const mergedBindings = mergeKeyBindings(defaultTextareaKeybindings, bindings);
+    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings, this._keyAliasMap);
+  }
+  set keyAliasMap(aliases) {
+    this._keyAliasMap = mergeKeyAliases(defaultKeyAliases, aliases);
+    const mergedBindings = mergeKeyBindings(defaultTextareaKeybindings, this._keyBindings);
+    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings, this._keyAliasMap);
+  }
+  get extmarks() {
+    return this.editorView.extmarks;
+  }
+}
 
 // src/cli.ts
 import { spawn } from "child_process";
@@ -22106,6 +22623,8 @@ var headerText;
 var statusBarText;
 var chatScrollBox;
 var inputField;
+var inputContainer;
+var inputHintText;
 var helpBarText;
 var modelSelector = null;
 var providerSelector = null;
@@ -22333,43 +22852,53 @@ function createMainUI() {
   });
   mainContainer.add(chatScrollBox);
   addSystemMessage(getWelcomeMessage());
-  const inputRow = new BoxRenderable(renderer, {
-    id: "input-row",
-    flexDirection: "row",
+  inputContainer = new BoxRenderable(renderer, {
+    id: "input-container",
+    flexDirection: "column",
     width: "100%",
     marginTop: 1,
-    alignItems: "center"
-  });
-  mainContainer.add(inputRow);
-  const promptText = new TextRenderable(renderer, {
-    id: "prompt-text",
-    content: t`${fg(theme.colors.primary)("~>")} `,
-    width: 3,
-    height: 1
+    border: true,
+    borderColor: theme.colors.primary,
+    borderStyle: "rounded",
+    paddingLeft: 1,
+    paddingRight: 1,
+    paddingTop: 0,
+    paddingBottom: 0,
+    backgroundColor: theme.colors.backgroundPanel
   });
-  inputRow.add(promptText);
-  inputField = new InputRenderable(renderer, {
+  mainContainer.add(inputContainer);
+  inputField = new TextareaRenderable(renderer, {
     id: "input-field",
-    flexGrow: 1,
-    height: 1,
-    placeholder: "describe what you want to do...",
+    width: "100%",
+    height: 3,
+    placeholder: t`${fg(theme.colors.textMuted)("Describe what you want to do...")}`,
     backgroundColor: "transparent",
-    focusedBackgroundColor: theme.colors.backgroundPanel,
+    focusedBackgroundColor: "transparent",
     textColor: theme.colors.text,
-    placeholderColor: theme.colors.textMuted,
-    cursorColor: theme.colors.primary,
-    onPaste: (event) => {
-      inputField.insertText(event.text);
+    keyBindings: [
+      { name: "return", action: "submit" },
+      { name: "linefeed", action: "submit" },
+      { name: "return", shift: true, action: "newline" },
+      { name: "linefeed", shift: true, action: "newline" },
+      { name: "return", meta: true, action: "submit" }
+    ],
+    onSubmit: () => {
+      const value = inputField.editBuffer.getText();
+      handleInput(value);
     }
   });
-  inputRow.add(inputField);
+  inputContainer.add(inputField);
+  inputHintText = new TextRenderable(renderer, {
+    id: "input-hint",
+    content: getInputHintContent()
+  });
+  inputContainer.add(inputHintText);
   helpBarText = new TextRenderable(renderer, {
     id: "help-bar-text",
     content: getHelpBarContent(),
     marginTop: 1
   });
   mainContainer.add(helpBarText);
-  inputField.on(InputRenderableEvents.ENTER, handleInput);
   renderer.keyInput.on("keypress", handleKeypress);
   inputField.focus();
 }
@@ -22389,6 +22918,10 @@ function getHelpBarContent() {
   }
   return t`${fg(theme.colors.primary)("Ctrl+X P")}${fg(theme.colors.textMuted)(" Commands")}  ${fg(theme.colors.primary)("Ctrl+Y")}${fg(theme.colors.textMuted)(" Safety")}  ${fg(theme.colors.primary)("Ctrl+Z")}${fg(theme.colors.textMuted)(" Exit")}`;
 }
+function getInputHintContent() {
+  const theme = getTheme();
+  return t`${fg(theme.colors.textMuted)("Enter")}${fg(theme.colors.border)(" send")}  ${fg(theme.colors.textMuted)("Shift+Enter")}${fg(theme.colors.border)(" newline")}  ${fg(theme.colors.textMuted)("!")}${fg(theme.colors.border)(" shell")}`;
+}
 function getWelcomeMessage() {
   const providerName = config.provider === "opencode-zen" ? "OpenCode Zen" : "OpenRouter";
   const freeNote = config.provider === "opencode-zen" ? `
@@ -22649,17 +23182,23 @@ function refreshThemeColors() {
     };
   }
   if (inputField) {
-    inputField.focusedBackgroundColor = theme.colors.backgroundPanel;
+    inputField.focusedBackgroundColor = "transparent";
     inputField.textColor = theme.colors.text;
-    inputField.placeholderColor = theme.colors.textMuted;
-    inputField.cursorColor = theme.colors.primary;
+    inputField.placeholder = t`${fg(theme.colors.textMuted)("Describe what you want to do...")}`;
+  }
+  if (inputContainer) {
+    inputContainer.borderColor = theme.colors.primary;
+    inputContainer.backgroundColor = theme.colors.backgroundPanel;
+  }
+  if (inputHintText) {
+    inputHintText.content = getInputHintContent();
   }
 }
 async function handleInput(value) {
   const input = value.trim();
   if (!input)
     return;
-  inputField.value = "";
+  inputField.setText("");
   if (input.startsWith("!")) {
     await handleSpecialCommand(input);
     return;
@@ -23404,7 +23943,7 @@ function handleKeypress(key) {
   if (key.name === "e" && awaitingConfirmation && pendingMessageId) {
     const msg = chatMessages.find((m) => m.id === pendingMessageId);
     if (msg && msg.command) {
-      inputField.value = msg.command;
+      inputField.setText(msg.command);
       clearCommandState();
       inputField.focus();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@austinthesing/magic-shell",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "Natural language to terminal commands with safety features. Supports OpenCode Zen (with free models) and OpenRouter.",
   "type": "module",
   "main": "dist/index.js",