@floless/app 0.57.0 → 0.59.0

package/dist/web/aware.js

@@ -1386,26 +1386,43 @@
     const app = currentId && apps.get(currentId);
     if (!app || !app.rebakeInput) return;
     const name = app.rebakeInput;
+    // Show what's currently baked in (the source the run uses) so the user knows what they're
+    // replacing. Contract-backed apps carry it in source.name; suppress the shipped example, and
+    // skip silently for apps that bake into config (no contract) — the "if there is anything" case.
+    let current = '';
+    try {
+      const cr = await fetch(`/api/contract/${encodeURIComponent(app.id)}`);
+      if (cr.ok) {
+        const doc = await cr.json().catch(() => null);
+        const nm = doc && doc.source && typeof doc.source.name === 'string' ? doc.source.name : '';
+        if (nm && !/^example\b/i.test(nm)) current = nm;
+      }
+    } catch { /* no current source — fine, just don't show the row */ }
+    const fields = [];
+    if (current) fields.push({ type: 'current', name: '__current', label: 'Currently loaded', value: current });
+    fields.push({ name, label: `${name} — new source drawing(s)`, type: 'files', accept: ['pdf', 'png', 'jpg', 'webp'], required: true });
     const res = await formModal({
       title: `Re-read & re-bake · ${app.displayName}`,
-      sub: 'Attach the new drawing (PDF or image). Your terminal AI re-reads it and updates this workflow, then asks you to approve — nothing changes until you do.',
-      fields: [{ name, label: `${name} — new source drawing`, type: 'file', accept: ['pdf', 'png', 'jpg', 'webp'] }],
+      sub: 'Attach the new drawings (PDF or image) — one or several sheets. Your terminal AI re-reads them and updates this workflow, then asks you to approve — nothing changes until you do.',
+      fields,
       okLabel: 'Queue re-bake',
     });
     if (!res) return;
-    const dataUrl = res[name];
-    const sourceName = res[name + '__filename'] || undefined;
-    if (typeof dataUrl !== 'string' || !dataUrl.startsWith('data:')) { showToast('attach a drawing to re-bake', 'warn'); return; }
+    const files = Array.isArray(res[name]) ? res[name] : [];
+    if (!files.length) { showToast('attach a drawing to re-bake', 'warn'); return; }
+    const sourceName = files[0].name || undefined; // provenance: the first file's name
+    const n = files.length;
     try {
       const r = await fetch('/api/rebake', {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ appId: app.id, inputName: name, ...(sourceName ? { sourceName } : {}), snapshots: [{ dataUrl }] }),
+        body: JSON.stringify({ appId: app.id, inputName: name, ...(sourceName ? { sourceName } : {}), snapshots: files.map((f) => ({ name: f.name, dataUrl: f.dataUrl })) }),
       });
+      if (r.status === 413) { showToast('those files are too large to queue together — attach fewer or smaller sheets', 'warn'); return; }
       const out = await r.json().catch(() => ({ ok: false, error: `re-bake failed (${r.status})` }));
       if (!out || !out.ok) { showToast((out && out.error) || 'could not queue re-bake', 'err'); return; }
-      showToast('Queued — your terminal AI will re-read it and update this workflow, then ask you to approve.', 'ok');
-      appendNarration(`<strong>Re-bake queued</strong> for <strong>${escapeHtml(name)}</strong>. Your terminal AI will re-read the drawing, update this workflow, and ask you to approve the new lock.`);
+      showToast(`Queued — your terminal AI will re-read ${n} drawing${n > 1 ? 's' : ''} and update this workflow, then ask you to approve.`, 'ok');
+      appendNarration(`<strong>Re-bake queued</strong> for <strong>${escapeHtml(name)}</strong> (${n} file${n > 1 ? 's' : ''}). Your terminal AI will re-read the drawing${n > 1 ? 's' : ''}, update this workflow, and ask you to approve the new lock.`);
     } catch { showToast('could not queue re-bake', 'err'); }
   }
 
@@ -2250,6 +2267,13 @@
         if (f.type === 'checkbox') {
           return `<label class="modal-check" for="${id}"><input type="checkbox" id="${id}" data-fm-check="${escapeHtml(f.name)}"${f.value ? ' checked' : ''}><span>${escapeHtml(f.label || f.name)}</span></label>`;
         }
+        // Read-only "what's currently loaded" context row (e.g. the source drawing already
+        // baked into a re-bake app). Inert — a muted label + glyph + filename, not a field.
+        if (f.type === 'current') {
+          const cext = (/\.([a-z0-9]+)$/i.exec(f.value || '') || [])[1];
+          const cglyph = String(cext || '').toLowerCase() === 'pdf' ? 'pdf' : 'img';
+          return `<div class="rebake-current"><span class="rebake-current-label">${escapeHtml(f.label || 'Currently loaded')}</span><span class="fm-file-glyph">${cglyph}</span><span class="fm-file-name" title="${escapeAttr(f.value)}">${escapeHtml(f.value)}</span></div>`;
+        }
         let ctl;
         if (f.type === 'images') {
           ctl = `<div class="fm-images" data-fm-images="${escapeHtml(f.name)}">
@@ -2266,6 +2290,17 @@
             <div class="fm-drop" role="button" tabindex="0" aria-label="Attach an image or PDF"></div>
             <input type="file" accept="${escapeAttr(acceptAttr)}" class="fm-file-input" tabindex="-1" aria-hidden="true">
           </div>`;
+        } else if (f.type === 'files') {
+          // MULTI image/PDF Visual Input (e.g. a whole framing set). Persistent drop zone +
+          // a wrap-flow chip list below; drag-drop + click + paste; up to 8 (server cap).
+          const accepts = (f.accept && f.accept.length) ? f.accept : ['pdf', 'png', 'jpg', 'webp'];
+          const acceptAttr = accepts.map((e) => '.' + String(e).replace(/^\./, '')).join(',');
+          const hint = accepts.join(', ').toUpperCase();
+          ctl = `<div class="fm-files" data-fm-files="${escapeAttr(f.name)}" data-accept-hint="${escapeAttr(hint)}"${f.required ? ' data-required="1"' : ''}>
+            <div class="fm-drop" role="button" tabindex="0" aria-label="Attach drawings — drop or click"><span class="fm-drop-main">Drop or click to attach files</span><span class="fm-drop-hint">${escapeHtml(hint)} · paste also works</span></div>
+            <input type="file" accept="${escapeAttr(acceptAttr)}" multiple class="fm-file-input" tabindex="-1" aria-hidden="true">
+            <div class="fm-files-list" aria-live="polite" hidden></div>
+          </div>`;
         } else {
           ctl = f.multiline
             ? `<textarea id="${id}" rows="4" data-fm="${escapeHtml(f.name)}" placeholder="${ph}">${escapeHtml(val)}</textarea>`
@@ -2281,10 +2316,18 @@
       $ok.classList.toggle('primary', !danger);
       $cancel.classList.toggle('primary', !!danger);
       showModal($formModal);
-      const first = $body.querySelector('input:not(.fm-file-input),textarea');
+      // Prefer a real text input; else a file drop zone (so keyboard users land somewhere
+      // actionable rather than a possibly-disabled OK button).
+      const first = $body.querySelector('input:not(.fm-file-input),textarea')
+        || $body.querySelector('.fm-files .fm-drop, .fm-file .fm-drop, .fm-images .fm-drop');
       if (first) { first.focus(); if (first.select) first.select(); }
       else if (danger) $cancel.focus();
       else $ok.focus();
+      // OK-gate probes: required consent checks (below) AND required multi-file fields must be
+      // satisfied. Declared here so the fm-files setup can re-run the gate; wired after all setups.
+      let runGate = () => {};
+      const fileGateProbes = [];
+      let modalClosed = false; // set in done(); guards async FileReader callbacks from touching a closed modal
       // ── images-field setup ──────────────────────────────────────────────────────
       const imageStates = new Map();
       $body.querySelectorAll('.fm-images').forEach((box) => {
@@ -2362,6 +2405,90 @@
         fileStates.set(name, { st, setFile });
         render();
       });
+      // ── multi-file field setup (image/PDF set, e.g. a framing set) ─────────────────
+      const fileListStates = new Map();
+      $body.querySelectorAll('.fm-files').forEach((box) => {
+        const name = box.dataset.fmFiles;
+        const MAX = 8;
+        const hint = box.dataset.acceptHint || 'PDF, PNG, JPG, WEBP';
+        const acceptExts = hint.toLowerCase().split(/[,\s]+/).filter(Boolean);
+        const state = []; // { name, ext, dataUrl, reading }
+        const drop = box.querySelector('.fm-drop');
+        const main = drop.querySelector('.fm-drop-main');
+        const hintEl = drop.querySelector('.fm-drop-hint');
+        const fileInput = box.querySelector('.fm-file-input');
+        const list = box.querySelector('.fm-files-list');
+        const isFileDrag = (e) => !!e.dataTransfer && Array.from(e.dataTransfer.types || []).includes('Files');
+        // Prefer the filename extension; fall back to the MIME type for a no-name paste. Normalize
+        // jpeg→jpg so a `.jpeg` file (or a pasted image/jpeg) is accepted like the server does.
+        const extOf = (fn, type) => {
+          const m = /\.([a-z0-9]+)$/i.exec(fn || '');
+          let e = (m ? m[1] : '').toLowerCase();
+          if (!e && type) e = type === 'application/pdf' ? 'pdf' : type.startsWith('image/') ? type.slice(6) : '';
+          return e === 'jpeg' ? 'jpg' : e;
+        };
+        const readyCount = () => state.filter((s) => !s.reading && s.dataUrl).length;
+        const syncDrop = () => {
+          const n = state.length;
+          const atCap = n >= MAX;
+          drop.classList.toggle('at-cap', atCap);
+          if (atCap) { main.textContent = `Maximum ${MAX} files attached`; hintEl.textContent = 'Remove one to add another'; }
+          else if (n > 0) { main.textContent = `${n} of ${MAX} attached — drop or click to add more`; hintEl.textContent = `${hint} · paste also works`; }
+          else { main.textContent = 'Drop or click to attach files'; hintEl.textContent = `${hint} · paste also works · up to ${MAX}`; }
+        };
+        const renderList = () => {
+          list.hidden = state.length === 0;
+          list.innerHTML = state.map((s, i) => s.reading
+            ? `<div class="fm-filechip is-reading"><span class="fm-file-glyph">${s.ext === 'pdf' ? 'pdf' : 'img'}</span><span class="fm-filechip-name">Reading…</span></div>`
+            : `<div class="fm-filechip"><span class="fm-file-glyph">${s.ext === 'pdf' ? 'pdf' : 'img'}</span><span class="fm-filechip-name" title="${escapeAttr(s.name)}">${escapeHtml(s.name)}</span><button type="button" class="fm-filechip-del" data-i="${i}" aria-label="Remove ${escapeAttr(s.name)}">×</button></div>`
+          ).join('');
+          list.querySelectorAll('.fm-filechip-del').forEach((b) => {
+            b.onclick = () => {
+              const idx = Number(b.dataset.i);
+              state.splice(idx, 1);
+              renderList(); syncDrop(); runGate();
+              // Keep focus in the field, not lost to <body>: next chip's ×, else the drop zone.
+              const dels = list.querySelectorAll('.fm-filechip-del');
+              (dels[Math.min(idx, dels.length - 1)] || drop).focus();
+            };
+          });
+        };
+        const addFile = (file) => {
+          if (!file) return;
+          if (state.length >= MAX) { showToast(`Max ${MAX} files`, 'warn'); return; }
+          const ext = extOf(file.name, file.type);
+          if (acceptExts.length && !acceptExts.includes(ext)) { showToast(`${file.name || 'file'} — ${hint} only`, 'warn'); return; }
+          const entry = { name: file.name || ('pasted.' + (ext || 'png')), ext, dataUrl: '', reading: true };
+          state.push(entry);
+          renderList(); syncDrop(); runGate(); // disable OK while this file reads (gate blocks on any reading)
+          const reader = new FileReader();
+          // Guard on modalClosed: a large read can finish after the modal is cancelled/closed; without
+          // this the stale callback would mutate the SHARED $ok gate of the next formModal.
+          reader.onload = () => { if (modalClosed) return; entry.dataUrl = reader.result; entry.reading = false; renderList(); syncDrop(); runGate(); };
+          reader.onerror = () => { if (modalClosed) return; const i = state.indexOf(entry); if (i >= 0) state.splice(i, 1); renderList(); syncDrop(); runGate(); showToast(`could not read ${file.name || 'the file'}`, 'err'); };
+          reader.readAsDataURL(file);
+        };
+        const addFiles = (files) => {
+          const arr = Array.from(files || []);
+          const room = Math.max(0, MAX - state.length);
+          if (arr.length > room) showToast(`Max ${MAX} files`, 'warn');
+          arr.slice(0, room).forEach(addFile);
+        };
+        drop.onclick = () => { if (state.length < MAX) fileInput.click(); };
+        drop.onkeydown = (e) => { if ((e.key === 'Enter' || e.key === ' ') && state.length < MAX) { e.preventDefault(); fileInput.click(); } };
+        fileInput.onchange = () => { addFiles(fileInput.files); fileInput.value = ''; };
+        // Native drag-drop: bind on the whole box (so the chip area isn't a dead zone), toggle the
+        // visual on the inner drop. dragover MUST preventDefault or `drop` never fires.
+        box.ondragenter = (e) => { if (isFileDrag(e)) { e.preventDefault(); if (state.length < MAX) { drop.classList.add('drag-over'); main.textContent = 'Drop to attach'; } } };
+        box.ondragover = (e) => { if (isFileDrag(e)) { e.preventDefault(); e.dataTransfer.dropEffect = state.length < MAX ? 'copy' : 'none'; } };
+        box.ondragleave = (e) => { if (!box.contains(e.relatedTarget)) { drop.classList.remove('drag-over'); syncDrop(); } };
+        box.ondrop = (e) => { if (!isFileDrag(e)) return; e.preventDefault(); drop.classList.remove('drag-over'); addFiles(e.dataTransfer.files); syncDrop(); };
+        fileListStates.set(name, { state, addFiles });
+        // Gate probe returns 0 (blocks OK) while ANY file is still reading — so you can't submit a
+        // partial set (collect() drops still-reading files); ready count only once all reads finish.
+        if (box.dataset.required) fileGateProbes.push(() => (state.some((s) => s.reading) ? 0 : readyCount()));
+        renderList(); syncDrop();
+      });
       // ── paste support: an image into the modal → the images field, else the file field ──
       $body.onpaste = (e) => {
         const items = Array.from((e.clipboardData && e.clipboardData.items) || []);
@@ -2386,6 +2513,14 @@
           });
           return;
         }
+        const filesBox = $body.querySelector('.fm-files');
+        if (filesBox) {
+          if (!fileItems.length) return;
+          e.preventDefault();
+          const entry = fileListStates.get(filesBox.dataset.fmFiles);
+          if (entry) entry.addFiles(fileItems.map((it) => it.getAsFile()).filter(Boolean));
+          return;
+        }
         const fileBox = $body.querySelector('.fm-file');
         if (!fileBox || !fileItems.length) return;
         e.preventDefault();
@@ -2393,15 +2528,26 @@
         const file = fileItems[0].getAsFile();
         if (entry && file) entry.setFile(file);
       };
+      // Stray-drop guard: a file dropped onto the modal but MISSING a drop zone must not
+      // navigate the page to the file. The .fm-files box handles real drops; this only
+      // neutralizes the misses.
+      $body.ondragover = (e) => { if (e.dataTransfer && Array.from(e.dataTransfer.types || []).includes('Files')) e.preventDefault(); };
+      $body.ondrop = (e) => { if (e.dataTransfer && Array.from(e.dataTransfer.types || []).includes('Files')) e.preventDefault(); };
       // Required consent checkboxes (e.g. the fork liability terms) disable OK until ticked.
       const requiredChecks = Array.from($body.querySelectorAll('[data-fm-check]')).filter((el) => {
         const f = fields.find((x) => x.name === el.dataset.fmCheck);
         return f && f.required;
       });
-      if (requiredChecks.length) {
-        const syncOkGate = () => { $ok.disabled = requiredChecks.some((el) => !el.checked); };
-        requiredChecks.forEach((el) => { el.onchange = syncOkGate; });
-        syncOkGate();
+      // Unified OK gate: every required consent check ticked AND every required multi-file field
+      // has ≥1 ready file. (runGate was declared up top so fm-files callbacks can re-run it.)
+      if (requiredChecks.length || fileGateProbes.length) {
+        runGate = () => {
+          const checksOk = !requiredChecks.some((el) => !el.checked);
+          const filesOk = !fileGateProbes.some((getN) => getN() < 1);
+          $ok.disabled = !(checksOk && filesOk);
+        };
+        requiredChecks.forEach((el) => { el.onchange = runGate; });
+        runGate();
       }
       const collect = () => {
         const out = {};
@@ -2413,12 +2559,17 @@
           // expose filename alongside so callers can capture provenance (e.g. rebake → sourceName)
           out[name + '__filename'] = entry.st.name || '';
         });
+        // Multi-file field → array of { name, dataUrl } (only fully-read files).
+        fileListStates.forEach((entry, name) => {
+          out[name] = entry.state.filter((s) => !s.reading && s.dataUrl).map((s) => ({ name: s.name, dataUrl: s.dataUrl }));
+        });
         return out;
       };
       const done = (result) => {
         _formModalOpen = false;
+        modalClosed = true;
         hideModal($formModal);
-        $ok.onclick = null; $cancel.onclick = null; $formModal.onclick = null; $formModal.onkeydown = null; $body.onpaste = null;
+        $ok.onclick = null; $cancel.onclick = null; $formModal.onclick = null; $formModal.onkeydown = null; $body.onpaste = null; $body.ondragover = null; $body.ondrop = null;
         $ok.classList.remove('danger'); $ok.classList.add('primary'); $cancel.classList.remove('primary'); $ok.disabled = false; // reset chrome for the next caller
         resolve(result);
       };