@floless/app 0.70.0 → 0.72.0

package/dist/web/workspaces.js

@@ -0,0 +1,270 @@
+/* ============================================================================
+ * workspaces.js — the Workflows | Workspaces mode shell (slice 1).
+ * Owns: mode state, the landing project grid, the open-project view (Drawings |
+ * Model iframes), the project picker + lifecycle menu, and per-project Approve.
+ * Composes with app.js/panels.js by CLASS-GATING (CSS hides Workflows chrome under
+ * .app.mode-workspaces) — it never removes their DOM or unwires their handlers.
+ * Reuses app.js globals (escapeHtml, escapeAttr, showToast) and the flolessBridge
+ * seams (api, formModal, loadRequests) like panels.js does.
+ * SECURITY CONTRACT (same as panels.js): every innerHTML interpolation passes
+ * escapeHtml/escapeAttr — project names are user-authored; no unescaped string may
+ * ever reach the DOM. textContent wherever no markup is needed.
+ * See docs/superpowers/specs/2026-07-03-workspaces-two-mode-shell-design.md.
+ * ========================================================================== */
+(() => {
+  const bridge = window.flolessBridge || {};
+  const api = bridge.api || (async (path, opts) => {
+    const res = await fetch(path, { headers: { 'content-type': 'application/json' }, ...opts });
+    const body = await res.json().catch(() => ({ ok: false, error: `HTTP ${res.status}` }));
+    if (!res.ok || body.ok === false) { const e = new Error(body.error || `HTTP ${res.status}`); e.body = body; throw e; }
+    return body;
+  });
+
+  const $app = document.getElementById('app');
+  const $switch = document.getElementById('mode-switch');
+  const $landing = document.getElementById('ws-landing');
+  const $project = document.getElementById('ws-project');
+  const $spine = document.getElementById('ws-spine');
+  const $projName = document.getElementById('ws-proj-name');
+  const $crumbName = document.getElementById('ws-crumb-name');
+  const $status = document.getElementById('ws-status');
+  const $stepTabs = document.getElementById('ws-step-tabs');
+  const $projMenu = document.getElementById('ws-proj-menu');
+  const frames = {
+    model: document.getElementById('ws-frame-model'),
+    drawings: document.getElementById('ws-frame-drawings'),
+  };
+  if (!$switch || !$landing || !$app) return; // markup absent — nothing to wire
+
+  // The picker menu is a `.menu` (display:none by default; `.menu.show` → display:block, which
+  // OVERRIDES the `hidden` attribute). So close must clear BOTH — same idiom as the ext-menu.
+  const closeProjMenu = () => { $projMenu.hidden = true; $projMenu.classList.remove('show'); };
+
+  const LS_MODE = 'floless:mode';
+  const WORKSPACE_APP = 'steel-model'; // slice 1: the one workspace app; a manifest flag generalizes this in slice 5
+  let mode = 'workflows';
+  try { if (localStorage.getItem(LS_MODE) === 'workspaces') mode = 'workspaces'; } catch { /* private mode */ }
+  let projects = [];
+  let current = null; // the open project (null = landing)
+
+  // ── mode ────────────────────────────────────────────────────────────────────
+  function applyMode() {
+    const ws = mode === 'workspaces';
+    $app.classList.toggle('mode-workspaces', ws);
+    $switch.querySelectorAll('button').forEach((b) => {
+      const on = b.dataset.mode === mode;
+      b.classList.toggle('active', on);
+      b.setAttribute('aria-selected', String(on));
+    });
+    $landing.hidden = !ws || !!current;
+    $project.hidden = !ws || !current;
+    $spine.hidden = !ws || !current;
+    if (!ws && !$projMenu.hidden) closeProjMenu();
+    if (ws && !current) loadProjects();
+  }
+  function setMode(m) {
+    mode = m === 'workspaces' ? 'workspaces' : 'workflows';
+    try { localStorage.setItem(LS_MODE, mode); } catch { /* private mode */ }
+    applyMode();
+  }
+  $switch.addEventListener('click', (e) => {
+    const b = e.target.closest('button[data-mode]');
+    if (b) setMode(b.dataset.mode);
+  });
+  document.addEventListener('keydown', (e) => {
+    if (!(e.ctrlKey || e.metaKey) || e.altKey || e.shiftKey) return;
+    const t = e.target;
+    if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
+    if (e.key === '1') { e.preventDefault(); setMode('workflows'); }
+    else if (e.key === '2') { e.preventDefault(); setMode('workspaces'); }
+  });
+
+  // ── landing ─────────────────────────────────────────────────────────────────
+  const relAgo = (iso) => {
+    const ms = Date.now() - new Date(iso).getTime();
+    if (isNaN(ms) || ms < 0) return '';
+    const min = Math.round(ms / 60000);
+    if (min < 1) return 'just now';
+    if (min < 60) return `${min} min ago`;
+    const h = Math.round(min / 60);
+    return h < 48 ? `${h} h ago` : `${Math.round(h / 24)} d ago`;
+  };
+
+  async function loadProjects() {
+    // Surface a real failure — never present a server/network error as an empty workspace
+    // (the empty-state CTA would be a lie: "no projects yet" when the truth is "load failed").
+    try { ({ projects } = await api('/api/projects')); }
+    catch (err) { projects = []; showToast('Couldn’t load projects: ' + (err && err.message || err), 'warn'); }
+    renderLanding();
+  }
+
+  function renderLanding() {
+    let html = `<div class="ws-head"><h2>Workspaces</h2>` +
+      `<div class="ws-sub">Live projects — open a document to keep working. No Run here.</div></div>` +
+      `<div class="ws-grid">`;
+    for (const p of projects) {
+      html += `<div class="ws-card" role="button" tabindex="0" data-open="${escapeAttr(p.id)}">` +
+        `<span class="ws-thumb"><span class="ws-kind">${escapeHtml(p.app)}</span>▦</span>` +
+        `<span class="ws-body"><span><span class="ws-name">${escapeHtml(p.name)}</span>` +
+        `<span class="ws-meta">${escapeHtml(p.app)} · <span class="t">${escapeHtml(relAgo(p.updatedAt))}</span></span></span>` +
+        `<button type="button" class="ws-kebab" data-kebab="${escapeAttr(p.id)}" aria-label="Project actions" data-tip="Rename · Duplicate · Archive">⋯</button>` +
+        `</span></div>`;
+    }
+    // Slice-1 creation path: seed a project from the app's current takeoff. The
+    // compose-time "read a drawing set" flow is Slice 4 — this card is honest about that.
+    html += `<button type="button" class="ws-seed" id="ws-seed">` +
+      `<span class="plus">+</span><span>Import the current ${escapeHtml(WORKSPACE_APP)} takeoff as a project</span></button>`;
+    html += `</div>`;
+    if (!projects.length) html += `<div class="ws-empty-note">No projects yet — import your current takeoff above, or ask your terminal AI to read a drawing set.</div>`;
+    $landing.innerHTML = html;
+  }
+
+  $landing.addEventListener('click', async (e) => {
+    const kebab = e.target.closest('[data-kebab]');
+    if (kebab) { e.stopPropagation(); openProjMenu(kebab.dataset.kebab, kebab); return; }
+    const card = e.target.closest('[data-open]');
+    if (card) { openProject(card.dataset.open); return; }
+    if (e.target.closest('#ws-seed')) createSeeded();
+  });
+  $landing.addEventListener('keydown', (e) => {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    const card = e.target.closest('[data-open]');
+    if (card) { e.preventDefault(); openProject(card.dataset.open); }
+  });
+
+  async function promptName(title, label, value) {
+    if (!bridge.formModal) return null;
+    const res = await bridge.formModal({ title, fields: [{ name: 'name', label, value, placeholder: 'e.g. Westfield Retail — Ph2' }], okLabel: 'Save' });
+    return res && typeof res.name === 'string' && res.name.trim() ? res.name.trim() : null;
+  }
+
+  async function createSeeded() {
+    const name = await promptName('New project', 'Name this project', '');
+    if (!name) return;
+    try {
+      const { project, seeded } = await api('/api/projects', { method: 'POST', body: JSON.stringify({ name, app: WORKSPACE_APP, seedFromApp: true }) });
+      // Tell the truth about the import: seeded=false means there was no current takeoff to copy
+      // (or it was unreadable) — the project is EMPTY, don't imply the takeoff came across.
+      if (seeded) showToast(`Project "${project.name}" created from the current ${WORKSPACE_APP} takeoff`, 'ok');
+      else showToast(`Project "${project.name}" created — empty (no current ${WORKSPACE_APP} takeoff to import)`, 'warn');
+      projects.unshift(project);
+      openProject(project.id);
+    } catch (err) { showToast('Couldn’t create the project: ' + (err && err.message || err), 'warn'); }
+  }
+
+  // ── open project ────────────────────────────────────────────────────────────
+  async function openProject(id) {
+    let p = projects.find((x) => x.id === id);
+    if (!p) { try { p = (await api('/api/projects')).projects.find((x) => x.id === id); } catch { /* fall through */ } }
+    if (!p) { showToast('Project not found — it may have been archived.', 'warn'); return loadProjects(); }
+    current = p;
+    $projName.textContent = p.name;
+    $crumbName.textContent = p.name;
+    $status.textContent = p.app;
+    // Lazily src the frames once per project; switching steps only toggles hidden so the
+    // editor's 3D state survives a Drawings⇄Model round-trip.
+    const qs = `?app=${encodeURIComponent(p.app)}&project=${encodeURIComponent(p.id)}`;
+    frames.model.dataset.want = `/steel-editor.html${qs}`;
+    frames.drawings.dataset.want = `/steel-filter.html${qs}`;
+    frames.model.src = 'about:blank'; frames.drawings.src = 'about:blank'; // reset any previous project
+    frames.model.dataset.loaded = ''; frames.drawings.dataset.loaded = '';
+    setStep('model');
+    applyMode();
+  }
+  function closeProject() { current = null; closeProjMenu(); applyMode(); }
+  document.getElementById('ws-back').addEventListener('click', closeProject);
+
+  function setStep(s) {
+    $stepTabs.querySelectorAll('button').forEach((b) => {
+      const on = b.dataset.step === s;
+      b.classList.toggle('active', on);
+      b.setAttribute('aria-selected', String(on));
+    });
+    for (const [k, f] of Object.entries(frames)) {
+      const show = k === s;
+      f.hidden = !show;
+      if (show && !f.dataset.loaded) { f.src = f.dataset.want; f.dataset.loaded = '1'; }
+    }
+  }
+  $stepTabs.addEventListener('click', (e) => {
+    const b = e.target.closest('button[data-step]');
+    if (b) setStep(b.dataset.step);
+  });
+
+  // ── Approve (per-project) ───────────────────────────────────────────────────
+  document.getElementById('ws-approve').addEventListener('click', async () => {
+    if (!current) return;
+    const btn = document.getElementById('ws-approve');
+    btn.disabled = true;
+    const prev = btn.textContent;
+    btn.textContent = '◆ Approving…';
+    try {
+      // Flush the editor's debounced autosave FIRST (same-origin iframe) so Approve bakes the
+      // LATEST edits, not a stale contract — a user can edit then hit Approve before the ~debounce
+      // fires. flushContract() PUTs the live contract and resolves; a save failure aborts the bake.
+      const win = frames.model && frames.model.contentWindow;
+      if (win && typeof win.flushContract === 'function') await win.flushContract();
+      await api(`/api/contract/${encodeURIComponent(current.app)}/approve?project=${encodeURIComponent(current.id)}`, { method: 'POST' });
+      showToast(`Approved — "${current.name}" is baked into ${current.app}`, 'ok');
+    } catch (err) {
+      showToast('Approve failed: ' + (err && err.message || err), 'warn');
+    } finally { btn.disabled = false; btn.textContent = prev; }
+  });
+
+  // ── project picker + lifecycle (full set lives HERE; ≡ carries nothing) ────
+  let menuFor = null;
+  function menuItem(action, label) {
+    return `<button class="menu-item" data-act="${action}" role="menuitem"><span class="menu-label">${escapeHtml(label)}</span></button>`;
+  }
+  function openProjMenu(id, anchor) {
+    menuFor = id;
+    const others = projects.filter((p) => p.id !== id);
+    $projMenu.innerHTML =
+      (others.length ? others.map((p) => `<button class="menu-item" data-goto="${escapeAttr(p.id)}" role="menuitem"><span class="menu-label">Open: ${escapeHtml(p.name)}</span></button>`).join('') + '<div class="menu-divider"></div>' : '') +
+      menuItem('rename', 'Rename…') + menuItem('duplicate', 'Duplicate') +
+      '<div class="menu-divider"></div>' + menuItem('archive', 'Archive');
+    const r = anchor.getBoundingClientRect();
+    $projMenu.style.left = Math.round(Math.max(8, Math.min(r.left, window.innerWidth - 260))) + 'px';
+    $projMenu.style.top = Math.round(r.bottom + 6) + 'px';
+    $projMenu.hidden = false;
+    $projMenu.classList.add('show');
+  }
+  document.getElementById('ws-proj-trigger').addEventListener('click', (e) => {
+    if (!current) return;
+    e.stopPropagation();
+    if ($projMenu.hidden) openProjMenu(current.id, e.currentTarget); else closeProjMenu();
+  });
+  document.addEventListener('click', (e) => {
+    if ($projMenu.hidden) return;
+    if (!$projMenu.contains(e.target) && !e.target.closest('#ws-proj-trigger') && !e.target.closest('[data-kebab]')) closeProjMenu();
+  });
+  $projMenu.addEventListener('click', async (e) => {
+    const goto = e.target.closest('[data-goto]');
+    if (goto) { closeProjMenu(); return openProject(goto.dataset.goto); }
+    const act = e.target.closest('[data-act]');
+    if (!act || !menuFor) return;
+    closeProjMenu();
+    const id = menuFor;
+    const proj = projects.find((p) => p.id === id);
+    try {
+      if (act.dataset.act === 'rename') {
+        const name = await promptName('Rename project', 'New name', proj ? proj.name : '');
+        if (!name) return;
+        const { project } = await api(`/api/projects/${encodeURIComponent(id)}`, { method: 'PATCH', body: JSON.stringify({ name }) });
+        if (current && current.id === id) { current = project; $projName.textContent = project.name; $crumbName.textContent = project.name; }
+        showToast('Renamed', 'ok');
+      } else if (act.dataset.act === 'duplicate') {
+        const { project } = await api(`/api/projects/${encodeURIComponent(id)}/duplicate`, { method: 'POST', body: '{}' });
+        showToast(`Duplicated as "${project.name}"`, 'ok');
+      } else if (act.dataset.act === 'archive') {
+        await api(`/api/projects/${encodeURIComponent(id)}/archive`, { method: 'POST', body: '{}' });
+        showToast('Archived — recoverable from ~/.floless/projects/.archive', 'ok');
+        if (current && current.id === id) { closeProject(); return; }
+      }
+    } catch (err) { showToast('Action failed: ' + (err && err.message || err), 'warn'); }
+    loadProjects();
+  });
+
+  window.flolessWorkspaces = { setMode, refresh: loadProjects };
+  applyMode(); // restore persisted mode immediately (matches panels.js applyView timing)
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floless/app",
-  "version": "0.70.0",
+  "version": "0.72.0",
   "type": "module",
   "description": "Thin localhost host for floless.app — serves web/ and shells the aware CLI. No engine, no LLM.",
   "bin": {