omnius 1.0.881 → 1.0.882

package/dist/tui/native/worker.js

@@ -2,17 +2,17 @@
 import { createWriteStream } from "node:fs";
 import { createInterface } from "node:readline";
 import { PassThrough } from "node:stream";
-import { CliRenderEvents as CliRenderEvents10, NativeSession, RGBA as RGBA3, createCliRenderer } from "@opentui/core";
+import { CliRenderEvents as CliRenderEvents10, NativeSession, RGBA as RGBA4, createCliRenderer } from "@opentui/core";
 
 // packages/cli/src/tui/native/components/frontend.ts
 import {
-  BoxRenderable as BoxRenderable11,
+  BoxRenderable as BoxRenderable12,
   CliRenderEvents as CliRenderEvents8,
   EmbeddedTerminalRenderable as EmbeddedTerminalRenderable2,
   ScrollBoxRenderable as ScrollBoxRenderable8,
   SyntaxStyle as SyntaxStyle2,
   TextareaRenderable as TextareaRenderable2,
-  TextRenderable as TextRenderable10,
+  TextRenderable as TextRenderable11,
   TextAttributes as TextAttributes11,
   createClipboard,
   createHostClipboard,
@@ -42,12 +42,12 @@ function sanitizeNativeInterfaceState(value) {
   const workQueue = record(instruments.workQueue) ? instruments.workQueue : void 0;
   const workspaceFiles = record(instruments.workspaceFiles) ? instruments.workspaceFiles : void 0;
   const workDisclosures = {};
-  if (workQueue && record(workQueue.disclosures)) for (const [id, open] of Object.entries(workQueue.disclosures).slice(0, 2048)) {
-    if (id.length <= 1024 && typeof open === "boolean") Object.defineProperty(workDisclosures, id, { value: open, enumerable: true, configurable: true, writable: true });
+  if (workQueue && record(workQueue.disclosures)) for (const [id, open2] of Object.entries(workQueue.disclosures).slice(0, 2048)) {
+    if (id.length <= 1024 && typeof open2 === "boolean") Object.defineProperty(workDisclosures, id, { value: open2, enumerable: true, configurable: true, writable: true });
   }
   const taskDisclosures = {};
-  if (taskNotes && record(taskNotes.disclosures)) for (const [id, open] of Object.entries(taskNotes.disclosures).slice(0, 2048)) {
-    if (id.length <= 1024 && typeof open === "boolean") Object.defineProperty(taskDisclosures, id, { value: open, enumerable: true, configurable: true, writable: true });
+  if (taskNotes && record(taskNotes.disclosures)) for (const [id, open2] of Object.entries(taskNotes.disclosures).slice(0, 2048)) {
+    if (id.length <= 1024 && typeof open2 === "boolean") Object.defineProperty(taskDisclosures, id, { value: open2, enumerable: true, configurable: true, writable: true });
   }
   return {
     version: 1,
@@ -90,14 +90,14 @@ function sanitizeNativeInterfaceState(value) {
 
 // packages/cli/src/tui/native/components/blocks.ts
 import {
-  BoxRenderable as BoxRenderable2,
+  BoxRenderable as BoxRenderable3,
   CodeRenderable,
   EmbeddedTerminalRenderable,
   ImageRenderable as ImageRenderable2,
   MarkdownRenderable,
   RenderableEvents,
   ScrollBoxRenderable,
-  TextRenderable as TextRenderable2
+  TextRenderable as TextRenderable3
 } from "@opentui/core";
 
 // packages/cli/src/tui/native/components/text.ts
@@ -254,12 +254,12 @@ async function validateMediaFile(path, root) {
   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");
+  if (!/\.(png|jpe?g|webp|gif|mp4|webm|mov|mkv|wav|mp3|flac|ogg|opus|m4a|aiff?)$/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 output = await new Promise((done, fail2) => execFile("ffprobe", ["-v", "error", "-protocol_whitelist", "file,pipe", "-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") };
@@ -296,7 +296,7 @@ var NativeMediaPlayback = class {
       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 input = ["-nostdin", "-loglevel", "error", "-hwaccel", "none", "-protocol_whitelist", "file,pipe", "-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");
@@ -423,11 +423,14 @@ function mediaPreviewHeight(width, imageWidth, imageHeight, cellAspectRatio = 2)
 function audioWaveform(samples, width) {
   const cells = Math.max(1, Math.min(240, Math.floor(width)));
   const glyphs = "▁▂▃▄▅▆▇█";
+  let maximum = 0;
+  for (const sample of samples) if (Number.isFinite(sample)) maximum = Math.max(maximum, Math.abs(sample));
+  const scale = maximum > 1e-5 ? maximum : 0;
   return Array.from({ length: cells }, (_, column3) => {
     const begin = Math.floor(column3 * samples.length / cells), end = Math.max(begin + 1, Math.floor((column3 + 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))];
+    return glyphs[scale ? Math.min(7, Math.floor(Math.min(1, peak / scale) * 7)) : 0];
   }).join("");
 }
 var time = (seconds) => `${Math.floor(Math.max(0, seconds) / 60)}:${String(Math.floor(Math.max(0, seconds) % 60)).padStart(2, "0")}`;
@@ -439,7 +442,7 @@ var NativeMediaView = class extends BoxRenderable {
     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.location = new TextRenderable(renderer2, { id: `media-location:${mediaId}`, content: spec.displayName ?? 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 });
@@ -524,7 +527,7 @@ var NativeMediaView = class extends BoxRenderable {
   update(spec) {
     const changed = spec.path !== this.spec.path || spec.kind !== this.spec.kind;
     this.spec = spec;
-    this.location.content = spec.path;
+    this.location.content = spec.displayName ?? spec.path;
     this.playControl.visible = spec.kind !== "image";
     if (changed) {
       this.playback.pause();
@@ -621,7 +624,7 @@ var NativeMediaView = class extends BoxRenderable {
     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) => {
+    execFile2("ffmpeg", ["-nostdin", "-loglevel", "error", "-hwaccel", "none", "-protocol_whitelist", "file,pipe", "-i", this.spec.path, "-t", "600", "-vn", "-af", "aformat=channel_layouts=mono,aeval=abs(val(0))", "-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";
@@ -738,6 +741,630 @@ var NativeMediaView = class extends BoxRenderable {
   }
 };
 
+// packages/cli/src/tui/native/components/model3d.ts
+import { constants } from "node:fs";
+import { open } from "node:fs/promises";
+import { BoxRenderable as BoxRenderable2, FrameBufferRenderable, OptimizedBuffer, TextRenderable as TextRenderable2 } from "@opentui/core";
+
+// packages/cli/src/tui/native/model3d.ts
+var MODEL3D_MAX_BYTES = 16 * 1024 * 1024;
+var MODEL3D_MAX_VERTICES = 75e4;
+var MODEL3D_MAX_TRIANGLES = 25e4;
+var MODEL3D_MAX_WIREFRAME_EDGES = 6e3;
+var initialModel3DCamera = () => ({ yaw: 0.65, pitch: 0.35, distance: 3.5 });
+var invalid = (message) => {
+  throw new Error(message);
+};
+function preflight(data, format) {
+  if (!data.byteLength || data.byteLength > MODEL3D_MAX_BYTES) invalid("3D preview supports nonempty files up to 16 MiB.");
+  if (format === "stl") {
+    if (data.byteLength < 84) invalid("STL data is incomplete.");
+    const faces = new DataView(data.buffer, data.byteOffset, data.byteLength).getUint32(80, true);
+    const binary2 = 84 + faces * 50 === data.byteLength;
+    if (binary2) {
+      if (!faces || faces > MODEL3D_MAX_TRIANGLES) invalid("STL exceeds the 250,000 triangle preview limit.");
+      return;
+    }
+    const text2 = new TextDecoder().decode(data);
+    if (!/^\uFEFF?\s*solid\b/i.test(text2) || !/endsolid\b/i.test(text2)) invalid("STL data is incomplete or unsupported.");
+    const count = text2.match(/\bfacet\s+normal\b/gi)?.length ?? 0;
+    if (!count || count > MODEL3D_MAX_TRIANGLES) invalid("STL exceeds the 250,000 triangle preview limit or has no faces.");
+    let asciiFaces = 0;
+    for (const match of text2.matchAll(/\bfacet\b([\s\S]*?)\bendfacet\b/gi)) {
+      const normals = [...match[1].matchAll(/\bnormal\s+([^\r\n]+)/gi)], vertices2 = [...match[1].matchAll(/\bvertex\s+([^\r\n]+)/gi)];
+      if (normals.length !== 1 || vertices2.length !== 3 || [...normals, ...vertices2].some((row) => {
+        const values = row[1].trim().split(/\s+/).map(Number);
+        return values.length !== 3 || values.some((value) => !Number.isFinite(value));
+      })) invalid("STL face data is incomplete or invalid.");
+      asciiFaces++;
+    }
+    if (asciiFaces !== count) invalid("STL face data is incomplete.");
+    return;
+  }
+  const text = new TextDecoder().decode(data);
+  if (format === "obj") {
+    let vertices2 = 0, triangles2 = 0;
+    for (const line of text.split(/\r?\n/)) {
+      if (line.length > 65536) invalid("OBJ line exceeds the preview limit.");
+      const record2 = line.trim().split(/\s+/, 1)[0];
+      if (record2 && !record2.startsWith("#") && !["v", "vn", "vt", "f", "l", "p", "o", "g", "s", "mtllib", "usemtl"].includes(record2)) invalid("OBJ contains an unsupported record; preview supports geometry and material names only.");
+      if (/^\s*v\s/.test(line)) {
+        const values = line.trim().split(/\s+/).slice(1, 4).map(Number);
+        if (values.length !== 3 || values.some((value) => !Number.isFinite(value) || Math.abs(value) > 1e30)) invalid("OBJ contains invalid coordinates.");
+        vertices2++;
+      }
+      if (/^\s*(f|l|p)\s/.test(line)) {
+        const values = line.split("#", 1)[0].trim().split(/\s+/);
+        for (const token of values.slice(1)) {
+          const index = Number(token.split("/")[0]);
+          if (!Number.isSafeInteger(index) || index === 0 || index > vertices2 || index < -vertices2) invalid("OBJ contains an invalid vertex index.");
+        }
+        if (values[0] === "f") triangles2 += Math.max(0, values.length - 3);
+      }
+      if (vertices2 > MODEL3D_MAX_VERTICES || triangles2 > MODEL3D_MAX_TRIANGLES) invalid("OBJ exceeds the bounded geometry preview limit.");
+    }
+    if (!vertices2) invalid("OBJ contains no vertices.");
+    return;
+  }
+  const end = text.indexOf("end_header");
+  if (!text.startsWith("ply") || end < 0 || end > 65536) invalid("PLY header is missing or too large.");
+  const header = text.slice(0, end);
+  if (!/^format (ascii|binary_little_endian|binary_big_endian) 1\.0\s*$/m.test(header)) invalid("PLY format is unsupported.");
+  let vertices = 0;
+  const elements = [];
+  for (const line of header.split(/\r?\n/)) {
+    const element = /^element\s+(\S+)\s+(\d+)\s*$/.exec(line);
+    if (!element) {
+      const property = /^property\s+(\S+)\s+(\S+)(?:\s+(\S+)\s+(\S+))?\s*$/.exec(line);
+      if (property) {
+        if (!elements.length) invalid("PLY property has no element.");
+        elements.at(-1).properties.push(property[1] === "list" ? { type: property[2], item: property[3] } : { type: property[1] });
+      }
+      continue;
+    }
+    const count = Number(element[2]);
+    if (!Number.isSafeInteger(count) || count > MODEL3D_MAX_VERTICES) invalid("PLY exceeds the bounded geometry preview limit.");
+    if (element[1] === "vertex") vertices = count;
+    if (element[1] === "face" && count > MODEL3D_MAX_TRIANGLES) invalid("PLY exceeds the 250,000 face preview limit.");
+    elements.push({ name: element[1], count, properties: [] });
+  }
+  if (!vertices) invalid("PLY contains no vertices.");
+  if (elements.reduce((count, element) => count + element.count, 0) > 1e6 || elements.some((element) => !element.properties.length || element.properties.length > 32)) invalid("PLY record layout exceeds the bounded preview limit.");
+  const sizes = { char: 1, uchar: 1, int8: 1, uint8: 1, short: 2, ushort: 2, int16: 2, uint16: 2, int: 4, uint: 4, int32: 4, uint32: 4, float: 4, float32: 4, double: 8, float64: 8 };
+  const binary = !/^format ascii /m.test(header), little = /^format binary_little_endian /m.test(header);
+  const headerBytes = new TextEncoder().encode(text.slice(0, end + "end_header".length)).byteLength;
+  let offset2 = headerBytes;
+  if (data[offset2] === 13) offset2++;
+  if (data[offset2] === 10) offset2++;
+  const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+  const ascii = binary ? "" : new TextDecoder().decode(data.subarray(offset2)), next = /\S+/g;
+  let triangles = 0;
+  const scalar = (type) => {
+    const size = sizes[type];
+    if (!size) invalid("PLY property type is unsupported.");
+    if (!binary) {
+      const token = next.exec(ascii);
+      const value2 = token ? Number(token[0]) : NaN;
+      if (!Number.isFinite(value2)) invalid("PLY data is incomplete or invalid.");
+      return value2;
+    }
+    if (offset2 + size > data.length) invalid("PLY data is incomplete.");
+    let value;
+    if (/^(uchar|uint8)$/.test(type)) value = view.getUint8(offset2);
+    else if (/^(char|int8)$/.test(type)) value = view.getInt8(offset2);
+    else if (/^(ushort|uint16)$/.test(type)) value = view.getUint16(offset2, little);
+    else if (/^(short|int16)$/.test(type)) value = view.getInt16(offset2, little);
+    else if (/^(uint|uint32)$/.test(type)) value = view.getUint32(offset2, little);
+    else if (/^(int|int32)$/.test(type)) value = view.getInt32(offset2, little);
+    else value = size === 4 ? view.getFloat32(offset2, little) : view.getFloat64(offset2, little);
+    offset2 += size;
+    if (!Number.isFinite(value)) invalid("PLY data contains invalid coordinates.");
+    return value;
+  };
+  for (const element of elements) for (let row = 0; row < element.count; row++) for (const property of element.properties) {
+    if (!property.item) {
+      scalar(property.type);
+      continue;
+    }
+    const count = scalar(property.type);
+    if (!Number.isInteger(count) || count < 0 || count > 4096) invalid("PLY list exceeds the bounded preview limit.");
+    if (element.name === "face") {
+      triangles += Math.max(0, count - 2);
+      if (triangles > MODEL3D_MAX_TRIANGLES) invalid("PLY exceeds the triangle preview limit.");
+    }
+    for (let item = 0; item < count; item++) {
+      const value = scalar(property.item);
+      if (element.name === "face" && (!Number.isInteger(value) || value < 0 || value >= vertices)) invalid("PLY contains an invalid vertex index.");
+    }
+  }
+}
+async function parseModel3D(data, format) {
+  if (!["stl", "obj", "ply"].includes(format)) invalid("Supported 3D preview formats: STL, OBJ and PLY.");
+  preflight(data, format);
+  const THREE = await import("three");
+  const bytes = Uint8Array.from(data).buffer;
+  let object;
+  if (format === "obj") {
+    const { OBJLoader } = await import("three/addons/loaders/OBJLoader.js");
+    object = new OBJLoader().parse(new TextDecoder().decode(data));
+  } else {
+    const geometry = format === "stl" ? new (await import("three/addons/loaders/STLLoader.js")).STLLoader().parse(bytes) : new (await import("three/addons/loaders/PLYLoader.js")).PLYLoader().parse(bytes);
+    object = format === "ply" && !geometry.index ? new THREE.Points(geometry) : new THREE.Mesh(geometry);
+  }
+  const positions = [], triangles = [], segments = [];
+  const min = [Infinity, Infinity, Infinity], max = [-Infinity, -Infinity, -Infinity];
+  try {
+    object.updateMatrixWorld(true);
+    object.traverse((node) => {
+      const drawable = node;
+      if (!drawable.geometry) return;
+      const geometry = drawable.geometry, attribute = geometry.getAttribute("position");
+      if (!attribute || !attribute.count) return;
+      const base = positions.length / 3;
+      if (base + attribute.count > MODEL3D_MAX_VERTICES) invalid("Decoded geometry exceeds the 750,000 vertex preview limit.");
+      const point = new THREE.Vector3();
+      for (let i = 0; i < attribute.count; i++) {
+        point.set(attribute.getX(i), attribute.getY(i), attribute.getZ(i)).applyMatrix4(node.matrixWorld);
+        const values = [point.x, point.y, point.z];
+        if (values.some((value) => !Number.isFinite(value) || Math.abs(value) > 1e30)) invalid("3D geometry contains invalid coordinates.");
+        for (let axis = 0; axis < 3; axis++) {
+          min[axis] = Math.min(min[axis], values[axis]);
+          max[axis] = Math.max(max[axis], values[axis]);
+        }
+        positions.push(...values);
+      }
+      const count = geometry.index?.count ?? attribute.count;
+      const at = (index) => {
+        const value = geometry.index ? geometry.index.getX(index) : index;
+        if (!Number.isInteger(value) || value < 0 || value >= attribute.count) invalid("3D geometry contains an invalid vertex index.");
+        return base + value;
+      };
+      if (drawable.isMesh) {
+        if (count % 3 !== 0 || triangles.length / 3 + count / 3 > MODEL3D_MAX_TRIANGLES) invalid("Decoded geometry exceeds the triangle preview limit or is incomplete.");
+        for (let i = 0; i < count; i++) triangles.push(at(i));
+      } else if (drawable.isLineSegments) {
+        for (let i = 0; i + 1 < count; i += 2) segments.push(at(i), at(i + 1));
+      }
+    });
+  } finally {
+    object.traverse((node) => {
+      const drawable = node;
+      drawable.geometry?.dispose();
+      for (const material of Array.isArray(drawable.material) ? drawable.material : drawable.material ? [drawable.material] : []) material.dispose();
+    });
+  }
+  if (!positions.length) invalid("No renderable geometry was found.");
+  const center = min.map((value, axis) => (value + max[axis]) / 2);
+  const radius = Math.hypot(...min.map((value, axis) => max[axis] - value)) / 2 || 1;
+  for (let i = 0; i < positions.length; i++) positions[i] = (positions[i] - center[i % 3]) / radius;
+  return {
+    format,
+    positions: Float32Array.from(positions),
+    triangles: Uint32Array.from(triangles),
+    segments: Uint32Array.from(segments),
+    bounds: { min, max },
+    vertexCount: positions.length / 3,
+    triangleCount: triangles.length / 3,
+    warnings: format === "obj" ? ["Geometry preview only; external materials and textures are not loaded."] : []
+  };
+}
+function orbitModel3D(camera, dx, dy) {
+  return { ...camera, yaw: camera.yaw + dx * 0.06, pitch: Math.max(-1.5, Math.min(1.5, camera.pitch + dy * 0.06)) };
+}
+function zoomModel3D(camera, direction) {
+  return { ...camera, distance: Math.max(1.15, Math.min(30, camera.distance * Math.exp(direction * 0.16))) };
+}
+function fitModel3D(camera, aspect) {
+  const halfFov = Math.atan(Math.tan(Math.PI / 8) * Math.min(1, Math.max(0.05, aspect)));
+  return { ...camera, distance: 1.1 / Math.sin(halfFov) };
+}
+function model3DCameraPosition(camera) {
+  return [Math.sin(camera.yaw) * Math.cos(camera.pitch) * camera.distance, Math.sin(camera.pitch) * camera.distance, Math.cos(camera.yaw) * Math.cos(camera.pitch) * camera.distance];
+}
+function model3DWireEdges(model) {
+  const edges = Array.from(model.segments), seen = /* @__PURE__ */ new Set();
+  for (let i = 0; i < model.triangles.length; i += 3) for (const [a, b] of [[model.triangles[i], model.triangles[i + 1]], [model.triangles[i + 1], model.triangles[i + 2]], [model.triangles[i + 2], model.triangles[i]]]) {
+    const key = a < b ? `${a}:${b}` : `${b}:${a}`;
+    if (!seen.has(key)) {
+      seen.add(key);
+      edges.push(a, b);
+    }
+  }
+  return Uint32Array.from(edges);
+}
+function projectModel3DWireframe(model, camera, width, height, edges = model3DWireEdges(model)) {
+  width = Math.max(1, Math.min(240, Math.floor(width)));
+  height = Math.max(1, Math.min(80, Math.floor(height)));
+  const cells = Array.from({ length: height }, () => Array(width).fill(" "));
+  const sy = Math.sin(camera.yaw), cy = Math.cos(camera.yaw), sp = Math.sin(camera.pitch), cp = Math.cos(camera.pitch);
+  const aspect = width / (height * 2), focal = 1 / Math.tan(Math.PI / 8);
+  const project = (index) => {
+    const x = model.positions[index * 3], y = model.positions[index * 3 + 1], z = model.positions[index * 3 + 2];
+    const rx = cy * x - sy * z, rz = sy * x + cy * z, ry = cp * y - sp * rz, depth = camera.distance - (sp * y + cp * rz);
+    if (depth <= 0.05) return;
+    return [(0.5 + rx / depth * focal / aspect / 2) * (width - 1), (0.5 - ry / depth * focal / 2) * (height - 1)];
+  };
+  const plot = (x, y) => {
+    if (x >= 0 && x < width && y >= 0 && y < height) cells[y][x] = "·";
+  };
+  const totalEdges = edges.length / 2, stride = Math.max(1, Math.ceil(totalEdges / MODEL3D_MAX_WIREFRAME_EDGES));
+  let displayedEdges = 0;
+  for (let i = 0; i < totalEdges; i += stride) {
+    const a = project(edges[i * 2]), b = project(edges[i * 2 + 1]);
+    if (!a || !b) continue;
+    const steps = Math.min(width + height, Math.max(Math.abs(a[0] - b[0]), Math.abs(a[1] - b[1]), 1));
+    for (let step = 0; step <= steps; step++) plot(Math.round(a[0] + (b[0] - a[0]) * step / steps), Math.round(a[1] + (b[1] - a[1]) * step / steps));
+    displayedEdges++;
+  }
+  if (!totalEdges) for (let i = 0; i < model.vertexCount; i += Math.max(1, Math.ceil(model.vertexCount / MODEL3D_MAX_WIREFRAME_EDGES))) {
+    const p = project(i);
+    if (p) plot(Math.round(p[0]), Math.round(p[1]));
+  }
+  return { text: cells.map((row) => row.join("")).join("\n"), displayedEdges, totalEdges };
+}
+
+// packages/cli/src/tui/native/components/model3d.ts
+async function createEngine(renderer2, width, height, background2) {
+  if (!process.versions["bun"] || !(process.platform === "linux" && process.arch === "x64" || process.platform === "darwin" || process.platform === "win32" && process.arch === "x64")) throw new Error("WebGPU is not packaged for this runtime.");
+  const packageName = "@opentui/three";
+  const { ThreeCliRenderer, SuperSampleType } = await import(packageName);
+  return new ThreeCliRenderer(renderer2, { width, height, autoResize: false, superSample: SuperSampleType.NONE, backgroundColor: background2 });
+}
+async function readCapture(path) {
+  const file = await open(path, constants.O_RDONLY | constants.O_NOFOLLOW | constants.O_NONBLOCK);
+  try {
+    const before = await file.stat();
+    if (!before.isFile() || before.size <= 0 || before.size > MODEL3D_MAX_BYTES) throw new Error("3D preview requires a regular file up to 16 MiB.");
+    const bytes = Buffer.alloc(before.size);
+    let length = 0;
+    while (length < bytes.length) {
+      const read = await file.read(bytes, length, bytes.length - length, null);
+      if (!read.bytesRead) break;
+      length += read.bytesRead;
+    }
+    const extra = await file.read(Buffer.alloc(1), 0, 1, null), after = await file.stat();
+    if (length !== bytes.length || extra.bytesRead) throw new Error("The captured model changed while being read.");
+    if (bytes.length !== before.size || before.dev !== after.dev || before.ino !== after.ino || before.size !== after.size || before.mtimeMs !== after.mtimeMs) throw new Error("The captured model changed while being read.");
+    return bytes;
+  } finally {
+    await file.close();
+  }
+}
+var NativeModel3DView = class extends BoxRenderable2 {
+  constructor(renderer2, modelId, spec, colors, options = {}) {
+    super(renderer2, { id: `model3d:${modelId}`, width: "100%", flexDirection: "column", flexShrink: 0 });
+    this.renderer = renderer2;
+    this.modelId = modelId;
+    this.colors = colors;
+    this.options = options;
+    this.spec = spec;
+    let resolveClosed;
+    this.closed = new Promise((resolve2) => {
+      resolveClosed = resolve2;
+    });
+    this.resolveClosed = resolveClosed;
+    this.location = new TextRenderable2(renderer2, { id: `model3d-location:${modelId}`, width: "100%", wrapMode: "word", fg: colors.dim, content: plainText(spec.displayName ?? spec.path), selectable: true });
+    this.status = new TextRenderable2(renderer2, { id: `model3d-status:${modelId}`, width: "100%", wrapMode: "word", fg: colors.dim, content: "Loading 3D geometry…", selectable: true });
+    const pointer = {
+      onMouseDown: (event) => {
+        if (event.button === 0) {
+          event.currentTarget?.focus();
+          this.drag = { x: event.x, y: event.y };
+          event.stopPropagation();
+        }
+      },
+      onMouseDrag: (event) => {
+        if (this.drag) {
+          this.cameraState = orbitModel3D(this.cameraState, event.x - this.drag.x, event.y - this.drag.y);
+          this.drag = { x: event.x, y: event.y };
+          this.changed();
+          event.stopPropagation();
+        }
+      },
+      onMouseDragEnd: () => {
+        this.drag = void 0;
+      },
+      onMouseUp: () => {
+        this.drag = void 0;
+      },
+      onMouseScroll: (event) => {
+        if (event.scroll?.direction === "up" || event.scroll?.direction === "down") {
+          this.zoom(event.scroll.direction === "up" ? -1 : 1);
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
+      onKeyDown: (key) => {
+        this.handleKey(key);
+      }
+    };
+    this.cpu = new TextRenderable2(renderer2, { id: `model3d-cpu:${modelId}`, width: "100%", height: 12, flexShrink: 0, wrapMode: "none", content: "", fg: colors.accent, selectable: false, ...pointer });
+    this.cpu.focusable = true;
+    this.surface = new FrameBufferRenderable(renderer2, { id: `model3d-surface:${modelId}`, width: 1, height: 12, flexShrink: 0, visible: false, ...pointer });
+    this.surface.focusable = true;
+    this.controls = new BoxRenderable2(renderer2, { id: `model3d-controls:${modelId}`, width: "100%", flexDirection: "row", flexWrap: "wrap", gap: 2, flexShrink: 0 });
+    for (const [id, label3, action] of [
+      ["fit", "Fit", () => this.fit()],
+      ["reset", "Reset", () => this.reset()],
+      ["in", "Zoom +", () => this.zoom(-1)],
+      ["out", "Zoom −", () => this.zoom(1)]
+    ]) {
+      const control = new TextRenderable2(renderer2, {
+        id: `model3d-control:${modelId}:${id}`,
+        content: label3,
+        fg: colors.foreground,
+        selectable: false,
+        onMouseDown: (event) => {
+          if (event.button === 0) {
+            action();
+            event.stopPropagation();
+          }
+        },
+        onKeyDown: (key) => {
+          if (key.eventType !== "release" && (key.name === "return" || key.sequence === " ")) {
+            action();
+            key.preventDefault();
+            key.stopPropagation();
+          }
+        }
+      });
+      control.focusable = true;
+      this.controls.add(control);
+    }
+    this.add(this.location);
+    this.add(this.cpu);
+    this.add(this.surface);
+    this.add(this.status);
+    this.add(this.controls);
+    this.hints = new TextRenderable2(renderer2, { id: `model3d-hints:${modelId}`, content: "Drag / arrows: orbit · wheel / + −: zoom · F: fit · R: reset", width: "100%", wrapMode: "word", fg: colors.dim });
+    this.add(this.hints);
+    renderer2.setFrameCallback(this.frame);
+  }
+  renderer;
+  modelId;
+  colors;
+  options;
+  spec;
+  cameraState = initialModel3DCamera();
+  location;
+  status;
+  cpu;
+  surface;
+  controls;
+  hints;
+  model;
+  edges;
+  scene;
+  camera;
+  engine;
+  loading;
+  drawing;
+  cleanup;
+  resolveClosed;
+  closed;
+  closing = false;
+  active = false;
+  dirty = true;
+  epoch = 0;
+  pixelWidth = 0;
+  pixelHeight = 0;
+  drag;
+  mode = "loading";
+  frame = async () => {
+    this.draw();
+  };
+  update(spec) {
+    if (spec.path !== this.spec.path || spec.format !== this.spec.format) return;
+    this.spec = spec;
+    this.location.content = plainText(spec.displayName ?? spec.path);
+  }
+  applyTheme(colors) {
+    this.colors = colors;
+    this.location.fg = colors.dim;
+    this.status.fg = colors.dim;
+    this.cpu.fg = colors.accent;
+    for (const child of this.controls.getChildren()) if (child instanceof TextRenderable2) child.fg = colors.foreground;
+    this.changed();
+  }
+  async load() {
+    const epoch = this.epoch;
+    try {
+      const bytes = await readCapture(this.spec.path);
+      if (this.closing || epoch !== this.epoch) return;
+      const model = await parseModel3D(bytes, this.spec.format);
+      if (this.closing || epoch !== this.epoch) return;
+      this.model = model;
+      this.edges = model3DWireEdges(model);
+      this.mode = "cpu";
+      this.fit();
+      if ((this.options.mode ?? process.env["OMNIUS_TUI_3D_RENDERER"]) !== "cpu") {
+        try {
+          const THREE = await import("three");
+          if (this.closing) return;
+          this.scene = new THREE.Scene();
+          this.camera = new THREE.PerspectiveCamera(45, 1, 0.01, 100);
+          this.scene.add(new THREE.HemisphereLight(16777215, 2631720, 2));
+          const light = new THREE.DirectionalLight(16777215, 2);
+          light.position.set(3, 4, 5);
+          this.scene.add(light);
+          const geometry = new THREE.BufferGeometry();
+          geometry.setAttribute("position", new THREE.BufferAttribute(model.positions, 3));
+          if (model.triangleCount) {
+            geometry.setIndex(new THREE.BufferAttribute(model.triangles, 1));
+            geometry.computeVertexNormals();
+            this.scene.add(new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({ color: 12369084, roughness: 0.75, metalness: 0.05, side: THREE.DoubleSide })));
+          } else if (model.segments.length) {
+            geometry.setIndex(new THREE.BufferAttribute(model.segments, 1));
+            this.scene.add(new THREE.LineSegments(geometry, new THREE.LineBasicMaterial({ color: 12369084 })));
+          } else this.scene.add(new THREE.Points(geometry, new THREE.PointsMaterial({ color: 12369084, size: 0.025 })));
+          this.engine = this.options.createEngine ? await this.options.createEngine(this.renderer, Math.max(1, this.pixelWidth), Math.max(1, this.pixelHeight)) : await createEngine(this.renderer, Math.max(1, this.pixelWidth), Math.max(1, this.pixelHeight), this.colors.background);
+          await this.engine.init();
+          if (this.closing) return;
+          this.engine.setActiveCamera(this.camera);
+          this.mode = "webgpu";
+          this.surface.visible = true;
+          this.cpu.visible = false;
+        } catch {
+          this.releaseScene();
+          this.engine?.destroy();
+          this.engine = void 0;
+          this.mode = "cpu";
+        }
+      } else this.mode = "cpu";
+      if (!this.closing) this.changed();
+    } catch (error) {
+      if (!this.closing) {
+        this.mode = "error";
+        this.status.content = `3D preview unavailable · ${plainText(error instanceof Error ? error.message : "Unable to read model").slice(0, 200)}`;
+        this.renderer.requestRender();
+      }
+    }
+  }
+  reconcile(viewport, active = true) {
+    if (this.closing || this.isDestroyed) return;
+    let ancestor = this;
+    while (ancestor && active) {
+      active = ancestor.visible;
+      ancestor = ancestor.parent;
+    }
+    this.active = active && this.y + this.height > viewport.y && this.y < viewport.y + viewport.height;
+    if (!this.active) return;
+    const chrome = [this.location, this.status, this.controls, this.hints].reduce((rows, node) => rows + (node.visible ? Math.max(1, node.height) : 0), 0);
+    const width = Math.max(1, Math.min(240, Math.floor(this.width))), height = Math.max(3, Math.min(30, this.renderer.terminalHeight - 7 - chrome));
+    if (width !== this.pixelWidth || height !== this.pixelHeight) {
+      this.pixelWidth = width;
+      this.pixelHeight = height;
+      this.cpu.height = height;
+      this.surface.width = width;
+      this.surface.height = height;
+      this.changed();
+    }
+    if (!this.loading && !this.model && this.mode !== "error") this.loading = this.load();
+    if (this.dirty) this.draw();
+  }
+  changed() {
+    this.dirty = true;
+    if (!this.closing) {
+      this.draw();
+      this.renderer.requestRender();
+    }
+  }
+  draw() {
+    if (!this.active || !this.dirty || !this.model || this.closing || this.drawing) return;
+    this.dirty = false;
+    const model = this.model, width = Math.max(1, this.pixelWidth), height = Math.max(1, this.pixelHeight);
+    const stats = `${model.vertexCount.toLocaleString("en-US")} ${model.vertexCount === 1 ? "vertex" : "vertices"} · ${model.triangleCount.toLocaleString("en-US")} ${model.triangleCount === 1 ? "triangle" : "triangles"}`;
+    if (this.mode === "cpu") {
+      const frame = projectModel3DWireframe(model, this.cameraState, width, height, this.edges);
+      this.cpu.visible = true;
+      this.surface.visible = false;
+      this.cpu.content = frame.text;
+      this.status.content = `CPU wireframe · ${stats}${frame.displayedEdges < frame.totalEdges ? ` · ${frame.displayedEdges}/${frame.totalEdges} edges sampled` : ""}${model.warnings.length ? `
+${model.warnings.join(" ")}` : ""}`;
+    } else if (this.mode === "webgpu" && this.engine && this.scene && this.camera) {
+      this.camera.aspect = width / (height * 2);
+      this.camera.position.set(...model3DCameraPosition(this.cameraState));
+      this.camera.lookAt(0, 0, 0);
+      this.camera.updateProjectionMatrix();
+      this.status.content = `WebGPU · ${stats}${model.warnings.length ? `
+${model.warnings.join(" ")}` : ""}`;
+      const staging = OptimizedBuffer.create(width, height, this.renderer.widthMethod, { owner: this.renderer.nativeScene, id: `model3d-stage:${this.modelId}` });
+      this.engine.setSize(width, height);
+      this.drawing = this.engine.drawScene(this.scene, staging, 0).then(() => {
+        if (!this.closing && !this.surface.isDestroyed && width === this.pixelWidth && height === this.pixelHeight) this.surface.frameBuffer.drawFrameBuffer(0, 0, staging);
+        else if (!this.closing) this.dirty = true;
+      }).catch(() => {
+        if (!this.closing) {
+          this.releaseScene();
+          this.engine?.destroy();
+          this.engine = void 0;
+          this.mode = "cpu";
+          this.dirty = true;
+        }
+      }).finally(() => {
+        staging.destroy();
+        this.drawing = void 0;
+        if (!this.closing) {
+          this.draw();
+          this.renderer.requestRender();
+        }
+      });
+    }
+  }
+  fit() {
+    this.cameraState = fitModel3D(this.cameraState, Math.max(1, this.pixelWidth) / (Math.max(1, this.pixelHeight) * 2));
+    this.changed();
+  }
+  reset() {
+    this.cameraState = initialModel3DCamera();
+    this.fit();
+  }
+  zoom(direction) {
+    this.cameraState = zoomModel3D(this.cameraState, direction);
+    this.changed();
+  }
+  handleKey(key) {
+    if (!this.active || this.closing || key.eventType === "release") return false;
+    let focused = this.renderer.currentFocusedRenderable;
+    while (focused && focused !== this) focused = focused.parent;
+    if (focused !== this) return false;
+    if (["left", "right", "up", "down"].includes(key.name)) this.cameraState = orbitModel3D(this.cameraState, key.name === "left" ? -1 : key.name === "right" ? 1 : 0, key.name === "up" ? -1 : key.name === "down" ? 1 : 0);
+    else if (key.sequence === "+" || key.sequence === "=" || key.sequence === "-") this.zoom(key.sequence === "-" ? 1 : -1);
+    else if (key.name === "f") this.fit();
+    else if (key.name === "r") this.reset();
+    else return false;
+    this.changed();
+    key.preventDefault();
+    key.stopPropagation();
+    return true;
+  }
+  pauseRendering() {
+    this.active = false;
+    this.drag = void 0;
+  }
+  releaseScene() {
+    const scene = this.scene;
+    this.scene = void 0;
+    this.camera = void 0;
+    scene?.traverse((node) => {
+      const mesh = node;
+      mesh.geometry?.dispose();
+      for (const material of Array.isArray(mesh.material) ? mesh.material : mesh.material ? [mesh.material] : []) material.dispose();
+    });
+  }
+  dispose() {
+    if (this.cleanup) return this.cleanup;
+    this.closing = true;
+    this.active = false;
+    this.epoch++;
+    this.renderer.removeFrameCallback(this.frame);
+    this.cleanup = (async () => {
+      try {
+        await this.loading;
+        await this.drawing;
+      } finally {
+        try {
+          this.releaseScene();
+        } finally {
+          try {
+            this.engine?.destroy();
+          } finally {
+            this.engine = void 0;
+            this.model = void 0;
+            this.edges = void 0;
+            this.resolveClosed();
+          }
+        }
+      }
+    })();
+    return this.cleanup;
+  }
+  destroySelf() {
+    void this.dispose();
+    super.destroySelf();
+  }
+};
+
 // packages/cli/src/tui/native/components/code.ts
 var aliases = {
   js: "javascript",
@@ -972,7 +1599,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 BoxRenderable2(context.renderer, {
+    this.root = new BoxRenderable3(context.renderer, {
       id: `block:${spec.id}`,
       flexDirection: "column",
       flexShrink: inline && !this.pixel ? 1 : 0,
@@ -997,6 +1624,7 @@ var NativeBlockView = class {
   progress;
   image;
   media;
+  model3d;
   terminal;
   collapsed = false;
   previousModelCollapsed;
@@ -1016,7 +1644,7 @@ var NativeBlockView = class {
     this.root.marginBottom = 0;
     this.root.flexDirection = spec.kind === "row" ? "row" : "column";
     if (spec.title) {
-      this.title = new TextRenderable2(renderer2, {
+      this.title = new TextRenderable3(renderer2, {
         id: `block-title:${spec.id}`,
         content: "",
         fg: colors.foreground,
@@ -1040,7 +1668,7 @@ var NativeBlockView = class {
       nativeControlFocus(this.title, 1);
       this.root.add(this.title);
     }
-    this.body = new BoxRenderable2(renderer2, {
+    this.body = new BoxRenderable3(renderer2, {
       id: `block-body:${spec.id}`,
       flexDirection: spec.kind === "row" ? "row" : "column",
       width: this.pixel ? "auto" : "100%",
@@ -1064,6 +1692,10 @@ var NativeBlockView = class {
       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 === "model3d" && spec.model3d) {
+      this.model3d = new NativeModel3DView(renderer2, spec.id, spec.model3d, colors);
+      this.context.modelViews?.add(this.model3d);
+      this.body.add(this.model3d);
     } else if (spec.kind === "image" && spec.imagePath) {
       this.image = new ImageRenderable2(renderer2, {
         id: `image:${spec.id}`,
@@ -1076,7 +1708,7 @@ var NativeBlockView = class {
           if (this.image) this.image.visible = false;
           if (this.text) {
             this.text.visible = true;
-            if (this.text instanceof TextRenderable2) this.text.content = styledText(this.spec.text ?? "Image unavailable");
+            if (this.text instanceof TextRenderable3) this.text.content = styledText(this.spec.text ?? "Image unavailable");
           }
           this.context.emit({ type: "action", action: "image-error", id: spec.id, text: String(error) });
         },
@@ -1086,7 +1718,7 @@ var NativeBlockView = class {
         }
       });
       this.body.add(this.image);
-      this.text = new TextRenderable2(renderer2, { id: `image-fallback:${spec.id}`, content: "", visible: false, width: "100%", wrapMode: "word", fg: colors.dim, selectable: true });
+      this.text = new TextRenderable3(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, {
@@ -1144,7 +1776,7 @@ var NativeBlockView = class {
       });
       this.body.add(this.text);
     } else if (spec.text !== void 0) {
-      this.text = new TextRenderable2(renderer2, {
+      this.text = new TextRenderable3(renderer2, {
         id: `text:${spec.id}`,
         content: "",
         width: this.pixel ? "auto" : "100%",
@@ -1157,7 +1789,7 @@ var NativeBlockView = class {
       this.body.add(this.text);
     }
     if (spec.kind === "progress") {
-      this.progress = new TextRenderable2(renderer2, {
+      this.progress = new TextRenderable3(renderer2, {
         id: `progress-track:${spec.id}`,
         width: "100%",
         height: 1,
@@ -1171,7 +1803,7 @@ var NativeBlockView = class {
       this.body.add(this.progress);
     }
     this.children = new NativeBlockList(this.context, this.body);
-    this.actions = new BoxRenderable2(renderer2, {
+    this.actions = new BoxRenderable3(renderer2, {
       id: `block-actions:${spec.id}`,
       flexDirection: "row",
       gap: 1,
@@ -1185,6 +1817,11 @@ var NativeBlockView = class {
       this.media.destroy();
       this.media = void 0;
     }
+    if (this.model3d) {
+      this.context.modelViews?.delete(this.model3d);
+      this.model3d.destroy();
+      this.model3d = void 0;
+    }
     this.children?.destroy();
     this.markdownSections?.destroy();
     this.markdownSections = void 0;
@@ -1222,7 +1859,7 @@ var NativeBlockView = class {
       this.markdownSections.destroy();
       this.markdownSections = void 0;
     }
-    if (this.text instanceof TextRenderable2) this.text.content = styledText(spec.kind === "image" ? spec.text ?? "Image unavailable" : spec.text);
+    if (this.text instanceof TextRenderable3) 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);
@@ -1231,6 +1868,7 @@ var NativeBlockView = class {
       else keepMarkdownFallback(this.text);
     }
     if (this.media && spec.media) this.media.update(spec.media);
+    if (this.model3d && spec.model3d) this.model3d.update(spec.model3d);
     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;
@@ -1241,7 +1879,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 TextRenderable2(this.context.renderer, {
+        const button = new TextRenderable3(this.context.renderer, {
           id: `block-action:${spec.id}:${action.id}`,
           content: plainText(action.label),
           fg: this.context.colors.foreground,
@@ -1310,11 +1948,12 @@ var NativeBlockView = class {
       this.progress.fg = colors.foreground;
       this.progress.bg = colors.background;
     }
-    for (const action of this.actions?.getChildren() ?? []) if (action instanceof TextRenderable2) {
+    for (const action of this.actions?.getChildren() ?? []) if (action instanceof TextRenderable3) {
       action.fg = colors.foreground;
       action.bg = colors.background;
     }
     this.media?.applyTheme(colors);
+    this.model3d?.applyTheme(colors);
     this.children?.applyTheme();
     this.markdownSections?.applyTheme();
   }
@@ -1324,6 +1963,11 @@ var NativeBlockView = class {
       this.media.destroy();
       this.media = void 0;
     }
+    if (this.model3d) {
+      this.context.modelViews?.delete(this.model3d);
+      this.model3d.destroy();
+      this.model3d = void 0;
+    }
     this.children?.destroy();
     this.markdownSections?.destroy();
     if (this.terminal) this.context.terminals.delete(this.spec.id);
@@ -1395,13 +2039,13 @@ var NativeBlockList = class {
 
 // packages/cli/src/tui/native/components/modals.ts
 import {
-  BoxRenderable as BoxRenderable4,
+  BoxRenderable as BoxRenderable5,
   CliRenderEvents as CliRenderEvents3,
   InputRenderable,
   ScrollBoxRenderable as ScrollBoxRenderable2,
   TextareaRenderable,
   TextAttributes as TextAttributes4,
-  TextRenderable as TextRenderable3
+  TextRenderable as TextRenderable4
 } from "@opentui/core";
 
 // packages/cli/src/tui/native/components/select.ts
@@ -1554,7 +2198,7 @@ var NativeSelectRenderable = class extends SelectRenderable {
 };
 
 // packages/cli/src/tui/native/components/corner-frame.ts
-import { BoxRenderable as BoxRenderable3, CliRenderEvents as CliRenderEvents2, RenderableEvents as RenderableEvents2, TextAttributes as TextAttributes3 } from "@opentui/core";
+import { BoxRenderable as BoxRenderable4, 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;
@@ -1593,7 +2237,7 @@ var NativeCornerFrame = class {
     this.colors = colors;
     this.renderer = renderer2;
     this.container = container;
-    this.chrome = new BoxRenderable3(renderer2, {
+    this.chrome = new BoxRenderable4(renderer2, {
       id: `${panel.id}:corners`,
       position: "absolute",
       left: 0,
@@ -1808,7 +2452,9 @@ function nativeModalWidth(spec, columns) {
   const blockWidth = (block, depth) => {
     if (depth > 16) return 0;
     const children = (block.children ?? []).slice(0, 256).map((child) => blockWidth(child, depth + 1));
+    const mediaWidth = block.kind === "model3d" ? 96 : block.kind === "media" ? block.media?.kind === "image" ? 96 : 64 : 0;
     return Math.min(limit, Math.max(
+      mediaWidth,
       longest(plainText(block.text)),
       longest(block.title ?? ""),
       actions(block.actions),
@@ -1840,7 +2486,7 @@ var NativeModalView = class {
     this.close = close2;
     this.spec = spec;
     const { renderer: renderer2, colors } = context;
-    this.root = new BoxRenderable4(renderer2, {
+    this.root = new BoxRenderable5(renderer2, {
       id: `modal:${spec.id}`,
       position: "absolute",
       top: 0,
@@ -1862,7 +2508,7 @@ var NativeModalView = class {
         }
       }
     });
-    this.panel = new BoxRenderable4(renderer2, {
+    this.panel = new BoxRenderable5(renderer2, {
       id: `modal-panel:${spec.id}`,
       flexDirection: "column",
       width: nativeModalWidth(spec, renderer2.terminalWidth),
@@ -1892,10 +2538,10 @@ var NativeModalView = class {
     this.panel.add(this.body);
     styleNativeScrollbars(this.body, colors);
     this.breadcrumb = this.addText(`modal-breadcrumb:${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 });
+    const header = new BoxRenderable5(renderer2, { id: `modal-heading:${spec.id}`, width: "100%", flexDirection: "row", gap: 1, flexShrink: 0 });
+    this.heading = new TextRenderable4(renderer2, { id: `modal-title:${spec.id}`, content: "", width: 0, flexGrow: 1, flexShrink: 1, wrapMode: "word", fg: colors.foreground });
     this.heading.maxHeight = 2;
-    this.headerActions = new BoxRenderable4(renderer2, { id: `modal-header-actions:${spec.id}`, flexDirection: "row", gap: 1, flexShrink: 1, minWidth: 0, maxWidth: "60%" });
+    this.headerActions = new BoxRenderable5(renderer2, { id: `modal-header-actions:${spec.id}`, flexDirection: "row", gap: 1, flexShrink: 1, minWidth: 0, maxWidth: "60%" });
     header.add(this.heading);
     header.add(this.headerActions);
     this.panel.add(header, 0);
@@ -1904,11 +2550,11 @@ var NativeModalView = class {
     else if (spec.kind === "input") this.buildInput();
     else if (spec.kind === "document") {
       this.document = this.body;
-      const documentBlocks = new BoxRenderable4(renderer2, { id: `modal-document-blocks:${spec.id}`, width: "100%", flexDirection: "column", flexShrink: 0 });
+      const documentBlocks = new BoxRenderable5(renderer2, { id: `modal-document-blocks:${spec.id}`, width: "100%", flexDirection: "column", flexShrink: 0 });
       this.body.add(documentBlocks);
       this.blocks = new NativeBlockList(this.modalContext(), documentBlocks);
     } else {
-      this.progress = new TextRenderable3(renderer2, {
+      this.progress = new TextRenderable4(renderer2, {
         id: `modal-progress:${spec.id}`,
         width: "100%",
         height: 1,
@@ -1920,14 +2566,14 @@ var NativeModalView = class {
         selectable: false
       });
       this.body.add(this.progress);
-      const progressBlocks = new BoxRenderable4(renderer2, { id: `modal-progress-blocks:${spec.id}`, flexDirection: "column", width: "100%" });
+      const progressBlocks = new BoxRenderable5(renderer2, { id: `modal-progress-blocks:${spec.id}`, flexDirection: "column", width: "100%" });
       this.body.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.panel);
     this.hints.maxHeight = 2;
-    this.actions = new BoxRenderable4(renderer2, { id: `modal-actions:${spec.id}`, flexDirection: "row", flexWrap: "wrap", flexShrink: 0, gap: 1, width: "100%", marginTop: 0 });
+    this.actions = new BoxRenderable5(renderer2, { id: `modal-actions:${spec.id}`, flexDirection: "row", flexWrap: "wrap", flexShrink: 0, gap: 1, width: "100%", marginTop: 0 });
     this.panel.add(this.actions);
     this.update(spec);
     renderer2.on(CliRenderEvents3.RESIZE, this.fit);
@@ -1967,15 +2613,17 @@ var NativeModalView = class {
   optionSignature = "";
   disposed = false;
   revealFocused = false;
+  mediaViews = /* @__PURE__ */ new Set();
+  modelViews = /* @__PURE__ */ new Set();
   addText(id, parent = this.body) {
-    const text = new TextRenderable3(this.context.renderer, { id, content: "", width: "100%", wrapMode: "word", flexShrink: 0, fg: this.context.colors.foreground, selectable: true });
+    const text = new TextRenderable4(this.context.renderer, { id, content: "", width: "100%", wrapMode: "word", flexShrink: 0, fg: this.context.colors.foreground, selectable: true });
     parent.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, {
+      const button = new TextRenderable4(this.context.renderer, {
         id: `modal-action:${this.spec.id}:${prefix}${action.id}`,
         content: plainText(action.label),
         minWidth: 0,
@@ -2114,7 +2762,10 @@ var NativeModalView = class {
       this.refreshMask();
       this.refreshOptions(patch.selectedIndex);
       this.blocks?.replace(spec.blocks ?? []);
-      if (this.progress) this.progress.content = nativeProgressText(spec.progress, true);
+      if (this.progress) {
+        this.progress.visible = spec.progress !== null;
+        this.progress.content = nativeProgressText(spec.progress ?? void 0, true);
+      }
       const headerActionsSignature = JSON.stringify(spec.headerActions ?? []);
       if (headerActionsSignature !== this.headerActionsSignature) {
         this.headerActionsSignature = headerActionsSignature;
@@ -2229,12 +2880,27 @@ var NativeModalView = class {
   }
   modalContext() {
     const scoped = Object.create(this.context);
+    scoped.mediaViews = this.mediaViews;
+    scoped.modelViews = this.modelViews;
     scoped.emit = (event) => {
       if (event.type === "action") this.emitAction(event.action, event.id);
       else this.context.emit(event);
     };
     return scoped;
   }
+  reconcileMedia(active) {
+    for (const media of this.mediaViews) media.reconcile(this.body.viewport, active && !this.frame.closing);
+    for (const model of this.modelViews) model.reconcile(this.body.viewport, active && !this.frame.closing);
+  }
+  pauseMedia() {
+    return [...[...this.mediaViews].map((media) => {
+      media.pausePlayback();
+      return media.closed;
+    }), ...[...this.modelViews].map((model) => {
+      model.pauseRendering();
+      return model.closed;
+    })];
+  }
   emitAction(action, value) {
     const current = this.current();
     this.context.emit({ type: "modal-action", id: this.spec.id, action, key: current?.item.key, index: current?.index, value });
@@ -2307,7 +2973,8 @@ var NativeModalView = class {
       return consume();
     }
     const focusedId = this.context.renderer.currentFocusedRenderable?.id ?? "";
-    if ((key.name === "return" || key.sequence === " ") && /^(?:block-title:|block-action:|modal-action:)/.test(focusedId)) return false;
+    for (const model of this.modelViews) if (model.handleKey(key)) return consume();
+    if ((key.name === "return" || key.sequence === " ") && /^(?:block-title:|block-action:|modal-action:|media-control:|media-preview:|model3d-control:)/.test(focusedId)) return false;
     if (this.spec.kind === "select") {
       if (key.name === "up" || key.name === "down" || key.name === "pageup" || key.name === "pagedown") {
         const amount = key.name.startsWith("page") ? Math.max(1, Math.floor((this.select?.height ?? 5) / (this.select?.showDescription ? 2 : 1))) : 1;
@@ -2428,7 +3095,7 @@ var NativeModalView = class {
       editor.placeholderColor = colors.foreground;
     }
     if (this.secretMask) this.secretMask.fg = colors.foreground;
-    for (const action of [...this.actions.getChildren(), ...this.headerActions.getChildren()]) if (action instanceof TextRenderable3) {
+    for (const action of [...this.actions.getChildren(), ...this.headerActions.getChildren()]) if (action instanceof TextRenderable4) {
       action.fg = colors.foreground;
       action.bg = colors.background;
     }
@@ -2487,6 +3154,7 @@ var NativeModalStack = class {
   close(id, result, notify = false) {
     const view = this.byId.get(id);
     if (!view) return;
+    view.pauseMedia();
     view.frame.close(() => {
       const wasActive = view === this.active;
       view.destroy();
@@ -2504,6 +3172,12 @@ var NativeModalStack = class {
   applyTheme() {
     for (const view of this.views) view.applyTheme();
   }
+  reconcileMedia() {
+    for (const view of this.views) view.reconcileMedia(view === this.active);
+  }
+  pauseMedia() {
+    return this.views.flatMap((view) => view.pauseMedia());
+  }
   destroy() {
     this.context.renderer.removePostProcessFn(this.dimUnderlay);
     for (const view of this.views) view.destroy();
@@ -2514,12 +3188,12 @@ var NativeModalStack = class {
 
 // packages/cli/src/tui/native/components/instruments.ts
 import {
-  BoxRenderable as BoxRenderable8,
-  RGBA as RGBA2,
+  BoxRenderable as BoxRenderable9,
+  RGBA as RGBA3,
   RenderableEvents as RenderableEvents6,
   ScrollBoxRenderable as ScrollBoxRenderable6,
   TextAttributes as TextAttributes8,
-  TextRenderable as TextRenderable7
+  TextRenderable as TextRenderable8
 } from "@opentui/core";
 
 // packages/cli/src/tui/native/components/device-history.ts
@@ -2576,12 +3250,12 @@ function deviceHistoryGraph(samples, field, width) {
 
 // packages/cli/src/tui/native/components/task-notes.ts
 import {
-  BoxRenderable as BoxRenderable5,
+  BoxRenderable as BoxRenderable6,
   CliRenderEvents as CliRenderEvents4,
   RenderableEvents as RenderableEvents3,
   ScrollBoxRenderable as ScrollBoxRenderable3,
   TextAttributes as TextAttributes5,
-  TextRenderable as TextRenderable4
+  TextRenderable as TextRenderable5
 } from "@opentui/core";
 
 // packages/cli/src/tui/native/components/instrument-format.ts
@@ -2654,7 +3328,7 @@ var marks = ["▨", "▧", "▥", "▦"];
 var reducedMotion = () => process.env["OMNIUS_TUI_REDUCE_MOTION"] === "1" || process.env["REDUCE_MOTION"] === "1";
 var safe = (value) => typeof value === "string" ? plainText(value) : "";
 var lines = (values) => Array.isArray(values) ? values.filter((value) => typeof value === "string").map(safe) : [];
-var column = (renderer2, id) => new BoxRenderable5(renderer2, { id, width: "100%", flexDirection: "column", flexShrink: 0, minWidth: 0 });
+var column = (renderer2, id) => new BoxRenderable6(renderer2, { id, width: "100%", flexDirection: "column", flexShrink: 0, minWidth: 0 });
 function visible(node, renderer2) {
   if (node.width < 1 || node.height < 1 || node.y >= renderer2.terminalHeight || node.y + node.height <= 0) return false;
   for (let current = node; current; current = current.parent) {
@@ -2702,7 +3376,7 @@ var ActiveBlocks = class {
     this.renderer.off(CliRenderEvents4.FRAME, this.sync);
   }
 };
-var Disclosure = class extends TextRenderable4 {
+var Disclosure = class extends TextRenderable5 {
   constructor(renderer2, id, activate, colors, ruled = false) {
     super(renderer2, {
       id,
@@ -2746,9 +3420,9 @@ var Disclosure = class extends TextRenderable4 {
   open = true;
   label = "";
   base = TextAttributes5.BOLD;
-  update(label3, open, attributes = TextAttributes5.BOLD) {
+  update(label3, open2, attributes = TextAttributes5.BOLD) {
     this.label = label3;
-    this.open = open;
+    this.open = open2;
     this.base = attributes;
     this.refresh();
     this.style();
@@ -2791,13 +3465,13 @@ function layerStatus(layer) {
   if (["verified", "integrated"].includes(status)) return `REPORTED ${status.toUpperCase()} · AUTHORITY NOT ATTESTED`;
   return ["bound", "recorded", "tool complete", "tool failed", "compact", "hold", "accepted", "requested", "held", "incomplete verification", "incomplete_verification", "incomplete", "awaiting_input", "not attached", "proposed", "specified", "ready", "pending", "waiting", "leased", "running", "candidate", "verifying", "blocked", "retryable", "completed", "failed", "rejected", "cancelled", "superseded", "received", "queued", "acknowledged", "visible_in_request", "reconciliation_required", "reconciled", "first_affected_action", "consumed"].includes(status) ? status.replace(/_/g, " ").toUpperCase() : "UNKNOWN";
 }
-var NativeTaskNotesView = class extends BoxRenderable5 {
+var NativeTaskNotesView = class extends BoxRenderable6 {
   constructor(renderer2, colors, reveal) {
     super(renderer2, { id: "omnius-task-notes", width: "100%", minWidth: 0, flexShrink: 0, flexDirection: "column", visible: false });
     this.renderer = renderer2;
     this.colors = colors;
     this.reveal = reveal;
-    const text = (id, attributes = 0) => new TextRenderable4(renderer2, { id, content: "", width: "100%", minWidth: 0, flexShrink: 0, fg: colors.foreground, bg: colors.background, attributes, wrapMode: "word" });
+    const text = (id, attributes = 0) => new TextRenderable5(renderer2, { id, content: "", width: "100%", minWidth: 0, flexShrink: 0, fg: colors.foreground, bg: colors.background, attributes, wrapMode: "word" });
     const heading = (id, label3, key) => {
       const node = new Disclosure(renderer2, id, () => {
         this.presentation[key] = !this.presentation[key];
@@ -2874,7 +3548,7 @@ var NativeTaskNotesView = class extends BoxRenderable5 {
       const saved = state?.sessionId ? this.sessions.get(state.sessionId) : void 0;
       this.presentation = saved ? { open: saved.open, tasks: saved.tasks, notes: saved.notes, layers: saved.layers } : { open: true, tasks: true, notes: true, layers: true };
       this.disclosures.clear();
-      if (saved) for (const [id, open] of Object.entries(saved.disclosures)) this.disclosures.set(id, open);
+      if (saved) for (const [id, open2] of Object.entries(saved.disclosures)) this.disclosures.set(id, open2);
     }
     this.state = state;
     this.visible = !!state;
@@ -2907,7 +3581,7 @@ var NativeTaskNotesView = class extends BoxRenderable5 {
           this.refreshRow(row);
         }, this.colors);
         title.on(RenderableEvents3.FOCUSED, () => this.reveal?.(title));
-        const details = new TextRenderable4(this.renderer, { id: `task:${item.id}:metadata`, content: "", width: "100%", minWidth: 0, wrapMode: "word", flexShrink: 0, fg: this.colors.foreground, bg: this.colors.background, attributes: TextAttributes5.DIM });
+        const details = new TextRenderable5(this.renderer, { id: `task:${item.id}:metadata`, content: "", width: "100%", minWidth: 0, wrapMode: "word", flexShrink: 0, fg: this.colors.foreground, bg: this.colors.background, attributes: TextAttributes5.DIM });
         const detailButton = new Disclosure(this.renderer, `task:${item.id}:details`, () => {
           const key = `meta:${item.id}`;
           this.disclosures.set(key, !this.disclosures.get(key));
@@ -2971,7 +3645,7 @@ var NativeTaskNotesView = class extends BoxRenderable5 {
       const id = String(note.id);
       let row = this.noteRows.get(id);
       if (!row) {
-        row = new TextRenderable4(this.renderer, { id: `note:${id}`, content: "", width: "100%", minWidth: 0, wrapMode: "word", flexShrink: 0, fg: this.colors.foreground, bg: this.colors.background });
+        row = new TextRenderable5(this.renderer, { id: `note:${id}`, content: "", width: "100%", minWidth: 0, wrapMode: "word", flexShrink: 0, fg: this.colors.foreground, bg: this.colors.background });
         this.noteRows.set(id, row);
       }
       const text = `□ ${safe(note.category).toUpperCase()} · ${safe(note.content)}${note.file ? `
@@ -2992,7 +3666,7 @@ var NativeTaskNotesView = class extends BoxRenderable5 {
       const id = safe(layer.id);
       let row = this.layerRows.get(id);
       if (!row) {
-        row = new TextRenderable4(this.renderer, { id: `work-layer:${id}`, content: "", width: "100%", minWidth: 0, wrapMode: "word", flexShrink: 0, fg: this.colors.foreground, bg: this.colors.background });
+        row = new TextRenderable5(this.renderer, { id: `work-layer:${id}`, content: "", width: "100%", minWidth: 0, wrapMode: "word", flexShrink: 0, fg: this.colors.foreground, bg: this.colors.background });
         this.layerRows.set(id, row);
       }
       const progress = typeof layer.progress === "number" && Number.isFinite(layer.progress) && layer.progress >= 0 && layer.progress <= 1 ? ` · ${Math.round(layer.progress * 100)}%` : "";
@@ -3051,7 +3725,7 @@ var NativeTaskNotesView = class extends BoxRenderable5 {
     if (!state) return;
     this.presentation = { open: state.open, tasks: state.tasks, notes: state.notes, layers: state.layers };
     this.disclosures.clear();
-    for (const [id, open] of Object.entries(state.disclosures)) this.disclosures.set(id, open);
+    for (const [id, open2] of Object.entries(state.disclosures)) this.disclosures.set(id, open2);
     for (const row of this.rows.values()) this.refreshRow(row);
     this.applyPresentation();
   }
@@ -3059,7 +3733,7 @@ var NativeTaskNotesView = class extends BoxRenderable5 {
     const targets = [];
     const visit = (node) => {
       if (!node.visible) return;
-      if (node instanceof TextRenderable4 && node.focusable) targets.push(node);
+      if (node instanceof TextRenderable5 && node.focusable) targets.push(node);
       for (const child of node.getChildren()) visit(child);
     };
     if (this.visible) visit(this);
@@ -3068,7 +3742,7 @@ var NativeTaskNotesView = class extends BoxRenderable5 {
   applyTheme(colors) {
     this.colors = colors;
     const visit = (node) => {
-      if (node instanceof TextRenderable4) {
+      if (node instanceof TextRenderable5) {
         node.fg = colors.foreground;
         node.bg = colors.background;
       }
@@ -3082,7 +3756,7 @@ var NativeTaskNotesView = class extends BoxRenderable5 {
     super.destroySelf();
   }
 };
-var NativeTaskStrip = class extends BoxRenderable5 {
+var NativeTaskStrip = class extends BoxRenderable6 {
   constructor(renderer2, colors, inspect) {
     super(renderer2, {
       id: "omnius-task-strip",
@@ -3101,7 +3775,7 @@ var NativeTaskStrip = class extends BoxRenderable5 {
     this.renderer = renderer2;
     this.colors = colors;
     this.inspect = inspect;
-    this.label = new TextRenderable4(renderer2, {
+    this.label = new TextRenderable5(renderer2, {
       id: "omnius-task-strip:heading",
       content: "TASKS ",
       height: 1,
@@ -3200,7 +3874,7 @@ var NativeTaskStrip = class extends BoxRenderable5 {
     for (const [index, item] of items.entries()) {
       let chip = this.chips.get(item.id);
       if (!chip) {
-        const label3 = new TextRenderable4(this.renderer, {
+        const label3 = new TextRenderable5(this.renderer, {
           id: `task-strip:${item.id}`,
           content: "",
           height: 1,
@@ -3280,26 +3954,26 @@ var NativeTaskStrip = class extends BoxRenderable5 {
 
 // packages/cli/src/tui/native/components/work-queue.ts
 import {
-  BoxRenderable as BoxRenderable6,
+  BoxRenderable as BoxRenderable7,
   CliRenderEvents as CliRenderEvents5,
   RenderableEvents as RenderableEvents4,
   ScrollBoxRenderable as ScrollBoxRenderable4,
   TextAttributes as TextAttributes6,
-  TextRenderable as TextRenderable5
+  TextRenderable as TextRenderable6
 } from "@opentui/core";
 var frames = ["▨", "▧", "▥", "▦"];
 var actionLabels = { queue: "QUEUE", apply: "APPLY", override: "OVERRIDE", cancel: "CANCEL", retry: "RETRY", up: "UP", down: "DOWN" };
 var safe2 = (value) => typeof value === "string" ? plainText(value) : "";
 var label = (value) => safe2(value).replace(/[\r\n\t]+/g, " ");
 var reducedMotion2 = () => process.env["OMNIUS_TUI_REDUCE_MOTION"] === "1" || process.env["REDUCE_MOTION"] === "1";
-var column2 = (renderer2, id) => new BoxRenderable6(renderer2, { id, width: "100%", minWidth: 0, flexDirection: "column", flexShrink: 0 });
+var column2 = (renderer2, id) => new BoxRenderable7(renderer2, { id, width: "100%", minWidth: 0, flexDirection: "column", flexShrink: 0 });
 var historyStates = /* @__PURE__ */ new Set(["completed", "applied", "failed", "cancelled"]);
 var activeStates = /* @__PURE__ */ new Set(["claiming", "running", "admitted"]);
 var receiptTime = (at) => {
   const date = new Date(typeof at === "number" ? at : NaN);
   return Number.isFinite(date.getTime()) ? date.toISOString() : "";
 };
-var WorkControl = class extends TextRenderable5 {
+var WorkControl = class extends TextRenderable6 {
   constructor(renderer2, id, activate, colors, disclosure = false, ruled = false, fixedWidth) {
     super(renderer2, {
       id,
@@ -3342,9 +4016,9 @@ var WorkControl = class extends TextRenderable5 {
   open = false;
   caption = "";
   base = 0;
-  update(caption, open = false, attributes = 0) {
+  update(caption, open2 = false, attributes = 0) {
     this.caption = caption;
-    this.open = open;
+    this.open = open2;
     this.base = attributes;
     this.refresh();
     this.style();
@@ -3361,7 +4035,7 @@ var WorkControl = class extends TextRenderable5 {
     if (this.plainText !== value) this.content = value;
   }
 };
-var NativeWorkQueueView = class extends BoxRenderable6 {
+var NativeWorkQueueView = class extends BoxRenderable7 {
   constructor(renderer2, colors, onAction, reveal) {
     super(renderer2, { id: "omnius-work-queue", width: "100%", minWidth: 0, flexDirection: "column", flexShrink: 0, visible: false });
     this.renderer = renderer2;
@@ -3422,7 +4096,7 @@ var NativeWorkQueueView = class extends BoxRenderable6 {
   frame = 0;
   disposed = false;
   text(id, attributes = 0) {
-    return new TextRenderable5(this.renderer, { id, content: "", width: "100%", minWidth: 0, flexShrink: 0, wrapMode: "word", fg: this.colors.foreground, bg: this.colors.background, attributes });
+    return new TextRenderable6(this.renderer, { id, content: "", width: "100%", minWidth: 0, flexShrink: 0, wrapMode: "word", fg: this.colors.foreground, bg: this.colors.background, attributes });
   }
   control(id, activate, disclosure = false, ruled = false, width) {
     const node = new WorkControl(this.renderer, id, activate, this.colors, disclosure, ruled, width);
@@ -3504,22 +4178,22 @@ var NativeWorkQueueView = class extends BoxRenderable6 {
     const metadata2 = this.text(`${id}:metadata`, TextAttributes6.DIM), original = this.text(`${id}:original`);
     details.add(original);
     details.add(metadata2);
-    const controls = new BoxRenderable6(this.renderer, { id: `${id}:actions`, width: "100%", minWidth: 0, flexDirection: "row", flexWrap: "wrap", flexShrink: 0 });
+    const controls = new BoxRenderable7(this.renderer, { id: `${id}:actions`, width: "100%", minWidth: 0, flexDirection: "row", flexWrap: "wrap", flexShrink: 0 });
     details.add(controls);
     const row = { item, root, title, details, original, metadata: metadata2, controls, actions: /* @__PURE__ */ new Map() };
     this.rows.set(item.id, row);
     return row;
   }
   refreshRow(row) {
-    const item = row.item, open = this.presentation.disclosures[item.id] === true;
+    const item = row.item, open2 = this.presentation.disclosures[item.id] === true;
     const state = label(item.state).replace(/_/g, " ").toUpperCase();
     const mark = item.state === "reviewing" || item.state === "claiming" ? frames[this.frame % frames.length] : item.state === "running" ? "▨" : item.state === "needs_review" || item.state === "interrupted" ? "▣" : historyStates.has(item.state) ? "■" : "□";
     row.title.update(
       `${mark} ${row.position === void 0 ? "" : `${row.position}. `}${state} · ${label(item.title) || "Untitled request"}`,
-      open,
+      open2,
       item.state === "queued" ? TextAttributes6.DIM : item.state === "running" || item.state === "needs_review" ? TextAttributes6.BOLD : 0
     );
-    row.details.visible = open;
+    row.details.visible = open2;
     const original = `ORIGINAL
 ${safe2(item.originalText)}`;
     if (row.original.plainText !== original) row.original.content = original;
@@ -3607,7 +4281,7 @@ RUN ${label(receipt.runId)}` : ""}`)
     const targets = [];
     const visit = (node) => {
       if (!node.visible) return;
-      if (node instanceof TextRenderable5 && node.focusable) targets.push(node);
+      if (node instanceof TextRenderable6 && node.focusable) targets.push(node);
       for (const child of node.getChildren()) visit(child);
     };
     if (this.visible) visit(this);
@@ -3616,7 +4290,7 @@ RUN ${label(receipt.runId)}` : ""}`)
   applyTheme(colors) {
     this.colors = colors;
     const visit = (node) => {
-      if (node instanceof TextRenderable5) {
+      if (node instanceof TextRenderable6) {
         node.fg = colors.foreground;
         node.bg = colors.background;
       }
@@ -3635,11 +4309,11 @@ RUN ${label(receipt.runId)}` : ""}`)
 
 // packages/cli/src/tui/native/components/workspace-files.ts
 import {
-  BoxRenderable as BoxRenderable7,
+  BoxRenderable as BoxRenderable8,
   RenderableEvents as RenderableEvents5,
   ScrollBoxRenderable as ScrollBoxRenderable5,
   TextAttributes as TextAttributes7,
-  TextRenderable as TextRenderable6
+  TextRenderable as TextRenderable7
 } from "@opentui/core";
 var label2 = (value) => plainText(value).replace(/[\r\n\t]/g, " ");
 var identity = (state) => state ? `${state.projectRoot}\0${state.sessionId ?? ""}` : "";
@@ -3651,7 +4325,7 @@ var activityLabel = (item) => {
   const kind = { read: "R", write: "W", create: "+", delete: "−" }[item.activity.kind];
   return kind + (item.activity.phase === "verified" ? "✓" : item.activity.phase === "failed" ? "!" : "…");
 };
-var FileControl = class extends TextRenderable6 {
+var FileControl = class extends TextRenderable7 {
   constructor(renderer2, id, colors, activate, ruled = false, width) {
     super(renderer2, {
       id,
@@ -3689,9 +4363,9 @@ var FileControl = class extends TextRenderable6 {
   ruled;
   caption = "";
   open = false;
-  setLabel(value, open = false) {
+  setLabel(value, open2 = false) {
     this.caption = value;
-    this.open = open;
+    this.open = open2;
     this.refresh();
     this.style();
   }
@@ -3706,7 +4380,7 @@ var FileControl = class extends TextRenderable6 {
     this.content = this.ruled ? formatSectionBanner(this.caption, this.width, this.open) : fitInstrumentText(this.caption, this.width);
   }
 };
-var NativeWorkspaceFilesView = class extends BoxRenderable7 {
+var NativeWorkspaceFilesView = class extends BoxRenderable8 {
   constructor(renderer2, colors, onAction, reveal) {
     super(renderer2, { id: "omnius-workspace-files", width: "100%", minWidth: 0, flexDirection: "column", flexShrink: 0, visible: false });
     this.renderer = renderer2;
@@ -3715,9 +4389,9 @@ var NativeWorkspaceFilesView = class extends BoxRenderable7 {
     this.reveal = reveal;
     this.header = new FileControl(renderer2, "omnius-workspace-files:heading", colors, () => this.setOpen(!this.open), true);
     this.add(this.header);
-    this.body = new BoxRenderable7(renderer2, { id: "omnius-workspace-files:body", width: "100%", minWidth: 0, minHeight: 0, flexDirection: "column", flexGrow: 1, flexBasis: 0, flexShrink: 1, visible: false });
+    this.body = new BoxRenderable8(renderer2, { id: "omnius-workspace-files:body", width: "100%", minWidth: 0, minHeight: 0, flexDirection: "column", flexGrow: 1, flexBasis: 0, flexShrink: 1, visible: false });
     this.add(this.body);
-    const heading = new BoxRenderable7(renderer2, { id: "omnius-workspace-files:location", width: "100%", minWidth: 0, height: 1, flexDirection: "row", gap: 1, flexShrink: 0 });
+    const heading = new BoxRenderable8(renderer2, { id: "omnius-workspace-files:location", width: "100%", minWidth: 0, height: 1, flexDirection: "row", gap: 1, flexShrink: 0 });
     this.body.add(heading);
     this.rootLabel = this.text("omnius-workspace-files:root");
     this.rootLabel.width = 0;
@@ -3751,7 +4425,7 @@ var NativeWorkspaceFilesView = class extends BoxRenderable7 {
       contentOptions: { flexDirection: "column", paddingRight: 1 }
     });
     this.body.add(this.scroll);
-    this.rootPages = new BoxRenderable7(renderer2, { id: "omnius-workspace-files:pages", width: "100%", height: 1, flexDirection: "row", gap: 2, flexShrink: 0 });
+    this.rootPages = new BoxRenderable8(renderer2, { id: "omnius-workspace-files:pages", width: "100%", height: 1, flexDirection: "row", gap: 2, flexShrink: 0 });
     this.body.add(this.rootPages);
     this.rootStart = new FileControl(renderer2, "omnius-workspace-files:start", colors, () => {
       this.lastClick = void 0;
@@ -3800,7 +4474,7 @@ var NativeWorkspaceFilesView = class extends BoxRenderable7 {
   layoutMinimum = 0;
   layoutExpanded = false;
   text(id) {
-    return new TextRenderable6(this.renderer, { id, content: "", width: "100%", minWidth: 0, flexShrink: 0, wrapMode: "word", fg: this.colors.foreground, bg: this.colors.background });
+    return new TextRenderable7(this.renderer, { id, content: "", width: "100%", minWidth: 0, flexShrink: 0, wrapMode: "word", fg: this.colors.foreground, bg: this.colors.background });
   }
   update(state) {
     if (state === this.state) return;
@@ -3861,7 +4535,7 @@ var NativeWorkspaceFilesView = class extends BoxRenderable7 {
       if (!pagePaths.has(item.path)) return;
       let page = this.pagination.get(item.path);
       if (!page) {
-        const root = new BoxRenderable7(this.renderer, { id: `${rowId(item.path)}:pages`, width: "100%", height: 1, minWidth: 0, flexDirection: "row", gap: 2, paddingLeft: Math.min(16, (item.depth + 1) * 2), flexShrink: 0 });
+        const root = new BoxRenderable8(this.renderer, { id: `${rowId(item.path)}:pages`, width: "100%", height: 1, minWidth: 0, flexDirection: "row", gap: 2, paddingLeft: Math.min(16, (item.depth + 1) * 2), flexShrink: 0 });
         const start = new FileControl(this.renderer, `${root.id}:start`, this.colors, () => {
           this.lastClick = void 0;
           this.action("start", item.path);
@@ -3911,7 +4585,7 @@ var NativeWorkspaceFilesView = class extends BoxRenderable7 {
     }
   }
   createRow(item) {
-    const root = new BoxRenderable7(this.renderer, { id: rowId(item.path), width: "100%", minWidth: 0, height: 1, flexShrink: 0, flexDirection: "row" });
+    const root = new BoxRenderable8(this.renderer, { id: rowId(item.path), width: "100%", minWidth: 0, height: 1, flexShrink: 0, flexDirection: "row" });
     const disclosure = new FileControl(this.renderer, `${root.id}:disclosure`, this.colors, () => {
       const current = this.rows.get(item.path)?.item;
       this.lastClick = void 0;
@@ -3922,7 +4596,7 @@ var NativeWorkspaceFilesView = class extends BoxRenderable7 {
     }, false, 2);
     disclosure.focusable = false;
     root.add(disclosure);
-    const name = new TextRenderable6(this.renderer, {
+    const name = new TextRenderable7(this.renderer, {
       id: `${root.id}:name`,
       content: "",
       width: 0,
@@ -4026,12 +4700,12 @@ var NativeWorkspaceFilesView = class extends BoxRenderable7 {
     if (!state) return;
     this.onAction?.({ type: "workspace-action", action, path, projectRoot: state.projectRoot, sessionId: state.sessionId, revision: state.revision, epoch: state.epoch, ...action === "visibility" ? { open: this.open } : {} });
   }
-  setOpen(open) {
-    this.open = open;
+  setOpen(open2) {
+    this.open = open2;
     this.lastClick = void 0;
     this.applyPresentation();
     this.action("visibility", "");
-    if (open) this.reveal?.(this.header);
+    if (open2) this.reveal?.(this.header);
   }
   get isOpen() {
     return this.open;
@@ -4074,7 +4748,7 @@ var NativeWorkspaceFilesView = class extends BoxRenderable7 {
   applyTheme(colors) {
     this.colors = colors;
     const visit = (node) => {
-      if (node instanceof TextRenderable6) {
+      if (node instanceof TextRenderable7) {
         node.fg = colors.foreground;
         node.bg = colors.background;
       }
@@ -4151,9 +4825,9 @@ var NativeWorkspaceReferenceRow = class extends ScrollBoxRenderable5 {
 };
 
 // packages/cli/src/tui/native/components/instruments.ts
-var foreground = RGBA2.defaultForeground();
-var background = RGBA2.defaultBackground();
-var SectionBanner = class extends TextRenderable7 {
+var foreground = RGBA3.defaultForeground();
+var background = RGBA3.defaultBackground();
+var SectionBanner = class extends TextRenderable8 {
   constructor(renderer2, title, id, activate) {
     super(renderer2, {
       id,
@@ -4208,7 +4882,7 @@ var SectionBanner = class extends TextRenderable7 {
     if (this.plainText !== next) this.content = next;
   }
 };
-var TelemetryRow = class extends TextRenderable7 {
+var TelemetryRow = class extends TextRenderable8 {
   constructor(renderer2, label3, id, reserved = 12) {
     super(renderer2, {
       id,
@@ -4254,7 +4928,7 @@ var SignalMeter = class extends TelemetryRow {
     this.update(formatSignalMeter(value, maximum));
   }
 };
-var InstrumentDivider = class extends TextRenderable7 {
+var InstrumentDivider = class extends TextRenderable8 {
   constructor(renderer2, actions) {
     super(renderer2, {
       id: "omnius-instrument-divider",
@@ -4351,17 +5025,17 @@ var InstrumentDivider = class extends TextRenderable7 {
     this.attributes = this.focused ? TextAttributes8.INVERSE : TextAttributes8.DIM;
   }
 };
-var DeviceMonitor = class extends BoxRenderable8 {
+var DeviceMonitor = class extends BoxRenderable9 {
   constructor(renderer2, action) {
     super(renderer2, { id: "omnius-devices", width: "100%", height: 5, minHeight: 3, flexShrink: 0, 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 TextRenderable7(renderer2, { id: "omnius-devices:summary", content: "--", width: "100%", height: 1, flexShrink: 0, fg: foreground, bg: background, wrapMode: "none", truncate: true });
+    this.summary = new TextRenderable8(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 TextRenderable7(renderer2, { id: "omnius-devices:load-history", content: "", width: "100%", height: 1, flexShrink: 0, fg: foreground, bg: background, wrapMode: "none", truncate: true });
-    this.compactMemory = new TextRenderable7(renderer2, { id: "omnius-devices:memory-history", content: "", width: "100%", height: 1, flexShrink: 0, fg: foreground, bg: background, wrapMode: "none", truncate: true });
+    this.compactLoad = new TextRenderable8(renderer2, { id: "omnius-devices:load-history", content: "", width: "100%", height: 1, flexShrink: 0, fg: foreground, bg: background, wrapMode: "none", truncate: true });
+    this.compactMemory = new TextRenderable8(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 ScrollBoxRenderable6(renderer2, {
@@ -4381,7 +5055,7 @@ var DeviceMonitor = class extends BoxRenderable8 {
     this.add(this.scroll);
     for (const [key, title] of [["cpu", "CPU"], ["memory", "MEMORY"], ["disk", "DISK"], ["network", "NETWORK"], ["gpu", "GPU"]])
       this.createSection(renderer2, key, title);
-    this.notes = new TextRenderable7(renderer2, {
+    this.notes = new TextRenderable8(renderer2, {
       id: "omnius-devices:notes",
       content: "",
       width: "100%",
@@ -4393,7 +5067,7 @@ var DeviceMonitor = class extends BoxRenderable8 {
       truncate: true
     });
     this.sections.get("gpu").body.add(this.notes);
-    const controls = new BoxRenderable8(renderer2, { id: "omnius-devices:controls", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 2 });
+    const controls = new BoxRenderable9(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");
@@ -4422,7 +5096,7 @@ var DeviceMonitor = class extends BoxRenderable8 {
   historySource = "";
   rows = /* @__PURE__ */ new Map();
   createSection(renderer2, key, title) {
-    const root = new BoxRenderable8(renderer2, {
+    const root = new BoxRenderable9(renderer2, {
       id: `omnius-devices:${key}`,
       width: "100%",
       minWidth: 0,
@@ -4438,7 +5112,7 @@ var DeviceMonitor = class extends BoxRenderable8 {
     });
     const header = new SectionBanner(renderer2, title, `${root.id}:heading`, () => this.toggleDeviceSection(key));
     header.on(RenderableEvents6.FOCUSED, () => this.revealReading(header));
-    const body = new BoxRenderable8(renderer2, { id: `${root.id}:body`, width: "100%", minWidth: 0, flexShrink: 0, flexDirection: "column", visible: this.sectionState[key] });
+    const body = new BoxRenderable9(renderer2, { id: `${root.id}:body`, width: "100%", minWidth: 0, flexShrink: 0, flexDirection: "column", visible: this.sectionState[key] });
     root.add(header);
     root.add(body);
     this.scroll.add(root);
@@ -4449,7 +5123,7 @@ var DeviceMonitor = class extends BoxRenderable8 {
       readings.set(label3, row);
       body.add(row);
     }
-    const detail = key !== "gpu" ? new TextRenderable7(renderer2, {
+    const detail = key !== "gpu" ? new TextRenderable8(renderer2, {
       id: `${root.id}:detail`,
       content: "",
       width: "100%",
@@ -4529,7 +5203,7 @@ var DeviceMonitor = class extends BoxRenderable8 {
     this.sections.get("network").detail.content = system?.network.source === "proc-net-dev" ? "All non-loopback interfaces" : system?.network.source === "netstat" ? "Interface en0" : "Interface counters unavailable";
   }
   button(renderer2, id, label3, activate) {
-    const button = new TextRenderable7(renderer2, {
+    const button = new TextRenderable8(renderer2, {
       id,
       content: label3,
       height: 1,
@@ -4592,7 +5266,7 @@ var DeviceMonitor = class extends BoxRenderable8 {
     for (const device of snapshot?.devices ?? []) {
       let row = this.rows.get(device.uuid);
       if (!row) {
-        const root = new BoxRenderable8(this._ctx, {
+        const root = new BoxRenderable9(this._ctx, {
           id: `omnius-device:${device.uuid}`,
           width: "100%",
           flexDirection: "column",
@@ -4611,9 +5285,9 @@ var DeviceMonitor = class extends BoxRenderable8 {
         title.on(RenderableEvents6.FOCUSED, () => this.revealReading(title));
         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 TextRenderable7(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 TextRenderable8(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 TextRenderable7(this._ctx, {
+        const reason = new TextRenderable8(this._ctx, {
           id: `${root.id}:reason`,
           content: "",
           width: "100%",
@@ -4757,7 +5431,7 @@ var DeviceMonitor = class extends BoxRenderable8 {
     ];
   }
 };
-var ChannelMap = class extends BoxRenderable8 {
+var ChannelMap = class extends BoxRenderable9 {
   constructor(renderer2, id, inspect, reveal) {
     super(renderer2, {
       id,
@@ -4789,7 +5463,7 @@ var ChannelMap = class extends BoxRenderable8 {
       if (!this.channels.has(agent.id))
         this.channels.set(agent.id, this.channels.size + 1);
       if (!this.rows.has(agent.id)) {
-        const row = new TextRenderable7(this._ctx, {
+        const row = new TextRenderable8(this._ctx, {
           id: `${this.id}:channel:${agent.id}`,
           content: "",
           width: "100%",
@@ -4855,7 +5529,7 @@ var ChannelMap = class extends BoxRenderable8 {
     }
   }
 };
-var InstrumentRail = class extends BoxRenderable8 {
+var InstrumentRail = class extends BoxRenderable9 {
   workQueue;
   workspaceFiles;
   taskNotes;
@@ -4942,7 +5616,7 @@ var InstrumentRail = class extends BoxRenderable8 {
       () => this.reveal(this.inferenceHeader)
     );
     this.scroll.add(this.inferenceHeader);
-    this.inference = new BoxRenderable8(renderer2, {
+    this.inference = new BoxRenderable9(renderer2, {
       id: `${id}:inference-body`,
       width: "100%",
       flexDirection: "column",
@@ -4957,7 +5631,7 @@ var InstrumentRail = class extends BoxRenderable8 {
     };
     addRow(this.inference, "route", "ROUTE");
     addRow(this.inference, "backend", "BACKEND");
-    this.model = new TextRenderable7(renderer2, {
+    this.model = new TextRenderable8(renderer2, {
       id: `${id}:model`,
       content: "MODEL --",
       width: "100%",
@@ -4986,7 +5660,7 @@ var InstrumentRail = class extends BoxRenderable8 {
     });
     this.contextHeader.on(RenderableEvents6.FOCUSED, () => this.reveal(this.contextHeader));
     this.inference.add(this.contextHeader);
-    this.contextDetails = new BoxRenderable8(renderer2, { id: `${id}:context-detail-body`, width: "100%", flexDirection: "column", flexShrink: 0, visible: false });
+    this.contextDetails = new BoxRenderable9(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");
@@ -5002,7 +5676,7 @@ var InstrumentRail = class extends BoxRenderable8 {
     this.routeAttemptsHeader.visible = false;
     this.routeAttemptsHeader.on(RenderableEvents6.FOCUSED, () => this.reveal(this.routeAttemptsHeader));
     this.inference.add(this.routeAttemptsHeader);
-    this.routeAttempts = new BoxRenderable8(renderer2, { id: `${id}:route-attempt-body`, width: "100%", flexDirection: "column", flexShrink: 0, visible: false });
+    this.routeAttempts = new BoxRenderable9(renderer2, { id: `${id}:route-attempt-body`, width: "100%", flexDirection: "column", flexShrink: 0, visible: false });
     this.inference.add(this.routeAttempts);
     this.sessionHeader = new SectionBanner(
       renderer2,
@@ -5015,7 +5689,7 @@ var InstrumentRail = class extends BoxRenderable8 {
       () => this.reveal(this.sessionHeader)
     );
     this.scroll.add(this.sessionHeader);
-    this.session = new BoxRenderable8(renderer2, {
+    this.session = new BoxRenderable9(renderer2, {
       id: `${id}:session-body`,
       width: "100%",
       flexDirection: "column",
@@ -5113,9 +5787,9 @@ var InstrumentRail = class extends BoxRenderable8 {
       let row = this.routeAttemptRows[index];
       if (!row) {
         const id = `${this.routeAttempts.id}:${index}`;
-        const box = new BoxRenderable8(this.ctx, { id, width: "100%", flexDirection: "column", flexShrink: 0 });
-        const title2 = new TextRenderable7(this.ctx, { id: `${id}:title`, width: "100%", height: 1, content: "", fg: foreground, bg: background, wrapMode: "none", truncate: true, flexShrink: 0 });
-        const detail2 = new TextRenderable7(this.ctx, { id: `${id}:detail`, width: "100%", content: "", fg: foreground, bg: background, attributes: TextAttributes8.DIM, wrapMode: "word", flexShrink: 0 });
+        const box = new BoxRenderable9(this.ctx, { id, width: "100%", flexDirection: "column", flexShrink: 0 });
+        const title2 = new TextRenderable8(this.ctx, { id: `${id}:title`, width: "100%", height: 1, content: "", fg: foreground, bg: background, wrapMode: "none", truncate: true, flexShrink: 0 });
+        const detail2 = new TextRenderable8(this.ctx, { id: `${id}:detail`, width: "100%", content: "", fg: foreground, bg: background, attributes: TextAttributes8.DIM, wrapMode: "word", flexShrink: 0 });
         box.add(title2);
         box.add(detail2);
         this.routeAttempts.add(box);
@@ -5138,7 +5812,7 @@ var InstrumentRail = class extends BoxRenderable8 {
   applyTheme(colors) {
     this.backgroundColor = colors.background;
     const visit = (node) => {
-      if (node instanceof TextRenderable7) {
+      if (node instanceof TextRenderable8) {
         node.fg = colors.foreground;
         node.bg = colors.background;
       }
@@ -6691,7 +7365,7 @@ var VimComposer = class {
 };
 
 // packages/cli/src/tui/native/components/selection-menu.ts
-import { BoxRenderable as BoxRenderable9, CliRenderEvents as CliRenderEvents6, TextAttributes as TextAttributes9, TextRenderable as TextRenderable8 } from "@opentui/core";
+import { BoxRenderable as BoxRenderable10, CliRenderEvents as CliRenderEvents6, TextAttributes as TextAttributes9, TextRenderable as TextRenderable9 } from "@opentui/core";
 var NativeSelectionMenu = class {
   constructor(renderer2, colors, copy, restoreFocus) {
     this.renderer = renderer2;
@@ -6719,7 +7393,7 @@ var NativeSelectionMenu = class {
     this.selectedText = text;
     this.anchor = { x, y };
     this.previousFocus = this.renderer.currentFocusedRenderable;
-    this.overlay = new BoxRenderable9(this.renderer, {
+    this.overlay = new BoxRenderable10(this.renderer, {
       id: "omnius-selection-menu",
       position: "absolute",
       left: 0,
@@ -6735,7 +7409,7 @@ var NativeSelectionMenu = class {
         event.stopPropagation();
       }
     });
-    this.panel = new BoxRenderable9(this.renderer, {
+    this.panel = new BoxRenderable10(this.renderer, {
       id: "omnius-selection-menu-panel",
       position: "absolute",
       width: 14,
@@ -6749,7 +7423,7 @@ var NativeSelectionMenu = class {
         event.stopPropagation();
       }
     });
-    const action = new TextRenderable8(this.renderer, {
+    const action = new TextRenderable9(this.renderer, {
       id: "omnius-selection-copy",
       content: "COPY",
       height: 1,
@@ -6798,7 +7472,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 TextRenderable8) {
+    for (const child of this.panel.getChildren()) if (child instanceof TextRenderable9) {
       child.fg = colors.foreground;
       child.bg = colors.background;
     }
@@ -6824,8 +7498,8 @@ var NativeSelectionMenu = class {
 };
 
 // packages/cli/src/tui/native/components/tab-strip.ts
-import { BoxRenderable as BoxRenderable10, CliRenderEvents as CliRenderEvents7, ScrollBoxRenderable as ScrollBoxRenderable7, SliderRenderable, TextAttributes as TextAttributes10, TextRenderable as TextRenderable9 } from "@opentui/core";
-var NativeTabStrip = class extends BoxRenderable10 {
+import { BoxRenderable as BoxRenderable11, CliRenderEvents as CliRenderEvents7, ScrollBoxRenderable as ScrollBoxRenderable7, SliderRenderable, TextAttributes as TextAttributes10, TextRenderable as TextRenderable10 } from "@opentui/core";
+var NativeTabStrip = class extends BoxRenderable11 {
   constructor(renderer2, options) {
     super(renderer2, {
       id: options.id,
@@ -6908,7 +7582,7 @@ var NativeTabStrip = class extends BoxRenderable10 {
     for (const action of items) {
       let entry = this.buttons.get(action.id);
       if (!entry) {
-        const button = new TextRenderable9(this.renderer, {
+        const button = new TextRenderable10(this.renderer, {
           id: `${this.options.prefix}:${action.id}`,
           content: "",
           height: 1,
@@ -6936,7 +7610,7 @@ var NativeTabStrip = class extends BoxRenderable10 {
         });
         button.on("blurred", () => this.style(entry));
         if (this.options.close) {
-          const close2 = new TextRenderable9(this.renderer, {
+          const close2 = new TextRenderable10(this.renderer, {
             id: `${this.options.prefix}-close:${action.id}`,
             content: "×",
             width: 1,
@@ -7071,13 +7745,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(), mediaViews: /* @__PURE__ */ new Set() };
+    this.context = { renderer: renderer2, colors, syntax: SyntaxStyle2.fromStyles({}, renderer2.nativeScene), emit, terminals: /* @__PURE__ */ new Map(), mediaViews: /* @__PURE__ */ new Set(), modelViews: /* @__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 BoxRenderable11(renderer2, {
+    this.root = new BoxRenderable12(renderer2, {
       id: "omnius-native",
       width: "100%",
       height: "100%",
@@ -7085,7 +7759,7 @@ var NativeFrontend = class {
       backgroundColor: colors.background
     });
     renderer2.root.add(this.root);
-    this.header = new BoxRenderable11(renderer2, {
+    this.header = new BoxRenderable12(renderer2, {
       id: "omnius-header",
       width: "100%",
       minWidth: 0,
@@ -7109,9 +7783,9 @@ var NativeFrontend = class {
         TextAttributes11.DIM
       );
     };
-    const headerRow = new BoxRenderable11(renderer2, { id: "omnius-header-row", width: "100%", minWidth: 0, minHeight: 1, flexDirection: "row", gap: 1 });
+    const headerRow = new BoxRenderable12(renderer2, { id: "omnius-header-row", width: "100%", minWidth: 0, minHeight: 1, flexDirection: "row", gap: 1 });
     this.header.add(headerRow);
-    this.identityMarker = new TextRenderable10(renderer2, {
+    this.identityMarker = new TextRenderable11(renderer2, {
       id: "omnius-marker",
       content: "■",
       width: 1,
@@ -7121,7 +7795,7 @@ var NativeFrontend = class {
       selectable: false
     });
     headerRow.add(this.identityMarker);
-    this.identity = new TextRenderable10(renderer2, {
+    this.identity = new TextRenderable11(renderer2, {
       id: "omnius-identity",
       content: "OMNIUS",
       fg: colors.foreground,
@@ -7159,9 +7833,9 @@ var NativeFrontend = class {
       verticalScrollbarOptions: { visible: false }
     });
     headerRow.add(this.headerActions);
-    this.headerPanel = new TextRenderable10(renderer2, { id: "omnius-header-panel", content: "", width: "100%", wrapMode: "word", visible: false });
+    this.headerPanel = new TextRenderable11(renderer2, { id: "omnius-header-panel", content: "", width: "100%", wrapMode: "word", visible: false });
     this.header.add(this.headerPanel);
-    this.detailButton = new TextRenderable10(renderer2, {
+    this.detailButton = new TextRenderable11(renderer2, {
       id: "omnius-details-toggle",
       content: "+ DETAILS",
       height: 1,
@@ -7202,7 +7876,7 @@ var NativeFrontend = class {
       }, 600);
       this.identityMarkerTimer.unref?.();
     }
-    this.sessionRow = new BoxRenderable11(renderer2, {
+    this.sessionRow = new BoxRenderable12(renderer2, {
       id: "omnius-sessions-row",
       width: "100%",
       height: 1,
@@ -7221,7 +7895,7 @@ var NativeFrontend = class {
       close: (id) => this.emitAction("session-close", id)
     });
     this.sessionRow.add(this.sessions);
-    this.newSession = new TextRenderable10(renderer2, {
+    this.newSession = new TextRenderable11(renderer2, {
       id: "omnius-session-new",
       content: "+ NEW",
       width: 5,
@@ -7250,7 +7924,7 @@ var NativeFrontend = class {
     this.newSession.on("focused", styleNew);
     this.newSession.on("blurred", styleNew);
     this.sessionRow.add(this.newSession);
-    this.sessionPicker = new TextRenderable10(renderer2, {
+    this.sessionPicker = new TextRenderable11(renderer2, {
       id: "omnius-session-picker",
       content: "SESSIONS",
       width: 8,
@@ -7279,9 +7953,9 @@ var NativeFrontend = class {
     this.sessionPicker.on("focused", stylePicker);
     this.sessionPicker.on("blurred", stylePicker);
     this.sessionRow.add(this.sessionPicker);
-    this.routeWarning = new TextRenderable10(renderer2, { id: "omnius-route-warning", content: "", width: "100%", wrapMode: "word", fg: colors.warning, attributes: TextAttributes11.BOLD | TextAttributes11.UNDERLINE, visible: false, flexShrink: 0 });
+    this.routeWarning = new TextRenderable11(renderer2, { id: "omnius-route-warning", content: "", width: "100%", wrapMode: "word", fg: colors.warning, attributes: TextAttributes11.BOLD | TextAttributes11.UNDERLINE, visible: false, flexShrink: 0 });
     this.root.add(this.routeWarning);
-    this.taskPane = new BoxRenderable11(renderer2, { id: "omnius-tasks", width: "100%", flexDirection: "column", maxHeight: 6, flexShrink: 0, overflow: "hidden", visible: false });
+    this.taskPane = new BoxRenderable12(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.taskStrip = new NativeTaskStrip(renderer2, colors, (id) => {
@@ -7292,9 +7966,9 @@ var NativeFrontend = class {
       renderer2.requestRender();
     });
     this.root.add(this.taskStrip);
-    this.body = new BoxRenderable11(renderer2, { id: "omnius-body", width: "100%", flexDirection: "row", flexGrow: 1, minHeight: 1 });
+    this.body = new BoxRenderable12(renderer2, { id: "omnius-body", width: "100%", flexDirection: "row", flexGrow: 1, minHeight: 1 });
     this.root.add(this.body);
-    this.transcriptPane = new BoxRenderable11(renderer2, { id: "omnius-transcript-pane", flexDirection: "column", flexGrow: 1, flexShrink: 1, minWidth: 0, minHeight: 1 });
+    this.transcriptPane = new BoxRenderable12(renderer2, { id: "omnius-transcript-pane", flexDirection: "column", flexGrow: 1, flexShrink: 1, minWidth: 0, minHeight: 1 });
     this.body.add(this.transcriptPane);
     this.scroll = new ScrollBoxRenderable8(renderer2, {
       id: "omnius-conversation",
@@ -7381,7 +8055,7 @@ var NativeFrontend = class {
       }
     });
     this.body.add(this.instruments);
-    this.embeddedPane = new BoxRenderable11(renderer2, {
+    this.embeddedPane = new BoxRenderable12(renderer2, {
       id: "omnius-editor-pane",
       width: "50%",
       flexShrink: 0,
@@ -7392,7 +8066,7 @@ var NativeFrontend = class {
       visible: false
     });
     this.body.add(this.embeddedPane);
-    this.liveButton = new TextRenderable10(renderer2, {
+    this.liveButton = new TextRenderable11(renderer2, {
       id: "omnius-live-button",
       content: "↓ Live",
       width: "100%",
@@ -7415,7 +8089,7 @@ var NativeFrontend = class {
     });
     this.liveButton.focusable = true;
     this.transcriptPane.add(this.liveButton);
-    this.queue = new TextRenderable10(renderer2, { id: "omnius-steering-queue", content: "", width: "100%", height: 1, wrapMode: "none", truncate: true, fg: colors.dim, visible: false, flexShrink: 0 });
+    this.queue = new TextRenderable11(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",
@@ -7434,9 +8108,9 @@ var NativeFrontend = class {
     this.suggestions.onActivate = () => this.acceptSuggestion();
     this.suggestions.on("itemSelected", () => this.acceptSuggestion());
     this.transcriptPane.add(this.suggestions);
-    this.status = new BoxRenderable11(renderer2, { id: "omnius-live-status", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 2, visible: false });
+    this.status = new BoxRenderable12(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 BoxRenderable11(renderer2, {
+    this.footer = new BoxRenderable12(renderer2, {
       id: "omnius-input-box",
       width: "100%",
       flexShrink: 0,
@@ -7445,7 +8119,7 @@ var NativeFrontend = class {
       flexDirection: "column"
     });
     this.root.add(this.footer);
-    this.viewTabsRow = new BoxRenderable11(renderer2, {
+    this.viewTabsRow = new BoxRenderable12(renderer2, {
       id: "omnius-view-tabs-row",
       width: "100%",
       height: 1,
@@ -7478,7 +8152,7 @@ var NativeFrontend = class {
         TextAttributes11.DIM
       );
     };
-    this.footerRule = new BoxRenderable11(renderer2, {
+    this.footerRule = new BoxRenderable12(renderer2, {
       id: "omnius-input-rule",
       width: "100%",
       height: 1,
@@ -7499,9 +8173,9 @@ var NativeFrontend = class {
       this.emit(event);
     });
     this.footer.add(this.workspaceReferences);
-    const inputRow = new BoxRenderable11(renderer2, { id: "omnius-input-row", width: "100%", flexDirection: "row", gap: 1 });
+    const inputRow = new BoxRenderable12(renderer2, { id: "omnius-input-row", width: "100%", flexDirection: "row", gap: 1 });
     this.footer.add(inputRow);
-    this.prompt = new TextRenderable10(renderer2, { id: "omnius-prompt", content: "❯", fg: colors.accent, wrapMode: "none", selectable: false, flexShrink: 0 });
+    this.prompt = new TextRenderable11(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",
@@ -7521,7 +8195,7 @@ var NativeFrontend = class {
       onCursorChange: () => this.editorChanged(),
       onSubmit: () => this.submit()
     });
-    this.vimMode = new TextRenderable10(renderer2, {
+    this.vimMode = new TextRenderable11(renderer2, {
       id: "omnius-vim-mode",
       content: "INSERT",
       height: 1,
@@ -7542,17 +8216,17 @@ var NativeFrontend = class {
       this.renderer.requestRender();
     });
     inputRow.add(this.editor);
-    this.enhance = new BoxRenderable11(renderer2, { id: "omnius-enhance", flexDirection: "row", gap: 1, flexShrink: 0, visible: false });
+    this.enhance = new BoxRenderable12(renderer2, { id: "omnius-enhance", flexDirection: "row", gap: 1, flexShrink: 0, visible: false });
     inputRow.add(this.enhance);
-    this.activity = new TextRenderable10(renderer2, { id: "omnius-activity", content: "", flexGrow: 1, minWidth: 0, height: 1, wrapMode: "none", truncate: true, visible: false, fg: colors.accent });
+    this.activity = new TextRenderable11(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 BoxRenderable11(renderer2, { id: "omnius-media", height: 1, minWidth: 0, flexShrink: 1, flexDirection: "row", gap: 1, visible: false });
-    this.mediaText = new TextRenderable10(renderer2, { id: "omnius-media-text", content: "", flexGrow: 1, minWidth: 0, wrapMode: "none", truncate: true, fg: colors.accent });
+    this.media = new BoxRenderable12(renderer2, { id: "omnius-media", height: 1, minWidth: 0, flexShrink: 1, flexDirection: "row", gap: 1, visible: false });
+    this.mediaText = new TextRenderable11(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 TextRenderable10(renderer2, { id: "omnius-mic-meter", width: 12, height: 1, flexShrink: 0, fg: colors.foreground, visible: false });
+    this.micTrack = new TextRenderable11(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 TextRenderable10(renderer2, {
+    this.copyFeedback = new TextRenderable11(renderer2, {
       id: "omnius-copy-feedback",
       content: "",
       height: 1,
@@ -7563,14 +8237,14 @@ var NativeFrontend = class {
       visible: false
     });
     this.status.add(this.copyFeedback);
-    this.metricsRow = new BoxRenderable11(renderer2, { id: "omnius-metrics-row", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 1 });
-    this.keyHints = new TextRenderable10(renderer2, { id: "omnius-key-hints", content: "F1 HELP  TAB FOCUS", height: 1, flexShrink: 0, attributes: TextAttributes11.DIM, fg: colors.foreground, selectable: false });
+    this.metricsRow = new BoxRenderable12(renderer2, { id: "omnius-metrics-row", width: "100%", height: 1, flexShrink: 0, flexDirection: "row", gap: 1 });
+    this.keyHints = new TextRenderable11(renderer2, { id: "omnius-key-hints", content: "F1 HELP  TAB FOCUS", height: 1, flexShrink: 0, attributes: TextAttributes11.DIM, fg: colors.foreground, selectable: false });
     this.metricsRow.add(this.keyHints);
-    this.metricsStartActions = new BoxRenderable11(renderer2, { id: "omnius-metrics-start-actions", flexDirection: "row", gap: 1, flexShrink: 0 });
+    this.metricsStartActions = new BoxRenderable12(renderer2, { id: "omnius-metrics-start-actions", flexDirection: "row", gap: 1, flexShrink: 0 });
     this.metricsRow.add(this.metricsStartActions);
-    this.metrics = new TextRenderable10(renderer2, { id: "omnius-metrics", content: "", height: 1, wrapMode: "none", truncate: true, fg: colors.dim, flexShrink: 1, flexGrow: 1, minWidth: 0 });
+    this.metrics = new TextRenderable11(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 BoxRenderable11(renderer2, { id: "omnius-metrics-end-actions", flexDirection: "row", gap: 1, flexShrink: 0 });
+    this.metricsEndActions = new BoxRenderable12(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());
@@ -7769,7 +8443,7 @@ var NativeFrontend = class {
     for (const action of actions) {
       const colors = this.context.colors;
       const attributes = action.disabled ? TextAttributes11.DIM : action.active ? TextAttributes11.BOLD | TextAttributes11.UNDERLINE : 0;
-      const button = new TextRenderable10(this.renderer, {
+      const button = new TextRenderable11(this.renderer, {
         id: `${prefix}:${action.id}`,
         content: styledText(action.label),
         flexShrink: 0,
@@ -8006,7 +8680,9 @@ 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();
-    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);
+    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 && !this.modals.active);
+    for (const model of this.context.modelViews ?? []) model.reconcile(this.scroll.viewport, !this.paused && !this.modals.active);
+    this.modals.reconcileMedia();
     const offset2 = this.offset;
     if (offset2 === 0) this.newEntries = 0;
     this.liveButton.visible = offset2 > 0;
@@ -8451,6 +9127,8 @@ var NativeFrontend = class {
   }
   pauseMedia() {
     for (const media of this.context.mediaViews ?? []) media.pausePlayback();
+    for (const model of this.context.modelViews ?? []) model.pauseRendering();
+    this.modals.pauseMedia();
   }
   captureInterfaceState() {
     this.flushLatestInput();
@@ -8515,6 +9193,11 @@ var NativeFrontend = class {
       media.pausePlayback();
       return media.closed;
     });
+    mediaClosed.push(...[...this.context.modelViews ?? []].map((model) => {
+      model.pauseRendering();
+      return model.closed;
+    }));
+    mediaClosed.push(...this.modals.pauseMedia());
     this.modals.destroy();
     this.content.destroy();
     this.tasks.destroy();
@@ -8663,7 +9346,7 @@ try {
     screenMode: "alternate-screen",
     consoleMode: "disabled",
     externalOutputMode: "passthrough",
-    backgroundColor: RGBA3.defaultBackground(),
+    backgroundColor: RGBA4.defaultBackground(),
     openConsoleOnError: false,
     targetFps: 60,
     maxFps: 60,