${esc(b.title || b.url)}
@@ -2470,10 +2809,13 @@
${b.author ? `` : ''}
`
+ + `${esc(reason.charAt(0).toUpperCase() + reason.slice(1))}.`
+ + `
`;
+ }
+ return `${STATE_LABEL[state]}
`;
+ }
+
+ /**
+ * Ghosted stand-ins for the fields enrichment has not filled yet, cut to the real
+ * card's geometry: two lines at the .card-steal cadence (12px/1.4, clamped to two)
+ * and a wrapping row of tag pills at .tag's height and radius. Widths vary so the
+ * block reads as text and tags rather than as a progress bar.
+ */
+ const GHOST_TAG_WIDTHS = ['74px', '56px', '88px', '62px', '48px', '80px'];
+
+ function ghostBody() {
+ return `${ghostBar('100%', 0)}${ghostBar('68%', 80)}
`
+ + ``;
+ }
+
+ /** Wire the retry buttons a failed card renders. */
+ function bindRetryButtons(root) {
+ root.querySelectorAll('.card-retry').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ retryItem(btn.dataset.retryId, btn);
+ });
+ });
+ }
+
+ /**
+ * Re-run capture + enrichment for a failed item via the existing refetch route.
+ * The card returns to its in-flight state immediately; SSE drives it from there.
+ */
+ async function retryItem(id, btn) {
+ if (btn) { btn.disabled = true; btn.textContent = 'Retrying…'; }
+ const item = bookmarks.find(b => b.id === id);
+ if (item) { item.status = 'processing'; delete item.error_reason; applyFilters(); }
+ try {
+ const res = await fetch(window.collectionHelpers.refetchUrl(activeCollection, id), { method: 'POST' });
+ if (!res.ok) throw new Error('refetch failed');
+ } catch {
+ if (item) { item.status = 'error'; item.error_reason = 'could not start a retry'; applyFilters(); }
+ }
+ }
+
+
function renderGrid() {
const el = document.getElementById('grid-view');
if (!filtered.length) { el.innerHTML = emptyState(bookmarks.length > 0); return; }
- el.innerHTML = filtered.map(b => `
-
- ${b.screenshot
- ? `})
`
- : ``
+ : inFlight
+ ? ``
+ : `
No image
`}
+ el.innerHTML = filtered.map(b => {
+ const state = stateOf(b);
+ const inFlight = state === 'capturing' || state === 'reading';
+ // The image and title are whatever capture has already produced: at `reading`
+ // they are real and only the AI read is still ghosted, so the card fills in the
+ // order the data actually arrives instead of flipping from blank to complete.
+ const image = b.screenshot
+ ? `No image
`;
+ const title = b.title
+ ? `${esc(b.title)}
`
+ : `${ghostBar('72%')}
`;
+ const badge = state === 'ready'
+ ? ``
+ : inFlight ? `` : '';
+ const body = state === 'ready'
+ ? `${esc(b.design?.steal_this || '')}
+ `
+ : `${stateNote(b, state)}${inFlight ? ghostBody() : ''}`;
+ return `
+
+ ${image}
- `).join('');
+ `;}).join('');
+ bindRetryButtons(el);
el.querySelectorAll('.grid-card').forEach(card => {
card.addEventListener('click', (e) => {
if (!e.target.closest('.fav-btn')) openModal(card.dataset.id);
@@ -2416,8 +2746,11 @@
function renderList() {
const el = document.getElementById('list-view');
if (!filtered.length) { el.innerHTML = emptyState(bookmarks.length > 0); return; }
- el.innerHTML = filtered.map(b => `
-
-
- ${esc(b.title)}
-
- ${esc(b.design?.steal_this || '')}
-
+ ${body}
+ el.innerHTML = filtered.map(b => {
+ const state = stateOf(b);
+ const inFlight = state === 'capturing' || state === 'reading';
+ return `
+
- `).join('');
+ `;}).join('');
+ bindRetryButtons(el);
el.querySelectorAll('.list-card').forEach(card => {
card.addEventListener('click', (e) => {
if (!e.target.closest('.more-btn-list')) openModal(card.dataset.id);
@@ -2459,8 +2795,11 @@
gridEl.style.display = 'none';
listEl.style.display = 'block';
if (!filtered.length) { listEl.innerHTML = emptyState(bookmarks.length > 0); return; }
- listEl.innerHTML = filtered.map(b => `
-
+ listEl.innerHTML = filtered.map(b => {
+ const state = stateOf(b);
+ const inFlight = state === 'capturing' || state === 'reading';
+ return `
+
- ${b.summary ? `
${b.favorite ? `` : ''}
${b.screenshot
@@ -2426,11 +2759,13 @@
${esc(b.summary)}
` : ''} - ${b.topics?.length ? `${b.topics.map(t => `${esc(t)}`).join('')}
` : ''}
+ ${state === 'ready'
+ ? `${b.summary ? `${esc(b.summary)}
` : ''} + ${b.topics?.length ? `${b.topics.map(t => `${esc(t)}`).join('')}
` : ''}`
+ : `${stateNote(b, state)}${inFlight ? `${ghostBar('100%')}${ghostBar('88%', 90)}${ghostBar('42%', 180)}
` : ''}`}
- `).join('');
+ `;}).join('');
+ bindRetryButtons(listEl);
listEl.querySelectorAll('.lib-card').forEach(card => {
card.addEventListener('click', (e) => {
if (!e.target.closest('.more-btn-list')) openLibraryModal(card.dataset.id);
@@ -2493,8 +2835,11 @@
listEl.style.display = 'none';
gridEl.style.display = '';
if (!filtered.length) { gridEl.innerHTML = emptyState(bookmarks.length > 0); return; }
- gridEl.innerHTML = filtered.map(b => `
-
+ gridEl.innerHTML = filtered.map(b => {
+ const state = stateOf(b);
+ const inFlight = state === 'capturing' || state === 'reading';
+ return `
+
- `).join('');
+ `;}).join('');
+ bindRetryButtons(gridEl);
gridEl.querySelectorAll('.lib-grid-card').forEach(card => {
card.addEventListener('click', (e) => {
if (!e.target.closest('.more-btn-list')) openLibraryModal(card.dataset.id);
@@ -2600,11 +2948,21 @@
if (!groups.has(g)) groups.set(g, []);
groups.get(g).push(e);
}
- const displayHtml = [...groups.entries()].map(([g, es]) => `
- ${g ? ``).join('');
const editSection = `` : ''}
${displayHtml}
${editSection}
@@ -2637,6 +3000,18 @@
document.getElementById('modal-cancel').onclick = closeModal;
document.getElementById('modal-save').onclick = () => saveItemEdits(item.id);
document.getElementById('modal-fav').onclick = () => toggleItemFavorite(item.id);
+ bindRetryButtons(content);
+ content.querySelectorAll('.modal-tab').forEach(tab => {
+ tab.addEventListener('click', () => {
+ const target = tab.dataset.panel;
+ content.querySelectorAll('.modal-tab').forEach(t => {
+ const on = t === tab;
+ t.classList.toggle('active', on);
+ t.setAttribute('aria-selected', String(on));
+ });
+ content.querySelectorAll('.modal-panel').forEach(p => p.classList.toggle('active', p.dataset.panel === target));
+ });
+ });
document.getElementById('modal-overlay').classList.add('open');
}
@@ -3039,7 +3414,7 @@
agentBtn.disabled = true;
closeAgentMenu();
status.className = 'add-status';
- status.textContent = '📸 Capturing…';
+ status.textContent = '';
try {
const res = await fetch(window.collectionHelpers.addUrl(activeCollection), {
@@ -3055,8 +3430,9 @@
}
bookmarks.unshift(data);
input.value = '';
- status.textContent = `✓ Added ${data.title || data.url}`;
- setTimeout(() => { status.textContent = ''; }, 3000);
+ // The card itself now shows capture progress, so the header stops narrating it;
+ // duplicating the state in two places just makes the chrome louder.
+ status.textContent = '';
if (activeCollection === 'inspiration') buildTagCloud();
else renderLibraryTopicCloud();
applyFilters();
@@ -3432,6 +3808,27 @@
if (e.target.closest('[data-welcome-close]')) { closeModal(); return; }
});
+ /**
+ * The one always-available door to the guide and to import/export. The welcome modal
+ * was reachable only from an empty board, which meant that once you had items — the
+ * exact point at which a backup starts to matter — there was no way back to it.
+ */
+ function mountDataFab() {
+ if (document.querySelector('.data-fab')) return;
+ const btn = document.createElement('button');
+ btn.type = 'button';
+ btn.className = 'data-fab';
+ btn.id = 'data-fab';
+ btn.title = 'Guide, backup and settings';
+ btn.setAttribute('aria-label', 'Guide, backup and settings');
+ btn.innerHTML = '';
+ btn.addEventListener('click', openWelcomeModal);
+ document.body.appendChild(btn);
+ }
+
function prefersReducedMotion() {
return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
}
@@ -3454,13 +3851,178 @@
// The "Where to begin" guide: a short letter from the author + three first steps +
// a link to the docs. Opened from the empty state's secondary affordance.
+ /** Tabs inside the welcome modal reuse the item modal's tab vocabulary. */
+ function wireWelcomeTabs() {
+ const root = document.getElementById('modal-content');
+ root.querySelectorAll('.modal-tab').forEach(tab => {
+ tab.addEventListener('click', () => {
+ const target = tab.dataset.panel;
+ root.querySelectorAll('.modal-tab').forEach(t => {
+ const on = t === tab;
+ t.classList.toggle('active', on);
+ t.setAttribute('aria-selected', String(on));
+ });
+ root.querySelectorAll('.modal-panel').forEach(p => p.classList.toggle('active', p.dataset.panel === target));
+ });
+ });
+ }
+
+ /** Trigger a browser download of the streamed tar without buffering it in JS. */
+ function downloadBackup() {
+ // A plain navigation lets the browser stream ~100MB straight to disk; fetching it
+ // into a Blob first would hold the whole archive in memory for no reason.
+ const a = document.createElement('a');
+ a.href = '/api/backup';
+ a.download = '';
+ document.body.appendChild(a);
+ a.click();
+ a.remove();
+ }
+
+ function wireDataPanel() {
+ const exportBtn = document.getElementById('data-export');
+ const exportNote = document.getElementById('data-export-note');
+ const fileInput = document.getElementById('data-import-file');
+ const importBtn = document.getElementById('data-import');
+ const importNote = document.getElementById('data-import-note');
+ const fresh = document.getElementById('data-fresh');
+ const danger = document.getElementById('data-danger');
+ const confirmBox = document.getElementById('data-confirm');
+ const wipeBtn = document.getElementById('data-wipe-restore');
+ if (!exportBtn) return;
+
+ exportNote.textContent = `${bookmarks.length} items on this board · every board is included`;
+
+ exportBtn.addEventListener('click', () => {
+ downloadBackup();
+ exportNote.textContent = 'Downloading…';
+ setTimeout(() => { exportNote.textContent = 'Saved to your downloads.'; }, 1500);
+ });
+
+ const importLabel = document.getElementById('data-import-label');
+ fileInput.addEventListener('change', () => {
+ const f = fileInput.files && fileInput.files[0];
+ importBtn.disabled = !f || fresh.checked;
+ // The native control showed the filename itself; the styled label has to say it.
+ importLabel.textContent = f ? 'Choose a different file' : 'Choose a file';
+ importNote.textContent = f ? `${f.name} · ${(f.size / 1048576).toFixed(1)} MB` : '';
+ updateWipeArm();
+ });
+
+ // Arming is two steps on purpose: the checkbox reveals the consequence, and the
+ // typed word confirms it. A checkbox alone is one stray click from data loss.
+ fresh.addEventListener('change', () => {
+ danger.hidden = !fresh.checked;
+ importBtn.disabled = fresh.checked || !(fileInput.files && fileInput.files[0]);
+ updateWipeArm();
+ });
+ confirmBox.addEventListener('input', updateWipeArm);
+
+ function updateWipeArm() {
+ const hasFile = !!(fileInput.files && fileInput.files[0]);
+ wipeBtn.disabled = !(fresh.checked && hasFile && confirmBox.value.trim().toLowerCase() === 'delete');
+ }
+
+ importBtn.addEventListener('click', () => runRestore({ wipeFirst: false }));
+ wipeBtn.addEventListener('click', () => runRestore({ wipeFirst: true }));
+
+ async function runRestore({ wipeFirst }) {
+ const file = fileInput.files && fileInput.files[0];
+ if (!file) return;
+ importBtn.disabled = true;
+ wipeBtn.disabled = true;
+
+ try {
+ if (wipeFirst) {
+ // The backup is not a courtesy: it is the only undo this action has, so it
+ // happens before anything is deleted.
+ importNote.textContent = 'Downloading a backup first…';
+ downloadBackup();
+ await new Promise(r => setTimeout(r, 2500));
+ importNote.textContent = 'Deleting current items…';
+ const wipe = await fetch('/skills/wipe-items', {
+ method: 'POST', headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ confirm: 'delete' }),
+ });
+ if (!wipe.ok) throw new Error('could not clear the collection');
+ }
+
+ importNote.textContent = 'Restoring…';
+ const res = await fetch('/api/backup', {
+ method: 'POST', headers: { 'Content-Type': 'application/x-tar' }, body: file,
+ });
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok) throw new Error(data.error || 'restore failed');
+
+ importNote.textContent =
+ `Restored ${data.itemsCreated} items and ${data.filesRestored} images`
+ + (data.boardsCreated ? `, ${data.boardsCreated} boards` : '')
+ + (data.itemsSkipped ? ` · ${data.itemsSkipped} already here, left alone` : '')
+ + '.';
+ await load();
+ } catch (err) {
+ importNote.textContent = `Could not restore: ${err.message}`;
+ } finally {
+ importBtn.disabled = !(fileInput.files && fileInput.files[0]) || fresh.checked;
+ updateWipeArm();
+ }
+ }
+ }
+
+ async function wireSystemPanel() {
+ const box = document.getElementById('system-prompt');
+ const note = document.getElementById('system-prompt-note');
+ const saveBtn = document.getElementById('system-prompt-save');
+ const resetBtn = document.getElementById('system-prompt-reset');
+ if (!box) return;
+
+ let builtInDefault = '';
+ try {
+ const data = await fetch('/api/settings').then(r => r.json());
+ builtInDefault = data.defaults['inspiration.system_prompt'] || '';
+ box.value = data.settings['inspiration.system_prompt'] || '';
+ // Showing the default as placeholder keeps "empty" and "default" distinguishable.
+ box.placeholder = builtInDefault;
+ } catch {
+ note.textContent = 'Could not load settings.';
+ return;
+ }
+
+ saveBtn.addEventListener('click', async () => {
+ note.textContent = 'Saving…';
+ try {
+ const res = await fetch('/api/settings', {
+ method: 'PATCH', headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ settings: { 'inspiration.system_prompt': box.value } }),
+ });
+ if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || 'save failed');
+ note.textContent = box.value.trim() ? 'Saved. It applies to the next capture.' : 'Cleared — the built-in lens is back.';
+ } catch (err) {
+ note.textContent = `Could not save: ${err.message}`;
+ }
+ });
+
+ resetBtn.addEventListener('click', () => {
+ box.value = '';
+ note.textContent = 'Cleared. Save to confirm.';
+ box.focus();
+ });
+ }
+
function openWelcomeModal() {
showModalContent(`
@@ -2502,11 +2847,14 @@
${b.type ? `${esc(b.type)}` : ''}
${esc(hostname(b.url))}${b.author ? ` · ${esc(b.author)}` : ''}
- ${b.summary ? `${esc(b.summary)}
` : ''} - ${b.topics?.length ? `${b.topics.slice(0, 6).map(t => `${esc(t)}`).join('')}
` : ''}
+ ${state === 'ready'
+ ? `${b.summary ? `${esc(b.summary)}
` : ''} + ${b.topics?.length ? `${b.topics.slice(0, 6).map(t => `${esc(t)}`).join('')}
` : ''}`
+ : `${stateNote(b, state)}${inFlight ? `${ghostBar('100%')}${ghostBar('80%', 90)}${ghostBar('50%', 180)}
` : ''}`}
${esc(g)}
` : ''}
-
+ // Field groups (the dotted prefix: meta, design, reflection) become tabs rather
+ // than a stack of headings — one group is in view at a time, so a long analysis
+ // stops pushing the rest of the modal off-screen. Falls back to a plain grid when
+ // there is only one group: a lone tab is a heading pretending to be a control.
+ const groupList = [...groups.entries()];
+ const panelId = (g) => g || 'fields';
+ const gridFor = (es) => `
`;
+ const displayHtml = groupList.length > 1
+ ? `
${es.map(e => ``).join('')}
-
`).join('');
+ ${esc(e.field.label)}
${rh.renderField ? rh.renderField(e.field, e.value) : `${esc(String(e.value))}
`}
+ ${groupList.map(([g], i) => ``).join('')}
+
+ ${groupList.map(([g, es], i) => `${gridFor(es)}
`).join('')}`
+ : groupList.map(([, es]) => gridFor(es)).join('');
const editInputs = editableFields.map(f => `${esc(f.label)}
${modalEditInput(f, ch.getFieldValue ? ch.getFieldValue(item, f.key) : undefined)}
@@ -2615,6 +2973,10 @@
const favStar = ``;
const urlSafe = rh.isSafeUrl && rh.isSafeUrl(item.url);
+ // An item that is still being read, or that failed, says so here too — otherwise
+ // the modal is a wall of blank fields with no explanation (the reported bug).
+ const modalState = stateOf(item);
+
const content = document.getElementById('modal-content');
content.innerHTML = `
${item.screenshot ? `})
` : ''}
@@ -2625,6 +2987,7 @@
${item.url ? `${urlSafe ? `${esc(item.url)}` : `${esc(item.url)}`}${item.added ? ` · ${esc(item.added)}` : ''}
` : ''}
${tagsHtml}
+ ${modalState !== 'ready' ? `${stateNote(item, modalState)}
` : ''}
${lead ? `${esc(lead.field.label)}
${esc(String(lead.value))}
Welcome to board
A collection with a point of view.
-
+
`);
+ wireWelcomeTabs();
+ wireDataPanel();
+ wireSystemPanel();
document.getElementById('modal').classList.add('modal--welcome');
}
@@ -3502,12 +4125,13 @@
+
+
+
+
+
+
+
+
+
+
+ Where to begin
- Capture. Paste a URL above, or share to your Inbox from your phone. It lands in the Inbox first. @@ -3489,12 +4051,73 @@
Worth knowing
Sean, the original creator of Board.
+
+
+
+
+
+ Take it with you
+Everything on every board, plus the images, as one plain .tar file. It opens with ordinary tools, so you can look inside without this app.
+
+
+
+
+
+ Bring it back
+Restore a backup, on this machine or a new one. Anything already here is left untouched: boards keep their own fields, and items you already have are skipped rather than rewritten.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This deletes your items
+Every item and every image goes. Your boards and the fields you built stay. A backup downloads first.
+
+
+
+
+
+
+
+
+ The analysis lens
+What the AI is told before it looks at anything you save. Rewrite it to match what you actually collect. Leave it empty to use the built-in one.
+ +
+
+
+
+
+ Each board also has its own enrichment prompt, in that board's ⚙ editor. This one is the global fallback for capture.
+