@austinthesing/magic-shell 0.2.7 → 0.2.9

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();
 }
@@ -22385,10 +22914,14 @@ function getStatusBarContent() {
 function getHelpBarContent() {
   const theme = getTheme();
   if (awaitingConfirmation) {
-    return t`${fg(theme.colors.warning)(">>> Press Enter to execute command <<<")} ${fg(theme.colors.textMuted)("|")} ${fg(theme.colors.error)("Esc")}${fg(theme.colors.textMuted)(" Cancel")} ${fg(theme.colors.primary)("e")}${fg(theme.colors.textMuted)(" Edit")} ${fg(theme.colors.primary)("c")}${fg(theme.colors.textMuted)(" Copy")}`;
+    return t`${fg(theme.colors.warning)(">>> Cmd+Enter or Enter to execute <<<")} ${fg(theme.colors.textMuted)("|")} ${fg(theme.colors.error)("Esc")}${fg(theme.colors.textMuted)(" Cancel")} ${fg(theme.colors.primary)("e")}${fg(theme.colors.textMuted)(" Edit")} ${fg(theme.colors.primary)("c")}${fg(theme.colors.textMuted)(" Copy")}`;
   }
   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")}`;
+}
 function getWelcomeMessage() {
   const providerName = config.provider === "opencode-zen" ? "OpenCode Zen" : "OpenRouter";
   const freeNote = config.provider === "opencode-zen" ? `
@@ -22432,13 +22965,15 @@ function addAssistantMessage(content, command, safety) {
   renderMessage(msg);
   return msg;
 }
-function addResultMessage(content, exitCode) {
+function addResultMessage(content, exitCode, executionKind, parentMessageId) {
   const msg = {
     id: generateMessageId(),
     type: "result",
     content,
     timestamp: Date.now(),
-    exitCode
+    exitCode,
+    executionKind,
+    parentMessageId
   };
   chatMessages.push(msg);
   renderMessage(msg);
@@ -22483,7 +23018,7 @@ function createAssistantMessageRenderable(msg, theme) {
     width: "100%",
     border: true,
     borderColor: isSelected ? theme.colors.primary : theme.colors.border,
-    borderStyle: "single",
+    borderStyle: "rounded",
     paddingLeft: 1,
     paddingRight: 1,
     paddingTop: 0,
@@ -22492,34 +23027,32 @@ function createAssistantMessageRenderable(msg, theme) {
   });
   const commandText = new TextRenderable(renderer, {
     id: `msg-${msg.id}-cmd`,
-    content: t`${fg(theme.colors.textMuted)("Command:")} ${fg(theme.colors.text)(msg.command || "")}`
+    content: t`${fg(theme.colors.textMuted)("Command:")} ${fg(theme.colors.secondary)(msg.command || "")}`
   });
   card.add(commandText);
   if (msg.safety) {
     const severityColor = getSeverityColor(msg.safety.severity);
-    const severityText = msg.safety.isDangerous ? `${msg.safety.severity.toUpperCase()} risk${msg.safety.reason ? ` - ${msg.safety.reason}` : ""}` : "Low risk";
+    const severityLabel = msg.safety.severity === "low" ? "Low risk" : `${msg.safety.severity[0].toUpperCase()}${msg.safety.severity.slice(1)} risk`;
     const safetyText = new TextRenderable(renderer, {
       id: `msg-${msg.id}-safety`,
-      content: t`${fg(severityColor)("●")} ${fg(theme.colors.textMuted)(severityText)}`
+      content: t`${fg(severityColor)(severityLabel)}`
     });
     card.add(safetyText);
+    if (msg.safety.isDangerous && msg.safety.reason) {
+      const reasonText = new TextRenderable(renderer, {
+        id: `msg-${msg.id}-safety-reason`,
+        content: t`${fg(theme.colors.textMuted)(msg.safety.reason)}`
+      });
+      card.add(reasonText);
+    }
   }
   if (isSelected && !msg.executed) {
     const actionsText = new TextRenderable(renderer, {
       id: `msg-${msg.id}-actions`,
-      content: t`${fg(theme.colors.warning)("Press Enter to run")} ${fg(theme.colors.textMuted)("|")} ${fg(theme.colors.primary)("[c]")} ${fg(theme.colors.textMuted)("Copy")} ${fg(theme.colors.primary)("[e]")} ${fg(theme.colors.textMuted)("Edit")} ${fg(theme.colors.error)("[Esc]")} ${fg(theme.colors.textMuted)("Cancel")}`
+      content: t`${fg(theme.colors.warning)("Cmd+Enter or Enter to run")} ${fg(theme.colors.textMuted)("|")} ${fg(theme.colors.primary)("[c]")} ${fg(theme.colors.textMuted)("Copy")} ${fg(theme.colors.primary)("[e]")} ${fg(theme.colors.textMuted)("Edit")} ${fg(theme.colors.error)("[Esc]")} ${fg(theme.colors.textMuted)("Cancel")}`
     });
     card.add(actionsText);
   }
-  if (msg.executed) {
-    const wasAutoRun = !msg.safety?.isDangerous;
-    const execLabel = wasAutoRun ? "Auto-executed (safe)" : "Executed";
-    const execText = new TextRenderable(renderer, {
-      id: `msg-${msg.id}-exec`,
-      content: t`${fg(theme.colors.success)("✓")} ${fg(theme.colors.success)(execLabel)}`
-    });
-    card.add(execText);
-  }
   return card;
 }
 function createResultMessageRenderable(msg, theme) {
@@ -22530,28 +23063,30 @@ function createResultMessageRenderable(msg, theme) {
 `) : [];
   const isLongOutput = outputLines.length > 5;
   const PREVIEW_LINES = 3;
+  const executionKind = msg.executionKind || "manual";
   const card = new BoxRenderable(renderer, {
     id: `msg-${msg.id}`,
     flexDirection: "column",
     width: "100%",
     border: true,
-    borderColor: isSuccess ? theme.colors.success : theme.colors.error,
-    borderStyle: "single",
+    borderColor: theme.colors.border,
+    borderStyle: "rounded",
     paddingLeft: 1,
     paddingRight: 1,
+    paddingTop: 0,
+    paddingBottom: 0,
     backgroundColor: theme.colors.backgroundPanel,
     onMouseDown: isLongOutput ? () => {
       toggleResultExpand(msg.id);
     } : undefined
   });
-  const statusIcon = isSuccess ? "✓" : "✗";
   const statusColor = isSuccess ? theme.colors.success : theme.colors.error;
-  const statusLabel = isSuccess ? "Executed successfully" : `Exit code: ${msg.exitCode}`;
+  const statusLabel = isSuccess ? executionKind === "auto" ? "Auto-executed (safe command)" : executionKind === "dry-run" ? "Dry run (not executed)" : "Executed (confirmed)" : `Command failed (exit code: ${msg.exitCode})`;
   const expandIcon = isLongOutput ? isExpanded ? "▼" : "▶" : "";
   const lineCount = isLongOutput ? ` (${outputLines.length} lines)` : "";
   const statusText = new TextRenderable(renderer, {
     id: `msg-${msg.id}-status`,
-    content: t`${fg(statusColor)(statusIcon)} ${fg(theme.colors.text)(statusLabel)}${fg(theme.colors.textMuted)(lineCount)} ${fg(theme.colors.primary)(expandIcon)}`
+    content: t`${fg(statusColor)(">")} ${fg(statusColor)(statusLabel)}${fg(theme.colors.textMuted)(lineCount)} ${fg(theme.colors.primary)(expandIcon)}`
   });
   card.add(statusText);
   if (hasOutput) {
@@ -22564,11 +23099,26 @@ function createResultMessageRenderable(msg, theme) {
 `) + `
 ... ${outputLines.length - PREVIEW_LINES} more lines`;
     }
+    const outputBox = new BoxRenderable(renderer, {
+      id: `msg-${msg.id}-output-box`,
+      flexDirection: "column",
+      width: "100%",
+      border: true,
+      borderColor: theme.colors.borderSubtle,
+      borderStyle: "single",
+      paddingLeft: 1,
+      paddingRight: 1,
+      paddingTop: 0,
+      paddingBottom: 0,
+      backgroundColor: theme.colors.backgroundElement,
+      marginTop: 1
+    });
     const outputText = new TextRenderable(renderer, {
       id: `msg-${msg.id}-output`,
       content: t`${fg(theme.colors.textMuted)(displayContent)}`
     });
-    card.add(outputText);
+    outputBox.add(outputText);
+    card.add(outputBox);
     if (isLongOutput) {
       const hintText = new TextRenderable(renderer, {
         id: `msg-${msg.id}-hint`,
@@ -22649,17 +23199,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;
@@ -22736,6 +23292,8 @@ async function processDirectCommand(input, command) {
   }
 }
 async function executeAndShowResult(input, command, assistantMsgId) {
+  const executionKind = getExecutionKind(assistantMsgId, dryRunMode);
+  updateAssistantMessage(assistantMsgId, { executed: true });
   if (command.startsWith("cd ")) {
     const path2 = command.slice(3).trim().replace(/^["']|["']$/g, "");
     try {
@@ -22743,7 +23301,7 @@ async function executeAndShowResult(input, command, assistantMsgId) {
       process.chdir(expandedPath);
       currentCwd = getCwd();
       statusBarText.content = getStatusBarContent();
-      addResultMessage(`Changed directory to ${currentCwd}`, 0);
+      addResultMessage(`Changed directory to ${currentCwd}`, 0, executionKind, assistantMsgId);
       addToHistory({
         input,
         command,
@@ -22751,22 +23309,20 @@ async function executeAndShowResult(input, command, assistantMsgId) {
         timestamp: Date.now()
       });
       history = loadHistory();
-      updateAssistantMessage(assistantMsgId, { executed: true });
     } catch (err) {
-      addResultMessage(`cd: ${err instanceof Error ? err.message : String(err)}`, 1);
+      addResultMessage(`cd: ${err instanceof Error ? err.message : String(err)}`, 1, executionKind, assistantMsgId);
     }
     clearCommandState();
     return;
   }
   if (dryRunMode) {
-    addResultMessage(`[DRY RUN] Would execute: ${command}`, 0);
-    updateAssistantMessage(assistantMsgId, { executed: true });
+    addResultMessage(`[DRY RUN] Would execute: ${command}`, 0, executionKind, assistantMsgId);
     clearCommandState();
     return;
   }
   try {
     const { output, exitCode } = await executeCommandWithCode(command);
-    addResultMessage(output || "Command completed successfully", exitCode);
+    addResultMessage(output || "Command completed successfully", exitCode, executionKind, assistantMsgId);
     addToHistory({
       input,
       command,
@@ -22774,13 +23330,20 @@ async function executeAndShowResult(input, command, assistantMsgId) {
       timestamp: Date.now()
     });
     history = loadHistory();
-    updateAssistantMessage(assistantMsgId, { executed: true });
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
-    addResultMessage(`Error: ${message}`, 1);
+    addResultMessage(`Error: ${message}`, 1, executionKind, assistantMsgId);
   }
   clearCommandState();
 }
+function getExecutionKind(assistantMsgId, isDryRun) {
+  if (isDryRun)
+    return "dry-run";
+  const assistantMsg = chatMessages.find((msg) => msg.id === assistantMsgId);
+  if (!assistantMsg || assistantMsg.type !== "assistant")
+    return "manual";
+  return assistantMsg.safety?.isDangerous ? "manual" : "auto";
+}
 function executeCommandWithCode(command) {
   return new Promise((resolve3, reject) => {
     const child = spawn(command, {
@@ -23404,7 +23967,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();
     }