@austinthesing/magic-shell 0.1.1 → 0.1.3

package/dist/index.js

@@ -1430,6 +1430,13 @@ function t(strings, ...values) {
   }
   return new StyledText(chunks);
 }
+
+class LinearScrollAccel {
+  tick(_now) {
+    return 1;
+  }
+  reset() {}
+}
 function isCompleteSequence(data) {
   if (!data.startsWith(ESC)) {
     return "not-escape";
@@ -17249,7 +17256,7 @@ function canonicalize(obj, stack, replacementStack, replacer, key) {
   }
   return canonicalizedObj;
 }
-var EditBuffer, engine, BoxRenderable, TextBufferRenderable, BrandedTextNodeRenderable, TextNodeRenderable, RootTextNodeRenderable, CharacterDiff, characterDiff, extendedWordChars = "a-zA-Z0-9_\\u{C0}-\\u{FF}\\u{D8}-\\u{F6}\\u{F8}-\\u{2C6}\\u{2C8}-\\u{2D7}\\u{2DE}-\\u{2FF}\\u{1E00}-\\u{1EFF}", tokenizeIncludingWhitespace, WordDiff, wordDiff, WordsWithSpaceDiff, wordsWithSpaceDiff, LineDiff, lineDiff, SentenceDiff, sentenceDiff, CssDiff, cssDiff, JsonDiff, jsonDiff, ArrayDiff, arrayDiff, TextRenderable, defaultInputKeybindings, InputRenderableEvents, InputRenderable, defaultThumbBackgroundColor, defaultTrackBackgroundColor, defaultSelectKeybindings, SelectRenderableEvents, SelectRenderable, TabSelectRenderableEvents, EditBufferRenderable;
+var EditBuffer, engine, BoxRenderable, TextBufferRenderable, BrandedTextNodeRenderable, TextNodeRenderable, RootTextNodeRenderable, CharacterDiff, characterDiff, extendedWordChars = "a-zA-Z0-9_\\u{C0}-\\u{FF}\\u{D8}-\\u{F6}\\u{F8}-\\u{2C6}\\u{2C8}-\\u{2D7}\\u{2DE}-\\u{2FF}\\u{1E00}-\\u{1EFF}", tokenizeIncludingWhitespace, WordDiff, wordDiff, WordsWithSpaceDiff, wordsWithSpaceDiff, LineDiff, lineDiff, SentenceDiff, sentenceDiff, CssDiff, cssDiff, JsonDiff, jsonDiff, ArrayDiff, arrayDiff, TextRenderable, defaultInputKeybindings, InputRenderableEvents, InputRenderable, defaultThumbBackgroundColor, defaultTrackBackgroundColor, SliderRenderable, ScrollBarRenderable, ArrowRenderable, ContentRenderable, ScrollBoxRenderable, defaultSelectKeybindings, SelectRenderableEvents, SelectRenderable, TabSelectRenderableEvents, EditBufferRenderable;
 var init_core = __esm(async () => {
   await init_index_93qf6w1k();
   EditBuffer = class EditBuffer extends EventEmitter10 {
@@ -18968,6 +18975,1146 @@ var init_core = __esm(async () => {
   };
   defaultThumbBackgroundColor = RGBA.fromHex("#9a9ea3");
   defaultTrackBackgroundColor = RGBA.fromHex("#252527");
+  SliderRenderable = class SliderRenderable extends Renderable {
+    orientation;
+    _value;
+    _min;
+    _max;
+    _viewPortSize;
+    _backgroundColor;
+    _foregroundColor;
+    _onChange;
+    constructor(ctx, options) {
+      super(ctx, { flexShrink: 0, ...options });
+      this.orientation = options.orientation;
+      this._min = options.min ?? 0;
+      this._max = options.max ?? 100;
+      this._value = options.value ?? this._min;
+      this._viewPortSize = options.viewPortSize ?? Math.max(1, (this._max - this._min) * 0.1);
+      this._onChange = options.onChange;
+      this._backgroundColor = options.backgroundColor ? parseColor(options.backgroundColor) : defaultTrackBackgroundColor;
+      this._foregroundColor = options.foregroundColor ? parseColor(options.foregroundColor) : defaultThumbBackgroundColor;
+      this.setupMouseHandling();
+    }
+    get value() {
+      return this._value;
+    }
+    set value(newValue) {
+      const clamped = Math.max(this._min, Math.min(this._max, newValue));
+      if (clamped !== this._value) {
+        this._value = clamped;
+        this._onChange?.(clamped);
+        this.emit("change", { value: clamped });
+        this.requestRender();
+      }
+    }
+    get min() {
+      return this._min;
+    }
+    set min(newMin) {
+      if (newMin !== this._min) {
+        this._min = newMin;
+        if (this._value < newMin) {
+          this.value = newMin;
+        }
+        this.requestRender();
+      }
+    }
+    get max() {
+      return this._max;
+    }
+    set max(newMax) {
+      if (newMax !== this._max) {
+        this._max = newMax;
+        if (this._value > newMax) {
+          this.value = newMax;
+        }
+        this.requestRender();
+      }
+    }
+    set viewPortSize(size) {
+      const clampedSize = Math.max(0.01, Math.min(size, this._max - this._min));
+      if (clampedSize !== this._viewPortSize) {
+        this._viewPortSize = clampedSize;
+        this.requestRender();
+      }
+    }
+    get viewPortSize() {
+      return this._viewPortSize;
+    }
+    get backgroundColor() {
+      return this._backgroundColor;
+    }
+    set backgroundColor(value) {
+      this._backgroundColor = parseColor(value);
+      this.requestRender();
+    }
+    get foregroundColor() {
+      return this._foregroundColor;
+    }
+    set foregroundColor(value) {
+      this._foregroundColor = parseColor(value);
+      this.requestRender();
+    }
+    calculateDragOffsetVirtual(event) {
+      const trackStart = this.orientation === "vertical" ? this.y : this.x;
+      const mousePos = (this.orientation === "vertical" ? event.y : event.x) - trackStart;
+      const virtualMousePos = Math.max(0, Math.min((this.orientation === "vertical" ? this.height : this.width) * 2, mousePos * 2));
+      const virtualThumbStart = this.getVirtualThumbStart();
+      const virtualThumbSize = this.getVirtualThumbSize();
+      return Math.max(0, Math.min(virtualThumbSize, virtualMousePos - virtualThumbStart));
+    }
+    setupMouseHandling() {
+      let isDragging = false;
+      let dragOffsetVirtual = 0;
+      this.onMouseDown = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const thumb = this.getThumbRect();
+        const inThumb = event.x >= thumb.x && event.x < thumb.x + thumb.width && event.y >= thumb.y && event.y < thumb.y + thumb.height;
+        if (inThumb) {
+          isDragging = true;
+          dragOffsetVirtual = this.calculateDragOffsetVirtual(event);
+        } else {
+          this.updateValueFromMouseDirect(event);
+          isDragging = true;
+          dragOffsetVirtual = this.calculateDragOffsetVirtual(event);
+        }
+      };
+      this.onMouseDrag = (event) => {
+        if (!isDragging)
+          return;
+        event.stopPropagation();
+        this.updateValueFromMouseWithOffset(event, dragOffsetVirtual);
+      };
+      this.onMouseUp = (event) => {
+        if (isDragging) {
+          this.updateValueFromMouseWithOffset(event, dragOffsetVirtual);
+        }
+        isDragging = false;
+      };
+    }
+    updateValueFromMouseDirect(event) {
+      const trackStart = this.orientation === "vertical" ? this.y : this.x;
+      const trackSize = this.orientation === "vertical" ? this.height : this.width;
+      const mousePos = this.orientation === "vertical" ? event.y : event.x;
+      const relativeMousePos = mousePos - trackStart;
+      const clampedMousePos = Math.max(0, Math.min(trackSize, relativeMousePos));
+      const ratio = trackSize === 0 ? 0 : clampedMousePos / trackSize;
+      const range = this._max - this._min;
+      const newValue = this._min + ratio * range;
+      this.value = newValue;
+    }
+    updateValueFromMouseWithOffset(event, offsetVirtual) {
+      const trackStart = this.orientation === "vertical" ? this.y : this.x;
+      const trackSize = this.orientation === "vertical" ? this.height : this.width;
+      const mousePos = this.orientation === "vertical" ? event.y : event.x;
+      const virtualTrackSize = trackSize * 2;
+      const relativeMousePos = mousePos - trackStart;
+      const clampedMousePos = Math.max(0, Math.min(trackSize, relativeMousePos));
+      const virtualMousePos = clampedMousePos * 2;
+      const virtualThumbSize = this.getVirtualThumbSize();
+      const maxThumbStart = Math.max(0, virtualTrackSize - virtualThumbSize);
+      let desiredThumbStart = virtualMousePos - offsetVirtual;
+      desiredThumbStart = Math.max(0, Math.min(maxThumbStart, desiredThumbStart));
+      const ratio = maxThumbStart === 0 ? 0 : desiredThumbStart / maxThumbStart;
+      const range = this._max - this._min;
+      const newValue = this._min + ratio * range;
+      this.value = newValue;
+    }
+    getThumbRect() {
+      const virtualThumbSize = this.getVirtualThumbSize();
+      const virtualThumbStart = this.getVirtualThumbStart();
+      const realThumbStart = Math.floor(virtualThumbStart / 2);
+      const realThumbSize = Math.ceil((virtualThumbStart + virtualThumbSize) / 2) - realThumbStart;
+      if (this.orientation === "vertical") {
+        return {
+          x: this.x,
+          y: this.y + realThumbStart,
+          width: this.width,
+          height: Math.max(1, realThumbSize)
+        };
+      } else {
+        return {
+          x: this.x + realThumbStart,
+          y: this.y,
+          width: Math.max(1, realThumbSize),
+          height: this.height
+        };
+      }
+    }
+    renderSelf(buffer) {
+      if (this.orientation === "horizontal") {
+        this.renderHorizontal(buffer);
+      } else {
+        this.renderVertical(buffer);
+      }
+    }
+    renderHorizontal(buffer) {
+      const virtualThumbSize = this.getVirtualThumbSize();
+      const virtualThumbStart = this.getVirtualThumbStart();
+      const virtualThumbEnd = virtualThumbStart + virtualThumbSize;
+      buffer.fillRect(this.x, this.y, this.width, this.height, this._backgroundColor);
+      const realStartCell = Math.floor(virtualThumbStart / 2);
+      const realEndCell = Math.ceil(virtualThumbEnd / 2) - 1;
+      const startX = Math.max(0, realStartCell);
+      const endX = Math.min(this.width - 1, realEndCell);
+      for (let realX = startX;realX <= endX; realX++) {
+        const virtualCellStart = realX * 2;
+        const virtualCellEnd = virtualCellStart + 2;
+        const thumbStartInCell = Math.max(virtualThumbStart, virtualCellStart);
+        const thumbEndInCell = Math.min(virtualThumbEnd, virtualCellEnd);
+        const coverage = thumbEndInCell - thumbStartInCell;
+        let char = " ";
+        if (coverage >= 2) {
+          char = "█";
+        } else {
+          const isLeftHalf = thumbStartInCell === virtualCellStart;
+          if (isLeftHalf) {
+            char = "▌";
+          } else {
+            char = "▐";
+          }
+        }
+        for (let y = 0;y < this.height; y++) {
+          buffer.setCellWithAlphaBlending(this.x + realX, this.y + y, char, this._foregroundColor, this._backgroundColor);
+        }
+      }
+    }
+    renderVertical(buffer) {
+      const virtualThumbSize = this.getVirtualThumbSize();
+      const virtualThumbStart = this.getVirtualThumbStart();
+      const virtualThumbEnd = virtualThumbStart + virtualThumbSize;
+      buffer.fillRect(this.x, this.y, this.width, this.height, this._backgroundColor);
+      const realStartCell = Math.floor(virtualThumbStart / 2);
+      const realEndCell = Math.ceil(virtualThumbEnd / 2) - 1;
+      const startY = Math.max(0, realStartCell);
+      const endY = Math.min(this.height - 1, realEndCell);
+      for (let realY = startY;realY <= endY; realY++) {
+        const virtualCellStart = realY * 2;
+        const virtualCellEnd = virtualCellStart + 2;
+        const thumbStartInCell = Math.max(virtualThumbStart, virtualCellStart);
+        const thumbEndInCell = Math.min(virtualThumbEnd, virtualCellEnd);
+        const coverage = thumbEndInCell - thumbStartInCell;
+        let char = " ";
+        if (coverage >= 2) {
+          char = "█";
+        } else if (coverage > 0) {
+          const virtualPositionInCell = thumbStartInCell - virtualCellStart;
+          if (virtualPositionInCell === 0) {
+            char = "▀";
+          } else {
+            char = "▄";
+          }
+        }
+        for (let x = 0;x < this.width; x++) {
+          buffer.setCellWithAlphaBlending(this.x + x, this.y + realY, char, this._foregroundColor, this._backgroundColor);
+        }
+      }
+    }
+    getVirtualThumbSize() {
+      const virtualTrackSize = this.orientation === "vertical" ? this.height * 2 : this.width * 2;
+      const range = this._max - this._min;
+      if (range === 0)
+        return virtualTrackSize;
+      const viewportSize = Math.max(1, this._viewPortSize);
+      const contentSize = range + viewportSize;
+      if (contentSize <= viewportSize)
+        return virtualTrackSize;
+      const thumbRatio = viewportSize / contentSize;
+      const calculatedSize = Math.floor(virtualTrackSize * thumbRatio);
+      return Math.max(1, Math.min(calculatedSize, virtualTrackSize));
+    }
+    getVirtualThumbStart() {
+      const virtualTrackSize = this.orientation === "vertical" ? this.height * 2 : this.width * 2;
+      const range = this._max - this._min;
+      if (range === 0)
+        return 0;
+      const valueRatio = (this._value - this._min) / range;
+      const virtualThumbSize = this.getVirtualThumbSize();
+      return Math.round(valueRatio * (virtualTrackSize - virtualThumbSize));
+    }
+  };
+  ScrollBarRenderable = class ScrollBarRenderable extends Renderable {
+    slider;
+    startArrow;
+    endArrow;
+    orientation;
+    _focusable = true;
+    _scrollSize = 0;
+    _scrollPosition = 0;
+    _viewportSize = 0;
+    _showArrows = false;
+    _manualVisibility = false;
+    _onChange;
+    scrollStep = null;
+    get visible() {
+      return super.visible;
+    }
+    set visible(value) {
+      this._manualVisibility = true;
+      super.visible = value;
+    }
+    resetVisibilityControl() {
+      this._manualVisibility = false;
+      this.recalculateVisibility();
+    }
+    get scrollSize() {
+      return this._scrollSize;
+    }
+    get scrollPosition() {
+      return this._scrollPosition;
+    }
+    get viewportSize() {
+      return this._viewportSize;
+    }
+    set scrollSize(value) {
+      if (value === this.scrollSize)
+        return;
+      this._scrollSize = value;
+      this.recalculateVisibility();
+      this.updateSliderFromScrollState();
+      this.scrollPosition = this.scrollPosition;
+    }
+    set scrollPosition(value) {
+      const newPosition = Math.round(Math.min(Math.max(0, value), this.scrollSize - this.viewportSize));
+      if (newPosition !== this._scrollPosition) {
+        this._scrollPosition = newPosition;
+        this.updateSliderFromScrollState();
+      }
+    }
+    set viewportSize(value) {
+      if (value === this.viewportSize)
+        return;
+      this._viewportSize = value;
+      this.slider.viewPortSize = Math.max(1, this._viewportSize);
+      this.recalculateVisibility();
+      this.updateSliderFromScrollState();
+      this.scrollPosition = this.scrollPosition;
+    }
+    get showArrows() {
+      return this._showArrows;
+    }
+    set showArrows(value) {
+      if (value === this._showArrows)
+        return;
+      this._showArrows = value;
+      this.startArrow.visible = value;
+      this.endArrow.visible = value;
+    }
+    constructor(ctx, { trackOptions, arrowOptions, orientation, showArrows = false, ...options }) {
+      super(ctx, {
+        flexDirection: orientation === "vertical" ? "column" : "row",
+        alignSelf: "stretch",
+        alignItems: "stretch",
+        ...options
+      });
+      this._onChange = options.onChange;
+      this.orientation = orientation;
+      this._showArrows = showArrows;
+      const scrollRange = Math.max(0, this._scrollSize - this._viewportSize);
+      const defaultStepSize = Math.max(1, this._viewportSize);
+      const stepSize = trackOptions?.viewPortSize ?? defaultStepSize;
+      this.slider = new SliderRenderable(ctx, {
+        orientation,
+        min: 0,
+        max: scrollRange,
+        value: this._scrollPosition,
+        viewPortSize: stepSize,
+        onChange: (value) => {
+          this._scrollPosition = Math.round(value);
+          this._onChange?.(this._scrollPosition);
+          this.emit("change", { position: this._scrollPosition });
+        },
+        ...orientation === "vertical" ? {
+          width: Math.max(1, Math.min(2, this.width)),
+          height: "100%",
+          marginLeft: "auto"
+        } : {
+          width: "100%",
+          height: 1,
+          marginTop: "auto"
+        },
+        flexGrow: 1,
+        flexShrink: 1,
+        ...trackOptions
+      });
+      this.updateSliderFromScrollState();
+      const arrowOpts = arrowOptions ? {
+        foregroundColor: arrowOptions.backgroundColor,
+        backgroundColor: arrowOptions.backgroundColor,
+        attributes: arrowOptions.attributes,
+        ...arrowOptions
+      } : {};
+      this.startArrow = new ArrowRenderable(ctx, {
+        alignSelf: "center",
+        visible: this.showArrows,
+        direction: this.orientation === "vertical" ? "up" : "left",
+        height: this.orientation === "vertical" ? 1 : 1,
+        ...arrowOpts
+      });
+      this.endArrow = new ArrowRenderable(ctx, {
+        alignSelf: "center",
+        visible: this.showArrows,
+        direction: this.orientation === "vertical" ? "down" : "right",
+        height: this.orientation === "vertical" ? 1 : 1,
+        ...arrowOpts
+      });
+      this.add(this.startArrow);
+      this.add(this.slider);
+      this.add(this.endArrow);
+      let startArrowMouseTimeout = undefined;
+      let endArrowMouseTimeout = undefined;
+      this.startArrow.onMouseDown = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        this.scrollBy(-0.5, "viewport");
+        startArrowMouseTimeout = setTimeout(() => {
+          this.scrollBy(-0.5, "viewport");
+          startArrowMouseTimeout = setInterval(() => {
+            this.scrollBy(-0.2, "viewport");
+          }, 200);
+        }, 500);
+      };
+      this.startArrow.onMouseUp = (event) => {
+        event.stopPropagation();
+        clearInterval(startArrowMouseTimeout);
+      };
+      this.endArrow.onMouseDown = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        this.scrollBy(0.5, "viewport");
+        endArrowMouseTimeout = setTimeout(() => {
+          this.scrollBy(0.5, "viewport");
+          endArrowMouseTimeout = setInterval(() => {
+            this.scrollBy(0.2, "viewport");
+          }, 200);
+        }, 500);
+      };
+      this.endArrow.onMouseUp = (event) => {
+        event.stopPropagation();
+        clearInterval(endArrowMouseTimeout);
+      };
+    }
+    set arrowOptions(options) {
+      Object.assign(this.startArrow, options);
+      Object.assign(this.endArrow, options);
+      this.requestRender();
+    }
+    set trackOptions(options) {
+      Object.assign(this.slider, options);
+      this.requestRender();
+    }
+    updateSliderFromScrollState() {
+      const scrollRange = Math.max(0, this._scrollSize - this._viewportSize);
+      this.slider.min = 0;
+      this.slider.max = scrollRange;
+      this.slider.value = Math.min(this._scrollPosition, scrollRange);
+    }
+    scrollBy(delta, unit = "absolute") {
+      const multiplier = unit === "viewport" ? this.viewportSize : unit === "content" ? this.scrollSize : unit === "step" ? this.scrollStep ?? 1 : 1;
+      const resolvedDelta = multiplier * delta;
+      this.scrollPosition += resolvedDelta;
+    }
+    recalculateVisibility() {
+      if (!this._manualVisibility) {
+        const sizeRatio = this.scrollSize <= this.viewportSize ? 1 : this.viewportSize / this.scrollSize;
+        super.visible = sizeRatio < 1;
+      }
+    }
+    handleKeyPress(key) {
+      switch (key.name) {
+        case "left":
+        case "h":
+          if (this.orientation !== "horizontal")
+            return false;
+          this.scrollBy(-1 / 5, "viewport");
+          return true;
+        case "right":
+        case "l":
+          if (this.orientation !== "horizontal")
+            return false;
+          this.scrollBy(1 / 5, "viewport");
+          return true;
+        case "up":
+        case "k":
+          if (this.orientation !== "vertical")
+            return false;
+          this.scrollBy(-1 / 5, "viewport");
+          return true;
+        case "down":
+        case "j":
+          if (this.orientation !== "vertical")
+            return false;
+          this.scrollBy(1 / 5, "viewport");
+          return true;
+        case "pageup":
+          this.scrollBy(-1 / 2, "viewport");
+          return true;
+        case "pagedown":
+          this.scrollBy(1 / 2, "viewport");
+          return true;
+        case "home":
+          this.scrollBy(-1, "content");
+          return true;
+        case "end":
+          this.scrollBy(1, "content");
+          return true;
+      }
+      return false;
+    }
+  };
+  ArrowRenderable = class ArrowRenderable extends Renderable {
+    _direction;
+    _foregroundColor;
+    _backgroundColor;
+    _attributes;
+    _arrowChars;
+    constructor(ctx, options) {
+      super(ctx, options);
+      this._direction = options.direction;
+      this._foregroundColor = options.foregroundColor ? parseColor(options.foregroundColor) : RGBA.fromValues(1, 1, 1, 1);
+      this._backgroundColor = options.backgroundColor ? parseColor(options.backgroundColor) : RGBA.fromValues(0, 0, 0, 0);
+      this._attributes = options.attributes ?? 0;
+      this._arrowChars = {
+        up: "▲",
+        down: "▼",
+        left: "◀",
+        right: "▶",
+        ...options.arrowChars
+      };
+      if (!options.width) {
+        this.width = Bun.stringWidth(this.getArrowChar());
+      }
+    }
+    get direction() {
+      return this._direction;
+    }
+    set direction(value) {
+      if (this._direction !== value) {
+        this._direction = value;
+        this.requestRender();
+      }
+    }
+    get foregroundColor() {
+      return this._foregroundColor;
+    }
+    set foregroundColor(value) {
+      if (this._foregroundColor !== value) {
+        this._foregroundColor = parseColor(value);
+        this.requestRender();
+      }
+    }
+    get backgroundColor() {
+      return this._backgroundColor;
+    }
+    set backgroundColor(value) {
+      if (this._backgroundColor !== value) {
+        this._backgroundColor = parseColor(value);
+        this.requestRender();
+      }
+    }
+    get attributes() {
+      return this._attributes;
+    }
+    set attributes(value) {
+      if (this._attributes !== value) {
+        this._attributes = value;
+        this.requestRender();
+      }
+    }
+    set arrowChars(value) {
+      this._arrowChars = {
+        ...this._arrowChars,
+        ...value
+      };
+      this.requestRender();
+    }
+    renderSelf(buffer) {
+      const char = this.getArrowChar();
+      buffer.drawText(char, this.x, this.y, this._foregroundColor, this._backgroundColor, this._attributes);
+    }
+    getArrowChar() {
+      switch (this._direction) {
+        case "up":
+          return this._arrowChars.up;
+        case "down":
+          return this._arrowChars.down;
+        case "left":
+          return this._arrowChars.left;
+        case "right":
+          return this._arrowChars.right;
+        default:
+          return "?";
+      }
+    }
+  };
+  ContentRenderable = class ContentRenderable extends BoxRenderable {
+    viewport;
+    _viewportCulling;
+    constructor(ctx, viewport, viewportCulling, options) {
+      super(ctx, options);
+      this.viewport = viewport;
+      this._viewportCulling = viewportCulling;
+    }
+    get viewportCulling() {
+      return this._viewportCulling;
+    }
+    set viewportCulling(value) {
+      this._viewportCulling = value;
+    }
+    _getVisibleChildren() {
+      if (this._viewportCulling) {
+        return getObjectsInViewport(this.viewport, this.getChildrenSortedByPrimaryAxis(), this.primaryAxis, 0).map((child) => child.num);
+      }
+      return this.getChildrenSortedByPrimaryAxis().map((child) => child.num);
+    }
+  };
+  ScrollBoxRenderable = class ScrollBoxRenderable extends BoxRenderable {
+    static idCounter = 0;
+    internalId = 0;
+    wrapper;
+    viewport;
+    content;
+    horizontalScrollBar;
+    verticalScrollBar;
+    _focusable = true;
+    selectionListener;
+    autoScrollMouseX = 0;
+    autoScrollMouseY = 0;
+    autoScrollThresholdVertical = 3;
+    autoScrollThresholdHorizontal = 3;
+    autoScrollSpeedSlow = 6;
+    autoScrollSpeedMedium = 36;
+    autoScrollSpeedFast = 72;
+    isAutoScrolling = false;
+    cachedAutoScrollSpeed = 3;
+    autoScrollAccumulatorX = 0;
+    autoScrollAccumulatorY = 0;
+    scrollAccumulatorX = 0;
+    scrollAccumulatorY = 0;
+    _stickyScroll;
+    _stickyScrollTop = false;
+    _stickyScrollBottom = false;
+    _stickyScrollLeft = false;
+    _stickyScrollRight = false;
+    _stickyStart;
+    _hasManualScroll = false;
+    _isApplyingStickyScroll = false;
+    scrollAccel;
+    get stickyScroll() {
+      return this._stickyScroll;
+    }
+    set stickyScroll(value) {
+      this._stickyScroll = value;
+      this.updateStickyState();
+    }
+    get stickyStart() {
+      return this._stickyStart;
+    }
+    set stickyStart(value) {
+      this._stickyStart = value;
+      this.updateStickyState();
+    }
+    get scrollTop() {
+      return this.verticalScrollBar.scrollPosition;
+    }
+    set scrollTop(value) {
+      this.verticalScrollBar.scrollPosition = value;
+      if (!this._isApplyingStickyScroll) {
+        const maxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height);
+        if (!this.isAtStickyPosition() && maxScrollTop > 1) {
+          this._hasManualScroll = true;
+        }
+      }
+      this.updateStickyState();
+    }
+    get scrollLeft() {
+      return this.horizontalScrollBar.scrollPosition;
+    }
+    set scrollLeft(value) {
+      this.horizontalScrollBar.scrollPosition = value;
+      if (!this._isApplyingStickyScroll) {
+        const maxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width);
+        if (!this.isAtStickyPosition() && maxScrollLeft > 1) {
+          this._hasManualScroll = true;
+        }
+      }
+      this.updateStickyState();
+    }
+    get scrollWidth() {
+      return this.horizontalScrollBar.scrollSize;
+    }
+    get scrollHeight() {
+      return this.verticalScrollBar.scrollSize;
+    }
+    updateStickyState() {
+      if (!this._stickyScroll)
+        return;
+      const maxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height);
+      const maxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width);
+      if (this.scrollTop <= 0) {
+        this._stickyScrollTop = true;
+        this._stickyScrollBottom = false;
+      } else if (this.scrollTop >= maxScrollTop) {
+        this._stickyScrollTop = false;
+        this._stickyScrollBottom = true;
+      } else {
+        this._stickyScrollTop = false;
+        this._stickyScrollBottom = false;
+      }
+      if (this.scrollLeft <= 0) {
+        this._stickyScrollLeft = true;
+        this._stickyScrollRight = false;
+      } else if (this.scrollLeft >= maxScrollLeft) {
+        this._stickyScrollLeft = false;
+        this._stickyScrollRight = true;
+      } else {
+        this._stickyScrollLeft = false;
+        this._stickyScrollRight = false;
+      }
+    }
+    applyStickyStart(stickyStart) {
+      this._isApplyingStickyScroll = true;
+      switch (stickyStart) {
+        case "top":
+          this._stickyScrollTop = true;
+          this._stickyScrollBottom = false;
+          this.verticalScrollBar.scrollPosition = 0;
+          break;
+        case "bottom":
+          this._stickyScrollTop = false;
+          this._stickyScrollBottom = true;
+          this.verticalScrollBar.scrollPosition = Math.max(0, this.scrollHeight - this.viewport.height);
+          break;
+        case "left":
+          this._stickyScrollLeft = true;
+          this._stickyScrollRight = false;
+          this.horizontalScrollBar.scrollPosition = 0;
+          break;
+        case "right":
+          this._stickyScrollLeft = false;
+          this._stickyScrollRight = true;
+          this.horizontalScrollBar.scrollPosition = Math.max(0, this.scrollWidth - this.viewport.width);
+          break;
+      }
+      this._isApplyingStickyScroll = false;
+    }
+    constructor(ctx, {
+      wrapperOptions,
+      viewportOptions,
+      contentOptions,
+      rootOptions,
+      scrollbarOptions,
+      verticalScrollbarOptions,
+      horizontalScrollbarOptions,
+      stickyScroll = false,
+      stickyStart,
+      scrollX = false,
+      scrollY = true,
+      scrollAcceleration,
+      viewportCulling = true,
+      ...options
+    }) {
+      super(ctx, {
+        flexDirection: "row",
+        alignItems: "stretch",
+        ...options,
+        ...rootOptions
+      });
+      this.internalId = ScrollBoxRenderable.idCounter++;
+      this._stickyScroll = stickyScroll;
+      this._stickyStart = stickyStart;
+      this.scrollAccel = scrollAcceleration ?? new LinearScrollAccel;
+      this.wrapper = new BoxRenderable(ctx, {
+        flexDirection: "column",
+        flexGrow: 1,
+        ...wrapperOptions,
+        id: `scroll-box-wrapper-${this.internalId}`
+      });
+      super.add(this.wrapper);
+      this.viewport = new BoxRenderable(ctx, {
+        flexDirection: "column",
+        flexGrow: 1,
+        overflow: "hidden",
+        onSizeChange: () => {
+          this.recalculateBarProps();
+        },
+        ...viewportOptions,
+        id: `scroll-box-viewport-${this.internalId}`
+      });
+      this.wrapper.add(this.viewport);
+      this.content = new ContentRenderable(ctx, this.viewport, viewportCulling, {
+        alignSelf: "flex-start",
+        flexShrink: 0,
+        ...scrollX ? { minWidth: "100%" } : { minWidth: "100%", maxWidth: "100%" },
+        ...scrollY ? { minHeight: "100%" } : { minHeight: "100%", maxHeight: "100%" },
+        onSizeChange: () => {
+          this.recalculateBarProps();
+        },
+        ...contentOptions,
+        id: `scroll-box-content-${this.internalId}`
+      });
+      this.viewport.add(this.content);
+      this.verticalScrollBar = new ScrollBarRenderable(ctx, {
+        ...scrollbarOptions,
+        ...verticalScrollbarOptions,
+        arrowOptions: {
+          ...scrollbarOptions?.arrowOptions,
+          ...verticalScrollbarOptions?.arrowOptions
+        },
+        id: `scroll-box-vertical-scrollbar-${this.internalId}`,
+        orientation: "vertical",
+        onChange: (position) => {
+          this.content.translateY = -position;
+          if (!this._isApplyingStickyScroll) {
+            const maxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height);
+            if (!this.isAtStickyPosition() && maxScrollTop > 1) {
+              this._hasManualScroll = true;
+            }
+          }
+          this.updateStickyState();
+        }
+      });
+      super.add(this.verticalScrollBar);
+      this.horizontalScrollBar = new ScrollBarRenderable(ctx, {
+        ...scrollbarOptions,
+        ...horizontalScrollbarOptions,
+        arrowOptions: {
+          ...scrollbarOptions?.arrowOptions,
+          ...horizontalScrollbarOptions?.arrowOptions
+        },
+        id: `scroll-box-horizontal-scrollbar-${this.internalId}`,
+        orientation: "horizontal",
+        onChange: (position) => {
+          this.content.translateX = -position;
+          if (!this._isApplyingStickyScroll) {
+            const maxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width);
+            if (!this.isAtStickyPosition() && maxScrollLeft > 1) {
+              this._hasManualScroll = true;
+            }
+          }
+          this.updateStickyState();
+        }
+      });
+      this.wrapper.add(this.horizontalScrollBar);
+      this.recalculateBarProps();
+      if (stickyStart && stickyScroll) {
+        this.applyStickyStart(stickyStart);
+      }
+      this.selectionListener = () => {
+        const selection = this._ctx.getSelection();
+        if (!selection || !selection.isSelecting) {
+          this.stopAutoScroll();
+        }
+      };
+      this._ctx.on("selection", this.selectionListener);
+    }
+    onUpdate(deltaTime) {
+      this.handleAutoScroll(deltaTime);
+    }
+    scrollBy(delta, unit = "absolute") {
+      if (typeof delta === "number") {
+        this.verticalScrollBar.scrollBy(delta, unit);
+      } else {
+        this.verticalScrollBar.scrollBy(delta.y, unit);
+        this.horizontalScrollBar.scrollBy(delta.x, unit);
+      }
+    }
+    scrollTo(position) {
+      if (typeof position === "number") {
+        this.scrollTop = position;
+      } else {
+        this.scrollTop = position.y;
+        this.scrollLeft = position.x;
+      }
+    }
+    isAtStickyPosition() {
+      if (!this._stickyScroll || !this._stickyStart) {
+        return false;
+      }
+      const maxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height);
+      const maxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width);
+      switch (this._stickyStart) {
+        case "top":
+          return this.scrollTop === 0;
+        case "bottom":
+          return this.scrollTop >= maxScrollTop;
+        case "left":
+          return this.scrollLeft === 0;
+        case "right":
+          return this.scrollLeft >= maxScrollLeft;
+        default:
+          return false;
+      }
+    }
+    add(obj, index) {
+      return this.content.add(obj, index);
+    }
+    insertBefore(obj, anchor) {
+      return this.content.insertBefore(obj, anchor);
+    }
+    remove(id) {
+      this.content.remove(id);
+    }
+    getChildren() {
+      return this.content.getChildren();
+    }
+    onMouseEvent(event) {
+      if (event.type === "scroll") {
+        let dir = event.scroll?.direction;
+        if (event.modifiers.shift)
+          dir = dir === "up" ? "left" : dir === "down" ? "right" : dir === "right" ? "down" : "up";
+        const baseDelta = event.scroll?.delta ?? 0;
+        const now = Date.now();
+        const multiplier = this.scrollAccel.tick(now);
+        const scrollAmount = baseDelta * multiplier;
+        if (dir === "up") {
+          this.scrollAccumulatorY -= scrollAmount;
+          const integerScroll = Math.trunc(this.scrollAccumulatorY);
+          if (integerScroll !== 0) {
+            this.scrollTop += integerScroll;
+            this.scrollAccumulatorY -= integerScroll;
+          }
+        } else if (dir === "down") {
+          this.scrollAccumulatorY += scrollAmount;
+          const integerScroll = Math.trunc(this.scrollAccumulatorY);
+          if (integerScroll !== 0) {
+            this.scrollTop += integerScroll;
+            this.scrollAccumulatorY -= integerScroll;
+          }
+        } else if (dir === "left") {
+          this.scrollAccumulatorX -= scrollAmount;
+          const integerScroll = Math.trunc(this.scrollAccumulatorX);
+          if (integerScroll !== 0) {
+            this.scrollLeft += integerScroll;
+            this.scrollAccumulatorX -= integerScroll;
+          }
+        } else if (dir === "right") {
+          this.scrollAccumulatorX += scrollAmount;
+          const integerScroll = Math.trunc(this.scrollAccumulatorX);
+          if (integerScroll !== 0) {
+            this.scrollLeft += integerScroll;
+            this.scrollAccumulatorX -= integerScroll;
+          }
+        }
+        const maxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height);
+        const maxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width);
+        if (maxScrollTop > 1 || maxScrollLeft > 1) {
+          this._hasManualScroll = true;
+        }
+      }
+      if (event.type === "drag" && event.isSelecting) {
+        this.updateAutoScroll(event.x, event.y);
+      } else if (event.type === "up") {
+        this.stopAutoScroll();
+      }
+    }
+    handleKeyPress(key) {
+      if (this.verticalScrollBar.handleKeyPress(key)) {
+        this._hasManualScroll = true;
+        this.scrollAccel.reset();
+        this.resetScrollAccumulators();
+        return true;
+      }
+      if (this.horizontalScrollBar.handleKeyPress(key)) {
+        this._hasManualScroll = true;
+        this.scrollAccel.reset();
+        this.resetScrollAccumulators();
+        return true;
+      }
+      return false;
+    }
+    resetScrollAccumulators() {
+      this.scrollAccumulatorX = 0;
+      this.scrollAccumulatorY = 0;
+    }
+    startAutoScroll(mouseX, mouseY) {
+      this.stopAutoScroll();
+      this.autoScrollMouseX = mouseX;
+      this.autoScrollMouseY = mouseY;
+      this.cachedAutoScrollSpeed = this.getAutoScrollSpeed(mouseX, mouseY);
+      this.isAutoScrolling = true;
+      if (!this.live) {
+        this.live = true;
+      }
+    }
+    updateAutoScroll(mouseX, mouseY) {
+      this.autoScrollMouseX = mouseX;
+      this.autoScrollMouseY = mouseY;
+      this.cachedAutoScrollSpeed = this.getAutoScrollSpeed(mouseX, mouseY);
+      const scrollX = this.getAutoScrollDirectionX(mouseX);
+      const scrollY = this.getAutoScrollDirectionY(mouseY);
+      if (scrollX === 0 && scrollY === 0) {
+        this.stopAutoScroll();
+      } else if (!this.isAutoScrolling) {
+        this.startAutoScroll(mouseX, mouseY);
+      }
+    }
+    stopAutoScroll() {
+      const wasAutoScrolling = this.isAutoScrolling;
+      this.isAutoScrolling = false;
+      this.autoScrollAccumulatorX = 0;
+      this.autoScrollAccumulatorY = 0;
+      if (wasAutoScrolling && !this.hasOtherLiveReasons()) {
+        this.live = false;
+      }
+    }
+    hasOtherLiveReasons() {
+      return false;
+    }
+    handleAutoScroll(deltaTime) {
+      if (!this.isAutoScrolling)
+        return;
+      const scrollX = this.getAutoScrollDirectionX(this.autoScrollMouseX);
+      const scrollY = this.getAutoScrollDirectionY(this.autoScrollMouseY);
+      const scrollAmount = this.cachedAutoScrollSpeed * (deltaTime / 1000);
+      let scrolled = false;
+      if (scrollX !== 0) {
+        this.autoScrollAccumulatorX += scrollX * scrollAmount;
+        const integerScrollX = Math.trunc(this.autoScrollAccumulatorX);
+        if (integerScrollX !== 0) {
+          this.scrollLeft += integerScrollX;
+          this.autoScrollAccumulatorX -= integerScrollX;
+          scrolled = true;
+        }
+      }
+      if (scrollY !== 0) {
+        this.autoScrollAccumulatorY += scrollY * scrollAmount;
+        const integerScrollY = Math.trunc(this.autoScrollAccumulatorY);
+        if (integerScrollY !== 0) {
+          this.scrollTop += integerScrollY;
+          this.autoScrollAccumulatorY -= integerScrollY;
+          scrolled = true;
+        }
+      }
+      if (scrolled) {
+        this._ctx.requestSelectionUpdate();
+      }
+      if (scrollX === 0 && scrollY === 0) {
+        this.stopAutoScroll();
+      }
+    }
+    getAutoScrollDirectionX(mouseX) {
+      const relativeX = mouseX - this.x;
+      const distToLeft = relativeX;
+      const distToRight = this.width - relativeX;
+      if (distToLeft <= this.autoScrollThresholdHorizontal) {
+        return this.scrollLeft > 0 ? -1 : 0;
+      } else if (distToRight <= this.autoScrollThresholdHorizontal) {
+        const maxScrollLeft = this.scrollWidth - this.viewport.width;
+        return this.scrollLeft < maxScrollLeft ? 1 : 0;
+      }
+      return 0;
+    }
+    getAutoScrollDirectionY(mouseY) {
+      const relativeY = mouseY - this.y;
+      const distToTop = relativeY;
+      const distToBottom = this.height - relativeY;
+      if (distToTop <= this.autoScrollThresholdVertical) {
+        return this.scrollTop > 0 ? -1 : 0;
+      } else if (distToBottom <= this.autoScrollThresholdVertical) {
+        const maxScrollTop = this.scrollHeight - this.viewport.height;
+        return this.scrollTop < maxScrollTop ? 1 : 0;
+      }
+      return 0;
+    }
+    getAutoScrollSpeed(mouseX, mouseY) {
+      const relativeX = mouseX - this.x;
+      const relativeY = mouseY - this.y;
+      const distToLeft = relativeX;
+      const distToRight = this.width - relativeX;
+      const distToTop = relativeY;
+      const distToBottom = this.height - relativeY;
+      const minDistance = Math.min(distToLeft, distToRight, distToTop, distToBottom);
+      if (minDistance <= 1) {
+        return this.autoScrollSpeedFast;
+      } else if (minDistance <= 2) {
+        return this.autoScrollSpeedMedium;
+      } else {
+        return this.autoScrollSpeedSlow;
+      }
+    }
+    recalculateBarProps() {
+      const wasApplyingStickyScroll = this._isApplyingStickyScroll;
+      this._isApplyingStickyScroll = true;
+      this.verticalScrollBar.scrollSize = this.content.height;
+      this.verticalScrollBar.viewportSize = this.viewport.height;
+      this.horizontalScrollBar.scrollSize = this.content.width;
+      this.horizontalScrollBar.viewportSize = this.viewport.width;
+      if (this._stickyScroll) {
+        const newMaxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height);
+        const newMaxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width);
+        if (this._stickyStart && !this._hasManualScroll) {
+          this.applyStickyStart(this._stickyStart);
+        } else {
+          if (this._stickyScrollTop) {
+            this.scrollTop = 0;
+          } else if (this._stickyScrollBottom && newMaxScrollTop > 0) {
+            this.scrollTop = newMaxScrollTop;
+          }
+          if (this._stickyScrollLeft) {
+            this.scrollLeft = 0;
+          } else if (this._stickyScrollRight && newMaxScrollLeft > 0) {
+            this.scrollLeft = newMaxScrollLeft;
+          }
+        }
+      }
+      this._isApplyingStickyScroll = wasApplyingStickyScroll;
+      process.nextTick(() => {
+        this.requestRender();
+      });
+    }
+    set rootOptions(options) {
+      Object.assign(this, options);
+      this.requestRender();
+    }
+    set wrapperOptions(options) {
+      Object.assign(this.wrapper, options);
+      this.requestRender();
+    }
+    set viewportOptions(options) {
+      Object.assign(this.viewport, options);
+      this.requestRender();
+    }
+    set contentOptions(options) {
+      Object.assign(this.content, options);
+      this.requestRender();
+    }
+    set scrollbarOptions(options) {
+      Object.assign(this.verticalScrollBar, options);
+      Object.assign(this.horizontalScrollBar, options);
+      this.requestRender();
+    }
+    set verticalScrollbarOptions(options) {
+      Object.assign(this.verticalScrollBar, options);
+      this.requestRender();
+    }
+    set horizontalScrollbarOptions(options) {
+      Object.assign(this.horizontalScrollBar, options);
+      this.requestRender();
+    }
+    get scrollAcceleration() {
+      return this.scrollAccel;
+    }
+    set scrollAcceleration(value) {
+      this.scrollAccel = value;
+    }
+    get viewportCulling() {
+      return this.content.viewportCulling;
+    }
+    set viewportCulling(value) {
+      this.content.viewportCulling = value;
+      this.requestRender();
+    }
+    destroySelf() {
+      if (this.selectionListener) {
+        this._ctx.off("selection", this.selectionListener);
+        this.selectionListener = undefined;
+      }
+      super.destroySelf();
+    }
+  };
   defaultSelectKeybindings = [
     { name: "up", action: "move-up" },
     { name: "k", action: "move-up" },
@@ -20870,6 +22017,9 @@ __export(exports_cli, {
 });
 import { spawn } from "child_process";
 import { cwd as getCwd } from "process";
+function generateMessageId() {
+  return `msg-${++messageIdCounter}`;
+}
 async function main2() {
   config = loadConfig2();
   history = loadHistory2();
@@ -21047,44 +22197,65 @@ function createMainUI() {
     id: "header-row",
     flexDirection: "row",
     width: "100%",
+    alignItems: "center",
     marginBottom: 1
   });
   mainContainer.add(headerRow);
   headerText = new TextRenderable(renderer, {
     id: "header-text",
-    content: t`${bold(fg(theme.colors.primary)("magic-shell"))} ${fg(theme.colors.textMuted)("- natural language to terminal commands")}`,
+    content: t`${bold(fg(theme.colors.primary)("magic-shell"))}`,
     flexGrow: 1
   });
   headerRow.add(headerText);
-  const statusRow = new BoxRenderable(renderer, {
-    id: "status-row",
-    flexDirection: "row",
-    width: "100%",
-    marginBottom: 1
+  const modelBadge = new TextRenderable(renderer, {
+    id: "model-badge",
+    content: getModelDisplay()
   });
-  mainContainer.add(statusRow);
-  cwdText = new TextRenderable(renderer, {
-    id: "cwd-text",
-    content: t`${fg(theme.colors.textMuted)("cwd:")} ${fg(theme.colors.success)(currentCwd)}`,
-    flexGrow: 1
+  headerRow.add(modelBadge);
+  statusBarText = new TextRenderable(renderer, {
+    id: "status-bar-text",
+    content: getStatusBarContent(),
+    marginBottom: 1
   });
-  statusRow.add(cwdText);
-  modelText = new TextRenderable(renderer, {
-    id: "model-text",
-    content: getModelDisplay()
+  mainContainer.add(statusBarText);
+  chatScrollBox = new ScrollBoxRenderable(renderer, {
+    id: "chat-scroll-box",
+    flexGrow: 1,
+    width: "100%",
+    scrollY: true,
+    scrollX: false,
+    stickyScroll: true,
+    stickyStart: "bottom",
+    rootOptions: {
+      border: true,
+      borderColor: theme.colors.border,
+      borderStyle: "single"
+    },
+    viewportOptions: {
+      backgroundColor: theme.colors.background,
+      paddingLeft: 1,
+      paddingRight: 1,
+      paddingTop: 1
+    },
+    contentOptions: {
+      flexDirection: "column",
+      gap: 1
+    }
   });
-  statusRow.add(modelText);
+  mainContainer.add(chatScrollBox);
+  addSystemMessage(getWelcomeMessage());
   const inputRow = new BoxRenderable(renderer, {
     id: "input-row",
     flexDirection: "row",
     width: "100%",
-    marginBottom: 1
+    marginTop: 1,
+    alignItems: "center"
   });
   mainContainer.add(inputRow);
   const promptText = new TextRenderable(renderer, {
     id: "prompt-text",
-    content: t`${fg(theme.colors.success)(">")} `,
-    width: 2
+    content: t`${fg(theme.colors.primary)("~>")} `,
+    width: 3
   });
   inputRow.add(promptText);
   inputField = new InputRenderable(renderer, {
@@ -21102,58 +22273,268 @@ function createMainUI() {
     }
   });
   inputRow.add(inputField);
-  commandPreview = new TextRenderable(renderer, {
-    id: "command-preview",
-    content: "",
-    marginBottom: 1
-  });
-  mainContainer.add(commandPreview);
-  safetyWarning = new TextRenderable(renderer, {
-    id: "safety-warning",
-    content: ""
+  helpBarText = new TextRenderable(renderer, {
+    id: "help-bar-text",
+    content: getHelpBarContent(),
+    marginTop: 1
   });
-  mainContainer.add(safetyWarning);
-  confirmPrompt = new BoxRenderable(renderer, {
-    id: "confirm-prompt",
+  mainContainer.add(helpBarText);
+  inputField.on(InputRenderableEvents.ENTER, handleInput);
+  renderer.keyInput.on("keypress", handleKeypress);
+  inputField.focus();
+}
+function getStatusBarContent() {
+  const theme = getTheme2();
+  const providerName = config.provider === "opencode-zen" ? "OpenCode Zen" : "OpenRouter";
+  const safeModeIndicator = dryRunMode ? fg(theme.colors.warning)("[DRY RUN]") : fg(theme.colors.success)("Safe");
+  return t`${fg(theme.colors.textMuted)("Provider:")} ${fg(theme.colors.text)(providerName)}  ${fg(theme.colors.textMuted)("Model:")} ${fg(theme.colors.text)(currentModel.name)}  ${safeModeIndicator}`;
+}
+function getHelpBarContent() {
+  const theme = getTheme2();
+  if (awaitingConfirmation) {
+    return t`${fg(theme.colors.warning)("[Enter] Run")} ${fg(theme.colors.textMuted)("|")} ${fg(theme.colors.error)("[Esc] Cancel")} ${fg(theme.colors.textMuted)("|")} ${fg(theme.colors.primary)("[e] Edit")}`;
+  }
+  return t`${fg(theme.colors.textMuted)("Ctrl+X")} ${fg(theme.colors.primary)("P")}${fg(theme.colors.textMuted)(" Palette")}  ${fg(theme.colors.primary)("M")}${fg(theme.colors.textMuted)(" Model")}  ${fg(theme.colors.primary)("T")}${fg(theme.colors.textMuted)(" Theme")}  ${fg(theme.colors.primary)("D")}${fg(theme.colors.textMuted)(" Dry-run")}  ${fg(theme.colors.primary)("?")}${fg(theme.colors.textMuted)(" Help")}`;
+}
+function getWelcomeMessage() {
+  const providerName = config.provider === "opencode-zen" ? "OpenCode Zen" : "OpenRouter";
+  const freeNote = config.provider === "opencode-zen" ? `
+Free models: grok-code, glm-4.7-free` : "";
+  return `Ready. Using ${providerName}.${freeNote}
+Type what you want to do, or press Ctrl+X P for command palette.`;
+}
+function addSystemMessage(content) {
+  const msg = {
+    id: generateMessageId(),
+    type: "system",
+    content,
+    timestamp: Date.now()
+  };
+  chatMessages.push(msg);
+  renderMessage(msg);
+  return msg;
+}
+function addUserMessage(content) {
+  const msg = {
+    id: generateMessageId(),
+    type: "user",
+    content,
+    timestamp: Date.now()
+  };
+  chatMessages.push(msg);
+  renderMessage(msg);
+  return msg;
+}
+function addAssistantMessage(content, command, safety) {
+  const msg = {
+    id: generateMessageId(),
+    type: "assistant",
+    content,
+    command,
+    safety,
+    timestamp: Date.now(),
+    executed: false
+  };
+  chatMessages.push(msg);
+  renderMessage(msg);
+  return msg;
+}
+function addResultMessage(content, exitCode) {
+  const msg = {
+    id: generateMessageId(),
+    type: "result",
+    content,
+    timestamp: Date.now(),
+    exitCode
+  };
+  chatMessages.push(msg);
+  renderMessage(msg);
+  return msg;
+}
+function renderMessage(msg) {
+  const theme = getTheme2();
+  const msgBox = createMessageRenderable(msg, theme);
+  chatScrollBox.add(msgBox);
+}
+function createMessageRenderable(msg, theme) {
+  switch (msg.type) {
+    case "user":
+      return createUserMessageRenderable(msg, theme);
+    case "assistant":
+      return createAssistantMessageRenderable(msg, theme);
+    case "result":
+      return createResultMessageRenderable(msg, theme);
+    case "system":
+    default:
+      return createSystemMessageRenderable(msg, theme);
+  }
+}
+function createUserMessageRenderable(msg, theme) {
+  const box = new BoxRenderable(renderer, {
+    id: `msg-${msg.id}`,
     flexDirection: "row",
-    visible: false,
-    marginBottom: 1
+    width: "100%"
   });
-  mainContainer.add(confirmPrompt);
-  const confirmText = new TextRenderable(renderer, {
-    id: "confirm-text",
-    content: t`${fg(theme.colors.warning)("[Enter] Execute")} ${fg(theme.colors.textMuted)("|")} ${fg(theme.colors.error)("[Esc] Cancel")} ${fg(theme.colors.textMuted)("|")} ${fg(theme.colors.primary)("[e] Edit")}`
+  const text = new TextRenderable(renderer, {
+    id: `msg-${msg.id}-text`,
+    content: t`${fg(theme.colors.success)(">")} ${fg(theme.colors.text)(msg.content)}`
   });
-  confirmPrompt.add(confirmText);
-  outputContainer = new BoxRenderable(renderer, {
-    id: "output-container",
-    flexGrow: 1,
+  box.add(text);
+  return box;
+}
+function createAssistantMessageRenderable(msg, theme) {
+  const isSelected = pendingMessageId === msg.id;
+  const card = new BoxRenderable(renderer, {
+    id: `msg-${msg.id}`,
+    flexDirection: "column",
+    width: "100%",
     border: true,
-    borderColor: theme.colors.border,
+    borderColor: isSelected ? theme.colors.primary : theme.colors.border,
     borderStyle: "single",
-    title: "Output",
-    padding: 1
+    paddingLeft: 1,
+    paddingRight: 1,
+    paddingTop: 0,
+    paddingBottom: 0,
+    backgroundColor: theme.colors.backgroundPanel
   });
-  mainContainer.add(outputContainer);
-  const providerName = config.provider === "opencode-zen" ? "OpenCode Zen" : "OpenRouter";
-  const freeModelsNote = config.provider === "opencode-zen" ? `
-${fg(theme.colors.success)("Free models available!")} Try: grok-code, glm-4.7-free` : "";
-  outputText = new TextRenderable(renderer, {
-    id: "output-text",
-    content: t`${fg(theme.colors.textMuted)(`Ready. Using ${providerName}.`)}${freeModelsNote}
-
-${fg(theme.colors.textMuted)("Type what you want to do, or press")} ${fg(theme.colors.primary)("Ctrl+X P")} ${fg(theme.colors.textMuted)("for command palette.")}`
+  const commandText = new TextRenderable(renderer, {
+    id: `msg-${msg.id}-cmd`,
+    content: t`${fg(theme.colors.textMuted)("Command:")} ${fg(theme.colors.text)(msg.command || "")}`
   });
-  outputContainer.add(outputText);
-  statusText = new TextRenderable(renderer, {
-    id: "status-text",
-    content: getDryRunStatus(),
-    marginTop: 1
+  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 safetyText = new TextRenderable(renderer, {
+      id: `msg-${msg.id}-safety`,
+      content: t`${fg(severityColor)("●")} ${fg(theme.colors.textMuted)(severityText)}`
+    });
+    card.add(safetyText);
+  }
+  if (isSelected && !msg.executed) {
+    const actionsText = new TextRenderable(renderer, {
+      id: `msg-${msg.id}-actions`,
+      content: t`${fg(theme.colors.warning)("[Enter]")} ${fg(theme.colors.textMuted)("Run")}  ${fg(theme.colors.primary)("[c]")} ${fg(theme.colors.textMuted)("Copy")}  ${fg(theme.colors.primary)("[e]")} ${fg(theme.colors.textMuted)("Edit")}`
+    });
+    card.add(actionsText);
+  }
+  if (msg.executed) {
+    const execText = new TextRenderable(renderer, {
+      id: `msg-${msg.id}-exec`,
+      content: t`${fg(theme.colors.success)("Executed")}`
+    });
+    card.add(execText);
+  }
+  return card;
+}
+function createResultMessageRenderable(msg, theme) {
+  const isSuccess = msg.exitCode === undefined || msg.exitCode === 0;
+  const isExpanded = msg.expanded ?? false;
+  const hasOutput = msg.content && msg.content.trim().length > 0;
+  const outputLines = hasOutput ? msg.content.trim().split(`
+`) : [];
+  const isLongOutput = outputLines.length > 5;
+  const PREVIEW_LINES = 3;
+  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",
+    paddingLeft: 1,
+    paddingRight: 1,
+    backgroundColor: theme.colors.backgroundPanel,
+    onMouseDown: isLongOutput ? () => {
+      toggleResultExpand(msg.id);
+    } : undefined
   });
-  mainContainer.add(statusText);
-  inputField.on(InputRenderableEvents.ENTER, handleInput);
-  renderer.keyInput.on("keypress", handleKeypress);
-  inputField.focus();
+  const statusIcon = isSuccess ? "✓" : "✗";
+  const statusColor = isSuccess ? theme.colors.success : theme.colors.error;
+  const statusLabel = isSuccess ? "Executed successfully" : `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)}`
+  });
+  card.add(statusText);
+  if (hasOutput) {
+    let displayContent;
+    if (isExpanded || !isLongOutput) {
+      displayContent = msg.content.trim();
+    } else {
+      const previewLines = outputLines.slice(0, PREVIEW_LINES);
+      displayContent = previewLines.join(`
+`) + `
+... ${outputLines.length - PREVIEW_LINES} more lines`;
+    }
+    const outputText = new TextRenderable(renderer, {
+      id: `msg-${msg.id}-output`,
+      content: t`${fg(theme.colors.textMuted)(displayContent)}`
+    });
+    card.add(outputText);
+    if (isLongOutput) {
+      const hintText = new TextRenderable(renderer, {
+        id: `msg-${msg.id}-hint`,
+        content: t`${fg(theme.colors.primary)("[o]")} ${fg(theme.colors.textMuted)(isExpanded ? "Collapse" : "Expand output")}`
+      });
+      card.add(hintText);
+    }
+  }
+  return card;
+}
+function createSystemMessageRenderable(msg, theme) {
+  const box = new BoxRenderable(renderer, {
+    id: `msg-${msg.id}`,
+    flexDirection: "column",
+    width: "100%"
+  });
+  const text = new TextRenderable(renderer, {
+    id: `msg-${msg.id}-text`,
+    content: t`${fg(theme.colors.textMuted)(msg.content)}`
+  });
+  box.add(text);
+  return box;
+}
+function updateAssistantMessage(msgId, updates) {
+  const msgIndex = chatMessages.findIndex((m) => m.id === msgId);
+  if (msgIndex === -1)
+    return;
+  const msg = chatMessages[msgIndex];
+  Object.assign(msg, updates);
+  chatScrollBox.remove(`msg-${msgId}`);
+  const theme = getTheme2();
+  const newBox = createMessageRenderable(msg, theme);
+  chatScrollBox.add(newBox);
+}
+function updateResultMessage(msgId, updates) {
+  const msgIndex = chatMessages.findIndex((m) => m.id === msgId);
+  if (msgIndex === -1)
+    return;
+  const msg = chatMessages[msgIndex];
+  Object.assign(msg, updates);
+  chatScrollBox.remove(`msg-${msgId}`);
+  const theme = getTheme2();
+  const newBox = createMessageRenderable(msg, theme);
+  chatScrollBox.add(newBox);
+}
+function toggleResultExpand(msgId) {
+  const msg = chatMessages.find((m) => m.id === msgId);
+  if (!msg || msg.type !== "result")
+    return;
+  const outputLines = msg.content?.trim().split(`
+`) || [];
+  if (outputLines.length <= 5)
+    return;
+  updateResultMessage(msgId, { expanded: !msg.expanded });
+}
+function toggleLastResultExpand() {
+  const resultMessages = chatMessages.filter((m) => m.type === "result");
+  if (resultMessages.length === 0)
+    return;
+  const lastResult = resultMessages[resultMessages.length - 1];
+  toggleResultExpand(lastResult.id);
 }
 function getModelDisplay() {
   const theme = getTheme2();
@@ -21162,30 +22543,22 @@ function getModelDisplay() {
   const freeBadge = currentModel.free ? fg(theme.colors.success)(" FREE") : "";
   return t`${providerBadge} ${fg(categoryColor)(currentModel.name)}${freeBadge}`;
 }
-function getDryRunStatus() {
-  const theme = getTheme2();
-  if (dryRunMode) {
-    return t`${fg(theme.colors.warning)("[DRY RUN]")} ${fg(theme.colors.textMuted)("Ctrl+X P palette | Ctrl+X M model | Ctrl+X D dry-run")}`;
-  }
-  return t`${fg(theme.colors.textMuted)("Ctrl+X P palette | Ctrl+X M model | Ctrl+X ? help")}`;
-}
 function refreshThemeColors() {
   const theme = getTheme2();
   renderer.setBackgroundColor(theme.colors.background);
   if (headerText) {
-    headerText.content = t`${bold(fg(theme.colors.primary)("magic-shell"))} ${fg(theme.colors.textMuted)("- natural language to terminal commands")}`;
-  }
-  if (cwdText) {
-    cwdText.content = t`${fg(theme.colors.textMuted)("cwd:")} ${fg(theme.colors.success)(currentCwd)}`;
+    headerText.content = t`${bold(fg(theme.colors.primary)("magic-shell"))}`;
   }
-  if (modelText) {
-    modelText.content = getModelDisplay();
+  if (statusBarText) {
+    statusBarText.content = getStatusBarContent();
   }
-  if (statusText) {
-    statusText.content = getDryRunStatus();
+  if (helpBarText) {
+    helpBarText.content = getHelpBarContent();
   }
-  if (outputContainer) {
-    outputContainer.borderColor = theme.colors.border;
+  if (chatScrollBox) {
+    chatScrollBox.rootOptions = {
+      borderColor: theme.colors.border
+    };
   }
   if (inputField) {
     inputField.focusedBackgroundColor = theme.colors.backgroundPanel;
@@ -21193,14 +22566,6 @@ function refreshThemeColors() {
     inputField.placeholderColor = theme.colors.textMuted;
     inputField.cursorColor = theme.colors.primary;
   }
-  const providerName = config.provider === "opencode-zen" ? "OpenCode Zen" : "OpenRouter";
-  const freeModelsNote = config.provider === "opencode-zen" ? `
-${fg(theme.colors.success)("Free models available!")} Try: grok-code, glm-4.7-free` : "";
-  if (outputText) {
-    outputText.content = t`${fg(theme.colors.textMuted)(`Ready. Using ${providerName}.`)}${freeModelsNote}
-
-${fg(theme.colors.textMuted)("Type what you want to do, or press")} ${fg(theme.colors.primary)("Ctrl+X P")} ${fg(theme.colors.textMuted)("for command palette.")}`;
-  }
 }
 async function handleInput(value) {
   const input = value.trim();
@@ -21211,8 +22576,9 @@ async function handleInput(value) {
     await handleSpecialCommand(input);
     return;
   }
+  addUserMessage(input);
   if (isDirectCommand(input)) {
-    await processCommand(input, input);
+    await processDirectCommand(input, input);
     return;
   }
   await translateAndProcess(input);
@@ -21246,38 +22612,50 @@ function isDirectCommand(input) {
 async function translateAndProcess(input) {
   const apiKey = await getApiKey2(config.provider);
   if (!apiKey) {
-    setOutput(t`${fg("#ef4444")("Error: No API key configured. Run !provider to set up.")}`);
+    addSystemMessage("Error: No API key configured. Run !provider to set up.");
     return;
   }
-  setOutput(t`${fg("#64748b")("Translating...")}`);
+  const loadingMsg = addSystemMessage("Translating...");
   try {
     const command = await translateToCommand2(apiKey, currentModel, input, currentCwd, history);
-    commandPreview.content = t`${fg("#64748b")("Command:")} ${fg("#f8fafc")(command)}`;
+    chatScrollBox.remove(`msg-${loadingMsg.id}`);
+    chatMessages = chatMessages.filter((m) => m.id !== loadingMsg.id);
     const safety = analyzeCommand2(command, config);
+    const assistantMsg = addAssistantMessage(input, command, safety);
     if (safety.isDangerous) {
-      safetyWarning.content = t`${fg(getSeverityColor(safety.severity))(`[${safety.severity.toUpperCase()}] ${safety.reason}`)}`;
-      pendingCommand = command;
+      pendingMessageId = assistantMsg.id;
       awaitingConfirmation = true;
-      confirmPrompt.visible = true;
-      setOutput(t`${fg("#fbbf24")("Command requires confirmation. Press Enter to execute or Esc to cancel.")}`);
+      helpBarText.content = getHelpBarContent();
     } else {
-      safetyWarning.content = "";
-      await processCommand(input, command);
+      await executeAndShowResult(input, command, assistantMsg.id);
     }
   } catch (error) {
+    chatScrollBox.remove(`msg-${loadingMsg.id}`);
+    chatMessages = chatMessages.filter((m) => m.id !== loadingMsg.id);
     const message = error instanceof Error ? error.message : String(error);
-    setOutput(t`${fg("#ef4444")(`Error: ${message}`)}`);
+    addSystemMessage(`Error: ${message}`);
   }
 }
-async function processCommand(input, command) {
+async function processDirectCommand(input, command) {
+  const safety = analyzeCommand2(command, config);
+  const assistantMsg = addAssistantMessage(input, command, safety);
+  if (safety.isDangerous) {
+    pendingMessageId = assistantMsg.id;
+    awaitingConfirmation = true;
+    helpBarText.content = getHelpBarContent();
+  } else {
+    await executeAndShowResult(input, command, assistantMsg.id);
+  }
+}
+async function executeAndShowResult(input, command, assistantMsgId) {
   if (command.startsWith("cd ")) {
     const path2 = command.slice(3).trim().replace(/^["']|["']$/g, "");
     try {
       const expandedPath = path2.startsWith("~") ? path2.replace("~", process.env.HOME || "") : path2;
       process.chdir(expandedPath);
       currentCwd = getCwd();
-      cwdText.content = t`${fg("#64748b")("cwd:")} ${fg("#22c55e")(currentCwd)}`;
-      setOutput(t`${fg("#22c55e")(`Changed directory to ${currentCwd}`)}`);
+      statusBarText.content = getStatusBarContent();
+      addResultMessage(`Changed directory to ${currentCwd}`, 0);
       addToHistory({
         input,
         command,
@@ -21285,35 +22663,37 @@ async function processCommand(input, command) {
         timestamp: Date.now()
       });
       history = loadHistory2();
+      updateAssistantMessage(assistantMsgId, { executed: true });
     } catch (err) {
-      setOutput(t`${fg("#ef4444")(`cd: ${err instanceof Error ? err.message : String(err)}`)}`);
+      addResultMessage(`cd: ${err instanceof Error ? err.message : String(err)}`, 1);
     }
     clearCommandState();
     return;
   }
   if (dryRunMode) {
-    setOutput(t`${fg("#fbbf24")("[DRY RUN]")} Would execute: ${fg("#f8fafc")(command)}`);
+    addResultMessage(`[DRY RUN] Would execute: ${command}`, 0);
+    updateAssistantMessage(assistantMsgId, { executed: true });
     clearCommandState();
     return;
   }
-  setOutput(t`${fg("#64748b")("Executing...")}`);
   try {
-    const result = await executeCommand(command);
-    setOutput(result || t`${fg("#22c55e")("Command completed successfully")}`);
+    const { output, exitCode } = await executeCommandWithCode(command);
+    addResultMessage(output || "Command completed successfully", exitCode);
     addToHistory({
       input,
       command,
-      output: result.slice(0, 500),
+      output: output.slice(0, 500),
       timestamp: Date.now()
     });
     history = loadHistory2();
+    updateAssistantMessage(assistantMsgId, { executed: true });
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
-    setOutput(t`${fg("#ef4444")(`Error: ${message}`)}`);
+    addResultMessage(`Error: ${message}`, 1);
   }
   clearCommandState();
 }
-function executeCommand(command) {
+function executeCommandWithCode(command) {
   return new Promise((resolve3, reject) => {
     const child = spawn(command, {
       shell: true,
@@ -21332,23 +22712,16 @@ function executeCommand(command) {
       reject(error);
     });
     child.on("close", (code) => {
-      if (code === 0) {
-        resolve3(stdout || stderr);
-      } else {
-        resolve3(stderr || stdout || `Command exited with code ${code}`);
-      }
+      const exitCode = code ?? 0;
+      const output = stdout || stderr || (exitCode === 0 ? "" : `Command exited with code ${exitCode}`);
+      resolve3({ output, exitCode });
     });
   });
 }
 function clearCommandState() {
-  pendingCommand = null;
+  pendingMessageId = null;
   awaitingConfirmation = false;
-  confirmPrompt.visible = false;
-  commandPreview.content = "";
-  safetyWarning.content = "";
-}
-function setOutput(content) {
-  outputText.content = content;
+  helpBarText.content = getHelpBarContent();
 }
 async function handleSpecialCommand(input) {
   const cmd = input.slice(1).toLowerCase().trim();
@@ -21364,8 +22737,8 @@ async function handleSpecialCommand(input) {
       break;
     case "dry":
       dryRunMode = !dryRunMode;
-      statusText.content = getDryRunStatus();
-      setOutput(t`${fg("#22c55e")(`Dry-run mode: ${dryRunMode ? "ON" : "OFF"}`)}`);
+      statusBarText.content = getStatusBarContent();
+      addSystemMessage(`Dry-run mode: ${dryRunMode ? "ON" : "OFF"}`);
       break;
     case "config":
       await showConfig();
@@ -21374,65 +22747,72 @@ async function handleSpecialCommand(input) {
       showHistory();
       break;
     case "clear":
-      setOutput("");
+      clearChat();
       break;
     default:
       if (cmd) {
-        await processCommand(input, cmd);
+        addUserMessage(cmd);
+        await processDirectCommand(input, cmd);
       }
   }
 }
+function clearChat() {
+  for (const msg of chatMessages) {
+    chatScrollBox.remove(`msg-${msg.id}`);
+  }
+  chatMessages = [];
+  addSystemMessage(getWelcomeMessage());
+}
 function showHelp() {
-  const theme = getTheme2();
-  setOutput(t`${bold(fg(theme.colors.primary)("Magic Shell"))}
+  const helpText = `Keyboard Shortcuts (Ctrl+X then...):
+P  Command palette    M  Change model
+S  Switch provider    D  Toggle dry-run
+T  Change theme       H  Show history
+C  Show config        L  Clear chat
+?  This help          Q  Exit
 
-${bold(fg(theme.colors.textMuted)("Keyboard Shortcuts (Ctrl+X then...):"))}
-${fg(theme.colors.primary)("P")}  ${fg(theme.colors.textMuted)("Command palette")}    ${fg(theme.colors.primary)("M")}  ${fg(theme.colors.textMuted)("Change model")}
-${fg(theme.colors.primary)("S")}  ${fg(theme.colors.textMuted)("Switch provider")}    ${fg(theme.colors.primary)("D")}  ${fg(theme.colors.textMuted)("Toggle dry-run")}
-${fg(theme.colors.primary)("T")}  ${fg(theme.colors.textMuted)("Change theme")}       ${fg(theme.colors.primary)("H")}  ${fg(theme.colors.textMuted)("Show history")}
-${fg(theme.colors.primary)("C")}  ${fg(theme.colors.textMuted)("Show config")}        ${fg(theme.colors.primary)("L")}  ${fg(theme.colors.textMuted)("Clear output")}
-${fg(theme.colors.primary)("?")}  ${fg(theme.colors.textMuted)("This help")}          ${fg(theme.colors.primary)("Q")}  ${fg(theme.colors.textMuted)("Exit")}
+Other:
+Ctrl+C  Exit / Cancel     Esc  Close palette
 
-${bold(fg(theme.colors.textMuted)("Other:"))}
-${fg(theme.colors.primary)("Ctrl+C")}  ${fg(theme.colors.textMuted)("Exit / Cancel")}     ${fg(theme.colors.primary)("Esc")}  ${fg(theme.colors.textMuted)("Close palette")}
-
-${bold(fg(theme.colors.textMuted)("Tips:"))}
+Tips:
 - Type naturally: "list all files" -> ls -la
 - Reference history: "do that again", "undo"
-- ${fg(theme.colors.success)("Free models:")} gpt-5-nano, grok-code, glm-4.7-free`);
+- Free models: gpt-5-nano, grok-code, glm-4.7-free`;
+  addSystemMessage(helpText);
 }
 async function showConfig() {
   const theme = getTheme2();
   const providerName = config.provider === "opencode-zen" ? "OpenCode Zen" : "OpenRouter";
   const apiKey = await getApiKey2(config.provider);
-  const apiKeyStatus = apiKey ? fg(theme.colors.success)("configured") : fg(theme.colors.error)("not set");
-  const freeBadge = currentModel.free ? fg(theme.colors.success)(" (FREE)") : "";
+  const apiKeyStatus = apiKey ? "configured" : "not set";
+  const freeBadge = currentModel.free ? " (FREE)" : "";
   const shellInfo = getShellInfo2();
-  setOutput(t`${bold(fg(theme.colors.primary)("Current Configuration"))}
+  const configText = `Current Configuration
 
-${fg(theme.colors.textMuted)("Provider:")}     ${fg(theme.colors.text)(providerName)}
-${fg(theme.colors.textMuted)("Model:")}        ${fg(theme.colors.text)(currentModel.name)}${freeBadge}
-${fg(theme.colors.textMuted)("Model ID:")}     ${fg(theme.colors.textMuted)(currentModel.id)}
-${fg(theme.colors.textMuted)("Category:")}     ${fg(theme.colors.text)(currentModel.category)}
-${fg(theme.colors.textMuted)("Theme:")}        ${fg(theme.colors.text)(theme.name)}
-${fg(theme.colors.textMuted)("Shell:")}        ${fg(theme.colors.text)(shellInfo.shell)} ${fg(theme.colors.textMuted)(`(${shellInfo.shellPath})`)}
-${fg(theme.colors.textMuted)("Platform:")}     ${fg(theme.colors.text)(shellInfo.platform)}${shellInfo.isWSL ? fg(theme.colors.textMuted)(" (WSL)") : ""}
-${fg(theme.colors.textMuted)("Safety:")}       ${fg(theme.colors.text)(config.safetyLevel)}
-${fg(theme.colors.textMuted)("Dry-run:")}      ${fg(theme.colors.text)(dryRunMode ? "ON" : "OFF")}
-${fg(theme.colors.textMuted)("API Key:")}      ${apiKeyStatus}
-${fg(theme.colors.textMuted)("History:")}      ${fg(theme.colors.text)(`${history.length} commands`)}`);
+Provider:     ${providerName}
+Model:        ${currentModel.name}${freeBadge}
+Model ID:     ${currentModel.id}
+Category:     ${currentModel.category}
+Theme:        ${theme.name}
+Shell:        ${shellInfo.shell} (${shellInfo.shellPath})
+Platform:     ${shellInfo.platform}${shellInfo.isWSL ? " (WSL)" : ""}
+Safety:       ${config.safetyLevel}
+Dry-run:      ${dryRunMode ? "ON" : "OFF"}
+API Key:      ${apiKeyStatus}
+History:      ${history.length} commands`;
+  addSystemMessage(configText);
 }
 function showHistory() {
   if (history.length === 0) {
-    setOutput(t`${fg("#64748b")("No command history yet.")}`);
+    addSystemMessage("No command history yet.");
     return;
   }
   const recent = history.slice(-10);
   const lines = recent.map((entry, i) => {
     const date = new Date(entry.timestamp).toLocaleTimeString();
-    return t`${fg("#64748b")(`${i + 1}.`)} ${fg("#94a3b8")(`[${date}]`)} ${fg("#f8fafc")(entry.command)}`;
+    return `${i + 1}. [${date}] ${entry.command}`;
   });
-  setOutput(t`${bold(fg("#60a5fa")("Recent Command History"))}
+  addSystemMessage(`Recent Command History
 
 ${lines.join(`
 `)}`);
@@ -21498,10 +22878,10 @@ async function switchProvider() {
       currentModel = models.find((m) => m.id === config.defaultModel) || models[0];
       config.defaultModel = currentModel.id;
       saveConfig2(config);
-      modelText.content = getModelDisplay();
+      statusBarText.content = getStatusBarContent();
       closeSelector();
       const providerName = newProvider === "opencode-zen" ? "OpenCode Zen" : "OpenRouter";
-      setOutput(t`${fg("#22c55e")(`Switched to ${providerName}. Model: ${currentModel.name}`)}`);
+      addSystemMessage(`Switched to ${providerName}. Model: ${currentModel.name}`);
     } else {
       closeSelector();
       renderer.root.remove("main-container");
@@ -21567,12 +22947,12 @@ function showModelSelector() {
     currentModel = option.value;
     config.defaultModel = currentModel.id;
     saveConfig2(config);
-    modelText.content = getModelDisplay();
+    statusBarText.content = getStatusBarContent();
     renderer.root.remove("model-selector-container");
     modelSelector = null;
     inputField.focus();
     const freeBadge = currentModel.free ? " (FREE)" : "";
-    setOutput(t`${fg("#22c55e")(`Model changed to ${currentModel.name}${freeBadge}`)}`);
+    addSystemMessage(`Model changed to ${currentModel.name}${freeBadge}`);
   });
   modelSelector.focus();
 }
@@ -21629,8 +23009,7 @@ function showThemeSelector() {
     renderer.root.remove("theme-selector-container");
     themeSelector = null;
     refreshThemeColors();
-    const newTheme = getTheme2();
-    setOutput(t`${fg(newTheme.colors.success)(`Theme changed to ${themeName}`)}`);
+    addSystemMessage(`Theme changed to ${themeName}`);
     inputField.focus();
   });
   const escHandler = (key) => {
@@ -21674,8 +23053,8 @@ function getCommandPaletteOptions() {
       chord: "d",
       action: () => {
         dryRunMode = !dryRunMode;
-        statusText.content = getDryRunStatus();
-        setOutput(t`${fg("#22c55e")(`Dry-run mode: ${dryRunMode ? "ON" : "OFF"}`)}`);
+        statusBarText.content = getStatusBarContent();
+        addSystemMessage(`Dry-run mode: ${dryRunMode ? "ON" : "OFF"}`);
       }
     },
     {
@@ -21700,11 +23079,11 @@ function getCommandPaletteOptions() {
       action: () => showThemeSelector()
     },
     {
-      name: "Clear Output",
-      description: "Clear the output area",
+      name: "Clear Chat",
+      description: "Clear the chat history",
       key: "l",
       chord: "l",
-      action: () => setOutput("")
+      action: () => clearChat()
     },
     {
       name: "Show Help",
@@ -21845,24 +23224,44 @@ function handleKeypress(key) {
       inputField.focus();
       return;
     }
-    if (awaitingConfirmation) {
+    if (awaitingConfirmation && pendingMessageId) {
       clearCommandState();
-      setOutput(t`${fg("#64748b")("Command cancelled.")}`);
+      addSystemMessage("Command cancelled.");
       inputField.focus();
     }
   }
-  if (key.name === "return" && awaitingConfirmation && pendingCommand) {
-    const cmd = pendingCommand;
-    clearCommandState();
-    processCommand("", cmd);
+  if (key.name === "return" && awaitingConfirmation && pendingMessageId) {
+    const msg = chatMessages.find((m) => m.id === pendingMessageId);
+    if (msg && msg.command) {
+      const command = msg.command;
+      const msgId = pendingMessageId;
+      clearCommandState();
+      executeAndShowResult(msg.content, command, msgId);
+    }
   }
-  if (key.name === "e" && awaitingConfirmation && pendingCommand) {
-    inputField.value = pendingCommand;
-    clearCommandState();
-    inputField.focus();
+  if (key.name === "e" && awaitingConfirmation && pendingMessageId) {
+    const msg = chatMessages.find((m) => m.id === pendingMessageId);
+    if (msg && msg.command) {
+      inputField.value = msg.command;
+      clearCommandState();
+      inputField.focus();
+    }
+  }
+  if (key.name === "c" && awaitingConfirmation && pendingMessageId) {
+    const msg = chatMessages.find((m) => m.id === pendingMessageId);
+    if (msg && msg.command) {
+      const copyCmd = process.platform === "darwin" ? "pbcopy" : "xclip -selection clipboard";
+      const child = spawn(copyCmd, { shell: true });
+      child.stdin?.write(msg.command);
+      child.stdin?.end();
+      addSystemMessage(`Copied to clipboard: ${msg.command}`);
+    }
+  }
+  if (key.name === "o" && !awaitingConfirmation && !commandPalette && !modelSelector) {
+    toggleLastResultExpand();
   }
 }
-var renderer, currentModel, config, history, currentCwd, dryRunMode = false, mainContainer, headerText, cwdText, modelText, inputField, outputContainer, outputText, statusText, commandPreview, safetyWarning, confirmPrompt, modelSelector = null, providerSelector = null, pendingCommand = null, awaitingConfirmation = false, themeSelector = null, commandPalette = null, chordMode = "none", cli_default;
+var renderer, currentModel, config, history, currentCwd, dryRunMode = false, chatMessages, messageIdCounter = 0, mainContainer, headerText, statusBarText, chatScrollBox, inputField, helpBarText, modelSelector = null, providerSelector = null, pendingMessageId = null, awaitingConfirmation = false, themeSelector = null, commandPalette = null, chordMode = "none", cli_default;
 var init_cli = __esm(async () => {
   init_types();
   init_config();
@@ -21873,6 +23272,7 @@ var init_cli = __esm(async () => {
   currentModel = OPENCODE_ZEN_MODELS2[0];
   history = [];
   currentCwd = getCwd();
+  chatMessages = [];
   if (false) {}
   cli_default = main2;
 });
@@ -23165,7 +24565,7 @@ Try: ${colors.cyan}msh "list all files"${colors.reset}
 `);
   rl.close();
 }
-function executeCommand2(command) {
+function executeCommand(command) {
   return new Promise((resolve3) => {
     const child = spawn2(command, {
       shell: true,
@@ -23228,7 +24628,7 @@ async function translate(query, options) {
         console.error(`${colors.yellow}Use -n to preview, or run the command manually.${colors.reset}`);
         process.exit(1);
       }
-      const result = await executeCommand2(command);
+      const result = await executeCommand(command);
       process.exit(result.code);
     } else {
       console.log(command);