noteconnection 1.6.8 → 1.8.0

package/dist/src/frontend/app.js

@@ -8,6 +8,1559 @@ const graphSemanticA11yState = {
     pendingTimer: null
 };
 
+function nowMs() {
+    return (typeof performance !== 'undefined' && typeof performance.now === 'function')
+        ? performance.now()
+        : Date.now();
+}
+
+function readStartupPerfProfileOverride() {
+    if (typeof localStorage === 'undefined') {
+        return '';
+    }
+
+    try {
+        const value = localStorage.getItem('nc.startupPerfProfile');
+        return typeof value === 'string' ? value.trim() : '';
+    } catch (_err) {
+        return '';
+    }
+}
+
+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()
+        : '';
+
+    if (rawPlatform.includes('android')) {
+        return 'android';
+    }
+    if (rawPlatform.includes('ios')) {
+        return 'ios';
+    }
+    if (rawPlatform.includes('windows') || rawPlatform === 'win32') {
+        return 'windows';
+    }
+    if (rawPlatform.includes('macos') || rawPlatform.includes('darwin') || rawPlatform === 'mac') {
+        return 'macos';
+    }
+    if (rawPlatform.includes('linux')) {
+        return 'linux';
+    }
+    if (rawPlatform.includes('web')) {
+        return 'web';
+    }
+
+    if (typeof navigator !== 'undefined' && typeof navigator.userAgent === 'string') {
+        const ua = navigator.userAgent;
+        if (/Android/i.test(ua)) return 'android';
+        if (/iPhone|iPad|iPod/i.test(ua)) return 'ios';
+        if (/Windows/i.test(ua)) return 'windows';
+        if (/Macintosh|Mac OS X/i.test(ua)) return 'macos';
+        if (/Linux/i.test(ua)) return 'linux';
+    }
+
+    if (typeof window !== 'undefined' && window.Capacitor && typeof window.Capacitor.getPlatform === 'function') {
+        try {
+            const capPlatform = String(window.Capacitor.getPlatform() || '').toLowerCase();
+            if (capPlatform === 'android') return 'android';
+            if (capPlatform === 'ios') return 'ios';
+            if (capPlatform === 'web') return 'web';
+        } catch (_err) {
+            // Ignore and fall through.
+        }
+    }
+
+    return 'unknown';
+}
+
+function resolveStartupPerfProfile(runtimeCaps) {
+    const base = {
+        id: 'default',
+        pilotEnabled: false,
+        tickMaxFps: 0,
+        edgeGeometryDelayMs: 0,
+        edgeStartupWindowMs: 0,
+        edgeStartupSvgCap: 0,
+        edgeStage1TopK: 0,
+        stableAlphaThreshold: 0.05,
+        stableHoldTicks: 8,
+        stableTimeoutMs: 12000,
+        lowAlphaThreshold: 0.08,
+        lowAlphaTickMaxFps: 0,
+        deltaTickEnabled: false,
+        deltaEpsilonPx: 0.6,
+        deltaFullSyncEveryTicks: 3,
+        deltaLowAlphaEpsilonMultiplier: 1.35,
+        deltaLowAlphaFullSyncEveryTicks: 5,
+        startupOverlayEnabled: true,
+        overlaySafetyTimeoutMs: 30000,
+        overlayMinStars: 70,
+        overlayMaxStars: 180,
+        overlayStarDensity: 2400,
+        overlayDprCap: 2
+    };
+
+    const profileCatalog = {
+        desktop_windows_pilot: {
+            ...base,
+            id: 'desktop_windows_pilot',
+            pilotEnabled: true,
+            tickMaxFps: 26,
+            edgeGeometryDelayMs: 400,
+            edgeStartupWindowMs: 1500,
+            edgeStartupSvgCap: 18000,
+            edgeStage1TopK: 3500,
+            lowAlphaTickMaxFps: 12,
+            deltaTickEnabled: true,
+            deltaEpsilonPx: 0.75,
+            deltaFullSyncEveryTicks: 3,
+            deltaLowAlphaEpsilonMultiplier: 1.45,
+            deltaLowAlphaFullSyncEveryTicks: 5,
+            overlayMinStars: 90,
+            overlayMaxStars: 220,
+            overlayStarDensity: 2200
+        },
+        desktop_macos_pilot: {
+            ...base,
+            id: 'desktop_macos_pilot',
+            pilotEnabled: true,
+            tickMaxFps: 24,
+            edgeGeometryDelayMs: 430,
+            edgeStartupWindowMs: 1700,
+            edgeStartupSvgCap: 15000,
+            edgeStage1TopK: 3000,
+            lowAlphaTickMaxFps: 11,
+            deltaTickEnabled: true,
+            deltaEpsilonPx: 0.75,
+            deltaFullSyncEveryTicks: 3,
+            deltaLowAlphaEpsilonMultiplier: 1.45,
+            deltaLowAlphaFullSyncEveryTicks: 5,
+            overlayMinStars: 84,
+            overlayMaxStars: 200,
+            overlayStarDensity: 2400
+        },
+        desktop_linux_pilot: {
+            ...base,
+            id: 'desktop_linux_pilot',
+            pilotEnabled: true,
+            tickMaxFps: 24,
+            edgeGeometryDelayMs: 420,
+            edgeStartupWindowMs: 1600,
+            edgeStartupSvgCap: 16000,
+            edgeStage1TopK: 3200,
+            lowAlphaTickMaxFps: 11,
+            deltaTickEnabled: true,
+            deltaEpsilonPx: 0.75,
+            deltaFullSyncEveryTicks: 3,
+            deltaLowAlphaEpsilonMultiplier: 1.45,
+            deltaLowAlphaFullSyncEveryTicks: 5,
+            overlayMinStars: 86,
+            overlayMaxStars: 205,
+            overlayStarDensity: 2350
+        },
+        mobile_android_pilot: {
+            ...base,
+            id: 'mobile_android_pilot',
+            pilotEnabled: true,
+            tickMaxFps: 18,
+            edgeGeometryDelayMs: 560,
+            edgeStartupWindowMs: 2200,
+            edgeStartupSvgCap: 7000,
+            edgeStage1TopK: 1500,
+            stableHoldTicks: 10,
+            stableTimeoutMs: 18000,
+            lowAlphaThreshold: 0.1,
+            lowAlphaTickMaxFps: 8,
+            deltaTickEnabled: true,
+            deltaEpsilonPx: 0.95,
+            deltaFullSyncEveryTicks: 4,
+            deltaLowAlphaEpsilonMultiplier: 1.6,
+            deltaLowAlphaFullSyncEveryTicks: 6,
+            overlaySafetyTimeoutMs: 36000,
+            overlayMinStars: 52,
+            overlayMaxStars: 120,
+            overlayStarDensity: 3600,
+            overlayDprCap: 1.6
+        },
+        mobile_ios_pilot: {
+            ...base,
+            id: 'mobile_ios_pilot',
+            pilotEnabled: true,
+            tickMaxFps: 17,
+            edgeGeometryDelayMs: 600,
+            edgeStartupWindowMs: 2300,
+            edgeStartupSvgCap: 6200,
+            edgeStage1TopK: 1300,
+            stableHoldTicks: 10,
+            stableTimeoutMs: 19000,
+            lowAlphaThreshold: 0.1,
+            lowAlphaTickMaxFps: 8,
+            deltaTickEnabled: true,
+            deltaEpsilonPx: 0.95,
+            deltaFullSyncEveryTicks: 4,
+            deltaLowAlphaEpsilonMultiplier: 1.6,
+            deltaLowAlphaFullSyncEveryTicks: 6,
+            overlaySafetyTimeoutMs: 36000,
+            overlayMinStars: 48,
+            overlayMaxStars: 110,
+            overlayStarDensity: 3900,
+            overlayDprCap: 1.5
+        }
+    };
+
+    const detectedPlatform = resolveRuntimePlatform(runtimeCaps);
+    const override = readStartupPerfProfileOverride();
+    if (override === 'off') {
+        return {
+            ...base,
+            override: 'off',
+            detectedPlatform
+        };
+    }
+
+    if (override && Object.prototype.hasOwnProperty.call(profileCatalog, override)) {
+        return {
+            ...profileCatalog[override],
+            override: 'forced',
+            detectedPlatform
+        };
+    }
+
+    if (override && override !== 'auto') {
+        console.warn(`[Startup Perf] Unknown override profile "${override}", fallback to auto-detected platform profile.`);
+    }
+
+    switch (detectedPlatform) {
+        case 'windows':
+            return { ...profileCatalog.desktop_windows_pilot, override: '', detectedPlatform };
+        case 'macos':
+            return { ...profileCatalog.desktop_macos_pilot, override: '', detectedPlatform };
+        case 'linux':
+            return { ...profileCatalog.desktop_linux_pilot, override: '', detectedPlatform };
+        case 'android':
+            return { ...profileCatalog.mobile_android_pilot, override: '', detectedPlatform };
+        case 'ios':
+            return { ...profileCatalog.mobile_ios_pilot, override: '', detectedPlatform };
+        default:
+            return { ...base, override: '', detectedPlatform };
+    }
+}
+
+const startupRuntimeCaps = (typeof window !== 'undefined' && window.__NC_RUNTIME_CAPS)
+    ? window.__NC_RUNTIME_CAPS
+    : {};
+const startupPerfProfile = resolveStartupPerfProfile(startupRuntimeCaps);
+const startupPerfState = {
+    bootTs: nowMs(),
+    checkpoints: {},
+    t3Seen: false,
+    t4Seen: false,
+    t5Seen: false,
+    edgeDelayLogged: false,
+    edgeDelayReleasedLogged: false,
+    edgeCapLogged: false,
+    edgeCapReleasedLogged: false,
+    edgeStage1Logged: false,
+    edgeStage1ReleasedLogged: false,
+    tickModeSamples: {},
+    lastWorkerAlpha: null,
+    tickMessagesReceived: 0,
+    tickPayloadNodesTotal: 0,
+    tickPayloadNodesMax: 0,
+    tickFramesApplied: 0,
+    tickEmptyDeltaFramesSkipped: 0
+};
+
+const STARTUP_LAYOUT_SNAPSHOT_DB_NAME = 'noteconnection-startup';
+const STARTUP_LAYOUT_SNAPSHOT_STORE_NAME = 'layoutSnapshots';
+const STARTUP_LAYOUT_SNAPSHOT_LS_PREFIX = 'nc.startupLayoutSnapshot.';
+const STARTUP_LAYOUT_SNAPSHOT_VERSION = 1;
+const STARTUP_LAYOUT_SNAPSHOT_MAX_RECORDS = 6;
+const STARTUP_LAYOUT_SNAPSHOT_MAX_AGE_MS = 1000 * 60 * 60 * 24 * 30;
+
+const startupLayoutSnapshotState = {
+    fingerprint: '',
+    warmRestoreApplied: false,
+    pendingRecord: null,
+    restorePromise: null,
+    saveHandle: null,
+    lastSaveAtMs: 0,
+    sourceLayoutSummary: null,
+    sourceLayoutById: null
+};
+
+function hashFNV1a32(input) {
+    let hash = 0x811c9dc5;
+    const text = String(input || '');
+    for (let i = 0; i < text.length; i += 1) {
+        hash ^= text.charCodeAt(i);
+        hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+    }
+    return (hash >>> 0).toString(16).padStart(8, '0');
+}
+
+function buildStartupGraphFingerprint(nodeList, linkList, graphPayload) {
+    const safeNodes = Array.isArray(nodeList) ? nodeList : [];
+    const safeLinks = Array.isArray(linkList) ? linkList : [];
+    const graphVersion = graphPayload && graphPayload.version !== undefined
+        ? String(graphPayload.version)
+        : 'v0';
+
+    const nodeStep = Math.max(1, Math.floor(safeNodes.length / 256));
+    const nodeTokens = [];
+    for (let index = 0; index < safeNodes.length && nodeTokens.length < 256; index += nodeStep) {
+        const item = safeNodes[index];
+        nodeTokens.push(item && item.id !== undefined ? String(item.id) : `idx:${index}`);
+    }
+
+    const linkStep = Math.max(1, Math.floor(safeLinks.length / 256));
+    const linkTokens = [];
+    for (let index = 0; index < safeLinks.length && linkTokens.length < 256; index += linkStep) {
+        const item = safeLinks[index];
+        const sourceId = item && item.source && typeof item.source === 'object' ? item.source.id : item && item.source;
+        const targetId = item && item.target && typeof item.target === 'object' ? item.target.id : item && item.target;
+        linkTokens.push(`${sourceId}->${targetId}`);
+    }
+
+    const signature = [
+        `version=${graphVersion}`,
+        `nodes=${safeNodes.length}`,
+        `links=${safeLinks.length}`,
+        `nodeSample=${nodeTokens.join('|')}`,
+        `linkSample=${linkTokens.join('|')}`
+    ].join('||');
+
+    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) {
+            resolve(null);
+            return;
+        }
+
+        let request;
+        try {
+            request = window.indexedDB.open(STARTUP_LAYOUT_SNAPSHOT_DB_NAME, STARTUP_LAYOUT_SNAPSHOT_VERSION);
+        } catch (error) {
+            reject(error);
+            return;
+        }
+
+        request.onupgradeneeded = () => {
+            const db = request.result;
+            if (!db.objectStoreNames.contains(STARTUP_LAYOUT_SNAPSHOT_STORE_NAME)) {
+                const store = db.createObjectStore(STARTUP_LAYOUT_SNAPSHOT_STORE_NAME, { keyPath: 'fingerprint' });
+                store.createIndex('savedAt', 'savedAt');
+            }
+        };
+
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error || new Error('indexedDB open failed'));
+    });
+}
+
+function loadStartupLayoutSnapshotFromLocalStorage(fingerprint) {
+    if (!fingerprint || typeof localStorage === 'undefined') {
+        return null;
+    }
+    const key = `${STARTUP_LAYOUT_SNAPSHOT_LS_PREFIX}${fingerprint}`;
+    try {
+        const raw = localStorage.getItem(key);
+        if (!raw) {
+            return null;
+        }
+        const parsed = JSON.parse(raw);
+        return parsed && typeof parsed === 'object' ? parsed : null;
+    } catch (_err) {
+        return null;
+    }
+}
+
+function saveStartupLayoutSnapshotToLocalStorage(record) {
+    if (!record || !record.fingerprint || typeof localStorage === 'undefined') {
+        return;
+    }
+    try {
+        const key = `${STARTUP_LAYOUT_SNAPSHOT_LS_PREFIX}${record.fingerprint}`;
+        localStorage.setItem(key, JSON.stringify(record));
+    } catch (_err) {
+        // Ignore quota failures.
+    }
+}
+
+async function loadStartupLayoutSnapshotRecord(fingerprint) {
+    if (!fingerprint) {
+        return null;
+    }
+
+    const db = await openStartupLayoutSnapshotDb();
+    if (!db) {
+        return loadStartupLayoutSnapshotFromLocalStorage(fingerprint);
+    }
+
+    return new Promise((resolve, reject) => {
+        const tx = db.transaction(STARTUP_LAYOUT_SNAPSHOT_STORE_NAME, 'readonly');
+        const store = tx.objectStore(STARTUP_LAYOUT_SNAPSHOT_STORE_NAME);
+        const req = store.get(fingerprint);
+        req.onsuccess = () => resolve(req.result || null);
+        req.onerror = () => reject(req.error || new Error('indexedDB read failed'));
+        tx.oncomplete = () => db.close();
+        tx.onerror = () => db.close();
+        tx.onabort = () => db.close();
+    });
+}
+
+async function persistStartupLayoutSnapshotRecord(record) {
+    if (!record || !record.fingerprint) {
+        return;
+    }
+
+    const db = await openStartupLayoutSnapshotDb();
+    if (!db) {
+        saveStartupLayoutSnapshotToLocalStorage(record);
+        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.put(record);
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error || new Error('indexedDB write failed'));
+        tx.onabort = () => reject(tx.error || new Error('indexedDB write aborted'));
+    });
+
+    // Keep snapshot store bounded to avoid unbounded growth.
+    await new Promise((resolve, reject) => {
+        const tx = db.transaction(STARTUP_LAYOUT_SNAPSHOT_STORE_NAME, 'readwrite');
+        const store = tx.objectStore(STARTUP_LAYOUT_SNAPSHOT_STORE_NAME);
+        const req = store.getAll();
+        req.onsuccess = () => {
+            const now = Date.now();
+            const allRecords = Array.isArray(req.result) ? req.result : [];
+            allRecords.sort((a, b) => Number(b.savedAt || 0) - Number(a.savedAt || 0));
+            for (let i = 0; i < allRecords.length; i += 1) {
+                const item = allRecords[i];
+                const isExpired = Number.isFinite(item.savedAt) && (now - item.savedAt) > STARTUP_LAYOUT_SNAPSHOT_MAX_AGE_MS;
+                const overflow = i >= STARTUP_LAYOUT_SNAPSHOT_MAX_RECORDS;
+                if (isExpired || overflow) {
+                    store.delete(item.fingerprint);
+                }
+            }
+        };
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error || new Error('indexedDB cleanup failed'));
+        tx.onabort = () => reject(tx.error || new Error('indexedDB cleanup aborted'));
+    });
+
+    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;
+    }
+
+    const positions = new Array(nodes.length);
+    for (let index = 0; index < nodes.length; index += 1) {
+        const n = nodes[index];
+        positions[index] = {
+            id: n.id,
+            x: Number.isFinite(Number(n.x)) ? Number(n.x) : 0,
+            y: Number.isFinite(Number(n.y)) ? Number(n.y) : 0,
+            fx: null,
+            fy: null
+        };
+    }
+
+    return {
+        fingerprint: startupLayoutSnapshotState.fingerprint,
+        savedAt: Date.now(),
+        reason: String(reason || ''),
+        profileId: startupPerfProfile.id,
+        nodeCount: nodes.length,
+        edgeCount: Array.isArray(links) ? links.length : 0,
+        positions
+    };
+}
+
+function validateStartupLayoutSnapshotRecord(record) {
+    if (!record || !Array.isArray(record.positions) || record.positions.length === 0) {
+        return { ok: false, reason: 'empty-positions' };
+    }
+
+    if (startupLayoutSnapshotState.fingerprint && record.fingerprint && record.fingerprint !== startupLayoutSnapshotState.fingerprint) {
+        return { ok: false, reason: 'fingerprint-mismatch' };
+    }
+
+    const now = Date.now();
+    if (Number.isFinite(record.savedAt) && (now - record.savedAt) > STARTUP_LAYOUT_SNAPSHOT_MAX_AGE_MS) {
+        return { ok: false, reason: 'snapshot-expired' };
+    }
+
+    const expectedNodeCount = Array.isArray(nodes) ? nodes.length : 0;
+    const expectedEdgeCount = Array.isArray(links) ? links.length : 0;
+
+    if (Number.isFinite(record.nodeCount) && expectedNodeCount > 0 && record.nodeCount !== expectedNodeCount) {
+        return { ok: false, reason: 'node-count-mismatch' };
+    }
+    if (Number.isFinite(record.edgeCount) && expectedEdgeCount > 0 && record.edgeCount !== expectedEdgeCount) {
+        return { ok: false, reason: 'edge-count-mismatch' };
+    }
+
+    const positionCount = record.positions.length;
+    const coverage = expectedNodeCount > 0 ? (positionCount / expectedNodeCount) : 0;
+    if (expectedNodeCount > 0 && coverage < 0.9) {
+        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)),
+        positionCount,
+        expectedNodeCount,
+        expectedEdgeCount
+    };
+}
+
+function applyStartupLayoutSnapshotRecord(record) {
+    if (!record || !Array.isArray(record.positions) || record.positions.length === 0 || !nodeMap) {
+        return { appliedCount: 0, total: 0 };
+    }
+    const layoutById = new Map(record.positions.map((item) => [item.id, item]));
+    let appliedCount = 0;
+
+    for (let index = 0; index < nodes.length; index += 1) {
+        const n = nodes[index];
+        const saved = layoutById.get(n.id);
+        if (!saved) {
+            continue;
+        }
+        n.x = Number.isFinite(saved.x) ? saved.x : n.x;
+        n.y = Number.isFinite(saved.y) ? saved.y : n.y;
+        n.fx = null;
+        n.fy = null;
+        if (currentPositions && typeof currentPositions.set === 'function') {
+            currentPositions.set(n.id, { x: n.x, y: n.y });
+        }
+        appliedCount += 1;
+    }
+
+    return { appliedCount, total: nodes.length };
+}
+
+function maybeApplyStartupWarmSnapshot(trigger = '') {
+    if (startupLayoutSnapshotState.warmRestoreApplied) {
+        return false;
+    }
+    const record = startupLayoutSnapshotState.pendingRecord;
+    if (!record || !simulationWorker) {
+        return false;
+    }
+
+    const validation = validateStartupLayoutSnapshotRecord(record);
+    if (!validation.ok) {
+        console.warn('[Startup Warm Snapshot] Skip applying invalid snapshot record.', {
+            trigger,
+            reason: validation.reason,
+            fingerprint: startupLayoutSnapshotState.fingerprint,
+            recordFingerprint: record.fingerprint || null,
+            recordNodeCount: record.nodeCount || 0,
+            recordEdgeCount: record.edgeCount || 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;
+    }
+
+    const result = applyStartupLayoutSnapshotRecord(record);
+    if (result.appliedCount <= 0) {
+        return false;
+    }
+    startupLayoutSnapshotState.warmRestoreApplied = true;
+
+    console.log('[Startup Warm Snapshot] Applied persisted layout snapshot.', {
+        trigger,
+        fingerprint: startupLayoutSnapshotState.fingerprint,
+        appliedCount: result.appliedCount,
+        totalNodes: result.total,
+        savedAt: record.savedAt || null,
+        coverage: validation.coverage
+    });
+
+    if (typeof ticked === 'function') {
+        ticked();
+    }
+
+    const syncNodes = nodes.map((n) => ({
+        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,
+        rank: n.rank
+    }));
+    const syncLinks = physicsLinks.map((l) => ({
+        source: l.source && typeof l.source === 'object' ? l.source.id : l.source,
+        target: l.target && typeof l.target === 'object' ? l.target.id : l.target
+    }));
+    simulationWorker.postMessage({
+        type: 'setNodes',
+        payload: {
+            nodes: syncNodes,
+            links: syncLinks,
+            restart: true
+        }
+    });
+    simulationWorker.postMessage({
+        type: 'updateParams',
+        payload: {
+            alpha: 0.18,
+            velocityDecay: 0.92,
+            restart: true
+        }
+    });
+
+    return true;
+}
+
+function scheduleStartupLayoutSnapshotPersist(reason = '', delayMs = 800) {
+    if (startupPerfProfile.pilotEnabled !== true) {
+        return;
+    }
+    if (!startupLayoutSnapshotState.fingerprint) {
+        return;
+    }
+
+    if (startupLayoutSnapshotState.saveHandle !== null) {
+        clearTimeout(startupLayoutSnapshotState.saveHandle);
+        startupLayoutSnapshotState.saveHandle = null;
+    }
+
+    startupLayoutSnapshotState.saveHandle = setTimeout(async () => {
+        startupLayoutSnapshotState.saveHandle = null;
+        const record = collectStartupLayoutSnapshotRecord(reason);
+        if (!record) {
+            return;
+        }
+        try {
+            await persistStartupLayoutSnapshotRecord(record);
+            startupLayoutSnapshotState.lastSaveAtMs = record.savedAt;
+            console.log('[Startup Warm Snapshot] Persisted layout snapshot.', {
+                fingerprint: record.fingerprint,
+                reason: record.reason,
+                nodeCount: record.nodeCount
+            });
+        } catch (error) {
+            console.warn('[Startup Warm Snapshot] Persist failed:', error && error.message ? error.message : String(error));
+        }
+    }, Math.max(0, Math.floor(delayMs)));
+}
+
+let startupWorldOverlayState = null;
+
+function createStartupWorldOverlay() {
+    if (startupPerfProfile.startupOverlayEnabled === false) {
+        return null;
+    }
+
+    const wrapper = document.getElementById('graph-wrapper');
+    if (!wrapper) {
+        return null;
+    }
+
+    const existing = document.getElementById('startup-world-overlay');
+    if (existing) {
+        return null;
+    }
+
+    const overlay = document.createElement('div');
+    overlay.id = 'startup-world-overlay';
+    overlay.className = 'startup-world-overlay';
+    overlay.innerHTML = `
+        <div class="startup-world-card" role="status" aria-live="polite">
+            <div class="startup-world-title">等待世界构建</div>
+            <div class="startup-world-subtitle">星辰正在连接知识节点...</div>
+            <canvas class="startup-world-canvas" aria-label="Startup Starfield"></canvas>
+            <div class="startup-world-hint">点击星辰可点暗</div>
+        </div>
+    `;
+    wrapper.appendChild(overlay);
+
+    const card = overlay.querySelector('.startup-world-card');
+    const canvas = overlay.querySelector('.startup-world-canvas');
+    if (!card || !canvas) {
+        overlay.remove();
+        return null;
+    }
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        overlay.remove();
+        return null;
+    }
+
+    const state = {
+        overlay,
+        card,
+        canvas,
+        ctx,
+        stars: [],
+        running: true,
+        frameHandle: null,
+        resizeObserver: null,
+        resizeHandler: null,
+        width: 0,
+        height: 0,
+        dpr: 1,
+        leaveHandle: null,
+        fallbackHandle: null,
+        hidden: false,
+        reducedMotion: false
+    };
+
+    if (typeof window.matchMedia === 'function') {
+        try {
+            state.reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        } catch (_err) {
+            state.reducedMotion = false;
+        }
+    }
+
+    function buildStars() {
+        const minStars = Number.isFinite(startupPerfProfile.overlayMinStars)
+            ? Math.max(20, Math.floor(startupPerfProfile.overlayMinStars))
+            : 70;
+        const maxStars = Number.isFinite(startupPerfProfile.overlayMaxStars)
+            ? Math.max(minStars, Math.floor(startupPerfProfile.overlayMaxStars))
+            : 180;
+        const densityDivisor = Number.isFinite(startupPerfProfile.overlayStarDensity)
+            ? Math.max(800, Math.floor(startupPerfProfile.overlayStarDensity))
+            : 2400;
+        let starCount = Math.min(maxStars, Math.max(minStars, Math.round((state.width * state.height) / densityDivisor)));
+        if (state.reducedMotion) {
+            starCount = Math.max(24, Math.round(starCount * 0.7));
+        }
+        state.stars = new Array(starCount);
+        const twinkleScale = state.reducedMotion ? 0.45 : 1;
+        for (let index = 0; index < starCount; index += 1) {
+            state.stars[index] = {
+                x: Math.random() * state.width,
+                y: Math.random() * state.height,
+                radius: 0.7 + Math.random() * 2.4,
+                hue: 195 + Math.random() * 35,
+                lightness: 75 + Math.random() * 20,
+                baseAlpha: 0.3 + Math.random() * 0.55,
+                twinkleSpeed: (0.8 + Math.random() * 2.4) * twinkleScale,
+                phase: Math.random() * Math.PI * 2,
+                dimTarget: 0,
+                dimValue: 0
+            };
+        }
+    }
+
+    function resizeCanvas() {
+        const rect = state.canvas.getBoundingClientRect();
+        state.width = Math.max(1, Math.floor(rect.width));
+        state.height = Math.max(1, Math.floor(rect.height));
+        const dprCap = Number.isFinite(startupPerfProfile.overlayDprCap)
+            ? Math.max(1, startupPerfProfile.overlayDprCap)
+            : 2;
+        state.dpr = Math.min(dprCap, Math.max(1, window.devicePixelRatio || 1));
+        state.canvas.width = Math.floor(state.width * state.dpr);
+        state.canvas.height = Math.floor(state.height * state.dpr);
+        state.ctx.setTransform(state.dpr, 0, 0, state.dpr, 0, 0);
+        buildStars();
+    }
+
+    function drawFrame(frameTimeMs) {
+        if (!state.running) {
+            return;
+        }
+
+        const t = frameTimeMs * 0.001;
+        const renderCtx = state.ctx;
+        renderCtx.clearRect(0, 0, state.width, state.height);
+
+        const nebulaA = renderCtx.createRadialGradient(
+            state.width * 0.28,
+            state.height * 0.28,
+            8,
+            state.width * 0.28,
+            state.height * 0.28,
+            state.width * 0.85
+        );
+        nebulaA.addColorStop(0, 'rgba(108, 149, 255, 0.22)');
+        nebulaA.addColorStop(1, 'rgba(108, 149, 255, 0)');
+        renderCtx.fillStyle = nebulaA;
+        renderCtx.fillRect(0, 0, state.width, state.height);
+
+        const nebulaB = renderCtx.createRadialGradient(
+            state.width * 0.78,
+            state.height * 0.72,
+            12,
+            state.width * 0.78,
+            state.height * 0.72,
+            state.width * 0.7
+        );
+        nebulaB.addColorStop(0, 'rgba(165, 126, 255, 0.18)');
+        nebulaB.addColorStop(1, 'rgba(165, 126, 255, 0)');
+        renderCtx.fillStyle = nebulaB;
+        renderCtx.fillRect(0, 0, state.width, state.height);
+
+        for (let index = 0; index < state.stars.length; index += 1) {
+            const star = state.stars[index];
+            star.dimValue += (star.dimTarget - star.dimValue) * 0.12;
+
+            const twinkle = state.reducedMotion
+                ? 0.82
+                : (0.55 + 0.45 * (0.5 + 0.5 * Math.sin(t * star.twinkleSpeed + star.phase)));
+            const alpha = Math.max(0.02, star.baseAlpha * twinkle * (1 - 0.9 * star.dimValue));
+            const radius = star.radius * (0.9 + twinkle * 0.3);
+
+            renderCtx.beginPath();
+            renderCtx.arc(star.x, star.y, radius, 0, Math.PI * 2);
+            renderCtx.fillStyle = `hsla(${star.hue}, 92%, ${star.lightness}%, ${alpha})`;
+            renderCtx.shadowBlur = state.reducedMotion ? (5 + star.radius * 3) : (9 + star.radius * 6);
+            renderCtx.shadowColor = `hsla(${star.hue}, 95%, ${Math.min(98, star.lightness + 5)}%, ${Math.min(0.85, alpha + 0.12)})`;
+            renderCtx.fill();
+            renderCtx.shadowBlur = 0;
+        }
+
+        state.frameHandle = window.requestAnimationFrame(drawFrame);
+    }
+
+    function dimNearestStar(event) {
+        const rect = state.canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        let nearestStar = null;
+        let nearestDistSq = Infinity;
+        for (let index = 0; index < state.stars.length; index += 1) {
+            const star = state.stars[index];
+            const dx = star.x - x;
+            const dy = star.y - y;
+            const distSq = dx * dx + dy * dy;
+            const hitRadius = Math.max(11, star.radius * 5);
+            if (distSq <= hitRadius * hitRadius && distSq < nearestDistSq) {
+                nearestDistSq = distSq;
+                nearestStar = star;
+            }
+        }
+
+        if (nearestStar) {
+            nearestStar.dimTarget = 1;
+        }
+    }
+
+    state.canvas.addEventListener('pointerdown', dimNearestStar);
+
+    state.resizeHandler = resizeCanvas;
+    if (typeof ResizeObserver === 'function') {
+        state.resizeObserver = new ResizeObserver(() => resizeCanvas());
+        state.resizeObserver.observe(state.card);
+    } else {
+        window.addEventListener('resize', state.resizeHandler);
+    }
+
+    resizeCanvas();
+    state.frameHandle = window.requestAnimationFrame(drawFrame);
+
+    return state;
+}
+
+function hideStartupWorldOverlay(reason = '') {
+    if (!startupWorldOverlayState || startupWorldOverlayState.hidden) {
+        return;
+    }
+
+    const state = startupWorldOverlayState;
+    state.hidden = true;
+    state.running = false;
+
+    if (state.frameHandle !== null) {
+        window.cancelAnimationFrame(state.frameHandle);
+        state.frameHandle = null;
+    }
+
+    if (state.resizeObserver) {
+        state.resizeObserver.disconnect();
+        state.resizeObserver = null;
+    } else if (state.resizeHandler) {
+        window.removeEventListener('resize', state.resizeHandler);
+    }
+
+    if (state.fallbackHandle !== null) {
+        window.clearTimeout(state.fallbackHandle);
+        state.fallbackHandle = null;
+    }
+
+    state.overlay.classList.add('is-leaving');
+    if (reason) {
+        console.log(`[Startup Overlay] Closing overlay: ${reason}`);
+    }
+
+    state.leaveHandle = window.setTimeout(() => {
+        if (state.overlay && state.overlay.parentNode) {
+            state.overlay.parentNode.removeChild(state.overlay);
+        }
+        startupWorldOverlayState = null;
+    }, 620);
+}
+
+function markStartupCheckpoint(label, details = null) {
+    if (Object.prototype.hasOwnProperty.call(startupPerfState.checkpoints, label)) {
+        return startupPerfState.checkpoints[label];
+    }
+
+    const at = nowMs();
+    const elapsedMs = at - startupPerfState.bootTs;
+    startupPerfState.checkpoints[label] = at;
+
+    if (details && typeof details === 'object' && Object.keys(details).length > 0) {
+        console.log(`[Startup Perf] ${label} +${elapsedMs.toFixed(2)}ms`, details);
+    } else {
+        console.log(`[Startup Perf] ${label} +${elapsedMs.toFixed(2)}ms`);
+    }
+
+    if (typeof label === 'string' && label.startsWith('T5 ')) {
+        hideStartupWorldOverlay('initial-layout-complete');
+    }
+
+    return at;
+}
+
+markStartupCheckpoint('T0 app_boot', {
+    profile: startupPerfProfile.id,
+    pilotEnabled: startupPerfProfile.pilotEnabled,
+    platform: startupPerfProfile.detectedPlatform || 'unknown',
+    runtimePlatformRaw: startupRuntimeCaps && startupRuntimeCaps.platform ? startupRuntimeCaps.platform : 'unknown',
+    override: startupPerfProfile.override || 'none'
+});
+
 // State for Cluster Filtering
 let activeClusterFilter = localStorage.getItem('activeClusterFilter') || 'all';
 // Clear it immediately so it doesn't persist unwantedly on manual refreshes? 
@@ -62,6 +1615,31 @@ const runtimeGraphData =
 const graphDataExists = runtimeGraphData !== null;
 const sourceNodes = (graphDataExists && Array.isArray(runtimeGraphData.nodes)) ? runtimeGraphData.nodes : [];
 const sourceLinks = (graphDataExists && Array.isArray(runtimeGraphData.edges)) ? runtimeGraphData.edges : [];
+
+if (graphDataExists && sourceNodes.length > 0) {
+    startupWorldOverlayState = createStartupWorldOverlay();
+    if (startupWorldOverlayState) {
+        const overlaySafetyTimeoutMs = Number.isFinite(startupPerfProfile.overlaySafetyTimeoutMs)
+            ? Math.max(8000, Math.floor(startupPerfProfile.overlaySafetyTimeoutMs))
+            : 30000;
+        console.log('[Startup Overlay] Activated.', {
+            profile: startupPerfProfile.id,
+            platform: startupPerfProfile.detectedPlatform || 'unknown',
+            overlaySafetyTimeoutMs
+        });
+        startupWorldOverlayState.fallbackHandle = window.setTimeout(() => {
+            hideStartupWorldOverlay('safety-timeout');
+        }, overlaySafetyTimeoutMs);
+    } else {
+        console.log('[Startup Overlay] Skipped by profile/runtime policy.', {
+            profile: startupPerfProfile.id,
+            platform: startupPerfProfile.detectedPlatform || 'unknown'
+        });
+    }
+} else {
+    console.log('[Startup Overlay] Skipped: no preloaded graph payload detected.');
+}
+
 const graphPreprocessStartTs = (typeof performance !== 'undefined' && typeof performance.now === 'function')
     ? performance.now()
     : Date.now();
@@ -131,6 +1709,50 @@ const graphPreprocessElapsedMs = ((typeof performance !== 'undefined' && typeof
     ? performance.now()
     : Date.now()) - graphPreprocessStartTs;
 console.log(`[Init Perf] Graph preprocessing completed in ${graphPreprocessElapsedMs.toFixed(2)}ms (nodes=${nodes.length}, links=${links.length}).`);
+markStartupCheckpoint('T1 graph_preprocessed', {
+    nodes: nodes.length,
+    links: links.length,
+    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,
+    nodes: nodes.length,
+    links: links.length
+});
+startupLayoutSnapshotState.restorePromise = loadStartupLayoutSnapshotRecord(startupLayoutSnapshotState.fingerprint)
+    .then((record) => {
+        startupLayoutSnapshotState.pendingRecord = record;
+        if (!record) {
+            console.log('[Startup Warm Snapshot] No persisted snapshot matched current fingerprint.');
+            return;
+        }
+        if (!Array.isArray(record.positions) || record.positions.length === 0) {
+            console.log('[Startup Warm Snapshot] Matched snapshot is empty. Skip applying.');
+            return;
+        }
+        console.log('[Startup Warm Snapshot] Snapshot matched and ready for apply.', {
+            fingerprint: startupLayoutSnapshotState.fingerprint,
+            savedAt: record.savedAt || null,
+            positionCount: record.positions.length
+        });
+        maybeApplyStartupWarmSnapshot('restore-ready');
+    })
+    .catch((error) => {
+        console.warn('[Startup Warm Snapshot] Restore load failed:', error && error.message ? error.message : String(error));
+    });
 
 // Optimization: Default to Canvas for large graphs (>3000 nodes) to save memory
 if (nodes.length > 3000) {
@@ -262,25 +1884,187 @@ const simulationWorker = new Worker("simulationWorker.js");
 
 // Position buffer for rendering
 let currentPositions = new Map();
+const startupTickApplyQueue = {
+    frameHandle: null,
+    pendingById: new Map(),
+    pendingTickMode: 'delta',
+    pendingStable: false
+};
+
+function buildStartupTickModeSummary() {
+    const fullCount = Number(startupPerfState.tickModeSamples.full || 0);
+    const deltaCount = Number(startupPerfState.tickModeSamples.delta || 0);
+    const totalTickCount = fullCount + deltaCount;
+    return {
+        tickMessages: startupPerfState.tickMessagesReceived,
+        tickFramesApplied: startupPerfState.tickFramesApplied,
+        fullTicks: fullCount,
+        deltaTicks: deltaCount,
+        deltaRatio: totalTickCount > 0 ? Number((deltaCount / totalTickCount).toFixed(4)) : 0,
+        avgPayloadNodes: startupPerfState.tickMessagesReceived > 0
+            ? Number((startupPerfState.tickPayloadNodesTotal / startupPerfState.tickMessagesReceived).toFixed(2))
+            : 0,
+        maxPayloadNodes: startupPerfState.tickPayloadNodesMax,
+        skippedEmptyDeltaFrames: startupPerfState.tickEmptyDeltaFramesSkipped
+    };
+}
+
+function flushStartupTickApplyQueue() {
+    startupTickApplyQueue.frameHandle = null;
+
+    if (focusNode) {
+        startupTickApplyQueue.pendingById.clear();
+        startupTickApplyQueue.pendingTickMode = 'delta';
+        startupTickApplyQueue.pendingStable = false;
+        return;
+    }
+
+    let appliedCount = 0;
+    startupTickApplyQueue.pendingById.forEach((payloadNode, nodeId) => {
+        if (!payloadNode) {
+            return;
+        }
+
+        const payloadIndex = Number(payloadNode.i);
+        const hasValidIndex = Number.isInteger(payloadIndex) && payloadIndex >= 0 && payloadIndex < nodes.length;
+        let originalNode = hasValidIndex ? nodes[payloadIndex] : null;
+        if (!originalNode || originalNode.id !== nodeId) {
+            originalNode = nodeMap.get(nodeId);
+        }
+        if (!originalNode) {
+            return;
+        }
+
+        const nextX = Number.isFinite(Number(payloadNode.x)) ? Number(payloadNode.x) : originalNode.x;
+        const nextY = Number.isFinite(Number(payloadNode.y)) ? Number(payloadNode.y) : originalNode.y;
+        originalNode.x = nextX;
+        originalNode.y = nextY;
+        currentPositions.set(nodeId, { x: nextX, y: nextY });
+        appliedCount += 1;
+    });
+
+    const shouldRender = appliedCount > 0 || startupTickApplyQueue.pendingTickMode !== 'delta';
+    if (shouldRender) {
+        ticked();
+        startupPerfState.tickFramesApplied += 1;
+    } else {
+        startupPerfState.tickEmptyDeltaFramesSkipped += 1;
+    }
+
+    if (!startupPerfState.t4Seen && shouldRender) {
+        startupPerfState.t4Seen = true;
+        const rendererModeInput = document.querySelector('input[name="rendererMode"]:checked');
+        const layoutModeInput = document.querySelector('input[name="layoutMode"]:checked');
+        markStartupCheckpoint('T4 first_interactive_render', {
+            renderer: rendererModeInput ? rendererModeInput.value : 'unknown',
+            layout: layoutModeInput ? layoutModeInput.value : 'unknown'
+        });
+    }
+
+    if (startupTickApplyQueue.pendingStable === true && !startupPerfState.t5Seen) {
+        startupPerfState.t5Seen = true;
+        markStartupCheckpoint('T5 stable_layout', {
+            alpha: Number.isFinite(startupPerfState.lastWorkerAlpha) ? Number(startupPerfState.lastWorkerAlpha.toFixed(4)) : null,
+            source: 'worker_tick',
+            tickSummary: buildStartupTickModeSummary()
+        });
+        scheduleStartupLayoutSnapshotPersist('startup-stable-worker-tick');
+    }
+
+    startupTickApplyQueue.pendingById.clear();
+    startupTickApplyQueue.pendingTickMode = 'delta';
+    startupTickApplyQueue.pendingStable = false;
+}
+
+function scheduleStartupTickApplyFlush() {
+    if (startupTickApplyQueue.frameHandle !== null) {
+        return;
+    }
+
+    if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+        startupTickApplyQueue.frameHandle = window.requestAnimationFrame(() => {
+            flushStartupTickApplyQueue();
+        });
+    } else {
+        startupTickApplyQueue.frameHandle = setTimeout(() => {
+            flushStartupTickApplyQueue();
+        }, 16);
+    }
+}
+
+function queueStartupTickForApply(workerNodes, resolvedTickMode, isStartupStable) {
+    if (resolvedTickMode === 'full') {
+        startupTickApplyQueue.pendingById.clear();
+        startupTickApplyQueue.pendingTickMode = 'full';
+    } else if (startupTickApplyQueue.pendingTickMode !== 'full') {
+        startupTickApplyQueue.pendingTickMode = 'delta';
+    }
+
+    for (let index = 0; index < workerNodes.length; index += 1) {
+        const n = workerNodes[index];
+        if (!n || n.id === undefined || n.id === null) {
+            continue;
+        }
+        startupTickApplyQueue.pendingById.set(n.id, n);
+    }
+
+    if (isStartupStable === true) {
+        startupTickApplyQueue.pendingStable = true;
+    }
+    scheduleStartupTickApplyFlush();
+}
 
 simulationWorker.onmessage = function(event) {
-    const { type, nodes: workerNodes } = event.data;
+    const {
+        type,
+        nodes: workerNodes,
+        alpha: workerAlpha,
+        isStartupStable,
+        isDelta,
+        tickMode
+    } = event.data;
     if (type === 'tick') {
+        const safeWorkerNodes = Array.isArray(workerNodes) ? workerNodes : [];
+        const resolvedTickMode = (typeof tickMode === 'string' && tickMode.length > 0)
+            ? tickMode
+            : (isDelta === true ? 'delta' : 'full');
+
+        startupPerfState.tickMessagesReceived += 1;
+        startupPerfState.tickPayloadNodesTotal += safeWorkerNodes.length;
+        startupPerfState.tickPayloadNodesMax = Math.max(startupPerfState.tickPayloadNodesMax, safeWorkerNodes.length);
+
+        if (!Object.prototype.hasOwnProperty.call(startupPerfState.tickModeSamples, resolvedTickMode)) {
+            startupPerfState.tickModeSamples[resolvedTickMode] = 0;
+        }
+        startupPerfState.tickModeSamples[resolvedTickMode] += 1;
+
+        if (!startupPerfState.t3Seen) {
+            startupPerfState.t3Seen = true;
+            markStartupCheckpoint('T3 first_tick_received', {
+                alpha: Number.isFinite(workerAlpha) ? Number(workerAlpha.toFixed(4)) : null,
+                tickMode: resolvedTickMode,
+                payloadNodes: safeWorkerNodes.length
+            });
+        }
+
+        if (Number.isFinite(workerAlpha)) {
+            startupPerfState.lastWorkerAlpha = workerAlpha;
+        }
+
         // v0.9.80: Ignore worker ticks in Focus Mode to prevent position overwrite
         // In Focus Mode, positions are managed by the main thread's highlightManager
         if (focusNode) return;
-
-        // Update positions
-        workerNodes.forEach(n => {
-            currentPositions.set(n.id, { x: n.x, y: n.y });
-            const originalNode = nodeMap.get(n.id);
-            if (originalNode) {
-                originalNode.x = n.x;
-                originalNode.y = n.y;
-            }
-        });
-        
-        ticked();
+        queueStartupTickForApply(safeWorkerNodes, resolvedTickMode, isStartupStable === true);
+    } else if (type === 'startupStable') {
+        if (!startupPerfState.t5Seen) {
+            startupPerfState.t5Seen = true;
+            markStartupCheckpoint('T5 stable_layout', {
+                alpha: Number.isFinite(workerAlpha) ? Number(workerAlpha.toFixed(4)) : null,
+                source: 'worker_signal',
+                tickSummary: buildStartupTickModeSummary()
+            });
+            scheduleStartupLayoutSnapshotPersist('startup-stable-worker-signal');
+        }
     }
 };
 
@@ -339,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];
@@ -366,6 +2151,32 @@ const workerPayloadBuildElapsedMs = ((typeof performance !== 'undefined' && type
     : Date.now()) - workerPayloadBuildStartTs;
 console.log(`[Init Perf] Worker payload prepared in ${workerPayloadBuildElapsedMs.toFixed(2)}ms (workerNodes=${workerNodes.length}, workerLinks=${workerLinks.length}).`);
 
+const workerStartupProfile = {
+    id: startupPerfProfile.id,
+    pilotEnabled: startupPerfProfile.pilotEnabled === true,
+    tickMaxFps: startupPerfProfile.tickMaxFps,
+    lowAlphaTickMaxFps: startupPerfProfile.lowAlphaTickMaxFps,
+    lowAlphaThreshold: startupPerfProfile.lowAlphaThreshold,
+    stableAlphaThreshold: startupPerfProfile.stableAlphaThreshold,
+    stableHoldTicks: startupPerfProfile.stableHoldTicks,
+    stableTimeoutMs: startupPerfProfile.stableTimeoutMs,
+    deltaEnabled: startupPerfProfile.deltaTickEnabled === true,
+    deltaEpsilonPx: startupPerfProfile.deltaEpsilonPx,
+    fullSyncEveryTicks: startupPerfProfile.deltaFullSyncEveryTicks,
+    lowAlphaDeltaEpsilonMultiplier: startupPerfProfile.deltaLowAlphaEpsilonMultiplier,
+    lowAlphaFullSyncEveryTicks: startupPerfProfile.deltaLowAlphaFullSyncEveryTicks
+};
+
+markStartupCheckpoint('T2 worker_init_sent', {
+    workerNodes: workerNodes.length,
+    workerLinks: workerLinks.length,
+    profile: workerStartupProfile.id,
+    tickMaxFps: workerStartupProfile.tickMaxFps,
+    deltaEnabled: workerStartupProfile.deltaEnabled,
+    deltaFullSyncEveryTicks: workerStartupProfile.fullSyncEveryTicks,
+    deltaLowAlphaEpsilonMultiplier: workerStartupProfile.lowAlphaDeltaEpsilonMultiplier,
+    deltaLowAlphaFullSyncEveryTicks: workerStartupProfile.lowAlphaFullSyncEveryTicks
+});
 simulationWorker.postMessage({ 
     type: 'init', 
     payload: { 
@@ -378,9 +2189,11 @@ simulationWorker.postMessage({
                 distance: 100,
                 velocityDecay: 0.2,
                 gpuRendering: (window.settingsManager ? window.settingsManager.settings.performance.gpuRendering : true)
-            }
+            },
+            startupProfile: workerStartupProfile
     } 
 });
+maybeApplyStartupWarmSnapshot('after-worker-init');
 
 // v0.9.37: Two-stage Damping Strategy handled in worker or re-implemented here?
 // Re-implementing logic via messages
@@ -400,10 +2213,23 @@ setTimeout(() => {
     // Static Mode Enforcement
     if (nodes.length > 5000 || links.length > 200000) {
          console.log("[Simulation] Large graph detected. Freezing simulation after relaxation.");
-         simulation.stop();
+        simulation.stop();
     }
 }, 2000);
 
+if (typeof document !== 'undefined' && typeof document.addEventListener === 'function') {
+    document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'hidden') {
+            scheduleStartupLayoutSnapshotPersist('visibility-hidden', 0);
+        }
+    });
+}
+if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+    window.addEventListener('beforeunload', () => {
+        scheduleStartupLayoutSnapshotPersist('beforeunload', 0);
+    });
+}
+
 // Handle Resize
 const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
@@ -465,6 +2291,68 @@ const link = g.append("g")
     .attr("class", "link")
     .attr("marker-end", "url(#arrow)");
 
+function buildStartupStage1LinkSet(allNodes, allLinks, topK) {
+    if (!Array.isArray(allLinks) || allLinks.length === 0) {
+        return null;
+    }
+    const normalizedTopK = Math.max(0, Math.floor(Number(topK) || 0));
+    if (normalizedTopK <= 0 || normalizedTopK >= allLinks.length) {
+        return null;
+    }
+
+    const topNodeCount = Math.min(Math.max(normalizedTopK, 64), Math.max(64, Math.floor(allNodes.length * 0.08)));
+    const sortedNodes = allNodes
+        .map((n) => ({
+            id: n.id,
+            score: Number.isFinite(Number(n.centrality))
+                ? Number(n.centrality)
+                : Number((n.inDegree || 0) + (n.outDegree || 0))
+        }))
+        .sort((a, b) => b.score - a.score)
+        .slice(0, topNodeCount);
+    const topNodeIds = new Set(sortedNodes.map((item) => item.id));
+
+    const selectedLinks = [];
+    for (let index = 0; index < allLinks.length && selectedLinks.length < normalizedTopK; index += 1) {
+        const edge = allLinks[index];
+        const sourceId = edge && edge.source && typeof edge.source === 'object' ? edge.source.id : edge.source;
+        const targetId = edge && edge.target && typeof edge.target === 'object' ? edge.target.id : edge.target;
+        if (topNodeIds.has(sourceId) || topNodeIds.has(targetId)) {
+            selectedLinks.push(edge);
+        }
+    }
+
+    if (selectedLinks.length < normalizedTopK) {
+        for (let index = 0; index < allLinks.length && selectedLinks.length < normalizedTopK; index += 1) {
+            const edge = allLinks[index];
+            if (!selectedLinks.includes(edge)) {
+                selectedLinks.push(edge);
+            }
+        }
+    }
+
+    return new Set(selectedLinks);
+}
+
+const startupStage1TopK = Math.max(
+    0,
+    Math.floor(
+        Number.isFinite(startupPerfProfile.edgeStage1TopK) && startupPerfProfile.edgeStage1TopK > 0
+            ? startupPerfProfile.edgeStage1TopK
+            : startupPerfProfile.edgeStartupSvgCap
+    )
+);
+const startupStage1LinkSet = buildStartupStage1LinkSet(nodes, links, startupStage1TopK);
+let startupSvgStage1LinkSelection = link;
+if (startupStage1LinkSet && startupStage1LinkSet.size > 0 && startupStage1LinkSet.size < links.length) {
+    startupSvgStage1LinkSelection = link.filter((edgeDatum) => startupStage1LinkSet.has(edgeDatum));
+    console.log('[Startup Perf] Startup SVG key-edge stage prepared.', {
+        totalLinks: links.length,
+        stage1Links: startupStage1LinkSet.size,
+        stage1TopK: startupStage1TopK
+    });
+}
+
 // Render Nodes
 const node = g.append("g")
     .attr("class", "nodes")
@@ -1225,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) {
@@ -1611,6 +3511,55 @@ function checkSimulationState() {
     }
 }
 
+function startupElapsedMs() {
+    return nowMs() - startupPerfState.bootTs;
+}
+
+function shouldBypassStartupEdgeOptimizations() {
+    if (focusNode) {
+        return true;
+    }
+
+    const highlightState = window.highlightManager ? window.highlightManager.getState() : null;
+    return Boolean(highlightState && highlightState.currentNode);
+}
+
+function isStartupEdgeDelayActive() {
+    if (startupPerfProfile.pilotEnabled !== true) {
+        return false;
+    }
+
+    if (!Number.isFinite(startupPerfProfile.edgeGeometryDelayMs) || startupPerfProfile.edgeGeometryDelayMs <= 0) {
+        return false;
+    }
+
+    if (shouldBypassStartupEdgeOptimizations()) {
+        return false;
+    }
+
+    return startupElapsedMs() < startupPerfProfile.edgeGeometryDelayMs;
+}
+
+function shouldUseStartupSvgStage1Edges() {
+    if (startupPerfProfile.pilotEnabled !== true) {
+        return false;
+    }
+
+    if (!Number.isFinite(startupPerfProfile.edgeStartupWindowMs) || startupPerfProfile.edgeStartupWindowMs <= 0) {
+        return false;
+    }
+
+    if (startupSvgStage1LinkSelection === link) {
+        return false;
+    }
+
+    if (shouldBypassStartupEdgeOptimizations()) {
+        return false;
+    }
+
+    return startupElapsedMs() < startupPerfProfile.edgeStartupWindowMs;
+}
+
 // Simulation Tick
 function ticked() {
     const renderer = document.querySelector('input[name="rendererMode"]:checked').value;
@@ -1630,17 +3579,50 @@ function ticked() {
     }
 
     if (renderer === 'svg') {
-        // SVG Update Logic
-        if (layoutMode === 'dag') {
-            link.attr("d", d => {
-                const sx = d.source.x;
-                const sy = d.source.y;
-                const tx = d.target.x;
-                const ty = d.target.y;
-                return `M${sx},${sy} C${sx},${(sy + ty) / 2} ${tx},${(sy + ty) / 2} ${tx},${ty}`;
+        const edgeDelayActive = isStartupEdgeDelayActive();
+        if (edgeDelayActive && !startupPerfState.edgeDelayLogged) {
+            startupPerfState.edgeDelayLogged = true;
+            console.log('[Startup Perf] Startup SVG edge geometry delay active.', {
+                edgeGeometryDelayMs: startupPerfProfile.edgeGeometryDelayMs
             });
-        } else {
-            link.attr("d", d => `M${d.source.x},${d.source.y}L${d.target.x},${d.target.y}`);
+        }
+
+        if (!edgeDelayActive) {
+            if (startupPerfState.edgeDelayLogged && !startupPerfState.edgeDelayReleasedLogged) {
+                startupPerfState.edgeDelayReleasedLogged = true;
+                console.log('[Startup Perf] Startup SVG edge geometry delay released.', {
+                    elapsedMs: Number(startupElapsedMs().toFixed(2))
+                });
+            }
+
+            const useStartupStage1Edges = shouldUseStartupSvgStage1Edges();
+            if (useStartupStage1Edges && !startupPerfState.edgeStage1Logged) {
+                startupPerfState.edgeStage1Logged = true;
+                console.log('[Startup Perf] Startup SVG key-edge stage active.', {
+                    edgeStartupWindowMs: startupPerfProfile.edgeStartupWindowMs,
+                    edgeStage1TopK: startupStage1TopK
+                });
+            }
+
+            if (!useStartupStage1Edges && startupPerfState.edgeStage1Logged && !startupPerfState.edgeStage1ReleasedLogged) {
+                startupPerfState.edgeStage1ReleasedLogged = true;
+                console.log('[Startup Perf] Startup SVG key-edge stage released.', {
+                    elapsedMs: Number(startupElapsedMs().toFixed(2))
+                });
+            }
+
+            const activeLinkSelection = useStartupStage1Edges ? startupSvgStage1LinkSelection : link;
+            if (layoutMode === 'dag') {
+                activeLinkSelection.attr("d", d => {
+                    const sx = d.source.x;
+                    const sy = d.source.y;
+                    const tx = d.target.x;
+                    const ty = d.target.y;
+                    return `M${sx},${sy} C${sx},${(sy + ty) / 2} ${tx},${(sy + ty) / 2} ${tx},${ty}`;
+                });
+            } else {
+                activeLinkSelection.attr("d", d => `M${d.source.x},${d.source.y}L${d.target.x},${d.target.y}`);
+            }
         }
         node.filter(d => !d.isCulled).attr("transform", d => `translate(${d.x},${d.y})`);
     } else {
@@ -2368,26 +4350,578 @@ window.highlightNode = function(id) {
         // 3. Show Popup
         showNodePopup(id);
     }
-};
+};
+
+// Helper to expose focusOnNode for external modules
+// 为外部模块公开focusOnNode
+window.focusOnNode = function(id) {
+    const d = nodes.find(n => n.id === id);
+    if (d) {
+        // Reuse double click logic or call enterFocusMode directly
+        // Clear highlight first
+        if (window.highlightManager) {
+            window.highlightManager.unhighlight({ force: true });
+        }
+        
+        // Hide popup
+        const popup = document.getElementById('node-stats-popup');
+        if (popup) popup.style.display = 'none';
+
+        // Enter Focus Mode
+        enterFocusMode(d);
+    }
+};
+
+function normalizeGraphViewText(value) {
+    return String(value || '').replace(/\s+/g, ' ').trim();
+}
+
+function normalizeGraphViewLookupKey(value) {
+    return normalizeGraphViewText(value).toLowerCase();
+}
+
+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 getGraphViewNodeLabel(node) {
+    return normalizeGraphViewText(node && (node.label || node.title || node.name || node.id));
+}
+
+function getGraphViewLinkNodeId(endpoint) {
+    if (endpoint && typeof endpoint === 'object') {
+        return normalizeGraphViewText(endpoint.id || endpoint.nodeId || endpoint.key);
+    }
+    return normalizeGraphViewText(endpoint);
+}
+
+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);
+    }
 
-// Helper to expose focusOnNode for external modules
-// 为外部模块公开focusOnNode
-window.focusOnNode = function(id) {
-    const d = nodes.find(n => n.id === id);
-    if (d) {
-        // Reuse double click logic or call enterFocusMode directly
-        // Clear highlight first
-        if (window.highlightManager) {
+    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 });
         }
-        
-        // Hide popup
         const popup = document.getElementById('node-stats-popup');
-        if (popup) popup.style.display = 'none';
-
-        // Enter Focus Mode
-        enterFocusMode(d);
-    }
+        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;
+    },
 };
 
 
@@ -2984,84 +5518,750 @@ function enterFocusMode(focusDInput) {
             links: workerLinks,
             restart: false // Set data, don't restart yet
         }
-    });
+    });
+
+    // 4. Check Freeze Layout State & Restart if needed
+    const isFrozen = document.getElementById('freeze-layout') ? document.getElementById('freeze-layout').checked : false;
+
+    if (isFrozen) {
+        simulation.stop();
+        ticked(); // Force one render to show all nodes in their current (restored) positions
+    } else {
+        simulation.alpha(1).restart();
+    }
+    scheduleGraphSemanticA11yRefresh('Focus mode exited');
+}
+
+// Expose Focus Mode functions for Tutorial and External Modules
+window.enterFocusMode = enterFocusMode;
+window.exitFocusMode = exitFocusMode;
+
+// Max Workers (Performance)
+const workersSlider = document.getElementById('set-workers-slider');
+    const workersInput = document.getElementById('set-workers-input');
+    const gpuCheckbox = document.getElementById('set-gpu');
+
+    if (workersSlider && workersInput) {
+        const updateWorkers = (val) => {
+            const num = parseInt(val);
+            if (isNaN(num) || num < 1) return;
+            workersSlider.value = num;
+            workersInput.value = num;
+            settingsManager.set('performance', 'maxWorkers', num);
+        };
+
+        workersSlider.addEventListener('input', (e) => updateWorkers(e.target.value));
+        workersInput.addEventListener('change', (e) => updateWorkers(e.target.value));
+    }
+    
+    if (gpuCheckbox) {
+        gpuCheckbox.addEventListener('change', (e) => {
+            settingsManager.set('performance', 'enableGPU', e.target.checked);
+        });
+    }
+
+    // --- 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 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');
+    
+    // Track settings page state so simulation only resumes after every settings
+    // surface is actually closed.
+    let activeSettingsPage = null;
+
+    // Controls
+    const inputs = {
+        charge: document.getElementById('set-charge'),
+        distance: document.getElementById('set-distance'),
+        collision: document.getElementById('set-collision'),
+        opacity: document.getElementById('set-opacity')
+    };
+
+    const displays = {
+        charge: document.getElementById('val-charge'),
+        distance: document.getElementById('val-distance'),
+        collision: document.getElementById('val-collision'),
+        opacity: document.getElementById('val-opacity')
+    };
+    
+    // Performance Controls
+    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');
+    const deepDebugCheckbox = document.getElementById('set-deep-debug');
+    
+    // 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(),
+        });
+    };
 
-    // 4. Check Freeze Layout State & Restart if needed
-    const isFrozen = document.getElementById('freeze-layout') ? document.getElementById('freeze-layout').checked : false;
+    const findTemplateForProvider = (providerName) => {
+        const templates = Array.isArray(notemdProviderModalState.templates) ? notemdProviderModalState.templates : [];
+        return templates.find((template) => template.providerName === providerName) || null;
+    };
 
-    if (isFrozen) {
-        simulation.stop();
-        ticked(); // Force one render to show all nodes in their current (restored) positions
-    } else {
-        simulation.alpha(1).restart();
-    }
-    scheduleGraphSemanticA11yRefresh('Focus mode exited');
-}
+    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.');
+        }
+    };
 
-// Expose Focus Mode functions for Tutorial and External Modules
-window.enterFocusMode = enterFocusMode;
-window.exitFocusMode = exitFocusMode;
+    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;
+        }
+    };
 
-// Max Workers (Performance)
-const workersSlider = document.getElementById('set-workers-slider');
-    const workersInput = document.getElementById('set-workers-input');
-    const gpuCheckbox = document.getElementById('set-gpu');
+    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();
+    };
 
-    if (workersSlider && workersInput) {
-        const updateWorkers = (val) => {
-            const num = parseInt(val);
-            if (isNaN(num) || num < 1) return;
-            workersSlider.value = num;
-            workersInput.value = num;
-            settingsManager.set('performance', 'maxWorkers', num);
-        };
+    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);
+    };
 
-        workersSlider.addEventListener('input', (e) => updateWorkers(e.target.value));
-        workersInput.addEventListener('change', (e) => updateWorkers(e.target.value));
-    }
-    
-    if (gpuCheckbox) {
-        gpuCheckbox.addEventListener('change', (e) => {
-            settingsManager.set('performance', 'enableGPU', e.target.checked);
+    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);
         });
-    }
+    };
 
-    // --- Settings Integration ---
-function initSettingsUI() {
-    const modal = document.getElementById('settings-modal');
-    const openBtn = document.getElementById('btn-open-settings');
-    const closeBtns = document.querySelectorAll('.modal-close');
-    const resetBtn = document.getElementById('btn-reset-settings');
-    
-    // v0.9.41: Track modal state to freeze simulation
-    let isSettingsModalOpen = false;
+    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();
+    };
 
-    // Controls
-    const inputs = {
-        charge: document.getElementById('set-charge'),
-        distance: document.getElementById('set-distance'),
-        collision: document.getElementById('set-collision'),
-        opacity: document.getElementById('set-opacity')
+    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 displays = {
-        charge: document.getElementById('val-charge'),
-        distance: document.getElementById('val-distance'),
-        collision: document.getElementById('val-collision'),
-        opacity: document.getElementById('val-opacity')
+    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);
+        }
     };
-    
-    // Performance Controls
-    const workersSlider = document.getElementById('set-workers-slider');
-    const workersInput = document.getElementById('set-workers-input');
-    const gpuCheckbox = document.getElementById('set-gpu');
-    const gpuRenderingCheckbox = document.getElementById('set-gpu-rendering');
-    const memorySavingCheckbox = document.getElementById('set-memory-saving');
-    const compactModeCheckbox = document.getElementById('set-compact-mode');
-    const deepDebugCheckbox = document.getElementById('set-deep-debug');
-    
-    // Reader Settings
-    const inputReadingMode = document.getElementById('set-reading-mode');
 
     // Load initial values
     const updateUIFromSettings = (settings) => {
@@ -3104,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;
             }
@@ -3166,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);
@@ -3211,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);
@@ -3251,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();
@@ -3462,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'
@@ -3808,21 +7261,25 @@ if (btnPathMode) {
             // 单窗口切换：隐藏 Tauri，显示 Godot。
             if (window.__TAURI__ && window.__TAURI__.core && typeof window.__TAURI__.core.invoke === 'function') {
                 try {
-                    // 1. Hide the Tauri window via Rust IPC.
-                    await window.__TAURI__.core.invoke('toggle_pathmode_window', { showGodot: true });
-                    // 2. Send setWindowVisible to Godot via PathBridge WebSocket.
+                    let bridgeVisibilityReady = true;
                     if (
                         multiWindowOptions.singleWindowMode &&
                         window.pathApp &&
-                        window.pathApp.ws &&
-                        window.pathApp.ws.readyState === WebSocket.OPEN
+                        typeof window.pathApp.requestBridgeWindowVisibility === 'function'
                     ) {
-                        window.pathApp.ws.send(JSON.stringify({
-                            type: 'setWindowVisible',
-                            payload: { visible: true }
-                        }));
+                        bridgeVisibilityReady = await window.pathApp.requestBridgeWindowVisibility(true, {
+                            waitMs: 2500,
+                            reason: 'enter-pathmode'
+                        });
+                    }
+
+                    if (multiWindowOptions.singleWindowMode && !bridgeVisibilityReady) {
+                        console.warn('[Path Mode] Bridge window visibility message was not delivered in time; skip hiding Tauri to avoid black-screen switch.');
+                    } else {
+                        // Hide the Tauri window via Rust IPC only after window-visibility intent is delivered.
+                        await window.__TAURI__.core.invoke('toggle_pathmode_window', { showGodot: true });
+                        console.log('[Path Mode] Single-window toggle: Tauri hidden, Godot shown.');
                     }
-                    console.log('[Path Mode] Single-window toggle: Tauri hidden, Godot shown.');
                 } catch (err) {
                     console.warn('[Path Mode] toggle_pathmode_window failed:', err);
                 }
@@ -3832,4 +7289,3 @@ if (btnPathMode) {
         }
     });
 }
-