omnius 1.0.864 → 1.0.866

package/dist/tui/native/worker.js

@@ -2,19 +2,18 @@
 import { createWriteStream } from "node:fs";
 import { createInterface } from "node:readline";
 import { PassThrough } from "node:stream";
-import { CliRenderEvents as CliRenderEvents5, NativeSession, RGBA as RGBA3, createCliRenderer } from "@opentui/core";
+import { CliRenderEvents as CliRenderEvents7, NativeSession, RGBA as RGBA3, createCliRenderer } from "@opentui/core";
 
 // packages/cli/src/tui/native/components/frontend.ts
 import {
-  BoxRenderable as BoxRenderable5,
-  CliRenderEvents as CliRenderEvents3,
+  BoxRenderable as BoxRenderable7,
+  CliRenderEvents as CliRenderEvents5,
   EmbeddedTerminalRenderable as EmbeddedTerminalRenderable2,
-  ScrollBoxRenderable as ScrollBoxRenderable4,
+  ScrollBoxRenderable as ScrollBoxRenderable5,
   SyntaxStyle as SyntaxStyle2,
-  TabSelectRenderable,
   TextareaRenderable as TextareaRenderable2,
-  TextRenderable as TextRenderable4,
-  TextAttributes as TextAttributes6,
+  TextRenderable as TextRenderable6,
+  TextAttributes as TextAttributes8,
   createClipboard,
   createHostClipboard,
   createRendererClipboardAdapter
@@ -799,49 +798,51 @@ function drawDotRail(buffer, x, y, length, horizontal, progress, colors) {
 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;
-    };
+    styleNativeSlider(bar.slider, colors);
   }
 }
+function styleNativeSlider(slider, colors) {
+  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 {
@@ -1650,6 +1651,58 @@ import {
   TextRenderable as TextRenderable3
 } from "@opentui/core";
 
+// packages/cli/src/tui/native/components/device-history.ts
+var DeviceHistory = class {
+  samples = [];
+  append(sample) {
+    if (!Number.isFinite(sample.at) || sample.at <= (this.samples.at(-1)?.at ?? 0)) return;
+    this.samples.push(sample);
+    if (this.samples.length > 120) this.samples.splice(0, this.samples.length - 120);
+  }
+};
+function deviceHistorySparkline(samples, field, width) {
+  const columns = Math.max(0, Math.floor(width));
+  const latest = samples.at(-1)?.at;
+  const values = Array(columns).fill(void 0);
+  if (latest !== void 0) for (const sample of samples) {
+    const x = columns - 1 - Math.round((latest - sample.at) / 2e3);
+    if (x >= 0 && x < columns) values[x] = sample[field];
+  }
+  return values.map((value) => value === void 0 || !Number.isFinite(value) || value < 0 ? " " : "▁▂▃▄▅▆▇█"[Math.round(Math.min(100, value) * 7 / 100)]).join("");
+}
+function deviceHistoryGraph(samples, field, width) {
+  const columns = Math.max(0, Math.floor(width) - 5), pixels = columns * 2;
+  if (columns < 2) return "";
+  const cells = Array.from({ length: 3 }, () => Array(columns).fill(0));
+  const latest = samples.at(-1)?.at;
+  const dots = [[1, 8], [2, 16], [4, 32], [64, 128]];
+  const point = (x, y) => {
+    if (x < 0 || x >= pixels || y < 0 || y >= 12) return;
+    cells[Math.floor(y / 4)][Math.floor(x / 2)] |= dots[y % 4][x % 2];
+  };
+  let previous;
+  if (latest !== void 0) for (const sample of samples) {
+    const value = sample[field];
+    const x = pixels - 1 - Math.round((latest - sample.at) / 1e3);
+    if (x < 0) {
+      previous = void 0;
+      continue;
+    }
+    if (value === void 0 || !Number.isFinite(value) || value < 0) {
+      previous = void 0;
+      continue;
+    }
+    const y = Math.round(11 * (1 - Math.min(100, value) / 100));
+    if (previous && sample.at - previous.at <= 5e3) {
+      const distance = Math.max(1, Math.abs(x - previous.x), Math.abs(y - previous.y));
+      for (let step = 0; step <= distance; step++) point(Math.round(previous.x + (x - previous.x) * step / distance), Math.round(previous.y + (y - previous.y) * step / distance));
+    } else point(x, y);
+    previous = { x, y, at: sample.at };
+  }
+  const labels = ["100%│", " 50%│", "  0%└"];
+  return cells.map((row, y) => labels[y] + row.map((bits, x) => bits ? String.fromCodePoint(10240 + bits) : x % 4 === 0 ? "·" : " ").join("")).join("\n");
+}
+
 // packages/cli/src/tui/terminal-cells.ts
 var graphemes = new Intl.Segmenter(void 0, { granularity: "grapheme" });
 var extendedPictographic = /\p{Extended_Pictographic}/u;
@@ -1729,6 +1782,20 @@ function terminalCellWidth(value) {
 
 // packages/cli/src/tui/native/components/instrument-format.ts
 var graphemes2 = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+function formatSignalDivider(width, geometry = { direction: "top" }) {
+  const cells = Math.max(0, Math.floor(width));
+  if (cells < 8) return "─".repeat(cells);
+  const buffer = Math.max(1, Math.floor(geometry.buffer ?? 2));
+  const requestedRight = geometry.direction === "bottom" && geometry.sidebarColumn !== void 0 ? geometry.sidebarColumn : (geometry.rightTextStart ?? cells) - buffer - 1;
+  const right = Math.max(4, Math.min(cells - 2, Math.floor(requestedRight)));
+  const requestedLeft = Math.floor(geometry.leftTextEnd ?? 0) + buffer;
+  if (geometry.direction === "top" && requestedLeft > right - 2) return "─".repeat(cells);
+  const left = Math.max(1, Math.min(right - 2, requestedLeft));
+  const outside = geometry.direction === "top" ? "▁" : "▔";
+  const inside = geometry.direction === "top" ? "▔" : "▁";
+  const fall = geometry.direction === "top" ? "╱" : "╲", rise = geometry.direction === "top" ? "╲" : "╱";
+  return outside.repeat(left) + fall + inside.repeat(right - left - 1) + rise + outside.repeat(cells - right - 1);
+}
 function fitInstrumentText(value, cells, marker = "~") {
   const text = stripTerminalSequences(normalizeTerminalLine(value));
   const width = Math.max(0, Math.floor(cells));
@@ -1989,13 +2056,17 @@ var InstrumentDivider = class extends TextRenderable3 {
 };
 var DeviceMonitor = class extends BoxRenderable4 {
   constructor(renderer2, action) {
-    super(renderer2, { id: "omnius-devices", width: "100%", height: 3, minHeight: 3, maxHeight: "60%", flexShrink: 1, flexDirection: "column", visible: false });
+    super(renderer2, { id: "omnius-devices", width: "100%", height: 5, minHeight: 5, maxHeight: "60%", flexShrink: 1, flexDirection: "column", visible: false });
     this.action = action;
     this.heading = new SectionBanner(renderer2, "DEVICES", "omnius-devices:heading", () => this.toggle());
     this.heading.update("DEVICES", false);
     this.add(this.heading);
     this.summary = new TextRenderable3(renderer2, { id: "omnius-devices:summary", content: "--", width: "100%", height: 1, flexShrink: 0, fg: foreground, bg: background, wrapMode: "none", truncate: true });
     this.add(this.summary);
+    this.compactLoad = new TextRenderable3(renderer2, { id: "omnius-devices:load-history", content: "", width: "100%", height: 1, flexShrink: 0, fg: foreground, bg: background, wrapMode: "none", truncate: true });
+    this.compactMemory = new TextRenderable3(renderer2, { id: "omnius-devices:memory-history", content: "", width: "100%", height: 1, flexShrink: 0, fg: foreground, bg: background, wrapMode: "none", truncate: true });
+    this.add(this.compactLoad);
+    this.add(this.compactMemory);
     this.scroll = new ScrollBoxRenderable3(renderer2, {
       id: "omnius-devices:scroll",
       width: "100%",
@@ -2036,11 +2107,15 @@ var DeviceMonitor = class extends BoxRenderable4 {
   heading;
   scroll;
   summary;
+  compactLoad;
+  compactMemory;
   policy;
   status;
   notes;
   expanded = false;
+  availableRows = 100;
   snapshot;
+  historySource = "";
   rows = /* @__PURE__ */ new Map();
   button(renderer2, id, label, activate) {
     const button = new TextRenderable3(renderer2, {
@@ -2086,7 +2161,12 @@ var DeviceMonitor = class extends BoxRenderable4 {
   }
   update(snapshot) {
     this.snapshot = snapshot;
-    this.visible = Boolean(snapshot);
+    this.visible = Boolean(snapshot) && this.availableRows >= 3;
+    const historySource = `${snapshot?.source}:${snapshot?.local}`;
+    if (this.historySource !== historySource) {
+      for (const row of this.rows.values()) row.history.samples.splice(0);
+      this.historySource = historySource;
+    }
     const allowed = this.canSelect();
     if (this.policy.focused && !allowed) this.heading.focus();
     this.policy.focusable = allowed;
@@ -2108,7 +2188,7 @@ var DeviceMonitor = class extends BoxRenderable4 {
           flexShrink: 0,
           onSizeChange: () => {
             if (!row) return;
-            for (const child of [row.title, row.load, row.memory, row.reason]) child.width = row.root.width;
+            for (const child of [row.title, row.load, row.memory, row.reason, row.loadGraph, row.memoryGraph]) child.width = row.root.width;
             this.refresh();
           }
         });
@@ -2120,6 +2200,8 @@ var DeviceMonitor = class extends BoxRenderable4 {
         title.on(RenderableEvents3.FOCUSED, () => this.scroll.scrollChildIntoView(root.id));
         const load = new TelemetryRow(this._ctx, "LOAD", `${root.id}:load`, 16);
         const memory = new TelemetryRow(this._ctx, "VRAM", `${root.id}:memory`, 16);
+        const plot = (name) => new TextRenderable3(this._ctx, { id: `${root.id}:${name}-history`, content: "", width: "100%", height: 3, flexShrink: 0, fg: foreground, bg: background, wrapMode: "none", truncate: true, selectable: false });
+        const loadGraph = plot("load"), memoryGraph = plot("memory"), history = new DeviceHistory();
         const reason = new TextRenderable3(this._ctx, {
           id: `${root.id}:reason`,
           content: "",
@@ -2134,12 +2216,19 @@ var DeviceMonitor = class extends BoxRenderable4 {
         });
         root.add(title);
         root.add(load);
+        root.add(loadGraph);
         root.add(memory);
+        root.add(memoryGraph);
         root.add(reason);
         this.scroll.add(root);
-        row = { root, title, load, memory, reason };
+        row = { root, title, load, memory, reason, history, loadGraph, memoryGraph };
         this.rows.set(device.uuid, row);
       }
+      if (snapshot?.sampledAt !== void 0) row.history.append({
+        at: snapshot.sampledAt,
+        load: device.utilization,
+        memory: device.memoryUsedMB !== void 0 && device.memoryUsedMB >= 0 && device.memoryTotalMB !== void 0 && device.memoryTotalMB > 0 ? device.memoryUsedMB * 100 / device.memoryTotalMB : void 0
+      });
       const selectable = this.canSelectDevice(device);
       if (row.title.focused && !selectable) this.heading.focus();
       row.title.focusable = selectable;
@@ -2156,11 +2245,20 @@ var DeviceMonitor = class extends BoxRenderable4 {
   toggle() {
     this.expanded = !this.expanded;
     this.scroll.visible = this.expanded;
-    this.minHeight = this.expanded ? 4 : 3;
     this.scroll.minHeight = this.expanded ? 1 : 0;
-    this.height = this.expanded ? Math.min(12, Math.max(5, Math.floor(this._ctx.terminalHeight / 3))) : 3;
+    this.fitHeight(this.availableRows + 2);
     this.refresh();
   }
+  fitHeight(railRows) {
+    this.availableRows = Math.max(0, railRows - 2);
+    this.visible = Boolean(this.snapshot) && this.availableRows >= 3;
+    this.minHeight = Math.min(5, this.availableRows);
+    this.maxHeight = this.availableRows;
+    this.summary.visible = this.availableRows >= 5;
+    this.compactLoad.visible = !this.expanded;
+    this.compactMemory.visible = !this.expanded && this.availableRows >= 4;
+    this.height = Math.min(this.availableRows, this.expanded ? Math.min(18, Math.max(6, Math.floor(railRows * 0.6))) : 5);
+  }
   onResize(width, height) {
     super.onResize(width, height);
     this.refresh();
@@ -2176,13 +2274,28 @@ var DeviceMonitor = class extends BoxRenderable4 {
     this.notes.content = [
       data?.local === false ? "REMOTE" : void 0,
       data ? `${data.source.toUpperCase()} · ${data.policy.toUpperCase()} · ${data.broker.toUpperCase()}` : void 0,
+      "2s/col",
       data?.warnings.length ? `${data.warnings.length} notices` : void 0
     ].filter(Boolean).join(" · ");
+    const primary = devices.find((device) => device.preferred) ?? devices.find((device) => device.enabled) ?? devices[0];
+    const compactHistory = primary ? this.rows.get(primary.uuid)?.history.samples ?? [] : [];
+    for (const [element, field, label] of [[this.compactLoad, "load", "UTIL"], [this.compactMemory, "memory", primary?.unifiedMemory ? "UMA" : "VRAM"]]) {
+      const current = primary ? field === "load" ? primary.utilization : primary.memoryUsedMB !== void 0 && primary.memoryTotalMB ? primary.memoryUsedMB / primary.memoryTotalMB * 100 : void 0 : void 0;
+      const value = instrumentNumber(current, 0, "%");
+      const caption = `${label}${primary?.index ?? "-"}`;
+      const plotWidth = Math.max(0, this.width - caption.length - value.length - 2);
+      const next = `${caption} ${deviceHistorySparkline(compactHistory, field, plotWidth)} ${value}`;
+      if (element.plainText !== next) element.content = next;
+    }
     for (const device of devices) {
       const row = this.rows.get(device.uuid);
       if (!row) continue;
       const state = device.enabled === void 0 ? "--" : device.enabled ? "ON" : "OFF";
       row.title.content = formatTelemetryRow(`GPU ${device.index} ${device.name}`, `${state}${device.preferred ? " *" : ""}`, row.root.width, 6);
+      for (const [plot, field] of [[row.loadGraph, "load"], [row.memoryGraph, "memory"]]) {
+        const next = deviceHistoryGraph(row.history.samples, field, row.root.width);
+        if (plot.plainText !== next) plot.content = next;
+      }
     }
   }
   focusTargets() {
@@ -2305,6 +2418,10 @@ var InstrumentRail = class extends BoxRenderable4 {
   contextMeter;
   contextHeader;
   contextDetails;
+  onResize(width, height) {
+    super.onResize(width, height);
+    this.devices?.fitHeight(height);
+  }
   constructor(renderer2, options = {}) {
     const id = options.id ?? "omnius-instruments";
     super(renderer2, {
@@ -3964,17 +4081,327 @@ var VimComposer = class {
   }
 };
 
+// packages/cli/src/tui/native/components/selection-menu.ts
+import { BoxRenderable as BoxRenderable5, CliRenderEvents as CliRenderEvents3, TextAttributes as TextAttributes6, TextRenderable as TextRenderable4 } from "@opentui/core";
+var NativeSelectionMenu = class {
+  constructor(renderer2, colors, copy, restoreFocus) {
+    this.renderer = renderer2;
+    this.colors = colors;
+    this.copy = copy;
+    this.restoreFocus = restoreFocus;
+    renderer2.on(CliRenderEvents3.RESIZE, this.position);
+  }
+  renderer;
+  colors;
+  copy;
+  restoreFocus;
+  overlay;
+  panel;
+  frame;
+  previousFocus;
+  anchor = { x: 0, y: 0 };
+  selectedText = "";
+  get active() {
+    return Boolean(this.overlay);
+  }
+  open(x, y, text) {
+    if (!text) return;
+    this.close();
+    this.selectedText = text;
+    this.anchor = { x, y };
+    this.previousFocus = this.renderer.currentFocusedRenderable;
+    this.overlay = new BoxRenderable5(this.renderer, {
+      id: "omnius-selection-menu",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "100%",
+      backgroundColor: "transparent",
+      shouldFill: false,
+      zIndex: 120,
+      onMouseDown: (event) => {
+        this.close();
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    });
+    this.panel = new BoxRenderable5(this.renderer, {
+      id: "omnius-selection-menu-panel",
+      position: "absolute",
+      width: 14,
+      height: 3,
+      flexDirection: "column",
+      paddingX: 2,
+      paddingY: 1,
+      backgroundColor: this.colors.background,
+      onMouseDown: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    });
+    const action = new TextRenderable4(this.renderer, {
+      id: "omnius-selection-copy",
+      content: "COPY",
+      height: 1,
+      width: "100%",
+      selectable: false,
+      fg: this.colors.foreground,
+      bg: this.colors.background,
+      attributes: TextAttributes6.BOLD | TextAttributes6.INVERSE,
+      onMouseDown: (event) => {
+        if (event.button === 0) this.confirm();
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    });
+    action.focusable = true;
+    this.panel.add(action);
+    this.overlay.add(this.panel);
+    this.frame = new NativeCornerFrame(this.panel, this.colors, this.renderer, this.overlay);
+    this.renderer.root.add(this.overlay);
+    this.position();
+    action.focus();
+    this.renderer.requestRender();
+  }
+  position = () => {
+    if (!this.panel) return;
+    const width = Math.min(14, this.renderer.terminalWidth);
+    this.panel.width = width;
+    this.panel.left = Math.max(0, Math.min(this.anchor.x, this.renderer.terminalWidth - width));
+    this.panel.top = Math.max(0, Math.min(this.anchor.y + 1, this.renderer.terminalHeight - 3));
+  };
+  handleKey(key) {
+    if (key.eventType !== "release") {
+      if (key.name === "return" || key.sequence === " " || key.ctrl && key.shift && key.name.toLowerCase() === "c") this.confirm();
+      else if (key.name === "escape" || key.name === "tab") this.close();
+    }
+    key.preventDefault();
+    key.stopPropagation();
+  }
+  confirm() {
+    const text = this.selectedText;
+    this.close();
+    this.copy(text);
+  }
+  applyTheme(colors) {
+    this.colors = colors;
+    if (!this.panel) return;
+    this.panel.backgroundColor = colors.background;
+    this.frame?.setColors(colors);
+    for (const child of this.panel.getChildren()) if (child instanceof TextRenderable4) {
+      child.fg = colors.foreground;
+      child.bg = colors.background;
+    }
+  }
+  close() {
+    if (!this.overlay) return;
+    const previous = this.previousFocus;
+    this.previousFocus = void 0;
+    this.frame?.destroy();
+    this.frame = void 0;
+    this.overlay.destroyRecursively();
+    this.overlay = void 0;
+    this.panel = void 0;
+    this.selectedText = "";
+    if (previous && !previous.isDestroyed && previous.visible && previous.focusable) previous.focus();
+    else this.restoreFocus();
+    this.renderer.requestRender();
+  }
+  destroy() {
+    this.close();
+    this.renderer.off(CliRenderEvents3.RESIZE, this.position);
+  }
+};
+
+// packages/cli/src/tui/native/components/tab-strip.ts
+import { BoxRenderable as BoxRenderable6, CliRenderEvents as CliRenderEvents4, ScrollBoxRenderable as ScrollBoxRenderable4, SliderRenderable, TextAttributes as TextAttributes7, TextRenderable as TextRenderable5 } from "@opentui/core";
+var NativeTabStrip = class extends BoxRenderable6 {
+  constructor(renderer2, options) {
+    super(renderer2, {
+      id: options.id,
+      height: 1,
+      minHeight: 1,
+      maxHeight: 1,
+      minWidth: 0,
+      flexGrow: 1,
+      flexShrink: 1,
+      flexDirection: "row",
+      shouldFill: false
+    });
+    this.renderer = renderer2;
+    this.options = options;
+    this.colors = options.colors;
+    this.scroll = new ScrollBoxRenderable4(renderer2, {
+      id: `${options.id}:scroll`,
+      height: 1,
+      minHeight: 1,
+      maxHeight: 1,
+      minWidth: 0,
+      flexGrow: 1,
+      flexShrink: 1,
+      scrollX: true,
+      scrollY: false,
+      viewportCulling: true,
+      viewportOptions: { height: 1, minHeight: 1, maxHeight: 1 },
+      contentOptions: { flexDirection: "row", gap: 1 },
+      horizontalScrollbarOptions: { visible: false },
+      verticalScrollbarOptions: { visible: false }
+    });
+    this.scroll.focusable = false;
+    this.scroll.horizontalScrollBar.visible = this.scroll.verticalScrollBar.visible = false;
+    styleNativeScrollbars(this.scroll, this.colors);
+    this.add(this.scroll);
+    this.rail = new SliderRenderable(renderer2, {
+      id: `${options.id}:rail`,
+      orientation: "horizontal",
+      width: 5,
+      minWidth: 5,
+      height: 1,
+      flexShrink: 0,
+      visible: false,
+      min: 0,
+      max: 0,
+      value: 0,
+      onChange: (value) => {
+        if (!this.syncing) this.scroll.scrollLeft = value;
+      }
+    });
+    this.rail.focusable = false;
+    this.add(this.rail);
+    styleNativeSlider(this.rail, this.colors);
+    renderer2.on(CliRenderEvents4.FRAME, this.syncScroll);
+  }
+  renderer;
+  options;
+  scroll;
+  rail;
+  buttons = /* @__PURE__ */ new Map();
+  activeId;
+  signature = "";
+  syncing = false;
+  reveal;
+  colors;
+  naturalWidth = 0;
+  update(items, activeId, busy = false) {
+    const signature = JSON.stringify([items, activeId, busy]);
+    if (signature === this.signature) return;
+    this.signature = signature;
+    const ids = new Set(items.map((item) => item.id));
+    for (const [id, entry] of this.buttons) if (!ids.has(id)) {
+      entry.button.destroy();
+      this.buttons.delete(id);
+    }
+    for (const [index, action] of items.entries()) {
+      let entry = this.buttons.get(action.id);
+      if (!entry) {
+        const button = new TextRenderable5(this.renderer, {
+          id: `${this.options.prefix}:${action.id}`,
+          content: "",
+          height: 1,
+          flexShrink: 0,
+          wrapMode: "none",
+          selectable: false,
+          fg: this.colors.foreground,
+          bg: this.colors.background,
+          onMouseDown: (event) => {
+            if (event.button === 0) {
+              button.focus();
+              if (!entry.blocked) this.options.activate(action.id);
+            }
+            event.preventDefault();
+            event.stopPropagation();
+          },
+          onKeyDown: (key) => this.handleKey(entry, key)
+        });
+        entry = { action, active: false, blocked: false, button };
+        this.buttons.set(action.id, entry);
+        button.on("focused", () => {
+          this.style(entry);
+          this.scroll.scrollChildIntoView(button.id);
+          this.reveal = button.id;
+        });
+        button.on("blurred", () => this.style(entry));
+      }
+      entry.action = action;
+      entry.active = action.id === activeId;
+      entry.blocked = busy || Boolean(action.disabled);
+      entry.button.focusable = entry.active || !entry.blocked;
+      const label = plainText(action.label);
+      const content = entry.active ? `⟋⟋ ${label} ⟍⟍` : ` ${label} `;
+      if (entry.button.plainText !== content) entry.button.content = content;
+      this.style(entry);
+      if (this.scroll.getChildren()[index] !== entry.button) this.scroll.add(entry.button, index);
+    }
+    this.naturalWidth = Array.from(this.buttons.values()).reduce((width, entry) => width + terminalCellWidth(entry.button.plainText), 0) + Math.max(0, items.length - 1);
+    const focused = this.renderer.currentFocusedRenderable;
+    if (focused && !focused.focusable && Array.from(this.buttons.values()).some((entry) => entry.button === focused)) this.buttons.get(activeId)?.button.focus();
+    if (activeId !== this.activeId) this.reveal = `${this.options.prefix}:${activeId}`;
+    this.activeId = activeId;
+    this.renderer.requestRender();
+  }
+  style(entry) {
+    entry.button.attributes = (entry.active ? TextAttributes7.BOLD | TextAttributes7.UNDERLINE : entry.blocked ? TextAttributes7.DIM : 0) | (entry.button.focused ? TextAttributes7.INVERSE : 0);
+  }
+  handleKey(entry, key) {
+    if (key.eventType === "release") return;
+    if (key.name === "return" || key.sequence === " ") {
+      if (!entry.blocked) this.options.activate(entry.action.id);
+    } else if (["left", "right", "home", "end"].includes(key.name)) {
+      const targets = this.scroll.getChildren().filter((button) => button.focusable);
+      const index = targets.indexOf(entry.button);
+      const next = key.name === "home" ? 0 : key.name === "end" ? targets.length - 1 : (index + (key.name === "left" ? -1 : 1) + targets.length) % targets.length;
+      targets[next]?.focus();
+    } else return;
+    key.preventDefault();
+    key.stopPropagation();
+  }
+  syncScroll = () => {
+    if (!this.visible || this.width < 1) return;
+    const overflow = this.naturalWidth > this.width;
+    if (this.rail.visible !== overflow) {
+      this.rail.visible = overflow;
+      this.renderer.requestRender();
+    }
+    if (this.reveal) {
+      this.scroll.scrollChildIntoView(this.reveal);
+      this.reveal = void 0;
+    }
+    this.syncing = true;
+    this.rail.max = Math.max(0, this.scroll.scrollWidth - this.scroll.viewport.width);
+    this.rail.viewPortSize = this.scroll.viewport.width;
+    this.rail.value = this.scroll.scrollLeft;
+    this.syncing = false;
+  };
+  applyTheme(colors) {
+    this.colors = colors;
+    for (const { button } of this.buttons.values()) {
+      button.fg = colors.foreground;
+      button.bg = colors.background;
+    }
+    styleNativeScrollbars(this.scroll, colors);
+    styleNativeSlider(this.rail, colors);
+  }
+  destroySelf() {
+    this.renderer.off(CliRenderEvents4.FRAME, this.syncScroll);
+    super.destroySelf();
+  }
+};
+
 // packages/cli/src/tui/native/components/frontend.ts
 var initialTheme = { mode: "system", bg: -1, accent: -1, textPrimary: -1, textDim: -1, boxColor: -1 };
 var NativeFrontend = class {
-  constructor(renderer2, emit) {
+  constructor(renderer2, emit, options = {}) {
     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 BoxRenderable5(renderer2, {
+    this.clipboard = options.clipboard ?? createClipboard({ host: createHostClipboard({ timeoutMs: 1500 }), terminal: createRendererClipboardAdapter(renderer2) });
+    this.selectionMenu = new NativeSelectionMenu(renderer2, colors, (text) => {
+      void this.copy(text);
+    }, () => this.restoreFocus());
+    this.root = new BoxRenderable7(renderer2, {
       id: "omnius-native",
       width: "100%",
       height: "100%",
@@ -3982,7 +4409,7 @@ var NativeFrontend = class {
       backgroundColor: colors.background
     });
     renderer2.root.add(this.root);
-    this.header = new BoxRenderable5(renderer2, {
+    this.header = new BoxRenderable7(renderer2, {
       id: "omnius-header",
       width: "100%",
       minWidth: 0,
@@ -3993,9 +4420,23 @@ var NativeFrontend = class {
       borderColor: colors.border
     });
     this.root.add(this.header);
-    const headerRow = new BoxRenderable5(renderer2, { id: "omnius-header-row", width: "100%", minWidth: 0, minHeight: 1, flexDirection: "row", gap: 1 });
+    this.header.renderAfter = (buffer) => {
+      if (this.header.height > 0) buffer.drawText(
+        formatSignalDivider(this.header.width, {
+          direction: "top",
+          leftTextEnd: this.identity.x - this.header.x + Math.min(this.identity.width, terminalCellWidth(this.identity.plainText)),
+          rightTextStart: Math.min(this.detailButton.x, this.headerActions.visible ? this.headerActions.x : this.detailButton.x) - this.header.x
+        }),
+        this.header.x,
+        this.header.y + this.header.height - 1,
+        this.context.colors.foreground,
+        this.context.colors.background,
+        TextAttributes8.DIM
+      );
+    };
+    const headerRow = new BoxRenderable7(renderer2, { id: "omnius-header-row", width: "100%", minWidth: 0, minHeight: 1, flexDirection: "row", gap: 1 });
     this.header.add(headerRow);
-    this.identity = new TextRenderable4(renderer2, {
+    this.identity = new TextRenderable6(renderer2, {
       id: "omnius-identity",
       content: "Omnius",
       fg: colors.foreground,
@@ -4005,7 +4446,7 @@ var NativeFrontend = class {
       truncate: true,
       minWidth: 18,
       selectable: false,
-      attributes: TextAttributes6.BOLD,
+      attributes: TextAttributes8.BOLD,
       onMouseDown: (event) => {
         if (event.button === 0) {
           this.toggleHeaderPanel();
@@ -4020,7 +4461,7 @@ var NativeFrontend = class {
       }
     });
     headerRow.add(this.identity);
-    this.headerActions = new ScrollBoxRenderable4(renderer2, {
+    this.headerActions = new ScrollBoxRenderable5(renderer2, {
       id: "omnius-header-actions",
       flexGrow: 0,
       flexShrink: 1,
@@ -4033,16 +4474,16 @@ var NativeFrontend = class {
       verticalScrollbarOptions: { visible: false }
     });
     headerRow.add(this.headerActions);
-    this.headerPanel = new TextRenderable4(renderer2, { id: "omnius-header-panel", content: "", width: "100%", wrapMode: "word", visible: false });
+    this.headerPanel = new TextRenderable6(renderer2, { id: "omnius-header-panel", content: "", width: "100%", wrapMode: "word", visible: false });
     this.header.add(this.headerPanel);
-    this.detailButton = new TextRenderable4(renderer2, {
+    this.detailButton = new TextRenderable6(renderer2, {
       id: "omnius-details-toggle",
       content: "+ DETAILS",
       height: 1,
       width: 9,
       flexShrink: 0,
       fg: colors.foreground,
-      attributes: TextAttributes6.DIM,
+      attributes: TextAttributes8.DIM,
       selectable: false,
       onMouseDown: (event) => {
         if (event.button === 0) {
@@ -4062,60 +4503,67 @@ var NativeFrontend = class {
     for (const control of [this.identity, this.detailButton]) {
       const attributes = control.attributes;
       control.on("focused", () => {
-        control.attributes = attributes | TextAttributes6.INVERSE;
+        control.attributes = attributes | TextAttributes8.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",
+    this.sessionRow = new BoxRenderable7(renderer2, {
+      id: "omnius-sessions-row",
       width: "100%",
-      height: 2,
-      showDescription: false,
-      showUnderline: true,
-      showScrollArrows: false,
-      tabWidth: 18,
-      wrapSelection: true,
-      visible: false,
-      backgroundColor: colors.background,
-      focusedBackgroundColor: colors.background,
-      textColor: colors.dim,
-      selectedTextColor: colors.foreground,
-      selectedBackgroundColor: colors.selection,
+      height: 1,
+      minWidth: 0,
+      flexShrink: 0,
+      flexDirection: "row",
+      gap: 1,
+      visible: false
+    });
+    this.header.add(this.sessionRow);
+    this.sessions = new NativeTabStrip(renderer2, {
+      id: "omnius-session-tabs",
+      prefix: "session",
+      colors,
+      activate: (id) => this.emitAction("session", id)
+    });
+    this.sessionRow.add(this.sessions);
+    this.newSession = new TextRenderable6(renderer2, {
+      id: "omnius-session-new",
+      content: "+ NEW",
+      width: 5,
+      height: 1,
+      flexShrink: 0,
+      selectable: false,
+      fg: colors.foreground,
+      bg: colors.background,
       onMouseDown: (event) => {
-        if (event.button !== 0) return;
-        const count = Math.max(1, Math.floor(this.tabs.width / this.tabs.getTabWidth()));
-        const start = Math.max(0, Math.min(this.tabs.getSelectedIndex() - Math.floor(count / 2), this.tabs.options.length - count));
-        this.tabs.setSelectedIndex(start + Math.floor((event.x - this.tabs.x) / this.tabs.getTabWidth()));
+        if (event.button === 0 && !this.state?.sessions?.busy) this.emitAction("session-new");
+        event.preventDefault();
         event.stopPropagation();
+      },
+      onKeyDown: (key) => {
+        if (key.eventType !== "release" && (key.name === "return" || key.sequence === " ")) {
+          if (!this.state?.sessions?.busy) this.emitAction("session-new");
+          key.preventDefault();
+          key.stopPropagation();
+        }
       }
     });
-    this.tabs.on("selectionChanged", () => {
-      if (this.changing) return;
-      const selected = this.tabs.getSelectedOption();
-      if (selected) this.emitAction("view", String(selected.value));
-      this.editor.focus();
-    });
-    this.tabs.renderAfter = (buffer) => {
-      if (this.tabs.height < 2) return;
-      const colors2 = this.context.colors;
-      const tabWidth = Math.min(this.tabs.getTabWidth(), this.tabs.width);
-      const count = Math.max(1, Math.floor(this.tabs.width / Math.max(1, tabWidth)));
-      const selected = this.tabs.getSelectedIndex();
-      const start = Math.max(0, Math.min(selected - Math.floor(count / 2), this.tabs.options.length - count));
-      buffer.fillRect(0, 1, this.tabs.width, 1, colors2.background);
-      buffer.drawText("─".repeat(Math.max(0, tabWidth)), (selected - start) * tabWidth, 1, colors2.foreground, colors2.background, TextAttributes6.DIM);
+    this.newSession.focusable = true;
+    const styleNew = () => {
+      this.newSession.attributes = (this.state?.sessions?.busy ? TextAttributes8.DIM : 0) | (this.newSession.focused ? TextAttributes8.INVERSE : 0);
     };
-    this.root.add(this.tabs);
-    this.taskPane = new BoxRenderable5(renderer2, { id: "omnius-tasks", width: "100%", flexDirection: "column", maxHeight: 6, flexShrink: 0, overflow: "hidden", visible: false });
+    this.newSession.on("focused", styleNew);
+    this.newSession.on("blurred", styleNew);
+    this.sessionRow.add(this.newSession);
+    this.routeWarning = new TextRenderable6(renderer2, { id: "omnius-route-warning", content: "", width: "100%", wrapMode: "word", fg: colors.warning, attributes: TextAttributes8.BOLD | TextAttributes8.UNDERLINE, visible: false, flexShrink: 0 });
+    this.root.add(this.routeWarning);
+    this.taskPane = new BoxRenderable7(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 BoxRenderable5(renderer2, { id: "omnius-body", width: "100%", flexDirection: "row", flexGrow: 1, minHeight: 1 });
+    this.body = new BoxRenderable7(renderer2, { id: "omnius-body", width: "100%", flexDirection: "row", flexGrow: 1, minHeight: 1 });
     this.root.add(this.body);
-    this.scroll = new ScrollBoxRenderable4(renderer2, {
+    this.scroll = new ScrollBoxRenderable5(renderer2, {
       id: "omnius-conversation",
       flexGrow: 1,
       flexShrink: 1,
@@ -4128,6 +4576,15 @@ var NativeFrontend = class {
       viewportCulling: true,
       verticalScrollbarOptions: { showArrows: false, trackOptions: { foregroundColor: colors.dim, backgroundColor: colors.background } },
       contentOptions: { flexDirection: "column", onMouseDown: (event) => {
+        if (event.button === 2) {
+          const selected = this.renderer.getSelection()?.getSelectedText();
+          if (selected) {
+            this.selectionMenu.open(event.x, event.y, selected);
+            event.preventDefault();
+            event.stopPropagation();
+          }
+          return;
+        }
         if (!this.selectionArmed || event.button !== 0 || !event.target) return;
         this.selectionArmed = false;
         let block = event.target;
@@ -4147,6 +4604,18 @@ var NativeFrontend = class {
         }
         event.preventDefault();
         event.stopPropagation();
+      }, onMouseDrag: (event) => {
+        if (!event.isDragging || !event.target || !this.renderer.getSelection()?.isDragging) return;
+        let container = this.renderer.getSelectionContainer();
+        while (container) {
+          let current = event.target;
+          while (current && current !== container) current = current.parent;
+          if (current) break;
+          this.renderer.updateSelection(event.target, event.x, event.y);
+          const next = this.renderer.getSelectionContainer();
+          if (next === container) break;
+          container = next;
+        }
       } }
     });
     this.body.add(this.scroll);
@@ -4167,7 +4636,7 @@ var NativeFrontend = class {
     this.root.onMouseUp = (event) => this.instrumentDivider.handleRelease(event);
     this.instruments = new InstrumentRail(renderer2, { colors, onInspectAgent: (id) => this.emitAction("view", id), onAction: (command2) => this.emitAction(command2) });
     this.body.add(this.instruments);
-    this.embeddedPane = new BoxRenderable5(renderer2, {
+    this.embeddedPane = new BoxRenderable7(renderer2, {
       id: "omnius-editor-pane",
       width: "50%",
       flexShrink: 0,
@@ -4178,7 +4647,7 @@ var NativeFrontend = class {
       visible: false
     });
     this.body.add(this.embeddedPane);
-    this.liveButton = new TextRenderable4(renderer2, {
+    this.liveButton = new TextRenderable6(renderer2, {
       id: "omnius-live-button",
       content: "↓ Live",
       width: "100%",
@@ -4201,7 +4670,7 @@ var NativeFrontend = class {
     });
     this.liveButton.focusable = true;
     this.root.add(this.liveButton);
-    this.queue = new TextRenderable4(renderer2, { id: "omnius-steering-queue", content: "", width: "100%", height: 1, wrapMode: "none", truncate: true, fg: colors.dim, visible: false, flexShrink: 0 });
+    this.queue = new TextRenderable6(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",
@@ -4220,21 +4689,49 @@ var NativeFrontend = class {
     this.suggestions.onActivate = () => this.acceptSuggestion();
     this.suggestions.on("itemSelected", () => this.acceptSuggestion());
     this.root.add(this.suggestions);
-    this.status = new BoxRenderable5(renderer2, { id: "omnius-live-status", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 2, visible: false });
+    this.status = new BoxRenderable7(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 BoxRenderable5(renderer2, {
+    this.footer = new BoxRenderable7(renderer2, {
       id: "omnius-input-box",
       width: "100%",
       flexShrink: 0,
-      border: ["top"],
-      borderStyle: "single",
+      border: [],
       borderColor: colors.border,
       flexDirection: "column"
     });
     this.root.add(this.footer);
-    const inputRow = new BoxRenderable5(renderer2, { id: "omnius-input-row", width: "100%", flexDirection: "row", gap: 1 });
+    this.footerRule = new BoxRenderable7(renderer2, {
+      id: "omnius-input-rule",
+      width: "100%",
+      height: 1,
+      minHeight: 1,
+      maxHeight: 1,
+      flexShrink: 0,
+      flexDirection: "row",
+      paddingLeft: 2,
+      shouldFill: false
+    });
+    this.footer.add(this.footerRule);
+    this.tabs = new NativeTabStrip(renderer2, {
+      id: "omnius-agent-tabs",
+      prefix: "agent",
+      colors,
+      activate: (id) => this.emitAction("view", id)
+    });
+    this.tabs.flexGrow = 0;
+    this.tabs.flexShrink = 0;
+    this.tabs.visible = false;
+    this.footerRule.add(this.tabs);
+    this.footerRule.renderBefore = (buffer) => {
+      buffer.drawText(formatSignalDivider(this.footerRule.width, {
+        direction: "bottom",
+        leftTextEnd: this.tabs.visible ? this.tabs.x - this.footerRule.x + this.tabs.width : 0,
+        sidebarColumn: this.instrumentDivider.visible && this.instruments.visible ? this.instrumentDivider.x - this.footerRule.x : void 0
+      }), this.footerRule.x, this.footerRule.y, this.context.colors.foreground, this.context.colors.background, TextAttributes8.DIM);
+    };
+    const inputRow = new BoxRenderable7(renderer2, { id: "omnius-input-row", width: "100%", flexDirection: "row", gap: 1 });
     this.footer.add(inputRow);
-    this.prompt = new TextRenderable4(renderer2, { id: "omnius-prompt", content: "❯", fg: colors.accent, wrapMode: "none", selectable: false, flexShrink: 0 });
+    this.prompt = new TextRenderable6(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",
@@ -4254,14 +4751,14 @@ var NativeFrontend = class {
       onCursorChange: () => this.editorChanged(),
       onSubmit: () => this.submit()
     });
-    this.vimMode = new TextRenderable4(renderer2, {
+    this.vimMode = new TextRenderable6(renderer2, {
       id: "omnius-vim-mode",
       content: "INSERT",
       height: 1,
       maxWidth: 12,
       flexShrink: 0,
       fg: colors.foreground,
-      attributes: TextAttributes6.DIM,
+      attributes: TextAttributes8.DIM,
       wrapMode: "none",
       truncate: true,
       visible: false,
@@ -4275,31 +4772,42 @@ var NativeFrontend = class {
       this.renderer.requestRender();
     });
     inputRow.add(this.editor);
-    this.enhance = new BoxRenderable5(renderer2, { id: "omnius-enhance", flexDirection: "row", gap: 1, flexShrink: 0, visible: false });
+    this.enhance = new BoxRenderable7(renderer2, { id: "omnius-enhance", flexDirection: "row", gap: 1, flexShrink: 0, visible: false });
     inputRow.add(this.enhance);
-    this.activity = new TextRenderable4(renderer2, { id: "omnius-activity", content: "", flexGrow: 1, minWidth: 0, height: 1, wrapMode: "none", truncate: true, visible: false, fg: colors.accent });
+    this.activity = new TextRenderable6(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 BoxRenderable5(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 = new BoxRenderable7(renderer2, { id: "omnius-media", height: 1, minWidth: 0, flexShrink: 1, flexDirection: "row", gap: 1, visible: false });
+    this.mediaText = new TextRenderable6(renderer2, { id: "omnius-media-text", content: "", flexGrow: 1, minWidth: 0, wrapMode: "none", truncate: true, fg: colors.accent });
     this.media.add(this.mediaText);
-    this.micTrack = new TextRenderable4(renderer2, { id: "omnius-mic-meter", width: 12, height: 1, flexShrink: 0, fg: colors.foreground, visible: false });
+    this.micTrack = new TextRenderable6(renderer2, { id: "omnius-mic-meter", width: 12, height: 1, flexShrink: 0, fg: colors.foreground, visible: false });
     this.media.add(this.micTrack);
     this.status.add(this.media);
-    this.metricsRow = new BoxRenderable5(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.copyFeedback = new TextRenderable6(renderer2, {
+      id: "omnius-copy-feedback",
+      content: "",
+      height: 1,
+      flexShrink: 0,
+      fg: colors.foreground,
+      attributes: TextAttributes8.DIM,
+      selectable: false,
+      visible: false
+    });
+    this.status.add(this.copyFeedback);
+    this.metricsRow = new BoxRenderable7(renderer2, { id: "omnius-metrics-row", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 1 });
+    this.keyHints = new TextRenderable6(renderer2, { id: "omnius-key-hints", content: "F1 HELP  TAB FOCUS", height: 1, flexShrink: 0, attributes: TextAttributes8.DIM, fg: colors.foreground, selectable: false });
     this.metricsRow.add(this.keyHints);
-    this.metricsStartActions = new BoxRenderable5(renderer2, { id: "omnius-metrics-start-actions", flexDirection: "row", gap: 1, flexShrink: 0 });
+    this.metricsStartActions = new BoxRenderable7(renderer2, { id: "omnius-metrics-start-actions", flexDirection: "row", gap: 1, flexShrink: 0 });
     this.metricsRow.add(this.metricsStartActions);
-    this.metrics = new TextRenderable4(renderer2, { id: "omnius-metrics", content: "", height: 1, wrapMode: "none", truncate: true, fg: colors.dim, flexShrink: 1, flexGrow: 1, minWidth: 0 });
+    this.metrics = new TextRenderable6(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 BoxRenderable5(renderer2, { id: "omnius-metrics-end-actions", flexDirection: "row", gap: 1, flexShrink: 0 });
+    this.metricsEndActions = new BoxRenderable7(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(CliRenderEvents3.FRAME, this.onFrame);
-    renderer2.on(CliRenderEvents3.RESIZE, this.onResize);
+    renderer2.on(CliRenderEvents5.FRAME, this.onFrame);
+    renderer2.on(CliRenderEvents5.RESIZE, this.onResize);
     this.applyTheme(initialTheme);
     this.editor.focus();
   }
@@ -4312,12 +4820,16 @@ var NativeFrontend = class {
   content;
   modals;
   context;
+  selectionMenu;
   header;
   identity;
   headerActions;
   headerPanel;
   routeWarning;
   tabs;
+  sessionRow;
+  sessions;
+  newSession;
   taskPane;
   tasks;
   body;
@@ -4329,6 +4841,7 @@ var NativeFrontend = class {
   queue;
   suggestions;
   footer;
+  footerRule;
   prompt;
   vimMode;
   enhance;
@@ -4343,10 +4856,11 @@ var NativeFrontend = class {
   mediaText;
   micTrack;
   clipboard;
+  copyFeedback;
+  copyFeedbackTimer;
   state;
   themeSignature = "";
   headerSignature = "";
-  tabsSignature = "";
   suggestionSignature = "";
   metricsActionsSignature = "";
   changing = false;
@@ -4374,8 +4888,8 @@ var NativeFrontend = class {
   selectionArmed = false;
   update(state, patch) {
     const inputWasEnabled = this.state?.input.enabled;
-    const previousView = this.state ? `${this.state.activeViewId}:${this.state.presentation ?? "stack"}` : void 0;
-    const currentView = `${state.activeViewId}:${state.presentation ?? "stack"}`;
+    const previousView = this.state ? `${this.state.sessions?.activeId ?? ""}:${this.state.activeViewId}:${this.state.presentation ?? "stack"}` : void 0;
+    const currentView = `${state.sessions?.activeId ?? ""}:${state.activeViewId}:${state.presentation ?? "stack"}`;
     const viewChanged = previousView !== void 0 && previousView !== currentView;
     if (viewChanged) {
       this.viewScroll.set(previousView, { top: this.scroll.scrollTop, live: this.offset === 0 });
@@ -4401,14 +4915,13 @@ var NativeFrontend = class {
       }
       this.routeWarning.content = state.routeWarning ? `! ${state.routeWarning}` : "";
       this.routeWarning.visible = Boolean(state.routeWarning);
-      const tabsSignature = JSON.stringify(state.tabs);
-      if (tabsSignature !== this.tabsSignature) {
-        this.tabsSignature = tabsSignature;
-        this.tabs.setOptions(state.tabs.map((tab) => ({ name: fitInstrumentText(plainText(tab.label), this.tabs.getTabWidth() - 2), description: "", value: tab.id })));
-      }
-      this.tabs.visible = state.tabs.length > 1;
-      const activeTab = state.tabs.findIndex((tab) => tab.id === state.activeViewId);
-      if (activeTab >= 0 && activeTab !== this.tabs.getSelectedIndex()) this.tabs.setSelectedIndex(activeTab);
+      this.tabs.update(state.tabs, state.activeViewId);
+      this.tabs.visible = state.tabs.some((tab) => tab.id !== "main");
+      this.sessionRow.visible = Boolean(state.sessions);
+      this.sessions.update(state.sessions?.items ?? [], state.sessions?.activeId ?? "", state.sessions?.busy);
+      this.newSession.focusable = !state.sessions?.busy;
+      if (state.sessions?.busy && this.newSession.focused) this.getRenderable(`session:${state.sessions.activeId}`)?.focus();
+      this.newSession.attributes = state.sessions?.busy ? TextAttributes8.DIM : this.newSession.focused ? TextAttributes8.INVERSE : 0;
       this.tasks.replace(state.tasks);
       this.taskPane.visible = state.tasks.length > 0;
       if (patch) {
@@ -4430,7 +4943,7 @@ var NativeFrontend = class {
       this.prompt.content = styledText(state.prompt.trimEnd() || "❯");
       if (!this.editorInitialized) {
         this.editor.setText(state.input.text);
-        this.editor.cursorOffset = Math.max(0, Math.min(state.input.text.length, state.input.cursor));
+        this.placeInputCursor(state.input.text, state.input.cursor);
         this.editorInitialized = true;
       }
       this.editor.focusable = state.input.enabled && !this.paused;
@@ -4439,6 +4952,7 @@ var NativeFrontend = class {
       this.metrics.visible = state.metricsVisible;
       this.instruments.update(state);
       this.layoutInstruments();
+      this.layoutTabStrips();
       const metricsActions = JSON.stringify(state.metricsActions ?? []);
       if (metricsActions !== this.metricsActionsSignature) {
         this.metricsActionsSignature = metricsActions;
@@ -4461,8 +4975,8 @@ var NativeFrontend = class {
     for (const child of [...parent.getChildren()]) child.destroy();
     for (const action of actions) {
       const colors = this.context.colors;
-      const attributes = action.disabled ? TextAttributes6.DIM : action.active ? TextAttributes6.BOLD | TextAttributes6.UNDERLINE : 0;
-      const button = new TextRenderable4(this.renderer, {
+      const attributes = action.disabled ? TextAttributes8.DIM : action.active ? TextAttributes8.BOLD | TextAttributes8.UNDERLINE : 0;
+      const button = new TextRenderable6(this.renderer, {
         id: `${prefix}:${action.id}`,
         content: styledText(action.label),
         flexShrink: 0,
@@ -4485,16 +4999,16 @@ var NativeFrontend = class {
       button.focusable = !action.disabled;
       if (!action.disabled) {
         button.on("focused", () => {
-          button.attributes = attributes | TextAttributes6.INVERSE;
+          button.attributes = attributes | TextAttributes8.INVERSE;
         });
         button.on("blurred", () => {
           button.attributes = attributes;
         });
         button.onMouseOver = () => {
-          button.attributes = attributes | TextAttributes6.UNDERLINE | (button.focused ? TextAttributes6.INVERSE : 0);
+          button.attributes = attributes | TextAttributes8.UNDERLINE | (button.focused ? TextAttributes8.INVERSE : 0);
         };
         button.onMouseOut = () => {
-          button.attributes = attributes | (button.focused ? TextAttributes6.INVERSE : 0);
+          button.attributes = attributes | (button.focused ? TextAttributes8.INVERSE : 0);
         };
       }
       parent.add(button);
@@ -4513,12 +5027,12 @@ var NativeFrontend = class {
     const reading = activity?.label || stage || this.state?.instruments?.runtimeStatus || "";
     this.activity.visible = Boolean(activity?.processing || reading);
     this.activity.content = `${activity?.processing ? "RUN · " : ""}${reading}`;
-    this.status.visible = this.activity.visible || this.media.visible;
+    this.status.visible = this.activity.visible || this.media.visible || this.copyFeedback.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;
+    this.status.visible = this.activity.visible || this.media.visible || this.copyFeedback.visible;
     if (!media) return;
     this.mediaText.content = [
       media.recording ? "● REC" : void 0,
@@ -4556,10 +5070,10 @@ var NativeFrontend = class {
     this.editor.backgroundColor = this.editor.focusedBackgroundColor = colors.background;
     this.editor.textColor = this.editor.focusedTextColor = colors.foreground;
     this.editor.editorView.setSelectionColors(void 0, void 0);
-    this.tabs.backgroundColor = this.tabs.focusedBackgroundColor = colors.background;
-    this.tabs.textColor = colors.dim;
-    this.tabs.selectedTextColor = colors.foreground;
-    this.tabs.selectedBackgroundColor = colors.selection;
+    this.tabs.applyTheme(colors);
+    this.sessions.applyTheme(colors);
+    this.newSession.fg = colors.foreground;
+    this.newSession.bg = colors.background;
     this.suggestions.backgroundColor = this.suggestions.focusedBackgroundColor = colors.background;
     this.suggestions.textColor = colors.dim;
     this.suggestions.selectedTextColor = colors.foreground;
@@ -4569,6 +5083,8 @@ var NativeFrontend = class {
     this.instruments.applyTheme(colors);
     this.instrumentDivider.fg = colors.foreground;
     this.instrumentDivider.bg = colors.background;
+    this.copyFeedback.fg = colors.foreground;
+    this.selectionMenu.applyTheme(colors);
     this.content.applyTheme();
     this.tasks.applyTheme();
     this.modals?.applyTheme();
@@ -4669,6 +5185,7 @@ var NativeFrontend = class {
     }
     const height = Math.max(1, Math.min(8, this.editor.editorView.getTotalVirtualLineCount(), this.renderer.terminalHeight - 8));
     if (height !== this.editor.height) this.editor.height = height;
+    this.layoutTabStrips();
     const offset = this.offset;
     if (offset === 0) this.newEntries = 0;
     this.liveButton.visible = offset > 0;
@@ -4683,8 +5200,16 @@ var NativeFrontend = class {
   };
   onResize = () => {
     this.layoutInstruments();
+    this.layoutTabStrips();
     this.emit({ type: "resize", columns: this.renderer.terminalWidth, rows: this.renderer.terminalHeight });
   };
+  layoutTabStrips() {
+    const width = this.renderer.terminalWidth;
+    const junction = this.instrumentDivider.visible && this.instruments.visible ? this.instrumentDivider.x : width - 3;
+    const available = Math.max(0, junction - 6);
+    const desired = Math.min(this.tabs.naturalWidth, available);
+    if (this.tabs.width !== desired) this.tabs.width = desired;
+  }
   editorChanged() {
     if (!this.editor || this.changing || this.destroyed || this.inputEventPending) return;
     this.inputEventPending = true;
@@ -4698,7 +5223,7 @@ var NativeFrontend = class {
   }
   flushLatestInput() {
     const text = this.editor.plainText;
-    const cursor = this.editor.cursorOffset;
+    const cursor = this.inputCursor();
     if (text === this.lastInput && cursor === this.lastCursor) return;
     this.lastInput = text;
     this.lastCursor = cursor;
@@ -4741,10 +5266,17 @@ var NativeFrontend = class {
   }
   setInput(text, cursor = text.length) {
     this.editor.replaceText(text);
-    this.editor.cursorOffset = Math.max(0, Math.min(text.length, cursor));
+    this.placeInputCursor(text, cursor);
     this.editorInitialized = true;
     this.editorChanged();
   }
+  inputCursor() {
+    return this.editor.getTextRange(0, this.editor.cursorOffset).length;
+  }
+  placeInputCursor(text, cursor) {
+    const index = Math.max(0, Math.min(text.length, cursor));
+    this.editor.cursorOffset = this.editor.editBuffer.measureText(text.slice(0, index));
+  }
   shortcut(name, key) {
     this.flushLatestInput();
     this.emit({ type: "shortcut", name });
@@ -4756,6 +5288,10 @@ var NativeFrontend = class {
     this.emit({ type: "action", action, ...id === void 0 ? {} : { id } });
   }
   onKey = (key) => {
+    if (this.selectionMenu.active) {
+      this.selectionMenu.handleKey(key);
+      return;
+    }
     if (this.modals.active) {
       this.modals.active.handleKey(key);
       return;
@@ -4908,7 +5444,7 @@ var NativeFrontend = class {
     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);
+      if (node.focusable && node !== this.scroll && !(node instanceof ScrollBoxRenderable5) && node.height > 0 && node.width > 0) targets.push(node);
       for (const child of node.getChildren()) visit(child);
     };
     visit(this.root);
@@ -4927,6 +5463,10 @@ var NativeFrontend = class {
     }
   }
   onPaste = (event) => {
+    if (this.selectionMenu.active) {
+      event.preventDefault();
+      return;
+    }
     if (this.modals.active) {
       this.modals.active.handlePaste(event);
       return;
@@ -4943,8 +5483,27 @@ var NativeFrontend = class {
     else if (!this.paused && this.state?.input.enabled !== false) this.editor.focus();
   }
   async copy(text) {
-    const value = text ?? this.renderer.getSelection()?.getSelectedText() ?? this.editor.getSelectedText();
-    if (value) await this.clipboard.writeText(value, { destination: "best-available" });
+    const value = text ?? (this.renderer.getSelection()?.getSelectedText() || this.editor.getSelectedText());
+    if (!value) return;
+    let message;
+    try {
+      const result = await this.clipboard.writeText(value, { destination: "best-available" });
+      message = result.host.status === "written" ? "COPIED" : result.terminal.status === "attempted" ? "COPY SENT TO TERMINAL" : "COPY UNAVAILABLE";
+    } catch {
+      message = "COPY FAILED";
+    }
+    if (this.destroyed) return;
+    if (this.copyFeedbackTimer) clearTimeout(this.copyFeedbackTimer);
+    this.copyFeedback.content = message;
+    this.copyFeedback.visible = true;
+    this.status.visible = true;
+    this.renderer.requestRender();
+    this.copyFeedbackTimer = setTimeout(() => {
+      this.copyFeedbackTimer = void 0;
+      this.copyFeedback.visible = false;
+      this.status.visible = this.activity.visible || this.media.visible;
+      this.renderer.requestRender();
+    }, 3e3);
   }
   async paste() {
     const result = await this.clipboard.read({ preferredTypes: ["text/plain;charset=utf-8", "text/plain"] });
@@ -4967,7 +5526,7 @@ var NativeFrontend = class {
         break;
       }
       case "input":
-        if (command2.expectedText !== void 0 && command2.expectedText !== this.editor.plainText || command2.expectedCursor !== void 0 && command2.expectedCursor !== this.editor.cursorOffset) {
+        if (command2.expectedText !== void 0 && command2.expectedText !== this.editor.plainText || command2.expectedCursor !== void 0 && command2.expectedCursor !== this.inputCursor()) {
           this.flushLatestInput();
         } else this.setInput(command2.text, command2.cursor);
         break;
@@ -4988,6 +5547,7 @@ var NativeFrontend = class {
         this.renderer.setTerminalTitle(command2.text);
         break;
       case "modal-open":
+        this.selectionMenu.close();
         this.modals.open(command2.modal);
         break;
       case "modal-update":
@@ -5071,11 +5631,13 @@ var NativeFrontend = class {
   async dispose() {
     if (this.destroyed) return;
     this.destroyed = true;
+    if (this.copyFeedbackTimer) clearTimeout(this.copyFeedbackTimer);
+    this.selectionMenu.destroy();
     this.disposeSelectionContrast();
     this.renderer.keyInput.off("keypress", this.onKey);
     this.renderer.keyInput.off("paste", this.onPaste);
-    this.renderer.off(CliRenderEvents3.FRAME, this.onFrame);
-    this.renderer.off(CliRenderEvents3.RESIZE, this.onResize);
+    this.renderer.off(CliRenderEvents5.FRAME, this.onFrame);
+    this.renderer.off(CliRenderEvents5.RESIZE, this.onResize);
     this.modals.destroy();
     this.content.destroy();
     this.tasks.destroy();
@@ -5086,7 +5648,7 @@ var NativeFrontend = class {
 };
 
 // packages/cli/src/tui/native/components/cursor.ts
-import { CliRenderEvents as CliRenderEvents4 } from "@opentui/core";
+import { CliRenderEvents as CliRenderEvents6 } from "@opentui/core";
 function installTerminalCursorDefaults(renderer2, session) {
   const reset = new TextEncoder().encode("\x1B]112\x07");
   let disposed = false;
@@ -5136,11 +5698,11 @@ function installTerminalCursorDefaults(renderer2, session) {
   const dispose = () => {
     if (disposed) return;
     disposed = true;
-    renderer2.off(CliRenderEvents4.FRAME, afterFrame);
-    renderer2.off(CliRenderEvents4.DESTROY, dispose);
+    renderer2.off(CliRenderEvents6.FRAME, afterFrame);
+    renderer2.off(CliRenderEvents6.DESTROY, dispose);
   };
-  renderer2.on(CliRenderEvents4.FRAME, afterFrame);
-  renderer2.once(CliRenderEvents4.DESTROY, dispose);
+  renderer2.on(CliRenderEvents6.FRAME, afterFrame);
+  renderer2.once(CliRenderEvents6.DESTROY, dispose);
   return { restore, dispose };
 }
 
@@ -5216,10 +5778,10 @@ try {
     maxFps: 60,
     clearOnShutdown: false
   });
-  renderer.on(CliRenderEvents5.RENDER_ERROR, (event) => {
+  renderer.on(CliRenderEvents7.RENDER_ERROR, (event) => {
     void fail(event.error);
   });
-  renderer.on(CliRenderEvents5.HANDLER_ERROR, (event) => {
+  renderer.on(CliRenderEvents7.HANDLER_ERROR, (event) => {
     void fail(event.error);
   });
   renderer.on("error", (event) => {