+ ${esc(b.title || b.url)}
+
+
+ ${body}
+
@@ -1713,6 +2261,45 @@
+
+
+
+
+
+
+
+
@@ -1769,7 +2356,7 @@
// null = unknown until /api/meta resolves; then boolean. Drives the add button label
// ("Add" vs "Add with ") and the caret menu ("+ Add LLM").
let providerConfigured = null;
- // The configured provider's human label from /api/meta (e.g. "Claude Code"), or null.
+ // The configured provider's human label from /api/meta (e.g. "Claude"), or null.
let providerLabel = null;
let collections = [];
let activeCollection = 'inspiration';
@@ -1778,7 +2365,7 @@
let currentLibraryItem = null;
const TIER_LABELS = { structural: 'Structural', polish: 'Polish', reference: 'Reference' };
- const ANALYSIS_AGENT_LABELS = { claude: 'Claude Code', codex: 'Codex' };
+ const ANALYSIS_AGENT_LABELS = { claude: 'Claude', codex: 'Codex' };
const DESIGN_FIELDS = [
['above_fold', 'Above the Fold'],
['nav_pattern', 'Navigation'],
@@ -2040,6 +2627,243 @@
} catch { /* SSE unavailable — poll fallback (manual load) remains */ }
}
+ // ══ Phone / vertical-tablet chrome (<=900px) ═══════════════════════════════════
+ // The drawer HOSTS the desktop's own control nodes rather than copying them: at the
+ // breakpoint the real #collection-switcher, .filters, .header-right and tag clouds
+ // are appended into drawer slots, and appended back to their original parents above
+ // it. Every listener bound in this file keeps working, because listeners survive
+ // appendChild. Copying instead would mean duplicate ids and two sets of state.
+
+ const MOBILE_MQ = window.matchMedia('(max-width: 900px)');
+ const relocations = [];
+ let chromeIsMobile = null;
+
+ function rememberHome(node) {
+ if (!node || relocations.some(r => r.node === node)) return;
+ relocations.push({ node, parent: node.parentNode, next: node.nextSibling });
+ }
+
+ /** Move the chrome into the drawer (mobile) or back where it came from (desktop). */
+ function syncChrome() {
+ const mobile = MOBILE_MQ.matches;
+ if (mobile === chromeIsMobile) return;
+ chromeIsMobile = mobile;
+
+ const moves = [
+ ['collection-switcher', 'drawer-boards'],
+ ['tag-cloud', 'drawer-tags'],
+ ['library-topic-cloud', 'drawer-tags'],
+ ];
+ const filtersEl = document.querySelector('.filters');
+ const headerRight = document.querySelector('.header-right');
+ const addBar = document.querySelector('.add-bar');
+
+ if (mobile) {
+ for (const [id, slot] of moves) {
+ const node = document.getElementById(id);
+ if (node) { rememberHome(node); document.getElementById(slot).appendChild(node); }
+ }
+ if (filtersEl) { rememberHome(filtersEl); document.getElementById('drawer-filters').appendChild(filtersEl); }
+ if (headerRight) { rememberHome(headerRight); document.getElementById('drawer-view').appendChild(headerRight); }
+ // The add bar docks beside the FAB rather than staying in the header.
+ if (addBar) { rememberHome(addBar); document.getElementById('add-dock').prepend(addBar); }
+ } else {
+ closeDrawer(true);
+ closeAddDock();
+ setHeaderMode('title');
+ for (const r of relocations) {
+ if (r.next && r.next.parentNode === r.parent) r.parent.insertBefore(r.node, r.next);
+ else r.parent.appendChild(r.node);
+ }
+ relocations.length = 0;
+ }
+ // The two modes order the switcher differently (see renderSwitcher), so rebuild it.
+ if (collections.length) renderSwitcher();
+ updateDrawerChrome();
+ }
+
+ /** Keep the drawer's labels, counts and the filters-active dot honest. */
+ function updateDrawerChrome() {
+ const col = collections.find(c => c.id === activeCollection);
+ const pill = document.getElementById('board-pill-name');
+ if (pill) pill.textContent = col ? col.name : 'Board';
+ const fh = document.getElementById('drawer-filters-head');
+ if (fh) fh.textContent = col ? `Filter ${col.name}` : 'Filters';
+ const count = document.getElementById('drawer-count');
+ if (count) count.textContent = String(filtered.length);
+
+ // A drawer can hide active filters, so the ☰ carries a mark when any are on — and
+ // the accessible name says so too, because a dot is not available to a screen reader.
+ const active = activeFilterCount();
+ const dot = document.getElementById('filter-dot');
+ const btn = document.getElementById('drawer-btn');
+ if (dot) dot.hidden = active === 0;
+ if (btn) btn.setAttribute('aria-label', active ? `Boards and filters, ${active} active` : 'Boards and filters');
+ }
+
+ function activeFilterCount() {
+ let n = 0;
+ ['audience-filter', 'form-filter', 'domain-filter', 'library-type-filter'].forEach(id => {
+ const el = document.getElementById(id);
+ if (el && el.value) n++;
+ });
+ n += activeTiers.size;
+ if (showFavoritesOnly) n++;
+ if (activeTag) n++;
+ if (libraryTopicFilter) n++;
+ n += Object.values(descriptorFacetState).filter(Boolean).length;
+ return n;
+ }
+
+ // --- Header modes: title (rest) / search / add. One row, three jobs. ---
+ function setHeaderMode(mode) {
+ const header = document.querySelector('header');
+ header.dataset.mode = mode;
+ if (mode === 'search') document.getElementById('search').focus();
+ }
+
+ // --- The add dock: + morphs to ✓ and the URL field slides out beside it. ---
+ function addDockIsOpen() { return document.body.classList.contains('add-open'); }
+
+ function openAddDock() {
+ document.body.classList.add('add-open');
+ const fab = document.getElementById('add-fab');
+ fab.setAttribute('aria-expanded', 'true');
+ fab.setAttribute('aria-label', 'Add this URL');
+ // Focus SYNCHRONOUSLY, inside the same task as the tap. iOS Safari only opens the
+ // keyboard for a focus() that happens within the user gesture, so deferring this to
+ // rAF or a timeout would slide the field out and leave no keyboard. Reading
+ // offsetWidth first forces the style flush, so the field is already visible (and
+ // therefore focusable) by the time focus() runs.
+ const input = document.getElementById('add-input');
+ void input.offsetWidth;
+ input.focus();
+ }
+
+ function closeAddDock() {
+ if (!addDockIsOpen()) return;
+ document.body.classList.remove('add-open');
+ const fab = document.getElementById('add-fab');
+ fab.setAttribute('aria-expanded', 'false');
+ fab.setAttribute('aria-label', 'Add a URL');
+ document.getElementById('add-input').blur();
+ }
+
+ /**
+ * Closed → open the field. Open → submit, by clicking the SAME #add-btn the desktop
+ * uses, so there is one add path and no second copy of the submit logic. An empty
+ * field just closes: the ✓ should never look like it failed.
+ */
+ function toggleAddDock() {
+ if (!addDockIsOpen()) { openAddDock(); return; }
+ const input = document.getElementById('add-input');
+ if (!input.value.trim()) { closeAddDock(); return; }
+ document.getElementById('add-btn').click();
+ closeAddDock();
+ }
+
+ // --- Drawer open/close, with a focus trap and the background scroll locked. ---
+ let drawerLastFocused = null;
+ let drawerHideTimer = null;
+ const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+ function drawerIsOpen() {
+ const d = document.getElementById('drawer');
+ return d && !d.hidden;
+ }
+
+ function openDrawer() {
+ const drawer = document.getElementById('drawer');
+ const scrim = document.getElementById('scrim');
+ if (!drawer || drawerIsOpen()) return;
+ drawerLastFocused = document.activeElement;
+ // A close scheduled moments ago would otherwise fire mid-open and hide the drawer
+ // we are opening right now (rapid switch → reopen).
+ if (drawerHideTimer) { clearTimeout(drawerHideTimer); drawerHideTimer = null; }
+ drawer.hidden = false;
+ scrim.hidden = false;
+ updateDrawerChrome();
+ // Next frame, so the transform transition has a start value to animate FROM.
+ requestAnimationFrame(() => { drawer.classList.add('open'); scrim.classList.add('open'); });
+ document.body.style.overflow = 'hidden';
+ document.body.classList.add('drawer-open');
+ document.getElementById('drawer-btn')?.setAttribute('aria-expanded', 'true');
+ document.getElementById('board-pill')?.setAttribute('aria-expanded', 'true');
+ (drawer.querySelector(FOCUSABLE) || drawer).focus();
+ }
+
+ function closeDrawer(immediate = false) {
+ const drawer = document.getElementById('drawer');
+ const scrim = document.getElementById('scrim');
+ if (!drawer || !drawerIsOpen()) return;
+ drawer.classList.remove('open');
+ scrim.classList.remove('open');
+ document.body.style.overflow = '';
+ document.body.classList.remove('drawer-open');
+ document.getElementById('drawer-btn')?.setAttribute('aria-expanded', 'false');
+ document.getElementById('board-pill')?.setAttribute('aria-expanded', 'false');
+ const finish = () => { drawer.hidden = true; scrim.hidden = true; drawerHideTimer = null; };
+ if (drawerHideTimer) clearTimeout(drawerHideTimer);
+ if (immediate) { drawerHideTimer = null; finish(); }
+ else drawerHideTimer = setTimeout(finish, 220);
+ if (drawerLastFocused && typeof drawerLastFocused.focus === 'function') drawerLastFocused.focus();
+ drawerLastFocused = null;
+ }
+
+ function wireMobileChrome() {
+ document.getElementById('drawer-btn').addEventListener('click', () => drawerIsOpen() ? closeDrawer() : openDrawer());
+ document.getElementById('board-pill').addEventListener('click', () => drawerIsOpen() ? closeDrawer() : openDrawer());
+ document.getElementById('scrim').addEventListener('click', () => closeDrawer());
+ document.getElementById('drawer-apply').addEventListener('click', () => closeDrawer());
+ document.getElementById('drawer-clear').addEventListener('click', () => {
+ document.getElementById('clear-filters-btn')?.click();
+ updateDrawerChrome();
+ });
+ document.getElementById('drawer-data').addEventListener('click', () => {
+ closeDrawer();
+ document.querySelector('.data-fab')?.click();
+ });
+ document.getElementById('search-btn').addEventListener('click', () => setHeaderMode('search'));
+ document.getElementById('add-fab').addEventListener('click', toggleAddDock);
+ document.getElementById('hdr-back').addEventListener('click', () => setHeaderMode('title'));
+ // Enter in the docked field submits, same as the desktop add bar.
+ document.getElementById('add-input').addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' && addDockIsOpen()) { e.preventDefault(); toggleAddDock(); }
+ });
+ // A tap on the board dismisses the dock — but never a tap inside it.
+ document.addEventListener('pointerdown', (e) => {
+ if (addDockIsOpen() && !e.target.closest('#add-dock')) closeAddDock();
+ });
+
+ // Esc closes the drawer first, then leaves search/add mode. The modal's own Esc
+ // handler stays untouched — a drawer is never open behind a modal.
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape') {
+ if (drawerIsOpen()) { closeDrawer(); return; }
+ if (addDockIsOpen()) { closeAddDock(); return; }
+ const header = document.querySelector('header');
+ if (header.dataset.mode && header.dataset.mode !== 'title') setHeaderMode('title');
+ return;
+ }
+ if (e.key !== 'Tab' || !drawerIsOpen()) return;
+ const drawer = document.getElementById('drawer');
+ const items = [...drawer.querySelectorAll(FOCUSABLE)].filter(el => el.offsetParent !== null);
+ if (!items.length) return;
+ const first = items[0], last = items[items.length - 1];
+ if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+ else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+ });
+
+ // A board switch is navigation: it answers what the drawer was opened for.
+ document.getElementById('drawer-boards').addEventListener('click', (e) => {
+ if (e.target.closest('.coll-btn[data-cid]')) closeDrawer();
+ });
+
+ setHeaderMode('title');
+ MOBILE_MQ.addEventListener('change', syncChrome);
+ syncChrome();
+ }
+
function renderSwitcher() {
let sw = document.getElementById('collection-switcher');
if (!sw) {
@@ -2051,18 +2875,42 @@
}
// Edit (⚙) only makes sense with an active board; the New-board (+) affordance is
// ALWAYS present so a board can be created even from the empty/degraded states.
- const hasActive = !!collections.find(c => c.id === activeCollection);
- sw.innerHTML = collections.map(c =>
+ const activeIndex = collections.findIndex(c => c.id === activeCollection);
+ const boardBtns = collections.map(c =>
``
- ).join('')
- + (hasActive ? `` : '')
- + ``;
+ );
+ const editBtnHtml = activeIndex >= 0
+ ? ``
+ : '';
+ const newBtnHtml = ``;
+ if (chromeIsMobile) {
+ // In the drawer the boards are a vertical list, so "Edit THIS board" needs a
+ // referent: it sits directly under the active row, indented off an elbow, and
+ // reads as a child of the board it edits. Desktop keeps the flat trailing order.
+ const parts = [...boardBtns];
+ if (editBtnHtml) parts.splice(activeIndex + 1, 0, editBtnHtml);
+ sw.innerHTML = parts.join('') + newBtnHtml;
+ } else {
+ sw.innerHTML = `${esc(f.values.join(' · '))} `
+ : '';
+ return `
${boardBtns.join('')}
` + editBtnHtml + newBtnHtml;
+ }
sw.querySelectorAll('.coll-btn[data-cid]').forEach(b =>
b.addEventListener('click', () => setActiveCollection(b.dataset.cid))
);
document.getElementById('new-board-btn').addEventListener('click', openComposeModal);
const editBtn = document.getElementById('edit-board-btn');
if (editBtn) editBtn.addEventListener('click', () => openEditBoardModal(activeCollection));
+ if (!chromeIsMobile) {
+ // A crowded header can leave the active board scrolled out of sight; bring it back.
+ sw.querySelector('.coll-scroll .coll-btn.active')?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+ }
+ // If the switcher was created after syncChrome ran, it lands in the header. Re-home
+ // it so a first paint on a phone doesn't leave the board list stranded up there.
+ const boardsSlot = document.getElementById('drawer-boards');
+ if (chromeIsMobile && boardsSlot && sw.parentNode !== boardsSlot) {
+ rememberHome(sw);
+ boardsSlot.appendChild(sw);
+ }
+ updateDrawerChrome();
}
// --- Story 10.1/10.3 + Edit: New board (compose→preview→create) & Edit board (rename/delete) ---
@@ -2075,16 +2923,47 @@
function showModalContent(html) {
modalLastFocused = document.activeElement;
document.getElementById('modal-content').innerHTML = html;
- document.getElementById('modal-overlay').classList.add('open');
+ openModalOverlay();
}
- function fieldsPreviewHtml(descriptor) {
+ const FIELD_TYPE_ORDER = ['url', 'image', 'text', 'tags', 'enum', 'number', 'date'];
+
+ /** One field: its name, its type, and (for an enum) the vocabulary it would accept. */
+ function proposalFieldHtml(f) {
+ const values = f.type === 'enum' && (f.values || []).length
+ ? ``
+ + `${esc(f.label || f.key)}`
+ + `${esc(f.type)} ${values}
`;
+ }
+
+ /**
+ * The fields, split by WHO fills them. That is the one distinction that decides
+ * whether a proposed board will actually work for you. Ordered by type so like sits
+ * with like. A - : a field name described by its type is exactly that, and it
+ * keeps reading order identical to visual order.
+ */
+ function proposalFieldsHtml(descriptor) {
const fields = (descriptor && descriptor.fields) || [];
- return fields.map(f =>
- `
${esc(f.type)} ${esc(f.label)} ${esc(f.key)}${f.enrichable === false ? ' (yours)' : ''}
`
- ).join('') || 'No fields
';
+ if (!fields.length) return 'No fields yet. Add them after you create the board.
';
+ const bySlot = (a, b) => FIELD_TYPE_ORDER.indexOf(a.type) - FIELD_TYPE_ORDER.indexOf(b.type);
+ const ai = fields.filter(f => f.enrichable !== false).sort(bySlot);
+ const mine = fields.filter(f => f.enrichable === false).sort(bySlot);
+ const group = (head, note, list) => list.length
+ ? `${head} ${list.length} · ${note}
`
+ + `- ${list.map(proposalFieldHtml).join('')}
@@ -2100,44 +2979,132 @@
`);
document.getElementById('modal-cancel').onclick = closeModal;
document.getElementById('compose-go').onclick = runCompose;
+ composedProposal = null; // a fresh modal must not offer to create the LAST proposal
+ }
+
+ /**
+ * Set the composer's status line. `.save-status` is opacity:0 until `.visible` is
+ * added — without it every message here is invisible, which is exactly how a 90s
+ * compose came to look like a dead modal.
+ */
+ function setComposeStatus(text, tone) {
+ const el = document.getElementById('compose-status');
+ if (!el) return;
+ el.textContent = text || '';
+ el.classList.toggle('visible', !!text);
+ el.style.color = tone === 'error' ? 'var(--danger, #ef4444)' : '';
+ }
+
+ // Honest phase copy: what the composer is actually doing, in order. Nothing here
+ // knows how far along the model is, so there is no progress bar and no percentage —
+ // the elapsed clock is the only real number on screen.
+ const COMPOSE_PHASES = [
+ 'Reading your description',
+ 'Choosing the fields worth keeping',
+ 'Picking how this board captures and reads',
+ 'Checking the proposal holds together',
+ ];
+ const COMPOSE_PHASE_MS = 12_000;
+ let composeTicker = null;
+
+ /** The waiting state: a live clock, the current phase, and a ghost of the board. */
+ function startComposeWorking() {
+ const host = document.getElementById('compose-preview');
+ host.innerHTML = `
+
+
`;
+ const started = Date.now();
+ stopComposeWorking(false);
+ composeTicker = setInterval(() => {
+ const secs = Math.floor((Date.now() - started) / 1000);
+ const elapsed = document.getElementById('compose-elapsed');
+ const phase = document.getElementById('compose-phase');
+ if (!elapsed || !phase) return stopComposeWorking(false);
+ elapsed.textContent = secs < 60 ? `${secs}s` : `${Math.floor(secs / 60)}m ${String(secs % 60).padStart(2, '0')}s`;
+ // Hold on the last phase rather than looping — a spinner that starts over reads
+ // as "stuck", and by then the only honest statement is "still working".
+ const i = Math.min(Math.floor((Date.now() - started) / COMPOSE_PHASE_MS), COMPOSE_PHASES.length - 1);
+ phase.textContent = COMPOSE_PHASES[i];
+ }, 1000);
+ }
+
+ function stopComposeWorking(clear = true) {
+ if (composeTicker) { clearInterval(composeTicker); composeTicker = null; }
+ if (clear) {
+ const host = document.getElementById('compose-preview');
+ if (host) host.innerHTML = '';
+ }
}
let composedProposal = null;
async function runCompose() {
const desc = document.getElementById('compose-desc').value.trim();
- const status = document.getElementById('compose-status');
const goBtn = document.getElementById('compose-go');
- if (!desc) { status.textContent = 'Describe the board first'; return; }
- goBtn.disabled = true; status.textContent = 'Composing…';
+ if (!desc) { setComposeStatus('Describe the board first', 'error'); return; }
+ goBtn.disabled = true;
+ goBtn.textContent = 'Composing…';
+ setComposeStatus('');
+ startComposeWorking();
try {
const res = await fetch('/skills/compose-board', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ description: desc }),
});
const data = await res.json();
- if (!res.ok) { status.textContent = data.error || 'Compose failed'; return; }
+ stopComposeWorking();
+ if (!res.ok) { setComposeStatus(data.error || 'Compose failed', 'error'); return; }
composedProposal = data; // { status, name, descriptor }
- status.textContent = data.status === 'draft' ? 'Draft (review/edit below)' : 'Proposed';
- document.getElementById('compose-preview').innerHTML = `
-
+
+ ${esc(COMPOSE_PHASES[0])}
+ 0s
+
+ Usually under a minute. Nothing is saved until you accept.
+
+ ${ghostBar('42%', 0)}${ghostBar('88%', 90)}${ghostBar('66%', 180)}${ghostBar('78%', 270)}${ghostBar('50%', 360)}
+
+
- })
`
+ : inFlight && withImages
+ ? ``
+ : withImages ? `
+
+ `;
+ }).join('');
+ wireDescriptorCards(listEl, '.lib-card');
+ }
+
+ /** Shared wiring for both composed renderers: open the generic modal, fav, ⋯ menu. */
+ function wireDescriptorCards(root, cardSel) {
+ bindRetryButtons(root);
+ root.querySelectorAll(cardSel).forEach(card => {
+ card.addEventListener('click', (e) => {
+ if (!e.target.closest('.fav-btn') && !e.target.closest('.more-btn') && !e.target.closest('.more-btn-list')) {
+ openModal(card.dataset.id);
+ }
+ });
+ });
+ root.querySelectorAll('.fav-btn').forEach(btn => {
+ btn.addEventListener('click', (e) => { e.stopPropagation(); openFavPopover(btn.dataset.id, btn); });
+ });
+ root.querySelectorAll('.more-btn, .more-btn-list').forEach(btn => {
+ btn.addEventListener('click', (e) => { e.stopPropagation(); openCtxMenu(btn.dataset.id, btn); });
+ });
+ }
+
function renderLibraryTopicCloud() {
const cloud = document.getElementById('library-topic-cloud');
if (!cloud || !window.collectionHelpers?.topicCounts) return;
@@ -3012,7 +4132,7 @@
content.querySelectorAll('.modal-panel').forEach(p => p.classList.toggle('active', p.dataset.panel === target));
});
});
- document.getElementById('modal-overlay').classList.add('open');
+ openModalOverlay();
}
function collectItemPatch() {
@@ -3115,7 +4235,7 @@
`;
document.getElementById('modal-cancel').onclick = closeModal;
document.getElementById('lib-notes-save').onclick = saveLibraryNotes;
- document.getElementById('modal-overlay').classList.add('open');
+ openModalOverlay();
}
async function saveLibraryNotes() {
@@ -3333,7 +4453,7 @@
});
});
- document.getElementById('modal-overlay').classList.add('open');
+ openModalOverlay();
}
async function saveReflection() {
@@ -3367,8 +4487,28 @@
}
}
+ /**
+ * Open the shared modal overlay and LOCK the page behind it. Without the lock, a
+ * touch drag over a modal scrolls the board underneath and the modal drifts out of
+ * reach. The overlay itself keeps `overflow-y: auto`, so a modal taller than the
+ * viewport still scrolls — that is the one scroll that stays live.
+ */
+ function openModalOverlay() {
+ // A modal supersedes both transient surfaces. "New board" and "Edit this board"
+ // are reached FROM the drawer, so without this the modal stacks on top of an open
+ // drawer and closing it drops you back into a menu you are done with.
+ closeAddDock();
+ closeDrawer(true);
+ document.getElementById('modal-overlay').classList.add('open');
+ document.body.classList.add('modal-open');
+ document.body.style.overflow = 'hidden';
+ }
+
function closeModal() {
+ stopComposeWorking(false); // the composer's elapsed clock must not tick on forever
document.getElementById('modal-overlay').classList.remove('open');
+ document.body.classList.remove('modal-open');
+ if (!drawerIsOpen()) document.body.style.overflow = '';
document.getElementById('modal').classList.remove('modal--welcome');
currentBookmark = null;
currentLibraryItem = null;
@@ -4125,13 +5265,14 @@
Board name
-
- Fields (${(data.descriptor && data.descriptor.fields || []).length}) · ${esc(data.descriptor && data.descriptor.view || '')} view
- ${fieldsPreviewHtml(data.descriptor)}
+ renderProposal(data);
+ } catch {
+ stopComposeWorking();
+ setComposeStatus('Network error', 'error');
+ } finally {
+ goBtn.disabled = false;
+ goBtn.textContent = composedProposal ? 'Compose again' : 'Compose';
+ goBtn.className = composedProposal ? 'btn btn-ghost' : 'btn btn-primary';
+ }
+ }
+
+ /** The proposal, as a board you can read at a glance rather than a list of rows. */
+ function renderProposal(data) {
+ const d = data.descriptor || {};
+ const fields = d.fields || [];
+ const draftNote = data.status === 'draft'
+ ? `This one needs your hand. ${esc((data.errors || [])[0]?.message || 'The proposal did not validate.')} Create it anyway and shape the fields in the board editor.
`
+ : '';
+ document.getElementById('compose-preview').innerHTML = `
+
+ ` : ''}
+ ${proposalFieldsHtml(d)}
+ ${draftNote}
+
+ `;
+ document.getElementById('compose-create').onclick = createComposedBoard;
}
async function createComposedBoard() {
if (!composedProposal) return;
const name = (document.getElementById('compose-name').value || composedProposal.name || '').trim();
- const status = document.getElementById('compose-status');
const btn = document.getElementById('compose-create');
- if (!name) { status.textContent = 'Name is required'; return; }
- btn.disabled = true; status.textContent = 'Creating…';
+ if (!name) { setComposeStatus('Name is required', 'error'); return; }
+ btn.disabled = true;
+ btn.textContent = 'Creating…';
+ setComposeStatus('Creating the board…');
try {
const id = slugifyBoardId(name);
const res = await fetch('/skills/create-board', {
@@ -2145,11 +3112,21 @@
body: JSON.stringify({ id, name, descriptor: composedProposal.descriptor }),
});
const data = await res.json();
- if (!res.ok) { status.textContent = data.error || 'Create failed'; btn.disabled = false; return; }
+ if (!res.ok) {
+ setComposeStatus(data.error || 'Create failed', 'error');
+ btn.disabled = false; btn.textContent = 'Create board';
+ return;
+ }
closeModal();
+ // Point the app at the new board BEFORE load(), so load() resolves it as active
+ // and doesn't subscribe to the outgoing board's status stream on the way past.
+ localStorage.setItem('board.activeCollection', id);
await load();
await setActiveCollection(id);
- } catch { status.textContent = 'Network error'; btn.disabled = false; }
+ } catch {
+ setComposeStatus('Network error', 'error');
+ btn.disabled = false; btn.textContent = 'Create board';
+ }
}
const BOARD_FIELD_TYPES = ['text', 'number', 'date', 'url', 'enum', 'tags', 'image'];
@@ -2343,6 +3320,11 @@
async function setActiveCollection(cid) {
activeCollection = cid;
localStorage.setItem('board.activeCollection', cid);
+ // The status stream is BOARD-SCOPED on the server (/events?boardId=…), so a switch
+ // must re-subscribe or the new board receives nothing and its cards stay stuck in
+ // their skeleton until a manual refresh. Before the items fetch, so a transition
+ // that fires while they load isn't missed; subscribeToStatus is idempotent per board.
+ subscribeToStatus();
const helpers = window.collectionHelpers;
const activeCol = collections.find(c => c.id === cid);
@@ -2539,7 +3521,7 @@
const inFlight = (b) => window.collectionHelpers.isInFlight(b);
const activeColObj = collections.find(c => c.id === activeCollection);
- const isCustomBoard = !!activeColObj && !['inspiration', 'library', 'inbox'].includes(activeColObj.id);
+ const isCustomBoard = isComposedBoard(activeColObj);
if (isCustomBoard) {
// Composed board: filter via the descriptor-driven predicate (Story 8.2's
@@ -2593,21 +3575,30 @@
}
const sort = document.getElementById('sort-select').value;
- const order = new Map(bookmarks.map((b, i) => [b.id, i]));
- filtered.sort((a, b) => {
- const cmp = String(a.added).localeCompare(String(b.added));
- if (cmp !== 0) return sort === 'oldest' ? cmp : -cmp;
- const ai = order.get(a.id), bi = order.get(b.id);
- return sort === 'oldest' ? ai - bi : bi - ai;
- });
+ // `filtered` preserves `bookmarks` order (created_at DESC), which is what the
+ // same-day tie-break reads as recency. See collections-ui.sortItems.
+ filtered = window.collectionHelpers.sortItems(filtered, sort);
const noun = activeCollection === 'inspiration' ? 'site' : 'item';
document.getElementById('count').textContent = `${filtered.length} ${noun}${filtered.length !== 1 ? 's' : ''}`;
+ updateDrawerChrome();
render();
}
function render() {
+ // Drives the full-width-grid vs centred-list rule above.
+ document.querySelector('main').dataset.view = activeView;
const activeCol = collections.find(c => c.id === activeCollection);
+ // A COMPOSED board renders from its own descriptor. It can't use either seeded
+ // renderer: /api/collections derives type "inspiration" for any grid board, which
+ // sent composed boards into renderGrid() — hardcoded to meta.tags/design.steal_this
+ // — so their tiles came out as a title and nothing else. The seeded boards keep
+ // their bespoke renderers untouched (NFR-BC).
+ if (activeCol && isComposedBoard(activeCol)) {
+ if (activeView === 'grid') renderDescriptorGrid(activeCol);
+ else renderDescriptorList(activeCol);
+ return;
+ }
if (activeCol && activeCol.type !== 'inspiration') {
// Non-visual boards (e.g. Library) honor the grid/list toggle too — the grid is
// just screenshot-less (the board's descriptor stores no images).
@@ -2619,6 +3610,15 @@
else renderList();
}
+ // The seeded boards (bespoke renderers + fixed chrome) vs everything the composer
+ // made. Used by BOTH applyFilters (descriptor-driven predicate) and render
+ // (descriptor-driven card) so filtering and drawing can never disagree about which
+ // kind of board this is.
+ const SEEDED_BOARD_IDS = ['inspiration', 'library', 'inbox'];
+ function isComposedBoard(col) {
+ return !!col && !SEEDED_BOARD_IDS.includes(col.id);
+ }
+
const HEART_SVG = ``;
// --- Capture lifecycle rendering ---
@@ -2865,6 +3865,126 @@
});
}
+ // --- Composed-board rendering (descriptor-driven) ---------------------------------
+ // ONE pair of renderers for EVERY board the composer makes, with no per-board code:
+ // collectionHelpers.cardSummary picks the three card slots (category badge, lead
+ // line, chips) out of whatever fields that board declared. The tile chrome, the
+ // skeleton and the failure state are the SAME helpers the seeded boards use, so a
+ // composed board never looks like a second-class citizen of the app.
+
+ /** Does this board carry images? url-readable boards are text-first (og:image only). */
+ function boardShowsImages(col) {
+ return (col?.descriptor?.ingest_mode ?? 'url-screenshot') !== 'url-readable';
+ }
+
+ function summaryOf(b, col) {
+ const ch = window.collectionHelpers;
+ return ch?.cardSummary ? ch.cardSummary(b, col?.descriptor) : { badge: null, lead: null, tags: [] };
+ }
+
+ /**
+ * The filled (state === 'ready') body of a composed card: lead line + chip row.
+ * Both class names are passed in because the two shells lay their body out
+ * differently — .lib-card is a NAMED-AREA grid, so its chips must carry
+ * `lib-topics` or they auto-place into an implicit cell and land in the wrong slot.
+ */
+ function descriptorCardBody(b, col, leadClass, tagsClass) {
+ const s = summaryOf(b, col);
+ const lead = s.lead ? `Board name
+
+
+ ${esc(d.view || 'grid')} view
+ ${esc(INGEST_LABEL[d.ingest_mode] || d.ingest_mode || 'captures pages')}
- `;
- document.getElementById('compose-create').onclick = createComposedBoard;
- } catch { status.textContent = 'Network error'; }
- finally { goBtn.disabled = false; }
+ ${d.enrichment_prompt ? `The lens
${esc(d.enrichment_prompt)}
${esc(s.lead.value)}
` : '';
+ const tags = s.tags.length
+ ? ``
+ : '';
+ return lead + tags;
+ }
+
+ function renderDescriptorGrid(col) {
+ const gridEl = document.getElementById('grid-view');
+ const listEl = document.getElementById('list-view');
+ listEl.style.display = 'none';
+ gridEl.style.display = '';
+ if (!filtered.length) { gridEl.innerHTML = emptyState(bookmarks.length > 0); return; }
+ const withImages = boardShowsImages(col);
+ gridEl.innerHTML = filtered.map(b => {
+ const state = stateOf(b);
+ const inFlight = state === 'capturing' || state === 'reading';
+ const badge = state === 'ready'
+ ? (summaryOf(b, col).badge ? `${esc(summaryOf(b, col).badge.value)}` : '')
+ : inFlight ? `` : '';
+ // Same progressive reveal as Inspiration: the screenshot and title are whatever
+ // capture already produced, and only the AI fields stay ghosted.
+ const image = b.screenshot
+ ? `No image
` : '';
+ const title = b.title
+ ? `${esc(b.title)}
`
+ : `${ghostBar('72%')}
`;
+ const body = state === 'ready'
+ ? descriptorCardBody(b, col, 'card-lead', 'card-tags')
+ : `${stateNote(b, state)}${inFlight ? ghostBody() : ''}`;
+ return `
+
+ ${image}
+
+
+
`;
+ }).join('');
+ wireDescriptorCards(gridEl, '.grid-card');
+ }
+
+ function renderDescriptorList(col) {
+ const gridEl = document.getElementById('grid-view');
+ const listEl = document.getElementById('list-view');
+ gridEl.style.display = 'none';
+ listEl.style.display = 'block';
+ if (!filtered.length) { listEl.innerHTML = emptyState(bookmarks.length > 0); return; }
+ listEl.innerHTML = filtered.map(b => {
+ const state = stateOf(b);
+ const inFlight = state === 'capturing' || state === 'reading';
+ const badge = state === 'ready' && summaryOf(b, col).badge
+ ? `${esc(summaryOf(b, col).badge.value)}` : '';
+ const body = state === 'ready'
+ ? descriptorCardBody(b, col, 'lib-summary', 'lib-topics')
+ : `${stateNote(b, state)}${inFlight ? `
+
+ ${title}${badge}
+ ${body}
+ ${ghostBar('100%')}${ghostBar('88%', 90)}${ghostBar('42%', 180)}
` : ''}`;
+ return `
+