@reqlan/analytical 0.6.3 → 0.8.1

package/out/export/html-export-assets.js.map

@@ -1 +1 @@
-{"version":3,"file":"html-export-assets.js","sourceRoot":"","sources":["../../src/export/html-export-assets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,2FAA2F;AAC3F,SAAS,sBAAsB;IAC3B,OAAO,YAAY,CAAC,IAAI,GAAG,CAAC,0BAA0B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;SAC5E,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;AACrC,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0V5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;EACpB,sBAAsB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA45BzB,CAAC;AAEF,MAAM,UAAU,sBAAsB,CAAC,SAAkB;IACrD,OAAO,wCAAwC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC;AAC3G,CAAC"}
+{"version":3,"file":"html-export-assets.js","sourceRoot":"","sources":["../../src/export/html-export-assets.ts"],"names":[],"mappings":"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"}

package/out/export/html-export-template.js

@@ -1,4 +1,41 @@
-import { escapeHtml, fileByIdea, filePageEnabled, formatAttributeValue, formatDate, hrefFor, ideaStatus, ideaTags, pageHref, relatedClusters, renderAttributeValueHtml, renderDefinitionList, renderIdeaSummaryHtml, renderMetric, renderOptionalStatusCell, renderOptionalStatusParagraph, renderOptionalTagsCell, renderOptionalTagsParagraph, renderTextWithRefsHtml, resolveExportFilePage, slugAttributeKey, stringifyJson } from './html-export-utils.js';
+import { escapeHtml, exportIdeaAnchorId, fileByIdea, filePageEnabled, formatAttributeValue, formatDate, hrefFor, ideaStatus, ideaTags, pageHref, relatedClusters, renderAttributeValueHtml, listFilterHref, renderDefinitionList, renderFilePathCell, renderIdeaSummaryHtml, renderLinkedStatusCell, renderLinkedTagsCell, renderMetric, renderOptionalStatusCell, renderOptionalTagsCell, renderPrintIdeaAttributesHtml, renderTextWithRefsHtml, resolveExportFilePage, slugAttributeKey, statusOrTagFacetHref, stringifyJson } from './html-export-utils.js';
+import { FILTER_EMPTY, FILTER_NOT_PRESENT, filterDisplayLabel, isFilterEmpty, isFilterNotPresent, isFilterUnspecified } from '../core/filter-specials.js';
+function renderMultiFilterSelect(attr, countsByValue, emptyLabel) {
+    const valueSet = new Set(Object.keys(countsByValue));
+    valueSet.add(FILTER_NOT_PRESENT);
+    valueSet.add(FILTER_EMPTY);
+    const options = [...valueSet].map(value => ({
+        value,
+        label: filterDisplayLabel(value),
+        special: isFilterNotPresent(value) || isFilterEmpty(value) || isFilterUnspecified(value),
+        kind: isFilterNotPresent(value)
+            ? 'not-present'
+            : isFilterEmpty(value)
+                ? 'empty'
+                : isFilterUnspecified(value)
+                    ? 'unspecified'
+                    : 'concrete',
+        count: countsByValue[value] ?? 0
+    }));
+    options.sort((left, right) => {
+        const rank = (kind) => kind === 'not-present' ? 0 : kind === 'empty' ? 1 : kind === 'unspecified' ? 2 : 3;
+        return rank(left.kind) - rank(right.kind) || left.label.localeCompare(right.label);
+    });
+    return `
+        <div
+            class="scd is-loading"
+            data-graph-${attr}-scd
+            data-placeholder="${escapeHtml(emptyLabel)}"
+            data-label="${attr === 'status' ? 'Status' : 'Tags'}"
+            data-options="${escapeHtml(JSON.stringify(options))}"
+        >
+            <button type="button" class="scd-trigger" aria-haspopup="listbox" aria-expanded="false" aria-busy="true">
+                <span class="scd-trigger-label">${attr === 'status' ? 'Status…' : 'Tags…'}</span>
+                <span class="scd-chevron" aria-hidden="true"></span>
+            </button>
+        </div>
+    `;
+}
 function exportHref(snapshot, currentPath, targetPath) {
     return hrefFor(currentPath, targetPath, snapshot.urlBase);
 }
@@ -7,8 +44,13 @@ function exportPageHref(snapshot, currentPath, pageInfo) {
 }
 export function renderHomePage(snapshot) {
     const currentPath = snapshot.manifest.home.path;
-    const highlightClusters = snapshot.clusters.slice(0, 8).map(cluster => `
-        <a class="entity-card" href="${escapeHtml(exportPageHref(snapshot, currentPath, cluster.page))}">
+    const clustersIndexHref = exportPageHref(snapshot, currentPath, snapshot.manifest.clustersIndex);
+    const highlightClusters = snapshot.clusters.slice(0, 8).map(cluster => {
+        const href = snapshot.pageOptions.includeClusterPages
+            ? exportPageHref(snapshot, currentPath, cluster.page)
+            : listFilterHref(snapshot, currentPath, snapshot.manifest.clustersIndex, { kind: cluster.kind, cluster: cluster.label });
+        return `
+        <a class="entity-card" href="${escapeHtml(href)}">
             <div class="pill-row">
                 <span class="pill">${escapeHtml(cluster.kind)}</span>
                 <span class="pill">${cluster.counts.ideas} ideas</span>
@@ -16,7 +58,8 @@ export function renderHomePage(snapshot) {
             <h3>${escapeHtml(cluster.label)}</h3>
             <p class="subtle">${escapeHtml(cluster.description)}</p>
         </a>
-    `).join('');
+    `;
+    }).join('');
     const body = `
         <header class="hero">
             <div class="panel">
@@ -37,17 +80,17 @@ export function renderHomePage(snapshot) {
             ${renderMetric('References', String(snapshot.counts.edges), exportPageHref(snapshot, currentPath, snapshot.manifest.graph))}
             ${renderMetric('Files', String(snapshot.counts.files), exportPageHref(snapshot, currentPath, snapshot.manifest.filesIndex))}
             ${renderMetric('Code files', String(snapshot.codeFiles.length), exportPageHref(snapshot, currentPath, snapshot.manifest.codeFilesIndex))}
-            ${renderMetric('Clusters', String(snapshot.counts.clusters), exportPageHref(snapshot, currentPath, snapshot.manifest.clustersIndex))}
+            ${renderMetric('Clusters', String(snapshot.counts.clusters), clustersIndexHref)}
             ${renderMetric('Attributes', String(snapshot.attributes.length), exportPageHref(snapshot, currentPath, snapshot.manifest.attributesIndex))}
         </section>
         <section class="split">
             <div class="panel">
                 <h2>Status Rollup</h2>
-                <div class="scroll-window">${renderDefinitionList(snapshot.byStatus)}</div>
+                <div class="scroll-window">${renderDefinitionList(snapshot.byStatus, key => statusOrTagFacetHref(snapshot, currentPath, 'status', key))}</div>
             </div>
             <div class="panel">
                 <h2>Tags</h2>
-                <div class="scroll-window">${renderDefinitionList(snapshot.byTag)}</div>
+                <div class="scroll-window">${renderDefinitionList(snapshot.byTag, key => statusOrTagFacetHref(snapshot, currentPath, 'tag', key))}</div>
             </div>
         </section>
         <section class="panel">
@@ -75,9 +118,9 @@ export function renderIdeasIndexPage(snapshot) {
     const rows = snapshot.ideas.map(idea => `
         <tr data-filter-row="ideas" data-filter-text="${escapeHtml([idea.name, idea.summary, ideaStatus(idea) ?? '', ideaTags(idea).join(' '), idea.fileUri].join(' '))}">
             <td><strong>${renderIdeaAnchor(snapshot, currentPath, idea, idea.name)}</strong></td>
-            <td>${escapeHtml(idea.fileUri)}</td>
-            <td>${renderOptionalStatusCell(idea)}</td>
-            <td>${renderOptionalTagsCell(idea)}</td>
+            <td>${renderFilePathCell(snapshot, currentPath, idea.fileUri)}</td>
+            <td>${renderLinkedStatusCell(snapshot, currentPath, idea)}</td>
+            <td>${renderLinkedTagsCell(snapshot, currentPath, idea)}</td>
             <td>${renderIdeaSummaryHtml(snapshot, currentPath, idea, '—')}</td>
             <td>${idea.references.inbound.length}/${idea.references.outbound.length}</td>
         </tr>
@@ -104,12 +147,12 @@ export function renderIdeasIndexPage(snapshot) {
                 <table>
                     <thead>
                         <tr>
-                            <th>Name</th>
-                            <th>Path</th>
-                            <th>Status</th>
-                            <th>Tags</th>
-                            <th>Summary</th>
-                            <th>Refs in/out</th>
+                            <th data-filter-key="name">Name</th>
+                            <th data-filter-key="path">Path</th>
+                            <th data-filter-key="status">Status</th>
+                            <th data-filter-key="tags">Tags</th>
+                            <th data-filter-key="summary">Summary</th>
+                            <th data-filter-key="refs">Refs in/out</th>
                         </tr>
                     </thead>
                     <tbody>${rows}</tbody>
@@ -126,7 +169,10 @@ export function renderFilesIndexPage(snapshot) {
             <td>${escapeHtml(file.directory || '.')}</td>
             <td>${file.ideas.length}</td>
             <td>${file.edgeCount}</td>
-            <td>${escapeHtml(Object.keys(file.tags).join(', ') || '—')}</td>
+            <td>${Object.keys(file.tags).map(tag => {
+        const href = statusOrTagFacetHref(snapshot, currentPath, 'tag', tag);
+        return `<a href="${escapeHtml(href)}">${escapeHtml(tag)}</a>`;
+    }).join(', ') || '—'}</td>
         </tr>
     `).join('');
     return renderShell({
@@ -150,7 +196,13 @@ export function renderFilesIndexPage(snapshot) {
                 </div>
                 <table>
                     <thead>
-                        <tr><th>File</th><th>Directory</th><th>Ideas</th><th>References</th><th>Tags</th></tr>
+                        <tr>
+                            <th data-filter-key="file">File</th>
+                            <th data-filter-key="directory">Directory</th>
+                            <th data-filter-key="ideas">Ideas</th>
+                            <th data-filter-key="references">References</th>
+                            <th data-filter-key="tags">Tags</th>
+                        </tr>
                     </thead>
                     <tbody>${rows}</tbody>
                 </table>
@@ -189,7 +241,12 @@ export function renderCodeFilesIndexPage(snapshot) {
                 </div>
                 <table>
                     <thead>
-                        <tr><th>File</th><th>Directory</th><th>Referenced by</th><th>Labels</th></tr>
+                        <tr>
+                            <th data-filter-key="file">File</th>
+                            <th data-filter-key="directory">Directory</th>
+                            <th data-filter-key="referenced-by">Referenced by</th>
+                            <th data-filter-key="labels">Labels</th>
+                        </tr>
                     </thead>
                     <tbody>${rows || '<tr><td colspan="4" class="subtle">No outbound code file references.</td></tr>'}</tbody>
                 </table>
@@ -202,7 +259,7 @@ export function renderClustersIndexPage(snapshot) {
     const rows = snapshot.clusters.map(cluster => `
         <tr data-filter-row="clusters" data-filter-text="${escapeHtml([cluster.label, cluster.kind, cluster.description].join(' '))}">
             <td><strong>${snapshot.pageOptions.includeClusterPages ? `<a href="${escapeHtml(exportPageHref(snapshot, currentPath, cluster.page))}">${escapeHtml(cluster.label)}</a>` : escapeHtml(cluster.label)}</strong></td>
-            <td>${escapeHtml(cluster.kind)}</td>
+            <td data-sort-value="${escapeHtml(cluster.kind)}"><a href="${escapeHtml(listFilterHref(snapshot, currentPath, snapshot.manifest.clustersIndex, { kind: cluster.kind }))}">${escapeHtml(cluster.kind)}</a></td>
             <td>${cluster.counts.ideas}</td>
             <td>${cluster.counts.files}</td>
             <td>${escapeHtml(cluster.description)}</td>
@@ -229,7 +286,13 @@ export function renderClustersIndexPage(snapshot) {
                 </div>
                 <table>
                     <thead>
-                        <tr><th>Cluster</th><th>Kind</th><th>Ideas</th><th>Files</th><th>Description</th></tr>
+                        <tr>
+                            <th data-filter-key="cluster">Cluster</th>
+                            <th data-filter-key="kind">Kind</th>
+                            <th data-filter-key="ideas">Ideas</th>
+                            <th data-filter-key="files">Files</th>
+                            <th data-filter-key="description">Description</th>
+                        </tr>
                     </thead>
                     <tbody>${rows}</tbody>
                 </table>
@@ -277,7 +340,7 @@ export function renderAttributesIndexPage(snapshot) {
                 </div>
                 <table>
                     <thead>
-                        <tr><th>Attribute</th><th>Ideas</th><th>Values</th><th>Value summary</th></tr>
+                        <tr><th data-filter-key="attribute">Attribute</th><th data-filter-key="ideas">Ideas</th><th data-filter-key="values">Values</th><th data-filter-key="value-summary">Value summary</th></tr>
                     </thead>
                     <tbody>${rows || '<tr><td colspan="4" class="subtle">No attributes declared.</td></tr>'}</tbody>
                 </table>
@@ -295,9 +358,10 @@ export function renderAttributeDetailPage(snapshot, attribute) {
         const percent = Math.round((entry.count / totalIdeas) * 1000) / 10;
         const width = Math.max(entry.count > 0 ? 1.5 : 0, Math.min(100, (entry.count / totalIdeas) * 100));
         const filterText = [entry.value, String(entry.count), `${percent}%`, ...entry.ideaIds].join(' ');
+        const valueHref = listFilterHref(snapshot, currentPath, attribute.page, { value: entry.value });
         return `
             <tr data-filter-row="attributeValues" data-filter-text="${escapeHtml(filterText)}">
-                <td>${escapeHtml(entry.value)}</td>
+                <td data-sort-value="${escapeHtml(entry.value)}"><a href="${escapeHtml(valueHref)}">${escapeHtml(entry.value)}</a></td>
                 <td>
                     <div class="distribution-track" title="${escapeHtml(`${entry.count} of ${attribute.ideaCount} ideas (${percent}%)`)}" role="img" aria-label="${escapeHtml(`${entry.value}: ${entry.count} ideas, ${percent}%`)}">
                         <span class="distribution-fill" style="width: ${width}%"></span>
@@ -313,9 +377,9 @@ export function renderAttributeDetailPage(snapshot, attribute) {
         return `
             <tr data-filter-row="attributeIdeas" data-filter-text="${escapeHtml(filterText)}">
                 <td>${renderIdeaAnchor(snapshot, currentPath, idea, idea.name)}</td>
-                <td>${escapeHtml(value)}</td>
-                <td>${renderOptionalStatusCell(idea)}</td>
-                <td>${renderOptionalTagsCell(idea)}</td>
+                <td data-sort-value="${escapeHtml(value)}"><a href="${escapeHtml(listFilterHref(snapshot, currentPath, attribute.page, { value }))}">${escapeHtml(value)}</a></td>
+                <td>${renderLinkedStatusCell(snapshot, currentPath, idea)}</td>
+                <td>${renderLinkedTagsCell(snapshot, currentPath, idea)}</td>
                 <td>${escapeHtml(idea.summary)}</td>
             </tr>`;
     }).join('');
@@ -348,7 +412,7 @@ export function renderAttributeDetailPage(snapshot, attribute) {
                 </div>
                 <div class="scroll-window">
                     <table>
-                        <thead><tr><th>Value</th><th>Distribution</th><th>Ideas</th><th>Share</th></tr></thead>
+                        <thead><tr><th data-filter-key="value">Value</th><th data-filter-key="distribution">Distribution</th><th data-filter-key="ideas">Ideas</th><th data-filter-key="share">Share</th></tr></thead>
                         <tbody>${valueRows || '<tr><td colspan="4" class="subtle">No values.</td></tr>'}</tbody>
                     </table>
                 </div>
@@ -361,7 +425,7 @@ export function renderAttributeDetailPage(snapshot, attribute) {
                     </div>
                 </div>
                 <table>
-                    <thead><tr><th>Idea</th><th>Value</th><th>Status</th><th>Tags</th><th>Summary</th></tr></thead>
+                    <thead><tr><th data-filter-key="idea">Idea</th><th data-filter-key="value">Value</th><th data-filter-key="status">Status</th><th data-filter-key="tags">Tags</th><th data-filter-key="summary">Summary</th></tr></thead>
                     <tbody>${ideaRows || '<tr><td colspan="5" class="subtle">No ideas declare this attribute.</td></tr>'}</tbody>
                 </table>
             </section>
@@ -371,8 +435,8 @@ export function renderAttributeDetailPage(snapshot, attribute) {
 export function renderGraphPage(snapshot) {
     const currentPath = snapshot.manifest.graph.path;
     const graph = enrichGraphUrls(snapshot, snapshot.graphs.workspace, currentPath);
-    const statuses = Object.keys(snapshot.byStatus).sort();
-    const tags = Object.keys(snapshot.byTag).sort();
+    const statuses = snapshot.byStatus;
+    const tags = snapshot.byTag;
     const clusters = snapshot.clusters.slice(0, 16).map(cluster => snapshot.pageOptions.includeClusterPages
         ? `<a class="pill" href="${escapeHtml(exportPageHref(snapshot, currentPath, cluster.page))}">${escapeHtml(cluster.label)}</a>`
         : `<span class="pill">${escapeHtml(cluster.label)}</span>`).join('');
@@ -398,23 +462,24 @@ export function renderGraphPage(snapshot) {
                 <div class="graph-controls-bar" data-graph-controls="graph-data">
                     <input class="searchbar graph-filter" type="search" placeholder="Search graph nodes" data-graph-search />
                     <input class="searchbar graph-filter" type="search" placeholder="Path filter" data-graph-path />
-                    <select class="graph-filter" data-graph-status>
-                        <option value="">All statuses</option>
-                        ${statuses.map(status => `<option value="${escapeHtml(status)}">${escapeHtml(status)}</option>`).join('')}
-                    </select>
-                    <select class="graph-filter" data-graph-tag>
-                        <option value="">All tags</option>
-                        ${tags.map(tag => `<option value="${escapeHtml(tag)}">${escapeHtml(tag)}</option>`).join('')}
-                    </select>
+                    ${renderMultiFilterSelect('status', statuses, 'Filter by status')}
+                    ${renderMultiFilterSelect('tag', tags, 'Filter by tag')}
                     <button type="button" class="graph-action" data-graph-toggle-external="true">Hide external</button>
                     <button type="button" class="graph-action" data-graph-toggle-ideasets="true">Hide ideasets</button>
+                    <button type="button" class="graph-action is-active" data-graph-toggle-wildcard aria-pressed="true" title="Show edges expanded from path+idea wildcard references">Wildcard refs</button>
+                    <button type="button" class="graph-action is-active" data-graph-toggle-labels data-label-mode="auto" aria-pressed="mixed">Labels: auto</button>
                     <button type="button" class="graph-action" data-graph-toggle-physics aria-pressed="false">Live physics</button>
                     <button type="button" class="graph-action" data-graph-fit>Fit</button>
                     <button type="button" class="graph-action" data-graph-reset>Reset</button>
                     <span class="graph-status" data-graph-status-text></span>
                 </div>
                 <div class="pill-row">${clusters}</div>
-                <div class="graph-root" data-graph-json="graph-data"></div>
+                <div class="graph-root is-booting" data-graph-json="graph-data">
+                    <div class="graph-boot" data-graph-boot role="status" aria-live="polite" aria-busy="true">
+                        <span class="graph-boot-spinner" aria-hidden="true"></span>
+                        <p>Initialising graph…</p>
+                    </div>
+                </div>
                 <script id="graph-data" type="application/json">${stringifyJson(graph)}</script>
             </section>
         `
@@ -487,11 +552,17 @@ export function renderIdeaDetailPage(snapshot, idea) {
             <section class="graph-shell print-break-avoid" id="graph">
                 <div class="toolbar"><h2>Local graph</h2></div>
                 <div class="graph-controls-bar" data-graph-controls="graph-data">
+                    <button type="button" class="graph-action is-active" data-graph-toggle-labels data-label-mode="auto" aria-pressed="mixed">Labels: auto</button>
                     <button type="button" class="graph-action" data-graph-toggle-physics aria-pressed="false">Live physics</button>
                     <button type="button" class="graph-action" data-graph-fit>Fit</button>
                     <span class="graph-status" data-graph-status-text></span>
                 </div>
-                <div class="graph-root" data-graph-json="graph-data"></div>
+                <div class="graph-root is-booting" data-graph-json="graph-data">
+                    <div class="graph-boot" data-graph-boot role="status" aria-live="polite" aria-busy="true">
+                        <span class="graph-boot-spinner" aria-hidden="true"></span>
+                        <p>Initialising graph…</p>
+                    </div>
+                </div>
                 <script id="graph-data" type="application/json">${stringifyJson(graph)}</script>
             </section>
         `
@@ -533,13 +604,13 @@ export function renderFileDetailPage(snapshot, file) {
                     </div>
                     <div class="scroll-window">
                         <table>
-                            <thead><tr><th>Idea</th><th>Status</th><th>Tags</th><th>Summary</th></tr></thead>
+                            <thead><tr><th data-filter-key="idea">Idea</th><th data-filter-key="status">Status</th><th data-filter-key="tags">Tags</th><th data-filter-key="summary">Summary</th></tr></thead>
                             <tbody>
                                 ${file.ideas.map(idea => `
                                     <tr data-filter-row="fileIdeas" data-filter-text="${escapeHtml([idea.name, idea.summary, ideaStatus(idea) ?? '', ideaTags(idea).join(' ')].join(' '))}">
                                         <td>${renderIdeaAnchor(snapshot, currentPath, idea, idea.name)}</td>
-                                        <td>${renderOptionalStatusCell(idea)}</td>
-                                        <td>${renderOptionalTagsCell(idea)}</td>
+                                        <td>${renderLinkedStatusCell(snapshot, currentPath, idea)}</td>
+                                        <td>${renderLinkedTagsCell(snapshot, currentPath, idea)}</td>
                                         <td>${escapeHtml(idea.summary)}</td>
                                     </tr>
                                 `).join('')}
@@ -559,11 +630,17 @@ export function renderFileDetailPage(snapshot, file) {
             <section class="graph-shell print-break-avoid">
                 <div class="toolbar"><h2>Local graph</h2></div>
                 <div class="graph-controls-bar" data-graph-controls="graph-data">
+                    <button type="button" class="graph-action is-active" data-graph-toggle-labels data-label-mode="auto" aria-pressed="mixed">Labels: auto</button>
                     <button type="button" class="graph-action" data-graph-toggle-physics aria-pressed="false">Live physics</button>
                     <button type="button" class="graph-action" data-graph-fit>Fit</button>
                     <span class="graph-status" data-graph-status-text></span>
                 </div>
-                <div class="graph-root" data-graph-json="graph-data"></div>
+                <div class="graph-root is-booting" data-graph-json="graph-data">
+                    <div class="graph-boot" data-graph-boot role="status" aria-live="polite" aria-busy="true">
+                        <span class="graph-boot-spinner" aria-hidden="true"></span>
+                        <p>Initialising graph…</p>
+                    </div>
+                </div>
                 <script id="graph-data" type="application/json">${stringifyJson(graph)}</script>
             </section>
         `
@@ -603,13 +680,13 @@ export function renderCodeFileDetailPage(snapshot, file) {
                 </div>
                 <div class="scroll-window">
                     <table>
-                        <thead><tr><th>Idea</th><th>Status</th><th>Tags</th><th>Summary</th></tr></thead>
+                        <thead><tr><th data-filter-key="idea">Idea</th><th data-filter-key="status">Status</th><th data-filter-key="tags">Tags</th><th data-filter-key="summary">Summary</th></tr></thead>
                         <tbody>
                             ${referencingIdeas.map(idea => `
                                 <tr data-filter-row="codeFileIdeas" data-filter-text="${escapeHtml([idea.name, idea.summary, ideaStatus(idea) ?? '', ideaTags(idea).join(' ')].join(' '))}">
                                     <td>${renderIdeaAnchor(snapshot, currentPath, idea, idea.name)}</td>
-                                    <td>${renderOptionalStatusCell(idea)}</td>
-                                    <td>${renderOptionalTagsCell(idea)}</td>
+                                    <td>${renderLinkedStatusCell(snapshot, currentPath, idea)}</td>
+                                    <td>${renderLinkedTagsCell(snapshot, currentPath, idea)}</td>
                                     <td>${escapeHtml(idea.summary)}</td>
                                 </tr>
                             `).join('') || '<tr><td colspan="4" class="subtle">No referencing ideas.</td></tr>'}
@@ -662,13 +739,13 @@ export function renderClusterDetailPage(snapshot, cluster) {
                 </div>
                 <div class="scroll-window">
                     <table>
-                        <thead><tr><th>Idea</th><th>File</th><th>Status</th><th>Summary</th></tr></thead>
+                        <thead><tr><th data-filter-key="idea">Idea</th><th data-filter-key="path">File</th><th data-filter-key="status">Status</th><th data-filter-key="summary">Summary</th></tr></thead>
                         <tbody>
                             ${members.map(idea => `
                                 <tr data-filter-row="clusterIdeas" data-filter-text="${escapeHtml([idea.name, idea.fileUri, ideaStatus(idea) ?? '', idea.summary].join(' '))}">
                                     <td>${renderIdeaAnchor(snapshot, currentPath, idea, idea.name)}</td>
-                                    <td>${escapeHtml(idea.fileUri)}</td>
-                                    <td>${renderOptionalStatusCell(idea)}</td>
+                                    <td>${renderFilePathCell(snapshot, currentPath, idea.fileUri)}</td>
+                                    <td>${renderLinkedStatusCell(snapshot, currentPath, idea)}</td>
                                     <td>${escapeHtml(idea.summary)}</td>
                                 </tr>
                             `).join('')}
@@ -679,11 +756,17 @@ export function renderClusterDetailPage(snapshot, cluster) {
             <section class="graph-shell print-break-avoid">
                 <div class="toolbar"><h2>Cluster graph</h2></div>
                 <div class="graph-controls-bar" data-graph-controls="graph-data">
+                    <button type="button" class="graph-action is-active" data-graph-toggle-labels data-label-mode="auto" aria-pressed="mixed">Labels: auto</button>
                     <button type="button" class="graph-action" data-graph-toggle-physics aria-pressed="false">Live physics</button>
                     <button type="button" class="graph-action" data-graph-fit>Fit</button>
                     <span class="graph-status" data-graph-status-text></span>
                 </div>
-                <div class="graph-root" data-graph-json="graph-data"></div>
+                <div class="graph-root is-booting" data-graph-json="graph-data">
+                    <div class="graph-boot" data-graph-boot role="status" aria-live="polite" aria-busy="true">
+                        <span class="graph-boot-spinner" aria-hidden="true"></span>
+                        <p>Initialising graph…</p>
+                    </div>
+                </div>
                 <script id="graph-data" type="application/json">${stringifyJson(graph)}</script>
             </section>
         `
@@ -691,15 +774,18 @@ export function renderClusterDetailPage(snapshot, cluster) {
 }
 export function renderPrintHomePage(snapshot) {
     const currentPath = snapshot.manifest.printHome.path;
-    const cards = snapshot.ideas.map(idea => `
-        <article class="print-card print-break-avoid">
-            <h3>${snapshot.pageOptions.includeIdeaPages ? `<a href="${escapeHtml(exportHref(snapshot, currentPath, idea.page.path))}">${escapeHtml(idea.name)}</a>` : escapeHtml(idea.name)}</h3>
+    const samePageAnchors = { samePageIdeaAnchors: true };
+    const cards = snapshot.ideas.map(idea => {
+        const anchorId = exportIdeaAnchorId(idea);
+        return `
+        <article class="print-card print-break-avoid" id="${escapeHtml(anchorId)}">
+            <h3><a href="#${escapeHtml(anchorId)}">${escapeHtml(idea.name)}</a></h3>
             <p class="subtle">${escapeHtml(idea.fileUri)}</p>
-            <p>${renderIdeaSummaryHtml(snapshot, currentPath, idea, '—')}</p>
-            ${renderOptionalStatusParagraph(idea)}
-            ${renderOptionalTagsParagraph(idea)}
+            <p>${renderIdeaSummaryHtml(snapshot, currentPath, idea, '—', samePageAnchors)}</p>
+            ${renderPrintIdeaAttributesHtml(snapshot, currentPath, idea, samePageAnchors)}
         </article>
-    `).join('');
+    `;
+    }).join('');
     return renderShell({
         currentPath,
         activeNav: 'print',
@@ -710,6 +796,12 @@ export function renderPrintHomePage(snapshot) {
                 <p class="eyebrow">Printable report</p>
                 <h1>${escapeHtml(snapshot.title)}</h1>
                 <p class="subtle">Generated ${escapeHtml(formatDate(snapshot.generatedAt))}</p>
+                <div class="toolbar">
+                    <p class="subtle">${snapshot.ideas.length} ideas</p>
+                    <div class="actions">
+                        <button type="button" class="print-button hide-on-print" onclick="window.print()">Print</button>
+                    </div>
+                </div>
             </header>
             <section class="grid">
                 ${renderMetric('Ideas', String(snapshot.counts.ideas))}
@@ -735,13 +827,18 @@ export function renderPrintIdeaPage(snapshot, idea) {
         body: `
             <header class="page-header">
                 <p class="eyebrow">Printable idea sheet</p>
-                <h1>${escapeHtml(idea.name)}</h1>
+                <h1 id="${escapeHtml(exportIdeaAnchorId(idea))}">${escapeHtml(idea.name)}</h1>
                 <p class="subtle">${escapeHtml(idea.fileUri)}:${idea.lineStart + 1}</p>
+                <div class="toolbar">
+                    <div></div>
+                    <div class="actions">
+                        <button type="button" class="print-button hide-on-print" onclick="window.print()">Print</button>
+                    </div>
+                </div>
             </header>
             <section class="print-card print-break-avoid">
                 <p class="idea-summary">${renderIdeaSummaryHtml(snapshot, currentPath, idea)}</p>
-                ${renderOptionalStatusParagraph(idea)}
-                ${renderOptionalTagsParagraph(idea)}
+                ${renderPrintIdeaAttributesHtml(snapshot, currentPath, idea)}
                 ${snapshot.pageOptions.includeIdeaPages ? `<p><strong>Interactive page:</strong> <a href="${escapeHtml(exportHref(snapshot, currentPath, idea.page.path))}">${escapeHtml(idea.name)}</a></p>` : ''}
             </section>
         `
@@ -915,6 +1012,8 @@ function enrichGraphUrls(snapshot, graph, _currentPath) {
             else {
                 delete node.status;
             }
+            node.statusKey = idea.statusKey;
+            node.tagsKeys = idea.tagsKeys;
             node.attributes = idea.attributes;
             const attributeKeys = Object.keys(idea.attributes).sort();
             if (attributeKeys.length > 0) {