noteconnection 1.7.0 → 1.8.0

package/dist/src/frontend/app.js

@@ -27,6 +27,385 @@ function readStartupPerfProfileOverride() {
     }
 }
 
+const mermaidErrorGuardState = {
+    observer: null,
+    toastHost: null,
+    seenAtBySignature: new Map(),
+    renderGuardInstalled: false,
+    periodicSweepHandle: null,
+    suppressedArtifacts: [],
+};
+
+function isMermaidErrorArtifactText(text) {
+    const normalized = String(text || '').toLowerCase();
+    if (!normalized) {
+        return false;
+    }
+    return (
+        normalized.includes('syntax error in text') ||
+        normalized.includes('lexical error on line') ||
+        normalized.includes('parse error on line') ||
+        normalized.includes('mermaid version') ||
+        normalized.includes('diagram syntax error')
+    );
+}
+
+function normalizeMermaidErrorArtifactText(text) {
+    return String(text || '')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .slice(0, 240);
+}
+
+function registerMermaidSuppressedArtifact(detail, context = {}) {
+    const signature = normalizeMermaidErrorArtifactText(detail);
+    if (!signature) {
+        return;
+    }
+    const entry = {
+        signature,
+        detectedAt: new Date().toISOString(),
+        context,
+    };
+    mermaidErrorGuardState.suppressedArtifacts.push(entry);
+    if (mermaidErrorGuardState.suppressedArtifacts.length > 20) {
+        mermaidErrorGuardState.suppressedArtifacts.shift();
+    }
+}
+
+function ensureMermaidErrorToastHost() {
+    if (mermaidErrorGuardState.toastHost && mermaidErrorGuardState.toastHost.isConnected) {
+        return mermaidErrorGuardState.toastHost;
+    }
+    const host = document.createElement('div');
+    host.id = 'mermaid-error-toast-stack';
+    host.className = 'mermaid-error-toast-stack';
+    document.body.appendChild(host);
+    mermaidErrorGuardState.toastHost = host;
+    return host;
+}
+
+function emitMermaidErrorToast(detail) {
+    const signature = normalizeMermaidErrorArtifactText(detail);
+    if (!signature) {
+        return;
+    }
+    const now = Date.now();
+    const lastSeenAt = mermaidErrorGuardState.seenAtBySignature.get(signature) || 0;
+    if ((now - lastSeenAt) < 8000) {
+        return;
+    }
+    mermaidErrorGuardState.seenAtBySignature.set(signature, now);
+
+    const host = ensureMermaidErrorToastHost();
+    const toast = document.createElement('div');
+    toast.className = 'mermaid-error-toast';
+
+    const title = document.createElement('div');
+    title.className = 'mermaid-error-toast-title';
+    title.textContent = 'Mermaid diagram skipped';
+    toast.appendChild(title);
+
+    const summary = document.createElement('div');
+    summary.className = 'mermaid-error-toast-summary';
+    summary.textContent = 'A malformed Mermaid block was suppressed to keep the workspace readable.';
+    toast.appendChild(summary);
+
+    const detailLine = document.createElement('div');
+    detailLine.className = 'mermaid-error-toast-detail';
+    detailLine.textContent = signature;
+    toast.appendChild(detailLine);
+
+    host.appendChild(toast);
+    while (host.childElementCount > 3) {
+        host.removeChild(host.firstElementChild);
+    }
+
+    window.setTimeout(() => {
+        if (toast.parentNode) {
+            toast.parentNode.removeChild(toast);
+        }
+    }, 6500);
+}
+
+function createInlineMermaidErrorNotice(detail) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'mermaid-inline-guard';
+
+    const title = document.createElement('div');
+    title.className = 'mermaid-inline-guard-title';
+    title.textContent = 'Mermaid diagram unavailable';
+    wrapper.appendChild(title);
+
+    const summary = document.createElement('div');
+    summary.className = 'mermaid-inline-guard-summary';
+    summary.textContent = 'Malformed Mermaid content was suppressed in this view.';
+    wrapper.appendChild(summary);
+
+    if (detail) {
+        const detailLine = document.createElement('div');
+        detailLine.className = 'mermaid-inline-guard-detail';
+        detailLine.textContent = normalizeMermaidErrorArtifactText(detail);
+        wrapper.appendChild(detailLine);
+    }
+
+    return wrapper;
+}
+
+function resolveMermaidErrorArtifactHost(node) {
+    if (!node || typeof node.closest !== 'function') {
+        return node;
+    }
+    return (
+        node.closest('.mermaid-render-host-offscreen') ||
+        node.closest('.mermaid-render-failed') ||
+        node.closest('.mermaid') ||
+        node.closest('.reader-block') ||
+        node.closest('svg') ||
+        node
+    );
+}
+
+function isProtectedMermaidSuppressionHost(host) {
+    if (!host || host.nodeType !== Node.ELEMENT_NODE) {
+        return true;
+    }
+    return (
+        host === document.body ||
+        host === document.documentElement ||
+        host === document.head ||
+        host.id === 'graph-wrapper' ||
+        host.id === 'path-container' ||
+        host.id === 'reading-window' ||
+        host.id === 'reading-content-box' ||
+        host.id === 'reading-body'
+    );
+}
+
+function collectMermaidErrorArtifactCandidates(root) {
+    const hosts = [];
+    const hostSet = new Set();
+    const candidates = [];
+
+    if (!root) {
+        return hosts;
+    }
+    if (
+        root.nodeType === Node.ELEMENT_NODE &&
+        root !== document.body &&
+        root !== document.documentElement &&
+        root !== document.head
+    ) {
+        candidates.push(root);
+    }
+
+    const queryRoot = root.nodeType === Node.ELEMENT_NODE ? root : document.body;
+    if (queryRoot && typeof queryRoot.querySelectorAll === 'function') {
+        queryRoot.querySelectorAll('svg, .mermaid, div, section, article, aside, img, foreignObject').forEach((node) => candidates.push(node));
+    }
+
+    candidates.forEach((candidate) => {
+        if (!candidate || candidate.nodeType !== Node.ELEMENT_NODE) {
+            return;
+        }
+        const element = candidate;
+        const text = normalizeMermaidErrorArtifactText(
+            element.textContent ||
+            element.getAttribute?.('alt') ||
+            element.getAttribute?.('aria-label') ||
+            ''
+        );
+        if (!isMermaidErrorArtifactText(text)) {
+            return;
+        }
+        const host = resolveMermaidErrorArtifactHost(element);
+        if (!host || hostSet.has(host) || isProtectedMermaidSuppressionHost(host)) {
+            return;
+        }
+        hostSet.add(host);
+        hosts.push(host);
+    });
+
+    return hosts;
+}
+
+function suppressMermaidErrorArtifacts(root, context = {}) {
+    if (!root) {
+        return;
+    }
+
+    const candidates = collectMermaidErrorArtifactCandidates(root);
+    candidates.forEach((candidate) => {
+        if (!candidate || candidate.dataset?.mermaidErrorSuppressed === '1') {
+            return;
+        }
+        const text = normalizeMermaidErrorArtifactText(candidate.textContent || '');
+        if (!isMermaidErrorArtifactText(text)) {
+            return;
+        }
+
+        const host = resolveMermaidErrorArtifactHost(candidate);
+        if (!host || host.dataset?.mermaidErrorSuppressed === '1') {
+            return;
+        }
+        if (host.dataset) {
+            host.dataset.mermaidErrorSuppressed = '1';
+        }
+        registerMermaidSuppressedArtifact(text, {
+            hostTag: host.tagName || '',
+            hostId: host.id || '',
+            hostClass: host.className || '',
+            ...context,
+        });
+
+        const shouldKeepInline = Boolean(
+            host.closest('#reading-window') ||
+            host.closest('#reading-body') ||
+            host.closest('.notemd-embed-shell')
+        );
+
+        if (shouldKeepInline) {
+            const inlineNotice = createInlineMermaidErrorNotice(text);
+            if (host.parentNode) {
+                host.parentNode.replaceChild(inlineNotice, host);
+            }
+        } else {
+            emitMermaidErrorToast(text);
+            if (host.parentNode) {
+                host.parentNode.removeChild(host);
+            } else {
+                host.style.display = 'none';
+            }
+        }
+    });
+}
+
+function installMermaidRuntimeGuards() {
+    const mermaid = window.mermaid;
+    if (!mermaid || mermaidErrorGuardState.renderGuardInstalled === true || mermaid.__noteConnectionErrorGuardInstalled === true) {
+        return;
+    }
+
+    if (typeof mermaid.render === 'function') {
+        const originalRender = mermaid.render.bind(mermaid);
+        mermaid.render = async function(...args) {
+            const result = await originalRender(...args);
+            if (result && typeof result.svg === 'string' && isMermaidErrorArtifactText(result.svg)) {
+                registerMermaidSuppressedArtifact(result.svg, {
+                    source: 'mermaid.render',
+                });
+                throw new Error('Suppressed Mermaid error SVG before it could be mounted.');
+            }
+            return result;
+        };
+    }
+
+    if (typeof mermaid.run === 'function') {
+        const originalRun = mermaid.run.bind(mermaid);
+        mermaid.run = async function(options) {
+            const result = await originalRun(options);
+            try {
+                if (options && Array.isArray(options.nodes) && options.nodes.length > 0) {
+                    options.nodes.forEach((node) => suppressMermaidErrorArtifacts(node, {
+                        source: 'mermaid.run.nodes',
+                    }));
+                } else {
+                    suppressMermaidErrorArtifacts(document.body, {
+                        source: 'mermaid.run.document',
+                    });
+                }
+            } catch (_error) {
+                // Guard should never break main rendering.
+            }
+            return result;
+        };
+    }
+
+    mermaid.__noteConnectionErrorGuardInstalled = true;
+    mermaidErrorGuardState.renderGuardInstalled = true;
+}
+
+function exposeMermaidDebugInterface() {
+    const existing = (window.__NC_DEBUG__ && typeof window.__NC_DEBUG__ === 'object')
+        ? window.__NC_DEBUG__
+        : {};
+    window.__NC_DEBUG__ = {
+        ...existing,
+        scanMermaidErrorArtifacts: () => collectMermaidErrorArtifactCandidates(document.body).map((host) => ({
+            tag: host.tagName || '',
+            id: host.id || '',
+            className: host.className || '',
+            text: normalizeMermaidErrorArtifactText(host.textContent || ''),
+        })),
+        suppressMermaidErrorArtifactsNow: () => {
+            suppressMermaidErrorArtifacts(document.body, { source: 'manual-debug-scan' });
+            return mermaidErrorGuardState.suppressedArtifacts.slice();
+        },
+        getMermaidGuardState: () => ({
+            renderGuardInstalled: mermaidErrorGuardState.renderGuardInstalled,
+            suppressedArtifacts: mermaidErrorGuardState.suppressedArtifacts.slice(),
+        }),
+        captureRuntimeState: () => ({
+            url: window.location.href,
+            title: document.title,
+            mermaidGuardState: {
+                renderGuardInstalled: mermaidErrorGuardState.renderGuardInstalled,
+                suppressedArtifacts: mermaidErrorGuardState.suppressedArtifacts.slice(),
+            },
+            activeMermaidErrors: collectMermaidErrorArtifactCandidates(document.body).map((host) => ({
+                tag: host.tagName || '',
+                id: host.id || '',
+                className: host.className || '',
+                text: normalizeMermaidErrorArtifactText(host.textContent || ''),
+            })),
+        }),
+    };
+}
+
+function installMermaidErrorArtifactObserver() {
+    installMermaidRuntimeGuards();
+    exposeMermaidDebugInterface();
+
+    if (mermaidErrorGuardState.observer || typeof MutationObserver === 'undefined') {
+        suppressMermaidErrorArtifacts(document.body, { source: 'observer-reuse' });
+        return;
+    }
+
+    mermaidErrorGuardState.observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            mutation.addedNodes.forEach((node) => {
+                if (!node || node.nodeType !== Node.ELEMENT_NODE) {
+                    return;
+                }
+                suppressMermaidErrorArtifacts(node, { source: 'mutation-observer' });
+            });
+        });
+    });
+
+    mermaidErrorGuardState.observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+
+    suppressMermaidErrorArtifacts(document.body, { source: 'observer-install' });
+    window.setTimeout(() => {
+        installMermaidRuntimeGuards();
+        suppressMermaidErrorArtifacts(document.body, { source: 'delayed-sweep-1200' });
+    }, 1200);
+    window.setTimeout(() => {
+        installMermaidRuntimeGuards();
+        suppressMermaidErrorArtifacts(document.body, { source: 'delayed-sweep-3200' });
+    }, 3200);
+    if (mermaidErrorGuardState.periodicSweepHandle === null) {
+        mermaidErrorGuardState.periodicSweepHandle = window.setInterval(() => {
+            installMermaidRuntimeGuards();
+            suppressMermaidErrorArtifacts(document.body, { source: 'periodic-sweep' });
+        }, 750);
+    }
+}
+
+installMermaidErrorArtifactObserver();
+
 function resolveRuntimePlatform(runtimeCaps) {
     const rawPlatform = runtimeCaps && typeof runtimeCaps.platform === 'string'
         ? runtimeCaps.platform.trim().toLowerCase()
@@ -285,7 +664,9 @@ const startupLayoutSnapshotState = {
     pendingRecord: null,
     restorePromise: null,
     saveHandle: null,
-    lastSaveAtMs: 0
+    lastSaveAtMs: 0,
+    sourceLayoutSummary: null,
+    sourceLayoutById: null
 };
 
 function hashFNV1a32(input) {
@@ -332,6 +713,177 @@ function buildStartupGraphFingerprint(nodeList, linkList, graphPayload) {
     return `nc-layout-v${STARTUP_LAYOUT_SNAPSHOT_VERSION}-${hashFNV1a32(signature)}`;
 }
 
+function summarizeLayoutPositions(positionItems) {
+    const safeItems = Array.isArray(positionItems) ? positionItems : [];
+    const finitePositions = safeItems.filter((item) => (
+        item &&
+        Number.isFinite(Number(item.x)) &&
+        Number.isFinite(Number(item.y))
+    ));
+
+    if (finitePositions.length === 0) {
+        return {
+            finiteCount: 0,
+            minX: 0,
+            maxX: 0,
+            minY: 0,
+            maxY: 0,
+            spanX: 0,
+            spanY: 0,
+            uniqueRatio: 0
+        };
+    }
+
+    let minX = Infinity;
+    let maxX = -Infinity;
+    let minY = Infinity;
+    let maxY = -Infinity;
+    const uniqueBuckets = new Set();
+
+    for (let index = 0; index < finitePositions.length; index += 1) {
+        const item = finitePositions[index];
+        const x = Number(item.x);
+        const y = Number(item.y);
+        if (x < minX) minX = x;
+        if (x > maxX) maxX = x;
+        if (y < minY) minY = y;
+        if (y > maxY) maxY = y;
+        uniqueBuckets.add(`${Math.round(x)}:${Math.round(y)}`);
+    }
+
+    return {
+        finiteCount: finitePositions.length,
+        minX,
+        maxX,
+        minY,
+        maxY,
+        spanX: maxX - minX,
+        spanY: maxY - minY,
+        uniqueRatio: uniqueBuckets.size / Math.max(1, finitePositions.length)
+    };
+}
+
+function isDegenerateLayoutSummary(summary) {
+    return Boolean(
+        summary &&
+        summary.finiteCount > 0 &&
+        ((summary.spanX < 48 && summary.spanY < 48) || summary.uniqueRatio < 0.12)
+    );
+}
+
+function isSnapshotLayoutCollapsedVsSource(summary, sourceSummary) {
+    if (!summary || !sourceSummary || sourceSummary.finiteCount < 10) {
+        return false;
+    }
+
+    const sourceWideX = sourceSummary.spanX >= 320;
+    const sourceWideY = sourceSummary.spanY >= 320;
+    if (!sourceWideX && !sourceWideY) {
+        return false;
+    }
+
+    const spanXTooSmall = sourceWideX && summary.spanX < Math.max(72, sourceSummary.spanX * 0.08);
+    const spanYTooSmall = sourceWideY && summary.spanY < Math.max(72, sourceSummary.spanY * 0.08);
+    return spanXTooSmall && spanYTooSmall;
+}
+
+function buildSourceLayoutById(nodeList) {
+    const map = new Map();
+    const safeNodes = Array.isArray(nodeList) ? nodeList : [];
+    for (let index = 0; index < safeNodes.length; index += 1) {
+        const node = safeNodes[index];
+        if (!node || node.id === undefined || node.id === null) {
+            continue;
+        }
+        const x = Number(node.x);
+        const y = Number(node.y);
+        if (!Number.isFinite(x) || !Number.isFinite(y)) {
+            continue;
+        }
+        map.set(node.id, { x, y });
+    }
+    return map;
+}
+
+function restoreSourceLayoutOrJitterNodes(nodeList, viewportWidth, viewportHeight, reason = '') {
+    const safeNodes = Array.isArray(nodeList) ? nodeList : [];
+    if (safeNodes.length === 0) {
+        return false;
+    }
+
+    const currentSummary = summarizeLayoutPositions(safeNodes);
+    const sourceSummary = startupLayoutSnapshotState.sourceLayoutSummary;
+    const sourceLayoutById = startupLayoutSnapshotState.sourceLayoutById;
+    const shouldRestoreSource = Boolean(
+        sourceLayoutById instanceof Map &&
+        sourceLayoutById.size > 0 &&
+        isSnapshotLayoutCollapsedVsSource(currentSummary, sourceSummary)
+    );
+
+    if (!isDegenerateLayoutSummary(currentSummary) && !shouldRestoreSource) {
+        return false;
+    }
+
+    if (shouldRestoreSource) {
+        let restoredCount = 0;
+        for (let index = 0; index < safeNodes.length; index += 1) {
+            const node = safeNodes[index];
+            const sourcePos = sourceLayoutById.get(node.id);
+            if (!sourcePos) {
+                continue;
+            }
+            node.x = sourcePos.x;
+            node.y = sourcePos.y;
+            node.fx = null;
+            node.fy = null;
+            if (currentPositions && typeof currentPositions.set === 'function') {
+                currentPositions.set(node.id, { x: node.x, y: node.y });
+            }
+            restoredCount += 1;
+        }
+        console.warn('[Startup Warm Snapshot] Restored source layout because active positions collapsed relative to source.', {
+            reason,
+            restoredCount,
+            currentSpanX: Number(currentSummary.spanX.toFixed(2)),
+            currentSpanY: Number(currentSummary.spanY.toFixed(2)),
+            sourceSpanX: sourceSummary ? Number(sourceSummary.spanX.toFixed(2)) : null,
+            sourceSpanY: sourceSummary ? Number(sourceSummary.spanY.toFixed(2)) : null
+        });
+        return restoredCount > 0;
+    }
+
+    const centerX = Number.isFinite(Number(viewportWidth)) && Number(viewportWidth) > 0
+        ? Number(viewportWidth) / 2
+        : 400;
+    const centerY = Number.isFinite(Number(viewportHeight)) && Number(viewportHeight) > 0
+        ? Number(viewportHeight) / 2
+        : 300;
+    const goldenAngle = Math.PI * (3 - Math.sqrt(5));
+
+    for (let index = 0; index < safeNodes.length; index += 1) {
+        const node = safeNodes[index];
+        const rankOffset = Number.isFinite(Number(node.rank)) ? Number(node.rank) * 4 : 0;
+        const radius = 28 + (Math.sqrt(index + 1) * 18) + rankOffset;
+        const angle = (index * goldenAngle) + (rankOffset * 0.017);
+        node.x = centerX + (Math.cos(angle) * radius);
+        node.y = centerY + (Math.sin(angle) * radius);
+        node.fx = null;
+        node.fy = null;
+        if (currentPositions && typeof currentPositions.set === 'function') {
+            currentPositions.set(node.id, { x: node.x, y: node.y });
+        }
+    }
+
+    console.warn('[Startup Warm Snapshot] Re-seeded degenerate initial layout before simulation bootstrap.', {
+        reason,
+        nodeCount: safeNodes.length,
+        spanX: Number(currentSummary.spanX.toFixed(2)),
+        spanY: Number(currentSummary.spanY.toFixed(2)),
+        uniqueRatio: Number(currentSummary.uniqueRatio.toFixed(4))
+    });
+    return true;
+}
+
 function openStartupLayoutSnapshotDb() {
     return new Promise((resolve, reject) => {
         if (typeof window === 'undefined' || !window.indexedDB) {
@@ -457,6 +1009,36 @@ async function persistStartupLayoutSnapshotRecord(record) {
     db.close();
 }
 
+async function deleteStartupLayoutSnapshotRecord(fingerprint) {
+    if (!fingerprint) {
+        return;
+    }
+
+    if (typeof localStorage !== 'undefined') {
+        try {
+            localStorage.removeItem(`${STARTUP_LAYOUT_SNAPSHOT_LS_PREFIX}${fingerprint}`);
+        } catch (_err) {
+            // Ignore localStorage cleanup failures.
+        }
+    }
+
+    const db = await openStartupLayoutSnapshotDb();
+    if (!db) {
+        return;
+    }
+
+    await new Promise((resolve, reject) => {
+        const tx = db.transaction(STARTUP_LAYOUT_SNAPSHOT_STORE_NAME, 'readwrite');
+        const store = tx.objectStore(STARTUP_LAYOUT_SNAPSHOT_STORE_NAME);
+        store.delete(fingerprint);
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error || new Error('indexedDB delete failed'));
+        tx.onabort = () => reject(tx.error || new Error('indexedDB delete aborted'));
+    });
+
+    db.close();
+}
+
 function collectStartupLayoutSnapshotRecord(reason = '') {
     if (!startupLayoutSnapshotState.fingerprint || !Array.isArray(nodes) || nodes.length === 0) {
         return null;
@@ -469,8 +1051,8 @@ function collectStartupLayoutSnapshotRecord(reason = '') {
             id: n.id,
             x: Number.isFinite(Number(n.x)) ? Number(n.x) : 0,
             y: Number.isFinite(Number(n.y)) ? Number(n.y) : 0,
-            fx: Number.isFinite(Number(n.fx)) ? Number(n.fx) : null,
-            fy: Number.isFinite(Number(n.fy)) ? Number(n.fy) : null
+            fx: null,
+            fy: null
         };
     }
 
@@ -515,6 +1097,37 @@ function validateStartupLayoutSnapshotRecord(record) {
         return { ok: false, reason: 'position-coverage-low', coverage: Number(coverage.toFixed(4)) };
     }
 
+    const positionSummary = summarizeLayoutPositions(record.positions);
+    if (expectedNodeCount >= 10 && positionSummary.finiteCount > 0) {
+        if (isDegenerateLayoutSummary(positionSummary)) {
+            return {
+                ok: false,
+                reason: 'degenerate-layout',
+                purge: true,
+                spanX: Number(positionSummary.spanX.toFixed(2)),
+                spanY: Number(positionSummary.spanY.toFixed(2)),
+                uniqueRatio: Number(positionSummary.uniqueRatio.toFixed(4)),
+            };
+        }
+
+        if (isSnapshotLayoutCollapsedVsSource(positionSummary, startupLayoutSnapshotState.sourceLayoutSummary)) {
+            return {
+                ok: false,
+                reason: 'degenerate-layout-vs-source',
+                purge: true,
+                spanX: Number(positionSummary.spanX.toFixed(2)),
+                spanY: Number(positionSummary.spanY.toFixed(2)),
+                uniqueRatio: Number(positionSummary.uniqueRatio.toFixed(4)),
+                sourceSpanX: startupLayoutSnapshotState.sourceLayoutSummary
+                    ? Number(startupLayoutSnapshotState.sourceLayoutSummary.spanX.toFixed(2))
+                    : null,
+                sourceSpanY: startupLayoutSnapshotState.sourceLayoutSummary
+                    ? Number(startupLayoutSnapshotState.sourceLayoutSummary.spanY.toFixed(2))
+                    : null
+            };
+        }
+    }
+
     return {
         ok: true,
         coverage: Number(coverage.toFixed(4)),
@@ -539,8 +1152,8 @@ function applyStartupLayoutSnapshotRecord(record) {
         }
         n.x = Number.isFinite(saved.x) ? saved.x : n.x;
         n.y = Number.isFinite(saved.y) ? saved.y : n.y;
-        n.fx = Number.isFinite(saved.fx) ? saved.fx : null;
-        n.fy = Number.isFinite(saved.fy) ? saved.fy : null;
+        n.fx = null;
+        n.fy = null;
         if (currentPositions && typeof currentPositions.set === 'function') {
             currentPositions.set(n.id, { x: n.x, y: n.y });
         }
@@ -568,8 +1181,16 @@ function maybeApplyStartupWarmSnapshot(trigger = '') {
             recordFingerprint: record.fingerprint || null,
             recordNodeCount: record.nodeCount || 0,
             recordEdgeCount: record.edgeCount || 0,
-            positionCount: Array.isArray(record.positions) ? record.positions.length : 0
+            positionCount: Array.isArray(record.positions) ? record.positions.length : 0,
+            spanX: validation.spanX,
+            spanY: validation.spanY,
+            uniqueRatio: validation.uniqueRatio,
         });
+        if (validation.purge === true && record.fingerprint) {
+            deleteStartupLayoutSnapshotRecord(record.fingerprint).catch((error) => {
+                console.warn('[Startup Warm Snapshot] Failed to purge invalid snapshot record:', error && error.message ? error.message : String(error));
+            });
+        }
         startupLayoutSnapshotState.pendingRecord = null;
         return false;
     }
@@ -1094,6 +1715,17 @@ markStartupCheckpoint('T1 graph_preprocessed', {
     preprocessMs: Number(graphPreprocessElapsedMs.toFixed(2))
 });
 
+startupLayoutSnapshotState.sourceLayoutById = buildSourceLayoutById(nodes);
+startupLayoutSnapshotState.sourceLayoutSummary = summarizeLayoutPositions(nodes);
+if (startupLayoutSnapshotState.sourceLayoutSummary.finiteCount > 0) {
+    console.log('[Startup Warm Snapshot] Source layout summary prepared.', {
+        finiteCount: startupLayoutSnapshotState.sourceLayoutSummary.finiteCount,
+        spanX: Number(startupLayoutSnapshotState.sourceLayoutSummary.spanX.toFixed(2)),
+        spanY: Number(startupLayoutSnapshotState.sourceLayoutSummary.spanY.toFixed(2)),
+        uniqueRatio: Number(startupLayoutSnapshotState.sourceLayoutSummary.uniqueRatio.toFixed(4))
+    });
+}
+
 startupLayoutSnapshotState.fingerprint = buildStartupGraphFingerprint(nodes, links, runtimeGraphData);
 console.log('[Startup Warm Snapshot] Fingerprint prepared.', {
     fingerprint: startupLayoutSnapshotState.fingerprint,
@@ -1491,6 +2123,7 @@ const simulation = {
 const workerPayloadBuildStartTs = (typeof performance !== 'undefined' && typeof performance.now === 'function')
     ? performance.now()
     : Date.now();
+restoreSourceLayoutOrJitterNodes(nodes, width, height, 'worker-init');
 const workerNodes = new Array(nodes.length);
 for (let nodeIndex = 0; nodeIndex < nodes.length; nodeIndex += 1) {
     const node = nodes[nodeIndex];
@@ -2480,11 +3113,23 @@ function handleDoubleClick(event, d) {
     // v0.9.20 Enhancement: Auto-clear selection state when entering focus mode
     // v0.9.20 增强：进入专注模式时自动清除选择状态
     
-    if (focusNode && focusNode.id === d.id) {
+    const focusInteractions = window.NoteConnectionFocusModeInteractions;
+    const focusAction = focusInteractions && typeof focusInteractions.resolveDoubleClickAction === 'function'
+        ? focusInteractions.resolveDoubleClickAction({
+            currentAnchorId: focusNode && focusNode.id,
+            clickedNodeId: d && d.id,
+        })
+        : {
+            action: focusNode && focusNode.id === d.id ? 'open-reader' : 'switch-focus',
+            clickedNodeId: d && d.id,
+            currentAnchorId: focusNode && focusNode.id,
+        };
+
+    if (focusAction.action === 'open-reader') {
         // Already focused on same node -> Open Reader
         // 已经专注于同一节点 -> 打开阅读器
         if (window.reader) window.reader.open(d);
-    } else {
+    } else if (focusAction.action === 'switch-focus') {
         // Clear any existing selection/highlight state before entering focus mode
         // 在进入专注模式前清除任何现有的选择/高亮状态
         if (window.highlightManager) {
@@ -3727,43 +4372,595 @@ window.focusOnNode = function(id) {
     }
 };
 
+function normalizeGraphViewText(value) {
+    return String(value || '').replace(/\s+/g, ' ').trim();
+}
 
+function normalizeGraphViewLookupKey(value) {
+    return normalizeGraphViewText(value).toLowerCase();
+}
 
-// --- Query History Implementation (v0.9.77) ---
-window.focusHistory = [];
-const MAX_HISTORY = 10;
+function resolveGraphViewSourceBasename(sourcePath) {
+    const normalized = String(sourcePath || '').replace(/\\/g, '/').trim();
+    if (!normalized) {
+        return '';
+    }
+    const fileName = normalized.split('/').filter(Boolean).pop() || normalized;
+    return fileName.replace(/\.[^/.]+$/, '').trim();
+}
 
-function updateFocusHistory(newNode) {
-    // Avoid duplicates: Remove if exists, then add to top
-    // Requirement: "pin the corresponding node to the top"
-    window.focusHistory = window.focusHistory.filter(n => n.id !== newNode.id);
-    
-    // Add to specific history list
-    window.focusHistory.unshift(newNode);
-    if (window.focusHistory.length > MAX_HISTORY) window.focusHistory.pop();
-    
-    renderFocusHistory();
+function getGraphViewNodeLabel(node) {
+    return normalizeGraphViewText(node && (node.label || node.title || node.name || node.id));
 }
 
-function renderFocusHistory() {
-    const container = document.getElementById('focus-history-list');
-    if (!container) return; // Should be created by init
-    
-    container.innerHTML = '';
-    
-    if (window.focusHistory.length === 0) {
-        container.innerHTML = '<div style="padding:5px; color:#aaa; font-style:italic">No history</div>';
-        return;
+function getGraphViewLinkNodeId(endpoint) {
+    if (endpoint && typeof endpoint === 'object') {
+        return normalizeGraphViewText(endpoint.id || endpoint.nodeId || endpoint.key);
     }
+    return normalizeGraphViewText(endpoint);
+}
 
-    window.focusHistory.forEach(node => {
-        const item = document.createElement('div');
-        item.style.padding = '4px 8px';
-        item.style.cursor = 'pointer';
-        item.style.borderBottom = '1px solid #444';
-        item.style.fontSize = '0.8rem';
-        item.style.color = '#eee';
-        item.innerText = node.label;
+function collectGraphViewKnowledgePointCandidates(payload) {
+    const candidates = [];
+    const seen = new Set();
+    const appendCandidate = (value) => {
+        const normalized = normalizeGraphViewText(value);
+        if (!normalized || seen.has(normalized)) {
+            return;
+        }
+        seen.add(normalized);
+        candidates.push(normalized);
+    };
+    appendCandidate(payload && payload.graphNodeId);
+    appendCandidate(payload && payload.graphTargetId);
+    appendCandidate(payload && payload.nodeId);
+    appendCandidate(payload && payload.documentId);
+    appendCandidate(payload && payload.title);
+    appendCandidate(payload && payload.label);
+    appendCandidate(payload && payload.sourceBasename);
+    appendCandidate(resolveGraphViewSourceBasename(payload && payload.sourcePath));
+    appendCandidate(payload && payload.atomId);
+    if (Array.isArray(payload && payload.atomIds)) {
+        payload.atomIds.forEach(appendCandidate);
+    }
+    if (Array.isArray(payload && payload.nodeIds)) {
+        payload.nodeIds.forEach(appendCandidate);
+    }
+    if (Array.isArray(payload && payload.matchedSpans)) {
+        payload.matchedSpans.forEach((span) => {
+            appendCandidate(span && span.title);
+            appendCandidate(span && span.atomId);
+            appendCandidate(resolveGraphViewSourceBasename(span && span.sourcePath));
+        });
+    }
+    return candidates;
+}
+
+function resolveGraphViewNodeByIdOrLabel(candidate) {
+    const normalized = normalizeGraphViewText(candidate);
+    if (!normalized || !Array.isArray(nodes)) {
+        return null;
+    }
+    const exactId = nodes.find((node) => normalizeGraphViewText(node && node.id) === normalized);
+    if (exactId) {
+        return exactId;
+    }
+    const lookupKey = normalizeGraphViewLookupKey(normalized);
+    const exactLabelMatches = nodes.filter((node) => normalizeGraphViewLookupKey(getGraphViewNodeLabel(node)) === lookupKey);
+    if (exactLabelMatches.length === 1) {
+        return exactLabelMatches[0];
+    }
+    const sourceMatches = nodes.filter((node) => {
+        const metadata = node && typeof node.metadata === 'object' ? node.metadata : {};
+        return normalizeGraphViewLookupKey(resolveGraphViewSourceBasename(node && (node.sourcePath || node.filepath || metadata.filepath || metadata.sourcePath))) === lookupKey;
+    });
+    return sourceMatches.length === 1 ? sourceMatches[0] : null;
+}
+
+function resolveGraphViewNodeByKnowledgePoint(payload) {
+    const candidates = collectGraphViewKnowledgePointCandidates(payload);
+    for (const candidate of candidates) {
+        const node = resolveGraphViewNodeByIdOrLabel(candidate);
+        if (node) {
+            return node;
+        }
+    }
+    return null;
+}
+
+function buildGraphViewFocusModeSnapshot(nodeId) {
+    const focusD = resolveGraphViewNodeByIdOrLabel(nodeId);
+    if (!focusD) {
+        return null;
+    }
+    const incoming = [];
+    const outgoing = [];
+    const linkList = Array.isArray(links) ? links : [];
+    linkList.forEach((linkItem) => {
+        const sourceId = getGraphViewLinkNodeId(linkItem && linkItem.source);
+        const targetId = getGraphViewLinkNodeId(linkItem && linkItem.target);
+        if (sourceId === focusD.id) {
+            const targetNode = resolveGraphViewNodeByIdOrLabel(targetId);
+            if (targetNode) {
+                outgoing.push(targetNode);
+            }
+        } else if (targetId === focusD.id) {
+            const sourceNode = resolveGraphViewNodeByIdOrLabel(sourceId);
+            if (sourceNode) {
+                incoming.push(sourceNode);
+            }
+        }
+    });
+
+    const uniqueById = (items) => {
+        const seen = new Set();
+        const unique = [];
+        items.forEach((item) => {
+            const id = normalizeGraphViewText(item && item.id);
+            if (!id || seen.has(id)) {
+                return;
+            }
+            seen.add(id);
+            unique.push(item);
+        });
+        return unique;
+    };
+    const incomingNodes = uniqueById(incoming).slice(0, 5);
+    const outgoingNodes = uniqueById(outgoing).slice(0, 5);
+    const snapshotNodes = [];
+    const addSnapshotNode = (node, role, x, y) => {
+        snapshotNodes.push({
+            id: normalizeGraphViewText(node && node.id),
+            label: getGraphViewNodeLabel(node),
+            role,
+            x,
+            y,
+        });
+    };
+    const placeLane = (nodeList, role, x) => {
+        const step = 80 / (nodeList.length + 1);
+        nodeList.forEach((node, index) => {
+            addSnapshotNode(node, role, x, 10 + step * (index + 1));
+        });
+    };
+    placeLane(incomingNodes, 'incoming', 22);
+    addSnapshotNode(focusD, 'anchor', 50, 50);
+    placeLane(outgoingNodes, 'outgoing', 78);
+
+    const visibleIds = new Set(snapshotNodes.map((node) => node.id));
+    const snapshotEdges = linkList
+        .map((linkItem) => {
+            const sourceId = getGraphViewLinkNodeId(linkItem && linkItem.source);
+            const targetId = getGraphViewLinkNodeId(linkItem && linkItem.target);
+            if (!sourceId || !targetId || !visibleIds.has(sourceId) || !visibleIds.has(targetId)) {
+                return null;
+            }
+            return {
+                sourceId,
+                targetId,
+                relationKind: normalizeGraphViewText(linkItem && (linkItem.type || linkItem.relationKind || linkItem.kind)) || 'related',
+                confidence: Number(linkItem && (linkItem.confidence || linkItem.weight)),
+            };
+        })
+        .filter(Boolean);
+
+    return {
+        anchorId: focusD.id,
+        anchorLabel: getGraphViewNodeLabel(focusD),
+        nodes: snapshotNodes,
+        edges: snapshotEdges,
+    };
+}
+
+function buildGraphViewFocusModeProjection(nodeId, options = {}) {
+    const focusD = resolveGraphViewNodeByIdOrLabel(nodeId);
+    if (!focusD) {
+        return null;
+    }
+    const linkList = Array.isArray(links) ? links : [];
+    const uniqueById = (items) => {
+        const seen = new Set();
+        const unique = [];
+        items.forEach((item) => {
+            const id = normalizeGraphViewText(item && item.id);
+            if (!id || seen.has(id)) {
+                return;
+            }
+            seen.add(id);
+            unique.push(item);
+        });
+        return unique;
+    };
+    const getEndpointNode = (endpoint) => {
+        if (endpoint && typeof endpoint === 'object') {
+            const endpointId = normalizeGraphViewText(endpoint.id || endpoint.nodeId || endpoint.key);
+            return endpointId ? resolveGraphViewNodeByIdOrLabel(endpointId) || endpoint : null;
+        }
+        return resolveGraphViewNodeByIdOrLabel(endpoint);
+    };
+    const getLinkWeight = (linkItem) => {
+        const numericWeight = Number(linkItem && (linkItem.weight || linkItem.confidence));
+        return Number.isFinite(numericWeight) ? numericWeight : 0.5;
+    };
+    const getRelationKind = (linkItem) => (
+        normalizeGraphViewText(linkItem && (linkItem.type || linkItem.relationKind || linkItem.kind)) || 'related'
+    );
+    const outgoing = [];
+    const incoming = [];
+    const focusEdgeMap = new Map();
+    linkList.forEach((linkItem) => {
+        const sourceId = getGraphViewLinkNodeId(linkItem && linkItem.source);
+        const targetId = getGraphViewLinkNodeId(linkItem && linkItem.target);
+        if (!sourceId || !targetId) {
+            return;
+        }
+        if (sourceId === focusD.id || targetId === focusD.id) {
+            focusEdgeMap.set(`${sourceId}-${targetId}`, linkItem);
+        }
+        if (sourceId === focusD.id) {
+            const targetNode = getEndpointNode(linkItem && linkItem.target);
+            if (targetNode) {
+                outgoing.push(targetNode);
+            }
+            return;
+        }
+        if (targetId === focusD.id) {
+            const sourceNode = getEndpointNode(linkItem && linkItem.source);
+            if (sourceNode) {
+                incoming.push(sourceNode);
+            }
+        }
+    });
+    const scoreNode = (node) => {
+        const key1 = `${focusD.id}-${node.id}`;
+        const key2 = `${node.id}-${focusD.id}`;
+        const edge = focusEdgeMap.get(key1) || focusEdgeMap.get(key2);
+        const weight = getLinkWeight(edge);
+        const degreeRatio = (Number(node && node.outDegree) || 0) / ((Number(node && node.inDegree) || 0) + 1);
+        const normalizedDegreeRatio = Math.min(degreeRatio, 5) / 5;
+        return (weight * 0.7) + (normalizedDegreeRatio * 0.3);
+    };
+    const sortByFocusScore = (left, right) => scoreNode(right) - scoreNode(left);
+    const incomingNodes = uniqueById(incoming).sort(sortByFocusScore);
+    const outgoingNodes = uniqueById(outgoing).sort(sortByFocusScore);
+    const activeIdSet = new Set([focusD.id].concat(
+        incomingNodes.map((node) => node.id),
+        outgoingNodes.map((node) => node.id)
+    ));
+    const associatedNodes = uniqueById(linkList
+        .map((linkItem) => {
+            const sourceId = getGraphViewLinkNodeId(linkItem && linkItem.source);
+            const targetId = getGraphViewLinkNodeId(linkItem && linkItem.target);
+            if ((sourceId !== focusD.id && targetId !== focusD.id) || getLinkWeight(linkItem) <= 0.6) {
+                return null;
+            }
+            const otherId = sourceId === focusD.id ? targetId : sourceId;
+            if (!otherId || activeIdSet.has(otherId)) {
+                return null;
+            }
+            return getEndpointNode(sourceId === focusD.id ? linkItem.target : linkItem.source);
+        })
+        .filter(Boolean))
+        .sort(sortByFocusScore);
+    associatedNodes.forEach((node) => activeIdSet.add(node.id));
+
+    const currentWidth = Number.isFinite(Number(width)) ? Number(width) : 1200;
+    const currentHeight = Number.isFinite(Number(height)) ? Number(height) : 800;
+    const cx = Number.isFinite(Number(focusD.x)) ? Number(focusD.x) : currentWidth / 2;
+    const cy = Number.isFinite(Number(focusD.y)) ? Number(focusD.y) : currentHeight / 2;
+    const selectedLayoutType = normalizeGraphViewText(options.layoutType)
+        || (document.getElementById('focus-layout-select') ? document.getElementById('focus-layout-select').value : '')
+        || 'horizontal';
+    const layoutType = selectedLayoutType === 'vertical' ? 'vertical' : 'horizontal';
+    const defaultLayerGap = focusSpacingSettings && focusSpacingSettings[layoutType]
+        ? Number(focusSpacingSettings[layoutType].layer)
+        : (layoutType === 'horizontal' ? 125 : 250);
+    const defaultNodeGap = focusSpacingSettings && focusSpacingSettings[layoutType]
+        ? Number(focusSpacingSettings[layoutType].node)
+        : (layoutType === 'horizontal' ? 80 : 20);
+    const layerGap = Number.isFinite(Number(options.layerGap)) ? Number(options.layerGap) : defaultLayerGap;
+    const nodeGap = Number.isFinite(Number(options.nodeGap)) ? Number(options.nodeGap) : defaultNodeGap;
+    const projectionNodes = [];
+    const projectionLabels = [];
+    const points = new Map();
+    const addProjectionNode = (node, role, x, y, labelDy, labelDx) => {
+        const id = normalizeGraphViewText(node && node.id);
+        if (!id || points.has(id)) {
+            return;
+        }
+        points.set(id, { x, y });
+        projectionNodes.push({
+            id,
+            label: getGraphViewNodeLabel(node) || id,
+            role,
+            x,
+            y,
+            score: Number(scoreNode(node).toFixed(4)),
+            inDegree: Number(node && node.inDegree) || 0,
+            outDegree: Number(node && node.outDegree) || 0,
+            sourcePath: normalizeGraphViewText(node && (
+                node.sourcePath
+                || node.filepath
+                || (node.metadata && (node.metadata.sourcePath || node.metadata.filepath))
+            )),
+            radius: role === 'anchor' ? 25 : 8,
+            labelDy,
+            labelDx,
+        });
+    };
+    addProjectionNode(focusD, 'anchor', cx, cy, 35, layoutType === 'vertical' ? 25 : 29);
+    if (layoutType === 'vertical') {
+        const spreadVertical = (nodeList, baselineX, role) => {
+            const totalHeight = (nodeList.length - 1) * nodeGap;
+            const startY = cy - totalHeight / 2;
+            nodeList.forEach((node, index) => {
+                addProjectionNode(node, role, baselineX, startY + (index * nodeGap), 25, 25);
+            });
+        };
+        spreadVertical(incomingNodes, cx - layerGap, 'incoming');
+        spreadVertical(outgoingNodes, cx + layerGap, 'outgoing');
+        projectionLabels.push({
+            text: typeof t === 'function' ? t('focus_inbound') : 'Inbound',
+            x: cx - layerGap,
+            y: cy - (incomingNodes.length * nodeGap / 2) - 40,
+            align: 'middle',
+            role: 'incoming',
+        });
+        projectionLabels.push({
+            text: typeof t === 'function' ? t('focus_outbound') : 'Outbound',
+            x: cx + layerGap,
+            y: cy - (outgoingNodes.length * nodeGap / 2) - 40,
+            align: 'middle',
+            role: 'outgoing',
+        });
+    } else {
+        const spreadHorizontal = (nodeList, baselineY, role) => {
+            const totalWidth = (nodeList.length - 1) * nodeGap;
+            const startX = cx - totalWidth / 2;
+            nodeList.forEach((node, index) => {
+                const nodeScore = scoreNode(node);
+                const stagger = (index % 2 === 0 ? -1 : 1) * 20;
+                const nodeY = baselineY + stagger + (nodeScore * 20);
+                addProjectionNode(node, role, startX + (index * nodeGap), nodeY, nodeY < baselineY ? -15 : 25, 12);
+            });
+        };
+        spreadHorizontal(outgoingNodes, cy - layerGap, 'outgoing');
+        spreadHorizontal(incomingNodes, cy + layerGap, 'incoming');
+        projectionLabels.push({
+            text: typeof t === 'function' ? t('focus_outbound') : 'Outbound',
+            x: cx,
+            y: cy - layerGap - 60,
+            align: 'middle',
+            role: 'outgoing',
+        });
+        projectionLabels.push({
+            text: typeof t === 'function' ? t('focus_inbound') : 'Inbound',
+            x: cx,
+            y: cy + layerGap + 80,
+            align: 'middle',
+            role: 'incoming',
+        });
+    }
+    if (associatedNodes.length > 0) {
+        const left = [];
+        const right = [];
+        associatedNodes.forEach((node, index) => {
+            if (index % 2 === 0) {
+                left.push(node);
+            } else {
+                right.push(node);
+            }
+        });
+        const sideGap = layerGap * 1.2;
+        const placeSide = (nodeList, direction) => {
+            nodeList.forEach((node, index) => {
+                addProjectionNode(
+                    node,
+                    'associated',
+                    cx + (direction * sideGap),
+                    cy + (index * 60) - (nodeList.length * 30),
+                    25,
+                    12
+                );
+            });
+        };
+        placeSide(left, -1);
+        placeSide(right, 1);
+    }
+
+    const visibleIds = new Set(projectionNodes.map((node) => node.id));
+    const projectionEdges = linkList
+        .map((linkItem) => {
+            const sourceId = getGraphViewLinkNodeId(linkItem && linkItem.source);
+            const targetId = getGraphViewLinkNodeId(linkItem && linkItem.target);
+            if (!sourceId || !targetId || !visibleIds.has(sourceId) || !visibleIds.has(targetId)) {
+                return null;
+            }
+            return {
+                sourceId,
+                targetId,
+                relationKind: getRelationKind(linkItem),
+                confidence: getLinkWeight(linkItem),
+                role: sourceId === focusD.id
+                    ? 'outgoing'
+                    : targetId === focusD.id
+                        ? 'incoming'
+                        : 'associated',
+            };
+        })
+        .filter(Boolean);
+    const maxContextNodes = Number.isFinite(Number(options.maxContextNodes))
+        ? Math.max(0, Math.min(500, Math.trunc(Number(options.maxContextNodes))))
+        : 220;
+    const contextNodes = maxContextNodes > 0
+        ? (Array.isArray(nodes) ? nodes : [])
+            .map((node) => {
+                const id = normalizeGraphViewText(node && node.id);
+                const x = Number(node && node.x);
+                const y = Number(node && node.y);
+                if (!id || visibleIds.has(id) || !Number.isFinite(x) || !Number.isFinite(y)) {
+                    return null;
+                }
+                const dx = x - cx;
+                const dy = y - cy;
+                const distance = Math.sqrt((dx * dx) + (dy * dy));
+                const degree = (Number(node && node.inDegree) || 0) + (Number(node && node.outDegree) || 0);
+                const degreeScore = Math.min(degree, 40) / 40;
+                const proximityScore = 1 / (1 + (distance / Math.max(layerGap, nodeGap, 1)));
+                return {
+                    id,
+                    label: getGraphViewNodeLabel(node) || id,
+                    x,
+                    y,
+                    inDegree: Number(node && node.inDegree) || 0,
+                    outDegree: Number(node && node.outDegree) || 0,
+                    score: Number(((proximityScore * 0.72) + (degreeScore * 0.28)).toFixed(4)),
+                };
+            })
+            .filter(Boolean)
+            .sort((left, right) => right.score - left.score)
+            .slice(0, maxContextNodes)
+        : [];
+    const boundsPoints = projectionNodes
+        .map((node) => ({ x: node.x, y: node.y }))
+        .concat(projectionLabels.map((label) => ({ x: label.x, y: label.y })));
+    const contextBoundsPoints = contextNodes.length > 0
+        ? contextNodes.map((node) => ({ x: node.x, y: node.y }))
+        : boundsPoints;
+    const minX = Math.min(...boundsPoints.map((point) => point.x));
+    const maxX = Math.max(...boundsPoints.map((point) => point.x));
+    const minY = Math.min(...boundsPoints.map((point) => point.y));
+    const maxY = Math.max(...boundsPoints.map((point) => point.y));
+    const contextMinX = Math.min(...contextBoundsPoints.map((point) => point.x));
+    const contextMaxX = Math.max(...contextBoundsPoints.map((point) => point.x));
+    const contextMinY = Math.min(...contextBoundsPoints.map((point) => point.y));
+    const contextMaxY = Math.max(...contextBoundsPoints.map((point) => point.y));
+    return {
+        anchorId: focusD.id,
+        anchorLabel: getGraphViewNodeLabel(focusD) || focusD.id,
+        layoutType,
+        layerGap,
+        nodeGap,
+        stats: {
+            inDegree: Number(focusD.inDegree) || incomingNodes.length,
+            outDegree: Number(focusD.outDegree) || outgoingNodes.length,
+            incomingCount: incomingNodes.length,
+            outgoingCount: outgoingNodes.length,
+            associatedCount: associatedNodes.length,
+            contextCount: contextNodes.length,
+        },
+        controls: {
+            layoutType,
+            layerGap,
+            nodeGap,
+            rendererMode: document.querySelector('input[name="rendererMode"]:checked')
+                ? document.querySelector('input[name="rendererMode"]:checked').value
+                : '',
+        },
+        labels: projectionLabels,
+        contextNodes,
+        nodes: projectionNodes,
+        edges: projectionEdges,
+        bounds: {
+            minX,
+            maxX,
+            minY,
+            maxY,
+            width: Math.max(1, maxX - minX),
+            height: Math.max(1, maxY - minY),
+        },
+        contextBounds: {
+            minX: contextMinX,
+            maxX: contextMaxX,
+            minY: contextMinY,
+            maxY: contextMaxY,
+            width: Math.max(1, contextMaxX - contextMinX),
+            height: Math.max(1, contextMaxY - contextMinY),
+        },
+    };
+}
+
+// Compatibility API for agent workspace graph-focus capabilities.
+// Keeps agent runtime decoupled from historical global helper names.
+window.NoteConnectionGraphView = {
+    resolveNodeById: function(nodeId) {
+        const id = String(nodeId || '').trim();
+        if (!id) {
+            return null;
+        }
+        return resolveGraphViewNodeByIdOrLabel(id);
+    },
+    resolveNodeByKnowledgePoint: function(payload) {
+        return resolveGraphViewNodeByKnowledgePoint(payload);
+    },
+    openFocusModeById: function(nodeId) {
+        const node = this.resolveNodeById(nodeId);
+        if (!node) {
+            return false;
+        }
+        if (window.highlightManager && typeof window.highlightManager.unhighlight === 'function') {
+            window.highlightManager.unhighlight({ force: true });
+        }
+        const popup = document.getElementById('node-stats-popup');
+        if (popup) {
+            popup.style.display = 'none';
+        }
+        enterFocusMode(node);
+        return true;
+    },
+    getFocusNode: function() {
+        return focusNode && typeof focusNode === 'object'
+            ? focusNode
+            : null;
+    },
+    getFocusModeSnapshot: function(nodeId) {
+        return buildGraphViewFocusModeSnapshot(nodeId || (focusNode && focusNode.id));
+    },
+    getFocusModeProjection: function(nodeId, options) {
+        return buildGraphViewFocusModeProjection(nodeId || (focusNode && focusNode.id), options || {});
+    },
+    getNodeCount: function() {
+        return Array.isArray(nodes) ? nodes.length : 0;
+    },
+};
+
+
+
+// --- Query History Implementation (v0.9.77) ---
+window.focusHistory = [];
+const MAX_HISTORY = 10;
+
+function updateFocusHistory(newNode) {
+    // Avoid duplicates: Remove if exists, then add to top
+    // Requirement: "pin the corresponding node to the top"
+    window.focusHistory = window.focusHistory.filter(n => n.id !== newNode.id);
+    
+    // Add to specific history list
+    window.focusHistory.unshift(newNode);
+    if (window.focusHistory.length > MAX_HISTORY) window.focusHistory.pop();
+    
+    renderFocusHistory();
+}
+
+function renderFocusHistory() {
+    const container = document.getElementById('focus-history-list');
+    if (!container) return; // Should be created by init
+    
+    container.innerHTML = '';
+    
+    if (window.focusHistory.length === 0) {
+        container.innerHTML = '<div style="padding:5px; color:#aaa; font-style:italic">No history</div>';
+        return;
+    }
+
+    window.focusHistory.forEach(node => {
+        const item = document.createElement('div');
+        item.style.padding = '4px 8px';
+        item.style.cursor = 'pointer';
+        item.style.borderBottom = '1px solid #444';
+        item.style.fontSize = '0.8rem';
+        item.style.color = '#eee';
+        item.innerText = node.label;
         item.title = `Cluster: ${node.clusterId || '-'}`;
         
         item.addEventListener('mouseenter', () => item.style.background = '#444');
@@ -4366,12 +5563,18 @@ const workersSlider = document.getElementById('set-workers-slider');
     // --- Settings Integration ---
 function initSettingsUI() {
     const modal = document.getElementById('settings-modal');
+    const agentModal = document.getElementById('agent-settings-modal');
     const openBtn = document.getElementById('btn-open-settings');
-    const closeBtns = document.querySelectorAll('.modal-close');
+    const mainCloseBtns = modal ? modal.querySelectorAll('[data-settings-close="main"]') : [];
+    const agentCloseBtns = agentModal ? agentModal.querySelectorAll('[data-settings-close="agent"]') : [];
+    const openAgentSettingsBtn = document.getElementById('btn-open-agent-settings');
+    const agentSettingsBackBtn = document.getElementById('btn-agent-settings-back');
+    const agentSettingsBackFooterBtn = document.getElementById('btn-agent-settings-back-footer');
     const resetBtn = document.getElementById('btn-reset-settings');
     
-    // v0.9.41: Track modal state to freeze simulation
-    let isSettingsModalOpen = false;
+    // Track settings page state so simulation only resumes after every settings
+    // surface is actually closed.
+    let activeSettingsPage = null;
 
     // Controls
     const inputs = {
@@ -4392,6 +5595,7 @@ function initSettingsUI() {
     const workersSlider = document.getElementById('set-workers-slider');
     const workersInput = document.getElementById('set-workers-input');
     const gpuCheckbox = document.getElementById('set-gpu');
+    const staticModeCheckbox = document.getElementById('set-static-mode');
     const gpuRenderingCheckbox = document.getElementById('set-gpu-rendering');
     const memorySavingCheckbox = document.getElementById('set-memory-saving');
     const compactModeCheckbox = document.getElementById('set-compact-mode');
@@ -4400,6 +5604,665 @@ function initSettingsUI() {
     // Reader Settings
     const inputReadingMode = document.getElementById('set-reading-mode');
 
+    // Simplified NoteMD Provider Settings
+    const providerTemplateSelect = document.getElementById('set-notemd-provider-template');
+    const providerTemplateHint = document.getElementById('set-notemd-provider-template-hint');
+    const providerNameSelect = document.getElementById('set-notemd-provider-name');
+    const providerBaseUrlInput = document.getElementById('set-notemd-provider-base-url');
+    const providerModelInput = document.getElementById('set-notemd-provider-model');
+    const providerApiKeyInput = document.getElementById('set-notemd-provider-api-key');
+    const providerApiVersionInput = document.getElementById('set-notemd-provider-api-version');
+    const providerApiVersionRow = document.getElementById('set-notemd-provider-api-version-row');
+    const providerApiVersionHint = document.getElementById('set-notemd-provider-api-version-hint');
+    const providerStatus = document.getElementById('set-notemd-provider-status');
+    const providerConfigPath = document.getElementById('set-notemd-provider-config-path');
+    const applyProviderTemplateBtn = document.getElementById('btn-apply-notemd-provider-template');
+    const testProviderBtn = document.getElementById('btn-test-notemd-provider');
+    const saveProviderBtn = document.getElementById('btn-save-notemd-provider');
+    const materializeProviderTemplatesBtn = document.getElementById('btn-materialize-notemd-provider-templates');
+    const NOTEMD_PROVIDER_DRAFT_STORAGE_KEY = 'nc.notemdProviderDraft.v1';
+    const NOTEMD_PROVIDER_AUTOSAVE_DEBOUNCE_MS = 900;
+
+    const notemdProviderModalState = {
+        settings: null,
+        templates: [],
+        configPath: '',
+        loading: false,
+        autosaveTimer: null,
+        lastSavedFingerprint: '',
+        applyingDraft: false,
+    };
+
+    const t = (key, fallback, params) => {
+        if (window.i18n && typeof window.i18n.t === 'function') {
+            const translated = window.i18n.t(key, params);
+            if (translated && translated !== key) {
+                return translated;
+            }
+        }
+        return fallback;
+    };
+
+    const buildRuntimeUrl = (resourcePath) => {
+        if (window.NoteConnectionRuntime && typeof window.NoteConnectionRuntime.buildUrl === 'function') {
+            return window.NoteConnectionRuntime.buildUrl(resourcePath.replace(/^\/+/, ''));
+        }
+        return resourcePath;
+    };
+
+    const buildRuntimeFetchOptions = (init) => {
+        if (window.NoteConnectionRuntime && typeof window.NoteConnectionRuntime.buildFetchOptions === 'function') {
+            return window.NoteConnectionRuntime.buildFetchOptions(init);
+        }
+        return init;
+    };
+
+    const cloneJson = (value) => JSON.parse(JSON.stringify(value));
+
+    const clearProviderAutosaveTimer = () => {
+        if (notemdProviderModalState.autosaveTimer) {
+            clearTimeout(notemdProviderModalState.autosaveTimer);
+            notemdProviderModalState.autosaveTimer = null;
+        }
+    };
+
+    const readProviderDraftStore = () => {
+        try {
+            const raw = localStorage.getItem(NOTEMD_PROVIDER_DRAFT_STORAGE_KEY);
+            const parsed = raw ? JSON.parse(raw) : {};
+            return parsed && typeof parsed === 'object' ? parsed : {};
+        } catch (_error) {
+            return {};
+        }
+    };
+
+    const writeProviderDraftStore = (draftStore) => {
+        try {
+            localStorage.setItem(NOTEMD_PROVIDER_DRAFT_STORAGE_KEY, JSON.stringify(draftStore || {}));
+        } catch (_error) {
+            // Best effort only.
+        }
+    };
+
+    const getProviderDraft = (providerName) => {
+        const draftStore = readProviderDraftStore();
+        const key = String(providerName || '').trim();
+        if (!key || !draftStore[key] || typeof draftStore[key] !== 'object') {
+            return null;
+        }
+        return draftStore[key];
+    };
+
+    const updateProviderDraft = (providerName, draftPatch) => {
+        const key = String(providerName || '').trim();
+        if (!key) {
+            return;
+        }
+        const draftStore = readProviderDraftStore();
+        const current = draftStore[key] && typeof draftStore[key] === 'object' ? draftStore[key] : {};
+        draftStore[key] = {
+            ...current,
+            ...draftPatch,
+            updatedAt: new Date().toISOString(),
+        };
+        writeProviderDraftStore(draftStore);
+    };
+
+    const removeProviderDraft = (providerName) => {
+        const key = String(providerName || '').trim();
+        if (!key) {
+            return;
+        }
+        const draftStore = readProviderDraftStore();
+        if (Object.prototype.hasOwnProperty.call(draftStore, key)) {
+            delete draftStore[key];
+            writeProviderDraftStore(draftStore);
+        }
+    };
+
+    const setProviderModalStatus = (message, tone = 'muted') => {
+        if (!providerStatus) {
+            return;
+        }
+        providerStatus.textContent = String(message || '');
+        providerStatus.style.color =
+            tone === 'error'
+                ? '#fca5a5'
+                : tone === 'success'
+                    ? '#93c5fd'
+                    : '#aeb7c3';
+    };
+
+    const setProviderModalBusy = (busy) => {
+        notemdProviderModalState.loading = busy === true;
+        const disabled = notemdProviderModalState.loading;
+        [
+            providerTemplateSelect,
+            providerNameSelect,
+            providerBaseUrlInput,
+            providerModelInput,
+            providerApiKeyInput,
+            providerApiVersionInput,
+            applyProviderTemplateBtn,
+            testProviderBtn,
+            saveProviderBtn,
+            materializeProviderTemplatesBtn,
+        ].forEach((element) => {
+            if (element) {
+                element.disabled = disabled;
+            }
+        });
+    };
+
+    const ensureRuntimeBridgeReady = async () => {
+        if (
+            window.NoteConnectionRuntime
+            && typeof window.NoteConnectionRuntime.whenReady === 'function'
+        ) {
+            await window.NoteConnectionRuntime.whenReady();
+        }
+    };
+
+    const refreshRuntimeBridgeFromTauri = async () => {
+        if (
+            !window.NoteConnectionRuntime
+            || typeof window.NoteConnectionRuntime.refreshFromTauri !== 'function'
+        ) {
+            return false;
+        }
+        try {
+            await window.NoteConnectionRuntime.refreshFromTauri();
+            return true;
+        } catch (error) {
+            console.warn('[Settings] Runtime bridge refresh failed before retrying agent settings request.', error);
+            return false;
+        }
+    };
+
+    const fetchRuntimeJsonOnce = async (resourcePath, init) => {
+        await ensureRuntimeBridgeReady();
+        const response = await fetch(buildRuntimeUrl(resourcePath), buildRuntimeFetchOptions(init));
+        const payload = await response.json().catch(() => null);
+        return { response, payload };
+    };
+
+    const isSuccessfulRuntimeJsonResponse = ({ response, payload }) => (
+        response.ok && payload && payload.success === true
+    );
+
+    const buildRuntimeJsonError = (resourcePath, { response, payload }) => {
+        const message = payload && payload.error
+            ? String(payload.error)
+            : `Request failed (${resourcePath} ${response.status})`;
+        return new Error(message);
+    };
+
+    const requestRuntimeJson = async (resourcePath, init = {}) => {
+        const firstAttempt = await fetchRuntimeJsonOnce(resourcePath, init);
+        if (isSuccessfulRuntimeJsonResponse(firstAttempt)) {
+            return firstAttempt.payload;
+        }
+
+        if (firstAttempt.response.status === 401 && await refreshRuntimeBridgeFromTauri()) {
+            const secondAttempt = await fetchRuntimeJsonOnce(resourcePath, init);
+            if (isSuccessfulRuntimeJsonResponse(secondAttempt)) {
+                return secondAttempt.payload;
+            }
+            throw buildRuntimeJsonError(resourcePath, secondAttempt);
+        }
+
+        throw buildRuntimeJsonError(resourcePath, firstAttempt);
+    };
+
+    const isAnySettingsPanelOpen = () => activeSettingsPage !== null;
+
+    const resumeSimulationIfAllowed = () => {
+        const isFrozen = document.getElementById('freeze-layout')
+            ? document.getElementById('freeze-layout').checked
+            : false;
+        if (!isFrozen) {
+            simulation.alpha(0.3).restart();
+        }
+    };
+
+    const showMainSettingsPage = () => {
+        if (modal) {
+            modal.style.display = 'flex';
+            const body = modal.querySelector('.settings-modal-body');
+            if (body) {
+                body.scrollTop = 0;
+            }
+        }
+        if (agentModal) {
+            agentModal.style.display = 'none';
+        }
+        activeSettingsPage = 'main';
+        simulation.stop();
+    };
+
+    const showAgentSettingsPage = async () => {
+        if (modal) {
+            modal.style.display = 'none';
+        }
+        if (agentModal) {
+            agentModal.style.display = 'flex';
+            const body = agentModal.querySelector('.settings-modal-body');
+            if (body) {
+                body.scrollTop = 0;
+            }
+        }
+        activeSettingsPage = 'agent';
+        simulation.stop();
+        await loadNotemdProviderModalState();
+    };
+
+    const closeAllSettingsPages = () => {
+        clearProviderAutosaveTimer();
+        const nextFingerprint = getCurrentProviderFingerprint();
+        if (
+            activeSettingsPage === 'agent'
+            && nextFingerprint
+            && nextFingerprint !== notemdProviderModalState.lastSavedFingerprint
+            && !notemdProviderModalState.loading
+        ) {
+            void saveNotemdProviderModalState({ auto: true }).catch((error) => {
+                setProviderModalStatus(
+                    t('notemd_provider_autosave_failed', 'Auto-save failed: {error}', {
+                        error: error && error.message ? error.message : String(error),
+                    }),
+                    'error'
+                );
+            });
+        }
+        if (modal) {
+            modal.style.display = 'none';
+        }
+        if (agentModal) {
+            agentModal.style.display = 'none';
+        }
+        activeSettingsPage = null;
+        resumeSimulationIfAllowed();
+    };
+
+    const getCurrentProviderFromModalState = () => {
+        if (!notemdProviderModalState.settings || !providerNameSelect) {
+            return null;
+        }
+        const providerName = String(providerNameSelect.value || '').trim();
+        return notemdProviderModalState.settings.providers.find((provider) => provider.name === providerName) || null;
+    };
+
+    const getCurrentProviderFingerprint = () => {
+        const providerName = String(providerNameSelect ? providerNameSelect.value : '').trim();
+        if (!providerName) {
+            return '';
+        }
+        return JSON.stringify({
+            providerName,
+            templateId: String(providerTemplateSelect ? providerTemplateSelect.value : '').trim(),
+            baseUrl: String(providerBaseUrlInput ? providerBaseUrlInput.value : '').trim(),
+            model: String(providerModelInput ? providerModelInput.value : '').trim(),
+            apiKey: String(providerApiKeyInput ? providerApiKeyInput.value : ''),
+            apiVersion: String(providerApiVersionInput ? providerApiVersionInput.value : '').trim(),
+        });
+    };
+
+    const buildCurrentProviderRequestPayload = () => {
+        const providerName = String(providerNameSelect ? providerNameSelect.value : '').trim();
+        const persistedProvider = getCurrentProviderFromModalState();
+        return {
+            provider: {
+                name: providerName,
+                baseUrl: String(providerBaseUrlInput ? providerBaseUrlInput.value : '').trim(),
+                model: String(providerModelInput ? providerModelInput.value : '').trim(),
+                apiKey: String(providerApiKeyInput ? providerApiKeyInput.value : ''),
+                apiVersion: String(providerApiVersionInput ? providerApiVersionInput.value : '').trim(),
+                temperature: Number.isFinite(Number(persistedProvider && persistedProvider.temperature))
+                    ? Number(persistedProvider.temperature)
+                    : 0.5,
+            },
+            providerName,
+        };
+    };
+
+    const syncCurrentProviderDraft = () => {
+        const providerName = String(providerNameSelect ? providerNameSelect.value : '').trim();
+        if (!providerName || notemdProviderModalState.applyingDraft) {
+            return;
+        }
+        updateProviderDraft(providerName, {
+            templateId: String(providerTemplateSelect ? providerTemplateSelect.value : '').trim(),
+            baseUrl: String(providerBaseUrlInput ? providerBaseUrlInput.value : '').trim(),
+            model: String(providerModelInput ? providerModelInput.value : '').trim(),
+            apiKey: String(providerApiKeyInput ? providerApiKeyInput.value : ''),
+            apiVersion: String(providerApiVersionInput ? providerApiVersionInput.value : '').trim(),
+        });
+    };
+
+    const findTemplateForProvider = (providerName) => {
+        const templates = Array.isArray(notemdProviderModalState.templates) ? notemdProviderModalState.templates : [];
+        return templates.find((template) => template.providerName === providerName) || null;
+    };
+
+    const updateProviderApiVersionVisibility = (provider) => {
+        if (!providerApiVersionRow) {
+            return;
+        }
+        const isAzure = provider && String(provider.name || '').trim() === 'Azure OpenAI';
+        providerApiVersionRow.style.display = isAzure ? '' : 'none';
+        if (providerApiVersionInput) {
+            providerApiVersionInput.placeholder = isAzure ? '2025-01-01-preview' : '';
+        }
+        if (providerApiVersionHint) {
+            providerApiVersionHint.textContent = isAzure
+                ? t('notemd_provider_api_version_required', 'Required for Azure OpenAI. Example: 2025-01-01-preview.')
+                : t('notemd_provider_api_version_optional', 'Optional. Leave blank for standard OpenAI-compatible endpoints. This is mainly used by Azure OpenAI.');
+        }
+    };
+
+    const applyProviderDraftToFields = (providerName) => {
+        const draft = getProviderDraft(providerName);
+        if (!draft) {
+            return;
+        }
+        notemdProviderModalState.applyingDraft = true;
+        try {
+            if (providerTemplateSelect && typeof draft.templateId === 'string' && draft.templateId) {
+                providerTemplateSelect.value = draft.templateId;
+                renderProviderTemplateHint();
+            }
+            if (providerBaseUrlInput && typeof draft.baseUrl === 'string') {
+                providerBaseUrlInput.value = draft.baseUrl;
+            }
+            if (providerModelInput && typeof draft.model === 'string') {
+                providerModelInput.value = draft.model;
+            }
+            if (providerApiKeyInput && typeof draft.apiKey === 'string') {
+                providerApiKeyInput.value = draft.apiKey;
+            }
+            if (providerApiVersionInput && typeof draft.apiVersion === 'string') {
+                providerApiVersionInput.value = draft.apiVersion;
+            }
+        } finally {
+            notemdProviderModalState.applyingDraft = false;
+        }
+    };
+
+    const renderProviderTemplateHint = () => {
+        if (!providerTemplateHint) {
+            return;
+        }
+        const templateId = providerTemplateSelect ? String(providerTemplateSelect.value || '').trim() : '';
+        const templates = Array.isArray(notemdProviderModalState.templates) ? notemdProviderModalState.templates : [];
+        const template = templates.find((item) => item.id === templateId) || null;
+        if (!template) {
+            providerTemplateHint.textContent = '';
+            return;
+        }
+        const noteSummary = Array.isArray(template.notes) ? template.notes.slice(0, 2).join(' ') : '';
+        providerTemplateHint.textContent = `${template.label} · ${template.category} · ${template.transport}. ${template.recommendedFor} ${template.hostHint} ${noteSummary}`.trim();
+    };
+
+    const renderSelectedProviderFields = () => {
+        const provider = getCurrentProviderFromModalState();
+        if (!provider) {
+            if (providerBaseUrlInput) providerBaseUrlInput.value = '';
+            if (providerModelInput) providerModelInput.value = '';
+            if (providerApiKeyInput) providerApiKeyInput.value = '';
+            if (providerApiVersionInput) providerApiVersionInput.value = '';
+            updateProviderApiVersionVisibility(null);
+            return;
+        }
+        if (providerBaseUrlInput) providerBaseUrlInput.value = String(provider.baseUrl || '');
+        if (providerModelInput) providerModelInput.value = String(provider.model || '');
+        if (providerApiKeyInput) providerApiKeyInput.value = String(provider.apiKey || '');
+        if (providerApiVersionInput) providerApiVersionInput.value = String(provider.apiVersion || '');
+        updateProviderApiVersionVisibility(provider);
+
+        const matchedTemplate = findTemplateForProvider(provider.name);
+        if (providerTemplateSelect && matchedTemplate) {
+            providerTemplateSelect.value = matchedTemplate.id;
+            renderProviderTemplateHint();
+        }
+        applyProviderDraftToFields(provider.name);
+    };
+
+    const populateProviderTemplateSelect = () => {
+        if (!providerTemplateSelect) {
+            return;
+        }
+        providerTemplateSelect.innerHTML = '';
+        const placeholder = document.createElement('option');
+        placeholder.value = '';
+        placeholder.textContent = t('notemd_provider_template_select', 'Choose a preset template');
+        providerTemplateSelect.appendChild(placeholder);
+        const templates = Array.isArray(notemdProviderModalState.templates) ? notemdProviderModalState.templates : [];
+        templates.forEach((template) => {
+            const option = document.createElement('option');
+            option.value = template.id;
+            option.textContent = `${template.label} (${template.category})`;
+            providerTemplateSelect.appendChild(option);
+        });
+    };
+
+    const populateProviderSelect = () => {
+        if (!providerNameSelect) {
+            return;
+        }
+        providerNameSelect.innerHTML = '';
+        const settings = notemdProviderModalState.settings;
+        const providers = settings && Array.isArray(settings.providers) ? settings.providers : [];
+        providers.forEach((provider) => {
+            const option = document.createElement('option');
+            option.value = provider.name;
+            option.textContent = provider.name;
+            providerNameSelect.appendChild(option);
+        });
+        if (settings && settings.activeProvider) {
+            providerNameSelect.value = settings.activeProvider;
+        }
+        renderSelectedProviderFields();
+    };
+
+    const loadNotemdProviderModalState = async (options = {}) => {
+        if (notemdProviderModalState.loading) {
+            return;
+        }
+        setProviderModalBusy(true);
+        setProviderModalStatus(t('notemd_provider_loading', 'Loading provider settings...'));
+        try {
+            const templatesPayload = await requestRuntimeJson('/api/notemd/provider-templates?persist=1');
+            const settingsPayload = await requestRuntimeJson('/api/notemd/settings');
+            notemdProviderModalState.templates = Array.isArray(templatesPayload.templates)
+                ? cloneJson(templatesPayload.templates)
+                : [];
+            notemdProviderModalState.configPath = String(templatesPayload.configPath || '');
+            notemdProviderModalState.settings = cloneJson(settingsPayload.settings || {});
+            populateProviderTemplateSelect();
+            populateProviderSelect();
+            if (providerConfigPath) {
+                providerConfigPath.textContent = notemdProviderModalState.configPath
+                    ? `${t('notemd_provider_config_path', 'TOML path')}: ${notemdProviderModalState.configPath}`
+                    : '';
+            }
+            notemdProviderModalState.lastSavedFingerprint = getCurrentProviderFingerprint();
+            setProviderModalStatus(
+                t('notemd_provider_loaded', 'Provider presets and TOML templates are ready.'),
+                'success'
+            );
+        } catch (error) {
+            setProviderModalStatus(
+                t('notemd_provider_load_failed', 'Provider settings load failed: {error}', {
+                    error: error && error.message ? error.message : String(error),
+                }),
+                'error'
+            );
+        } finally {
+            setProviderModalBusy(false);
+        }
+    };
+
+    const saveNotemdProviderModalState = async (options = {}) => {
+        if (!notemdProviderModalState.settings || !providerNameSelect) {
+            return;
+        }
+        const auto = options.auto === true;
+        const nextSettings = cloneJson(notemdProviderModalState.settings);
+        const providerName = String(providerNameSelect.value || '').trim();
+        const nextProvider = nextSettings.providers.find((provider) => provider.name === providerName);
+        if (!nextProvider) {
+            throw new Error(`Unsupported provider: ${providerName}`);
+        }
+        nextSettings.activeProvider = providerName;
+        nextProvider.baseUrl = String(providerBaseUrlInput ? providerBaseUrlInput.value : '').trim();
+        nextProvider.model = String(providerModelInput ? providerModelInput.value : '').trim();
+        nextProvider.apiKey = String(providerApiKeyInput ? providerApiKeyInput.value : '');
+        nextProvider.apiVersion = String(providerApiVersionInput ? providerApiVersionInput.value : '').trim();
+        setProviderModalBusy(true);
+        setProviderModalStatus(
+            auto
+                ? t('notemd_provider_autosaving', 'Auto-saving provider settings...')
+                : t('notemd_provider_saving', 'Saving provider settings...')
+        );
+        try {
+            const payload = await requestRuntimeJson('/api/notemd/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ settings: nextSettings }),
+            });
+            notemdProviderModalState.settings = cloneJson(payload.settings || nextSettings);
+            populateProviderSelect();
+            notemdProviderModalState.lastSavedFingerprint = getCurrentProviderFingerprint();
+            removeProviderDraft(providerName);
+            setProviderModalStatus(
+                auto
+                    ? t('notemd_provider_autosaved', 'Provider settings auto-saved.')
+                    : t('notemd_provider_saved', 'Provider settings saved to app_config.toml.'),
+                'success'
+            );
+        } finally {
+            setProviderModalBusy(false);
+        }
+    };
+
+    const scheduleProviderAutosave = () => {
+        if (notemdProviderModalState.loading || notemdProviderModalState.applyingDraft) {
+            return;
+        }
+        const providerName = String(providerNameSelect ? providerNameSelect.value : '').trim();
+        if (!providerName || !notemdProviderModalState.settings) {
+            return;
+        }
+        const nextFingerprint = getCurrentProviderFingerprint();
+        if (!nextFingerprint || nextFingerprint === notemdProviderModalState.lastSavedFingerprint) {
+            return;
+        }
+        clearProviderAutosaveTimer();
+        notemdProviderModalState.autosaveTimer = setTimeout(() => {
+            notemdProviderModalState.autosaveTimer = null;
+            void saveNotemdProviderModalState({ auto: true }).catch((error) => {
+                setProviderModalStatus(
+                    t('notemd_provider_autosave_failed', 'Auto-save failed: {error}', {
+                        error: error && error.message ? error.message : String(error),
+                    }),
+                    'error'
+                );
+            });
+        }, NOTEMD_PROVIDER_AUTOSAVE_DEBOUNCE_MS);
+    };
+
+    const applyNotemdProviderTemplate = async () => {
+        if (!providerTemplateSelect) {
+            return;
+        }
+        const templateId = String(providerTemplateSelect.value || '').trim();
+        if (!templateId) {
+            setProviderModalStatus(t('notemd_provider_template_required', 'Choose a preset template first.'), 'error');
+            return;
+        }
+        setProviderModalBusy(true);
+        setProviderModalStatus(t('notemd_provider_template_applying', 'Applying provider preset...'));
+        try {
+            const payload = await requestRuntimeJson('/api/notemd/provider-templates/apply', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ templateId }),
+            });
+            notemdProviderModalState.settings = cloneJson(payload.settings || {});
+            if (payload.configPath) {
+                notemdProviderModalState.configPath = String(payload.configPath);
+            }
+            populateProviderSelect();
+            if (providerConfigPath) {
+                providerConfigPath.textContent = notemdProviderModalState.configPath
+                    ? `${t('notemd_provider_config_path', 'TOML path')}: ${notemdProviderModalState.configPath}`
+                    : '';
+            }
+            notemdProviderModalState.lastSavedFingerprint = getCurrentProviderFingerprint();
+            removeProviderDraft(String(providerNameSelect ? providerNameSelect.value : '').trim());
+            setProviderModalStatus(
+                t('notemd_provider_template_applied', 'Preset applied and saved to app_config.toml.'),
+                'success'
+            );
+        } finally {
+            setProviderModalBusy(false);
+        }
+    };
+
+    const materializeNotemdProviderTemplates = async () => {
+        setProviderModalBusy(true);
+        setProviderModalStatus(t('notemd_provider_templates_writing', 'Writing TOML provider templates...'));
+        try {
+            const payload = await requestRuntimeJson('/api/notemd/provider-templates?persist=1');
+            notemdProviderModalState.templates = Array.isArray(payload.templates)
+                ? cloneJson(payload.templates)
+                : [];
+            notemdProviderModalState.configPath = String(payload.configPath || notemdProviderModalState.configPath || '');
+            populateProviderTemplateSelect();
+            renderProviderTemplateHint();
+            if (providerConfigPath) {
+                providerConfigPath.textContent = notemdProviderModalState.configPath
+                    ? `${t('notemd_provider_config_path', 'TOML path')}: ${notemdProviderModalState.configPath}`
+                    : '';
+            }
+            setProviderModalStatus(
+                payload.persisted
+                    ? t('notemd_provider_templates_written', 'Provider templates were written to app_config.toml.')
+                    : t('notemd_provider_templates_present', 'Provider templates are already present in app_config.toml.'),
+                'success'
+            );
+        } finally {
+            setProviderModalBusy(false);
+        }
+    };
+
+    const testNotemdProviderConnection = async () => {
+        const payload = buildCurrentProviderRequestPayload();
+        if (!payload.providerName) {
+            throw new Error('Provider name is required.');
+        }
+
+        setProviderModalBusy(true);
+        setProviderModalStatus(
+            t('btn_test_provider_connection', 'Test Connection') + '...',
+            'muted'
+        );
+        try {
+            const response = await requestRuntimeJson('/api/notemd/test-llm', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload),
+            });
+            const result = response.result || {};
+            setProviderModalStatus(
+                String(result.message || `Connected to ${payload.providerName}.`),
+                result.success === false ? 'error' : 'success'
+            );
+        } finally {
+            setProviderModalBusy(false);
+        }
+    };
+
     // Load initial values
     const updateUIFromSettings = (settings) => {
         const mode = document.querySelector('input[name="layoutMode"]:checked') ? document.querySelector('input[name="layoutMode"]:checked').value : 'force';
@@ -4441,6 +6304,9 @@ function initSettingsUI() {
             if (settings.performance.enableGPU !== undefined) {
                 if (gpuCheckbox) gpuCheckbox.checked = settings.performance.enableGPU;
             }
+            if (settings.performance.staticMode !== undefined) {
+                if (staticModeCheckbox) staticModeCheckbox.checked = settings.performance.staticMode;
+            }
             if (settings.performance.gpuRendering !== undefined) {
                 if (gpuRenderingCheckbox) gpuRenderingCheckbox.checked = settings.performance.gpuRendering;
             }
@@ -4503,6 +6369,12 @@ function initSettingsUI() {
         });
     }
 
+    if (staticModeCheckbox) {
+        staticModeCheckbox.addEventListener('change', (e) => {
+            settingsManager.set('performance', 'staticMode', e.target.checked);
+        });
+    }
+
     if (gpuRenderingCheckbox) {
         gpuRenderingCheckbox.addEventListener('change', (e) => {
             settingsManager.set('performance', 'gpuRendering', e.target.checked);
@@ -4548,33 +6420,132 @@ function initSettingsUI() {
         settingsManager.set('reading', 'mode', e.target.value);
     });
 
-    // Helper to close settings
-    const closeSettings = () => {
-        modal.style.display = 'none';
-        isSettingsModalOpen = false;
-        // Resume if not globally frozen
-        const isFrozen = document.getElementById('freeze-layout') ? document.getElementById('freeze-layout').checked : false;
-        if (!isFrozen) {
-            simulation.alpha(0.3).restart();
+    if (providerTemplateSelect) {
+        providerTemplateSelect.addEventListener('change', () => {
+            renderProviderTemplateHint();
+            syncCurrentProviderDraft();
+            scheduleProviderAutosave();
+        });
+    }
+
+    if (providerNameSelect) {
+        providerNameSelect.addEventListener('change', () => {
+            renderSelectedProviderFields();
+            syncCurrentProviderDraft();
+            scheduleProviderAutosave();
+        });
+    }
+
+    [
+        providerBaseUrlInput,
+        providerModelInput,
+        providerApiKeyInput,
+        providerApiVersionInput,
+    ].forEach((input) => {
+        if (!input) {
+            return;
         }
-    };
+        input.addEventListener('input', () => {
+            syncCurrentProviderDraft();
+            scheduleProviderAutosave();
+        });
+        input.addEventListener('change', () => {
+            syncCurrentProviderDraft();
+            scheduleProviderAutosave();
+        });
+    });
+
+    if (applyProviderTemplateBtn) {
+        applyProviderTemplateBtn.addEventListener('click', () => {
+            void applyNotemdProviderTemplate().catch((error) => {
+                setProviderModalStatus(
+                    t('notemd_provider_template_apply_failed', 'Provider preset apply failed: {error}', {
+                        error: error && error.message ? error.message : String(error),
+                    }),
+                    'error'
+                );
+            });
+        });
+    }
+
+    if (testProviderBtn) {
+        testProviderBtn.addEventListener('click', () => {
+            void testNotemdProviderConnection().catch((error) => {
+                setProviderModalStatus(
+                    error && error.message ? error.message : String(error),
+                    'error'
+                );
+            });
+        });
+    }
+
+    if (saveProviderBtn) {
+        saveProviderBtn.addEventListener('click', () => {
+            void saveNotemdProviderModalState().catch((error) => {
+                setProviderModalStatus(
+                    t('notemd_provider_save_failed', 'Provider save failed: {error}', {
+                        error: error && error.message ? error.message : String(error),
+                    }),
+                    'error'
+                );
+            });
+        });
+    }
+
+    if (materializeProviderTemplatesBtn) {
+        materializeProviderTemplatesBtn.addEventListener('click', () => {
+            void materializeNotemdProviderTemplates().catch((error) => {
+                setProviderModalStatus(
+                    t('notemd_provider_templates_write_failed', 'Template write failed: {error}', {
+                        error: error && error.message ? error.message : String(error),
+                    }),
+                    'error'
+                );
+            });
+        });
+    }
 
     // Modal Actions
-    // v0.9.42: When opening settings, update UI to reflect current mode's values
     openBtn.addEventListener('click', () => {
         updateUIFromSettings(settingsManager.settings);
-        modal.style.display = 'flex';
-        isSettingsModalOpen = true;
-        simulation.stop(); // v0.9.41: Force freeze to save resources
-    });
-    
-    closeBtns.forEach(btn => btn.addEventListener('click', closeSettings));
-    
-    // Close on click outside
-    modal.addEventListener('click', (e) => {
-        if (e.target === modal) closeSettings();
+        showMainSettingsPage();
     });
 
+    if (openAgentSettingsBtn) {
+        openAgentSettingsBtn.addEventListener('click', () => {
+            void showAgentSettingsPage().catch((error) => {
+                console.warn('[Settings] Failed to open agent settings.', error);
+            });
+        });
+    }
+
+    if (agentSettingsBackBtn) {
+        agentSettingsBackBtn.addEventListener('click', showMainSettingsPage);
+    }
+
+    if (agentSettingsBackFooterBtn) {
+        agentSettingsBackFooterBtn.addEventListener('click', showMainSettingsPage);
+    }
+
+    mainCloseBtns.forEach((btn) => btn.addEventListener('click', closeAllSettingsPages));
+    agentCloseBtns.forEach((btn) => btn.addEventListener('click', closeAllSettingsPages));
+
+    if (modal) {
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                closeAllSettingsPages();
+            }
+        });
+    }
+
+    if (agentModal) {
+        agentModal.addEventListener('click', (e) => {
+            if (e.target === agentModal) {
+                closeAllSettingsPages();
+            }
+        });
+    }
+
     resetBtn.addEventListener('click', () => {
         settingsManager.reset();
         updateUIFromSettings(settingsManager.settings);
@@ -4588,7 +6559,7 @@ function initSettingsUI() {
             
             // v0.9.40: Check Freeze Layout State before restarting
             const globalFreeze = document.getElementById('freeze-layout') ? document.getElementById('freeze-layout').checked : false;
-            const isFrozen = globalFreeze || isSettingsModalOpen;
+            const isFrozen = globalFreeze || isAnySettingsPanelOpen();
             
             if (!isFrozen) {
                 simulation.alpha(0.3).restart();
@@ -4799,6 +6770,151 @@ function getTauriDialogApi() {
     return null;
 }
 
+function normalizePathModeRuntimeText(value) {
+    return String(value || '').replace(/\s+/g, ' ').trim();
+}
+
+function normalizePathModeLanguage(value) {
+    const raw = normalizePathModeRuntimeText(value).toLowerCase();
+    return raw.startsWith('zh') ? 'zh' : 'en';
+}
+
+function resolvePathModeRuntimeTarget(targetId) {
+    const normalizedTargetId = normalizePathModeRuntimeText(targetId);
+    if (!normalizedTargetId) {
+        return null;
+    }
+    const node = resolveGraphViewNodeByIdOrLabel(normalizedTargetId);
+    if (!node) {
+        return {
+            id: normalizedTargetId,
+            label: normalizedTargetId,
+            resolved: false,
+        };
+    }
+    return {
+        id: node.id,
+        label: getGraphViewNodeLabel(node) || node.id,
+        resolved: true,
+    };
+}
+
+function buildGodotFuturePathRuntimeConfig(targetId, options = {}) {
+    const runtimeTarget = resolvePathModeRuntimeTarget(targetId);
+    if (!runtimeTarget || !runtimeTarget.id) {
+        return null;
+    }
+    const existingConfig = options.config && typeof options.config === 'object'
+        ? options.config
+        : {};
+    const targetIds = [];
+    const seen = new Set();
+    const appendTargetId = function(value) {
+        const normalized = normalizePathModeRuntimeText(value);
+        if (!normalized || seen.has(normalized)) {
+            return;
+        }
+        seen.add(normalized);
+        targetIds.push(normalized);
+    };
+    appendTargetId(runtimeTarget.id);
+    if (Array.isArray(existingConfig.targetIds)) {
+        existingConfig.targetIds.forEach(appendTargetId);
+    }
+    return {
+        ...existingConfig,
+        mode: 'diffusion',
+        strategy: 'core',
+        layout: 'orbital',
+        targetId: runtimeTarget.id,
+        target_id: runtimeTarget.id,
+        targetIds,
+        focus_mode: true,
+        language: normalizePathModeLanguage(
+            existingConfig.language
+            || window.i18n && window.i18n.currentLanguage
+            || document.documentElement && document.documentElement.lang
+            || 'en'
+        ),
+    };
+}
+
+async function openGodotFuturePathById(targetId, options = {}) {
+    const config = buildGodotFuturePathRuntimeConfig(targetId, options);
+    if (!config) {
+        throw new Error('Missing Godot Future Path target node.');
+    }
+    window.__NC_LAST_GODOT_FUTURE_PATH_REQUEST = { ...config };
+
+    const pathApp = window.pathApp;
+    if (pathApp && typeof pathApp === 'object') {
+        if (!window.__NC_AGENT_GODOT_FUTURE_PATH_INITIALIZED && typeof pathApp.init === 'function') {
+            pathApp.init(config.targetId);
+            window.__NC_AGENT_GODOT_FUTURE_PATH_INITIALIZED = true;
+        }
+        if (pathApp.runtimeConfig && typeof pathApp.runtimeConfig === 'object') {
+            pathApp.runtimeConfig.mode = 'diffusion';
+            pathApp.runtimeConfig.strategy = 'core';
+            pathApp.runtimeConfig.layout = 'orbital';
+            pathApp.runtimeConfig.targetId = config.targetId;
+            pathApp.runtimeConfig.targetIds = config.targetIds.slice();
+        }
+        pathApp.currentTargetId = config.targetId;
+        pathApp.currentTargetIds = config.targetIds.slice();
+        pathApp.centralNodeId = config.targetId;
+        if (typeof pathApp.applyRemoteConfigure === 'function') {
+            pathApp.applyRemoteConfigure(config);
+        }
+        if (typeof pathApp._sendBridgeMessage === 'function') {
+            pathApp._sendBridgeMessage('configure', config);
+        }
+        if (typeof pathApp.triggerUpdate === 'function') {
+            pathApp.triggerUpdate();
+        }
+        if (typeof pathApp.requestBridgeWindowVisibility === 'function') {
+            const bridgeReady = await pathApp.requestBridgeWindowVisibility(true, {
+                waitMs: 1800,
+                reason: options.source || 'open-godot-future-path',
+            });
+            if (bridgeReady && typeof pathApp._sendBridgeMessage === 'function') {
+                pathApp._sendBridgeMessage('configure', config);
+            }
+        }
+    }
+
+    const invoke = getTauriCoreInvoke();
+    if (invoke) {
+        const caps = window.__NC_RUNTIME_CAPS || {};
+        if (caps.platform === 'android' && caps.supports_native_pathmode === true) {
+            await invoke('open_native_pathmode', {
+                request: {
+                    mode: 'diffusion',
+                    strategy: 'core',
+                    targetId: config.targetId,
+                },
+            });
+        } else {
+            await invoke('toggle_pathmode_window', { showGodot: true });
+        }
+    }
+
+    return {
+        opened: true,
+        targetId: config.targetId,
+        targetIds: config.targetIds.slice(),
+        strategy: config.strategy,
+        mode: config.mode,
+    };
+}
+
+window.NoteConnectionPathMode = {
+    ...(window.NoteConnectionPathMode && typeof window.NoteConnectionPathMode === 'object'
+        ? window.NoteConnectionPathMode
+        : {}),
+    buildGodotFuturePathRuntimeConfig,
+    openGodotFuturePathById,
+};
+
 function normalizeNotemdPickerPayload(payload) {
     const safePayload = payload && typeof payload === 'object' ? { ...payload } : {};
     const initialPath = typeof safePayload.initialPath === 'string'