omnius 1.0.861 → 1.0.863

package/dist/tui/native/worker.js

@@ -2,142 +2,3069 @@
 import { createWriteStream } from "node:fs";
 import { createInterface } from "node:readline";
 import { PassThrough } from "node:stream";
+import { CliRenderEvents as CliRenderEvents4, NativeSession, RGBA as RGBA3, createCliRenderer } from "@opentui/core";
+
+// packages/cli/src/tui/native/components/frontend.ts
 import {
-  createCliRenderer,
-  NativeSession,
-  RGBA,
-  StyledText,
+  BoxRenderable as BoxRenderable4,
+  CliRenderEvents as CliRenderEvents2,
+  EmbeddedTerminalRenderable as EmbeddedTerminalRenderable2,
+  ScrollBoxRenderable as ScrollBoxRenderable4,
+  SyntaxStyle as SyntaxStyle2,
+  TabSelectRenderable,
+  TextareaRenderable as TextareaRenderable2,
+  TextRenderable as TextRenderable4,
+  TextAttributes as TextAttributes6,
+  createClipboard,
+  createHostClipboard,
+  createRendererClipboardAdapter
+} from "@opentui/core";
+
+// packages/cli/src/tui/native/components/blocks.ts
+import {
+  BoxRenderable,
+  CodeRenderable,
+  EmbeddedTerminalRenderable,
+  ImageRenderable,
+  MarkdownRenderable,
+  RenderableEvents,
+  ScrollBoxRenderable,
   TextRenderable
 } from "@opentui/core";
-var replies = createWriteStream("", { fd: 3, autoClose: false });
-var reply = (message) => replies.write(JSON.stringify(message) + "\n");
-var terminalInput = new PassThrough();
-var rows = [];
-var renderer;
-var session;
-var stopping = false;
-var suspended = false;
-var lastCursor = { row: 0, col: 0, visible: false };
-var colors = /* @__PURE__ */ new Map();
-function color(value, background) {
-  if (value === void 0)
-    return background ? RGBA.defaultBackground() : RGBA.defaultForeground();
-  const cached = colors.get(value);
-  if (cached) return cached;
-  const parsed = value.startsWith("index:") ? RGBA.fromIndex(Number(value.slice(6))) : RGBA.fromHex(value);
-  if (colors.size >= 4096) colors.delete(colors.keys().next().value);
-  colors.set(value, parsed);
-  return parsed;
-}
-function applyFrame(frame) {
-  const ui = renderer;
-  if (ui.terminalWidth !== frame.columns || ui.terminalHeight !== frame.rows)
-    ui.resize(frame.columns, frame.rows);
-  while (rows.length > frame.rows) rows.pop().destroy();
-  while (rows.length < frame.rows) {
-    const row = rows.length;
-    const text = new TextRenderable(ui, {
-      id: `omnius-row-${row}`,
+
+// packages/cli/src/tui/native/components/text.ts
+import { CliRenderEvents, RGBA, StyledText, TextAttributes } from "@opentui/core";
+
+// packages/cli/src/tui/native/text.ts
+function stripTextControls(value) {
+  return value.replace(/\x1b\][\s\S]*?(?:\x07|\x1b\\)/g, "").replace(/\x1b[P_^X][\s\S]*?\x1b\\/g, "").replace(/\x1b\[[-0-?]*[ -/]*[@-~]/g, "").replace(/\x1b[\s\S]/g, "").replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, "").replace(/\r\n/g, "\n").replace(/\r/g, "");
+}
+function nativeTextFromAnsi(value) {
+  const result = [];
+  let style = { attributes: 0 };
+  let previous = 0;
+  const pattern = /\x1b(?:\[[-0-?]*[ -/]*[@-~]|\][\s\S]*?(?:\x07|\x1b\\)|[P_^X][\s\S]*?\x1b\\|[\s\S])/g;
+  const append = (text) => {
+    const clean = stripTextControls(text);
+    if (!clean) return;
+    const last = result.at(-1);
+    if (last && last.fg === style.fg && last.bg === style.bg && last.attributes === style.attributes && last.link === style.link)
+      last.text += clean;
+    else result.push({ ...style, text: clean });
+  };
+  for (const match of value.matchAll(pattern)) {
+    append(value.slice(previous, match.index));
+    previous = match.index + match[0].length;
+    const seq = match[0];
+    if (seq.startsWith("\x1B]8;")) {
+      const url = seq.replace(/^\x1b\]8;[^;]*;/, "").replace(/(?:\x07|\x1b\\)$/, "");
+      if (/^(?:https?:|file:)/.test(url)) style.link = url;
+      else delete style.link;
+      continue;
+    }
+    if (!/^\x1b\[[-\d;:]*m$/.test(seq)) continue;
+    const codes = seq.slice(2, -1).replace(/:/g, ";").split(";").map(Number);
+    for (let i = 0; i < codes.length; i++) {
+      const code = codes[i];
+      const attr = style.attributes ?? 0;
+      if (code === 0) style = { attributes: 0 };
+      else if (code >= 1 && code <= 9) {
+        const bit = {
+          1: 1,
+          2: 2,
+          3: 4,
+          4: 8,
+          5: 16,
+          6: 16,
+          7: 32,
+          8: 64,
+          9: 128
+        }[code];
+        style.attributes = attr | bit;
+      } else if (code >= 22 && code <= 29) {
+        const bit = { 22: 3, 23: 4, 24: 8, 25: 16, 27: 32, 28: 64, 29: 128 }[code] ?? 0;
+        style.attributes = attr & ~bit;
+      } else if (code === 39) delete style.fg;
+      else if (code === 49) delete style.bg;
+      else if (code >= 30 && code <= 37) style.fg = `index:${code - 30}`;
+      else if (code >= 90 && code <= 97) style.fg = `index:${code - 90 + 8}`;
+      else if (code >= 40 && code <= 47) style.bg = `index:${code - 40}`;
+      else if (code >= 100 && code <= 107) style.bg = `index:${code - 100 + 8}`;
+      else if ((code === 38 || code === 48) && codes[i + 1] === 5) {
+        const role = code === 38 ? "fg" : "bg";
+        const index = codes[i + 2] ?? 0;
+        if (index < 0) delete style[role];
+        else style[role] = `index:${Math.min(255, index)}`;
+        i += 2;
+      } else if ((code === 38 || code === 48) && codes[i + 1] === 2) {
+        const rgb = codes.slice(i + 2, i + 5).map(
+          (n) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, "0")
+        );
+        if (rgb.length === 3)
+          style[code === 38 ? "fg" : "bg"] = `#${rgb.join("")}`;
+        i += 4;
+      }
+    }
+  }
+  append(value.slice(previous));
+  return result;
+}
+
+// packages/cli/src/tui/native/components/text.ts
+function plainText(value) {
+  return typeof value === "string" ? stripTextControls(value) : (value ?? []).map((span) => stripTextControls(span.text)).join("");
+}
+function textSpans(value) {
+  return Array.isArray(value) ? value.map((span) => ({ ...span, text: stripTextControls(span.text) })) : nativeTextFromAnsi(value ?? "");
+}
+function styledText(value) {
+  return new StyledText(textSpans(value).map((span) => ({
+    __isChunk: true,
+    text: span.text,
+    ...span.attributes === void 0 ? {} : { attributes: span.attributes },
+    ...span.link ? { link: { url: span.link } } : {}
+  })));
+}
+function palette(_theme) {
+  const background2 = RGBA.defaultBackground();
+  const foreground2 = RGBA.defaultForeground();
+  return {
+    background: background2,
+    foreground: foreground2,
+    accent: foreground2,
+    dim: foreground2,
+    border: foreground2,
+    warning: foreground2,
+    error: foreground2,
+    success: foreground2,
+    selection: background2
+  };
+}
+function installDefaultSelectionContrast(renderer2) {
+  const foreground2 = RGBA.defaultForeground();
+  const background2 = RGBA.defaultBackground();
+  const paintSelection = (buffer) => {
+    const lines = buffer.getSpanLines();
+    buffer.withBuffers((cells) => {
+      for (let y = 0; y < lines.length; y++) {
+        let x = 0;
+        for (const span of lines[y].spans) {
+          if (span.fg.intent === "default" && span.bg.intent === "default" && !(span.attributes & TextAttributes.INVERSE) && span.fg.equals(background2) && span.bg.equals(foreground2)) {
+            for (let column = x; column < x + span.width; column++)
+              cells.attributes[y * cells.width + column] |= TextAttributes.INVERSE;
+          }
+          x += span.width;
+        }
+      }
+    });
+  };
+  renderer2.addPostProcessFn(paintSelection);
+  let disposed = false;
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    renderer2.removePostProcessFn(paintSelection);
+    renderer2.off(CliRenderEvents.DESTROY, dispose);
+  };
+  renderer2.once(CliRenderEvents.DESTROY, dispose);
+  renderer2.requestRender();
+  return dispose;
+}
+
+// packages/cli/src/tui/native/components/blocks.ts
+function nativeProgressText(value, working = false) {
+  if (value === void 0 || !Number.isFinite(value)) return `[············] ${working ? "working" : "pending"}`;
+  const ratio = Math.max(0, Math.min(1, value));
+  const filled = Math.round(ratio * 12);
+  return `[${"•".repeat(filled)}${"·".repeat(12 - filled)}] ${Math.round(ratio * 100)}%`;
+}
+function nativeControlFocus(control, baseAttributes = 0) {
+  const update = () => {
+    if (!control.isDestroyed) control.attributes = baseAttributes | (control.focused ? 32 : 0);
+  };
+  control.on(RenderableEvents.FOCUSED, update);
+  control.on(RenderableEvents.BLURRED, update);
+  update();
+}
+var NativeBlockView = class {
+  constructor(context, spec, inline = false) {
+    this.context = context;
+    this.inline = inline;
+    this.spec = spec;
+    this.pixel = inline && spec.kind === "text" && Boolean(spec.actions?.length) && spec.actions.every((action) => action.id.startsWith("pixel:"));
+    this.root = new BoxRenderable(context.renderer, {
+      id: `block:${spec.id}`,
+      flexDirection: "column",
+      flexShrink: inline && !this.pixel ? 1 : 0,
+      flexGrow: inline && !this.pixel ? 1 : 0,
+      flexBasis: inline && !this.pixel ? 0 : "auto",
+      minWidth: inline && !this.pixel ? 0 : void 0,
+      width: this.pixel ? 1 : inline ? "auto" : "100%"
+    });
+    this.build();
+    this.update(spec);
+  }
+  context;
+  inline;
+  root;
+  spec;
+  title;
+  text;
+  body;
+  children;
+  actions;
+  progress;
+  image;
+  terminal;
+  collapsed = false;
+  previousModelCollapsed;
+  signature = "";
+  actionsSignature = "";
+  pixel;
+  get block() {
+    return this.spec;
+  }
+  build() {
+    const { renderer: renderer2, colors, syntax } = this.context;
+    const spec = this.spec;
+    if (spec.kind === "card") this.root.borderStyle = "single";
+    this.root.border = spec.kind === "card" ? ["left", "bottom"] : false;
+    this.root.paddingLeft = spec.kind === "card" ? 1 : 0;
+    this.root.paddingRight = 0;
+    this.root.marginBottom = 0;
+    this.root.flexDirection = spec.kind === "row" ? "row" : "column";
+    if (spec.title) {
+      this.title = new TextRenderable(renderer2, {
+        id: `block-title:${spec.id}`,
+        content: "",
+        fg: colors.foreground,
+        attributes: 1,
+        flexShrink: 0,
+        width: "100%",
+        wrapMode: "word",
+        selectable: false,
+        onMouseDown: (event) => {
+          if (event.button !== 0 || !this.spec.collapsible) return;
+          this.toggle();
+          event.stopPropagation();
+        },
+        onKeyDown: (key) => {
+          if (key.eventType === "release" || !this.spec.collapsible || key.name !== "return" && key.sequence !== " ") return;
+          this.toggle();
+          key.preventDefault();
+          key.stopPropagation();
+        }
+      });
+      nativeControlFocus(this.title, 1);
+      this.root.add(this.title);
+    }
+    this.body = new BoxRenderable(renderer2, {
+      id: `block-body:${spec.id}`,
+      flexDirection: spec.kind === "row" ? "row" : "column",
+      width: this.pixel ? "auto" : "100%",
+      flexShrink: 0
+    });
+    this.root.add(this.body);
+    if (spec.kind === "terminal") {
+      this.terminal = new EmbeddedTerminalRenderable(renderer2, {
+        id: `embedded:${spec.id}`,
+        width: "100%",
+        height: spec.height ?? 14,
+        maxScrollback: 1e4,
+        transparentBackground: true,
+        selectable: true,
+        onData: (data) => this.context.emit({ type: "embedded-data", id: this.spec.id, data: Buffer.from(data).toString("base64") }),
+        onTerminalResize: (columns, rows) => this.context.emit({ type: "embedded-resize", id: this.spec.id, columns, rows })
+      });
+      this.context.terminals.set(spec.id, this.terminal);
+      this.body.add(this.terminal);
+    } else if (spec.kind === "image" && spec.imagePath) {
+      this.image = new ImageRenderable(renderer2, {
+        id: `image:${spec.id}`,
+        source: spec.imagePath,
+        width: "100%",
+        height: spec.height ?? 12,
+        fit: "fit",
+        protocol: "auto",
+        onError: (error) => {
+          if (this.image) this.image.visible = false;
+          if (this.text) {
+            this.text.visible = true;
+            if (this.text instanceof TextRenderable) this.text.content = styledText(this.spec.text ?? "Image unavailable");
+          }
+          this.context.emit({ type: "action", action: "image-error", id: spec.id, text: String(error) });
+        },
+        onLoad: () => {
+          if (this.image) this.image.visible = true;
+          if (this.text) this.text.visible = false;
+        }
+      });
+      this.body.add(this.image);
+      this.text = new TextRenderable(renderer2, { id: `image-fallback:${spec.id}`, content: "", visible: false, width: "100%", wrapMode: "word", fg: colors.dim, selectable: true });
+      this.body.add(this.text);
+    } else if (spec.kind === "markdown") {
+      this.text = new MarkdownRenderable(renderer2, {
+        id: `markdown:${spec.id}`,
+        content: "",
+        syntaxStyle: syntax,
+        fg: colors.foreground,
+        bg: colors.background,
+        streaming: spec.streaming ?? false,
+        width: "100%",
+        flexShrink: 0,
+        internalBlockMode: "top-level",
+        conceal: true,
+        tableOptions: { style: "columns", widthMode: "full", wrapMode: "word", selectable: true }
+      });
+      this.body.add(this.text);
+    } else if (spec.kind === "code") {
+      this.text = new CodeRenderable(renderer2, {
+        id: `code:${spec.id}`,
+        content: "",
+        filetype: spec.language,
+        syntaxStyle: syntax,
+        fg: colors.foreground,
+        bg: colors.background,
+        width: "100%",
+        flexShrink: 0,
+        streaming: spec.streaming ?? false,
+        selectable: true,
+        wrapMode: "word",
+        drawUnstyledText: true
+      });
+      this.body.add(this.text);
+    } else if (spec.text !== void 0) {
+      this.text = new TextRenderable(renderer2, {
+        id: `text:${spec.id}`,
+        content: "",
+        width: this.pixel ? "auto" : "100%",
+        flexShrink: 0,
+        wrapMode: "word",
+        fg: colors.foreground,
+        bg: colors.background,
+        selectable: true
+      });
+      this.body.add(this.text);
+    }
+    if (spec.kind === "progress") {
+      this.progress = new TextRenderable(renderer2, {
+        id: `progress-track:${spec.id}`,
+        width: "100%",
+        height: 1,
+        content: "",
+        fg: colors.foreground,
+        bg: colors.background,
+        attributes: 2,
+        wrapMode: "none",
+        selectable: false
+      });
+      this.body.add(this.progress);
+    }
+    this.children = new NativeBlockList(this.context, this.body);
+    this.actions = new BoxRenderable(renderer2, {
+      id: `block-actions:${spec.id}`,
+      flexDirection: "row",
+      gap: 1,
+      flexShrink: 0
+    });
+    this.root.add(this.actions);
+  }
+  reset() {
+    this.children?.destroy();
+    if (this.terminal) this.context.terminals.delete(this.spec.id);
+    for (const child of [...this.root.getChildren()]) child.destroyRecursively();
+    this.title = this.text = this.body = this.actions = this.progress = this.image = this.terminal = void 0;
+    this.children = void 0;
+    this.actionsSignature = "";
+    this.build();
+  }
+  update(spec) {
+    const signature = JSON.stringify(spec);
+    if (signature === this.signature) return;
+    const rebuild = spec.kind !== this.spec.kind || Boolean(spec.title) !== Boolean(this.spec.title) || spec.text !== void 0 !== (this.spec.text !== void 0) || Boolean(spec.imagePath) !== Boolean(this.spec.imagePath) || spec.kind === "image" && spec.imageRevision !== this.spec.imageRevision;
+    this.spec = spec;
+    if (rebuild) this.reset();
+    this.signature = signature;
+    if (spec.collapsed !== this.previousModelCollapsed) {
+      this.collapsed = spec.collapsed ?? false;
+      this.previousModelCollapsed = spec.collapsed;
+    }
+    if (this.title) {
+      this.title.content = `${spec.collapsible ? this.collapsed ? "▸ " : "· " : ""}${plainText(spec.title)}`;
+      this.title.focusable = Boolean(spec.collapsible);
+    }
+    if (this.body) this.body.visible = !this.collapsed;
+    if (this.text instanceof TextRenderable) this.text.content = styledText(spec.kind === "image" ? spec.text ?? "Image unavailable" : spec.text);
+    else if (this.text instanceof MarkdownRenderable || this.text instanceof CodeRenderable) {
+      this.text.content = plainText(spec.text);
+      this.text.streaming = spec.streaming ?? false;
+      if (this.text instanceof CodeRenderable) this.text.filetype = spec.language;
+    }
+    if (this.image && spec.imagePath && this.image.source !== spec.imagePath) this.image.source = spec.imagePath;
+    if (this.terminal) this.terminal.height = spec.height ?? 14;
+    if (this.image) this.image.height = spec.height ?? 12;
+    if (this.progress) this.progress.content = nativeProgressText(spec.progress, spec.streaming);
+    this.children?.replace(spec.children ?? []);
+    const actionsSignature = JSON.stringify(spec.actions ?? []);
+    if (this.actions && actionsSignature !== this.actionsSignature) {
+      this.actionsSignature = actionsSignature;
+      for (const child of [...this.actions.getChildren()]) child.destroy();
+      for (const action of spec.actions ?? []) {
+        const button = new TextRenderable(this.context.renderer, {
+          id: `block-action:${spec.id}:${action.id}`,
+          content: plainText(action.label),
+          fg: this.context.colors.foreground,
+          bg: this.context.colors.background,
+          attributes: action.disabled ? 2 : action.active ? 1 : 0,
+          flexShrink: 0,
+          selectable: false,
+          onMouseDown: (event) => {
+            if (event.button !== 0 || action.disabled) return;
+            this.context.emit({ type: "action", action: action.command ?? action.id, id: this.spec.id });
+            event.stopPropagation();
+          },
+          onKeyDown: (key) => {
+            if (key.eventType === "release" || key.name !== "return" && key.sequence !== " " || action.disabled) return;
+            this.context.emit({ type: "action", action: action.command ?? action.id, id: this.spec.id });
+            key.preventDefault();
+          }
+        });
+        button.focusable = !action.disabled;
+        nativeControlFocus(button, action.disabled ? 2 : action.active ? 1 : 0);
+        if (action.id.startsWith("pixel:") && !action.disabled) {
+          button.onMouseOver = () => this.context.emit({ type: "action", action: `hover:${action.id}`, id: this.spec.id });
+          button.onMouseOut = () => this.context.emit({ type: "action", action: `hover-end:${action.id}`, id: this.spec.id });
+        }
+        this.actions.add(button);
+      }
+      this.actions.visible = (spec.actions?.length ?? 0) > 0;
+    }
+    this.applyTheme();
+  }
+  toggle() {
+    this.collapsed = !this.collapsed;
+    if (this.body) this.body.visible = !this.collapsed;
+    if (this.title) this.title.content = `${this.collapsed ? "▸ " : "· "}${plainText(this.spec.title)}`;
+    this.context.emit({ type: "action", action: "toggle-block", id: this.spec.id });
+  }
+  applyTheme() {
+    const colors = this.context.colors;
+    this.root.backgroundColor = colors.background;
+    if (this.spec.kind === "card") this.root.borderColor = colors.border;
+    else this.root.border = false;
+    if (this.title) {
+      this.title.fg = colors.foreground;
+      this.title.bg = colors.background;
+    }
+    if (this.body) this.body.backgroundColor = colors.background;
+    if (this.text) {
+      this.text.fg = colors.foreground;
+      this.text.bg = colors.background;
+    }
+    if (this.progress) {
+      this.progress.fg = colors.foreground;
+      this.progress.bg = colors.background;
+    }
+    for (const action of this.actions?.getChildren() ?? []) if (action instanceof TextRenderable) {
+      action.fg = colors.foreground;
+      action.bg = colors.background;
+    }
+    this.children?.applyTheme();
+  }
+  destroy() {
+    this.children?.destroy();
+    if (this.terminal) this.context.terminals.delete(this.spec.id);
+    this.root.destroyRecursively();
+  }
+};
+var NativeBlockList = class {
+  constructor(context, parent) {
+    this.context = context;
+    this.parent = parent;
+  }
+  context;
+  parent;
+  views = /* @__PURE__ */ new Map();
+  order = [];
+  patch(patch) {
+    if (patch.reset) this.clear();
+    for (const id of patch.remove) this.remove(id);
+    for (const spec of patch.upsert) {
+      const existing = this.views.get(spec.id);
+      if (existing) existing.update(spec);
+      else {
+        const direction = this.parent instanceof ScrollBoxRenderable ? this.parent.content.primaryAxis : this.parent.primaryAxis;
+        const view = new NativeBlockView(this.context, spec, direction === "row");
+        this.views.set(spec.id, view);
+        this.order.push(spec.id);
+        this.parent.add(view.root);
+      }
+    }
+    if (patch.order) this.reorder(patch.order);
+  }
+  replace(blocks) {
+    const keep = new Set(blocks.map((block) => block.id));
+    this.patch({ remove: [...this.views.keys()].filter((id) => !keep.has(id)), upsert: blocks, order: blocks.map((block) => block.id) });
+  }
+  reorder(order) {
+    const next = order.filter((id) => this.views.has(id));
+    if (next.length === this.order.length && next.every((id, index) => this.order[index] === id)) return;
+    next.forEach((id, index) => this.parent.add(this.views.get(id).root, index));
+    this.order = next;
+  }
+  remove(id) {
+    this.views.get(id)?.destroy();
+    this.views.delete(id);
+    this.order = this.order.filter((value) => value !== id);
+  }
+  applyTheme() {
+    for (const view of this.views.values()) view.applyTheme();
+  }
+  clear() {
+    for (const view of this.views.values()) view.destroy();
+    this.views.clear();
+    this.order = [];
+  }
+  destroy() {
+    this.clear();
+  }
+};
+
+// packages/cli/src/tui/native/components/modals.ts
+import {
+  BoxRenderable as BoxRenderable2,
+  InputRenderable,
+  ScrollBoxRenderable as ScrollBoxRenderable2,
+  TextareaRenderable,
+  TextAttributes as TextAttributes4,
+  TextRenderable as TextRenderable2
+} from "@opentui/core";
+
+// packages/cli/src/tui/native/components/select.ts
+import { SelectRenderable } from "@opentui/core";
+
+// packages/cli/src/tui/native/components/scrollbar.ts
+import { TextAttributes as TextAttributes2 } from "@opentui/core";
+function drawDotRail(buffer, x, y, length, horizontal, progress, colors) {
+  length = Math.max(0, Math.trunc(length));
+  if (!length) return;
+  buffer.fillRect(x, y, horizontal ? length : 1, horizontal ? 1 : length, colors.background);
+  if (horizontal) buffer.drawText("─".repeat(length), x, y, colors.foreground, colors.background, TextAttributes2.DIM);
+  else for (let row = 0; row < length; row++) buffer.drawText("│", x, y + row, colors.foreground, colors.background, TextAttributes2.DIM);
+  const position = Math.round(Math.max(0, Math.min(1, progress)) * (length - 1));
+  buffer.drawText("•", x + (horizontal ? position : 0), y + (horizontal ? 0 : position), colors.foreground, colors.background, TextAttributes2.BOLD);
+}
+function styleNativeScrollbars(scroll, colors) {
+  for (const bar of [scroll.horizontalScrollBar, scroll.verticalScrollBar]) {
+    bar.showArrows = false;
+    const slider = bar.slider;
+    slider.foregroundColor = colors.foreground;
+    slider.backgroundColor = colors.background;
+    slider.renderAfter = (buffer) => {
+      const horizontal = slider.orientation === "horizontal";
+      drawDotRail(
+        buffer,
+        slider.x,
+        slider.y,
+        horizontal ? slider.width : slider.height,
+        horizontal,
+        slider.max > slider.min ? (slider.value - slider.min) / (slider.max - slider.min) : 0,
+        colors
+      );
+    };
+    let dragging = false;
+    const seek = (event) => {
+      const horizontal = slider.orientation === "horizontal";
+      const length = horizontal ? slider.width : slider.height;
+      const offset = horizontal ? event.x - slider.x : event.y - slider.y;
+      const progress = length > 1 ? Math.max(0, Math.min(1, offset / (length - 1))) : 0;
+      slider.value = slider.min + progress * (slider.max - slider.min);
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    slider.onMouseDown = (event) => {
+      if (event.button === 0) {
+        dragging = true;
+        seek(event);
+      }
+    };
+    slider.onMouseDrag = (event) => {
+      if (dragging) seek(event);
+    };
+    slider.onMouseUp = (event) => {
+      if (dragging) seek(event);
+      dragging = false;
+    };
+    slider.onMouseDragEnd = () => {
+      dragging = false;
+    };
+  }
+}
+
+// packages/cli/src/tui/native/components/select.ts
+var NativeSelectRenderable = class extends SelectRenderable {
+  onActivate;
+  draggingRail = false;
+  constructor(renderer2, options) {
+    super(renderer2, options);
+    const colors = palette({ mode: "system", bg: -1, accent: -1, textPrimary: -1, textDim: -1, boxColor: -1 });
+    this.renderAfter = (buffer) => {
+      const count = this.visibleCount();
+      if (!this.showScrollIndicator || this.options.length <= count) return;
+      const offset = Math.max(0, Math.min(this.getSelectedIndex() - Math.floor(count / 2), this.options.length - count));
+      drawDotRail(buffer, this.width - 1, 0, this.height, false, offset / (this.options.length - count), colors);
+    };
+  }
+  visibleCount() {
+    return Math.max(1, Math.floor(this.height / (this.showDescription ? 2 : 1)));
+  }
+  seekRail(event) {
+    const progress = this.height > 1 ? Math.max(0, Math.min(1, (event.y - this.y) / (this.height - 1))) : 0;
+    const target = Math.round(progress * Math.max(0, this.options.length - 1));
+    for (let distance = 0; distance < this.options.length; distance++) {
+      const index = [target + distance, target - distance].find((candidate) => candidate >= 0 && candidate < this.options.length && !this.disabled(candidate));
+      if (index !== void 0) {
+        this.setSelectedIndex(index);
+        break;
+      }
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  disabled(index) {
+    const option = this.options[index];
+    return !option || option.value?.disabled === true;
+  }
+  moveUp(steps = 1) {
+    this.move(-steps);
+  }
+  moveDown(steps = 1) {
+    this.move(steps);
+  }
+  move(delta) {
+    if (this.options.length === 0) return;
+    const direction = delta < 0 ? -1 : 1;
+    let index = Math.min(this.options.length - 1, Math.max(0, this.getSelectedIndex() + delta));
+    for (let attempts = 0; attempts < this.options.length && this.disabled(index); attempts++) {
+      index += direction;
+      if (index < 0 || index >= this.options.length) {
+        if (!this.wrapSelection) return;
+        index = index < 0 ? this.options.length - 1 : 0;
+      }
+    }
+    if (!this.disabled(index)) this.setSelectedIndex(index);
+  }
+  selectCurrent() {
+    if (!this.disabled(this.getSelectedIndex())) super.selectCurrent();
+  }
+  onMouseEvent(event) {
+    if ((event.type === "drag" || event.type === "up") && this.draggingRail) {
+      this.seekRail(event);
+      if (event.type === "up") this.draggingRail = false;
+      return;
+    }
+    if (event.type === "scroll") {
+      if (event.scroll?.direction === "up") this.moveUp(1);
+      else if (event.scroll?.direction === "down") this.moveDown(1);
+      event.stopPropagation();
+      return;
+    }
+    if (event.type !== "down" || event.button !== 0) return;
+    if (this.showScrollIndicator && this.options.length > this.visibleCount() && event.x === this.x + this.width - 1) {
+      this.draggingRail = true;
+      this.seekRail(event);
+      return;
+    }
+    const lines = this.showDescription ? 2 : 1;
+    const count = Math.max(1, Math.floor(this.height / lines));
+    const start = Math.max(0, Math.min(this.getSelectedIndex() - Math.floor(count / 2), this.options.length - count));
+    const index = start + Math.floor((event.y - this.y) / lines);
+    if (index >= start && index < Math.min(start + count, this.options.length) && !this.disabled(index)) {
+      this.setSelectedIndex(index);
+      this.onActivate?.();
+    }
+    event.stopPropagation();
+  }
+};
+
+// packages/cli/src/tui/native/components/corner-frame.ts
+import { RenderableEvents as RenderableEvents2, TextAttributes as TextAttributes3 } from "@opentui/core";
+function drawCornerFrame(buffer, panel, colors, progress = 1) {
+  const { x, y, width, height } = panel;
+  if (width <= 0 || height <= 0) return;
+  const draw = (text, column, row) => buffer.drawText(text, column, row, colors.foreground, colors.background, TextAttributes3.DIM);
+  draw(" ".repeat(width), x, y);
+  if (height > 1) draw(" ".repeat(width), x, y + height - 1);
+  for (let row = 1; row < height - 1; row++) {
+    draw(" ", x, y + row);
+    if (width > 1) draw(" ", x + width - 1, y + row);
+  }
+  if (height === 1) {
+    draw("─".repeat(width), x, y);
+    return;
+  }
+  if (width === 1) {
+    for (let row = 0; row < height; row++) draw("│", x, y + row);
+    return;
+  }
+  const fraction = Math.max(0, Math.min(1, progress));
+  const horizontal = Math.round(Math.min(4, Math.max(0, Math.floor((width - 3) / 2))) * fraction);
+  const vertical = Math.round(Math.min(2, Math.max(0, Math.floor((height - 3) / 2))) * fraction);
+  draw(`┌${"─".repeat(horizontal)}`, x, y);
+  draw(`${"─".repeat(horizontal)}┐`, x + width - horizontal - 1, y);
+  draw(`└${"─".repeat(horizontal)}`, x, y + height - 1);
+  draw(`${"─".repeat(horizontal)}┘`, x + width - horizontal - 1, y + height - 1);
+  for (let arm = 1; arm <= vertical; arm++) {
+    for (const column of [x, x + width - 1]) {
+      draw("│", column, y + arm);
+      draw("│", column, y + height - arm - 1);
+    }
+  }
+}
+var NativeCornerFrame = class {
+  constructor(panel, colors, renderer2) {
+    this.panel = panel;
+    this.colors = colors;
+    this.renderer = renderer2;
+    this.previousRender = panel.renderAfter;
+    this.render = (buffer, deltaTime) => {
+      this.previousRender?.call(panel, buffer, deltaTime);
+      drawCornerFrame(buffer, panel, this.colors, this.progress);
+    };
+    panel.renderAfter = this.render;
+    panel.once(RenderableEvents2.DESTROYED, this.destroy);
+    if (process.env["OMNIUS_TUI_REDUCE_MOTION"] === "1" || process.env["REDUCE_MOTION"] === "1") this.progress = 1;
+    else {
+      let frame = 0;
+      const advance = () => {
+        if (this.disposed) return;
+        this.progress = ++frame / 4;
+        renderer2.requestRender();
+        if (frame < 4) this.timer = setTimeout(advance, 32);
+        else this.timer = void 0;
+      };
+      this.timer = setTimeout(advance, 32);
+    }
+  }
+  panel;
+  colors;
+  renderer;
+  progress = 0;
+  timer;
+  disposed = false;
+  previousRender;
+  render;
+  get animating() {
+    return this.timer !== void 0;
+  }
+  setColors(colors) {
+    this.colors = colors;
+  }
+  destroy = () => {
+    if (this.disposed) return;
+    this.disposed = true;
+    if (this.timer !== void 0) clearTimeout(this.timer);
+    this.timer = void 0;
+    this.panel.off(RenderableEvents2.DESTROYED, this.destroy);
+    if (this.panel.renderAfter === this.render) this.panel.renderAfter = this.previousRender;
+  };
+};
+
+// packages/cli/src/tui/native/components/modals.ts
+var NativeModalView = class {
+  constructor(context, spec, close2) {
+    this.context = context;
+    this.close = close2;
+    this.spec = spec;
+    const { renderer: renderer2, colors } = context;
+    this.root = new BoxRenderable2(renderer2, {
+      id: `modal:${spec.id}`,
       position: "absolute",
+      top: 0,
       left: 0,
-      top: row,
-      width: frame.columns,
+      width: "100%",
+      height: "100%",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: 100,
+      backgroundColor: "transparent",
+      shouldFill: false
+    });
+    this.panel = new BoxRenderable2(renderer2, {
+      id: `modal-panel:${spec.id}`,
+      flexDirection: "column",
+      width: "94%",
+      maxHeight: "94%",
+      border: true,
+      borderStyle: "single",
+      borderColor: colors.border,
+      backgroundColor: colors.background,
+      paddingX: 1,
+      paddingY: 0,
+      focusable: true,
+      onMouseDown: () => this.focus()
+    });
+    this.frame = new NativeCornerFrame(this.panel, colors, renderer2);
+    this.root.add(this.panel);
+    this.breadcrumb = this.addText(`modal-breadcrumb:${spec.id}`);
+    this.heading = this.addText(`modal-title:${spec.id}`);
+    this.description = this.addText(`modal-description:${spec.id}`);
+    if (spec.kind === "select") this.buildSelect();
+    else if (spec.kind === "input") this.buildInput();
+    else if (spec.kind === "document") {
+      this.document = new ScrollBoxRenderable2(renderer2, {
+        id: `modal-document:${spec.id}`,
+        width: "100%",
+        height: Math.max(5, Math.floor(renderer2.terminalHeight * 0.6)),
+        scrollY: true,
+        scrollX: false,
+        viewportCulling: true,
+        contentOptions: { flexDirection: "column" }
+      });
+      styleNativeScrollbars(this.document, colors);
+      this.blocks = new NativeBlockList(this.modalContext(), this.document);
+      this.panel.add(this.document);
+    } else {
+      this.progress = new TextRenderable2(renderer2, {
+        id: `modal-progress:${spec.id}`,
+        width: "100%",
+        height: 1,
+        content: "",
+        fg: colors.foreground,
+        bg: colors.background,
+        attributes: 2,
+        wrapMode: "none",
+        selectable: false
+      });
+      this.panel.add(this.progress);
+      const progressBlocks = new BoxRenderable2(renderer2, { id: `modal-progress-blocks:${spec.id}`, flexDirection: "column", width: "100%" });
+      this.panel.add(progressBlocks);
+      this.blocks = new NativeBlockList(this.modalContext(), progressBlocks);
+    }
+    this.error = this.addText(`modal-error:${spec.id}`);
+    this.hints = this.addText(`modal-hints:${spec.id}`);
+    this.actions = new BoxRenderable2(renderer2, { id: `modal-actions:${spec.id}`, flexDirection: "row", gap: 1, width: "100%", marginTop: 0 });
+    this.panel.add(this.actions);
+    this.update(spec);
+  }
+  context;
+  close;
+  root;
+  panel;
+  frame;
+  spec;
+  heading;
+  description;
+  breadcrumb;
+  error;
+  hints;
+  actions;
+  filterInput;
+  editor;
+  secretMask;
+  select;
+  document;
+  blocks;
+  progress;
+  filtered = [];
+  filter = "";
+  changing = false;
+  actionsSignature = "";
+  addText(id) {
+    const text = new TextRenderable2(this.context.renderer, { id, content: "", width: "100%", wrapMode: "word", flexShrink: 0, fg: this.context.colors.foreground, selectable: true });
+    this.panel.add(text);
+    return text;
+  }
+  buildSelect() {
+    const { renderer: renderer2, colors } = this.context;
+    this.filterInput = new InputRenderable(renderer2, {
+      id: `modal-filter:${this.spec.id}`,
+      width: "100%",
+      value: this.spec.filter ?? "",
+      placeholder: "Filter…",
+      placeholderColor: colors.foreground,
+      textColor: colors.foreground,
+      backgroundColor: colors.background,
+      focusedTextColor: colors.foreground,
+      focusedBackgroundColor: colors.background,
+      onContentChange: () => {
+        if (this.changing || !this.filterInput) return;
+        this.filter = this.filterInput.plainText;
+        this.refreshOptions();
+        this.emitAction("filter", this.filter);
+      }
+    });
+    this.filter = this.spec.filter ?? "";
+    this.panel.add(this.filterInput);
+    this.select = new NativeSelectRenderable(renderer2, {
+      id: `modal-select:${this.spec.id}`,
+      width: "100%",
+      height: 5,
+      options: [],
+      showDescription: false,
+      showScrollIndicator: true,
+      showSelectionIndicator: true,
+      wrapSelection: false,
+      backgroundColor: colors.background,
+      focusedBackgroundColor: colors.background,
+      textColor: colors.foreground,
+      focusedTextColor: colors.foreground,
+      selectedBackgroundColor: colors.selection,
+      selectedTextColor: colors.foreground
+    });
+    this.select.onActivate = () => this.confirm();
+    this.select.on("selectionChanged", () => {
+      if (!this.changing) this.emitAction("focus");
+    });
+    this.select.on("itemSelected", () => this.confirm());
+    this.panel.add(this.select);
+  }
+  buildInput() {
+    const { renderer: renderer2, colors } = this.context;
+    const options = {
+      id: `modal-input:${this.spec.id}`,
+      width: "100%",
+      textColor: colors.foreground,
+      backgroundColor: colors.background,
+      focusedTextColor: colors.foreground,
+      focusedBackgroundColor: colors.background,
+      placeholder: this.spec.placeholder ?? "",
+      placeholderColor: colors.foreground,
+      cursorColor: colors.foreground,
+      onContentChange: () => {
+        if (!this.editor || this.changing) return;
+        this.refreshMask();
+        if (!this.spec.secret) this.emitAction("change", this.editor.plainText);
+      },
+      onSubmit: () => this.confirm()
+    };
+    this.editor = this.spec.multiline ? new TextareaRenderable(renderer2, {
+      ...options,
+      initialValue: this.spec.value ?? "",
+      height: Math.max(3, Math.min(10, Math.floor(renderer2.terminalHeight / 3))),
+      wrapMode: "word",
+      keyBindings: [{ name: "return", ctrl: true, action: "submit" }]
+    }) : new InputRenderable(renderer2, { ...options, value: this.spec.value ?? "" });
+    if (this.spec.secret) {
+      this.secretMask = this.addText(`modal-secret:${this.spec.id}`);
+      this.secretMask.selectable = false;
+      this.editor.showCursor = false;
+    } else this.panel.add(this.editor);
+  }
+  refreshMask() {
+    if (this.secretMask && this.editor) this.secretMask.content = "•".repeat(Array.from(this.editor.plainText).length);
+  }
+  update(patch) {
+    const old = this.spec;
+    this.spec = { ...old, ...patch };
+    const spec = this.spec;
+    this.changing = true;
+    try {
+      this.heading.content = plainText(spec.title);
+      this.description.content = styledText(spec.description);
+      this.description.visible = plainText(spec.description).length > 0;
+      this.breadcrumb.content = (spec.breadcrumbs ?? []).join(" › ");
+      this.breadcrumb.visible = (spec.breadcrumbs?.length ?? 0) > 0;
+      this.error.content = spec.validationError ?? "";
+      this.error.visible = Boolean(spec.validationError);
+      this.hints.content = spec.hints ?? `${spec.deferSelection || spec.captureKeys ? "" : "Tab controls · "}${spec.kind === "select" ? "↑ ↓ select · Enter confirm · Esc return" : spec.multiline ? "Ctrl+Enter confirm · Esc return" : "Enter confirm · Esc return"}`;
+      if (this.filterInput && patch.filter !== void 0 && patch.filter !== old.filter) {
+        this.filter = patch.filter;
+        this.filterInput.setText(patch.filter);
+      }
+      if (this.editor && patch.value !== void 0 && patch.value !== old.value) this.editor.setText(patch.value);
+      this.refreshMask();
+      this.refreshOptions(patch.selectedIndex);
+      this.blocks?.replace(spec.blocks ?? []);
+      if (this.progress) this.progress.content = nativeProgressText(spec.progress, true);
+      const actionsSignature = JSON.stringify(spec.actions ?? []);
+      if (actionsSignature !== this.actionsSignature) {
+        this.actionsSignature = actionsSignature;
+        for (const child of [...this.actions.getChildren()]) child.destroy();
+        for (const action of spec.actions ?? []) {
+          const button = new TextRenderable2(this.context.renderer, {
+            id: `modal-action:${spec.id}:${action.id}`,
+            content: plainText(action.label),
+            fg: this.context.colors.foreground,
+            bg: this.context.colors.background,
+            attributes: action.disabled ? 2 : action.active ? 1 : 0,
+            selectable: false,
+            onMouseDown: (event) => {
+              if (event.button !== 0 || action.disabled) return;
+              this.emitAction(action.command ?? action.id, this.editor?.plainText);
+              event.stopPropagation();
+            },
+            onKeyDown: (key) => {
+              if (key.eventType === "release" || key.name !== "return" && key.sequence !== " " || action.disabled) return;
+              this.emitAction(action.command ?? action.id, this.editor?.plainText);
+              key.preventDefault();
+            }
+          });
+          button.focusable = !action.disabled;
+          nativeControlFocus(button, action.disabled ? 2 : action.active ? 1 : 0);
+          this.actions.add(button);
+        }
+        this.actions.visible = (spec.actions?.length ?? 0) > 0;
+      }
+    } finally {
+      this.changing = false;
+    }
+    this.applyTheme();
+  }
+  refreshOptions(selectedIndex) {
+    if (!this.select) return;
+    const query = this.filter.trim().toLocaleLowerCase();
+    const previousKey = this.current()?.item.key;
+    this.filtered = (this.spec.items ?? []).map((item, index) => ({ item, index })).filter(({ item }) => !query || `${plainText(item.label)} ${plainText(item.description)}`.toLocaleLowerCase().includes(query));
+    this.select.options = this.filtered.map(({ item, index }) => ({
+      name: `${item.heading ? "── " : ""}${plainText(item.label)}`,
+      description: plainText(item.description),
+      value: { key: item.key, index, disabled: item.disabled || item.heading }
+    }));
+    this.select.showDescription = this.filtered.some(({ item }) => Boolean(plainText(item.description)));
+    const rowCount = this.select.showDescription ? 2 : 1;
+    this.select.height = Math.max(1, Math.min(Math.max(3, Math.floor(this.context.renderer.terminalHeight * 0.55)), this.filtered.length * rowCount));
+    const preferred = selectedIndex !== void 0 ? this.filtered.findIndex((entry) => entry.index === selectedIndex) : this.filtered.findIndex((entry) => entry.item.key === previousKey);
+    const firstEnabled = this.filtered.findIndex((entry) => !entry.item.disabled && !entry.item.heading);
+    this.select.setSelectedIndex(preferred >= 0 && !this.filtered[preferred].item.disabled && !this.filtered[preferred].item.heading ? preferred : Math.max(0, firstEnabled));
+  }
+  current() {
+    return this.filtered[this.select?.getSelectedIndex() ?? -1];
+  }
+  modalContext() {
+    const scoped = Object.create(this.context);
+    scoped.emit = (event) => {
+      if (event.type === "action") this.emitAction(event.action, event.id);
+      else this.context.emit(event);
+    };
+    return scoped;
+  }
+  emitAction(action, value) {
+    const current = this.current();
+    this.context.emit({ type: "modal-action", id: this.spec.id, action, key: current?.item.key, index: current?.index, value });
+  }
+  confirm() {
+    if (this.spec.kind === "progress") {
+      this.emitAction("enter");
+      return;
+    }
+    const current = this.current();
+    if (this.spec.kind === "select" && (!current || current.item.disabled || current.item.heading)) return;
+    const value = this.editor?.plainText;
+    if (this.spec.deferSelection) {
+      this.emitAction("enter", value);
+      return;
+    }
+    this.close(this.spec.id, { confirmed: true, key: current?.item.key ?? null, index: current?.index ?? -1, ...value === void 0 ? {} : { value } });
+  }
+  cancel(action = "cancel") {
+    if (this.spec.deferSelection) {
+      this.emitAction(action);
+      return;
+    }
+    this.close(this.spec.id, { confirmed: false, key: this.spec.breadcrumbs?.length ? "__back__" : null, index: this.current()?.index ?? -1 });
+  }
+  focus() {
+    if (this.filterInput) this.filterInput.focus();
+    else if (this.editor && !this.spec.secret) this.editor.focus();
+    else if (this.document) this.document.focus();
+    else this.panel.focus();
+  }
+  nextControl(direction) {
+    const controls = [];
+    const visit = (node) => {
+      if (!node.visible || node.isDestroyed) return;
+      if (node !== this.panel && node.focusable) controls.push(node);
+      for (const child of node.getChildren()) visit(child);
+    };
+    visit(this.panel);
+    if (!controls.length) {
+      this.panel.focus();
+      return;
+    }
+    const focused = this.context.renderer.currentFocusedRenderable;
+    const current = focused ? controls.indexOf(focused) : -1;
+    const next = controls[current < 0 ? direction > 0 ? 0 : controls.length - 1 : (current + direction + controls.length) % controls.length];
+    next.focus();
+    this.document?.scrollChildIntoView(next.id);
+  }
+  handleKey(key) {
+    const consume = () => {
+      key.preventDefault();
+      key.stopPropagation();
+      return true;
+    };
+    if (key.eventType === "release") return false;
+    if (key.name === "escape" || key.ctrl && key.name === "c") {
+      this.cancel();
+      return consume();
+    }
+    if (key.name === "tab") {
+      if (this.spec.deferSelection || this.spec.captureKeys) this.emitAction(key.shift ? "shift-tab" : "tab");
+      else this.nextControl(key.shift ? -1 : 1);
+      return consume();
+    }
+    const focusedId = this.context.renderer.currentFocusedRenderable?.id ?? "";
+    if ((key.name === "return" || key.sequence === " ") && /^(?:block-title:|block-action:|modal-action:)/.test(focusedId)) return false;
+    if (this.spec.kind === "select") {
+      if (key.name === "up" || key.name === "down" || key.name === "pageup" || key.name === "pagedown") {
+        const amount = key.name.startsWith("page") ? Math.max(1, Math.floor((this.select?.height ?? 5) / (this.select?.showDescription ? 2 : 1))) : 1;
+        if (key.name === "up" || key.name === "pageup") this.select?.moveUp(amount);
+        else this.select?.moveDown(amount);
+        return consume();
+      }
+      if (key.name === "return") {
+        this.confirm();
+        return consume();
+      }
+      if (key.name === "left" || key.name === "right" || key.name === "delete" || key.name === "backspace" && !this.filter) {
+        const action = key.name;
+        if (this.spec.deferSelection) this.emitAction(action);
+        else if (action === "backspace") this.cancel("backspace");
+        return consume();
+      }
+      if (key.sequence === " " && !this.filter && this.spec.deferSelection) {
+        this.emitAction("space");
+        return consume();
+      }
+      if (key.name && key.sequence.length === 1 && !key.ctrl && !key.meta && this.spec.deferSelection && this.spec.captureKeys) {
+        this.emitAction("key", key.sequence);
+        return consume();
+      }
+      this.filterInput?.handleKeyPress(key);
+      return consume();
+    }
+    if (this.spec.kind === "input") {
+      if (key.name === "return" && (!this.spec.multiline || key.ctrl)) {
+        this.confirm();
+        return consume();
+      }
+      if (!key.ctrl && !key.meta && key.sequence && !key.sequence.startsWith("\x1B") && key.sequence.charCodeAt(0) >= 32 && this.overBudget(key.sequence, this.editor?.plainText ?? "")) return consume();
+      if (this.spec.secret) {
+        this.editor?.handleKeyPress(key);
+        this.refreshMask();
+        return consume();
+      }
+      return false;
+    }
+    if (key.name === "return") {
+      this.confirm();
+      return consume();
+    }
+    if (this.document && (key.name === "pageup" || key.name === "pagedown" || key.name === "up" || key.name === "down")) {
+      this.document.scrollBy(key.name === "up" ? -1 : key.name === "down" ? 1 : key.name === "pageup" ? -1 : 1, key.name.startsWith("page") ? "viewport" : "absolute");
+      return consume();
+    }
+    if (key.sequence.length === 1 && !key.ctrl && !key.meta) {
+      this.emitAction("key", key.sequence);
+      return consume();
+    }
+    return false;
+  }
+  handlePaste(event) {
+    const text = new TextDecoder().decode(event.bytes);
+    if (this.overBudget(text, this.filterInput?.plainText ?? this.editor?.plainText ?? "")) {
+      event.preventDefault();
+      event.stopPropagation();
+      return true;
+    }
+    if (this.filterInput) this.filterInput.handlePaste(event);
+    else if (this.spec.secret) {
+      this.editor?.handlePaste(event);
+      this.refreshMask();
+    } else return false;
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
+  }
+  overBudget(text, current) {
+    const budget = this.spec.maxBytes ?? 1024 * 1024;
+    if (Buffer.byteLength(text, "utf8") + Buffer.byteLength(current, "utf8") <= budget) return false;
+    this.error.content = `Input exceeds the ${budget.toLocaleString()} byte limit.`;
+    this.error.visible = true;
+    return true;
+  }
+  applyTheme() {
+    const colors = this.context.colors;
+    this.panel.backgroundColor = colors.background;
+    this.panel.borderColor = colors.border;
+    this.frame.setColors(colors);
+    this.heading.fg = colors.foreground;
+    this.heading.attributes = 1;
+    this.description.fg = colors.foreground;
+    this.breadcrumb.fg = colors.dim;
+    this.breadcrumb.attributes = 2;
+    this.error.fg = colors.foreground;
+    this.error.attributes = 1;
+    this.hints.fg = colors.dim;
+    this.hints.attributes = 2;
+    if (this.progress) {
+      this.progress.fg = colors.foreground;
+      this.progress.bg = colors.background;
+    }
+    if (this.document) styleNativeScrollbars(this.document, colors);
+    if (this.select) {
+      this.select.backgroundColor = this.select.focusedBackgroundColor = colors.background;
+      this.select.textColor = this.select.focusedTextColor = colors.foreground;
+      this.select.selectedBackgroundColor = colors.selection;
+      this.select.selectedTextColor = colors.foreground;
+      this.select.descriptionColor = colors.dim;
+      this.select.selectedDescriptionColor = colors.foreground;
+    }
+    for (const editor of [this.editor, this.filterInput]) if (editor) {
+      editor.backgroundColor = editor.focusedBackgroundColor = colors.background;
+      editor.textColor = editor.focusedTextColor = colors.foreground;
+      editor.selectionBg = void 0;
+      editor.selectionFg = void 0;
+      editor.cursorColor = colors.foreground;
+      editor.placeholderColor = colors.foreground;
+    }
+    if (this.secretMask) this.secretMask.fg = colors.foreground;
+    for (const action of this.actions.getChildren()) if (action instanceof TextRenderable2) {
+      action.fg = colors.foreground;
+      action.bg = colors.background;
+    }
+    this.blocks?.applyTheme();
+  }
+  destroy() {
+    this.frame.destroy();
+    this.blocks?.destroy();
+    if (this.spec.secret) this.editor?.destroy();
+    this.root.destroyRecursively();
+  }
+};
+var NativeModalStack = class {
+  constructor(context, restoreFocus) {
+    this.context = context;
+    this.restoreFocus = restoreFocus;
+    context.renderer.addPostProcessFn(this.dimUnderlay);
+  }
+  context;
+  restoreFocus;
+  views = [];
+  byId = /* @__PURE__ */ new Map();
+  dimUnderlay = (buffer) => {
+    const panel = this.active?.panel;
+    if (!panel || panel.isDestroyed || !panel.visible) return;
+    const { x, y, width, height } = panel;
+    buffer.withBuffers((cells) => {
+      for (let row = 0; row < cells.height; row++) for (let column = 0; column < cells.width; column++) {
+        if (column < x || column >= x + width || row < y || row >= y + height)
+          cells.attributes[row * cells.width + column] |= TextAttributes4.DIM;
+      }
+    });
+  };
+  get active() {
+    return this.views.at(-1);
+  }
+  open(spec) {
+    const existing = this.byId.get(spec.id);
+    if (existing) {
+      existing.update(spec);
+      existing.focus();
+      return;
+    }
+    if (this.active) this.active.root.visible = false;
+    const view = new NativeModalView(this.context, spec, (id, result) => this.close(id, result, true));
+    this.views.push(view);
+    this.byId.set(spec.id, view);
+    this.context.renderer.root.add(view.root);
+    view.focus();
+  }
+  update(id, patch) {
+    this.byId.get(id)?.update(patch);
+  }
+  close(id, result, notify = false) {
+    const view = this.byId.get(id);
+    if (!view) return;
+    const wasActive = view === this.active;
+    view.destroy();
+    this.byId.delete(id);
+    this.views = this.views.filter((candidate) => candidate !== view);
+    if (wasActive) {
+      if (this.active) {
+        this.active.root.visible = true;
+        this.active.focus();
+      } else this.restoreFocus();
+    }
+    if (notify) this.context.emit({ type: "modal-result", id, result });
+  }
+  applyTheme() {
+    for (const view of this.views) view.applyTheme();
+  }
+  destroy() {
+    this.context.renderer.removePostProcessFn(this.dimUnderlay);
+    for (const view of this.views) view.destroy();
+    this.views = [];
+    this.byId.clear();
+  }
+};
+
+// packages/cli/src/tui/native/components/instruments.ts
+import {
+  BoxRenderable as BoxRenderable3,
+  RGBA as RGBA2,
+  RenderableEvents as RenderableEvents3,
+  ScrollBoxRenderable as ScrollBoxRenderable3,
+  TextAttributes as TextAttributes5,
+  TextRenderable as TextRenderable3
+} from "@opentui/core";
+
+// packages/cli/src/tui/terminal-cells.ts
+var graphemes = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+var extendedPictographic = /\p{Extended_Pictographic}/u;
+var emojiPresentation = /\p{Emoji_Presentation}/u;
+var zeroWidthGrapheme = /^[\p{Mark}\p{Cf}\u200c\u200d\ufe0e\ufe0f]+$/u;
+function escapeEnd(value, start) {
+  if (value[start] !== "\x1B") return start + 1;
+  const kind = value[start + 1];
+  if (kind === "[") {
+    for (let i = start + 2; i < value.length; i++) {
+      const code = value.charCodeAt(i);
+      if (code >= 64 && code <= 126) return i + 1;
+    }
+    return value.length;
+  }
+  if (kind === "]") {
+    for (let i = start + 2; i < value.length; i++) {
+      if (value[i] === "\x07") return i + 1;
+      if (value[i] === "\x1B" && value[i + 1] === "\\") return i + 2;
+    }
+    return value.length;
+  }
+  if (kind === "P" || kind === "X" || kind === "^" || kind === "_") {
+    for (let i = start + 2; i < value.length; i++) {
+      if (value[i] === "\x1B" && value[i + 1] === "\\") return i + 2;
+    }
+    return value.length;
+  }
+  return Math.min(value.length, start + 2);
+}
+function stripTerminalSequences(value) {
+  let out = "";
+  for (let i = 0; i < value.length; ) {
+    if (value[i] === "\x1B") {
+      i = escapeEnd(value, i);
+      continue;
+    }
+    const code = value.charCodeAt(i);
+    if (code >= 0 && code < 32 || code === 127) {
+      i++;
+      continue;
+    }
+    const cp = value.codePointAt(i);
+    out += String.fromCodePoint(cp);
+    i += cp > 65535 ? 2 : 1;
+  }
+  return out;
+}
+function normalizeTerminalLine(value) {
+  return value.replace(/\r\n|\r|\n/g, " ").replace(/\t/g, "    ");
+}
+function isWideCodePoint(cp) {
+  return cp >= 4352 && cp <= 4447 || cp === 9001 || cp === 9002 || cp >= 11904 && cp <= 12350 || cp >= 12352 && cp <= 42191 || cp >= 44032 && cp <= 55203 || cp >= 63744 && cp <= 64255 || cp >= 65040 && cp <= 65049 || cp >= 65072 && cp <= 65135 || cp >= 65280 && cp <= 65376 || cp >= 65504 && cp <= 65510 || cp >= 110592 && cp <= 111359 || cp >= 131072 && cp <= 262141;
+}
+function graphemeCellWidth(value) {
+  if (!value || zeroWidthGrapheme.test(value)) return 0;
+  const cp = value.codePointAt(0);
+  if (cp < 32 || cp >= 127 && cp < 160) return 0;
+  if (emojiPresentation.test(value) || value.includes("️") || value.includes("‍") && extendedPictographic.test(value) || cp >= 127462 && cp <= 127487) {
+    return 2;
+  }
+  return isWideCodePoint(cp) ? 2 : 1;
+}
+function plainGraphemes(value) {
+  return Array.from(
+    graphemes.segment(stripTerminalSequences(value)),
+    (part) => part.segment
+  );
+}
+function terminalCellWidth(value) {
+  let width = 0;
+  for (const grapheme of plainGraphemes(normalizeTerminalLine(value))) {
+    width += graphemeCellWidth(grapheme);
+  }
+  return width;
+}
+
+// packages/cli/src/tui/native/components/instrument-format.ts
+var graphemes2 = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+function fitInstrumentText(value, cells, marker = "~") {
+  const text = stripTerminalSequences(normalizeTerminalLine(value));
+  const width = Math.max(0, Math.floor(cells));
+  if (terminalCellWidth(text) <= width) return text;
+  const suffix = width > 0 ? marker : "";
+  const budget = Math.max(0, width - terminalCellWidth(suffix));
+  let used = 0, result = "";
+  for (const { segment } of graphemes2.segment(text)) {
+    const size = graphemeCellWidth(segment);
+    if (used + size > budget) break;
+    used += size;
+    result += segment;
+  }
+  return result + suffix;
+}
+function formatTelemetryRow(label, value, width, reserved = 12) {
+  const cells = Math.max(0, Math.floor(width));
+  if (!cells) return "";
+  const reading = stripTerminalSequences(normalizeTerminalLine(value));
+  const readingCells = terminalCellWidth(reading);
+  if (readingCells >= cells) return fitInstrumentText(reading, cells);
+  const field = Math.min(cells, Math.max(readingCells, Math.floor(reserved)));
+  const labelCells = Math.max(0, cells - field - 1);
+  const left = fitInstrumentText(label.toUpperCase(), labelCells);
+  const dots = ".".repeat(Math.max(0, cells - field - terminalCellWidth(left)));
+  return left + dots + " ".repeat(Math.max(0, field - readingCells)) + reading;
+}
+function instrumentNumber(value, precision = 0, unit = "") {
+  return value === void 0 || !Number.isFinite(value) || value < 0 ? "--" : `${value.toFixed(Math.max(0, Math.min(6, precision)))}${unit}`;
+}
+function formatSignalMeter(value, maximum, width = 8) {
+  const cells = Math.max(1, Math.floor(width));
+  if (value === void 0 || maximum === void 0 || !Number.isFinite(value) || !Number.isFinite(maximum) || value < 0 || maximum <= 0)
+    return `[${".".repeat(cells)}] --`;
+  const ratio = Math.max(0, Math.min(1, value / maximum));
+  const filled = Math.round(ratio * cells);
+  return `[${"●".repeat(filled)}${"○".repeat(cells - filled)}] ${Math.round(ratio * 100)}%`;
+}
+function formatSectionBanner(title, width, expanded = true) {
+  const cells = Math.max(0, Math.floor(width));
+  const label = fitInstrumentText(
+    `${expanded ? "-" : "+"} ${title.toUpperCase()} `,
+    cells
+  );
+  return label + "─".repeat(Math.max(0, cells - terminalCellWidth(label)));
+}
+function instrumentStatus(value) {
+  const status = (value || "unknown").toLowerCase();
+  if (status === "running") return "ACTIVE";
+  if (status === "completed" || status === "succeeded") return "DONE";
+  if (status === "failed" || status === "error") return "ERR";
+  if (status === "waiting") return "STDBY";
+  if (status === "paused") return "PAUSED";
+  if (status === "stopped") return "STOPPED";
+  return status.toUpperCase();
+}
+
+// packages/cli/src/tui/native/components/instruments.ts
+var foreground = RGBA2.defaultForeground();
+var background = RGBA2.defaultBackground();
+var SectionBanner = class extends TextRenderable3 {
+  constructor(renderer2, title, id, activate) {
+    super(renderer2, {
+      id,
+      content: `- ${title.toUpperCase()}`,
+      width: "100%",
       height: 1,
+      flexShrink: 0,
+      fg: foreground,
+      bg: background,
+      attributes: TextAttributes5.BOLD,
+      selectable: false,
       wrapMode: "none",
       truncate: true,
+      onMouseDown: (event) => {
+        if (event.button === 0) {
+          this.focus();
+          this.activate();
+          event.stopPropagation();
+        }
+      },
+      onKeyDown: (key) => {
+        if (key.eventType !== "release" && (key.name === "return" || key.sequence === " ")) {
+          this.activate();
+          key.preventDefault();
+        }
+      }
+    });
+    this.activate = activate;
+    this.heading = title;
+    this.focusable = true;
+    this.on(RenderableEvents3.FOCUSED, () => {
+      this.attributes = TextAttributes5.BOLD | TextAttributes5.INVERSE;
+    });
+    this.on(RenderableEvents3.BLURRED, () => {
+      this.attributes = TextAttributes5.BOLD;
+    });
+  }
+  activate;
+  expanded = true;
+  heading;
+  onResize(width, height) {
+    super.onResize(width, height);
+    this.refresh();
+  }
+  update(title, expanded = this.expanded) {
+    this.heading = title;
+    this.expanded = expanded;
+    this.refresh();
+  }
+  refresh() {
+    const next = formatSectionBanner(this.heading, this.width, this.expanded);
+    if (this.plainText !== next) this.content = next;
+  }
+};
+var TelemetryRow = class extends TextRenderable3 {
+  constructor(renderer2, label, id, reserved = 12) {
+    super(renderer2, {
+      id,
+      content: "",
+      width: "100%",
+      height: 1,
+      flexShrink: 0,
+      fg: foreground,
+      bg: background,
+      wrapMode: "none",
+      truncate: true
+    });
+    this.reserved = reserved;
+    this.label = label;
+  }
+  reserved;
+  label;
+  value = "--";
+  onResize(width, height) {
+    super.onResize(width, height);
+    this.refresh();
+  }
+  update(value, label = this.label) {
+    this.label = label;
+    this.value = value;
+    this.refresh();
+  }
+  refresh() {
+    const next = formatTelemetryRow(
+      this.label,
+      this.value,
+      this.width,
+      this.reserved
+    );
+    if (this.plainText !== next) this.content = next;
+  }
+};
+var SignalMeter = class extends TelemetryRow {
+  constructor(renderer2, label, id) {
+    super(renderer2, label, id, 18);
+  }
+  updateReading(value, maximum) {
+    this.update(formatSignalMeter(value, maximum));
+  }
+};
+var ChannelMap = class extends BoxRenderable3 {
+  constructor(renderer2, id, inspect, reveal) {
+    super(renderer2, {
+      id,
+      width: "100%",
+      flexDirection: "column",
+      flexShrink: 0
+    });
+    this.inspect = inspect;
+    this.reveal = reveal;
+  }
+  inspect;
+  reveal;
+  rows = /* @__PURE__ */ new Map();
+  channels = /* @__PURE__ */ new Map();
+  agents = [];
+  onResize(width, height) {
+    super.onResize(width, height);
+    this.refresh();
+  }
+  update(agents) {
+    this.agents = agents;
+    const keep = new Set(agents.map((agent) => agent.id));
+    for (const [id, row] of this.rows)
+      if (!keep.has(id)) {
+        row.destroyRecursively();
+        this.rows.delete(id);
+      }
+    for (const agent of agents) {
+      if (!this.channels.has(agent.id))
+        this.channels.set(agent.id, this.channels.size + 1);
+      if (!this.rows.has(agent.id)) {
+        const row = new TextRenderable3(this._ctx, {
+          id: `${this.id}:channel:${agent.id}`,
+          content: "",
+          width: "100%",
+          height: 1,
+          flexShrink: 0,
+          fg: foreground,
+          bg: background,
+          wrapMode: "none",
+          truncate: true,
+          selectable: false,
+          onMouseDown: (event) => {
+            if (event.button === 0) {
+              row.focus();
+              this.inspect?.(agent.id);
+              event.stopPropagation();
+            }
+          },
+          onKeyDown: (key) => {
+            if (key.eventType === "release") return;
+            if (key.name === "return" || key.sequence === " ") {
+              this.inspect?.(agent.id);
+              key.preventDefault();
+            } else if (key.name === "down" || key.name === "up") {
+              const targets = this.focusTargets();
+              const index = targets.indexOf(row), delta = key.name === "down" ? 1 : -1;
+              targets[(index + delta + targets.length) % targets.length]?.focus();
+              key.preventDefault();
+            }
+          }
+        });
+        row.focusable = !!this.inspect;
+        row.on(RenderableEvents3.FOCUSED, () => {
+          row.attributes = TextAttributes5.INVERSE;
+          this.reveal?.(row);
+        });
+        row.on(RenderableEvents3.BLURRED, () => {
+          row.attributes = 0;
+        });
+        this.rows.set(agent.id, row);
+        this.add(row);
+      }
+    }
+    this.refresh();
+  }
+  focusTargets() {
+    return this.agents.flatMap((agent) => {
+      const row = this.rows.get(agent.id);
+      return row?.focusable ? [row] : [];
+    });
+  }
+  refresh() {
+    for (const agent of this.agents) {
+      const row = this.rows.get(agent.id);
+      if (!row) continue;
+      const channel = String(this.channels.get(agent.id)).padStart(2, "0");
+      const next = formatTelemetryRow(
+        `${agent.selected ? ">" : " "}${channel} ${agent.label}`,
+        instrumentStatus(agent.status),
+        this.width,
+        7
+      );
+      if (row.plainText !== next) row.content = next;
+    }
+  }
+};
+var InstrumentRail = class extends BoxRenderable3 {
+  scroll;
+  inferenceHeader;
+  sessionHeader;
+  channels;
+  inference;
+  session;
+  model;
+  rows = /* @__PURE__ */ new Map();
+  contextMeter;
+  constructor(renderer2, options = {}) {
+    const id = options.id ?? "omnius-instruments";
+    super(renderer2, {
+      id,
+      width: "100%",
+      height: "100%",
+      minWidth: 0,
+      minHeight: 1,
+      flexDirection: "column",
+      flexGrow: 1,
+      flexShrink: 1
+    });
+    this.scroll = new ScrollBoxRenderable3(renderer2, {
+      id: `${id}:scroll`,
+      width: "100%",
+      flexGrow: 1,
+      minHeight: 1,
+      minWidth: 0,
+      scrollY: true,
+      scrollX: false,
+      viewportCulling: true,
+      verticalScrollbarOptions: { showArrows: false },
+      horizontalScrollbarOptions: { visible: false },
+      contentOptions: { flexDirection: "column", paddingRight: 1 }
+    });
+    this.add(this.scroll);
+    this.inferenceHeader = new SectionBanner(
+      renderer2,
+      "INFERENCE",
+      `${id}:inference`,
+      () => this.toggleSection("inference")
+    );
+    this.inferenceHeader.on(
+      RenderableEvents3.FOCUSED,
+      () => this.reveal(this.inferenceHeader)
+    );
+    this.scroll.add(this.inferenceHeader);
+    this.inference = new BoxRenderable3(renderer2, {
+      id: `${id}:inference-body`,
+      width: "100%",
+      flexDirection: "column",
+      flexShrink: 0
+    });
+    this.scroll.add(this.inference);
+    const addRow = (parent, key, label, reserved = 12) => {
+      const row = new TelemetryRow(renderer2, label, `${id}:${key}`, reserved);
+      this.rows.set(key, row);
+      parent.add(row);
+      return row;
+    };
+    addRow(this.inference, "route", "ROUTE");
+    addRow(this.inference, "backend", "BACKEND");
+    this.model = new TextRenderable3(renderer2, {
+      id: `${id}:model`,
+      content: "MODEL --",
+      width: "100%",
+      height: 1,
+      fg: foreground,
+      bg: background,
+      wrapMode: "none",
+      truncate: true,
+      flexShrink: 0
+    });
+    this.inference.add(this.model);
+    addRow(this.inference, "input", "IN TOK");
+    addRow(this.inference, "output", "OUT TOK");
+    addRow(this.inference, "speed", "RATE");
+    addRow(this.inference, "context", "CTX TOK", 20);
+    this.contextMeter = new SignalMeter(
+      renderer2,
+      "CTX LOAD",
+      `${id}:context-load`
+    );
+    this.inference.add(this.contextMeter);
+    addRow(this.inference, "state", "STATE");
+    this.sessionHeader = new SectionBanner(
+      renderer2,
+      "SESSION / AGENTS",
+      `${id}:session`,
+      () => this.toggleSection("session")
+    );
+    this.sessionHeader.on(
+      RenderableEvents3.FOCUSED,
+      () => this.reveal(this.sessionHeader)
+    );
+    this.scroll.add(this.sessionHeader);
+    this.session = new BoxRenderable3(renderer2, {
+      id: `${id}:session-body`,
+      width: "100%",
+      flexDirection: "column",
+      flexShrink: 0
+    });
+    this.scroll.add(this.session);
+    addRow(this.session, "selected", "VIEW");
+    addRow(this.session, "elapsed", "ELAPSED");
+    addRow(this.session, "turns", "TURNS");
+    addRow(this.session, "tools", "TOOLS");
+    addRow(this.session, "toolResults", "TOOL OK/ERR");
+    addRow(this.session, "queued", "QUEUED");
+    this.channels = new ChannelMap(
+      renderer2,
+      `${id}:channels`,
+      options.onInspectAgent,
+      (row) => this.reveal(row)
+    );
+    this.session.add(this.channels);
+    this.session.visible = false;
+    this.sessionHeader.update("SESSION / AGENTS", false);
+    if (options.colors) this.applyTheme(options.colors);
+  }
+  update(state) {
+    const data = state.instruments;
+    const inference = data?.inference;
+    const session = data?.session;
+    const set = (id, value) => this.rows.get(id).update(value);
+    set("route", (inference?.route || "UNKNOWN").toUpperCase());
+    set("backend", (inference?.backend || "--").toUpperCase());
+    const model = `MODEL ${inference?.model || "--"}`;
+    if (this.model.plainText !== model) this.model.content = model;
+    set("input", instrumentNumber(inference?.inputTokens));
+    set(
+      "output",
+      `${inference?.outputEstimated ? "~" : ""}${instrumentNumber(inference?.outputTokens)}`
+    );
+    set("speed", instrumentNumber(inference?.tokensPerSecond, 1, " TOK/S"));
+    const used = instrumentNumber(inference?.contextUsedTokens), limit = instrumentNumber(inference?.contextLimitTokens);
+    set("context", `${inference?.contextEstimated ? "~" : ""}${used}/${limit}`);
+    this.contextMeter.updateReading(
+      inference?.contextUsedTokens,
+      inference?.contextLimitTokens
+    );
+    set(
+      "state",
+      inference?.streaming ? "STREAMING" : instrumentStatus(session?.status)
+    );
+    set(
+      "selected",
+      session?.selectedLabel || state.tabs.find((tab) => tab.id === state.activeViewId)?.label || state.activeViewId
+    );
+    set("elapsed", session?.elapsed ?? "--");
+    set("turns", instrumentNumber(session?.turns));
+    set("tools", instrumentNumber(session?.tools));
+    set(
+      "toolResults",
+      `${instrumentNumber(session?.successfulTools)}/${instrumentNumber(session?.failedTools)}`
+    );
+    set("queued", instrumentNumber(session?.queued ?? state.queued.length));
+    this.channels.update(
+      session?.agents ?? state.tabs.map((tab) => ({
+        id: tab.id,
+        label: tab.label,
+        status: "unknown",
+        selected: tab.id === state.activeViewId
+      }))
+    );
+  }
+  applyTheme(colors) {
+    this.backgroundColor = colors.background;
+    const visit = (node) => {
+      if (node instanceof TextRenderable3) {
+        node.fg = colors.foreground;
+        node.bg = colors.background;
+      }
+      for (const child of node.getChildren()) visit(child);
+    };
+    visit(this);
+    styleNativeScrollbars(this.scroll, colors);
+  }
+  toggleSection(id) {
+    const header = id === "inference" ? this.inferenceHeader : this.sessionHeader;
+    const body = id === "inference" ? this.inference : this.session;
+    body.visible = !body.visible;
+    header.update(
+      id === "inference" ? "INFERENCE" : "SESSION / AGENTS",
+      body.visible
+    );
+  }
+  focusTargets() {
+    if (!this.visible) return [];
+    return [
+      this.inferenceHeader,
+      this.sessionHeader,
+      ...this.session.visible ? this.channels.focusTargets() : []
+    ];
+  }
+  focusSection(index = 0) {
+    const target = [this.inferenceHeader, this.sessionHeader][index];
+    if (!target || !this.visible) return false;
+    target.focus();
+    return true;
+  }
+  reveal(target) {
+    const viewport = this.scroll.viewport;
+    if (target.y < viewport.y) this.scroll.scrollBy(target.y - viewport.y);
+    else if (target.y + target.height > viewport.y + viewport.height)
+      this.scroll.scrollBy(
+        target.y + target.height - viewport.y - viewport.height
+      );
+  }
+};
+
+// packages/cli/src/tui/native/components/frontend.ts
+var initialTheme = { mode: "system", bg: -1, accent: -1, textPrimary: -1, textDim: -1, boxColor: -1 };
+var NativeFrontend = class {
+  constructor(renderer2, emit) {
+    this.renderer = renderer2;
+    this.emit = emit;
+    const colors = palette(initialTheme);
+    this.context = { renderer: renderer2, colors, syntax: SyntaxStyle2.fromStyles({}, renderer2.nativeScene), emit, terminals: /* @__PURE__ */ new Map() };
+    this.disposeSelectionContrast = installDefaultSelectionContrast(renderer2);
+    this.clipboard = createClipboard({ host: createHostClipboard({ timeoutMs: 1500 }), terminal: createRendererClipboardAdapter(renderer2) });
+    this.root = new BoxRenderable4(renderer2, {
+      id: "omnius-native",
+      width: "100%",
+      height: "100%",
+      flexDirection: "column",
+      backgroundColor: colors.background
+    });
+    renderer2.root.add(this.root);
+    this.header = new BoxRenderable4(renderer2, {
+      id: "omnius-header",
+      width: "100%",
+      minWidth: 0,
+      flexDirection: "column",
+      flexShrink: 0,
+      border: ["bottom"],
+      borderStyle: "single",
+      borderColor: colors.border
+    });
+    this.root.add(this.header);
+    const headerRow = new BoxRenderable4(renderer2, { id: "omnius-header-row", width: "100%", minWidth: 0, minHeight: 1, flexDirection: "row", gap: 1 });
+    this.header.add(headerRow);
+    this.identity = new TextRenderable4(renderer2, {
+      id: "omnius-identity",
+      content: "Omnius",
+      fg: colors.foreground,
+      flexShrink: 0,
+      flexGrow: 0,
+      wrapMode: "none",
+      truncate: true,
+      minWidth: 18,
       selectable: false,
-      fg: RGBA.defaultForeground(),
-      bg: RGBA.defaultBackground()
-    });
-    rows.push(text);
-    ui.root.add(text);
-  }
-  for (const text of rows) text.width = frame.columns;
-  for (const line of frame.lines) {
-    const text = rows[line.row];
-    if (!text) continue;
-    text.content = new StyledText(line.spans.map((span) => ({
-      __isChunk: true,
-      text: span.text,
-      fg: color(span.fg, false),
-      bg: color(span.bg, true),
-      attributes: span.attributes
-    })));
-  }
-  lastCursor = frame.cursor;
-  ui.setCursorPosition(lastCursor.col + 1, lastCursor.row + 1, lastCursor.visible);
-  for (const effect of frame.effects) {
-    if (!session.write(Buffer.from(effect)))
-      throw new Error("Native terminal control queue is full");
-  }
-}
-async function present() {
-  const ui = renderer;
-  ui.requestRender();
-  await ui.idle();
+      attributes: TextAttributes6.BOLD,
+      onMouseDown: (event) => {
+        if (event.button === 0) {
+          this.toggleHeaderPanel();
+          event.stopPropagation();
+        }
+      },
+      onKeyDown: (key) => {
+        if (key.eventType !== "release" && (key.name === "return" || key.sequence === " ")) {
+          this.toggleHeaderPanel();
+          key.preventDefault();
+        }
+      }
+    });
+    headerRow.add(this.identity);
+    this.headerActions = new ScrollBoxRenderable4(renderer2, {
+      id: "omnius-header-actions",
+      flexGrow: 0,
+      flexShrink: 1,
+      minWidth: 0,
+      minHeight: 1,
+      scrollX: true,
+      scrollY: false,
+      viewportOptions: { height: 1, minHeight: 1, maxHeight: 1, flexGrow: 0, flexShrink: 0 },
+      contentOptions: { flexDirection: "row", gap: 1, justifyContent: "flex-end" },
+      verticalScrollbarOptions: { visible: false }
+    });
+    headerRow.add(this.headerActions);
+    this.headerPanel = new TextRenderable4(renderer2, { id: "omnius-header-panel", content: "", width: "100%", wrapMode: "word", visible: false });
+    this.header.add(this.headerPanel);
+    this.detailButton = new TextRenderable4(renderer2, {
+      id: "omnius-details-toggle",
+      content: "+ DETAILS",
+      height: 1,
+      width: 9,
+      flexShrink: 0,
+      fg: colors.foreground,
+      attributes: TextAttributes6.DIM,
+      selectable: false,
+      onMouseDown: (event) => {
+        if (event.button === 0) {
+          this.toggleDetails();
+          event.stopPropagation();
+        }
+      },
+      onKeyDown: (key) => {
+        if (key.eventType !== "release" && (key.name === "return" || key.sequence === " ")) {
+          this.toggleDetails();
+          key.preventDefault();
+        }
+      }
+    });
+    this.detailButton.focusable = true;
+    headerRow.add(this.detailButton, 1);
+    for (const control of [this.identity, this.detailButton]) {
+      const attributes = control.attributes;
+      control.on("focused", () => {
+        control.attributes = attributes | TextAttributes6.INVERSE;
+      });
+      control.on("blurred", () => {
+        control.attributes = attributes;
+      });
+    }
+    this.routeWarning = new TextRenderable4(renderer2, { id: "omnius-route-warning", content: "", width: "100%", wrapMode: "word", fg: colors.warning, attributes: TextAttributes6.BOLD | TextAttributes6.UNDERLINE, visible: false, flexShrink: 0 });
+    this.root.add(this.routeWarning);
+    this.tabs = new TabSelectRenderable(renderer2, {
+      id: "omnius-agent-tabs",
+      width: "100%",
+      height: 2,
+      showDescription: false,
+      showUnderline: true,
+      showScrollArrows: false,
+      tabWidth: 18,
+      wrapSelection: true,
+      visible: false,
+      backgroundColor: colors.background,
+      focusedBackgroundColor: colors.background,
+      textColor: colors.dim,
+      selectedTextColor: colors.foreground,
+      selectedBackgroundColor: colors.selection,
+      onMouseDown: (event) => {
+        if (event.button !== 0) return;
+        const count = Math.max(1, Math.floor(this.tabs.width / this.tabs.getTabWidth()));
+        const start = Math.max(0, Math.min(this.tabs.getSelectedIndex() - Math.floor(count / 2), this.tabs.options.length - count));
+        this.tabs.setSelectedIndex(start + Math.floor((event.x - this.tabs.x) / this.tabs.getTabWidth()));
+        event.stopPropagation();
+      }
+    });
+    this.tabs.on("selectionChanged", () => {
+      if (this.changing) return;
+      const selected = this.tabs.getSelectedOption();
+      if (selected) this.emitAction("view", String(selected.value));
+      this.editor.focus();
+    });
+    this.tabs.renderAfter = (buffer) => {
+      if (this.tabs.height < 2) return;
+      const colors2 = this.context.colors;
+      const tabWidth = Math.min(this.tabs.getTabWidth(), this.tabs.width);
+      const count = Math.max(1, Math.floor(this.tabs.width / Math.max(1, tabWidth)));
+      const selected = this.tabs.getSelectedIndex();
+      const start = Math.max(0, Math.min(selected - Math.floor(count / 2), this.tabs.options.length - count));
+      buffer.fillRect(0, 1, this.tabs.width, 1, colors2.background);
+      buffer.drawText("─".repeat(Math.max(0, tabWidth)), (selected - start) * tabWidth, 1, colors2.foreground, colors2.background, TextAttributes6.DIM);
+    };
+    this.root.add(this.tabs);
+    this.taskPane = new BoxRenderable4(renderer2, { id: "omnius-tasks", width: "100%", flexDirection: "column", maxHeight: 6, flexShrink: 0, overflow: "hidden", visible: false });
+    this.tasks = new NativeBlockList(this.context, this.taskPane);
+    this.root.add(this.taskPane);
+    this.body = new BoxRenderable4(renderer2, { id: "omnius-body", width: "100%", flexDirection: "row", flexGrow: 1, minHeight: 1 });
+    this.root.add(this.body);
+    this.scroll = new ScrollBoxRenderable4(renderer2, {
+      id: "omnius-conversation",
+      flexGrow: 1,
+      flexShrink: 1,
+      minWidth: 0,
+      minHeight: 1,
+      scrollY: true,
+      scrollX: false,
+      stickyScroll: true,
+      stickyStart: "bottom",
+      viewportCulling: true,
+      verticalScrollbarOptions: { showArrows: false, trackOptions: { foregroundColor: colors.dim, backgroundColor: colors.background } },
+      contentOptions: { flexDirection: "column", onMouseDown: (event) => {
+        if (!this.selectionArmed || event.button !== 0 || !event.target) return;
+        this.selectionArmed = false;
+        let block = event.target;
+        while (block && !block.id.startsWith("block:")) block = block.parent;
+        if (!block) return;
+        const selectables = [];
+        const visit = (node) => {
+          if (!node.visible) return;
+          if (node.selectable && node.height > 0 && node.width > 0) selectables.push(node);
+          for (const child of node.getChildren()) visit(child);
+        };
+        visit(block);
+        const first = selectables[0], last = selectables.at(-1);
+        if (first && last) {
+          this.renderer.startSelection(first, first.x, first.y, "line");
+          this.renderer.updateSelection(last, last.x + Math.max(0, last.width - 1), last.y + Math.max(0, last.height - 1), { finishDragging: true });
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      } }
+    });
+    this.body.add(this.scroll);
+    this.content = new NativeBlockList(this.context, this.scroll);
+    this.instruments = new InstrumentRail(renderer2, { colors, onInspectAgent: (id) => this.emitAction("view", id) });
+    this.body.add(this.instruments);
+    this.embeddedPane = new BoxRenderable4(renderer2, {
+      id: "omnius-editor-pane",
+      width: "50%",
+      flexShrink: 0,
+      flexDirection: "column",
+      border: true,
+      borderStyle: "single",
+      borderColor: colors.border,
+      visible: false
+    });
+    this.body.add(this.embeddedPane);
+    this.liveButton = new TextRenderable4(renderer2, {
+      id: "omnius-live-button",
+      content: "↓ Live",
+      width: "100%",
+      height: 1,
+      visible: false,
+      fg: colors.accent,
+      selectable: false,
+      onMouseDown: (event) => {
+        if (event.button === 0) {
+          this.scrollToLive();
+          event.stopPropagation();
+        }
+      },
+      onKeyDown: (key) => {
+        if (key.eventType !== "release" && (key.name === "return" || key.sequence === " ")) {
+          this.scrollToLive();
+          key.preventDefault();
+        }
+      }
+    });
+    this.liveButton.focusable = true;
+    this.root.add(this.liveButton);
+    this.queue = new TextRenderable4(renderer2, { id: "omnius-steering-queue", content: "", width: "100%", height: 1, wrapMode: "none", truncate: true, fg: colors.dim, visible: false, flexShrink: 0 });
+    this.root.add(this.queue);
+    this.suggestions = new NativeSelectRenderable(renderer2, {
+      id: "omnius-suggestions",
+      width: "100%",
+      height: 1,
+      visible: false,
+      showDescription: false,
+      showScrollIndicator: true,
+      showSelectionIndicator: true,
+      backgroundColor: colors.background,
+      focusedBackgroundColor: colors.background,
+      textColor: colors.dim,
+      selectedTextColor: colors.foreground,
+      selectedBackgroundColor: colors.selection
+    });
+    this.suggestions.onActivate = () => this.acceptSuggestion();
+    this.suggestions.on("itemSelected", () => this.acceptSuggestion());
+    this.root.add(this.suggestions);
+    this.status = new BoxRenderable4(renderer2, { id: "omnius-live-status", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 2, visible: false });
+    this.root.add(this.status);
+    this.footer = new BoxRenderable4(renderer2, {
+      id: "omnius-input-box",
+      width: "100%",
+      flexShrink: 0,
+      border: ["top"],
+      borderStyle: "single",
+      borderColor: colors.border,
+      flexDirection: "column"
+    });
+    this.root.add(this.footer);
+    const inputRow = new BoxRenderable4(renderer2, { id: "omnius-input-row", width: "100%", flexDirection: "row", gap: 1 });
+    this.footer.add(inputRow);
+    this.prompt = new TextRenderable4(renderer2, { id: "omnius-prompt", content: "❯", fg: colors.accent, wrapMode: "none", selectable: false, flexShrink: 0 });
+    inputRow.add(this.prompt);
+    this.editor = new TextareaRenderable2(renderer2, {
+      id: "omnius-input",
+      flexGrow: 1,
+      minWidth: 0,
+      height: 1,
+      maxHeight: 8,
+      wrapMode: "word",
+      textColor: colors.foreground,
+      backgroundColor: colors.background,
+      focusedTextColor: colors.foreground,
+      focusedBackgroundColor: colors.background,
+      placeholderColor: colors.foreground,
+      cursorStyle: { style: "block", blinking: true },
+      keyBindings: [{ name: "return", action: "submit" }, { name: "return", shift: true, action: "newline" }],
+      onContentChange: () => this.editorChanged(),
+      onCursorChange: () => this.editorChanged(),
+      onSubmit: () => this.submit()
+    });
+    inputRow.add(this.editor);
+    this.enhance = new BoxRenderable4(renderer2, { id: "omnius-enhance", flexDirection: "row", gap: 1, flexShrink: 0, visible: false });
+    inputRow.add(this.enhance);
+    this.activity = new TextRenderable4(renderer2, { id: "omnius-activity", content: "", flexGrow: 1, minWidth: 0, height: 1, wrapMode: "none", truncate: true, visible: false, fg: colors.accent });
+    this.status.add(this.activity);
+    this.media = new BoxRenderable4(renderer2, { id: "omnius-media", height: 1, minWidth: 0, flexShrink: 1, flexDirection: "row", gap: 1, visible: false });
+    this.mediaText = new TextRenderable4(renderer2, { id: "omnius-media-text", content: "", flexGrow: 1, minWidth: 0, wrapMode: "none", truncate: true, fg: colors.accent });
+    this.media.add(this.mediaText);
+    this.micTrack = new TextRenderable4(renderer2, { id: "omnius-mic-meter", width: 12, height: 1, flexShrink: 0, fg: colors.foreground, visible: false });
+    this.media.add(this.micTrack);
+    this.status.add(this.media);
+    this.metricsRow = new BoxRenderable4(renderer2, { id: "omnius-metrics-row", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 1 });
+    this.keyHints = new TextRenderable4(renderer2, { id: "omnius-key-hints", content: "F1 HELP  TAB FOCUS", height: 1, flexShrink: 0, attributes: TextAttributes6.DIM, fg: colors.foreground, selectable: false });
+    this.metricsRow.add(this.keyHints);
+    this.metricsStartActions = new BoxRenderable4(renderer2, { id: "omnius-metrics-start-actions", flexDirection: "row", gap: 1, flexShrink: 0 });
+    this.metricsRow.add(this.metricsStartActions);
+    this.metrics = new TextRenderable4(renderer2, { id: "omnius-metrics", content: "", height: 1, wrapMode: "none", truncate: true, fg: colors.dim, flexShrink: 1, flexGrow: 1, minWidth: 0 });
+    this.metricsRow.add(this.metrics);
+    this.metricsEndActions = new BoxRenderable4(renderer2, { id: "omnius-metrics-end-actions", flexDirection: "row", gap: 1, flexShrink: 0 });
+    this.metricsRow.add(this.metricsEndActions);
+    this.root.add(this.metricsRow);
+    this.modals = new NativeModalStack(this.context, () => this.restoreFocus());
+    renderer2.keyInput.on("keypress", this.onKey);
+    renderer2.keyInput.on("paste", this.onPaste);
+    renderer2.on(CliRenderEvents2.FRAME, this.onFrame);
+    renderer2.on(CliRenderEvents2.RESIZE, this.onResize);
+    this.applyTheme(initialTheme);
+    this.editor.focus();
+  }
+  renderer;
+  emit;
+  root;
+  scroll;
+  editor;
+  content;
+  modals;
+  context;
+  header;
+  identity;
+  headerActions;
+  headerPanel;
+  routeWarning;
+  tabs;
+  taskPane;
+  tasks;
+  body;
+  instruments;
+  detailButton;
+  embeddedPane;
+  liveButton;
+  queue;
+  suggestions;
+  footer;
+  prompt;
+  enhance;
+  metrics;
+  keyHints;
+  metricsRow;
+  metricsStartActions;
+  metricsEndActions;
+  activity;
+  status;
+  media;
+  mediaText;
+  micTrack;
+  clipboard;
+  state;
+  themeSignature = "";
+  headerSignature = "";
+  tabsSignature = "";
+  suggestionSignature = "";
+  metricsActionsSignature = "";
+  changing = false;
+  paused = false;
+  editorInitialized = false;
+  lastInput = "";
+  lastCursor = -1;
+  history = [];
+  historyIndex = -1;
+  savedInput = "";
+  disposeSelectionContrast;
+  actionSignatures = /* @__PURE__ */ new WeakMap();
+  detailsOpen;
+  headerPanelCollapsed = false;
+  inputEventPending = false;
+  viewportSignature = "";
+  newEntries = 0;
+  destroyed = false;
+  pendingScrollRestore;
+  viewScroll = /* @__PURE__ */ new Map();
+  embeddedId;
+  selectionArmed = false;
+  update(state, patch) {
+    const inputWasEnabled = this.state?.input.enabled;
+    const previousView = this.state ? `${this.state.activeViewId}:${this.state.presentation ?? "stack"}` : void 0;
+    const currentView = `${state.activeViewId}:${state.presentation ?? "stack"}`;
+    const viewChanged = previousView !== void 0 && previousView !== currentView;
+    if (viewChanged) {
+      this.viewScroll.set(previousView, { top: this.scroll.scrollTop, live: this.offset === 0 });
+      this.pendingScrollRestore = this.viewScroll.get(currentView) ?? { top: 0, live: true };
+      this.newEntries = 0;
+    }
+    this.state = state;
+    this.changing = true;
+    try {
+      this.applyTheme(state.theme);
+      const headerSignature = JSON.stringify(state.header);
+      if (headerSignature !== this.headerSignature) {
+        this.headerSignature = headerSignature;
+        this.identity.content = styledText([
+          { text: `${plainText(state.header.panel) ? this.headerPanelCollapsed ? "▸" : "▾" : "·"} ${state.header.title}` },
+          ...state.header.detail ? [{ text: "  " }, ...textSpans(state.header.detail)] : []
+        ]);
+        this.headerPanel.content = styledText(state.header.panel);
+        this.headerPanel.visible = plainText(state.header.panel).length > 0 && !this.headerPanelCollapsed;
+        this.identity.focusable = plainText(state.header.panel).length > 0;
+        this.replaceActions(this.headerActions, state.header.actions, "header");
+        this.headerActions.visible = state.header.actions.length > 0;
+      }
+      this.routeWarning.content = state.routeWarning ? `! ${state.routeWarning}` : "";
+      this.routeWarning.visible = Boolean(state.routeWarning);
+      const tabsSignature = JSON.stringify(state.tabs);
+      if (tabsSignature !== this.tabsSignature) {
+        this.tabsSignature = tabsSignature;
+        this.tabs.setOptions(state.tabs.map((tab) => ({ name: fitInstrumentText(plainText(tab.label), this.tabs.getTabWidth() - 2), description: "", value: tab.id })));
+      }
+      this.tabs.visible = state.tabs.length > 1;
+      const activeTab = state.tabs.findIndex((tab) => tab.id === state.activeViewId);
+      if (activeTab >= 0 && activeTab !== this.tabs.getSelectedIndex()) this.tabs.setSelectedIndex(activeTab);
+      this.tasks.replace(state.tasks);
+      this.taskPane.visible = state.tasks.length > 0;
+      if (patch) {
+        if (this.offset > 0 && !viewChanged && !patch.reset) this.newEntries += patch.upsert.filter((block) => !this.content.views.has(block.id)).length;
+        this.content.patch(patch);
+      }
+      this.queue.content = state.queued.length ? `Queued (${state.queued.length}) · ${state.queued.join("  ·  ")}` : "";
+      this.queue.visible = state.queued.length > 0;
+      const suggestionSignature = JSON.stringify(state.suggestions);
+      if (suggestionSignature !== this.suggestionSignature) {
+        this.suggestionSignature = suggestionSignature;
+        const selected = this.suggestions.getSelectedOption()?.value;
+        this.suggestions.options = state.suggestions.map((item) => ({ name: item.value, description: item.description ?? "", value: item.value }));
+        const index = state.suggestions.findIndex((item) => item.value === selected);
+        if (index >= 0) this.suggestions.setSelectedIndex(index);
+      }
+      this.suggestions.visible = state.suggestions.length > 0;
+      this.suggestions.height = Math.min(4, state.suggestions.length || 1);
+      this.prompt.content = styledText(state.prompt.trimEnd() || "❯");
+      if (!this.editorInitialized) {
+        this.editor.setText(state.input.text);
+        this.editor.cursorOffset = Math.max(0, Math.min(state.input.text.length, state.input.cursor));
+        this.editorInitialized = true;
+      }
+      this.editor.focusable = state.input.enabled && !this.paused;
+      if (state.input.enabled && !this.paused && !this.modals.active && (inputWasEnabled === false || !this.renderer.currentFocusedRenderable)) this.editor.focus();
+      this.metrics.content = styledText(state.metrics);
+      this.metrics.visible = state.metricsVisible;
+      this.instruments.update(state);
+      this.layoutInstruments();
+      const metricsActions = JSON.stringify(state.metricsActions ?? []);
+      if (metricsActions !== this.metricsActionsSignature) {
+        this.metricsActionsSignature = metricsActions;
+        this.replaceActions(this.metricsStartActions, (state.metricsActions ?? []).filter((action) => action.id === "agents"), "metrics");
+        this.replaceActions(this.metricsEndActions, (state.metricsActions ?? []).filter((action) => action.id !== "agents"), "metrics");
+      }
+      this.renderEnhance();
+      this.renderActivity();
+      this.renderMedia();
+    } finally {
+      this.changing = false;
+    }
+    this.editorChanged();
+    this.renderer.requestRender();
+  }
+  replaceActions(parent, actions, prefix) {
+    const signature = JSON.stringify(actions);
+    if (this.actionSignatures.get(parent) === signature) return;
+    this.actionSignatures.set(parent, signature);
+    for (const child of [...parent.getChildren()]) child.destroy();
+    for (const action of actions) {
+      const colors = this.context.colors;
+      const attributes = action.disabled ? TextAttributes6.DIM : action.active ? TextAttributes6.BOLD | TextAttributes6.UNDERLINE : 0;
+      const button = new TextRenderable4(this.renderer, {
+        id: `${prefix}:${action.id}`,
+        content: styledText(action.label),
+        flexShrink: 0,
+        wrapMode: "none",
+        selectable: false,
+        fg: colors.foreground,
+        bg: colors.background,
+        attributes,
+        onMouseDown: (event) => {
+          if (event.button !== 0 || action.disabled) return;
+          this.emitAction(action.command ?? action.id, action.id);
+          event.stopPropagation();
+        },
+        onKeyDown: (key) => {
+          if (key.eventType === "release" || key.name !== "return" && key.sequence !== " " || action.disabled) return;
+          this.emitAction(action.command ?? action.id, action.id);
+          key.preventDefault();
+        }
+      });
+      button.focusable = !action.disabled;
+      if (!action.disabled) {
+        button.on("focused", () => {
+          button.attributes = attributes | TextAttributes6.INVERSE;
+        });
+        button.on("blurred", () => {
+          button.attributes = attributes;
+        });
+        button.onMouseOver = () => {
+          button.attributes = attributes | TextAttributes6.UNDERLINE | (button.focused ? TextAttributes6.INVERSE : 0);
+        };
+        button.onMouseOut = () => {
+          button.attributes = attributes | (button.focused ? TextAttributes6.INVERSE : 0);
+        };
+      }
+      parent.add(button);
+    }
+  }
+  renderEnhance() {
+    const state = this.state?.enhance;
+    this.enhance.visible = Boolean(state && (state.state !== "idle" || this.editor.plainText.trim()));
+    if (!state) return;
+    const actions = state.state === "confirm" ? [{ id: "enhance-accept", label: "✓" }, { id: "enhance-reject", label: "×" }] : [{ id: "enhance", label: state.state === "busy" ? "WORK · ENHANCE" : state.label ?? "ENHANCE", disabled: state.state === "busy" }];
+    this.replaceActions(this.enhance, actions, "enhance");
+  }
+  renderActivity() {
+    const activity = this.state?.activity;
+    const stage = activity?.stage === "idle" ? void 0 : activity?.stage;
+    this.activity.visible = Boolean(activity?.processing || activity?.label || stage);
+    this.activity.content = `${activity?.processing ? "RUN · " : ""}${activity?.label || stage || ""}`;
+    this.status.visible = this.activity.visible || this.media.visible;
+  }
+  renderMedia() {
+    const media = this.state?.media;
+    this.media.visible = Boolean(media && (media.audio || media.video || media.voiceEnabled || media.recording || media.countdown > 0 || media.label));
+    this.status.visible = this.activity.visible || this.media.visible;
+    if (!media) return;
+    this.mediaText.content = [
+      media.recording ? "● REC" : void 0,
+      media.speech ? "speech" : void 0,
+      media.audio ? "audio" : void 0,
+      media.video ? "video" : void 0,
+      media.voiceEnabled ? "voice" : void 0,
+      media.countdown > 0 ? `${media.countdown}s` : void 0,
+      media.levelDb === void 0 ? void 0 : `${media.levelDb} dB`,
+      media.label
+    ].filter(Boolean).join(" · ");
+    this.mediaText.fg = media.recording ? this.context.colors.warning : this.context.colors.accent;
+    this.micTrack.visible = media.recording && media.levelDb !== void 0;
+    const level = Math.round(Math.max(0, Math.min(1, ((media.levelDb ?? -60) + 60) / 60)) * 8);
+    this.micTrack.content = `[${"●".repeat(level)}${"·".repeat(8 - level)}]`;
+  }
+  applyTheme(theme) {
+    const signature = JSON.stringify(theme);
+    if (signature === this.themeSignature) return;
+    this.themeSignature = signature;
+    this.headerSignature = "";
+    this.metricsActionsSignature = "";
+    const colors = this.context.colors = palette(theme);
+    for (const [name, style] of Object.entries({
+      default: { fg: colors.foreground },
+      conceal: { fg: colors.foreground },
+      "markup.heading": { fg: colors.accent, bold: true },
+      "markup.strong": { fg: colors.foreground, bold: true },
+      "markup.italic": { fg: colors.foreground, italic: true },
+      "markup.link": { fg: colors.accent, underline: true },
+      "markup.link.url": { fg: colors.dim },
+      "markup.raw": { fg: colors.accent },
+      "markup.list": { fg: colors.accent },
+      "markup.quote": { fg: colors.dim },
+      comment: { fg: colors.dim, italic: true },
+      keyword: { fg: colors.accent, bold: true },
+      string: { fg: colors.success },
+      number: { fg: colors.warning },
+      function: { fg: colors.foreground },
+      type: { fg: colors.accent },
+      punctuation: { fg: colors.dim }
+    })) this.context.syntax.registerStyle(name, style);
+    this.root.backgroundColor = colors.background;
+    this.header.backgroundColor = this.footer.backgroundColor = colors.background;
+    this.header.borderColor = this.footer.borderColor = this.embeddedPane.borderColor = colors.border;
+    this.identity.fg = colors.foreground;
+    this.headerPanel.fg = colors.foreground;
+    this.routeWarning.fg = colors.warning;
+    this.prompt.fg = this.activity.fg = this.liveButton.fg = colors.accent;
+    this.micTrack.fg = colors.foreground;
+    this.queue.fg = this.metrics.fg = colors.dim;
+    this.editor.backgroundColor = this.editor.focusedBackgroundColor = colors.background;
+    this.editor.textColor = this.editor.focusedTextColor = colors.foreground;
+    this.editor.editorView.setSelectionColors(void 0, void 0);
+    this.tabs.backgroundColor = this.tabs.focusedBackgroundColor = colors.background;
+    this.tabs.textColor = colors.dim;
+    this.tabs.selectedTextColor = colors.foreground;
+    this.tabs.selectedBackgroundColor = colors.selection;
+    this.suggestions.backgroundColor = this.suggestions.focusedBackgroundColor = colors.background;
+    this.suggestions.textColor = colors.dim;
+    this.suggestions.selectedTextColor = colors.foreground;
+    this.suggestions.selectedBackgroundColor = colors.selection;
+    styleNativeScrollbars(this.headerActions, colors);
+    styleNativeScrollbars(this.scroll, colors);
+    this.instruments.applyTheme(colors);
+    this.content.applyTheme();
+    this.tasks.applyTheme();
+    this.modals?.applyTheme();
+  }
+  toggleHeaderPanel() {
+    if (!this.state || !plainText(this.state.header.panel)) return;
+    this.headerPanelCollapsed = !this.headerPanelCollapsed;
+    this.headerSignature = "";
+    this.update(this.state);
+  }
+  toggleDetails() {
+    this.detailsOpen = !(this.detailsOpen ?? this.renderer.terminalWidth >= 110);
+    this.layoutInstruments();
+    this.renderer.requestRender();
+  }
+  layoutInstruments() {
+    const width = this.renderer.terminalWidth;
+    const wide = width >= 110;
+    const shown = !this.embeddedPane.visible && (this.detailsOpen ?? wide);
+    this.body.flexDirection = wide || this.embeddedPane.visible && width >= 80 ? "row" : "column";
+    this.instruments.visible = shown;
+    const railWidth = Math.floor(width * 0.38);
+    this.instruments.width = wide ? railWidth : "100%";
+    this.scroll.width = shown && wide ? width - railWidth : this.embeddedPane.visible && width >= 80 ? "50%" : "100%";
+    this.instruments.maxHeight = wide ? "100%" : Math.max(4, Math.min(9, Math.floor(this.renderer.terminalHeight / 3)));
+    this.instruments.flexGrow = 0;
+    this.instruments.flexShrink = wide ? 0 : 1;
+    this.instruments.border = wide ? ["left"] : ["top"];
+    this.instruments.borderStyle = "single";
+    this.instruments.borderColor = this.context.colors.border;
+    this.instruments.paddingLeft = wide ? 1 : 0;
+    this.embeddedPane.width = width >= 80 ? "50%" : "100%";
+    this.embeddedPane.maxHeight = width >= 80 ? "100%" : "50%";
+    this.headerActions.visible = width >= 60 && Boolean(this.state?.header.actions.length);
+    const actions = this.state?.header.actions ?? [];
+    const naturalWidth = actions.reduce((size, action) => size + terminalCellWidth(plainText(action.label)), 0) + Math.max(0, actions.length - 1);
+    const detailWidth = width < 40 ? 1 : 9;
+    const gapCount = this.headerActions.visible ? 2 : 1;
+    const controlWidth = Math.min(naturalWidth, Math.max(1, width - 18 - detailWidth - gapCount));
+    this.headerActions.width = controlWidth;
+    this.identity.minWidth = Math.max(0, Math.min(18, width - detailWidth - gapCount));
+    this.identity.width = Math.max(0, width - (this.headerActions.visible ? controlWidth : 0) - detailWidth - gapCount);
+    this.detailButton.width = detailWidth;
+    this.keyHints.content = width < 60 ? "F1 HELP" : "F1 HELP  TAB FOCUS";
+    this.detailButton.content = `${shown ? "-" : "+"}${detailWidth > 1 ? " DETAILS" : ""}`;
+    for (let focused = this.renderer.currentFocusedRenderable; focused; focused = focused.parent) {
+      if (!shown && focused === this.instruments || !this.headerActions.visible && focused === this.headerActions) {
+        this.restoreFocus();
+        break;
+      }
+    }
+  }
+  get offset() {
+    return Math.max(0, this.scroll.scrollHeight - this.scroll.viewport.height - this.scroll.scrollTop);
+  }
+  getRenderable(id) {
+    const visit = (node) => {
+      if (node.id === id) return node;
+      for (const child of node.getChildren()) {
+        const found = visit(child);
+        if (found) return found;
+      }
+      return void 0;
+    };
+    return visit(this.renderer.root);
+  }
+  onFrame = () => {
+    if (this.destroyed) return;
+    if (this.pendingScrollRestore) {
+      const restore = this.pendingScrollRestore;
+      this.pendingScrollRestore = void 0;
+      this.scroll.scrollTo(restore.live ? this.scroll.scrollHeight : restore.top);
+      this.renderer.requestRender();
+    }
+    const height = Math.max(1, Math.min(8, this.editor.editorView.getTotalVirtualLineCount(), this.renderer.terminalHeight - 8));
+    if (height !== this.editor.height) this.editor.height = height;
+    const offset = this.offset;
+    if (offset === 0) this.newEntries = 0;
+    this.liveButton.visible = offset > 0;
+    const liveLabel = offset > 0 ? `↓ Live${this.newEntries ? ` · ${this.newEntries} new` : ""}` : "↓ Live";
+    if (this.liveButton.plainText !== liveLabel) this.liveButton.content = liveLabel;
+    const event = { type: "viewport", offset: this.scroll.scrollTop, height: this.scroll.viewport.height, width: this.scroll.viewport.width, total: this.scroll.scrollHeight };
+    const signature = JSON.stringify(event);
+    if (signature !== this.viewportSignature) {
+      this.viewportSignature = signature;
+      this.emit(event);
+    }
+  };
+  onResize = () => {
+    this.layoutInstruments();
+    this.emit({ type: "resize", columns: this.renderer.terminalWidth, rows: this.renderer.terminalHeight });
+  };
+  editorChanged() {
+    if (!this.editor || this.changing || this.destroyed || this.inputEventPending) return;
+    this.inputEventPending = true;
+    queueMicrotask(() => {
+      this.inputEventPending = false;
+      if (this.destroyed) return;
+      this.flushLatestInput();
+      const height = Math.max(1, Math.min(8, this.editor.editorView.getTotalVirtualLineCount(), this.renderer.terminalHeight - 8));
+      if (height !== this.editor.height) this.editor.height = height;
+    });
+  }
+  flushLatestInput() {
+    const text = this.editor.plainText;
+    const cursor = this.editor.cursorOffset;
+    if (text === this.lastInput && cursor === this.lastCursor) return;
+    this.lastInput = text;
+    this.lastCursor = cursor;
+    this.renderEnhance();
+    this.emit({ type: "input", text, cursor });
+  }
+  submit() {
+    if (this.paused || this.state?.input.enabled === false) return;
+    if (this.suggestions.visible && this.editor.plainText.startsWith("/") && this.acceptSuggestion()) return;
+    const text = this.editor.plainText;
+    if (text.trim() && this.history[0] !== text) {
+      this.history.unshift(text);
+      this.history.length = Math.min(this.history.length, 1e3);
+    }
+    this.historyIndex = -1;
+    this.savedInput = "";
+    this.editor.clear();
+    this.emit({ type: "submit", text });
+    this.editorChanged();
+  }
+  navigateHistory(direction) {
+    if (this.history.length === 0) return;
+    if (direction < 0) {
+      if (this.historyIndex < 0) this.savedInput = this.editor.plainText;
+      this.historyIndex = Math.min(this.history.length - 1, this.historyIndex + 1);
+    } else this.historyIndex = Math.max(-1, this.historyIndex - 1);
+    this.setInput(this.historyIndex < 0 ? this.savedInput : this.history[this.historyIndex]);
+  }
+  acceptSuggestion() {
+    const selected = this.suggestions.getSelectedOption();
+    if (!selected || selected.value === this.editor.plainText.trimEnd()) return false;
+    const text = String(selected.value);
+    this.setInput(text + (text.endsWith(" ") ? "" : " "));
+    this.suggestions.visible = false;
+    this.emitAction("completion", text);
+    return true;
+  }
+  setInput(text, cursor = text.length) {
+    this.editor.replaceText(text);
+    this.editor.cursorOffset = Math.max(0, Math.min(text.length, cursor));
+    this.editorInitialized = true;
+    this.editorChanged();
+  }
+  shortcut(name, key) {
+    this.flushLatestInput();
+    this.emit({ type: "shortcut", name });
+    key.preventDefault();
+    key.stopPropagation();
+  }
+  emitAction(action, id) {
+    this.flushLatestInput();
+    this.emit({ type: "action", action, ...id === void 0 ? {} : { id } });
+  }
+  onKey = (key) => {
+    if (this.modals.active) {
+      this.modals.active.handleKey(key);
+      return;
+    }
+    if (key.eventType === "release") return;
+    if (key.ctrl && key.name.toLowerCase() === "n") {
+      this.shortcut("ctrl-n", key);
+      return;
+    }
+    if (this.renderer.currentFocusedRenderable instanceof EmbeddedTerminalRenderable2) return;
+    if (key.name === "f1") {
+      this.emitAction("/help");
+      key.preventDefault();
+      key.stopPropagation();
+      return;
+    }
+    if (key.ctrl && key.shift && key.name.toLowerCase() === "i") {
+      this.toggleDetails();
+      key.preventDefault();
+      key.stopPropagation();
+      return;
+    }
+    const headerButtons = (this.state?.header.actions ?? []).filter((action) => !action.disabled).map((action) => this.getRenderable(`header:${action.id}`)).filter((button) => Boolean(button));
+    const headerIndex = headerButtons.indexOf(this.renderer.currentFocusedRenderable);
+    if (headerIndex >= 0) {
+      const direction = key.name === "left" ? -1 : key.name === "right" ? 1 : 0;
+      if (direction || key.name === "home" || key.name === "end") {
+        const index = key.name === "home" ? 0 : key.name === "end" ? headerButtons.length - 1 : (headerIndex + direction + headerButtons.length) % headerButtons.length;
+        const button = headerButtons[index];
+        button.focus();
+        this.headerActions.scrollChildIntoView(button.id);
+        key.preventDefault();
+        key.stopPropagation();
+        return;
+      }
+      if (key.name === "escape") {
+        this.restoreFocus();
+        key.preventDefault();
+        key.stopPropagation();
+        return;
+      }
+      if (key.name === "return") return;
+    }
+    if (key.ctrl && key.shift && key.name.toLowerCase() === "c") {
+      void this.copy();
+      key.preventDefault();
+      return;
+    }
+    if (key.ctrl && key.shift && key.name.toLowerCase() === "v") {
+      void this.paste();
+      key.preventDefault();
+      return;
+    }
+    if (key.ctrl && key.shift && key.name.toLowerCase() === "b") {
+      this.selectionArmed = true;
+      this.scroll.focus();
+      this.shortcut("ctrl-shift-b", key);
+      return;
+    }
+    if (key.ctrl && key.name === "c") {
+      this.shortcut("SIGINT", key);
+      return;
+    }
+    if (key.ctrl && key.name === "d" && !this.editor.plainText) {
+      this.shortcut("close", key);
+      return;
+    }
+    const control = { o: "ctrl-o", l: "ctrl-l", v: "ctrl-v", "\\": "ctrl-backslash", i: "ctrl-i" };
+    if (key.ctrl && control[key.name]) {
+      this.shortcut(control[key.name], key);
+      return;
+    }
+    if (key.ctrl && key.name === "u" && !this.editor.plainText) {
+      this.shortcut("ctrl-u", key);
+      return;
+    }
+    if (key.name === "escape") {
+      if (this.renderer.currentFocusedRenderable !== this.editor) {
+        this.restoreFocus();
+        key.preventDefault();
+        key.stopPropagation();
+        return;
+      }
+      if (this.suggestions.visible) this.suggestions.visible = false;
+      this.shortcut("escape", key);
+      return;
+    }
+    if (key.name === "tab") {
+      if (key.ctrl) this.shortcut("ctrl-tab", key);
+      else if (!key.shift && this.renderer.currentFocusedRenderable === this.editor && this.suggestions.visible) {
+        this.acceptSuggestion();
+        key.preventDefault();
+      } else if (!key.shift && this.renderer.currentFocusedRenderable === this.editor && this.editor.plainText) this.shortcut("tab", key);
+      else this.focusNext(key.shift ? -1 : 1);
+      key.preventDefault();
+      key.stopPropagation();
+      return;
+    }
+    if (this.renderer.currentFocusedRenderable !== this.editor && this.renderer.currentFocusedRenderable !== this.scroll && !key.ctrl) return;
+    if (key.ctrl && (key.name === "left" || key.name === "right")) {
+      this.shortcut(`ctrl-${key.name}`, key);
+      return;
+    }
+    if (!this.editor.plainText && (key.name === "left" || key.name === "right")) {
+      this.shortcut(`${key.name}-empty`, key);
+      return;
+    }
+    if (key.name === "pageup" || key.name === "pagedown") {
+      this.scroll.scrollBy(key.name === "pageup" ? -1 : 1, "viewport");
+      key.preventDefault();
+      return;
+    }
+    if ((key.name === "up" || key.name === "down") && key.shift) {
+      this.scroll.scrollBy(key.name === "up" ? -3 : 3, "absolute");
+      key.preventDefault();
+      return;
+    }
+    if (key.name === "end" && !this.editor.plainText) {
+      this.scrollToLive();
+      key.preventDefault();
+      return;
+    }
+    if (key.name === "up" || key.name === "down") {
+      if (this.suggestions.visible) {
+        if (key.name === "up") this.suggestions.moveUp();
+        else this.suggestions.moveDown();
+        key.preventDefault();
+        return;
+      }
+      if (this.renderer.currentFocusedRenderable === this.scroll || this.offset > 0 || this.state?.activity?.processing && !this.editor.plainText) {
+        this.scroll.scrollBy(key.name === "up" ? -1 : 1, "absolute");
+        key.preventDefault();
+        return;
+      }
+      const cursor = this.editor.visualCursor;
+      const absoluteVisualRow = cursor.visualRow + this.editor.scrollY;
+      if (key.name === "up" && absoluteVisualRow === 0 || key.name === "down" && absoluteVisualRow >= this.editor.editorView.getTotalVirtualLineCount() - 1) {
+        this.navigateHistory(key.name === "up" ? -1 : 1);
+        key.preventDefault();
+        return;
+      }
+    }
+    if (this.paused || this.state?.input.enabled === false) {
+      if (this.renderer.currentFocusedRenderable === this.editor) key.preventDefault();
+      return;
+    }
+  };
+  focusNext(direction) {
+    const targets = [];
+    const visit = (node) => {
+      if (!node.visible) return;
+      if (node.focusable && node !== this.scroll && !(node instanceof ScrollBoxRenderable4) && node.height > 0 && node.width > 0) targets.push(node);
+      for (const child of node.getChildren()) visit(child);
+    };
+    visit(this.root);
+    if (this.instruments.visible) {
+      for (const target2 of this.instruments.focusTargets()) if (!targets.includes(target2)) targets.push(target2);
+    }
+    if (!targets.length) return;
+    const current = targets.indexOf(this.renderer.currentFocusedRenderable);
+    const target = targets[(current + direction + targets.length) % targets.length];
+    target.focus();
+    if (target.id.startsWith("header:")) this.headerActions.scrollChildIntoView(target.id);
+    else if (target.id.startsWith("block-title:") || target.id.startsWith("block-action:")) {
+      let block = target;
+      while (block && !block.id.startsWith("block:")) block = block.parent;
+      if (block) this.scroll.scrollChildIntoView(block.id);
+    }
+  }
+  onPaste = (event) => {
+    if (this.modals.active) {
+      this.modals.active.handlePaste(event);
+      return;
+    }
+    if (this.paused || this.state?.input.enabled === false) event.preventDefault();
+  };
+  scrollToLive() {
+    this.scroll.scrollTo(this.scroll.scrollHeight);
+    this.newEntries = 0;
+    this.editor.focus();
+  }
+  restoreFocus() {
+    if (this.modals.active) this.modals.active.focus();
+    else if (!this.paused && this.state?.input.enabled !== false) this.editor.focus();
+  }
+  async copy(text) {
+    const value = text ?? this.renderer.getSelection()?.getSelectedText() ?? this.editor.getSelectedText();
+    if (value) await this.clipboard.writeText(value, { destination: "best-available" });
+  }
+  async paste() {
+    const result = await this.clipboard.read({ preferredTypes: ["text/plain;charset=utf-8", "text/plain"] });
+    if (result.status === "read") this.editor.insertText(new TextDecoder().decode(result.representation.bytes));
+  }
+  command(command2) {
+    switch (command2.type) {
+      case "resize":
+        this.renderer.resize(command2.columns, command2.rows);
+        break;
+      case "scroll":
+        if (command2.position === "bottom") this.scrollToLive();
+        else if (command2.position === "top") this.scroll.scrollTo(0);
+        else this.scroll.scrollBy(command2.delta ?? 0, "absolute");
+        break;
+      case "focus": {
+        const target = command2.target === "input" ? this.editor : command2.target === "content" ? this.scroll : command2.target === "header" ? this.getRenderable(`header:${this.state?.header.actions.find((action) => !action.disabled)?.id}`) : this.context.terminals.get(command2.target) ?? this.getRenderable(command2.target);
+        target?.focus();
+        if (target?.id.startsWith("header:")) this.headerActions.scrollChildIntoView(target.id);
+        break;
+      }
+      case "input":
+        if (command2.expectedText !== void 0 && command2.expectedText !== this.editor.plainText || command2.expectedCursor !== void 0 && command2.expectedCursor !== this.editor.cursorOffset) {
+          this.flushLatestInput();
+        } else this.setInput(command2.text, command2.cursor);
+        break;
+      case "input-action":
+        this.inputAction(command2.action, command2.value);
+        break;
+      case "mouse":
+        this.renderer.useMouse = command2.enabled;
+        break;
+      case "copy":
+        void this.copy(command2.text);
+        break;
+      case "title":
+        this.renderer.setTerminalTitle(command2.text);
+        break;
+      case "modal-open":
+        this.modals.open(command2.modal);
+        break;
+      case "modal-update":
+        this.modals.update(command2.id, command2.patch);
+        break;
+      case "modal-close":
+        this.modals.close(command2.id, command2.result);
+        break;
+      case "embedded-write":
+        this.context.terminals.get(command2.id)?.write(Buffer.from(command2.data, "base64"));
+        break;
+      case "embedded-open":
+        this.openEmbedded(command2.id, command2.title);
+        break;
+      case "embedded-close":
+        this.closeEmbedded(command2.id);
+        break;
+    }
+    this.renderer.requestRender();
+  }
+  inputAction(action, value) {
+    if (action === "pause") {
+      this.paused = true;
+      this.editor.focusable = false;
+    } else if (action === "resume") {
+      this.paused = false;
+      this.editor.focusable = this.state?.input.enabled !== false;
+      this.restoreFocus();
+    } else if (action === "history-up") this.navigateHistory(-1);
+    else if (action === "history-down") this.navigateHistory(1);
+    else if (action === "history-set") {
+      try {
+        const entries = JSON.parse(value ?? "[]");
+        if (Array.isArray(entries)) this.history = entries.filter((entry) => typeof entry === "string").slice(0, 1e3);
+      } catch {
+      }
+    } else if (action === "insert") this.editor.insertText(value ?? "");
+    else if (action === "clear") this.editor.clear();
+    else if (action === "submit") this.submit();
+    else if (action === "complete") this.acceptSuggestion();
+    else if (action === "focus") this.restoreFocus();
+    else if (action === "select-block") {
+      this.selectionArmed = true;
+      this.scroll.focus();
+    } else if (action === "close") this.paused = true;
+  }
+  openEmbedded(id, title) {
+    if (this.embeddedId && this.embeddedId !== id) this.closeEmbedded(this.embeddedId);
+    this.embeddedId = id;
+    this.embeddedPane.title = title;
+    this.embeddedPane.visible = true;
+    let terminal = this.context.terminals.get(id);
+    if (!terminal) {
+      terminal = new EmbeddedTerminalRenderable2(this.renderer, {
+        id: `embedded:${id}`,
+        width: "100%",
+        height: "100%",
+        flexGrow: 1,
+        maxScrollback: 1e4,
+        transparentBackground: true,
+        selectable: true,
+        onData: (data) => this.emit({ type: "embedded-data", id, data: Buffer.from(data).toString("base64") }),
+        onTerminalResize: (columns, rows) => this.emit({ type: "embedded-resize", id, columns, rows })
+      });
+      this.context.terminals.set(id, terminal);
+      this.embeddedPane.add(terminal);
+    }
+    terminal.focus();
+  }
+  closeEmbedded(id) {
+    this.context.terminals.get(id)?.destroy();
+    this.context.terminals.delete(id);
+    if (this.embeddedId === id) {
+      this.embeddedId = void 0;
+      this.embeddedPane.visible = false;
+      this.restoreFocus();
+    }
+  }
+  async dispose() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.disposeSelectionContrast();
+    this.renderer.keyInput.off("keypress", this.onKey);
+    this.renderer.keyInput.off("paste", this.onPaste);
+    this.renderer.off(CliRenderEvents2.FRAME, this.onFrame);
+    this.renderer.off(CliRenderEvents2.RESIZE, this.onResize);
+    this.modals.destroy();
+    this.content.destroy();
+    this.tasks.destroy();
+    this.root.destroyRecursively();
+    this.context.syntax.destroy();
+    await this.clipboard.dispose();
+  }
+};
+
+// packages/cli/src/tui/native/components/cursor.ts
+import { CliRenderEvents as CliRenderEvents3 } from "@opentui/core";
+function installTerminalCursorDefaults(renderer2, session) {
+  const reset = new TextEncoder().encode("\x1B]112\x07");
+  let disposed = false;
+  let requested = 0;
+  let restored = 0;
+  let pending;
+  let observedFrame;
+  const restore = () => {
+    if (disposed || session.disposed) return Promise.resolve();
+    requested++;
+    if (pending) return pending;
+    let resolve;
+    let reject;
+    const completion = new Promise((done, fail2) => {
+      resolve = done;
+      reject = fail2;
+    });
+    pending = completion;
+    void (async () => {
+      try {
+        while (!disposed && !session.disposed && restored < requested) {
+          const generation = requested;
+          while (!session.write(reset)) await session.idle();
+          await session.idle();
+          restored = generation;
+        }
+        pending = void 0;
+        resolve();
+      } catch (error) {
+        pending = void 0;
+        reject(error);
+      }
+    })();
+    return completion;
+  };
+  const afterFrame = () => {
+    const current = restore();
+    if (observedFrame === current) return;
+    observedFrame = current;
+    void current.then(() => {
+      if (observedFrame === current) observedFrame = void 0;
+    }, (error) => {
+      if (observedFrame === current) observedFrame = void 0;
+      if (!disposed && !renderer2.isDestroyed) renderer2.emit("error", error);
+    });
+  };
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    renderer2.off(CliRenderEvents3.FRAME, afterFrame);
+    renderer2.off(CliRenderEvents3.DESTROY, dispose);
+  };
+  renderer2.on(CliRenderEvents3.FRAME, afterFrame);
+  renderer2.once(CliRenderEvents3.DESTROY, dispose);
+  return { restore, dispose };
 }
+
+// packages/cli/src/tui/native/worker.ts
+var replies = createWriteStream("", { fd: 3, autoClose: false });
+var reply = (message) => replies.write(JSON.stringify(message) + "\n");
+var terminalInput = new PassThrough();
+var renderer;
+var frontend;
+var cursorDefaults;
+var stopping = false;
+var failed = false;
 async function close() {
   if (stopping) return;
   stopping = true;
-  if (renderer) {
-    renderer.destroy();
-    await renderer.closed;
+  try {
+    await frontend?.dispose();
+    await cursorDefaults?.restore();
+  } finally {
+    cursorDefaults?.dispose();
+    if (renderer) {
+      renderer.destroy();
+      await renderer.closed;
+    }
   }
 }
+async function fail(error) {
+  if (failed || stopping) return;
+  failed = true;
+  reply({ type: "error", message: error instanceof Error ? error.message : String(error) });
+  await close().catch(() => {
+  });
+  replies.end(() => process.exit(1));
+}
 async function command(message) {
-  if (message.type === "input") {
-    terminalInput.write(Buffer.from(message.data, "base64"));
+  if (message.type === "command") {
+    frontend.command(message.command);
     return;
   }
-  if (message.type === "frame") {
-    if (!suspended) {
-      applyFrame(message.frame);
-      await present();
-    }
+  if (message.type === "state") {
+    frontend.update(message.snapshot, message.content);
+    renderer.requestRender();
+    await renderer.idle();
   } else if (message.type === "suspend") {
+    await cursorDefaults.restore();
     await renderer.suspend();
-    suspended = true;
   } else if (message.type === "resume") {
     await renderer.resume();
-    suspended = false;
-  } else if (message.type === "stop") {
-    await close();
-  }
+    renderer.requestRender();
+    await renderer.idle();
+    await cursorDefaults.restore();
+  } else if (message.type === "stop") await close();
   reply({ type: "ack", id: message.id });
   if (message.type === "stop") replies.end(() => process.exit(0));
 }
-async function fail(error) {
-  reply({ type: "error", message: error instanceof Error ? error.message : String(error) });
-  await close().catch(() => {
-  });
-  replies.end(() => process.exit(1));
-}
 try {
-  session = new NativeSession(process.stdout);
+  const session = new NativeSession(process.stdout);
   renderer = await createCliRenderer({
     nativeSession: session,
     stdin: terminalInput,
     stdout: process.stdout,
     exitOnCtrlC: false,
     exitSignals: [],
-    useMouse: false,
-    enableMouseMovement: false,
-    useKittyKeyboard: null,
+    useMouse: true,
+    enableMouseMovement: true,
+    useKittyKeyboard: { disambiguate: true, alternateKeys: true, events: true },
     screenMode: "alternate-screen",
     consoleMode: "disabled",
     externalOutputMode: "passthrough",
-    backgroundColor: RGBA.defaultBackground(),
+    backgroundColor: RGBA3.defaultBackground(),
     openConsoleOnError: false,
     targetFps: 60,
     maxFps: 60,
     clearOnShutdown: false
   });
-  renderer.setCursorStyle({ style: "block", blinking: true });
+  renderer.on(CliRenderEvents4.RENDER_ERROR, (event) => {
+    void fail(event.error);
+  });
+  renderer.on(CliRenderEvents4.HANDLER_ERROR, (event) => {
+    void fail(event.error);
+  });
   renderer.on("error", (event) => {
-    void fail(event instanceof Error ? event : event.error ?? new Error("OpenTUI render failed"));
+    void fail(event);
   });
-  let pending = Promise.resolve();
+  cursorDefaults = installTerminalCursorDefaults(renderer, session);
+  frontend = new NativeFrontend(renderer, (event) => reply({ type: "event", event }));
   const controls = createInterface({ input: process.stdin, crlfDelay: Infinity });
+  let pending = Promise.resolve();
   controls.on("line", (line) => {
     let message;
     try {
@@ -146,11 +3073,15 @@ try {
       void fail(error);
       return;
     }
-    if (message.type === "input") {
+    if (message.type === "input-bytes") {
       terminalInput.write(Buffer.from(message.data, "base64"));
-      return;
-    }
-    pending = pending.then(() => command(message)).catch(fail);
+    } else if (message.type === "command") {
+      try {
+        frontend.command(message.command);
+      } catch (error) {
+        void fail(error);
+      }
+    } else pending = pending.then(() => command(message)).catch(fail);
   });
   controls.on("close", () => {
     void pending.then(close).finally(() => process.exit(0));
@@ -160,6 +3091,9 @@ try {
   });
   process.on("SIGINT", () => {
   });
+  renderer.requestRender();
+  await renderer.idle();
+  await cursorDefaults.restore();
   reply({ type: "ready" });
 } catch (error) {
   await fail(error);