omnius 1.0.867 → 1.0.869

package/dist/tui/native/worker.js

@@ -6,29 +6,71 @@ import { CliRenderEvents as CliRenderEvents7, NativeSession, RGBA as RGBA3, crea
 
 // packages/cli/src/tui/native/components/frontend.ts
 import {
-  BoxRenderable as BoxRenderable7,
+  BoxRenderable as BoxRenderable8,
   CliRenderEvents as CliRenderEvents5,
   EmbeddedTerminalRenderable as EmbeddedTerminalRenderable2,
   ScrollBoxRenderable as ScrollBoxRenderable5,
   SyntaxStyle as SyntaxStyle2,
   TextareaRenderable as TextareaRenderable2,
-  TextRenderable as TextRenderable6,
+  TextRenderable as TextRenderable7,
   TextAttributes as TextAttributes8,
   createClipboard,
   createHostClipboard,
   createRendererClipboardAdapter
 } from "@opentui/core";
 
+// packages/cli/src/tui/native/interface-state.ts
+var record = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+var offset = (value) => typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.min(1e7, Math.floor(value))) : 0;
+function sanitizeNativeInterfaceState(value) {
+  if (!record(value) || value.version !== 1 || typeof value.activeViewId !== "string" || !record(value.input)) return void 0;
+  if (typeof value.input.text !== "string") return void 0;
+  const text = value.input.text.slice(0, 1e6), views = {};
+  if (record(value.views)) for (const [key, entry] of Object.entries(value.views).slice(0, 256)) {
+    if (key.length > 1024 || !record(entry)) continue;
+    const disclosures = {};
+    if (record(entry.disclosures)) for (const [id, collapsed] of Object.entries(entry.disclosures).slice(0, 1e4)) {
+      if (id.length <= 1024 && typeof collapsed === "boolean") Object.defineProperty(disclosures, id, { value: collapsed, enumerable: true, configurable: true, writable: true });
+    }
+    Object.defineProperty(views, key, { value: { top: offset(entry.top), live: entry.live === true, disclosures }, enumerable: true, configurable: true, writable: true });
+  }
+  const layout = record(value.layout) ? value.layout : {}, instruments = record(value.instruments) ? value.instruments : {}, tabs = record(value.tabs) ? value.tabs : {};
+  return {
+    version: 1,
+    ...typeof value.sessionId === "string" ? { sessionId: value.sessionId.slice(0, 1024) } : {},
+    activeViewId: value.activeViewId.slice(0, 1024),
+    ...typeof value.focusId === "string" && value.focusId.length <= 4096 && !value.focusId.startsWith("modal-") ? { focusId: value.focusId } : {},
+    presentation: value.presentation === "tree" ? "tree" : "stack",
+    input: { text, cursor: Math.min(text.length, offset(value.input.cursor)) },
+    views,
+    layout: {
+      ...typeof layout.sidebarWidth === "number" && Number.isFinite(layout.sidebarWidth) ? { sidebarWidth: Math.max(24, Math.min(1e4, Math.floor(layout.sidebarWidth))) } : {},
+      ...typeof layout.detailsOpen === "boolean" ? { detailsOpen: layout.detailsOpen } : {},
+      narrowDetailsOpen: layout.narrowDetailsOpen === true,
+      headerPanelCollapsed: layout.headerPanelCollapsed === true
+    },
+    instruments: {
+      inference: instruments.inference !== false,
+      session: instruments.session === true,
+      context: instruments.context === true,
+      devices: instruments.devices === true,
+      scrollTop: offset(instruments.scrollTop),
+      deviceScrollTop: offset(instruments.deviceScrollTop)
+    },
+    tabs: { sessions: offset(tabs.sessions), agents: offset(tabs.agents) }
+  };
+}
+
 // packages/cli/src/tui/native/components/blocks.ts
 import {
-  BoxRenderable,
+  BoxRenderable as BoxRenderable2,
   CodeRenderable,
   EmbeddedTerminalRenderable,
-  ImageRenderable,
+  ImageRenderable as ImageRenderable2,
   MarkdownRenderable,
   RenderableEvents,
   ScrollBoxRenderable,
-  TextRenderable
+  TextRenderable as TextRenderable2
 } from "@opentui/core";
 
 // packages/cli/src/tui/native/components/text.ts
@@ -170,6 +212,505 @@ function installDefaultSelectionContrast(renderer2) {
   return dispose;
 }
 
+// packages/cli/src/tui/native/components/media.ts
+import { execFile as execFile2 } from "node:child_process";
+import { BoxRenderable, ImageRenderable, NativeImagePool, TextRenderable } from "@opentui/core";
+
+// packages/cli/src/tui/native/components/media-playback.ts
+import { spawn, execFile } from "node:child_process";
+import { realpath, lstat } from "node:fs/promises";
+import { extname, relative, resolve } from "node:path";
+import { Audio } from "@opentui/core";
+async function validateMediaFile(path, root) {
+  const info = await lstat(path);
+  if (!info.isFile() || info.isSymbolicLink()) throw new Error("Media must be a regular local file");
+  const canonical = await realpath(path), project = await realpath(root);
+  const local = relative(project, canonical);
+  if (local === ".." || local.startsWith("../") || resolve(project, local) !== canonical) throw new Error("Media is outside its project");
+  if (!/\.(png|jpe?g|webp|gif|mp4|webm|mov|mkv|wav|mp3|flac|ogg|m4a)$/i.test(extname(canonical))) throw new Error("Unsupported media file");
+  return canonical;
+}
+async function probeMedia(spec, signal) {
+  const path = await validateMediaFile(spec.path, spec.projectRoot);
+  const output = await new Promise((done, fail2) => execFile("ffprobe", ["-v", "error", "-show_entries", "stream=codec_type,width,height:format=duration", "-of", "json", path], { signal, timeout: 5e3, maxBuffer: 128e3 }, (error, stdout) => error ? fail2(error) : done(stdout)));
+  const data = JSON.parse(output), video = data.streams?.find((stream) => stream.codec_type === "video");
+  const durationSec = Number(data.format?.duration);
+  return { ...video?.width > 0 ? { width: video.width, height: video.height } : {}, ...Number.isFinite(durationSec) && durationSec > 0 ? { durationSec } : {}, hasAudio: data.streams?.some((stream) => stream.codec_type === "audio") };
+}
+var NativeMediaPlayback = class {
+  constructor(changed, silent = process.env["OMNIUS_MEDIA_TEST_SILENT"] === "1") {
+    this.changed = changed;
+    this.silent = silent;
+  }
+  changed;
+  silent;
+  positionSec = 0;
+  playing = false;
+  process;
+  controller;
+  audio;
+  stream;
+  ticker;
+  epoch = 0;
+  audioOffset = 0;
+  cleanup = Promise.resolve();
+  get closed() {
+    return this.cleanup;
+  }
+  async play(spec, size, frame) {
+    this.pause();
+    const epoch = ++this.epoch;
+    const controller = this.controller = new AbortController();
+    try {
+      await this.cleanup;
+      if (epoch !== this.epoch) return;
+      const path = await validateMediaFile(spec.path, spec.projectRoot);
+      if (epoch !== this.epoch) return;
+      const width = Math.max(2, Math.min(640, Math.floor(size.width / 2) * 2)), height = Math.max(2, Math.min(360, Math.floor(size.height / 2) * 2));
+      const info = spec.kind === "video" ? await probeMedia(spec, controller.signal) : {};
+      if (epoch !== this.epoch) return;
+      const input = ["-nostdin", "-loglevel", "error", "-hwaccel", "none", "-ss", String(this.positionSec), ...spec.kind === "video" ? ["-re"] : [], "-i", path];
+      const output = spec.kind === "video" ? ["-an", "-vf", `scale=${width}:${height}:force_original_aspect_ratio=decrease,pad=${width}:${height}:(ow-iw)/2:(oh-ih)/2,fps=8`, "-pix_fmt", "rgba", "-f", "rawvideo", "pipe:1"] : ["-vn", "-f", "f32le", "-ac", "2", "-ar", "48000", "pipe:1"];
+      const withAudio = spec.kind === "video" && info.hasAudio;
+      if (withAudio) output.push("-map", "0:a:0", "-vn", "-f", "f32le", "-ac", "2", "-ar", "48000", "pipe:3");
+      const child = this.process = spawn("ffmpeg", [...input, ...output], { stdio: withAudio ? ["pipe", "pipe", "pipe", "pipe"] : ["pipe", "pipe", "pipe"], windowsHide: true });
+      child.stdin.end();
+      let diagnostic = "";
+      child.stderr.on("data", (chunk) => {
+        diagnostic = (diagnostic + chunk.toString()).slice(-2e3);
+      });
+      const closed = new Promise((done, fail2) => {
+        child.once("error", fail2);
+        child.once("close", done);
+      });
+      this.cleanup = closed.catch(() => {
+      });
+      this.playing = true;
+      this.changed(spec.kind === "video" && !withAudio ? "Playing · no audio track" : "Playing");
+      const audioWork = withAudio ? this.consumeAudio(child.stdio[3], controller, epoch) : void 0;
+      if (audioWork) void audioWork.catch((error) => {
+        if (epoch === this.epoch) {
+          this.pause();
+          this.changed(error.message);
+        }
+      });
+      if (spec.kind === "video") {
+        const bytes = width * height * 4;
+        let pending = Buffer.alloc(0), frames = 0;
+        const offset2 = this.positionSec;
+        for await (const chunk of child.stdout) {
+          if (epoch !== this.epoch) break;
+          pending = Buffer.concat([pending, chunk]);
+          while (pending.length >= bytes && epoch === this.epoch) {
+            frame(pending.subarray(0, bytes), width, height);
+            pending = pending.subarray(bytes);
+            frames++;
+            if (!withAudio) this.positionSec = offset2 + frames / 8;
+            this.changed();
+          }
+        }
+      } else await this.consumeAudio(child.stdout, controller, epoch);
+      if (audioWork) await audioWork;
+      const code = await closed;
+      if (epoch !== this.epoch) return;
+      if (code !== 0) throw new Error(diagnostic.trim() || "Media decoder failed");
+      this.pause();
+      this.positionSec = 0;
+      this.changed("Playback complete");
+    } catch (error) {
+      if (epoch !== this.epoch) return;
+      this.pause();
+      this.changed(error instanceof Error ? error.message : String(error));
+    }
+  }
+  async consumeAudio(source, controller, epoch) {
+    const audio = this.audio = Audio.create({ autoStart: false, sampleRate: 48e3 });
+    audio.on("error", (error) => {
+      if (epoch === this.epoch) {
+        this.pause();
+        this.changed(error.message);
+      }
+    });
+    if (!(this.silent ? audio.startMixer() : audio.start())) throw new Error("Audio output is unavailable");
+    this.audioOffset = this.positionSec;
+    const stream = this.stream = await audio.playStream(source, { format: "pcm", sampleFormat: "f32le", channels: 2, sampleRate: 48e3, buffer: { capacityMs: 500, startupMs: 50, resumeMs: 50 }, signal: controller.signal });
+    if (epoch !== this.epoch) {
+      stream.dispose();
+      return;
+    }
+    stream.on("error", (error) => {
+      if (epoch === this.epoch) {
+        this.pause();
+        this.changed(error.message);
+      }
+    });
+    this.ticker = setInterval(() => {
+      if (this.silent) audio.mixFrames(480, 2);
+      const stats = stream.getStats();
+      this.positionSec = this.audioOffset + Number(stats.framesPlayed) / stats.sampleRate;
+      this.changed();
+    }, this.silent ? 10 : 100);
+    await stream.closed;
+  }
+  pause() {
+    ++this.epoch;
+    if (this.stream) {
+      try {
+        const stats = this.stream.getStats();
+        this.positionSec = this.audioOffset + Number(stats.framesPlayed) / stats.sampleRate;
+      } catch {
+      }
+    }
+    this.controller?.abort();
+    this.controller = void 0;
+    this.stream?.dispose();
+    this.stream = void 0;
+    this.audio?.dispose();
+    this.audio = void 0;
+    if (this.ticker) clearInterval(this.ticker);
+    this.ticker = void 0;
+    const child = this.process;
+    this.process = void 0;
+    if (child && child.exitCode === null) {
+      child.kill("SIGTERM");
+      const timer = setTimeout(() => {
+        if (child.exitCode === null) child.kill("SIGKILL");
+      }, 250);
+      timer.unref?.();
+      child.once("close", () => clearTimeout(timer));
+    }
+    const wasPlaying = this.playing;
+    this.playing = false;
+    if (wasPlaying) this.changed("Paused");
+  }
+  dispose() {
+    this.pause();
+  }
+};
+
+// packages/cli/src/tui/native/components/media.ts
+function mediaPreviewHeight(width, imageWidth, imageHeight, cellAspectRatio = 2) {
+  if (![width, imageWidth, imageHeight, cellAspectRatio].every((value) => Number.isFinite(value) && value > 0)) return 8;
+  return Math.max(1, Math.min(80, Math.round(width * imageHeight / imageWidth / cellAspectRatio)));
+}
+function audioWaveform(samples, width) {
+  const cells = Math.max(1, Math.min(240, Math.floor(width)));
+  const glyphs = "▁▂▃▄▅▆▇█";
+  return Array.from({ length: cells }, (_, column) => {
+    const begin = Math.floor(column * samples.length / cells), end = Math.max(begin + 1, Math.floor((column + 1) * samples.length / cells));
+    let peak = 0;
+    for (let index = begin; index < end && index < samples.length; index++) if (Number.isFinite(samples[index])) peak = Math.max(peak, Math.abs(samples[index]));
+    return glyphs[Math.min(7, Math.floor(Math.min(1, peak) * 7))];
+  }).join("");
+}
+var time = (seconds) => `${Math.floor(Math.max(0, seconds) / 60)}:${String(Math.floor(Math.max(0, seconds) % 60)).padStart(2, "0")}`;
+var NativeMediaView = class extends BoxRenderable {
+  constructor(renderer2, mediaId, spec, colors, sendEvent) {
+    super(renderer2, { id: `media:${mediaId}`, width: "100%", flexDirection: "column", flexShrink: 0 });
+    this.renderer = renderer2;
+    this.mediaId = mediaId;
+    this.colors = colors;
+    this.sendEvent = sendEvent;
+    this.spec = spec;
+    this.location = new TextRenderable(renderer2, { id: `media-location:${mediaId}`, content: spec.path, width: "100%", wrapMode: "word", selectable: true, fg: colors.dim });
+    this.status = new TextRenderable(renderer2, { id: `media-status:${mediaId}`, content: "", width: "100%", wrapMode: "word", selectable: true, fg: colors.dim });
+    this.wave = new TextRenderable(renderer2, { id: `media-waveform:${mediaId}`, content: "", width: "100%", height: 1, wrapMode: "none", fg: colors.foreground, visible: false });
+    this.playheadLabel = new TextRenderable(renderer2, { id: `media-position:${mediaId}`, content: "", width: "100%", height: 1, wrapMode: "none", fg: colors.dim, visible: false });
+    this.controls = new BoxRenderable(renderer2, { id: `media-controls:${mediaId}`, flexDirection: "row", gap: 2, flexShrink: 0 });
+    this.playControl = this.control("play", "Play", () => this.togglePlayback());
+    this.controls.add(this.playControl);
+    this.controls.add(this.control("open", "Open ↗", () => {
+      void this.open();
+    }));
+    this.playback = new NativeMediaPlayback((message) => {
+      if (this.isDestroyed) return;
+      if (message) this.currentStatus = message;
+      this.refreshStatus();
+    });
+    this.add(this.location);
+    this.add(this.wave);
+    this.add(this.playheadLabel);
+    this.add(this.status);
+    this.add(this.controls);
+    this.update(spec);
+  }
+  renderer;
+  mediaId;
+  colors;
+  sendEvent;
+  spec;
+  location;
+  status;
+  wave;
+  playheadLabel;
+  controls;
+  playControl;
+  image;
+  pool;
+  playback;
+  probeController;
+  samples;
+  waveformText = "";
+  sourceWidth = 16;
+  sourceHeight = 9;
+  duration = 0;
+  hovered = false;
+  lastWidth = 0;
+  currentStatus = "";
+  sourceEpoch = 0;
+  needsProbe = true;
+  get closed() {
+    return this.playback.closed;
+  }
+  pausePlayback() {
+    this.playback.pause();
+  }
+  control(action, label, operation) {
+    const control = new TextRenderable(this.renderer, {
+      id: `media-control:${this.mediaId}:${action}`,
+      content: label,
+      fg: this.colors.foreground,
+      selectable: false,
+      onMouseDown: (event) => {
+        if (event.button === 0) {
+          operation();
+          event.stopPropagation();
+        }
+      },
+      onKeyDown: (event) => {
+        if (event.eventType !== "release" && (event.name === "return" || event.sequence === " ")) {
+          operation();
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      }
+    });
+    control.focusable = true;
+    control.on("focused", () => {
+      control.attributes = 32;
+    });
+    control.on("blurred", () => {
+      control.attributes = 0;
+    });
+    return control;
+  }
+  update(spec) {
+    const changed = spec.path !== this.spec.path || spec.kind !== this.spec.kind;
+    this.spec = spec;
+    this.location.content = spec.path;
+    this.playControl.visible = spec.kind !== "image";
+    if (changed) {
+      this.playback.pause();
+      this.playback.positionSec = 0;
+      this.probeController?.abort();
+      this.probeController = void 0;
+      this.needsProbe = true;
+      this.pool?.dispose();
+      this.pool = void 0;
+      this.samples = void 0;
+      this.sourceEpoch++;
+    }
+    if ((spec.kind === "image" || spec.kind === "video") && !this.image) {
+      this.image = new ImageRenderable(this.renderer, {
+        id: `media-preview:${this.mediaId}`,
+        width: "100%",
+        height: 8,
+        fit: "fit",
+        protocol: "auto",
+        onLoad: (image) => {
+          if (this.spec.kind === "image") {
+            this.sourceWidth = image.width;
+            this.sourceHeight = image.height;
+          }
+          this.refreshGeometry();
+        },
+        onError: () => {
+          this.currentStatus = "Preview unavailable · use Open";
+          this.refreshStatus();
+        },
+        onMouseOver: () => {
+          this.hovered = true;
+          this.refreshStatus();
+        },
+        onMouseOut: () => {
+          this.hovered = false;
+          this.refreshStatus();
+        },
+        onMouseUp: (event) => {
+          if (event.button === 0 && !event.isDragging) {
+            void this.open();
+            event.stopPropagation();
+          }
+        },
+        onKeyDown: (event) => {
+          if (event.eventType !== "release" && event.name === "return") {
+            void this.open();
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        }
+      });
+      this.image.focusable = true;
+      this.add(this.image, 1);
+    }
+    if (this.image) {
+      this.image.visible = spec.kind === "image" || spec.kind === "video";
+      const source = spec.kind === "image" ? spec.path : spec.previewPath;
+      if (source && this.image.source !== source && !this.playback.playing) {
+        const epoch = this.sourceEpoch;
+        void validateMediaFile(source, spec.projectRoot).then((path) => {
+          if (!this.isDestroyed && epoch === this.sourceEpoch && !this.playback.playing && this.image && this.image.source !== path) this.image.source = path;
+        }).catch((error) => {
+          if (!this.isDestroyed) {
+            this.currentStatus = `Preview unavailable · ${error.message}`;
+            this.refreshStatus();
+          }
+        });
+      }
+    }
+    this.wave.visible = spec.kind === "audio" || spec.kind === "music";
+    this.playheadLabel.visible = spec.kind !== "image";
+    this.refreshStatus();
+  }
+  startProbe() {
+    if (this.needsProbe && !this.probeController) {
+      this.needsProbe = false;
+      const spec = this.spec;
+      const controller = this.probeController = new AbortController(), epoch = this.sourceEpoch;
+      if (spec.kind !== "image") void probeMedia(spec, controller.signal).then((info) => {
+        if (controller.signal.aborted || epoch !== this.sourceEpoch || this.isDestroyed) return;
+        this.sourceWidth = info.width || 16;
+        this.sourceHeight = info.height || 9;
+        this.duration = info.durationSec || 0;
+        this.refreshGeometry();
+        if (spec.kind === "audio" || spec.kind === "music") this.loadWaveform(controller, epoch);
+      }).catch((error) => {
+        if (!controller.signal.aborted && !this.isDestroyed) {
+          this.currentStatus = `Media metadata unavailable · ${error.message}`;
+          this.refreshStatus();
+        }
+      });
+    }
+    this.refreshStatus();
+  }
+  loadWaveform(controller, epoch) {
+    execFile2("ffmpeg", ["-nostdin", "-loglevel", "error", "-hwaccel", "none", "-i", this.spec.path, "-t", "600", "-vn", "-ac", "1", "-ar", "1000", "-f", "f32le", "pipe:1"], { encoding: "buffer", signal: controller.signal, timeout: 1e4, maxBuffer: 25e5 }, (error, buffer) => {
+      if (controller.signal.aborted || epoch !== this.sourceEpoch || this.isDestroyed) return;
+      if (error) {
+        this.currentStatus = "Waveform unavailable · playback and Open remain available";
+        this.refreshStatus();
+        return;
+      }
+      const samples = new Float32Array(Math.floor(buffer.length / 4));
+      for (let index = 0; index < samples.length; index++) samples[index] = buffer.readFloatLE(index * 4);
+      this.samples = samples;
+      this.lastWidth = 0;
+      this.refreshGeometry();
+    });
+  }
+  reconcile(viewport, active = true) {
+    if (this.isDestroyed) return;
+    let ancestor = this;
+    while (ancestor && active) {
+      active = ancestor.visible;
+      ancestor = ancestor.parent;
+    }
+    const visible = active && this.y + this.height > viewport.y && this.y < viewport.y + viewport.height;
+    if (!visible && this.playback.playing) this.playback.pause();
+    if (!visible && this.probeController && !this.samples) {
+      this.probeController.abort();
+      this.probeController = void 0;
+      this.needsProbe = true;
+    }
+    if (visible) this.startProbe();
+    this.refreshGeometry();
+  }
+  refreshGeometry() {
+    if (this.isDestroyed) return;
+    const width = Math.max(1, this.width);
+    if (this.image) {
+      const height = mediaPreviewHeight(width, this.sourceWidth, this.sourceHeight, this.image.cellAspectRatio);
+      if (this.image.height !== height) this.image.height = height;
+    }
+    if (width !== this.lastWidth) {
+      this.lastWidth = width;
+      if (this.samples) this.waveformText = audioWaveform(this.samples, width);
+    }
+    this.refreshStatus();
+  }
+  refreshStatus() {
+    if (this.isDestroyed) return;
+    const text = `${this.hovered ? "Open ↗ · " : ""}${this.currentStatus}`;
+    if (this.status.plainText !== text) this.status.content = text;
+    const label = this.playback?.playing ? "Pause" : this.playback?.positionSec ? "Resume" : "Play";
+    if (this.playControl.plainText !== label) this.playControl.content = label;
+    if (this.waveformText) {
+      const cursor = this.duration > 0 ? Math.min(this.waveformText.length - 1, Math.floor(this.playback.positionSec / this.duration * this.waveformText.length)) : 0;
+      const waveform = this.playback.positionSec > 0 ? this.waveformText.slice(0, cursor) + "│" + this.waveformText.slice(cursor + 1) : this.waveformText;
+      if (this.wave.plainText !== waveform) this.wave.content = waveform;
+    }
+    const progress = `${time(this.playback?.positionSec ?? 0)} / ${this.duration ? time(this.duration) : "--:--"}${this.duration > 600 && this.samples ? " · waveform shows first 10 min" : ""}`;
+    if (this.playheadLabel.plainText !== progress) this.playheadLabel.content = progress;
+  }
+  togglePlayback() {
+    if (this.playback.playing) {
+      this.playback.pause();
+      return;
+    }
+    if (this.spec.kind === "image") return;
+    void this.playback.play(this.spec, { width: Math.max(2, this.width * 4), height: Math.max(2, (this.image?.height ?? 24) * 8) }, (rgba, width, height) => {
+      if (!this.image || this.isDestroyed) return;
+      if (!this.pool || this.pool.width !== width || this.pool.height !== height) {
+        this.pool?.dispose();
+        this.pool = new NativeImagePool({ width, height, capacity: 3, owner: this.renderer.nativeScene.resourceContext });
+      }
+      const frame = this.pool.publishRgba(rgba);
+      if (frame) {
+        this.image.source = frame;
+        frame.dispose();
+      }
+    });
+  }
+  async open() {
+    try {
+      const path = await validateMediaFile(this.spec.path, this.spec.projectRoot);
+      if (this.isDestroyed) return;
+      this.sendEvent({ type: "action", action: "media-open", id: this.mediaId, text: path });
+      if (process.env["OMNIUS_MEDIA_TEST_NO_OPEN"] === "1") {
+        this.currentStatus = "Open requested (test fixture)";
+        this.refreshStatus();
+        return;
+      }
+      const command2 = process.platform === "darwin" ? "open" : process.platform === "win32" ? "explorer.exe" : "xdg-open";
+      execFile2(command2, [path], { timeout: 5e3 }, (error) => {
+        if (!this.isDestroyed) {
+          this.currentStatus = error ? `Open failed · ${error.message}` : "Opened in the system viewer";
+          this.refreshStatus();
+        }
+      });
+    } catch (error) {
+      if (!this.isDestroyed) {
+        this.currentStatus = `Open unavailable · ${error instanceof Error ? error.message : String(error)}`;
+        this.refreshStatus();
+      }
+    }
+  }
+  applyTheme(colors) {
+    this.colors = colors;
+    for (const view of [this.location, this.status, this.wave, this.playheadLabel, ...this.controls.getChildren()]) if (view instanceof TextRenderable) {
+      view.fg = view === this.wave ? colors.foreground : colors.dim;
+      view.bg = colors.background;
+    }
+  }
+  destroy() {
+    this.playback.dispose();
+    this.probeController?.abort();
+    this.pool?.dispose();
+    this.pool = void 0;
+    super.destroy();
+  }
+};
+
 // packages/cli/src/tui/native/components/code.ts
 var aliases = {
   js: "javascript",
@@ -297,10 +838,10 @@ function nativeMarkdownSections(owner, source, streaming = false) {
       }
     ];
   const rows = source.split("\n"), offsets = [];
-  let offset = 0;
+  let offset2 = 0;
   for (const row of rows) {
-    offsets.push(offset);
-    offset += row.length + 1;
+    offsets.push(offset2);
+    offset2 += row.length + 1;
   }
   const output = [], stack = [
     { level: 0, children: output }
@@ -400,7 +941,7 @@ var NativeBlockView = class {
     this.inline = inline;
     this.spec = spec;
     this.pixel = inline && spec.kind === "text" && Boolean(spec.actions?.length) && spec.actions.every((action) => action.id.startsWith("pixel:"));
-    this.root = new BoxRenderable(context.renderer, {
+    this.root = new BoxRenderable2(context.renderer, {
       id: `block:${spec.id}`,
       flexDirection: "column",
       flexShrink: inline && !this.pixel ? 1 : 0,
@@ -424,6 +965,7 @@ var NativeBlockView = class {
   actions;
   progress;
   image;
+  media;
   terminal;
   collapsed = false;
   previousModelCollapsed;
@@ -443,7 +985,7 @@ var NativeBlockView = class {
     this.root.marginBottom = 0;
     this.root.flexDirection = spec.kind === "row" ? "row" : "column";
     if (spec.title) {
-      this.title = new TextRenderable(renderer2, {
+      this.title = new TextRenderable2(renderer2, {
         id: `block-title:${spec.id}`,
         content: "",
         fg: colors.foreground,
@@ -467,7 +1009,7 @@ var NativeBlockView = class {
       nativeControlFocus(this.title, 1);
       this.root.add(this.title);
     }
-    this.body = new BoxRenderable(renderer2, {
+    this.body = new BoxRenderable2(renderer2, {
       id: `block-body:${spec.id}`,
       flexDirection: spec.kind === "row" ? "row" : "column",
       width: this.pixel ? "auto" : "100%",
@@ -487,8 +1029,12 @@ var NativeBlockView = class {
       });
       this.context.terminals.set(spec.id, this.terminal);
       this.body.add(this.terminal);
+    } else if (spec.kind === "media" && spec.media) {
+      this.media = new NativeMediaView(renderer2, spec.id, spec.media, colors, this.context.emit);
+      this.context.mediaViews?.add(this.media);
+      this.body.add(this.media);
     } else if (spec.kind === "image" && spec.imagePath) {
-      this.image = new ImageRenderable(renderer2, {
+      this.image = new ImageRenderable2(renderer2, {
         id: `image:${spec.id}`,
         source: spec.imagePath,
         width: "100%",
@@ -499,7 +1045,7 @@ var NativeBlockView = class {
           if (this.image) this.image.visible = false;
           if (this.text) {
             this.text.visible = true;
-            if (this.text instanceof TextRenderable) this.text.content = styledText(this.spec.text ?? "Image unavailable");
+            if (this.text instanceof TextRenderable2) this.text.content = styledText(this.spec.text ?? "Image unavailable");
           }
           this.context.emit({ type: "action", action: "image-error", id: spec.id, text: String(error) });
         },
@@ -509,7 +1055,7 @@ var NativeBlockView = class {
         }
       });
       this.body.add(this.image);
-      this.text = new TextRenderable(renderer2, { id: `image-fallback:${spec.id}`, content: "", visible: false, width: "100%", wrapMode: "word", fg: colors.dim, selectable: true });
+      this.text = new TextRenderable2(renderer2, { id: `image-fallback:${spec.id}`, content: "", visible: false, width: "100%", wrapMode: "word", fg: colors.dim, selectable: true });
       this.body.add(this.text);
     } else if (spec.kind === "markdown") {
       this.text = new MarkdownRenderable(renderer2, {
@@ -561,7 +1107,7 @@ var NativeBlockView = class {
       });
       this.body.add(this.text);
     } else if (spec.text !== void 0) {
-      this.text = new TextRenderable(renderer2, {
+      this.text = new TextRenderable2(renderer2, {
         id: `text:${spec.id}`,
         content: "",
         width: this.pixel ? "auto" : "100%",
@@ -574,7 +1120,7 @@ var NativeBlockView = class {
       this.body.add(this.text);
     }
     if (spec.kind === "progress") {
-      this.progress = new TextRenderable(renderer2, {
+      this.progress = new TextRenderable2(renderer2, {
         id: `progress-track:${spec.id}`,
         width: "100%",
         height: 1,
@@ -588,7 +1134,7 @@ var NativeBlockView = class {
       this.body.add(this.progress);
     }
     this.children = new NativeBlockList(this.context, this.body);
-    this.actions = new BoxRenderable(renderer2, {
+    this.actions = new BoxRenderable2(renderer2, {
       id: `block-actions:${spec.id}`,
       flexDirection: "row",
       gap: 1,
@@ -597,6 +1143,11 @@ var NativeBlockView = class {
     this.root.add(this.actions);
   }
   reset() {
+    if (this.media) {
+      this.context.mediaViews?.delete(this.media);
+      this.media.destroy();
+      this.media = void 0;
+    }
     this.children?.destroy();
     this.markdownSections?.destroy();
     this.markdownSections = void 0;
@@ -632,13 +1183,14 @@ var NativeBlockView = class {
       this.markdownSections.destroy();
       this.markdownSections = void 0;
     }
-    if (this.text instanceof TextRenderable) this.text.content = styledText(spec.kind === "image" ? spec.text ?? "Image unavailable" : spec.text);
+    if (this.text instanceof TextRenderable2) this.text.content = styledText(spec.kind === "image" ? spec.text ?? "Image unavailable" : spec.text);
     else if (this.text instanceof MarkdownRenderable || this.text instanceof CodeRenderable) {
       const code = this.text instanceof CodeRenderable ? nativeCodeContent(plainText(spec.text), spec.language) : void 0;
       this.text.content = sections ? "" : code?.content ?? plainText(spec.text);
       this.text.streaming = spec.streaming ?? false;
       if (this.text instanceof CodeRenderable) this.text.filetype = code?.language ?? "text";
     }
+    if (this.media && spec.media) this.media.update(spec.media);
     if (this.image && spec.imagePath && this.image.source !== spec.imagePath) this.image.source = spec.imagePath;
     if (this.terminal) this.terminal.height = spec.height ?? 14;
     if (this.image) this.image.height = spec.height ?? 12;
@@ -649,7 +1201,7 @@ var NativeBlockView = class {
       this.actionsSignature = actionsSignature;
       for (const child of [...this.actions.getChildren()]) child.destroy();
       for (const action of spec.actions ?? []) {
-        const button = new TextRenderable(this.context.renderer, {
+        const button = new TextRenderable2(this.context.renderer, {
           id: `block-action:${spec.id}:${action.id}`,
           content: plainText(action.label),
           fg: this.context.colors.foreground,
@@ -686,6 +1238,20 @@ var NativeBlockView = class {
     if (this.title) this.title.content = `${this.collapsed ? "▸ " : "· "}${plainText(this.spec.title)}`;
     this.context.emit({ type: "action", action: "toggle-block", id: this.spec.id });
   }
+  captureDisclosures(result) {
+    if (this.spec.collapsible) Object.defineProperty(result, this.spec.id, { value: this.collapsed, enumerable: true, configurable: true, writable: true });
+    this.children?.captureDisclosures(result);
+    this.markdownSections?.captureDisclosures(result);
+  }
+  restoreDisclosures(state) {
+    if (this.spec.collapsible && Object.hasOwn(state, this.spec.id)) {
+      this.collapsed = state[this.spec.id];
+      if (this.body) this.body.visible = !this.collapsed;
+      if (this.title) this.title.content = `${this.collapsed ? "▸ " : "· "}${plainText(this.spec.title)}`;
+    }
+    this.children?.restoreDisclosures(state);
+    this.markdownSections?.restoreDisclosures(state);
+  }
   applyTheme() {
     const colors = this.context.colors;
     this.root.backgroundColor = colors.background;
@@ -704,14 +1270,20 @@ var NativeBlockView = class {
       this.progress.fg = colors.foreground;
       this.progress.bg = colors.background;
     }
-    for (const action of this.actions?.getChildren() ?? []) if (action instanceof TextRenderable) {
+    for (const action of this.actions?.getChildren() ?? []) if (action instanceof TextRenderable2) {
       action.fg = colors.foreground;
       action.bg = colors.background;
     }
+    this.media?.applyTheme(colors);
     this.children?.applyTheme();
     this.markdownSections?.applyTheme();
   }
   destroy() {
+    if (this.media) {
+      this.context.mediaViews?.delete(this.media);
+      this.media.destroy();
+      this.media = void 0;
+    }
     this.children?.destroy();
     this.markdownSections?.destroy();
     if (this.terminal) this.context.terminals.delete(this.spec.id);
@@ -750,7 +1322,10 @@ var NativeBlockList = class {
   reorder(order) {
     const next = order.filter((id) => this.views.has(id));
     if (next.length === this.order.length && next.every((id, index) => this.order[index] === id)) return;
-    next.forEach((id, index) => this.parent.add(this.views.get(id).root, index));
+    next.forEach((id, index) => {
+      const view = this.views.get(id).root;
+      if (this.parent.getChildren()[index] !== view) this.parent.add(view, index);
+    });
     this.order = next;
   }
   remove(id) {
@@ -761,6 +1336,13 @@ var NativeBlockList = class {
   applyTheme() {
     for (const view of this.views.values()) view.applyTheme();
   }
+  captureDisclosures(result = {}) {
+    for (const view of this.views.values()) view.captureDisclosures(result);
+    return result;
+  }
+  restoreDisclosures(state) {
+    for (const view of this.views.values()) view.restoreDisclosures(state);
+  }
   clear() {
     for (const view of this.views.values()) view.destroy();
     this.views.clear();
@@ -773,12 +1355,12 @@ var NativeBlockList = class {
 
 // packages/cli/src/tui/native/components/modals.ts
 import {
-  BoxRenderable as BoxRenderable3,
+  BoxRenderable as BoxRenderable4,
   InputRenderable,
   ScrollBoxRenderable as ScrollBoxRenderable2,
   TextareaRenderable,
   TextAttributes as TextAttributes4,
-  TextRenderable as TextRenderable2
+  TextRenderable as TextRenderable3
 } from "@opentui/core";
 
 // packages/cli/src/tui/native/components/select.ts
@@ -820,8 +1402,8 @@ function styleNativeSlider(slider, colors) {
   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;
+    const offset2 = horizontal ? event.x - slider.x : event.y - slider.y;
+    const progress = length > 1 ? Math.max(0, Math.min(1, offset2 / (length - 1))) : 0;
     slider.value = slider.min + progress * (slider.max - slider.min);
     event.preventDefault();
     event.stopPropagation();
@@ -854,8 +1436,8 @@ var NativeSelectRenderable = class extends SelectRenderable {
     this.renderAfter = (buffer) => {
       const count = this.visibleCount();
       if (!this.showScrollIndicator || this.options.length <= count) return;
-      const offset = Math.max(0, Math.min(this.getSelectedIndex() - Math.floor(count / 2), this.options.length - count));
-      drawDotRail(buffer, this.width - 1, 0, this.height, false, offset / (this.options.length - count), colors);
+      const offset2 = Math.max(0, Math.min(this.getSelectedIndex() - Math.floor(count / 2), this.options.length - count));
+      drawDotRail(buffer, this.width - 1, 0, this.height, false, offset2 / (this.options.length - count), colors);
     };
   }
   visibleCount() {
@@ -931,7 +1513,7 @@ var NativeSelectRenderable = class extends SelectRenderable {
 };
 
 // packages/cli/src/tui/native/components/corner-frame.ts
-import { BoxRenderable as BoxRenderable2, CliRenderEvents as CliRenderEvents2, RenderableEvents as RenderableEvents2, TextAttributes as TextAttributes3 } from "@opentui/core";
+import { BoxRenderable as BoxRenderable3, CliRenderEvents as CliRenderEvents2, RenderableEvents as RenderableEvents2, TextAttributes as TextAttributes3 } from "@opentui/core";
 function drawCornerFrame(buffer, panel, colors, progress = 1) {
   const { x, y, width, height } = panel;
   if (width <= 0 || height <= 0) return;
@@ -970,7 +1552,7 @@ var NativeCornerFrame = class {
     this.colors = colors;
     this.renderer = renderer2;
     this.container = container;
-    this.chrome = new BoxRenderable2(renderer2, {
+    this.chrome = new BoxRenderable3(renderer2, {
       id: `${panel.id}:corners`,
       position: "absolute",
       left: 0,
@@ -1100,7 +1682,7 @@ var NativeModalView = class {
     this.close = close2;
     this.spec = spec;
     const { renderer: renderer2, colors } = context;
-    this.root = new BoxRenderable3(renderer2, {
+    this.root = new BoxRenderable4(renderer2, {
       id: `modal:${spec.id}`,
       position: "absolute",
       top: 0,
@@ -1122,7 +1704,7 @@ var NativeModalView = class {
         }
       }
     });
-    this.panel = new BoxRenderable3(renderer2, {
+    this.panel = new BoxRenderable4(renderer2, {
       id: `modal-panel:${spec.id}`,
       flexDirection: "column",
       width: "94%",
@@ -1138,7 +1720,12 @@ var NativeModalView = class {
     this.root.add(this.panel);
     this.frame = new NativeCornerFrame(this.panel, colors, renderer2, this.root);
     this.breadcrumb = this.addText(`modal-breadcrumb:${spec.id}`);
-    this.heading = this.addText(`modal-title:${spec.id}`);
+    const header = new BoxRenderable4(renderer2, { id: `modal-heading:${spec.id}`, width: "100%", flexDirection: "row", gap: 1, flexShrink: 0 });
+    this.heading = new TextRenderable3(renderer2, { id: `modal-title:${spec.id}`, content: "", width: 0, flexGrow: 1, flexShrink: 1, wrapMode: "word", fg: colors.foreground });
+    this.headerActions = new BoxRenderable4(renderer2, { id: `modal-header-actions:${spec.id}`, flexDirection: "row", gap: 1, flexShrink: 0 });
+    header.add(this.heading);
+    header.add(this.headerActions);
+    this.panel.add(header);
     this.description = this.addText(`modal-description:${spec.id}`);
     if (spec.kind === "select") this.buildSelect();
     else if (spec.kind === "input") this.buildInput();
@@ -1156,7 +1743,7 @@ var NativeModalView = class {
       this.blocks = new NativeBlockList(this.modalContext(), this.document);
       this.panel.add(this.document);
     } else {
-      this.progress = new TextRenderable2(renderer2, {
+      this.progress = new TextRenderable3(renderer2, {
         id: `modal-progress:${spec.id}`,
         width: "100%",
         height: 1,
@@ -1168,13 +1755,13 @@ var NativeModalView = class {
         selectable: false
       });
       this.panel.add(this.progress);
-      const progressBlocks = new BoxRenderable3(renderer2, { id: `modal-progress-blocks:${spec.id}`, flexDirection: "column", width: "100%" });
+      const progressBlocks = new BoxRenderable4(renderer2, { id: `modal-progress-blocks:${spec.id}`, flexDirection: "column", width: "100%" });
       this.panel.add(progressBlocks);
       this.blocks = new NativeBlockList(this.modalContext(), progressBlocks);
     }
     this.error = this.addText(`modal-error:${spec.id}`);
     this.hints = this.addText(`modal-hints:${spec.id}`);
-    this.actions = new BoxRenderable3(renderer2, { id: `modal-actions:${spec.id}`, flexDirection: "row", gap: 1, width: "100%", marginTop: 0 });
+    this.actions = new BoxRenderable4(renderer2, { id: `modal-actions:${spec.id}`, flexDirection: "row", gap: 1, width: "100%", marginTop: 0 });
     this.panel.add(this.actions);
     this.update(spec);
   }
@@ -1190,6 +1777,7 @@ var NativeModalView = class {
   error;
   hints;
   actions;
+  headerActions;
   filterInput;
   editor;
   secretMask;
@@ -1201,11 +1789,39 @@ var NativeModalView = class {
   filter = "";
   changing = false;
   actionsSignature = "";
+  headerActionsSignature = "";
   addText(id) {
-    const text = new TextRenderable2(this.context.renderer, { id, content: "", width: "100%", wrapMode: "word", flexShrink: 0, fg: this.context.colors.foreground, selectable: true });
+    const text = new TextRenderable3(this.context.renderer, { id, content: "", width: "100%", wrapMode: "word", flexShrink: 0, fg: this.context.colors.foreground, selectable: true });
     this.panel.add(text);
     return text;
   }
+  replaceActions(container, actions, prefix = "") {
+    for (const child of [...container.getChildren()]) child.destroy();
+    for (const action of actions) {
+      const button = new TextRenderable3(this.context.renderer, {
+        id: `modal-action:${this.spec.id}:${prefix}${action.id}`,
+        content: plainText(action.label),
+        fg: this.context.colors.foreground,
+        bg: this.context.colors.background,
+        attributes: action.disabled ? 2 : action.active ? 1 : 0,
+        selectable: false,
+        onMouseDown: (event) => {
+          if (event.button !== 0 || action.disabled) return;
+          this.emitAction(action.command ?? action.id, this.editor?.plainText);
+          event.stopPropagation();
+        },
+        onKeyDown: (key) => {
+          if (key.eventType === "release" || key.name !== "return" && key.sequence !== " " || action.disabled) return;
+          this.emitAction(action.command ?? action.id, this.editor?.plainText);
+          key.preventDefault();
+        }
+      });
+      button.focusable = !action.disabled;
+      nativeControlFocus(button, action.disabled ? 2 : action.active ? 1 : 0);
+      container.add(button);
+    }
+    container.visible = actions.length > 0;
+  }
   buildSelect() {
     const { renderer: renderer2, colors } = this.context;
     this.filterInput = new InputRenderable(renderer2, {
@@ -1308,34 +1924,15 @@ var NativeModalView = class {
       this.refreshOptions(patch.selectedIndex);
       this.blocks?.replace(spec.blocks ?? []);
       if (this.progress) this.progress.content = nativeProgressText(spec.progress, true);
+      const headerActionsSignature = JSON.stringify(spec.headerActions ?? []);
+      if (headerActionsSignature !== this.headerActionsSignature) {
+        this.headerActionsSignature = headerActionsSignature;
+        this.replaceActions(this.headerActions, spec.headerActions ?? [], "header:");
+      }
       const actionsSignature = JSON.stringify(spec.actions ?? []);
       if (actionsSignature !== this.actionsSignature) {
         this.actionsSignature = actionsSignature;
-        for (const child of [...this.actions.getChildren()]) child.destroy();
-        for (const action of spec.actions ?? []) {
-          const button = new TextRenderable2(this.context.renderer, {
-            id: `modal-action:${spec.id}:${action.id}`,
-            content: plainText(action.label),
-            fg: this.context.colors.foreground,
-            bg: this.context.colors.background,
-            attributes: action.disabled ? 2 : action.active ? 1 : 0,
-            selectable: false,
-            onMouseDown: (event) => {
-              if (event.button !== 0 || action.disabled) return;
-              this.emitAction(action.command ?? action.id, this.editor?.plainText);
-              event.stopPropagation();
-            },
-            onKeyDown: (key) => {
-              if (key.eventType === "release" || key.name !== "return" && key.sequence !== " " || action.disabled) return;
-              this.emitAction(action.command ?? action.id, this.editor?.plainText);
-              key.preventDefault();
-            }
-          });
-          button.focusable = !action.disabled;
-          nativeControlFocus(button, action.disabled ? 2 : action.active ? 1 : 0);
-          this.actions.add(button);
-        }
-        this.actions.visible = (spec.actions?.length ?? 0) > 0;
+        this.replaceActions(this.actions, spec.actions ?? []);
       }
     } finally {
       this.changing = false;
@@ -1390,7 +1987,7 @@ var NativeModalView = class {
     this.close(this.spec.id, { confirmed: true, key: current?.item.key ?? null, index: current?.index ?? -1, ...value === void 0 ? {} : { value } });
   }
   cancel(action = "cancel") {
-    if (this.frame.closing) return;
+    if (this.frame.closing || this.spec.nonDismissible) return;
     if (this.spec.deferSelection) {
       this.emitAction(action);
       return;
@@ -1559,7 +2156,7 @@ var NativeModalView = class {
       editor.placeholderColor = colors.foreground;
     }
     if (this.secretMask) this.secretMask.fg = colors.foreground;
-    for (const action of this.actions.getChildren()) if (action instanceof TextRenderable2) {
+    for (const action of [...this.actions.getChildren(), ...this.headerActions.getChildren()]) if (action instanceof TextRenderable3) {
       action.fg = colors.foreground;
       action.bg = colors.background;
     }
@@ -1643,12 +2240,12 @@ var NativeModalStack = class {
 
 // packages/cli/src/tui/native/components/instruments.ts
 import {
-  BoxRenderable as BoxRenderable4,
+  BoxRenderable as BoxRenderable5,
   RGBA as RGBA2,
   RenderableEvents as RenderableEvents3,
   ScrollBoxRenderable as ScrollBoxRenderable3,
   TextAttributes as TextAttributes5,
-  TextRenderable as TextRenderable3
+  TextRenderable as TextRenderable4
 } from "@opentui/core";
 
 // packages/cli/src/tui/native/components/device-history.ts
@@ -1848,7 +2445,7 @@ function instrumentStatus(value) {
 // packages/cli/src/tui/native/components/instruments.ts
 var foreground = RGBA2.defaultForeground();
 var background = RGBA2.defaultBackground();
-var SectionBanner = class extends TextRenderable3 {
+var SectionBanner = class extends TextRenderable4 {
   constructor(renderer2, title, id, activate) {
     super(renderer2, {
       id,
@@ -1903,7 +2500,7 @@ var SectionBanner = class extends TextRenderable3 {
     if (this.plainText !== next) this.content = next;
   }
 };
-var TelemetryRow = class extends TextRenderable3 {
+var TelemetryRow = class extends TextRenderable4 {
   constructor(renderer2, label, id, reserved = 12) {
     super(renderer2, {
       id,
@@ -1949,7 +2546,7 @@ var SignalMeter = class extends TelemetryRow {
     this.update(formatSignalMeter(value, maximum));
   }
 };
-var InstrumentDivider = class extends TextRenderable3 {
+var InstrumentDivider = class extends TextRenderable4 {
   constructor(renderer2, actions) {
     super(renderer2, {
       id: "omnius-instrument-divider",
@@ -2046,17 +2643,17 @@ var InstrumentDivider = class extends TextRenderable3 {
     this.attributes = this.focused ? TextAttributes5.INVERSE : TextAttributes5.DIM;
   }
 };
-var DeviceMonitor = class extends BoxRenderable4 {
+var DeviceMonitor = class extends BoxRenderable5 {
   constructor(renderer2, action) {
     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.summary = new TextRenderable4(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.compactLoad = new TextRenderable4(renderer2, { id: "omnius-devices:load-history", content: "", width: "100%", height: 1, flexShrink: 0, fg: foreground, bg: background, wrapMode: "none", truncate: true });
+    this.compactMemory = new TextRenderable4(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, {
@@ -2074,7 +2671,7 @@ var DeviceMonitor = class extends BoxRenderable4 {
       contentOptions: { flexDirection: "column" }
     });
     this.add(this.scroll);
-    this.notes = new TextRenderable3(renderer2, {
+    this.notes = new TextRenderable4(renderer2, {
       id: "omnius-devices:notes",
       content: "",
       width: "100%",
@@ -2086,7 +2683,7 @@ var DeviceMonitor = class extends BoxRenderable4 {
       truncate: true
     });
     this.scroll.add(this.notes);
-    const controls = new BoxRenderable4(renderer2, { id: "omnius-devices:controls", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 2 });
+    const controls = new BoxRenderable5(renderer2, { id: "omnius-devices:controls", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 2 });
     this.add(controls);
     this.policy = this.button(renderer2, "omnius-devices:policy", "GPU POLICY", () => {
       if (this.canSelect()) this.action?.("/gpu");
@@ -2110,7 +2707,7 @@ var DeviceMonitor = class extends BoxRenderable4 {
   historySource = "";
   rows = /* @__PURE__ */ new Map();
   button(renderer2, id, label, activate) {
-    const button = new TextRenderable3(renderer2, {
+    const button = new TextRenderable4(renderer2, {
       id,
       content: label,
       height: 1,
@@ -2173,7 +2770,7 @@ var DeviceMonitor = class extends BoxRenderable4 {
     for (const device of snapshot?.devices ?? []) {
       let row = this.rows.get(device.uuid);
       if (!row) {
-        const root = new BoxRenderable4(this._ctx, {
+        const root = new BoxRenderable5(this._ctx, {
           id: `omnius-device:${device.uuid}`,
           width: "100%",
           flexDirection: "column",
@@ -2192,9 +2789,9 @@ 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 plot = (name) => new TextRenderable4(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, {
+        const reason = new TextRenderable4(this._ctx, {
           id: `${root.id}:reason`,
           content: "",
           width: "100%",
@@ -2241,6 +2838,12 @@ var DeviceMonitor = class extends BoxRenderable4 {
     this.fitHeight(this.availableRows + 2);
     this.refresh();
   }
+  get isExpanded() {
+    return this.expanded;
+  }
+  setExpanded(expanded) {
+    if (this.expanded !== expanded) this.toggle();
+  }
   fitHeight(railRows) {
     this.availableRows = Math.max(0, railRows - 2);
     this.visible = Boolean(this.snapshot) && this.availableRows >= 3;
@@ -2299,7 +2902,7 @@ var DeviceMonitor = class extends BoxRenderable4 {
     ];
   }
 };
-var ChannelMap = class extends BoxRenderable4 {
+var ChannelMap = class extends BoxRenderable5 {
   constructor(renderer2, id, inspect, reveal) {
     super(renderer2, {
       id,
@@ -2331,7 +2934,7 @@ var ChannelMap = class extends BoxRenderable4 {
       if (!this.channels.has(agent.id))
         this.channels.set(agent.id, this.channels.size + 1);
       if (!this.rows.has(agent.id)) {
-        const row = new TextRenderable3(this._ctx, {
+        const row = new TextRenderable4(this._ctx, {
           id: `${this.id}:channel:${agent.id}`,
           content: "",
           width: "100%",
@@ -2397,7 +3000,7 @@ var ChannelMap = class extends BoxRenderable4 {
     }
   }
 };
-var InstrumentRail = class extends BoxRenderable4 {
+var InstrumentRail = class extends BoxRenderable5 {
   scroll;
   inferenceHeader;
   sessionHeader;
@@ -2451,7 +3054,7 @@ var InstrumentRail = class extends BoxRenderable4 {
       () => this.reveal(this.inferenceHeader)
     );
     this.scroll.add(this.inferenceHeader);
-    this.inference = new BoxRenderable4(renderer2, {
+    this.inference = new BoxRenderable5(renderer2, {
       id: `${id}:inference-body`,
       width: "100%",
       flexDirection: "column",
@@ -2466,7 +3069,7 @@ var InstrumentRail = class extends BoxRenderable4 {
     };
     addRow(this.inference, "route", "ROUTE");
     addRow(this.inference, "backend", "BACKEND");
-    this.model = new TextRenderable3(renderer2, {
+    this.model = new TextRenderable4(renderer2, {
       id: `${id}:model`,
       content: "MODEL --",
       width: "100%",
@@ -2495,7 +3098,7 @@ var InstrumentRail = class extends BoxRenderable4 {
     });
     this.contextHeader.on(RenderableEvents3.FOCUSED, () => this.reveal(this.contextHeader));
     this.inference.add(this.contextHeader);
-    this.contextDetails = new BoxRenderable4(renderer2, { id: `${id}:context-detail-body`, width: "100%", flexDirection: "column", flexShrink: 0, visible: false });
+    this.contextDetails = new BoxRenderable5(renderer2, { id: `${id}:context-detail-body`, width: "100%", flexDirection: "column", flexShrink: 0, visible: false });
     this.inference.add(this.contextDetails);
     this.contextHeader.update("CONTEXT DETAILS", false);
     addRow(this.contextDetails, "messages", "MESSAGES");
@@ -2514,7 +3117,7 @@ var InstrumentRail = class extends BoxRenderable4 {
       () => this.reveal(this.sessionHeader)
     );
     this.scroll.add(this.sessionHeader);
-    this.session = new BoxRenderable4(renderer2, {
+    this.session = new BoxRenderable5(renderer2, {
       id: `${id}:session-body`,
       width: "100%",
       flexDirection: "column",
@@ -2597,7 +3200,7 @@ var InstrumentRail = class extends BoxRenderable4 {
   applyTheme(colors) {
     this.backgroundColor = colors.background;
     const visit = (node) => {
-      if (node instanceof TextRenderable3) {
+      if (node instanceof TextRenderable4) {
         node.fg = colors.foreground;
         node.bg = colors.background;
       }
@@ -2616,6 +3219,25 @@ var InstrumentRail = class extends BoxRenderable4 {
       body.visible
     );
   }
+  capturePresentation() {
+    return {
+      inference: this.inference.visible,
+      session: this.session.visible,
+      context: this.contextHeader.expanded,
+      devices: this.devices.isExpanded,
+      scrollTop: this.scroll.scrollTop,
+      deviceScrollTop: this.devices.scroll.scrollTop
+    };
+  }
+  restorePresentation(state) {
+    if (this.inference.visible !== state.inference) this.toggleSection("inference");
+    if (this.session.visible !== state.session) this.toggleSection("session");
+    this.contextHeader.update("CONTEXT DETAILS", state.context);
+    this.contextDetails.visible = this.contextHeader.visible && state.context;
+    this.devices.setExpanded(state.devices);
+    this.scroll.scrollTo(state.scrollTop);
+    this.devices.scroll.scrollTo(state.deviceScrollTop);
+  }
   focusTargets() {
     if (!this.visible) return [];
     return [
@@ -3440,6 +4062,7 @@ var ALIASES = {
   update: ["upgrade"],
   indicator: ["tray"],
   listen: ["mic"],
+  sound: ["audio"],
   pointcloud: ["points", "pcl", "point"],
   neovim: ["nvim"],
   apikey: ["key"],
@@ -4074,7 +4697,7 @@ 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";
+import { BoxRenderable as BoxRenderable6, CliRenderEvents as CliRenderEvents3, TextAttributes as TextAttributes6, TextRenderable as TextRenderable5 } from "@opentui/core";
 var NativeSelectionMenu = class {
   constructor(renderer2, colors, copy, restoreFocus) {
     this.renderer = renderer2;
@@ -4102,7 +4725,7 @@ var NativeSelectionMenu = class {
     this.selectedText = text;
     this.anchor = { x, y };
     this.previousFocus = this.renderer.currentFocusedRenderable;
-    this.overlay = new BoxRenderable5(this.renderer, {
+    this.overlay = new BoxRenderable6(this.renderer, {
       id: "omnius-selection-menu",
       position: "absolute",
       left: 0,
@@ -4118,7 +4741,7 @@ var NativeSelectionMenu = class {
         event.stopPropagation();
       }
     });
-    this.panel = new BoxRenderable5(this.renderer, {
+    this.panel = new BoxRenderable6(this.renderer, {
       id: "omnius-selection-menu-panel",
       position: "absolute",
       width: 14,
@@ -4132,7 +4755,7 @@ var NativeSelectionMenu = class {
         event.stopPropagation();
       }
     });
-    const action = new TextRenderable4(this.renderer, {
+    const action = new TextRenderable5(this.renderer, {
       id: "omnius-selection-copy",
       content: "COPY",
       height: 1,
@@ -4181,7 +4804,7 @@ var NativeSelectionMenu = class {
     if (!this.panel) return;
     this.panel.backgroundColor = colors.background;
     this.frame?.setColors(colors);
-    for (const child of this.panel.getChildren()) if (child instanceof TextRenderable4) {
+    for (const child of this.panel.getChildren()) if (child instanceof TextRenderable5) {
       child.fg = colors.foreground;
       child.bg = colors.background;
     }
@@ -4207,8 +4830,8 @@ 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 {
+import { BoxRenderable as BoxRenderable7, CliRenderEvents as CliRenderEvents4, ScrollBoxRenderable as ScrollBoxRenderable4, SliderRenderable, TextAttributes as TextAttributes7, TextRenderable as TextRenderable6 } from "@opentui/core";
+var NativeTabStrip = class extends BoxRenderable7 {
   constructor(renderer2, options) {
     super(renderer2, {
       id: options.id,
@@ -4287,7 +4910,7 @@ var NativeTabStrip = class extends BoxRenderable6 {
     for (const [index, action] of items.entries()) {
       let entry = this.buttons.get(action.id);
       if (!entry) {
-        const button = new TextRenderable5(this.renderer, {
+        const button = new TextRenderable6(this.renderer, {
           id: `${this.options.prefix}:${action.id}`,
           content: "",
           height: 1,
@@ -4374,6 +4997,10 @@ var NativeTabStrip = class extends BoxRenderable6 {
     styleNativeScrollbars(this.scroll, colors);
     styleNativeSlider(this.rail, colors);
   }
+  restoreOffset(offset2) {
+    this.reveal = void 0;
+    this.scroll.scrollLeft = offset2;
+  }
   destroySelf() {
     this.renderer.off(CliRenderEvents4.FRAME, this.syncScroll);
     super.destroySelf();
@@ -4387,13 +5014,13 @@ var NativeFrontend = class {
     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.context = { renderer: renderer2, colors, syntax: SyntaxStyle2.fromStyles({}, renderer2.nativeScene), emit, terminals: /* @__PURE__ */ new Map(), mediaViews: /* @__PURE__ */ new Set() };
     this.disposeSelectionContrast = installDefaultSelectionContrast(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, {
+    this.root = new BoxRenderable8(renderer2, {
       id: "omnius-native",
       width: "100%",
       height: "100%",
@@ -4401,7 +5028,7 @@ var NativeFrontend = class {
       backgroundColor: colors.background
     });
     renderer2.root.add(this.root);
-    this.header = new BoxRenderable7(renderer2, {
+    this.header = new BoxRenderable8(renderer2, {
       id: "omnius-header",
       width: "100%",
       minWidth: 0,
@@ -4425,9 +5052,9 @@ var NativeFrontend = class {
         TextAttributes8.DIM
       );
     };
-    const headerRow = new BoxRenderable7(renderer2, { id: "omnius-header-row", width: "100%", minWidth: 0, minHeight: 1, flexDirection: "row", gap: 1 });
+    const headerRow = new BoxRenderable8(renderer2, { id: "omnius-header-row", width: "100%", minWidth: 0, minHeight: 1, flexDirection: "row", gap: 1 });
     this.header.add(headerRow);
-    this.identity = new TextRenderable6(renderer2, {
+    this.identity = new TextRenderable7(renderer2, {
       id: "omnius-identity",
       content: "Omnius",
       fg: colors.foreground,
@@ -4465,9 +5092,9 @@ var NativeFrontend = class {
       verticalScrollbarOptions: { visible: false }
     });
     headerRow.add(this.headerActions);
-    this.headerPanel = new TextRenderable6(renderer2, { id: "omnius-header-panel", content: "", width: "100%", wrapMode: "word", visible: false });
+    this.headerPanel = new TextRenderable7(renderer2, { id: "omnius-header-panel", content: "", width: "100%", wrapMode: "word", visible: false });
     this.header.add(this.headerPanel);
-    this.detailButton = new TextRenderable6(renderer2, {
+    this.detailButton = new TextRenderable7(renderer2, {
       id: "omnius-details-toggle",
       content: "+ DETAILS",
       height: 1,
@@ -4500,7 +5127,7 @@ var NativeFrontend = class {
         control.attributes = attributes;
       });
     }
-    this.sessionRow = new BoxRenderable7(renderer2, {
+    this.sessionRow = new BoxRenderable8(renderer2, {
       id: "omnius-sessions-row",
       width: "100%",
       height: 1,
@@ -4518,7 +5145,7 @@ var NativeFrontend = class {
       activate: (id) => this.emitAction("session", id)
     });
     this.sessionRow.add(this.sessions);
-    this.newSession = new TextRenderable6(renderer2, {
+    this.newSession = new TextRenderable7(renderer2, {
       id: "omnius-session-new",
       content: "+ NEW",
       width: 5,
@@ -4547,13 +5174,15 @@ var NativeFrontend = class {
     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.routeWarning = new TextRenderable7(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.taskPane = new BoxRenderable8(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 BoxRenderable7(renderer2, { id: "omnius-body", width: "100%", flexDirection: "row", flexGrow: 1, minHeight: 1 });
+    this.body = new BoxRenderable8(renderer2, { id: "omnius-body", width: "100%", flexDirection: "row", flexGrow: 1, minHeight: 1 });
     this.root.add(this.body);
+    this.transcriptPane = new BoxRenderable8(renderer2, { id: "omnius-transcript-pane", flexDirection: "column", flexGrow: 1, flexShrink: 1, minWidth: 0, minHeight: 1 });
+    this.body.add(this.transcriptPane);
     this.scroll = new ScrollBoxRenderable5(renderer2, {
       id: "omnius-conversation",
       flexGrow: 1,
@@ -4609,7 +5238,7 @@ var NativeFrontend = class {
         }
       } }
     });
-    this.body.add(this.scroll);
+    this.transcriptPane.add(this.scroll);
     this.content = new NativeBlockList(this.context, this.scroll);
     this.instrumentDivider = new InstrumentDivider(renderer2, {
       resize: (column) => this.resizeInstruments(column),
@@ -4627,7 +5256,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 BoxRenderable7(renderer2, {
+    this.embeddedPane = new BoxRenderable8(renderer2, {
       id: "omnius-editor-pane",
       width: "50%",
       flexShrink: 0,
@@ -4638,7 +5267,7 @@ var NativeFrontend = class {
       visible: false
     });
     this.body.add(this.embeddedPane);
-    this.liveButton = new TextRenderable6(renderer2, {
+    this.liveButton = new TextRenderable7(renderer2, {
       id: "omnius-live-button",
       content: "↓ Live",
       width: "100%",
@@ -4660,9 +5289,9 @@ var NativeFrontend = class {
       }
     });
     this.liveButton.focusable = true;
-    this.root.add(this.liveButton);
-    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.transcriptPane.add(this.liveButton);
+    this.queue = new TextRenderable7(renderer2, { id: "omnius-steering-queue", content: "", width: "100%", height: 1, wrapMode: "none", truncate: true, fg: colors.dim, visible: false, flexShrink: 0 });
+    this.transcriptPane.add(this.queue);
     this.suggestions = new NativeSelectRenderable(renderer2, {
       id: "omnius-suggestions",
       width: "100%",
@@ -4679,10 +5308,10 @@ var NativeFrontend = class {
     });
     this.suggestions.onActivate = () => this.acceptSuggestion();
     this.suggestions.on("itemSelected", () => this.acceptSuggestion());
-    this.root.add(this.suggestions);
-    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 BoxRenderable7(renderer2, {
+    this.transcriptPane.add(this.suggestions);
+    this.status = new BoxRenderable8(renderer2, { id: "omnius-live-status", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 2, visible: false });
+    this.transcriptPane.add(this.status);
+    this.footer = new BoxRenderable8(renderer2, {
       id: "omnius-input-box",
       width: "100%",
       flexShrink: 0,
@@ -4691,7 +5320,7 @@ var NativeFrontend = class {
       flexDirection: "column"
     });
     this.root.add(this.footer);
-    this.footerRule = new BoxRenderable7(renderer2, {
+    this.footerRule = new BoxRenderable8(renderer2, {
       id: "omnius-input-rule",
       width: "100%",
       height: 1,
@@ -4719,9 +5348,9 @@ var NativeFrontend = class {
         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 BoxRenderable7(renderer2, { id: "omnius-input-row", width: "100%", flexDirection: "row", gap: 1 });
+    const inputRow = new BoxRenderable8(renderer2, { id: "omnius-input-row", width: "100%", flexDirection: "row", gap: 1 });
     this.footer.add(inputRow);
-    this.prompt = new TextRenderable6(renderer2, { id: "omnius-prompt", content: "❯", fg: colors.accent, wrapMode: "none", selectable: false, flexShrink: 0 });
+    this.prompt = new TextRenderable7(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",
@@ -4741,7 +5370,7 @@ var NativeFrontend = class {
       onCursorChange: () => this.editorChanged(),
       onSubmit: () => this.submit()
     });
-    this.vimMode = new TextRenderable6(renderer2, {
+    this.vimMode = new TextRenderable7(renderer2, {
       id: "omnius-vim-mode",
       content: "INSERT",
       height: 1,
@@ -4762,17 +5391,17 @@ var NativeFrontend = class {
       this.renderer.requestRender();
     });
     inputRow.add(this.editor);
-    this.enhance = new BoxRenderable7(renderer2, { id: "omnius-enhance", flexDirection: "row", gap: 1, flexShrink: 0, visible: false });
+    this.enhance = new BoxRenderable8(renderer2, { id: "omnius-enhance", flexDirection: "row", gap: 1, flexShrink: 0, visible: false });
     inputRow.add(this.enhance);
-    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.activity = new TextRenderable7(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 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 = new BoxRenderable8(renderer2, { id: "omnius-media", height: 1, minWidth: 0, flexShrink: 1, flexDirection: "row", gap: 1, visible: false });
+    this.mediaText = new TextRenderable7(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 TextRenderable6(renderer2, { id: "omnius-mic-meter", width: 12, height: 1, flexShrink: 0, fg: colors.foreground, visible: false });
+    this.micTrack = new TextRenderable7(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 TextRenderable6(renderer2, {
+    this.copyFeedback = new TextRenderable7(renderer2, {
       id: "omnius-copy-feedback",
       content: "",
       height: 1,
@@ -4783,14 +5412,14 @@ var NativeFrontend = class {
       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 = new BoxRenderable8(renderer2, { id: "omnius-metrics-row", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 1 });
+    this.keyHints = new TextRenderable7(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 BoxRenderable7(renderer2, { id: "omnius-metrics-start-actions", flexDirection: "row", gap: 1, flexShrink: 0 });
+    this.metricsStartActions = new BoxRenderable8(renderer2, { id: "omnius-metrics-start-actions", flexDirection: "row", gap: 1, flexShrink: 0 });
     this.metricsRow.add(this.metricsStartActions);
-    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.metrics = new TextRenderable7(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 BoxRenderable7(renderer2, { id: "omnius-metrics-end-actions", flexDirection: "row", gap: 1, flexShrink: 0 });
+    this.metricsEndActions = new BoxRenderable8(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());
@@ -4823,6 +5452,7 @@ var NativeFrontend = class {
   taskPane;
   tasks;
   body;
+  transcriptPane;
   instruments;
   instrumentDivider;
   detailButton;
@@ -4874,6 +5504,9 @@ var NativeFrontend = class {
   destroyed = false;
   pendingScrollRestore;
   viewScroll = /* @__PURE__ */ new Map();
+  viewDisclosures = /* @__PURE__ */ new Map();
+  pendingDisclosures;
+  pendingInterface;
   embeddedId;
   selectionArmed = false;
   update(state, patch) {
@@ -4883,7 +5516,9 @@ var NativeFrontend = class {
     const viewChanged = previousView !== void 0 && previousView !== currentView;
     if (viewChanged) {
       this.viewScroll.set(previousView, { top: this.scroll.scrollTop, live: this.offset === 0 });
+      this.viewDisclosures.set(previousView, this.content.captureDisclosures(this.tasks.captureDisclosures()));
       this.pendingScrollRestore = this.viewScroll.get(currentView) ?? { top: 0, live: true };
+      this.pendingDisclosures = this.viewDisclosures.get(currentView);
       this.newEntries = 0;
     }
     this.state = state;
@@ -4918,6 +5553,11 @@ var NativeFrontend = class {
         if (this.offset > 0 && !viewChanged && !patch.reset) this.newEntries += patch.upsert.filter((block) => !this.content.views.has(block.id)).length;
         this.content.patch(patch);
       }
+      if (this.pendingDisclosures) {
+        this.content.restoreDisclosures(this.pendingDisclosures);
+        this.tasks.restoreDisclosures(this.pendingDisclosures);
+        this.pendingDisclosures = void 0;
+      }
       this.queue.content = state.queued.length ? `Queued (${state.queued.length}) · ${state.queued.join("  ·  ")}` : "";
       this.queue.visible = state.queued.length > 0;
       const suggestionSignature = JSON.stringify(state.suggestions);
@@ -4966,7 +5606,7 @@ var NativeFrontend = class {
     for (const action of actions) {
       const colors = this.context.colors;
       const attributes = action.disabled ? TextAttributes8.DIM : action.active ? TextAttributes8.BOLD | TextAttributes8.UNDERLINE : 0;
-      const button = new TextRenderable6(this.renderer, {
+      const button = new TextRenderable7(this.renderer, {
         id: `${prefix}:${action.id}`,
         content: styledText(action.label),
         flexShrink: 0,
@@ -5013,8 +5653,11 @@ var NativeFrontend = class {
   }
   renderActivity() {
     const activity = this.state?.activity;
-    const stage = activity?.stage === "idle" ? void 0 : activity?.stage;
-    const reading = activity?.label || stage || this.state?.instruments?.runtimeStatus || "";
+    const stage = activity?.stage === "idle" ? void 0 : activity?.stage?.replace(/_/g, " ").toUpperCase();
+    const label = activity?.label && activity.label.toUpperCase() !== stage ? activity.label : void 0;
+    const elapsed = activity?.elapsedMs === void 0 ? void 0 : `${Math.max(0, Math.floor(activity.elapsedMs / 1e3))}s`;
+    const progress = activity?.progress === void 0 ? void 0 : `${Math.round(activity.progress * 100)}% source accounted`;
+    const reading = [stage, label, elapsed, progress].filter(Boolean).join(" · ") || 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.copyFeedback.visible;
@@ -5112,14 +5755,17 @@ var NativeFrontend = class {
     const shown = !this.embeddedPane.visible && (wide ? this.detailsOpen ?? true : this.narrowDetailsOpen);
     const horizontal = wide || this.embeddedPane.visible && width >= 80;
     this.body.flexDirection = horizontal ? "row" : "column";
-    this.scroll.height = horizontal ? "100%" : "auto";
-    this.scroll.flexBasis = horizontal ? "auto" : 0;
+    this.transcriptPane.height = horizontal ? "100%" : "auto";
+    this.transcriptPane.flexBasis = horizontal ? "auto" : 0;
+    this.scroll.height = "auto";
+    this.scroll.flexBasis = 0;
     this.instruments.visible = shown;
     this.instrumentDivider.visible = wide && !this.embeddedPane.visible;
     this.instrumentDivider.setCollapsed(!shown);
     const railWidth = Math.max(24, Math.min(width - 41, this.sidebarWidth ?? Math.floor(width * 0.38)));
     this.instruments.width = wide ? railWidth : "100%";
-    this.scroll.width = wide && this.instrumentDivider.visible ? width - (shown ? railWidth : 0) - 1 : this.embeddedPane.visible && width >= 80 ? "50%" : "100%";
+    this.transcriptPane.width = wide && this.instrumentDivider.visible ? width - (shown ? railWidth : 0) - 1 : this.embeddedPane.visible && width >= 80 ? "50%" : "100%";
+    this.scroll.width = "100%";
     const inspectorHeight = Math.max(4, Math.min(9, Math.floor(this.renderer.terminalHeight / 3)));
     this.instruments.height = wide ? "100%" : inspectorHeight;
     this.instruments.maxHeight = wide ? "100%" : inspectorHeight;
@@ -5167,6 +5813,22 @@ var NativeFrontend = class {
   }
   onFrame = () => {
     if (this.destroyed) return;
+    if (this.pendingInterface) {
+      const state = this.pendingInterface;
+      this.pendingInterface = void 0;
+      this.instruments.restorePresentation(state.instruments);
+      this.sessions.restoreOffset(state.tabs.sessions);
+      this.tabs.restoreOffset(state.tabs.agents);
+      const focus = state.focusId && !this.modals.active ? this.getRenderable(state.focusId) : void 0;
+      if (focus?.focusable) {
+        let ancestor = focus, visible = true;
+        while (ancestor) {
+          visible &&= ancestor.visible;
+          ancestor = ancestor.parent;
+        }
+        if (visible) focus.focus();
+      }
+    }
     if (this.pendingScrollRestore) {
       const restore = this.pendingScrollRestore;
       this.pendingScrollRestore = void 0;
@@ -5176,10 +5838,11 @@ 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;
-    const liveLabel = offset > 0 ? `↓ Live${this.newEntries ? ` · ${this.newEntries} new` : ""}` : "↓ Live";
+    for (const media of this.context.mediaViews ?? []) media.reconcile({ x: this.scroll.viewport.x, y: this.scroll.viewport.y, width: this.scroll.viewport.width, height: this.scroll.viewport.height }, !this.paused);
+    const offset2 = this.offset;
+    if (offset2 === 0) this.newEntries = 0;
+    this.liveButton.visible = offset2 > 0;
+    const liveLabel = offset2 > 0 ? `↓ Live${this.newEntries ? ` · ${this.newEntries} new` : ""}` : "↓ Live";
     if (this.liveButton.plainText !== liveLabel) this.liveButton.content = liveLabel;
     const event = { type: "viewport", offset: this.scroll.scrollTop, height: this.scroll.viewport.height, width: this.scroll.viewport.width, total: this.scroll.scrollHeight };
     const signature = JSON.stringify(event);
@@ -5446,7 +6109,7 @@ var NativeFrontend = class {
     const target = targets[(current + direction + targets.length) % targets.length];
     target.focus();
     if (target.id.startsWith("header:")) this.headerActions.scrollChildIntoView(target.id);
-    else if (target.id.startsWith("block-title:") || target.id.startsWith("block-action:")) {
+    else if (target.id.startsWith("block-title:") || target.id.startsWith("block-action:") || target.id.startsWith("media-control:") || target.id.startsWith("media-preview:")) {
       let block = target;
       while (block && !block.id.startsWith("block:")) block = block.parent;
       if (block) this.scroll.scrollChildIntoView(block.id);
@@ -5618,6 +6281,53 @@ var NativeFrontend = class {
       this.restoreFocus();
     }
   }
+  pauseMedia() {
+    for (const media of this.context.mediaViews ?? []) media.pausePlayback();
+  }
+  captureInterfaceState() {
+    this.flushLatestInput();
+    const key = `${this.state?.sessions?.activeId ?? ""}:${this.state?.activeViewId ?? "main"}:${this.state?.presentation ?? "stack"}`;
+    this.viewScroll.set(key, { top: this.scroll.scrollTop, live: this.offset === 0 });
+    this.viewDisclosures.set(key, this.content.captureDisclosures(this.tasks.captureDisclosures()));
+    return {
+      version: 1,
+      sessionId: this.state?.sessions?.activeId,
+      activeViewId: this.state?.activeViewId ?? "main",
+      presentation: this.state?.presentation ?? "stack",
+      focusId: this.renderer.currentFocusedRenderable?.id,
+      input: { text: this.editor.plainText, cursor: this.inputCursor() },
+      views: Object.fromEntries([...this.viewScroll].slice(-256).map(([id, view]) => [id, { ...view, disclosures: this.viewDisclosures.get(id) ?? {} }])),
+      layout: { sidebarWidth: this.sidebarWidth, detailsOpen: this.detailsOpen, narrowDetailsOpen: this.narrowDetailsOpen, headerPanelCollapsed: this.headerPanelCollapsed },
+      instruments: this.instruments.capturePresentation(),
+      tabs: { sessions: this.sessions.scroll.scrollLeft, agents: this.tabs.scroll.scrollLeft }
+    };
+  }
+  restoreInterfaceState(value) {
+    const state = sanitizeNativeInterfaceState(value);
+    if (!state) return;
+    for (const [key2, view2] of Object.entries(state.views)) {
+      this.viewScroll.set(key2, { top: view2.top, live: view2.live });
+      this.viewDisclosures.set(key2, view2.disclosures);
+    }
+    this.sidebarWidth = state.layout.sidebarWidth;
+    this.detailsOpen = state.layout.detailsOpen;
+    this.narrowDetailsOpen = state.layout.narrowDetailsOpen;
+    this.headerPanelCollapsed = state.layout.headerPanelCollapsed;
+    this.headerSignature = "";
+    this.setInput(state.input.text, state.input.cursor);
+    const key = `${this.state?.sessions?.activeId ?? state.sessionId ?? ""}:${this.state?.activeViewId ?? state.activeViewId}:${this.state?.presentation ?? state.presentation}`;
+    const view = this.viewScroll.get(key);
+    if (view) {
+      this.pendingScrollRestore = view;
+      const disclosures = this.viewDisclosures.get(key) ?? {};
+      this.content.restoreDisclosures(disclosures);
+      this.tasks.restoreDisclosures(disclosures);
+    }
+    this.pendingInterface = state;
+    if (this.state) this.update(this.state);
+    this.layoutInstruments();
+    this.renderer.requestRender();
+  }
   async dispose() {
     if (this.destroyed) return;
     this.destroyed = true;
@@ -5628,9 +6338,14 @@ var NativeFrontend = class {
     this.renderer.keyInput.off("paste", this.onPaste);
     this.renderer.off(CliRenderEvents5.FRAME, this.onFrame);
     this.renderer.off(CliRenderEvents5.RESIZE, this.onResize);
+    const mediaClosed = [...this.context.mediaViews ?? []].map((media) => {
+      media.pausePlayback();
+      return media.closed;
+    });
     this.modals.destroy();
     this.content.destroy();
     this.tasks.destroy();
+    await Promise.allSettled(mediaClosed);
     this.root.destroyRecursively();
     this.context.syntax.destroy();
     await this.clipboard.dispose();
@@ -5650,10 +6365,10 @@ function installTerminalCursorDefaults(renderer2, session) {
     if (disposed || session.disposed) return Promise.resolve();
     requested++;
     if (pending) return pending;
-    let resolve;
+    let resolve2;
     let reject;
     const completion = new Promise((done, fail2) => {
-      resolve = done;
+      resolve2 = done;
       reject = fail2;
     });
     pending = completion;
@@ -5666,7 +6381,7 @@ function installTerminalCursorDefaults(renderer2, session) {
           restored = generation;
         }
         pending = void 0;
-        resolve();
+        resolve2();
       } catch (error) {
         pending = void 0;
         reject(error);
@@ -5732,11 +6447,24 @@ async function command(message) {
     frontend.command(message.command);
     return;
   }
+  if (message.type === "interface-capture") {
+    await renderer.idle();
+    reply({ type: "interface-state", id: message.id, state: frontend.captureInterfaceState() });
+    return;
+  }
+  if (message.type === "interface-restore") {
+    frontend.restoreInterfaceState(message.state);
+    renderer.requestRender();
+    await renderer.idle();
+    reply({ type: "ack", id: message.id });
+    return;
+  }
   if (message.type === "state") {
     frontend.update(message.snapshot, message.content);
     renderer.requestRender();
     await renderer.idle();
   } else if (message.type === "suspend") {
+    frontend.pauseMedia();
     await cursorDefaults.restore();
     await renderer.suspend();
   } else if (message.type === "resume") {