omnius 1.0.862 → 1.0.863

package/dist/tui/native/worker.js

@@ -2,18 +2,19 @@
 import { createWriteStream } from "node:fs";
 import { createInterface } from "node:readline";
 import { PassThrough } from "node:stream";
-import { CliRenderEvents as CliRenderEvents2, NativeSession, RGBA as RGBA2, createCliRenderer } from "@opentui/core";
+import { CliRenderEvents as CliRenderEvents4, NativeSession, RGBA as RGBA3, createCliRenderer } from "@opentui/core";
 
 // packages/cli/src/tui/native/components/frontend.ts
 import {
-  BoxRenderable as BoxRenderable3,
-  CliRenderEvents,
+  BoxRenderable as BoxRenderable4,
+  CliRenderEvents as CliRenderEvents2,
   EmbeddedTerminalRenderable as EmbeddedTerminalRenderable2,
-  ScrollBoxRenderable as ScrollBoxRenderable3,
+  ScrollBoxRenderable as ScrollBoxRenderable4,
   SyntaxStyle as SyntaxStyle2,
   TabSelectRenderable,
   TextareaRenderable as TextareaRenderable2,
-  TextRenderable as TextRenderable3,
+  TextRenderable as TextRenderable4,
+  TextAttributes as TextAttributes6,
   createClipboard,
   createHostClipboard,
   createRendererClipboardAdapter
@@ -26,22 +27,23 @@ import {
   EmbeddedTerminalRenderable,
   ImageRenderable,
   MarkdownRenderable,
+  RenderableEvents,
   ScrollBoxRenderable,
   TextRenderable
 } from "@opentui/core";
 
 // packages/cli/src/tui/native/components/text.ts
-import { RGBA, StyledText } from "@opentui/core";
+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, "");
+  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 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;
@@ -60,7 +62,7 @@ function nativeTextFromAnsi(value) {
       else delete style.link;
       continue;
     }
-    if (!/^\x1b\[[\d;:]*m$/.test(seq)) 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];
@@ -89,7 +91,10 @@ function nativeTextFromAnsi(value) {
       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) {
-        style[code === 38 ? "fg" : "bg"] = `index:${Math.max(0, Math.min(255, codes[i + 2] ?? 0))}`;
+        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(
@@ -106,20 +111,6 @@ function nativeTextFromAnsi(value) {
 }
 
 // packages/cli/src/tui/native/components/text.ts
-var colorCache = /* @__PURE__ */ new Map();
-function nativeColor(value, background = false) {
-  if (value === void 0 || value === -1 || value === "default")
-    return background ? RGBA.defaultBackground() : RGBA.defaultForeground();
-  const key = String(value);
-  if (key === "index:-1") return background ? RGBA.defaultBackground() : RGBA.defaultForeground();
-  let color = colorCache.get(key);
-  if (!color) {
-    color = typeof value === "number" || /^\d+$/.test(key) ? RGBA.fromIndex(Number(value)) : key.startsWith("index:") ? RGBA.fromIndex(Number(key.slice(6))) : RGBA.fromHex(key);
-    if (colorCache.size >= 1024) colorCache.delete(colorCache.keys().next().value);
-    colorCache.set(key, color);
-  }
-  return color;
-}
 function plainText(value) {
   return typeof value === "string" ? stripTextControls(value) : (value ?? []).map((span) => stripTextControls(span.text)).join("");
 }
@@ -130,27 +121,71 @@ function styledText(value) {
   return new StyledText(textSpans(value).map((span) => ({
     __isChunk: true,
     text: span.text,
-    ...span.fg === void 0 ? {} : { fg: nativeColor(span.fg) },
-    ...span.bg === void 0 ? {} : { bg: nativeColor(span.bg, true) },
     ...span.attributes === void 0 ? {} : { attributes: span.attributes },
     ...span.link ? { link: { url: span.link } } : {}
   })));
 }
-function palette(theme) {
+function palette(_theme) {
+  const background2 = RGBA.defaultBackground();
+  const foreground2 = RGBA.defaultForeground();
   return {
-    background: nativeColor(theme.bg, true),
-    foreground: nativeColor(theme.textPrimary),
-    accent: nativeColor(theme.accent),
-    dim: nativeColor(theme.textDim),
-    border: nativeColor(theme.boxColor),
-    warning: nativeColor(theme.mode === "branding" ? 180 : 214),
-    error: nativeColor(theme.mode === "branding" ? 173 : 198),
-    success: nativeColor(theme.mode === "branding" ? 114 : 78),
-    selection: nativeColor(theme.mode === "branding" ? 65 : theme.accent < 0 ? 240 : theme.accent)
+    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;
@@ -178,13 +213,13 @@ var NativeBlockView = class {
   body;
   children;
   actions;
-  progressBar;
-  progressValue;
+  progress;
   image;
   terminal;
   collapsed = false;
   previousModelCollapsed;
   signature = "";
+  actionsSignature = "";
   pixel;
   get block() {
     return this.spec;
@@ -192,16 +227,18 @@ var NativeBlockView = class {
   build() {
     const { renderer: renderer2, colors, syntax } = this.context;
     const spec = this.spec;
-    if (spec.kind === "card") this.root.borderStyle = "rounded";
-    this.root.border = spec.kind === "card";
-    this.root.paddingX = spec.kind === "card" ? 1 : 0;
-    this.root.marginBottom = spec.kind === "card" ? 1 : 0;
+    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.accent,
+        fg: colors.foreground,
+        attributes: 1,
         flexShrink: 0,
         width: "100%",
         wrapMode: "word",
@@ -210,8 +247,15 @@ var NativeBlockView = class {
           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, {
@@ -303,26 +347,24 @@ var NativeBlockView = class {
       this.body.add(this.text);
     }
     if (spec.kind === "progress") {
-      this.progressBar = new BoxRenderable(renderer2, {
+      this.progress = new TextRenderable(renderer2, {
         id: `progress-track:${spec.id}`,
         width: "100%",
         height: 1,
-        backgroundColor: colors.dim
-      });
-      this.progressValue = new BoxRenderable(renderer2, {
-        id: `progress-value:${spec.id}`,
-        height: 1,
-        width: "0%",
-        backgroundColor: colors.accent
+        content: "",
+        fg: colors.foreground,
+        bg: colors.background,
+        attributes: 2,
+        wrapMode: "none",
+        selectable: false
       });
-      this.progressBar.add(this.progressValue);
-      this.body.add(this.progressBar);
+      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: 2,
+      gap: 1,
       flexShrink: 0
     });
     this.root.add(this.actions);
@@ -331,8 +373,9 @@ var NativeBlockView = class {
     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.progressBar = this.progressValue = this.image = this.terminal = void 0;
+    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) {
@@ -346,7 +389,10 @@ var NativeBlockView = class {
       this.collapsed = spec.collapsed ?? false;
       this.previousModelCollapsed = spec.collapsed;
     }
-    if (this.title) this.title.content = styledText(`${spec.collapsible ? this.collapsed ? "▸ " : "▾ " : ""}${spec.title ?? ""}`);
+    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) {
@@ -357,16 +403,19 @@ var NativeBlockView = class {
     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.progressValue) this.progressValue.width = `${Math.round(Math.min(1, Math.max(0, spec.progress ?? 0)) * 100)}%`;
+    if (this.progress) this.progress.content = nativeProgressText(spec.progress, spec.streaming);
     this.children?.replace(spec.children ?? []);
-    if (this.actions) {
+    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: styledText(action.label),
-          fg: action.disabled ? this.context.colors.dim : spec.color ? nativeColor(spec.color) : this.context.colors.accent,
-          attributes: action.active ? 33 : 0,
+          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) => {
@@ -375,12 +424,13 @@ var NativeBlockView = class {
             event.stopPropagation();
           },
           onKeyDown: (key) => {
-            if (key.name !== "return" || action.disabled) return;
+            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 });
@@ -394,25 +444,31 @@ var NativeBlockView = class {
   toggle() {
     this.collapsed = !this.collapsed;
     if (this.body) this.body.visible = !this.collapsed;
-    if (this.title) this.title.content = styledText(`${this.collapsed ? "▸ " : "▾ "}${this.spec.title ?? ""}`);
+    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 = this.spec.color ? nativeColor(this.spec.color) : colors.border;
+    if (this.spec.kind === "card") this.root.borderColor = colors.border;
     else this.root.border = false;
     if (this.title) {
-      this.title.fg = this.spec.color ? nativeColor(this.spec.color) : colors.accent;
+      this.title.fg = colors.foreground;
       this.title.bg = colors.background;
     }
     if (this.body) this.body.backgroundColor = colors.background;
     if (this.text) {
-      this.text.fg = this.spec.color ? nativeColor(this.spec.color) : colors.foreground;
+      this.text.fg = colors.foreground;
       this.text.bg = colors.background;
     }
-    if (this.progressBar) this.progressBar.backgroundColor = colors.dim;
-    if (this.progressValue) this.progressValue.backgroundColor = colors.accent;
+    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() {
@@ -480,15 +536,100 @@ import {
   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];
@@ -517,6 +658,11 @@ var NativeSelectRenderable = class extends SelectRenderable {
     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);
@@ -524,6 +670,11 @@ var NativeSelectRenderable = class extends SelectRenderable {
       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));
@@ -536,6 +687,89 @@ var NativeSelectRenderable = class extends SelectRenderable {
   }
 };
 
+// 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) {
@@ -554,7 +788,8 @@ var NativeModalView = class {
       justifyContent: "center",
       alignItems: "center",
       zIndex: 100,
-      backgroundColor: colors.background
+      backgroundColor: "transparent",
+      shouldFill: false
     });
     this.panel = new BoxRenderable2(renderer2, {
       id: `modal-panel:${spec.id}`,
@@ -562,13 +797,15 @@ var NativeModalView = class {
       width: "94%",
       maxHeight: "94%",
       border: true,
-      borderStyle: "rounded",
+      borderStyle: "single",
       borderColor: colors.border,
       backgroundColor: colors.background,
       paddingX: 1,
-      paddingY: 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}`);
@@ -585,20 +822,29 @@ var NativeModalView = class {
         viewportCulling: true,
         contentOptions: { flexDirection: "column" }
       });
+      styleNativeScrollbars(this.document, colors);
       this.blocks = new NativeBlockList(this.modalContext(), this.document);
       this.panel.add(this.document);
     } else {
-      this.progressTrack = new BoxRenderable2(renderer2, { id: `modal-progress:${spec.id}`, width: "100%", height: 1, backgroundColor: colors.dim });
-      this.progressValue = new BoxRenderable2(renderer2, { id: `modal-progress-value:${spec.id}`, width: "0%", height: 1, backgroundColor: colors.accent });
-      this.progressTrack.add(this.progressValue);
-      this.panel.add(this.progressTrack);
+      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: 2, width: "100%", marginTop: 1 });
+    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);
   }
@@ -606,6 +852,7 @@ var NativeModalView = class {
   close;
   root;
   panel;
+  frame;
   spec;
   heading;
   description;
@@ -619,11 +866,11 @@ var NativeModalView = class {
   select;
   document;
   blocks;
-  progressTrack;
-  progressValue;
+  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);
@@ -636,6 +883,7 @@ var NativeModalView = class {
       width: "100%",
       value: this.spec.filter ?? "",
       placeholder: "Filter…",
+      placeholderColor: colors.foreground,
       textColor: colors.foreground,
       backgroundColor: colors.background,
       focusedTextColor: colors.foreground,
@@ -682,8 +930,8 @@ var NativeModalView = class {
       focusedTextColor: colors.foreground,
       focusedBackgroundColor: colors.background,
       placeholder: this.spec.placeholder ?? "",
-      selectionBg: colors.selection,
-      cursorColor: colors.accent,
+      placeholderColor: colors.foreground,
+      cursorColor: colors.foreground,
       onContentChange: () => {
         if (!this.editor || this.changing) return;
         this.refreshMask();
@@ -713,14 +961,14 @@ var NativeModalView = class {
     const spec = this.spec;
     this.changing = true;
     try {
-      this.heading.content = styledText(spec.title);
+      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.kind === "select" ? "↑ ↓ select · Enter confirm · Esc return" : spec.multiline ? "Ctrl+Enter confirm · Esc return" : "Enter confirm · Esc return");
+      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);
@@ -729,29 +977,36 @@ var NativeModalView = class {
       this.refreshMask();
       this.refreshOptions(patch.selectedIndex);
       this.blocks?.replace(spec.blocks ?? []);
-      if (this.progressValue) this.progressValue.width = `${Math.round(Math.max(0, Math.min(1, spec.progress ?? 0)) * 100)}%`;
-      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: styledText(action.label),
-          fg: action.disabled ? this.context.colors.dim : this.context.colors.accent,
-          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.name !== "return" || action.disabled) return;
-            this.emitAction(action.command ?? action.id, this.editor?.plainText);
-            key.preventDefault();
-          }
-        });
-        button.focusable = !action.disabled;
-        this.actions.add(button);
+      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;
       }
-      this.actions.visible = (spec.actions?.length ?? 0) > 0;
     } finally {
       this.changing = false;
     }
@@ -816,20 +1071,42 @@ var NativeModalView = class {
     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") {
-      this.emitAction(key.shift ? "shift-tab" : "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;
@@ -910,14 +1187,23 @@ var NativeModalView = class {
   }
   applyTheme() {
     const colors = this.context.colors;
-    this.root.backgroundColor = colors.background;
     this.panel.backgroundColor = colors.background;
     this.panel.borderColor = colors.border;
-    this.heading.fg = colors.accent;
+    this.frame.setColors(colors);
+    this.heading.fg = colors.foreground;
+    this.heading.attributes = 1;
     this.description.fg = colors.foreground;
     this.breadcrumb.fg = colors.dim;
-    this.error.fg = colors.error;
+    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;
@@ -929,13 +1215,20 @@ var NativeModalView = class {
     for (const editor of [this.editor, this.filterInput]) if (editor) {
       editor.backgroundColor = editor.focusedBackgroundColor = colors.background;
       editor.textColor = editor.focusedTextColor = colors.foreground;
-      editor.selectionBg = colors.selection;
-      editor.cursorColor = colors.accent;
+      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();
@@ -945,11 +1238,23 @@ 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);
   }
@@ -989,23 +1294,583 @@ var NativeModalStack = class {
     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: "branding", bg: -1, accent: 108, textPrimary: 254, textDim: 145, boxColor: 108 };
-var spinner = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+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 BoxRenderable3(renderer2, {
+    this.root = new BoxRenderable4(renderer2, {
       id: "omnius-native",
       width: "100%",
       height: "100%",
@@ -1013,56 +1878,101 @@ var NativeFrontend = class {
       backgroundColor: colors.background
     });
     renderer2.root.add(this.root);
-    this.header = new BoxRenderable3(renderer2, {
+    this.header = new BoxRenderable4(renderer2, {
       id: "omnius-header",
       width: "100%",
+      minWidth: 0,
       flexDirection: "column",
       flexShrink: 0,
-      border: true,
-      borderStyle: "rounded",
-      borderColor: colors.border,
-      paddingX: 1
+      border: ["bottom"],
+      borderStyle: "single",
+      borderColor: colors.border
     });
     this.root.add(this.header);
-    const headerRow = new BoxRenderable3(renderer2, { id: "omnius-header-row", width: "100%", height: 1, flexDirection: "row", gap: 2 });
+    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 TextRenderable3(renderer2, {
+    this.identity = new TextRenderable4(renderer2, {
       id: "omnius-identity",
       content: "Omnius",
       fg: colors.foreground,
-      flexShrink: 1,
-      flexGrow: 1,
+      flexShrink: 0,
+      flexGrow: 0,
       wrapMode: "none",
       truncate: true,
-      minWidth: 8,
-      selectable: false
+      minWidth: 18,
+      selectable: false,
+      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 ScrollBoxRenderable3(renderer2, {
+    this.headerActions = new ScrollBoxRenderable4(renderer2, {
       id: "omnius-header-actions",
-      width: "50%",
       flexGrow: 0,
-      flexShrink: 0,
+      flexShrink: 1,
       minWidth: 0,
-      height: 1,
+      minHeight: 1,
       scrollX: true,
       scrollY: false,
-      contentOptions: { flexDirection: "row", gap: 2 },
-      verticalScrollbarOptions: { visible: false },
-      horizontalScrollbarOptions: { visible: 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 TextRenderable3(renderer2, { id: "omnius-header-panel", content: "", width: "100%", wrapMode: "word", visible: false });
+    this.headerPanel = new TextRenderable4(renderer2, { id: "omnius-header-panel", content: "", width: "100%", wrapMode: "word", visible: false });
     this.header.add(this.headerPanel);
-    this.routeWarning = new TextRenderable3(renderer2, { id: "omnius-route-warning", content: "", width: "100%", wrapMode: "word", fg: colors.warning, visible: false, flexShrink: 0 });
+    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: 1,
+      height: 2,
       showDescription: false,
-      showUnderline: false,
-      showScrollArrows: true,
+      showUnderline: true,
+      showScrollArrows: false,
       tabWidth: 18,
       wrapSelection: true,
       visible: false,
@@ -1082,16 +1992,26 @@ var NativeFrontend = class {
     this.tabs.on("selectionChanged", () => {
       if (this.changing) return;
       const selected = this.tabs.getSelectedOption();
-      if (selected) this.emit({ type: "action", action: "view", id: String(selected.value) });
+      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 BoxRenderable3(renderer2, { id: "omnius-tasks", width: "100%", flexDirection: "column", maxHeight: 6, flexShrink: 0, overflow: "hidden", visible: false });
+    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 BoxRenderable3(renderer2, { id: "omnius-body", width: "100%", flexDirection: "row", flexGrow: 1, minHeight: 1 });
+    this.body = new BoxRenderable4(renderer2, { id: "omnius-body", width: "100%", flexDirection: "row", flexGrow: 1, minHeight: 1 });
     this.root.add(this.body);
-    this.scroll = new ScrollBoxRenderable3(renderer2, {
+    this.scroll = new ScrollBoxRenderable4(renderer2, {
       id: "omnius-conversation",
       flexGrow: 1,
       flexShrink: 1,
@@ -1127,18 +2047,20 @@ var NativeFrontend = class {
     });
     this.body.add(this.scroll);
     this.content = new NativeBlockList(this.context, this.scroll);
-    this.embeddedPane = new BoxRenderable3(renderer2, {
+    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: "rounded",
+      borderStyle: "single",
       borderColor: colors.border,
       visible: false
     });
     this.body.add(this.embeddedPane);
-    this.liveButton = new TextRenderable3(renderer2, {
+    this.liveButton = new TextRenderable4(renderer2, {
       id: "omnius-live-button",
       content: "↓ Live",
       width: "100%",
@@ -1153,7 +2075,7 @@ var NativeFrontend = class {
         }
       },
       onKeyDown: (key) => {
-        if (key.name === "return") {
+        if (key.eventType !== "release" && (key.name === "return" || key.sequence === " ")) {
           this.scrollToLive();
           key.preventDefault();
         }
@@ -1161,7 +2083,7 @@ var NativeFrontend = class {
     });
     this.liveButton.focusable = true;
     this.root.add(this.liveButton);
-    this.queue = new TextRenderable3(renderer2, { id: "omnius-steering-queue", content: "", width: "100%", height: 1, wrapMode: "none", truncate: true, fg: colors.dim, visible: false, flexShrink: 0 });
+    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",
@@ -1180,20 +2102,21 @@ var NativeFrontend = class {
     this.suggestions.onActivate = () => this.acceptSuggestion();
     this.suggestions.on("itemSelected", () => this.acceptSuggestion());
     this.root.add(this.suggestions);
-    this.footer = new BoxRenderable3(renderer2, {
+    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: true,
-      borderStyle: "rounded",
+      border: ["top"],
+      borderStyle: "single",
       borderColor: colors.border,
-      flexDirection: "column",
-      paddingX: 1
+      flexDirection: "column"
     });
     this.root.add(this.footer);
-    const inputRow = new BoxRenderable3(renderer2, { id: "omnius-input-row", width: "100%", flexDirection: "row", gap: 1 });
+    const inputRow = new BoxRenderable4(renderer2, { id: "omnius-input-row", width: "100%", flexDirection: "row", gap: 1 });
     this.footer.add(inputRow);
-    this.prompt = new TextRenderable3(renderer2, { id: "omnius-prompt", content: "❯", fg: colors.accent, wrapMode: "none", selectable: false, flexShrink: 0 });
+    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",
@@ -1206,8 +2129,7 @@ var NativeFrontend = class {
       backgroundColor: colors.background,
       focusedTextColor: colors.foreground,
       focusedBackgroundColor: colors.background,
-      selectionBg: colors.selection,
-      cursorColor: colors.accent,
+      placeholderColor: colors.foreground,
       cursorStyle: { style: "block", blinking: true },
       keyBindings: [{ name: "return", action: "submit" }, { name: "return", shift: true, action: "newline" }],
       onContentChange: () => this.editorChanged(),
@@ -1215,31 +2137,31 @@ var NativeFrontend = class {
       onSubmit: () => this.submit()
     });
     inputRow.add(this.editor);
-    this.enhance = new BoxRenderable3(renderer2, { id: "omnius-enhance", flexDirection: "row", gap: 1, flexShrink: 0, visible: false });
+    this.enhance = new BoxRenderable4(renderer2, { id: "omnius-enhance", flexDirection: "row", gap: 1, flexShrink: 0, visible: false });
     inputRow.add(this.enhance);
-    this.activity = new TextRenderable3(renderer2, { id: "omnius-activity", content: "", width: "100%", height: 1, wrapMode: "none", truncate: true, visible: false, fg: colors.accent });
-    this.footer.add(this.activity);
-    this.media = new BoxRenderable3(renderer2, { id: "omnius-media", width: "100%", height: 1, flexDirection: "row", gap: 1, visible: false });
-    this.mediaText = new TextRenderable3(renderer2, { id: "omnius-media-text", content: "", flexGrow: 1, minWidth: 0, wrapMode: "none", truncate: true, fg: colors.accent });
+    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 BoxRenderable3(renderer2, { id: "omnius-mic-meter", width: 12, height: 1, flexShrink: 0, backgroundColor: colors.dim, visible: false });
-    this.micLevel = new BoxRenderable3(renderer2, { id: "omnius-mic-level", width: "0%", height: 1, backgroundColor: colors.accent });
-    this.micTrack.add(this.micLevel);
+    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.footer.add(this.media);
-    this.metricsRow = new BoxRenderable3(renderer2, { id: "omnius-metrics-row", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 1 });
-    this.metricsStartActions = new BoxRenderable3(renderer2, { id: "omnius-metrics-start-actions", flexDirection: "row", gap: 1, flexShrink: 0 });
+    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 TextRenderable3(renderer2, { id: "omnius-metrics", content: "", height: 1, wrapMode: "none", truncate: true, fg: colors.dim, flexShrink: 1, flexGrow: 1, minWidth: 0 });
+    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 BoxRenderable3(renderer2, { id: "omnius-metrics-end-actions", flexDirection: "row", gap: 1, flexShrink: 0 });
+    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(CliRenderEvents.FRAME, this.onFrame);
-    renderer2.on(CliRenderEvents.RESIZE, this.onResize);
+    renderer2.on(CliRenderEvents2.FRAME, this.onFrame);
+    renderer2.on(CliRenderEvents2.RESIZE, this.onResize);
     this.applyTheme(initialTheme);
     this.editor.focus();
   }
@@ -1260,6 +2182,8 @@ var NativeFrontend = class {
   taskPane;
   tasks;
   body;
+  instruments;
+  detailButton;
   embeddedPane;
   liveButton;
   queue;
@@ -1268,14 +2192,15 @@ var NativeFrontend = class {
   prompt;
   enhance;
   metrics;
+  keyHints;
   metricsRow;
   metricsStartActions;
   metricsEndActions;
   activity;
+  status;
   media;
   mediaText;
   micTrack;
-  micLevel;
   clipboard;
   state;
   themeSignature = "";
@@ -1291,8 +2216,10 @@ var NativeFrontend = class {
   history = [];
   historyIndex = -1;
   savedInput = "";
-  animation;
-  animationIndex = 0;
+  disposeSelectionContrast;
+  actionSignatures = /* @__PURE__ */ new WeakMap();
+  detailsOpen;
+  headerPanelCollapsed = false;
   inputEventPending = false;
   viewportSignature = "";
   newEntries = 0;
@@ -1319,20 +2246,21 @@ var NativeFrontend = class {
       if (headerSignature !== this.headerSignature) {
         this.headerSignature = headerSignature;
         this.identity.content = styledText([
-          { text: state.header.title, ...state.theme.accent < 0 ? {} : { fg: `index:${state.theme.accent}` } },
+          { 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.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 ?? "";
+      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: plainText(tab.label), description: "", value: tab.id })));
+        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);
@@ -1364,7 +2292,9 @@ var NativeFrontend = class {
       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.metricsRow.visible = state.metricsVisible;
+      this.metrics.visible = state.metricsVisible;
+      this.instruments.update(state);
+      this.layoutInstruments();
       const metricsActions = JSON.stringify(state.metricsActions ?? []);
       if (metricsActions !== this.metricsActionsSignature) {
         this.metricsActionsSignature = metricsActions;
@@ -1374,7 +2304,6 @@ var NativeFrontend = class {
       this.renderEnhance();
       this.renderActivity();
       this.renderMedia();
-      this.updateAnimation();
     } finally {
       this.changing = false;
     }
@@ -1382,43 +2311,46 @@ var NativeFrontend = class {
     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 filled = prefix === "enhance" || prefix === "header" && !action.id.startsWith("header-");
-      const inverse = filled && prefix === "header" && (this.state?.theme.mode === "system" || this.state?.theme.accent === -1);
-      const backing = prefix === "enhance" ? colors.warning : colors.accent;
-      const [r, g, b] = backing.toInts();
-      const foreground = filled && !inverse ? nativeColor(r * 0.299 + g * 0.587 + b * 0.114 > 140 ? 16 : 231) : colors.accent;
-      const button = new TextRenderable3(this.renderer, {
+      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(filled ? ` ${action.label} ` : action.label),
+        content: styledText(action.label),
         flexShrink: 0,
         wrapMode: "none",
         selectable: false,
-        fg: action.disabled ? colors.dim : foreground,
-        bg: filled && !inverse ? backing : colors.background,
-        attributes: (action.active ? 1 : 0) | (inverse ? 32 : 0),
+        fg: colors.foreground,
+        bg: colors.background,
+        attributes,
         onMouseDown: (event) => {
           if (event.button !== 0 || action.disabled) return;
-          this.emit({ type: "action", action: action.command ?? action.id, id: action.id });
+          this.emitAction(action.command ?? action.id, action.id);
           event.stopPropagation();
         },
         onKeyDown: (key) => {
-          if (key.name !== "return" || action.disabled) return;
-          this.emit({ type: "action", action: action.command ?? action.id, id: action.id });
+          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.bg = colors.selection;
-          button.fg = colors.foreground;
+          button.attributes = attributes | TextAttributes6.UNDERLINE | (button.focused ? TextAttributes6.INVERSE : 0);
         };
         button.onMouseOut = () => {
-          button.bg = filled && !inverse ? backing : colors.background;
-          button.fg = foreground;
+          button.attributes = attributes | (button.focused ? TextAttributes6.INVERSE : 0);
         };
       }
       parent.add(button);
@@ -1426,23 +2358,25 @@ var NativeFrontend = class {
   }
   renderEnhance() {
     const state = this.state?.enhance;
-    this.enhance.visible = Boolean(state);
+    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" ? `${spinner[this.animationIndex % spinner.length]} Enhance` : state.label ?? "Enhance", disabled: state.state === "busy" }];
+    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 ? spinner[this.animationIndex % spinner.length] + " " : ""}${[activity?.label, stage].filter(Boolean).join(" · ")}`;
+    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 ? `${this.animationIndex % 10 < 5 ? "●" : "○"} REC` : void 0,
+      media.recording ? "● REC" : void 0,
       media.speech ? "speech" : void 0,
       media.audio ? "audio" : void 0,
       media.video ? "video" : void 0,
@@ -1453,23 +2387,8 @@ var NativeFrontend = class {
     ].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;
-    this.micLevel.width = `${Math.round(Math.max(0, Math.min(1, ((media.levelDb ?? -60) + 60) / 60)) * 100)}%`;
-    this.micLevel.backgroundColor = media.speech ? this.context.colors.success : this.context.colors.accent;
-  }
-  updateAnimation() {
-    const active = this.state?.activity?.processing || this.state?.enhance?.state === "busy" || this.state?.media?.recording;
-    if (active && !this.animation) {
-      this.animation = setInterval(() => {
-        this.animationIndex++;
-        this.renderActivity();
-        this.renderMedia();
-        if (this.state?.enhance?.state === "busy") this.renderEnhance();
-      }, 100);
-      this.animation.unref();
-    } else if (!active && this.animation) {
-      clearInterval(this.animation);
-      this.animation = 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);
@@ -1480,6 +2399,7 @@ var NativeFrontend = class {
     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 },
@@ -1503,13 +2423,11 @@ var NativeFrontend = class {
     this.headerPanel.fg = colors.foreground;
     this.routeWarning.fg = colors.warning;
     this.prompt.fg = this.activity.fg = this.liveButton.fg = colors.accent;
-    this.micTrack.backgroundColor = colors.dim;
-    this.micLevel.backgroundColor = 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.cursorColor = colors.accent;
-    this.editor.selectionBg = colors.selection;
+    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;
@@ -1518,10 +2436,61 @@ var NativeFrontend = class {
     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);
   }
@@ -1559,6 +2528,7 @@ var NativeFrontend = class {
     }
   };
   onResize = () => {
+    this.layoutInstruments();
     this.emit({ type: "resize", columns: this.renderer.terminalWidth, rows: this.renderer.terminalHeight });
   };
   editorChanged() {
@@ -1578,6 +2548,7 @@ var NativeFrontend = class {
     if (text === this.lastInput && cursor === this.lastCursor) return;
     this.lastInput = text;
     this.lastCursor = cursor;
+    this.renderEnhance();
     this.emit({ type: "input", text, cursor });
   }
   submit() {
@@ -1608,7 +2579,7 @@ var NativeFrontend = class {
     const text = String(selected.value);
     this.setInput(text + (text.endsWith(" ") ? "" : " "));
     this.suggestions.visible = false;
-    this.emit({ type: "action", action: "completion", id: text });
+    this.emitAction("completion", text);
     return true;
   }
   setInput(text, cursor = text.length) {
@@ -1623,6 +2594,10 @@ var NativeFrontend = class {
     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);
@@ -1634,10 +2609,22 @@ var NativeFrontend = class {
       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" || key.name === "tab" && key.shift ? -1 : key.name === "right" || key.name === "tab" ? 1 : 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];
@@ -1689,18 +2676,28 @@ var NativeFrontend = class {
       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 (this.suggestions.visible) {
+      else if (!key.shift && this.renderer.currentFocusedRenderable === this.editor && this.suggestions.visible) {
         this.acceptSuggestion();
         key.preventDefault();
-      } else this.shortcut("tab", key);
+      } 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;
@@ -1749,6 +2746,28 @@ var NativeFrontend = class {
       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);
@@ -1888,11 +2907,11 @@ var NativeFrontend = class {
   async dispose() {
     if (this.destroyed) return;
     this.destroyed = true;
-    if (this.animation) clearInterval(this.animation);
+    this.disposeSelectionContrast();
     this.renderer.keyInput.off("keypress", this.onKey);
     this.renderer.keyInput.off("paste", this.onPaste);
-    this.renderer.off(CliRenderEvents.FRAME, this.onFrame);
-    this.renderer.off(CliRenderEvents.RESIZE, this.onResize);
+    this.renderer.off(CliRenderEvents2.FRAME, this.onFrame);
+    this.renderer.off(CliRenderEvents2.RESIZE, this.onResize);
     this.modals.destroy();
     this.content.destroy();
     this.tasks.destroy();
@@ -1902,21 +2921,86 @@ var NativeFrontend = class {
   }
 };
 
+// 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;
-  await frontend?.dispose();
-  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) {
@@ -1936,18 +3020,22 @@ async function command(message) {
     frontend.update(message.snapshot, message.content);
     renderer.requestRender();
     await renderer.idle();
-  } else if (message.type === "suspend") await renderer.suspend();
-  else if (message.type === "resume") {
+  } else if (message.type === "suspend") {
+    await cursorDefaults.restore();
+    await renderer.suspend();
+  } else if (message.type === "resume") {
     await renderer.resume();
     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));
 }
 try {
+  const session = new NativeSession(process.stdout);
   renderer = await createCliRenderer({
-    nativeSession: new NativeSession(process.stdout),
+    nativeSession: session,
     stdin: terminalInput,
     stdout: process.stdout,
     exitOnCtrlC: false,
@@ -1958,21 +3046,22 @@ try {
     screenMode: "alternate-screen",
     consoleMode: "disabled",
     externalOutputMode: "passthrough",
-    backgroundColor: RGBA2.defaultBackground(),
+    backgroundColor: RGBA3.defaultBackground(),
     openConsoleOnError: false,
     targetFps: 60,
     maxFps: 60,
     clearOnShutdown: false
   });
-  renderer.on(CliRenderEvents2.RENDER_ERROR, (event) => {
+  renderer.on(CliRenderEvents4.RENDER_ERROR, (event) => {
     void fail(event.error);
   });
-  renderer.on(CliRenderEvents2.HANDLER_ERROR, (event) => {
+  renderer.on(CliRenderEvents4.HANDLER_ERROR, (event) => {
     void fail(event.error);
   });
   renderer.on("error", (event) => {
     void fail(event);
   });
+  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();
@@ -2004,6 +3093,7 @@ try {
   });
   renderer.requestRender();
   await renderer.idle();
+  await cursorDefaults.restore();
   reply({ type: "ready" });
 } catch (error) {
   await fail(error);