topotopo 0.2.0 → 0.3.0

package/dist/viewer/app/layers.js

@@ -11,6 +11,8 @@ export const MAX_UPLOAD = 512 * 1024 * 1024; // POST /api/inputs limit (src/view
 const stampOf = (f) => `${f.mtime}:${f.size}`;
 const errText = (e) => String(e?.message ?? e).replace(/^\[f\] /gm, '');
 export const layerId = (path) => `layer:${path}`;
+export const isInputImage = (path) => /\.(png|jpe?g|webp)$/i.test(path);
+export const inputImageURL = (f) => '/api/input_image?' + new URLSearchParams({ path: f.path, rev: stampOf(f) });
 
 export function createLayers(ctx) {
   const memo = ctx.store;
@@ -61,11 +63,19 @@ export function createLayers(ctx) {
     L.loaded.set(path, slot);
     L.errors.delete(path);
     entry(path); changed();
-    const r = await api.input(path);
     let src = null;
     try {
-      if (!r.ok) throw new Error(r.error);
-      src = await parseGLB(r.buf);
+      if (isInputImage(path)) {
+        const img = new Image(); img.src = inputImageURL(f); await img.decode();
+        const texture = new THREE.Texture(img); texture.colorSpace = THREE.SRGBColorSpace; texture.needsUpdate = true;
+        const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, side: THREE.DoubleSide });
+        material.name = 'image:' + path;
+        src = new THREE.Mesh(new THREE.PlaneGeometry(img.naturalWidth / img.naturalHeight, 1), material);
+      } else {
+        const r = await api.input(path);
+        if (!r.ok) throw new Error(r.error);
+        src = await parseGLB(r.buf);
+      }
     } catch (e) {
       if (L.loaded.get(path) === slot) {
         L.loaded.delete(path); L.shown.delete(path); remember();
@@ -106,9 +116,17 @@ export function createLayers(ctx) {
     const stamp = stampOf(f), have = L.info.get(path);
     if (have && have.stamp === stamp) return;
     L.info.set(path, { stamp, pending: true });
-    const r = await api.inputInfo(path);
+    let r;
+    if (isInputImage(path)) {
+      try {
+        const img = new Image(); img.src = inputImageURL(f); await img.decode();
+        r = { ok: true, summary: `${img.naturalWidth} × ${img.naturalHeight} · ${L.fileText(f)}` };
+      } catch { r = { ok: false, error: 'Cannot decode this image. Check that the file is a valid PNG, JPEG or WebP.' }; }
+    } else r = await api.inputInfo(path);
+    if (L.info.get(path)?.stamp !== stamp) return;
     if (r.ok) L.info.set(path, { stamp, summary: r.summary });
     else { L.info.set(path, { stamp, error: errText(r.error) }); L.errors.set(path, { stamp, msg: errText(r.error) }); }
+    if (r.ok) L.errors.delete(path);
     changed();
   }
 
@@ -187,6 +205,7 @@ export function createLayers(ctx) {
         const r = await uploadOne(f, files.length > 1 ? ` (${i + 1}/${files.length})` : '');
         if (r.path) {
           added.push(r.path);
+          if (/\.(png|jpe?g|webp)$/i.test(r.path)) { await L.refresh(); await ctx.outputs?.openInput(r.path); continue; }
           // show it at once, and select it
           L.shown.add(r.path);
           for (const m of [L.info, L.errors]) m.delete(r.path);

package/dist/viewer/app/main.js

@@ -11,11 +11,13 @@ import { createGuides, PLACE_KINDS } from './guides.js';
 import { createSelect } from './select.js';
 import { createOutliner } from './outliner.js';
 import { createProps } from './props.js';
+import { createOutputPanel } from './outputs.js';
 import { createSelection, parseId } from './selection.js';
 import { createUndo } from './undo.js';
 import { EDITOR_NAMES } from './markers.js';
 import * as KM from './keymap.js';
 import { fmtStep, fmtSize, fmtNum } from './units.js';
+import { connectedLine, graphsLine } from './status.js';
 
 const $ = (id) => document.getElementById(id);
 const BG = new THREE.Color('#2b2d31');
@@ -84,8 +86,8 @@ const grid = createGrid(scene);
 ctx.sceneBounds = ({ pictures = true, guides = true } = {}) => {
   const b = new THREE.Box3();
   if (ctx.output.mesh && ctx.output.visible) b.union(ctx.output.mesh.bounds());
-  b.union(ctx.layers.bounds({ pictures }));
-  if (guides) for (const m of ctx.guides.list) if (!ctx.guides.hidden.has(m.id)) b.union(ctx.guides.bounds(m));
+  if (!ctx.isolated) b.union(ctx.layers.bounds({ pictures }));
+  if (guides && !ctx.isolated) for (const m of ctx.guides.list) if (!ctx.guides.hidden.has(m.id)) b.union(ctx.guides.bounds(m));
   return b;
 };
 let sphere = { center: new THREE.Vector3(), radius: 10 }, sphereAt = -1;
@@ -134,7 +136,7 @@ ctx.guides = createGuides(ctx);
 ctx.select = createSelect(ctx);
 ctx.surfacePoint = ctx.select.surfacePoint;
 ctx.planePoint = ctx.select.planePoint;
-const outliner = createOutliner(ctx, $('tree'));
+const outliner = createOutliner(ctx, { scene: $('tree'), inputs: $('inputs-list') });
 const props = createProps(ctx);
 
 // ------------------------------------------------------------------------------------------- graphs and the output
@@ -144,6 +146,7 @@ ctx.graph = {
   /** the node whose result is shown: the chosen one, else the graph's output */
   shownNode() { const g = this.current(); return this.node ?? g?.output ?? null; },
   show(node) {
+    if (ctx.outputs?.active) ctx.outputs.scene();
     const g = this.current();
     this.node = !g || node === g.output ? null : node;
     ctx.selection.apply(['out']);
@@ -165,10 +168,12 @@ const refreshGraphs = ctx.coalesce(async () => {
   const g = G.current();
   if (G.node && !g?.nodes.some((n) => n.name === G.node)) G.node = null;
   props.controls.render(g, issued);
-  if (!g) ctx.message('no graphs yet — build one via MCP');
+  const line = graphsLine(msgEl.textContent, list.length);
+  if (line) ctx.message(line);
   ctx.emit('graphs');
 });
 $('graph').onchange = (e) => {
+  if (ctx.outputs?.active) ctx.outputs.scene();
   ctx.graph.name = e.target.value; ctx.graph.node = null;
   local.set('graph', ctx.graph.name);
   props.controls.render(ctx.graph.current());
@@ -178,13 +183,14 @@ $('graph').onchange = (e) => {
 
 let firstFrame = !views.placed;
 const loadGeo = ctx.coalesce(async () => {
+  if (ctx.outputs?.active) { await ctx.outputs.refresh(); return; }
   const G = ctx.graph, o = ctx.output;
   if (!G.name) return;
   const graph = G.name, node = G.node ?? '';
   o.loading = true; ctx.emit('output');
   const r = await api.geo(graph, node);
   o.loading = false;
-  if (graph !== G.name) return;
+  if (graph !== G.name || node !== (G.node ?? '') || ctx.outputs?.active) return;
   if (!r.ok) {
     // the last good geometry stays
     o.error = r.error;
@@ -193,6 +199,7 @@ const loadGeo = ctx.coalesce(async () => {
   }
   let src;
   try { src = await parseGLB(r.buf); } catch (e) { o.error = String(e?.message ?? e); ctx.emit('output'); updateCook(); return; }
+  if (graph !== G.name || node !== (G.node ?? '') || ctx.outputs?.active) { new MeshObject('', src).dispose(); return; }
   const prev = o.mesh;
   o.mesh = new MeshObject('out', src);
   o.mesh.onReady = () => { ctx.requestRender(); ctx.emit('output'); };
@@ -215,6 +222,9 @@ const loadGeo = ctx.coalesce(async () => {
 
 function updateCook() {
   const el = $('cook'), o = ctx.output, g = ctx.graph.current();
+  if (ctx.outputs?.active?.kind === 'image') {
+    const image = ctx.outputs.active; el.textContent = image.width ? `${image.width} × ${image.height} · ${image.layers?.length ?? 1} layer(s)` : image.label; return;
+  }
   if (!g) { el.textContent = ''; return; }
   const m = /geometry: ([\d,]+) points, ([\d,]+) prims/.exec(o.summary ?? '');
   const parts = [`${g.name}/${ctx.graph.shownNode() ?? ''}`];
@@ -284,7 +294,8 @@ function drawViews() {
     renderer.setScissor(r.x, glY, r.w, r.h);
     renderer.clear();
     for (const m of LINE_MATERIALS) m.resolution.set(r.w, r.h);
-    for (const e of entries) { e.mesh.root.visible = !!e.visible; e.mesh.setMode(modeOf(e.display ?? 'view', s.shading)); }
+    for (const e of entries) { e.mesh.root.visible = e.id === 'out' && ctx.isolated ? !ctx.previewEmpty : !!e.visible; e.mesh.setMode(modeOf(e.display ?? 'view', s.shading)); }
+    ctx.layersRoot.visible = ctx.guidesRoot.visible = !ctx.isolated;
     steps[i] = grid.prepare(cam, views.worldPerPixel(i));
     lights.follow(camera, cam.target);
     renderer.render(scene, camera);
@@ -395,12 +406,12 @@ for (const g of document.querySelectorAll('.grip')) {
 
 // ------------------------------------------------------------------------------------------- actions
 /** Keys go to a field being typed in (text and number fields, menus), not to the keymap. */
-const TEXT_INPUTS = new Set(['text', 'number', 'search', 'email', 'url', 'password', 'tel']);
-const typing = (t) => (t instanceof HTMLInputElement && TEXT_INPUTS.has(t.type)) || t instanceof HTMLSelectElement || t instanceof HTMLTextAreaElement || !!t?.isContentEditable;
+const typing = (t) => t instanceof HTMLInputElement || t instanceof HTMLSelectElement || t instanceof HTMLTextAreaElement || !!t?.isContentEditable || !!t?.closest?.('button, summary, [role="button"], [role="menu"]');
 const selectedOf = (kind) => ctx.selection.items.filter((id) => ctx.objects.get(parseId(id).obj)?.kind === kind && parseId(id).piece === null);
 const hiddenByH = { layers: new Set() };
 const DISPLAY_CYCLE = ['shaded', 'wire', 'shadedWire'];
 function run(action) {
+  if (document.querySelector('dialog[open]') || document.getElementById('image-view')?.hidden === false) return;
   const slot = views.slots[views.active];
   switch (action) {
     case 'frameSelection': return frameSelection();
@@ -456,6 +467,7 @@ const undoKeys = () => KM.overlayRows(preset).find((r) => r.label.startsWith('un
 // keys; Space is a tap (Maya) or a held modifier (Houdini)
 const space = { down: false, tap: false, t: 0 };
 addEventListener('keydown', (e) => {
+  if (document.querySelector('dialog[open]')) return;
   if (typing(e.target)) return;
   if (e.code === 'Space' || e.key === ' ') {
     e.preventDefault();
@@ -470,6 +482,7 @@ addEventListener('keydown', (e) => {
   run(action);
 });
 addEventListener('keyup', (e) => {
+  if (document.querySelector('dialog[open]')) { space.down = false; return; }
   if (e.code === 'Space' || e.key === ' ') {
     const tap = space.down && space.tap && performance.now() - space.t < 400;
     space.down = false;
@@ -496,7 +509,9 @@ canvas.addEventListener('pointerdown', (e) => {
   e.preventDefault();
   if (nav) {
     const sel = ctx.select.selectionBounds();
-    drag = { kind: 'nav', nav, slot, x, y, id: e.pointerId, pivot: sel.isEmpty() ? null : sel.getCenter(new THREE.Vector3()) };
+    const topo = preset === 'topotopo', hit = topo ? ctx.select.navigationPoint(slot, x, y) : null;
+    const pivot = topo ? views.anchor(slot, hit) : sel.isEmpty() ? null : sel.getCenter(new THREE.Vector3());
+    drag = { kind: 'nav', nav: topo && nav === 'tumble' && views.cam(slot).ortho ? 'track' : nav, slot, x, y, id: e.pointerId, pivot, topo };
     viewport.classList.add('nav');
     return;
   }
@@ -511,7 +526,7 @@ canvas.addEventListener('pointermove', (e) => {
       const dx = x - drag.x, dy = y - drag.y;
       drag.x = x; drag.y = y;
       if (drag.nav === 'tumble') views.tumble(drag.slot, dx, dy, drag.pivot);
-      else if (drag.nav === 'track') views.track(drag.slot, dx, dy);
+      else if (drag.nav === 'track') views.track(drag.slot, dx, dy, drag.topo ? views.cam(drag.slot).pivot : undefined);
       else views.dolly(drag.slot, Math.exp(-(dx - dy) * 0.006));
       ctx.requestRender();
     } else if (drag.kind === 'place') ctx.guides.pointerMove(drag.slot, x, y);
@@ -537,6 +552,8 @@ const endDrag = (e, cancel = false) => {
 };
 canvas.addEventListener('pointerup', (e) => endDrag(e));
 canvas.addEventListener('pointercancel', (e) => endDrag(e, true));
+canvas.addEventListener('lostpointercapture', (e) => endDrag(e, true));
+addEventListener('blur', () => { if (drag) endDrag({ pointerId: drag.id, clientX: 0, clientY: 0 }, true); });
 canvas.addEventListener('pointerleave', () => { if (!drag) { cursor.slot = -1; ctx.select.hover(-1); ctx.guides.leave(); requestOverlays(); } });
 canvas.addEventListener('contextmenu', (e) => e.preventDefault());
 canvas.addEventListener('wheel', (e) => {
@@ -545,7 +562,11 @@ canvas.addEventListener('wheel', (e) => {
   const { x, y } = at(e), slot = views.slotAt(x, y);
   if (slot < 0) return;
   const dy = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaMode === 2 ? e.deltaY * 400 : e.deltaY;
-  views.dolly(slot, Math.exp(Math.max(-1, Math.min(1, dy * 0.0015))), views.targetPlanePoint(slot, x, y));
+  const factor = Math.exp(Math.max(-1, Math.min(1, dy * 0.0015)));
+  if (preset === 'topotopo') {
+    const hit = ctx.select.navigationPoint(slot, x, y); if (hit) views.anchor(slot, hit);
+    views.zoomAt(slot, factor, hit ?? views.targetPlanePoint(slot, x, y, views.cam(slot).pivot));
+  } else views.dolly(slot, factor, views.targetPlanePoint(slot, x, y));
   clearTimeout(canvas.wheelTimer); canvas.wheelTimer = setTimeout(saveViews, 300);
   ctx.requestRender();
 }, { passive: false });
@@ -561,18 +582,52 @@ ctx.on('*', (type) => {
 });
 ctx.selection.onChange(() => ctx.emit('selection'));
 
+// Each deliverable owns a camera; the scene view keeps its camera and layer visibility.
+const outputViews = new Map();
+let sceneView = null, previewSerial = 0;
+let sceneGraph = null;
+ctx.rememberOutputView = (id) => { if (id) outputViews.set(id, views.toJSON()); else if (!ctx.isolated) { sceneView = views.placed ? views.toJSON() : null; sceneGraph = { name: ctx.graph.name, node: ctx.graph.node }; } };
+ctx.hideModelPreview = () => { previewSerial++; ctx.previewEmpty = true; ctx.selection.clear(); ctx.requestRender(); };
+ctx.outputGraph = (item) => {
+  if (item.graph && ctx.graph.list.some((g) => g.name === item.graph)) {
+    ctx.graph.name = item.graph; ctx.graph.node = item.node; $('graph').value = item.graph;
+    props.controls.render(ctx.graph.current());
+  }
+};
+ctx.previewOutput = async (item, bytes, update) => {
+  const serial = ++previewSerial, src = await parseGLB(bytes);
+  if (serial !== previewSerial || ctx.outputs.active?.id !== item.id) { new MeshObject('', src).dispose(); return; }
+  const mesh = new MeshObject('out', src); mesh.onReady = () => ctx.requestRender();
+  ctx.output.mesh?.dispose(); ctx.output.mesh = mesh; ctx.outputRoot.add(mesh.root); ctx.previewEmpty = false;
+  ctx.output.summary = item.summary ?? ''; ctx.output.error = item.error ?? null;
+  ctx.outputGraph(item);
+  outEntry(); ctx.selection.clear();
+  if (!update || !outputViews.has(item.id)) {
+    const saved = outputViews.get(item.id);
+    if (saved) views.load(saved);
+    else { layoutViews(); views.frame(views.active, mesh.bounds()); }
+    outputViews.set(item.id, views.toJSON());
+  }
+  firstFrame = false; ctx.emit('output'); ctx.requestRender(); syncTop();
+};
+ctx.restoreScene = () => { previewSerial++; ctx.previewEmpty = false; if (sceneView) views.load(sceneView); else firstFrame = true; if (sceneGraph) { ctx.graph.name = sceneGraph.name; ctx.graph.node = sceneGraph.node; $('graph').value = ctx.graph.name; props.controls.render(ctx.graph.current()); } loadGeo(); ctx.requestRender(); };
+ctx.frameOutput = frameAll;
+ctx.outputs = createOutputPanel(ctx);
+
 const es = api.events({
   open() {
-    ctx.message('live — updates on every build, edit and file save');
+    ctx.message(connectedLine(ctx.graph.list.length));
     // after a reconnect the server may have restarted: fetch everything again
-    if (es.opened) { refreshGraphs().then(loadGeo); ctx.layers.refresh(); ctx.layers.loadWhere(); ctx.guides.load(); }
+    if (es.opened) { refreshGraphs().then(loadGeo); ctx.outputs.refresh(); ctx.layers.refresh(); ctx.layers.loadWhere(); ctx.guides.load(); }
     es.opened = true;
   },
   error() { ctx.message('disconnected (server stopped?)', 'err'); },
   async message(ev) {
-    if (ev.inputs !== undefined) { ctx.layers.refresh(); return; }
+    if (ev.outputs !== undefined) { ctx.outputs.refresh(); return; }
+    if (ev.inputs !== undefined) { ctx.layers.refresh(); ctx.outputs.refresh(); return; }
     await refreshGraphs();
     if (ev.graph === ctx.graph.name) loadGeo();
+    ctx.outputs.refresh();
   },
 });
 
@@ -581,6 +636,7 @@ outliner.render();
 props.render();
 ctx.requestRender();
 await refreshGraphs();
+await ctx.outputs.refresh();
 loadGeo();
 ctx.layers.refresh();
 ctx.layers.loadWhere();

package/dist/viewer/app/outliner.js

@@ -1,28 +1,60 @@
-// The outliner (docs/design/viewer.md section 2): one tree of the output (the node being shown), the graph's nodes
-// (click one to show its result; the square is its display flag), the inputs (reference layers) and the guides.
+// The left panel (docs/design/viewer.md section 2): three tabs. Scene is the outliner tree: the output (the node being
+// shown), the graph's nodes (click one to show its result; the square is its display flag) and the guides. Outputs
+// is the published results (outputs.js). Inputs is the files in inputs/ (reference layers) with Add input.
 // Rows carry a visibility eye, a display mode and the name; selecting a row selects in the viewport and back.
 // Rows are kept and updated in place, so an open menu survives a refresh.
 import { opOf } from './selection.js';
 import { DISPLAY_MODES, LAYER_MODES } from './scene.js';
 import { EDITOR_NAMES } from './markers.js';
 import { fmtBytes } from './units.js';
-import { layerId } from './layers.js';
+import { layerId, isInputImage, inputImageURL } from './layers.js';
 import { guideId } from './guides.js';
 
 const EYE = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8 12.1 12.5 8 12.5 1.5 8 1.5 8z"/><circle class="pupil" cx="8" cy="8" r="2"/><path class="slash" d="M3 13L13 3"/></svg>';
 const el = (tag, cls, text) => { const e = document.createElement(tag); if (cls) e.className = cls; if (text !== undefined) e.textContent = text; return e; };
 
-export function createOutliner(ctx, host) {
+export function createOutliner(ctx, panes) {
+  // the tabs: one pane shown, remembered per browser; arrow keys move between tabs
+  const tabs = [...document.querySelectorAll('#outliner [data-tab]')], paneEls = [...document.querySelectorAll('#outliner [data-pane]')];
+  let tab = ctx.store.get('outliner.tab', 'outputs');
+  const showTab = (name, focus = false) => {
+    if (!tabs.some((t) => t.dataset.tab === name)) name = 'outputs';
+    tab = name; ctx.store.set('outliner.tab', name);
+    for (const t of tabs) { const on = t.dataset.tab === name; t.classList.toggle('on', on); t.setAttribute('aria-selected', String(on)); t.tabIndex = on ? 0 : -1; if (on && focus) t.focus(); }
+    for (const p of paneEls) p.hidden = p.dataset.pane !== name;
+  };
+  for (const t of tabs) {
+    t.onclick = () => showTab(t.dataset.tab);
+    t.onkeydown = (e) => {
+      if (!['ArrowLeft', 'ArrowRight'].includes(e.key)) return;
+      e.preventDefault();
+      const i = tabs.indexOf(t), next = tabs[(i + (e.key === 'ArrowRight' ? 1 : tabs.length - 1)) % tabs.length];
+      showTab(next.dataset.tab, true);
+    };
+  }
+  showTab(tab);
+  const tabCount = (name, n) => { const c = document.querySelector(`#tab-${name} .count`); if (c) c.textContent = n ? String(n) : ''; };
+  const picker = document.getElementById('input-file');
+  document.getElementById('add-input').onclick = () => picker.click();
+  picker.onchange = () => { ctx.layers.upload([...picker.files], []); picker.value = ''; };
+  const sizes = [32, 56, 88], sizeButton = document.getElementById('thumb-size');
+  let size = ctx.store.get('outliner.thumbnailSize', 56);
+  if (!sizes.includes(size)) size = 56;
+  const applySize = () => { document.getElementById('outliner').style.setProperty('--thumb-size', size + 'px'); sizeButton.textContent = size + ' px'; };
+  sizeButton.onclick = () => { size = sizes[(sizes.indexOf(size) + 1) % sizes.length]; ctx.store.set('outliner.thumbnailSize', size); applySize(); };
+  applySize();
   const closed = new Set(ctx.store.get('outliner.closed', []));
   const sections = new Map();
-  const section = (key, title) => {
+  /** A collapsible section in a pane (the scene tree by default); a headless one is just rows (the Inputs tab). */
+  const section = (key, title, pane = panes.scene, headless = false) => {
     let s = sections.get(key);
     if (s) return s;
-    const box = el('div', 'sec' + (closed.has(key) ? ' closed' : '')), head = el('div', 'sh'), rows = el('div', 'rows'), count = el('span', 'count');
+    const box = el('div', 'sec' + (closed.has(key) && !headless ? ' closed' : '')), head = el('div', 'sh'), rows = el('div', 'rows'), count = el('span', 'count');
     head.append(el('span', '', title), count);
     head.onclick = () => { box.classList.toggle('closed'); if (box.classList.contains('closed')) closed.add(key); else closed.delete(key); ctx.store.set('outliner.closed', [...closed]); };
+    head.hidden = headless;
     box.append(head, rows);
-    host.append(box);
+    pane.append(box);
     s = { box, rows, count, keyed: new Map(), tail: [] };
     sections.set(key, s);
     return s;
@@ -74,7 +106,7 @@ export function createOutliner(ctx, host) {
   function render() {
     // output: the node being shown
     {
-      const s = section('output', 'Output');
+      const s = section('output', 'Scene');
       const g = ctx.graph.current();
       s.count.textContent = '';
       sync(s, g ? [{ key: 'out' }] : [], () => {
@@ -122,22 +154,30 @@ export function createOutliner(ctx, host) {
         };
       });
     }
-    // inputs: reference layers
+    // inputs: reference layers, in the Inputs tab
     {
-      const s = section('inputs', 'Inputs');
+      const s = section('inputs', 'Inputs', panes.inputs, true);
       const L = ctx.layers;
-      s.count.textContent = L.list.length || '';
+      tabCount('inputs', L.list.length);
+      const where = document.getElementById('inputs-where');
+      where.textContent = L.where ? `inputs/ ${L.where}` : 'inputs/'; where.title = L.dir ?? '';
       sync(s, L.list.map((f) => ({ key: f.path, f })), ({ f: first }) => {
         const path = first.path, id = layerId(path);
-        const wrap = el('div', ''), row = el('div', 'row'), ey = eye(() => L.show(path, !L.shown.has(path))), nm = el('span', 'nm', path), mt = el('span', 'mt'), er = el('div', 'rowerr');
+        const wrap = el('div', ''), row = el('div', 'row input-card'), ey = eye(() => L.show(path, !L.shown.has(path))), nm = el('span', 'nm', path), mt = el('span', 'mt'), er = el('div', 'rowerr');
         const ds = displaySelect(LAYER_MODES, (m) => L.setDisplay(path, m));
-        row.append(ey, ds, nm, mt);
+        const thumb = el('img', 'input-thumb'), body = el('div', 'input-body'), controls = el('div', 'input-controls'), icon = el('span', 'file-icon', first.ext?.toUpperCase() || 'FILE');
+        thumb.alt = ''; thumb.loading = 'lazy'; thumb.onerror = () => { thumb.hidden = true; icon.hidden = false; };
+        controls.append(ey, ds, mt); body.append(nm, controls); row.append(thumb, icon, body);
         wrap.append(row, er);
         selectRow(row, id);
+        row.onclick = (e) => { if (!e.target.closest('button,select,input') && isInputImage(path)) ctx.outputs.openInput(path); };
         row.addEventListener('pointerenter', () => setTimeout(() => L.fetchInfo(path), 150));
         return {
           el: wrap,
           update({ f }) {
+            const canPreview = isInputImage(path) || ['mesh', 'geometry', 'points'].includes(f.kind) || /\.(obj|stl|ply|glb|gltf|blend|geo|bgeo|json|csv)$/i.test(path);
+            const src = canPreview ? (isInputImage(path) ? inputImageURL(f) : '/api/input_thumb?' + new URLSearchParams({ path, rev: `${f.mtime}:${f.size}` })) : '';
+            if (thumb.dataset.source !== src) { thumb.dataset.source = src; thumb.hidden = !src; icon.hidden = !!src; if (src) thumb.src = src; }
             const on = L.shown.has(path), e = ctx.objects.get(id);
             ey.classList.toggle('off', !on);
             ey.title = on ? 'hide (unloads the layer)' : 'show as a reference layer';
@@ -151,9 +191,10 @@ export function createOutliner(ctx, host) {
           },
         };
       });
-      if (!L.list.length) note(s, 'none yet — drop files anywhere on this page (OBJ, STL, PLY, glTF/GLB, Houdini .geo, CSV, points JSON, PNG)');
-      if (L.where) { const n = note(s, `files go to inputs/ ${L.where}; a file node reads them as inputs/<name>`); n.title = L.dir; }
+      if (!L.list.length) note(s, 'No inputs yet: Add input, or drop meshes, curves, points, PNG, JPEG or WebP files anywhere on this page. The agent hears about new files and reads them as inputs/<name>.');
+      else note(s, 'a file node reads these as inputs/<name>; the agent hears about new ones');
     }
+    tabCount('outputs', ctx.outputs?.count);
     // guides
     {
       const s = section('guides', 'Guides');

package/dist/viewer/app/outputs.css

@@ -0,0 +1,73 @@
+/* the left panel's tabs: Scene, Outputs, Inputs */
+.phead.tabs { padding: 0 6px 0 0; gap: 0; align-items: stretch; }
+.phead.tabs [role=tab] { padding: 6px 10px 5px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--dim); font: inherit; letter-spacing: .06em; text-transform: uppercase; }
+.phead.tabs [role=tab]:hover { color: var(--text); }
+.phead.tabs [role=tab].on { color: var(--text); border-bottom-color: var(--sel); }
+.phead.tabs [role=tab]:focus-visible { outline: 1px solid var(--sel); outline-offset: -1px; }
+.phead.tabs [role=tab] .count { margin-left: 3px; color: var(--faint); letter-spacing: 0; }
+#thumb-size { margin: auto 0 auto auto; font-size: 10px; letter-spacing: 0; min-width: 48px; }
+.tabpane { flex: 1; }
+.tabpane[hidden] { display: none; }
+/* the bars at the top of the Outputs and Inputs tabs stay in view while the cards scroll */
+.outputs-bar, .inputs-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
+.outputs-bar .primary, .inputs-bar .primary { flex: none; padding: 4px 12px; }
+.outputs-bar .dim, .inputs-bar .dim { font-size: 11px; }
+.primary { border-color: var(--sel); }
+button:disabled { opacity: .45; cursor: default; }
+/* input cards */
+.input-card.row { height: auto; min-height: calc(var(--thumb-size) + 12px); padding: 6px; gap: 8px; }
+.input-thumb, .file-icon { width: var(--thumb-size); height: var(--thumb-size); flex: none; object-fit: contain; background: var(--view); }
+.file-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--dim); font-size: 10px; overflow: hidden; }
+.input-body { min-width: 0; flex: 1; }
+.input-body .nm { display: block; white-space: normal; overflow-wrap: anywhere; }
+.input-controls { display: flex; gap: 3px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
+.input-controls .mt { margin-left: auto; }
+/* output cards: thumbnail, name, what it is, where it exports, and its Export button */
+.output-group { padding: 12px 10px 5px; color: var(--dim); font-size: 11px; overflow-wrap: anywhere; }
+.output-card { display: flex; align-items: center; width: calc(100% - 8px); margin: 3px 4px; padding: 5px; gap: 8px; text-align: left; background: var(--bg); border: 1px solid transparent; min-height: calc(var(--thumb-size) + 12px); cursor: pointer; }
+.output-card:hover { background: var(--hover-bg); }
+.output-card:focus-visible { outline: 1px solid var(--sel); }
+.output-card.selected { border-color: var(--sel); background: var(--sel-bg); }
+.output-card.child { margin-left: 12px; width: calc(100% - 16px); }
+.output-card img { width: var(--thumb-size); height: var(--thumb-size); object-fit: contain; background: var(--view); flex: none; }
+.output-card .output-body { display: flex; flex: 1; flex-direction: column; min-width: 0; justify-content: center; gap: 3px; }
+.output-card .output-label { overflow-wrap: anywhere; }
+.output-card small { overflow: hidden; text-overflow: ellipsis; max-height: 32px; }
+.output-export { flex: none; padding: 3px 10px; }
+.output-target { align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--dim); font-size: 11px; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
+.output-target:hover { color: var(--text); text-decoration: underline; }
+.output-target.unset { font-style: italic; color: var(--faint); }
+.saved-outputs { border-top: 1px solid var(--line); margin-top: 8px; }
+.saved-outputs > summary { padding: 8px 10px; color: var(--dim); cursor: pointer; }
+.output-menu { position: fixed; z-index: 30; min-width: 190px; padding: 4px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 20px #0007; border-radius: 4px; }
+.output-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 12px; }
+.output-menu button:hover, .output-menu button:focus { background: var(--hover-bg); outline: none; }
+/* the export target popover: a format and a file inside exports/ */
+.export-popover { position: fixed; z-index: 40; display: flex; flex-direction: column; gap: 8px; width: 330px; max-width: calc(100vw - 12px); padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 20px #0008; }
+.export-title { font-weight: 600; overflow-wrap: anywhere; }
+.export-field { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 8px; }
+.export-field select, .export-field input { width: 100%; min-width: 0; padding: 4px 6px; }
+.export-where { font: var(--mono); font-size: 11px; overflow-wrap: anywhere; }
+.export-error { color: var(--err); font-size: 11px; }
+.export-error:empty { display: none; }
+.export-actions { display: flex; justify-content: flex-end; gap: 8px; }
+.export-actions button { padding: 4px 12px; }
+.dim { color: var(--dim); }
+.err { color: var(--err); }
+.empty { padding: 12px; color: var(--dim); }
+#output-details { padding: 12px; border-bottom: 1px solid var(--line); max-height: 36%; overflow: auto; overflow-wrap: anywhere; }
+#output-details p { white-space: pre-wrap; max-height: 120px; overflow: auto; }
+#output-details a { display: block; margin: 6px 0; color: #9dc9ee; }
+#top { gap: 7px; }
+#top .primary { border-color: var(--sel); color: var(--text); }
+#image-view { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 4; background: var(--view); }
+.image-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px; background: var(--panel); border-bottom: 1px solid var(--line); }
+.image-tools label { white-space: nowrap; }
+.image-dim { color: var(--dim); font: var(--mono); }
+.image-stage { position: relative; flex: 1; min-height: 0; background: #303236; overflow: hidden; }
+.image-stage.checker { background-color: #35383c; background-image: conic-gradient(#45484c 25%, transparent 0 50%, #45484c 0 75%, transparent 0); background-size: 24px 24px; }
+.image-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
+.image-stage canvas:active { cursor: grabbing; }
+.image-error { position: absolute; left: 10px; bottom: 10px; padding: 8px; background: var(--bg); color: var(--err); }
+.image-mode > #gl, .image-mode > #views, .image-mode > #boxsel { visibility: hidden; pointer-events: none; }
+@media (max-width: 1100px) { #top .readout { display: none; } #top { gap: 4px; } #top .tb select { max-width: 120px; } }