omnius 1.0.865 → 1.0.867

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 CliRenderEvents6, 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 BoxRenderable6,
-  CliRenderEvents as CliRenderEvents4,
+  BoxRenderable as BoxRenderable7,
+  CliRenderEvents as CliRenderEvents5,
   EmbeddedTerminalRenderable as EmbeddedTerminalRenderable2,
-  ScrollBoxRenderable as ScrollBoxRenderable4,
+  ScrollBoxRenderable as ScrollBoxRenderable5,
   SyntaxStyle as SyntaxStyle2,
-  TabSelectRenderable,
   TextareaRenderable as TextareaRenderable2,
-  TextRenderable as TextRenderable5,
-  TextAttributes as TextAttributes7,
+  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 {
@@ -1781,12 +1782,11 @@ function terminalCellWidth(value) {
 
 // packages/cli/src/tui/native/components/instrument-format.ts
 var graphemes2 = new Intl.Segmenter(void 0, { granularity: "grapheme" });
-function formatSignalDivider(width) {
+function formatSignalDivider(width, geometry = { direction: "top" }) {
   const cells = Math.max(0, Math.floor(width));
-  if (cells < 32) return "─".repeat(cells);
-  const plateau = Math.min(12, Math.max(6, Math.floor(cells / 8)));
-  const left = Math.floor((cells - plateau - 2) / 2);
-  return "▁".repeat(left) + "╱" + "▔".repeat(plateau) + "╲" + "▁".repeat(cells - left - plateau - 2);
+  const column = Math.floor(geometry.sidebarColumn ?? -1);
+  if (!Number.isFinite(column) || column < 0 || column >= cells) return "─".repeat(cells);
+  return "─".repeat(column) + (geometry.direction === "top" ? "┬" : "┴") + "─".repeat(cells - column - 1);
 }
 function fitInstrumentText(value, cells, marker = "~") {
   const text = stripTerminalSequences(normalizeTerminalLine(value));
@@ -4206,6 +4206,180 @@ var NativeSelectionMenu = class {
   }
 };
 
+// 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 = ` ${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 {
@@ -4219,7 +4393,7 @@ var NativeFrontend = class {
     this.selectionMenu = new NativeSelectionMenu(renderer2, colors, (text) => {
       void this.copy(text);
     }, () => this.restoreFocus());
-    this.root = new BoxRenderable6(renderer2, {
+    this.root = new BoxRenderable7(renderer2, {
       id: "omnius-native",
       width: "100%",
       height: "100%",
@@ -4227,7 +4401,7 @@ var NativeFrontend = class {
       backgroundColor: colors.background
     });
     renderer2.root.add(this.root);
-    this.header = new BoxRenderable6(renderer2, {
+    this.header = new BoxRenderable7(renderer2, {
       id: "omnius-header",
       width: "100%",
       minWidth: 0,
@@ -4240,17 +4414,20 @@ var NativeFrontend = class {
     this.root.add(this.header);
     this.header.renderAfter = (buffer) => {
       if (this.header.height > 0) buffer.drawText(
-        formatSignalDivider(this.header.width),
+        formatSignalDivider(this.header.width, {
+          direction: "top",
+          sidebarColumn: this.instrumentDivider.visible ? this.instrumentDivider.x - this.header.x : void 0
+        }),
         this.header.x,
         this.header.y + this.header.height - 1,
         this.context.colors.foreground,
         this.context.colors.background,
-        TextAttributes7.DIM
+        TextAttributes8.DIM
       );
     };
-    const headerRow = new BoxRenderable6(renderer2, { id: "omnius-header-row", width: "100%", minWidth: 0, minHeight: 1, flexDirection: "row", gap: 1 });
+    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 TextRenderable5(renderer2, {
+    this.identity = new TextRenderable6(renderer2, {
       id: "omnius-identity",
       content: "Omnius",
       fg: colors.foreground,
@@ -4260,7 +4437,7 @@ var NativeFrontend = class {
       truncate: true,
       minWidth: 18,
       selectable: false,
-      attributes: TextAttributes7.BOLD,
+      attributes: TextAttributes8.BOLD,
       onMouseDown: (event) => {
         if (event.button === 0) {
           this.toggleHeaderPanel();
@@ -4275,7 +4452,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,
@@ -4288,16 +4465,16 @@ var NativeFrontend = class {
       verticalScrollbarOptions: { visible: false }
     });
     headerRow.add(this.headerActions);
-    this.headerPanel = new TextRenderable5(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 TextRenderable5(renderer2, {
+    this.detailButton = new TextRenderable6(renderer2, {
       id: "omnius-details-toggle",
       content: "+ DETAILS",
       height: 1,
       width: 9,
       flexShrink: 0,
       fg: colors.foreground,
-      attributes: TextAttributes7.DIM,
+      attributes: TextAttributes8.DIM,
       selectable: false,
       onMouseDown: (event) => {
         if (event.button === 0) {
@@ -4317,60 +4494,67 @@ var NativeFrontend = class {
     for (const control of [this.identity, this.detailButton]) {
       const attributes = control.attributes;
       control.on("focused", () => {
-        control.attributes = attributes | TextAttributes7.INVERSE;
+        control.attributes = attributes | TextAttributes8.INVERSE;
       });
       control.on("blurred", () => {
         control.attributes = attributes;
       });
     }
-    this.routeWarning = new TextRenderable5(renderer2, { id: "omnius-route-warning", content: "", width: "100%", wrapMode: "word", fg: colors.warning, attributes: TextAttributes7.BOLD | TextAttributes7.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, TextAttributes7.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 BoxRenderable6(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 BoxRenderable6(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,
@@ -4443,7 +4627,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 BoxRenderable6(renderer2, {
+    this.embeddedPane = new BoxRenderable7(renderer2, {
       id: "omnius-editor-pane",
       width: "50%",
       flexShrink: 0,
@@ -4454,7 +4638,7 @@ var NativeFrontend = class {
       visible: false
     });
     this.body.add(this.embeddedPane);
-    this.liveButton = new TextRenderable5(renderer2, {
+    this.liveButton = new TextRenderable6(renderer2, {
       id: "omnius-live-button",
       content: "↓ Live",
       width: "100%",
@@ -4477,7 +4661,7 @@ var NativeFrontend = class {
     });
     this.liveButton.focusable = true;
     this.root.add(this.liveButton);
-    this.queue = new TextRenderable5(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",
@@ -4496,31 +4680,48 @@ var NativeFrontend = class {
     this.suggestions.onActivate = () => this.acceptSuggestion();
     this.suggestions.on("itemSelected", () => this.acceptSuggestion());
     this.root.add(this.suggestions);
-    this.status = new BoxRenderable6(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 BoxRenderable6(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);
-    this.footer.renderAfter = (buffer) => {
-      if (this.footer.height > 0) buffer.drawText(
-        formatSignalDivider(this.footer.width),
-        this.footer.x,
-        this.footer.y,
-        this.context.colors.foreground,
-        this.context.colors.background,
-        TextAttributes7.DIM
-      );
+    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",
+        sidebarColumn: this.instrumentDivider.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 BoxRenderable6(renderer2, { id: "omnius-input-row", width: "100%", flexDirection: "row", gap: 1 });
+    const inputRow = new BoxRenderable7(renderer2, { id: "omnius-input-row", width: "100%", flexDirection: "row", gap: 1 });
     this.footer.add(inputRow);
-    this.prompt = new TextRenderable5(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",
@@ -4540,14 +4741,14 @@ var NativeFrontend = class {
       onCursorChange: () => this.editorChanged(),
       onSubmit: () => this.submit()
     });
-    this.vimMode = new TextRenderable5(renderer2, {
+    this.vimMode = new TextRenderable6(renderer2, {
       id: "omnius-vim-mode",
       content: "INSERT",
       height: 1,
       maxWidth: 12,
       flexShrink: 0,
       fg: colors.foreground,
-      attributes: TextAttributes7.DIM,
+      attributes: TextAttributes8.DIM,
       wrapMode: "none",
       truncate: true,
       visible: false,
@@ -4561,42 +4762,42 @@ var NativeFrontend = class {
       this.renderer.requestRender();
     });
     inputRow.add(this.editor);
-    this.enhance = new BoxRenderable6(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 TextRenderable5(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 BoxRenderable6(renderer2, { id: "omnius-media", height: 1, minWidth: 0, flexShrink: 1, flexDirection: "row", gap: 1, visible: false });
-    this.mediaText = new TextRenderable5(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 TextRenderable5(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.copyFeedback = new TextRenderable5(renderer2, {
+    this.copyFeedback = new TextRenderable6(renderer2, {
       id: "omnius-copy-feedback",
       content: "",
       height: 1,
       flexShrink: 0,
       fg: colors.foreground,
-      attributes: TextAttributes7.DIM,
+      attributes: TextAttributes8.DIM,
       selectable: false,
       visible: false
     });
     this.status.add(this.copyFeedback);
-    this.metricsRow = new BoxRenderable6(renderer2, { id: "omnius-metrics-row", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 1 });
-    this.keyHints = new TextRenderable5(renderer2, { id: "omnius-key-hints", content: "F1 HELP  TAB FOCUS", height: 1, flexShrink: 0, attributes: TextAttributes7.DIM, fg: colors.foreground, selectable: false });
+    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 BoxRenderable6(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 TextRenderable5(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 BoxRenderable6(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(CliRenderEvents4.FRAME, this.onFrame);
-    renderer2.on(CliRenderEvents4.RESIZE, this.onResize);
+    renderer2.on(CliRenderEvents5.FRAME, this.onFrame);
+    renderer2.on(CliRenderEvents5.RESIZE, this.onResize);
     this.applyTheme(initialTheme);
     this.editor.focus();
   }
@@ -4616,6 +4817,9 @@ var NativeFrontend = class {
   headerPanel;
   routeWarning;
   tabs;
+  sessionRow;
+  sessions;
+  newSession;
   taskPane;
   tasks;
   body;
@@ -4627,6 +4831,7 @@ var NativeFrontend = class {
   queue;
   suggestions;
   footer;
+  footerRule;
   prompt;
   vimMode;
   enhance;
@@ -4646,7 +4851,6 @@ var NativeFrontend = class {
   state;
   themeSignature = "";
   headerSignature = "";
-  tabsSignature = "";
   suggestionSignature = "";
   metricsActionsSignature = "";
   changing = false;
@@ -4674,8 +4878,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 });
@@ -4701,14 +4905,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) {
@@ -4730,7 +4933,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;
@@ -4739,6 +4942,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;
@@ -4761,8 +4965,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 ? TextAttributes7.DIM : action.active ? TextAttributes7.BOLD | TextAttributes7.UNDERLINE : 0;
-      const button = new TextRenderable5(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,
@@ -4785,16 +4989,16 @@ var NativeFrontend = class {
       button.focusable = !action.disabled;
       if (!action.disabled) {
         button.on("focused", () => {
-          button.attributes = attributes | TextAttributes7.INVERSE;
+          button.attributes = attributes | TextAttributes8.INVERSE;
         });
         button.on("blurred", () => {
           button.attributes = attributes;
         });
         button.onMouseOver = () => {
-          button.attributes = attributes | TextAttributes7.UNDERLINE | (button.focused ? TextAttributes7.INVERSE : 0);
+          button.attributes = attributes | TextAttributes8.UNDERLINE | (button.focused ? TextAttributes8.INVERSE : 0);
         };
         button.onMouseOut = () => {
-          button.attributes = attributes | (button.focused ? TextAttributes7.INVERSE : 0);
+          button.attributes = attributes | (button.focused ? TextAttributes8.INVERSE : 0);
         };
       }
       parent.add(button);
@@ -4856,10 +5060,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;
@@ -4971,6 +5175,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;
@@ -4985,8 +5190,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;
@@ -5000,7 +5213,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;
@@ -5043,10 +5256,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 });
@@ -5214,7 +5434,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);
@@ -5296,7 +5516,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;
@@ -5406,8 +5626,8 @@ var NativeFrontend = class {
     this.disposeSelectionContrast();
     this.renderer.keyInput.off("keypress", this.onKey);
     this.renderer.keyInput.off("paste", this.onPaste);
-    this.renderer.off(CliRenderEvents4.FRAME, this.onFrame);
-    this.renderer.off(CliRenderEvents4.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();
@@ -5418,7 +5638,7 @@ var NativeFrontend = class {
 };
 
 // packages/cli/src/tui/native/components/cursor.ts
-import { CliRenderEvents as CliRenderEvents5 } 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;
@@ -5468,11 +5688,11 @@ function installTerminalCursorDefaults(renderer2, session) {
   const dispose = () => {
     if (disposed) return;
     disposed = true;
-    renderer2.off(CliRenderEvents5.FRAME, afterFrame);
-    renderer2.off(CliRenderEvents5.DESTROY, dispose);
+    renderer2.off(CliRenderEvents6.FRAME, afterFrame);
+    renderer2.off(CliRenderEvents6.DESTROY, dispose);
   };
-  renderer2.on(CliRenderEvents5.FRAME, afterFrame);
-  renderer2.once(CliRenderEvents5.DESTROY, dispose);
+  renderer2.on(CliRenderEvents6.FRAME, afterFrame);
+  renderer2.once(CliRenderEvents6.DESTROY, dispose);
   return { restore, dispose };
 }
 
@@ -5548,10 +5768,10 @@ try {
     maxFps: 60,
     clearOnShutdown: false
   });
-  renderer.on(CliRenderEvents6.RENDER_ERROR, (event) => {
+  renderer.on(CliRenderEvents7.RENDER_ERROR, (event) => {
     void fail(event.error);
   });
-  renderer.on(CliRenderEvents6.HANDLER_ERROR, (event) => {
+  renderer.on(CliRenderEvents7.HANDLER_ERROR, (event) => {
     void fail(event.error);
   });
   renderer.on("error", (event) => {