noteconnection 1.7.0 → 1.8.0

package/dist/src/frontend/path_app.js

@@ -1,8 +1,25 @@
 /**
  * Path Mode Application Controller
  * Handles interaction, rendering, and worker communication.
+ *
+ * Phase 4 P5: Canonical utility implementations now live in
+ * path_mermaid_utils.mjs and path_state.mjs, exposed via
+ * window.pathModules (loaded by path_modules_bridge.js).
+ * The _methodName functions below delegate to window.pathModules
+ * when available, falling back to inline implementations.
  */
 
+(function () {
+    'use strict';
+    var _pm = window.pathModules;
+    if (_pm && _pm.utils) {
+        // Pre-bind canonical implementations before pathApp definition.
+        // These will be used by the methods defined below.
+        window._pathUtils = _pm.utils;
+        window._pathState = _pm.state;
+    }
+})();
+
 window.pathApp = {
     canvas: null,
     ctx: null,
@@ -39,6 +56,29 @@ window.pathApp = {
     pendingWindowVisibility: null,
     semanticA11yLastSummaryKey: '',
     semanticA11yLastAnnouncementAt: 0,
+    semanticA11yDeferredRefreshTimer: null,
+    learningWorkbench: {
+        userId: 'path_user_default',
+        loading: false,
+        lastError: '',
+        lastUpdatedAt: '',
+        sessionPlan: null,
+        qualitySnapshot: null,
+        qualityGateEvaluation: null,
+        qualityBaselineSnapshot: null,
+        misconceptions: null,
+        runtimeState: null,
+        tutorFeedback: null,
+        sessionExecution: null,
+        sessionHistory: null,
+        sessionHistoryQuery: {
+            limit: 8,
+            offset: 0,
+            executionKind: 'all',
+            fromDate: '',
+            toDate: '',
+        },
+    },
     
     // Animation State
     animationId: null,
@@ -323,6 +363,31 @@ window.pathApp = {
         return true;
     },
 
+    _isDetachedPreviewWithoutRuntimeBootstrap: function() {
+        if (typeof window === 'undefined' || window.__TAURI__) {
+            return false;
+        }
+        const hasDetachedPreviewScript = Array.from(document.scripts || []).some((script) =>
+            /__tauri_cli/.test(String(script && (script.text || script.textContent) || ''))
+        );
+        if (!hasDetachedPreviewScript) {
+            return false;
+        }
+        if (!window.NoteConnectionRuntime || typeof window.NoteConnectionRuntime.getBaseUrl !== 'function') {
+            return true;
+        }
+        const currentOrigin = String((window.location && window.location.origin) || '').trim().replace(/\/+$/, '');
+        const baseUrl = String(window.NoteConnectionRuntime.getBaseUrl() || '').trim();
+        if (!currentOrigin || !baseUrl) {
+            return true;
+        }
+        try {
+            return currentOrigin !== new URL(baseUrl).origin;
+        } catch (_error) {
+            return true;
+        }
+    },
+
     _getBridgeWsUrl: function() {
         if (typeof window !== 'undefined' && window.NoteConnectionRuntime && typeof window.NoteConnectionRuntime.getBridgeWsUrl === 'function') {
             return window.NoteConnectionRuntime.getBridgeWsUrl('frontend');
@@ -598,6 +663,313 @@ window.pathApp = {
         };
     },
 
+    _getReaderLikeMermaidConfig: function(theme = 'dark') {
+        return {
+            startOnLoad: false,
+            theme,
+            securityLevel: 'loose',
+            htmlLabels: true,
+        };
+    },
+
+    _getBridgeTextMeasureContext: function() {
+        if (!this._bridgeTextMeasureCanvas) {
+            this._bridgeTextMeasureCanvas = document.createElement('canvas');
+        }
+        if (!this._bridgeTextMeasureContext) {
+            this._bridgeTextMeasureContext = this._bridgeTextMeasureCanvas.getContext('2d');
+        }
+        return this._bridgeTextMeasureContext;
+    },
+
+    _measureBridgeCanvasTextWidth: function(text, fontDescriptor) {
+        const context = this._getBridgeTextMeasureContext();
+        if (!context) {
+            return this._estimateBridgeTextLineWidth(text, fontDescriptor.fontSize || 16);
+        }
+        context.font = [
+            fontDescriptor.fontStyle || 'normal',
+            fontDescriptor.fontWeight || '400',
+            `${fontDescriptor.fontSize || 16}px`,
+            fontDescriptor.fontFamily || '"trebuchet ms", verdana, arial, sans-serif',
+        ].join(' ');
+        return context.measureText(String(text || '')).width;
+    },
+
+    _extractBridgeForeignObjectSourceLines: function(foreignObject) {
+        const htmlRoot = foreignObject && (
+            foreignObject.querySelector('div, span, p')
+            || foreignObject.firstElementChild
+            || foreignObject
+        );
+        if (!htmlRoot) {
+            return { lines: [], fromRenderedLayout: false };
+        }
+
+        const collectNormalizedLines = (value) => String(value || '')
+            .split(/\r?\n/)
+            .map((line) => this._normalizeBridgeInlineText(line))
+            .filter(Boolean);
+
+        // Prefer the browser's actual rendered line layout so the bridge mirrors
+        // the reader's foreignObject wrapping instead of guessing it again.
+        const renderedText = typeof htmlRoot.innerText === 'string' ? htmlRoot.innerText : '';
+        const renderedLines = collectNormalizedLines(renderedText);
+        if (renderedLines.length > 0) {
+            return {
+                lines: renderedLines,
+                fromRenderedLayout: true,
+            };
+        }
+
+        const paragraphs = Array.from(htmlRoot.querySelectorAll('p'));
+        const htmlSegments = paragraphs.length > 0
+            ? paragraphs.map((paragraph) => String(paragraph.innerHTML || ''))
+            : [String(htmlRoot.innerHTML || htmlRoot.textContent || '')];
+        const scratch = document.createElement('div');
+        const lines = [];
+        htmlSegments.forEach((segment) => {
+            scratch.innerHTML = String(segment || '').replace(/<br\s*\/?>/gi, '\n');
+            collectNormalizedLines(scratch.innerText || scratch.textContent || '')
+                .forEach((line) => lines.push(line));
+        });
+        return {
+            lines,
+            fromRenderedLayout: false,
+        };
+    },
+
+    _wrapBridgeForeignObjectLines: function(lines, fontDescriptor, maxWidth, whiteSpaceMode) {
+        const safeLines = Array.isArray(lines) ? lines.filter((line) => String(line || '').trim()) : [];
+        if (safeLines.length === 0) {
+            return [];
+        }
+        if (String(whiteSpaceMode || '').toLowerCase() === 'nowrap') {
+            return safeLines;
+        }
+
+        const wrapped = [];
+        const hardMaxLines = 24;
+        const measure = (text) => this._measureBridgeCanvasTextWidth(text, fontDescriptor);
+
+        safeLines.forEach((line) => {
+            const normalized = this._normalizeBridgeInlineText(line);
+            if (!normalized) {
+                return;
+            }
+            if (measure(normalized) <= maxWidth) {
+                wrapped.push(normalized);
+                return;
+            }
+
+            const tokens = /\s/.test(normalized)
+                ? normalized.split(/\s+/).filter(Boolean)
+                : Array.from(normalized);
+            let current = '';
+            const pushCurrent = () => {
+                if (current) {
+                    wrapped.push(current);
+                    current = '';
+                }
+            };
+
+            for (const token of tokens) {
+                const candidate = !current
+                    ? token
+                    : (/\s/.test(normalized) ? `${current} ${token}` : `${current}${token}`);
+                if (!current || measure(candidate) <= maxWidth) {
+                    current = candidate;
+                    continue;
+                }
+                pushCurrent();
+                if (measure(token) <= maxWidth) {
+                    current = token;
+                    continue;
+                }
+                let fragment = '';
+                for (const char of Array.from(token)) {
+                    const fragmentCandidate = fragment + char;
+                    if (!fragment || measure(fragmentCandidate) <= maxWidth) {
+                        fragment = fragmentCandidate;
+                        continue;
+                    }
+                    wrapped.push(fragment);
+                    fragment = char;
+                    if (wrapped.length >= hardMaxLines) {
+                        break;
+                    }
+                }
+                if (fragment && wrapped.length < hardMaxLines) {
+                    current = fragment;
+                }
+                if (wrapped.length >= hardMaxLines) {
+                    break;
+                }
+            }
+            pushCurrent();
+        });
+
+        return wrapped.slice(0, hardMaxLines);
+    },
+
+    _convertBridgeForeignObjectToSvgText: function(svgElement, foreignObject) {
+        if (!foreignObject || !foreignObject.parentNode) {
+            return;
+        }
+
+        const extracted = this._extractBridgeForeignObjectSourceLines(foreignObject);
+        if (!extracted || extracted.lines.length === 0) {
+            foreignObject.remove();
+            return;
+        }
+
+        const styleNode = foreignObject.querySelector('.nodeLabel, .edgeLabel, span, div, p') || foreignObject.firstElementChild || foreignObject;
+        const computedStyle = window.getComputedStyle(styleNode);
+        const fontSize = Number.parseFloat(computedStyle.fontSize || '') || 16;
+        const fontFamily = computedStyle.fontFamily || '"trebuchet ms", verdana, arial, sans-serif';
+        const fontWeight = computedStyle.fontWeight || '400';
+        const fontStyle = computedStyle.fontStyle || 'normal';
+        const lineHeight = Number.parseFloat(computedStyle.lineHeight || '') || (fontSize * 1.5);
+        const textAlign = String(computedStyle.textAlign || '').trim().toLowerCase();
+        const whiteSpace = String(computedStyle.whiteSpace || '').trim().toLowerCase();
+        const fill = computedStyle.color || '#ccc';
+
+        const x = this._parseBridgeNumericAttribute(foreignObject, 'x', 0);
+        const y = this._parseBridgeNumericAttribute(foreignObject, 'y', 0);
+        const width = this._parseBridgeNumericAttribute(foreignObject, 'width', 0);
+        const height = this._parseBridgeNumericAttribute(foreignObject, 'height', 0);
+        const horizontalPadding = 6;
+        const verticalPadding = 4;
+        const usableWidth = Math.max(12, width - horizontalPadding * 2);
+        const fontDescriptor = { fontSize, fontFamily, fontWeight, fontStyle };
+        const wrappedLines = extracted.fromRenderedLayout
+            ? extracted.lines.slice(0, 24)
+            : this._wrapBridgeForeignObjectLines(extracted.lines, fontDescriptor, usableWidth, whiteSpace);
+        if (wrappedLines.length === 0) {
+            foreignObject.remove();
+            return;
+        }
+
+        const totalHeight = (wrappedLines.length - 1) * lineHeight + fontSize;
+        const startY = y + Math.max(verticalPadding + fontSize * 0.85, (height - totalHeight) * 0.5 + fontSize * 0.85);
+        let anchor = 'middle';
+        let textX = x + (width * 0.5);
+        if (textAlign === 'left' || textAlign === 'start') {
+            anchor = 'start';
+            textX = x + horizontalPadding;
+        } else if (textAlign === 'right' || textAlign === 'end') {
+            anchor = 'end';
+            textX = x + width - horizontalPadding;
+        }
+
+        const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        textElement.setAttribute('fill', fill);
+        textElement.setAttribute('font-size', `${fontSize}`);
+        textElement.setAttribute('font-family', fontFamily);
+        textElement.setAttribute('font-weight', fontWeight);
+        textElement.setAttribute('font-style', fontStyle);
+        textElement.setAttribute('text-anchor', anchor);
+        textElement.setAttribute('dominant-baseline', 'alphabetic');
+
+        wrappedLines.forEach((line, index) => {
+            const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+            tspan.textContent = line;
+            tspan.setAttribute('x', `${textX}`);
+            if (index === 0) {
+                tspan.setAttribute('y', `${startY}`);
+            } else {
+                tspan.setAttribute('dy', `${lineHeight}`);
+            }
+            textElement.appendChild(tspan);
+        });
+
+        foreignObject.parentNode.insertBefore(textElement, foreignObject);
+        foreignObject.remove();
+    },
+
+    _convertBridgeForeignObjectsToSvgText: function(svgElement) {
+        const foreignObjects = Array.from(svgElement.querySelectorAll('foreignObject'));
+        foreignObjects.forEach((foreignObject) => this._convertBridgeForeignObjectToSvgText(svgElement, foreignObject));
+    },
+
+    _renderParityMermaidSvg: async function(sourceText, options = {}) {
+        if (!window.mermaid) {
+            throw new Error('Mermaid runtime is unavailable in the frontend renderer.');
+        }
+
+        const source = this._normalizeBridgeMermaidDefinition(sourceText || '');
+        if (!source) {
+            throw new Error('Mermaid render request is missing source.');
+        }
+
+        const theme = String(options.theme || 'dark') === 'default' ? 'default' : 'dark';
+        window.mermaid.initialize(this._getReaderLikeMermaidConfig(theme));
+
+        const requestedWidth = Number.isFinite(Number(options.maxWidth)) && Number(options.maxWidth) > 0
+            ? Math.floor(Number(options.maxWidth))
+            : 620;
+        const requestedHeight = Number.isFinite(Number(options.maxHeight)) && Number(options.maxHeight) > 0
+            ? Math.floor(Number(options.maxHeight))
+            : 860;
+        const hostWidth = Math.max(240, requestedWidth);
+        const host = document.createElement('div');
+        host.className = 'mermaid-render-host-offscreen';
+        host.style.position = 'fixed';
+        host.style.left = '-20000px';
+        host.style.top = '0';
+        host.style.width = String(hostWidth) + 'px';
+        host.style.minWidth = String(hostWidth) + 'px';
+        host.style.height = 'auto';
+        host.style.overflow = 'visible';
+        host.style.opacity = '0';
+        host.style.pointerEvents = 'none';
+        host.style.background = 'transparent';
+        host.style.fontFamily = '"Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", sans-serif';
+        document.body.appendChild(host);
+
+        try {
+            const renderId = 'parity-mermaid-' + Date.now() + '-' + Math.random().toString(16).slice(2);
+            const result = await window.mermaid.render(renderId, source, host);
+            if (result && typeof result.svg === 'string' && this._isBridgeMermaidErrorSvgMarkup(result.svg)) {
+                throw new Error('Frontend Mermaid parity renderer returned an error SVG instead of a diagram.');
+            }
+            let svgElement = host.querySelector('svg');
+            if (!svgElement) {
+                const parser = new DOMParser();
+                const documentSvg = parser.parseFromString(result.svg, 'image/svg+xml');
+                const parsedSvg = documentSvg.querySelector('svg');
+                if (!parsedSvg) {
+                    throw new Error('Frontend Mermaid parity renderer did not produce an SVG root.');
+                }
+                host.replaceChildren(parsedSvg);
+                svgElement = host.querySelector('svg');
+            }
+            if (!svgElement) {
+                throw new Error('Frontend Mermaid parity renderer did not produce an SVG root.');
+            }
+
+            svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+            svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+            this._convertBridgeForeignObjectsToSvgText(svgElement);
+            const naturalSize = this._tightenBridgeMermaidSvgBounds(svgElement);
+            const clampedSize = this._clampBridgeMermaidSize(naturalSize.width, naturalSize.height, requestedWidth, requestedHeight);
+            svgElement.setAttribute('width', String(clampedSize.width));
+            svgElement.setAttribute('height', String(clampedSize.height));
+            svgElement.style.maxWidth = '100%';
+            svgElement.style.height = 'auto';
+            svgElement.style.background = 'transparent';
+
+            return {
+                source,
+                svg: this._serializeBridgeMermaidSvg(svgElement),
+                width: Math.max(1, Math.round(clampedSize.width)),
+                height: Math.max(1, Math.round(clampedSize.height))
+            };
+        } finally {
+            host.remove();
+        }
+    },
+
     _upsertBridgeMermaidOverrideStyle: function(svgElement) {
         const styleId = 'noteconnection-mermaid-overrides';
         let styleNode = svgElement.querySelector('#' + styleId);
@@ -725,15 +1097,40 @@ window.pathApp = {
     },
 
     _normalizeBridgeInlineText: function(text) {
+        if (window._pathUtils) return window._pathUtils.normalizeBridgeInlineText(text);
         return String(text || '').replace(/\s+/g, ' ').trim();
     },
 
+    _normalizeBridgeMermaidDefinition: function(source) {
+        if (window._pathUtils && typeof window._pathUtils.normalizeBridgeMermaidDefinition === 'function') {
+            return window._pathUtils.normalizeBridgeMermaidDefinition(source);
+        }
+        return String(source || '').trim();
+    },
+
+    _isBridgeMermaidErrorSvgMarkup: function(markup) {
+        const text = String(markup || '').toLowerCase();
+        if (!text) {
+            return false;
+        }
+        return (
+            text.includes('syntax error in text') ||
+            text.includes('lexical error on line') ||
+            text.includes('parse error on line') ||
+            text.includes('mermaid version') ||
+            text.includes('class="error-icon"') ||
+            text.includes('id="error-icon"')
+        );
+    },
+
     _parseBridgeNumericAttribute: function(element, name, fallback = 0) {
+        if (window._pathUtils) return window._pathUtils.parseBridgeNumericAttribute(element, name, fallback);
         const numeric = Number.parseFloat(String(element?.getAttribute?.(name) || ''));
         return Number.isFinite(numeric) ? numeric : fallback;
     },
 
     _extractBridgeInlineStyleValue: function(styleValue, propertyName) {
+        if (window._pathUtils) return window._pathUtils.extractBridgeInlineStyleValue(styleValue, propertyName);
         if (!styleValue) {
             return null;
         }
@@ -743,6 +1140,7 @@ window.pathApp = {
     },
 
     _resolveBridgeTextProperty: function(element, propertyName) {
+        if (window._pathUtils) return window._pathUtils.resolveBridgeTextProperty(element, propertyName);
         let current = element;
         while (current) {
             const attributeValue = current.getAttribute && current.getAttribute(propertyName);
@@ -759,6 +1157,7 @@ window.pathApp = {
     },
 
     _parseBridgeCssLength: function(lengthValue, baseFontSize) {
+        if (window._pathUtils) return window._pathUtils.parseBridgeCssLength(lengthValue, baseFontSize);
         if (!lengthValue) {
             return 0;
         }
@@ -780,12 +1179,14 @@ window.pathApp = {
     },
 
     _resolveBridgeSvgFontSize: function(element) {
+        if (window._pathUtils) return window._pathUtils.resolveBridgeSvgFontSize(element);
         const resolvedValue = this._resolveBridgeTextProperty(element, 'font-size');
         const parsed = this._parseBridgeCssLength(resolvedValue, 16);
         return parsed > 0 ? parsed : 16;
     },
 
     _resolveBridgeSvgLineHeight: function(element, fontSize) {
+        if (window._pathUtils) return window._pathUtils.resolveBridgeSvgLineHeight(element, fontSize);
         const resolvedValue = this._resolveBridgeTextProperty(element, 'line-height');
         const parsed = this._parseBridgeCssLength(resolvedValue, fontSize);
         return parsed > 0 ? parsed : Math.max(fontSize * 1.18, fontSize + 4);
@@ -796,6 +1197,7 @@ window.pathApp = {
     },
 
     _estimateBridgeGlyphWidthUnits: function(char) {
+        if (window._pathUtils) return window._pathUtils.estimateBridgeGlyphWidthUnits(char);
         if (!char) {
             return 0;
         }
@@ -827,6 +1229,7 @@ window.pathApp = {
     },
 
     _estimateBridgeTextLineWidth: function(text, fontSize) {
+        if (window._pathUtils) return window._pathUtils.estimateBridgeTextLineWidth(text, fontSize);
         let units = 0;
         for (const char of Array.from(String(text || ''))) {
             units += this._estimateBridgeGlyphWidthUnits(char);
@@ -835,6 +1238,7 @@ window.pathApp = {
     },
 
     _splitBridgeTokenForWrap: function(token, fontSize, maxLineWidth) {
+        if (window._pathUtils) return window._pathUtils.splitBridgeTokenForWrap(token, fontSize, maxLineWidth);
         const wrapped = [];
         let segment = '';
         for (const char of Array.from(token)) {
@@ -853,6 +1257,7 @@ window.pathApp = {
     },
 
     _wrapBridgeMeasurementLine: function(line, fontSize, maxLineWidth) {
+        if (window._pathUtils) return window._pathUtils.wrapBridgeMeasurementLine(line, fontSize, maxLineWidth);
         const normalizedLine = this._normalizeBridgeInlineText(line);
         if (!normalizedLine) {
             return [];
@@ -1308,79 +1713,38 @@ window.pathApp = {
     },
 
     _renderMermaidForBridge: async function(payload) {
-        if (!window.mermaid) {
-            throw new Error('Mermaid runtime is unavailable in the frontend renderer.');
-        }
-
         const requestId = String(payload?.requestId || '').trim();
-        const source = String(payload?.source || '').trim();
-        if (!requestId || !source) {
+        if (!requestId) {
             throw new Error('Mermaid render request is missing a request id or source.');
         }
 
         const includeStages = payload?.includeStages === true;
         const includeSvg = includeStages || payload?.includeSvg === true;
         const stageSnapshots = [];
-        const theme = String(payload?.theme || 'dark') === 'default' ? 'default' : 'dark';
-        window.mermaid.initialize(this._getBridgeMermaidConfig(theme));
-
-        const requestedWidth = Number.isFinite(Number(payload?.maxWidth)) && Number(payload.maxWidth) > 0 ? Math.floor(Number(payload.maxWidth)) : 1600;
-        const hostWidth = Math.max(480, requestedWidth);
-        const host = document.createElement('div');
-        host.style.position = 'fixed';
-        host.style.left = '-20000px';
-        host.style.top = '0';
-        host.style.width = String(hostWidth) + 'px';
-        host.style.minWidth = String(hostWidth) + 'px';
-        host.style.height = 'auto';
-        host.style.overflow = 'visible';
-        host.style.opacity = '0';
-        host.style.pointerEvents = 'none';
-        host.style.background = 'transparent';
-        host.style.fontFamily = '"Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", sans-serif';
-        document.body.appendChild(host);
 
         let objectUrl = null;
         try {
-            const renderId = 'bridge-mermaid-' + Date.now() + '-' + Math.random().toString(16).slice(2);
-            const result = await window.mermaid.render(renderId, source, host);
-            let svgElement = host.querySelector('svg');
-            if (!svgElement) {
-                const parser = new DOMParser();
-                const documentSvg = parser.parseFromString(result.svg, 'image/svg+xml');
-                const parsedSvg = documentSvg.querySelector('svg');
-                if (!parsedSvg) {
-                    throw new Error('Frontend Mermaid renderer did not produce an SVG root.');
-                }
-                host.replaceChildren(parsedSvg);
-                svgElement = host.querySelector('svg');
-            }
+            const parity = await this._renderParityMermaidSvg(payload?.source || '', {
+                theme: payload?.theme || 'dark',
+                maxWidth: payload?.maxWidth,
+                maxHeight: payload?.maxHeight
+            });
+            const parser = new DOMParser();
+            const documentSvg = parser.parseFromString(parity.svg, 'image/svg+xml');
+            const svgElement = documentSvg.querySelector('svg');
             if (!svgElement) {
-                throw new Error('Frontend Mermaid renderer did not produce an SVG root.');
+                throw new Error('Frontend Mermaid parity renderer did not produce an SVG root.');
             }
-
-            svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-            svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
             if (includeStages) {
                 stageSnapshots.push(this._captureBridgeMermaidStage('raw', svgElement));
-            }
-
-            this._normalizeBridgeMermaidSvg(svgElement);
-            if (includeStages) {
                 stageSnapshots.push(this._captureBridgeMermaidStage('visual_normalized', svgElement));
-            }
-
-            this._fitBridgeMermaidLabelShapes(svgElement);
-            if (includeStages) {
                 stageSnapshots.push(this._captureBridgeMermaidStage('labels_fitted', svgElement));
             }
 
-            const naturalSize = this._tightenBridgeMermaidSvgBounds(svgElement);
-            const clampedSize = this._clampBridgeMermaidSize(naturalSize.width, naturalSize.height, payload?.maxWidth, payload?.maxHeight);
             const requestedRenderScale = Number.isFinite(Number(payload?.renderScale)) && Number(payload.renderScale) > 0 ? Number(payload.renderScale) : 1;
             const rasterScale = Math.min(4, Math.max(1, requestedRenderScale));
-            const rasterWidth = Math.max(1, Math.round(clampedSize.width * rasterScale));
-            const rasterHeight = Math.max(1, Math.round(clampedSize.height * rasterScale));
+            const rasterWidth = Math.max(1, Math.round(parity.width * rasterScale));
+            const rasterHeight = Math.max(1, Math.round(parity.height * rasterScale));
             svgElement.setAttribute('width', String(rasterWidth));
             svgElement.setAttribute('height', String(rasterHeight));
             svgElement.style.maxWidth = String(rasterWidth) + 'px';
@@ -1431,7 +1795,6 @@ window.pathApp = {
             if (objectUrl) {
                 URL.revokeObjectURL(objectUrl);
             }
-            host.remove();
         }
     },
 
@@ -1546,98 +1909,1520 @@ window.pathApp = {
         });
     },
 
-    _sanitizeTargetIds: function(candidateIds) {
-        if (!Array.isArray(candidateIds)) {
-            return [];
+    _sanitizeTargetIds: function(candidateIds) {
+        if (!Array.isArray(candidateIds)) {
+            return [];
+        }
+        const uniqueIds = [];
+        const seen = new Set();
+        candidateIds.forEach((id) => {
+            if (typeof id !== 'string') return;
+            const normalized = id.trim();
+            if (!normalized || seen.has(normalized)) return;
+            seen.add(normalized);
+            uniqueIds.push(normalized);
+        });
+        return uniqueIds;
+    },
+
+    _getDefaultTargetIds: function(limit = 1) {
+        const maxCount = Math.max(0, Number.isFinite(limit) ? Math.floor(limit) : 0);
+        if (maxCount <= 0) return [];
+        const result = [];
+        const seen = new Set();
+        const appendCandidate = (rawId) => {
+            if (typeof rawId !== 'string') return;
+            const normalized = rawId.trim();
+            if (!normalized || seen.has(normalized)) return;
+            seen.add(normalized);
+            result.push(normalized);
+        };
+
+        const sourceData = this._getSourceGraphData();
+        if (sourceData && Array.isArray(sourceData.nodes)) {
+            sourceData.nodes.forEach((node) => appendCandidate(node?.id));
+        }
+        if (result.length < maxCount && Array.isArray(this.nodes)) {
+            this.nodes.forEach((node) => appendCandidate(node?.id));
+        }
+
+        return result.slice(0, maxCount);
+    },
+
+    _isTauriMode: function() {
+        const hasTauriGlobal = typeof window !== 'undefined' && !!window.__TAURI__;
+        const runtimeCaps = (typeof window !== 'undefined' && window.__NC_RUNTIME_CAPS) ? window.__NC_RUNTIME_CAPS : null;
+        const hasDesktopRuntimeCaps = !!(runtimeCaps && runtimeCaps.supports_sidecar === true);
+        const userAgent = typeof navigator !== 'undefined' ? String(navigator.userAgent || '') : '';
+        return hasTauriGlobal || hasDesktopRuntimeCaps || userAgent.includes('Tauri');
+    },
+
+    _getModeValue: function() {
+        if (this._isTauriMode()) {
+            return this.runtimeConfig.mode || (this.currentTargetId ? 'diffusion' : 'domain');
+        }
+        return document.getElementById('learning-mode')?.value || 'domain';
+    },
+
+    _getStrategyValue: function() {
+        if (this._isTauriMode()) {
+            return this.runtimeConfig.strategy || 'foundational';
+        }
+        return document.getElementById('strategy')?.value || 'foundational';
+    },
+
+    _getLayoutValue: function() {
+        if (this._isTauriMode()) {
+            // Layout is backend-defaulted to Track(Focus) in Tauri flow.
+            return 'orbital';
+        }
+        return document.getElementById('layout-style')?.value || 'orbital';
+    },
+
+    _getRetainHistoryEnabled: function() {
+        if (this._isTauriMode()) {
+            return this.runtimeConfig.retainHistory !== false;
+        }
+        return document.getElementById('set-retain-history')?.checked ?? true;
+    },
+
+    _toggleHistorySidebar: function() {
+        const sidebar = document.getElementById('learning-history-sidebar');
+        if (!sidebar) return;
+        sidebar.style.zIndex = '3000';
+        if (sidebar.style.display === 'none' || sidebar.style.display === '') {
+            sidebar.style.display = 'flex';
+            sidebar.offsetHeight;
+            setTimeout(() => {
+                sidebar.style.transform = 'translateX(0)';
+            }, 10);
+        } else {
+            sidebar.style.transform = 'translateX(100%)';
+            setTimeout(() => {
+                sidebar.style.display = 'none';
+            }, 300);
+        }
+    },
+
+    _normalizeLearningWorkbenchUserId: function(rawValue) {
+        const candidate = String(rawValue || '')
+            .trim()
+            .toLowerCase()
+            .replace(/[^\p{L}\p{N}_-]+/gu, '_')
+            .replace(/_+/g, '_');
+        if (!candidate) {
+            return 'path_user_default';
+        }
+        return candidate.slice(0, 64);
+    },
+
+    _getLearningQualityBaselineStorageKey: function(userId) {
+        const normalizedUserId = this._normalizeLearningWorkbenchUserId(userId);
+        return `nc_learning_quality_baseline::${normalizedUserId}`;
+    },
+
+    _normalizeLearningQualitySnapshotShape: function(snapshot) {
+        if (!snapshot || typeof snapshot !== 'object') {
+            return null;
+        }
+        const requiredKeys = [
+            'retestPassRatePct',
+            'misconceptionRecurrenceRatePct',
+            'evidenceBackedSuggestionRatioPct',
+            'averagePathMasteryGainPct',
+            'randomPathMasteryGainPct',
+        ];
+        const hasRequiredKeys = requiredKeys.every((key) => Number.isFinite(Number(snapshot[key])));
+        if (!hasRequiredKeys) {
+            return null;
+        }
+        const clamp = (value, minValue, maxValue, digits = 4) => {
+            const numericValue = Number(value || 0);
+            const bounded = Math.min(maxValue, Math.max(minValue, numericValue));
+            return Number(bounded.toFixed(digits));
+        };
+        return {
+            retestPassRatePct: clamp(snapshot.retestPassRatePct, 0, 100),
+            misconceptionRecurrenceRatePct: clamp(snapshot.misconceptionRecurrenceRatePct, 0, 100),
+            evidenceBackedSuggestionRatioPct: clamp(snapshot.evidenceBackedSuggestionRatioPct, 0, 100),
+            averagePathMasteryGainPct: clamp(snapshot.averagePathMasteryGainPct, 0, 100),
+            randomPathMasteryGainPct: clamp(snapshot.randomPathMasteryGainPct, 0, 100),
+            historyWindowDays: Math.max(1, Math.min(180, Math.floor(Number(snapshot.historyWindowDays || 14)))),
+            historyWindowRecords: Math.max(0, Math.floor(Number(snapshot.historyWindowRecords || 0))),
+            historyWindowAverageMasteryDelta: clamp(snapshot.historyWindowAverageMasteryDelta, -1, 1, 6),
+            historyWindowRetestPositiveDeltaRatePct: clamp(snapshot.historyWindowRetestPositiveDeltaRatePct, 0, 100),
+            queryP95Ms: clamp(snapshot.queryP95Ms, 0, 60000),
+        };
+    },
+
+    _loadLearningQualityBaseline: function(userId) {
+        if (typeof localStorage === 'undefined') {
+            return null;
+        }
+        try {
+            const storageKey = this._getLearningQualityBaselineStorageKey(userId);
+            const raw = localStorage.getItem(storageKey);
+            if (!raw) {
+                return null;
+            }
+            const parsed = JSON.parse(raw);
+            if (!parsed || typeof parsed !== 'object') {
+                return null;
+            }
+            return this._normalizeLearningQualitySnapshotShape(parsed.snapshot || null);
+        } catch (error) {
+            console.warn('[PathApp] Failed to load quality baseline:', error);
+            return null;
+        }
+    },
+
+    _fetchLearningQualityBaselineFromServer: async function(userId) {
+        const normalizedUserId = this._normalizeLearningWorkbenchUserId(userId);
+        try {
+            const result = await this._requestLearningApiGet('/api/knowledge/quality/baseline', {
+                userId: normalizedUserId,
+            });
+            if (!result || result.found !== true) {
+                return null;
+            }
+            return this._normalizeLearningQualitySnapshotShape(result.snapshot || null);
+        } catch (error) {
+            console.warn('[PathApp] Failed to fetch quality baseline from server:', error);
+            return null;
+        }
+    },
+
+    _saveLearningQualityBaseline: function(userId, snapshot) {
+        if (typeof localStorage === 'undefined') {
+            return false;
+        }
+        const normalizedSnapshot = this._normalizeLearningQualitySnapshotShape(snapshot);
+        if (!normalizedSnapshot) {
+            return false;
+        }
+        try {
+            const storageKey = this._getLearningQualityBaselineStorageKey(userId);
+            localStorage.setItem(storageKey, JSON.stringify({
+                userId: this._normalizeLearningWorkbenchUserId(userId),
+                storedAt: new Date().toISOString(),
+                snapshot: normalizedSnapshot,
+            }));
+            return true;
+        } catch (error) {
+            console.warn('[PathApp] Failed to save quality baseline:', error);
+            return false;
+        }
+    },
+
+    _saveLearningQualityBaselineToServer: async function(userId, snapshot) {
+        const normalizedUserId = this._normalizeLearningWorkbenchUserId(userId);
+        const normalizedSnapshot = this._normalizeLearningQualitySnapshotShape(snapshot);
+        if (!normalizedSnapshot) {
+            return false;
+        }
+        try {
+            const result = await this._requestLearningApi('/api/knowledge/quality/baseline', {
+                userId: normalizedUserId,
+                snapshot: normalizedSnapshot,
+            });
+            return Boolean(result && result.found === true);
+        } catch (error) {
+            console.warn('[PathApp] Failed to persist quality baseline to server:', error);
+            return false;
+        }
+    },
+
+    _syncLearningQualityBaselineFromServer: async function(userId) {
+        const normalizedUserId = this._normalizeLearningWorkbenchUserId(userId);
+        const serverSnapshot = await this._fetchLearningQualityBaselineFromServer(normalizedUserId);
+        if (!serverSnapshot) {
+            this.learningWorkbench.qualityBaselineSnapshot = this._loadLearningQualityBaseline(normalizedUserId);
+            return this.learningWorkbench.qualityBaselineSnapshot;
+        }
+        this.learningWorkbench.qualityBaselineSnapshot = serverSnapshot;
+        this._saveLearningQualityBaseline(normalizedUserId, serverSnapshot);
+        return serverSnapshot;
+    },
+
+    evaluateLearningWorkbenchQualityGates: async function() {
+        if (this.learningWorkbench.loading) {
+            return;
+        }
+        const userId = this._normalizeLearningWorkbenchUserId(this.learningWorkbench.userId);
+        const currentSnapshot = this.learningWorkbench.qualitySnapshot?.snapshot || null;
+        const baselineSnapshot = await this._syncLearningQualityBaselineFromServer(userId);
+        if (!currentSnapshot) {
+            this._setLearningWorkbenchStatus('No current quality snapshot available. Refresh first.', true);
+            return;
+        }
+        if (!baselineSnapshot) {
+            this._setLearningWorkbenchStatus('No quality baseline found. Set baseline first.', true);
+            return;
+        }
+        this.learningWorkbench.loading = true;
+        this.learningWorkbench.qualityBaselineSnapshot = baselineSnapshot;
+        this._setLearningWorkbenchStatus('Evaluating learning quality gates...');
+        this._renderLearningWorkbenchState();
+        try {
+            let evaluation = null;
+            let usedLegacyFallback = false;
+            try {
+                const evaluationEnvelope = await this._requestLearningApi('/api/knowledge/quality/baseline/evaluate', {
+                    userId,
+                    current: currentSnapshot,
+                    sampledAt: this.learningWorkbench.qualitySnapshot?.sampledAt || undefined,
+                    historyWindowDays: this.learningWorkbench.qualitySnapshot?.snapshot?.historyWindowDays || undefined,
+                });
+                evaluation = evaluationEnvelope && typeof evaluationEnvelope === 'object'
+                    ? evaluationEnvelope.evaluation
+                    : null;
+            } catch (_baselineEvaluateError) {
+                evaluation = await this._requestLearningApi('/api/knowledge/quality/evaluate', {
+                    baseline: baselineSnapshot,
+                    current: currentSnapshot,
+                });
+                usedLegacyFallback = true;
+            }
+            this.learningWorkbench.qualityGateEvaluation = evaluation || null;
+            this._setLearningWorkbenchStatus(
+                `Quality gate evaluation finished: ${evaluation?.overallPassed === true ? 'PASS' : 'FAIL'}`
+                + `${usedLegacyFallback ? ' (legacy fallback route).' : '.'}`
+            );
+        } catch (error) {
+            const message = String(error?.message || error || 'Unknown quality gate evaluation error');
+            this.learningWorkbench.lastError = message;
+            this._setLearningWorkbenchStatus(`Quality gate evaluation failed: ${message}`, true);
+        } finally {
+            this.learningWorkbench.loading = false;
+            this._renderLearningWorkbenchState();
+        }
+    },
+
+    setLearningWorkbenchQualityBaselineFromCurrent: async function() {
+        const userId = this._normalizeLearningWorkbenchUserId(this.learningWorkbench.userId);
+        const snapshot = this.learningWorkbench.qualitySnapshot?.snapshot || null;
+        if (!snapshot) {
+            this._setLearningWorkbenchStatus('No quality snapshot available. Refresh first.', true);
+            return;
+        }
+        this.learningWorkbench.loading = true;
+        this._renderLearningWorkbenchState();
+        const persistedServer = await this._saveLearningQualityBaselineToServer(userId, snapshot);
+        const persistedLocal = this._saveLearningQualityBaseline(userId, snapshot);
+        if (!persistedServer && !persistedLocal) {
+            this.learningWorkbench.loading = false;
+            this._renderLearningWorkbenchState();
+            this._setLearningWorkbenchStatus('Failed to persist quality baseline snapshot.', true);
+            return;
+        }
+        this.learningWorkbench.qualityBaselineSnapshot = await this._syncLearningQualityBaselineFromServer(userId);
+        this.learningWorkbench.qualityGateEvaluation = null;
+        this.learningWorkbench.loading = false;
+        const storageHint = persistedServer
+            ? 'server + local cache'
+            : 'local cache';
+        this._setLearningWorkbenchStatus(`Quality baseline updated from current snapshot (${storageHint}).`);
+        this._renderLearningWorkbenchState();
+    },
+
+    _normalizeLearningHistoryExecutionKind: function(rawValue) {
+        const value = String(rawValue || 'all').trim().toLowerCase();
+        if (value === 'session' || value === 'retest' || value === 'custom') {
+            return value;
+        }
+        return 'all';
+    },
+
+    _normalizeLearningHistoryDateValue: function(rawValue) {
+        const value = String(rawValue || '').trim();
+        if (!value) {
+            return '';
+        }
+        if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+            return value;
+        }
+        const parsed = new Date(value);
+        if (Number.isNaN(parsed.getTime())) {
+            return '';
+        }
+        return parsed.toISOString().slice(0, 10);
+    },
+
+    _getLearningWorkbenchSessionHistoryQuery: function() {
+        const existing = this.learningWorkbench.sessionHistoryQuery && typeof this.learningWorkbench.sessionHistoryQuery === 'object'
+            ? this.learningWorkbench.sessionHistoryQuery
+            : {};
+        const limit = Math.max(1, Math.min(20, Math.floor(Number(existing.limit) || 8)));
+        const offset = Math.max(0, Math.floor(Number(existing.offset) || 0));
+        const executionKind = this._normalizeLearningHistoryExecutionKind(existing.executionKind);
+        const fromDate = this._normalizeLearningHistoryDateValue(existing.fromDate);
+        const toDate = this._normalizeLearningHistoryDateValue(existing.toDate);
+        const normalized = {
+            limit,
+            offset,
+            executionKind,
+            fromDate,
+            toDate,
+        };
+        this.learningWorkbench.sessionHistoryQuery = normalized;
+        return normalized;
+    },
+
+    _buildLearningWorkbenchSessionHistoryRequest: function(userId) {
+        const query = this._getLearningWorkbenchSessionHistoryQuery();
+        const fromExecutedAt = query.fromDate
+            ? `${query.fromDate}T00:00:00.000Z`
+            : undefined;
+        const toExecutedAt = query.toDate
+            ? `${query.toDate}T23:59:59.999Z`
+            : undefined;
+        return {
+            userId,
+            limit: query.limit,
+            offset: query.offset,
+            executionKinds: query.executionKind === 'all' ? undefined : [query.executionKind],
+            fromExecutedAt,
+            toExecutedAt,
+        };
+    },
+
+    _setLearningWorkbenchHistoryExecutionKind: function(rawValue, options = {}) {
+        const nextKind = this._normalizeLearningHistoryExecutionKind(rawValue);
+        const query = this._getLearningWorkbenchSessionHistoryQuery();
+        const changed = query.executionKind !== nextKind;
+        this.learningWorkbench.sessionHistoryQuery = {
+            ...query,
+            executionKind: nextKind,
+            offset: 0,
+        };
+        this._persistLearningWorkbenchPreferences();
+        if (changed && options.refresh !== false) {
+            void this.refreshLearningWorkbench({ force: false });
+            return;
+        }
+        this._renderLearningWorkbenchState();
+    },
+
+    _applyLearningWorkbenchHistoryDateRange: function(rawFromDate, rawToDate, options = {}) {
+        const fromDate = this._normalizeLearningHistoryDateValue(rawFromDate);
+        const toDate = this._normalizeLearningHistoryDateValue(rawToDate);
+        const query = this._getLearningWorkbenchSessionHistoryQuery();
+        const changed = query.fromDate !== fromDate || query.toDate !== toDate;
+        this.learningWorkbench.sessionHistoryQuery = {
+            ...query,
+            fromDate,
+            toDate,
+            offset: 0,
+        };
+        this._persistLearningWorkbenchPreferences();
+        if (changed && options.refresh !== false) {
+            void this.refreshLearningWorkbench({ force: false });
+            return;
+        }
+        this._renderLearningWorkbenchState();
+    },
+
+    _changeLearningWorkbenchHistoryPage: function(direction) {
+        const step = Math.sign(Number(direction) || 0);
+        if (step === 0) {
+            return;
+        }
+        const query = this._getLearningWorkbenchSessionHistoryQuery();
+        const page = this.learningWorkbench.sessionHistory && this.learningWorkbench.sessionHistory.page
+            ? this.learningWorkbench.sessionHistory.page
+            : null;
+        if (step > 0 && page && page.hasMore !== true) {
+            return;
+        }
+        const nextOffset = step > 0
+            ? query.offset + query.limit
+            : Math.max(0, query.offset - query.limit);
+        if (nextOffset === query.offset) {
+            return;
+        }
+        this.learningWorkbench.sessionHistoryQuery = {
+            ...query,
+            offset: nextOffset,
+        };
+        this._persistLearningWorkbenchPreferences();
+        void this.refreshLearningWorkbench({ force: false });
+    },
+
+    _restoreLearningWorkbenchPreferences: function() {
+        try {
+            const stored = localStorage.getItem('nc_learning_workbench_prefs');
+            if (!stored) {
+                return;
+            }
+            const parsed = JSON.parse(stored);
+            if (parsed && typeof parsed === 'object' && typeof parsed.userId === 'string') {
+                this.learningWorkbench.userId = this._normalizeLearningWorkbenchUserId(parsed.userId);
+            }
+            if (parsed && typeof parsed === 'object') {
+                const query = this._getLearningWorkbenchSessionHistoryQuery();
+                this.learningWorkbench.sessionHistoryQuery = {
+                    ...query,
+                    executionKind: this._normalizeLearningHistoryExecutionKind(parsed.historyExecutionKind),
+                    fromDate: this._normalizeLearningHistoryDateValue(parsed.historyFromDate),
+                    toDate: this._normalizeLearningHistoryDateValue(parsed.historyToDate),
+                    offset: 0,
+                };
+            }
+            this.learningWorkbench.qualityBaselineSnapshot = this._loadLearningQualityBaseline(this.learningWorkbench.userId);
+            this.learningWorkbench.qualityGateEvaluation = null;
+        } catch (error) {
+            console.warn('[PathApp] Failed to restore learning workbench prefs:', error);
+        }
+    },
+
+    _persistLearningWorkbenchPreferences: function() {
+        try {
+            const historyQuery = this._getLearningWorkbenchSessionHistoryQuery();
+            const payload = {
+                userId: this._normalizeLearningWorkbenchUserId(this.learningWorkbench.userId),
+                historyExecutionKind: historyQuery.executionKind,
+                historyFromDate: historyQuery.fromDate,
+                historyToDate: historyQuery.toDate,
+            };
+            localStorage.setItem('nc_learning_workbench_prefs', JSON.stringify(payload));
+        } catch (error) {
+            console.warn('[PathApp] Failed to persist learning workbench prefs:', error);
+        }
+    },
+
+    _toggleLearningWorkbenchSidebar: function() {
+        const sidebar = document.getElementById('learning-workbench-sidebar');
+        if (!sidebar) return;
+        sidebar.style.zIndex = '3001';
+        if (sidebar.style.display === 'none' || sidebar.style.display === '') {
+            sidebar.style.display = 'flex';
+            sidebar.offsetHeight;
+            setTimeout(() => {
+                sidebar.style.transform = 'translateX(0)';
+            }, 10);
+            void this.refreshLearningWorkbench({ force: false });
+            return;
+        }
+        this._closeLearningWorkbenchSidebar();
+    },
+
+    _closeLearningWorkbenchSidebar: function() {
+        const sidebar = document.getElementById('learning-workbench-sidebar');
+        if (!sidebar) return;
+        sidebar.style.transform = 'translateX(-100%)';
+        setTimeout(() => {
+            sidebar.style.display = 'none';
+        }, 300);
+    },
+
+    _setLearningWorkbenchStatus: function(message, isError = false) {
+        const statusEl = document.getElementById('learning-workbench-status');
+        if (!statusEl) return;
+        statusEl.textContent = String(message || '');
+        statusEl.classList.toggle('is-error', !!isError);
+        statusEl.classList.toggle('is-loading', this.learningWorkbench.loading === true);
+    },
+
+    _requestLearningApi: async function(endpoint, payload = {}) {
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload || {}),
+        });
+
+        let body = null;
+        try {
+            body = await response.json();
+        } catch (_error) {
+            body = null;
+        }
+
+        if (!response.ok) {
+            const message = body && body.error
+                ? body.error
+                : `Request failed (${response.status})`;
+            throw new Error(String(message));
+        }
+        if (!body || body.success !== true) {
+            const message = body && body.error
+                ? body.error
+                : `API ${endpoint} returned an unexpected response`;
+            throw new Error(String(message));
+        }
+        return body.result;
+    },
+
+    _requestLearningApiGet: async function(endpoint, params = {}) {
+        const query = new URLSearchParams();
+        Object.keys(params || {}).forEach((key) => {
+            const value = params[key];
+            if (value === undefined || value === null || value === '') {
+                return;
+            }
+            query.set(key, String(value));
+        });
+        const url = query.toString()
+            ? `${endpoint}?${query.toString()}`
+            : endpoint;
+        const response = await fetch(url, {
+            method: 'GET',
+        });
+
+        let body = null;
+        try {
+            body = await response.json();
+        } catch (_error) {
+            body = null;
+        }
+
+        if (!response.ok) {
+            const message = body && body.error
+                ? body.error
+                : `Request failed (${response.status})`;
+            throw new Error(String(message));
+        }
+        if (!body || body.success !== true) {
+            const message = body && body.error
+                ? body.error
+                : `API ${url} returned an unexpected response`;
+            throw new Error(String(message));
+        }
+        return body.result;
+    },
+
+    _getFocusAtomIdsForLearning: function() {
+        const ids = [];
+        if (typeof this.currentTargetId === 'string' && this.currentTargetId.trim()) {
+            ids.push(this.currentTargetId.trim());
+        }
+        if (Array.isArray(this.currentTargetIds)) {
+            this.currentTargetIds.forEach((id) => {
+                if (typeof id === 'string' && id.trim()) {
+                    ids.push(id.trim());
+                }
+            });
+        }
+        if (typeof this.centralNodeId === 'string' && this.centralNodeId.trim()) {
+            ids.push(this.centralNodeId.trim());
+        }
+        return Array.from(new Set(ids));
+    },
+
+    _getCurrentFocusNode: function() {
+        const sourceData = this._getSourceGraphData();
+        if (!sourceData || !Array.isArray(sourceData.nodes)) {
+            return null;
+        }
+        const preferredIds = this._getFocusAtomIdsForLearning();
+        for (const candidateId of preferredIds) {
+            const matched = sourceData.nodes.find((node) => node && node.id === candidateId);
+            if (matched) {
+                return matched;
+            }
+        }
+        if (typeof this.centralNodeId === 'string' && this.centralNodeId.trim()) {
+            const matched = sourceData.nodes.find((node) => node && node.id === this.centralNodeId);
+            if (matched) {
+                return matched;
+            }
+        }
+        return this.nodes && this.nodes.length > 0 ? this.nodes[0] : null;
+    },
+
+    _buildLearningDocumentFromNode: function(node) {
+        if (!node || typeof node !== 'object') {
+            return null;
+        }
+        const nodeId = typeof node.id === 'string' ? node.id.trim() : '';
+        if (!nodeId) {
+            return null;
+        }
+        const normalizedDocId = `path_${nodeId.toLowerCase().replace(/[^\p{L}\p{N}_-]+/gu, '_').slice(0, 96)}`;
+        const sourcePathRaw = node?.metadata?.filepath
+            || node?.filepath
+            || `Knowledge_Base/path_mode/${normalizedDocId}.md`;
+        const sourcePath = String(sourcePathRaw || '').replace(/\\/g, '/');
+        const title = typeof node.label === 'string' && node.label.trim()
+            ? node.label.trim()
+            : nodeId;
+        const contentRaw = typeof node.content === 'string'
+            ? node.content
+            : (typeof node.summary === 'string' ? node.summary : '');
+        const content = String(contentRaw || '').trim();
+        const finalContent = content.length > 0
+            ? `# ${title}\n\n${content}`
+            : `# ${title}\n\nNode ${nodeId} was captured from Path Mode for learning orchestration.`;
+        return {
+            documentId: normalizedDocId,
+            sourcePath,
+            language: 'en',
+            content: finalContent,
+        };
+    },
+
+    ingestFocusNodeForLearningWorkbench: async function() {
+        const focusNode = this._getCurrentFocusNode();
+        if (!focusNode) {
+            this._setLearningWorkbenchStatus('No focus node available to ingest.', true);
+            return;
+        }
+
+        const document = this._buildLearningDocumentFromNode(focusNode);
+        if (!document) {
+            this._setLearningWorkbenchStatus('Failed to build ingest document from focus node.', true);
+            return;
+        }
+
+        this.learningWorkbench.loading = true;
+        this.learningWorkbench.lastError = '';
+        this._setLearningWorkbenchStatus('Ingesting focus node into learning graph...');
+        try {
+            const result = await this._requestLearningApi('/api/knowledge/ingest', {
+                incremental: true,
+                relationRecomputeMode: 'incremental',
+                documents: [document],
+            });
+            const changedDocs = Number(result?.summary?.changedDocuments || 0);
+            this._setLearningWorkbenchStatus(`Ingest succeeded. Changed documents: ${changedDocs}.`);
+            await this.refreshLearningWorkbench({ force: true });
+        } catch (error) {
+            const message = String(error?.message || error || 'Unknown ingest error');
+            this.learningWorkbench.lastError = message;
+            this._setLearningWorkbenchStatus(`Ingest failed: ${message}`, true);
+        } finally {
+            this.learningWorkbench.loading = false;
+            this._renderLearningWorkbenchState();
+        }
+    },
+
+    refreshLearningWorkbench: async function(options = {}) {
+        if (this.learningWorkbench.loading) {
+            return;
+        }
+        const userId = this._normalizeLearningWorkbenchUserId(this.learningWorkbench.userId);
+        this.learningWorkbench.userId = userId;
+        this.learningWorkbench.qualityBaselineSnapshot = await this._syncLearningQualityBaselineFromServer(userId);
+        this.learningWorkbench.qualityGateEvaluation = null;
+        this._persistLearningWorkbenchPreferences();
+        this.learningWorkbench.loading = true;
+        this.learningWorkbench.lastError = '';
+        this._setLearningWorkbenchStatus('Refreshing learning workbench...');
+        this._renderLearningWorkbenchState();
+
+        const focusAtomIds = this._getFocusAtomIdsForLearning();
+        const includeDivergence = true;
+        const includeRetrain = true;
+        const sessionHistoryRequest = this._buildLearningWorkbenchSessionHistoryRequest(userId);
+        try {
+            const [sessionPlan, qualitySnapshot, misconceptions, runtimeState, sessionHistory] = await Promise.all([
+                this._requestLearningApi('/api/knowledge/session/plan', {
+                    userId,
+                    focusAtomIds,
+                    maxActions: 14,
+                    includeDivergence,
+                    includeRetrain,
+                }),
+                this._requestLearningApi('/api/knowledge/quality/snapshot', {
+                    userId,
+                }),
+                this._requestLearningApi('/api/knowledge/mastery/misconceptions', {
+                    userId,
+                    atomIds: focusAtomIds,
+                    topK: 6,
+                }),
+                fetch('/api/knowledge/state', { method: 'GET' })
+                    .then((response) => response.json())
+                    .catch(() => null),
+                this._requestLearningApi('/api/knowledge/session/history', sessionHistoryRequest),
+            ]);
+            this.learningWorkbench.sessionPlan = sessionPlan || null;
+            this.learningWorkbench.qualitySnapshot = qualitySnapshot || null;
+            this.learningWorkbench.misconceptions = misconceptions || null;
+            this.learningWorkbench.runtimeState = runtimeState && runtimeState.success === true
+                ? runtimeState
+                : null;
+            this.learningWorkbench.sessionHistory = sessionHistory || null;
+            this.learningWorkbench.lastUpdatedAt = new Date().toISOString();
+            const currentSnapshot = qualitySnapshot && qualitySnapshot.snapshot
+                ? this._normalizeLearningQualitySnapshotShape(qualitySnapshot.snapshot)
+                : null;
+            if (currentSnapshot && this.learningWorkbench.qualityBaselineSnapshot) {
+                try {
+                    const qualityGateEvaluation = await this._requestLearningApi('/api/knowledge/quality/evaluate', {
+                        baseline: this.learningWorkbench.qualityBaselineSnapshot,
+                        current: currentSnapshot,
+                    });
+                    this.learningWorkbench.qualityGateEvaluation = qualityGateEvaluation || null;
+                } catch (qualityGateError) {
+                    console.warn('[PathApp] Quality gate evaluation during refresh failed:', qualityGateError);
+                    this.learningWorkbench.qualityGateEvaluation = null;
+                }
+            }
+
+            const actionCount = Number(sessionPlan?.summary?.totalActions || sessionPlan?.actions?.length || 0);
+            this._setLearningWorkbenchStatus(`Learning workbench updated. Planned actions: ${actionCount}.`);
+        } catch (error) {
+            const message = String(error?.message || error || 'Unknown refresh error');
+            this.learningWorkbench.lastError = message;
+            this._setLearningWorkbenchStatus(`Refresh failed: ${message}`, true);
+        } finally {
+            this.learningWorkbench.loading = false;
+            this._renderLearningWorkbenchState();
+        }
+    },
+
+    _escapeHtml: function(value) {
+        return String(value || '')
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    },
+
+    _collectOptionalAnswerForLearningAction: function(actionKind, atomId) {
+        const normalized = String(actionKind || '').trim().toLowerCase();
+        if (!['quiz', 'review', 'explain'].includes(normalized)) {
+            return '';
+        }
+        if (typeof window === 'undefined' || typeof window.prompt !== 'function') {
+            return '';
+        }
+        const promptMessage = `Optional: enter learner answer for ${actionKind} on ${atomId}.\nLeave empty to skip mastery diagnostics.`;
+        const answer = window.prompt(promptMessage, '');
+        if (typeof answer !== 'string') {
+            return '';
+        }
+        return answer.trim();
+    },
+
+    _collectOptionalAnswersForSessionActions: function(actions = []) {
+        if (typeof window === 'undefined' || typeof window.prompt !== 'function') {
+            return {};
+        }
+        if (!Array.isArray(actions) || actions.length === 0) {
+            return {};
+        }
+        const confirmation = window.prompt(
+            'Provide learner answers for this session run? Type "yes" to enable, leave empty to skip.',
+            ''
+        );
+        if (!confirmation || !/^y(es)?$/i.test(String(confirmation).trim())) {
+            return {};
+        }
+        const answerMap = {};
+        const promptableActions = actions
+            .filter((action) => ['quiz', 'review', 'explain'].includes(String(action?.kind || '').trim().toLowerCase()))
+            .slice(0, 6);
+        promptableActions.forEach((action) => {
+            const actionId = String(action?.id || '').trim();
+            if (!actionId) {
+                return;
+            }
+            const atomId = String(action?.atomId || 'unknown_atom').trim();
+            const actionKind = String(action?.kind || 'action').trim();
+            const promptText = `Optional answer for ${actionKind} on ${atomId} (leave empty to skip):`;
+            const answer = window.prompt(promptText, '');
+            if (typeof answer !== 'string') {
+                return;
+            }
+            const normalized = answer.trim();
+            if (normalized.length > 0) {
+                answerMap[actionId] = normalized;
+            }
+        });
+        return answerMap;
+    },
+
+    _appendLearningWorkbenchSessionRecord: function(record) {
+        if (!record || typeof record !== 'object') {
+            return;
         }
-        const uniqueIds = [];
-        const seen = new Set();
-        candidateIds.forEach((id) => {
-            if (typeof id !== 'string') return;
-            const normalized = id.trim();
-            if (!normalized || seen.has(normalized)) return;
-            seen.add(normalized);
-            uniqueIds.push(normalized);
+        const recordId = String(record.id || '').trim();
+        if (!recordId) {
+            return;
+        }
+        const historyQuery = this._getLearningWorkbenchSessionHistoryQuery();
+        if (historyQuery.offset > 0) {
+            return;
+        }
+        const normalizedRecordKind = this._normalizeLearningHistoryExecutionKind(record.executionKind);
+        const recordExecutionKind = normalizedRecordKind === 'all' ? 'session' : normalizedRecordKind;
+        if (historyQuery.executionKind !== 'all' && historyQuery.executionKind !== recordExecutionKind) {
+            return;
+        }
+        const base = this.learningWorkbench.sessionHistory && typeof this.learningWorkbench.sessionHistory === 'object'
+            ? this.learningWorkbench.sessionHistory
+            : {
+                userId: this.learningWorkbench.userId,
+                generatedAt: new Date().toISOString(),
+                records: [],
+                page: {
+                    limit: historyQuery.limit,
+                    offset: 0,
+                    returnedRecords: 0,
+                    totalFilteredRecords: 0,
+                    hasMore: false,
+                    nextOffset: null,
+                },
+                summary: {
+                    totalRecords: 0,
+                    totalExecutedActions: 0,
+                    totalUpdatedMasteryCount: 0,
+                    averageMasteryDelta: 0,
+                    averageTutorConfidence: 0,
+                    executionKindBreakdown: [],
+                },
+            };
+        const existingRecords = Array.isArray(base.records) ? base.records.slice() : [];
+        const deduped = [record, ...existingRecords.filter((item) => String(item?.id || '').trim() !== recordId)]
+            .slice(0, historyQuery.limit);
+        const executionKindBreakdown = ['session', 'retest', 'custom'].map((executionKind) => {
+            const kindRecords = deduped.filter((item) => {
+                const normalizedKind = this._normalizeLearningHistoryExecutionKind(item?.executionKind);
+                const resolvedKind = normalizedKind === 'all' ? 'session' : normalizedKind;
+                return resolvedKind === executionKind;
+            });
+            const totalExecutedActions = kindRecords.reduce((sum, item) => sum + Number(item?.executedCount || 0), 0);
+            const averageMasteryDelta = kindRecords.length > 0
+                ? kindRecords.reduce((sum, item) => sum + Number(item?.averageMasteryDelta || 0), 0) / kindRecords.length
+                : 0;
+            return {
+                executionKind,
+                recordCount: kindRecords.length,
+                totalExecutedActions,
+                averageMasteryDelta,
+            };
         });
-        return uniqueIds;
+        this.learningWorkbench.sessionHistory = {
+            ...base,
+            generatedAt: new Date().toISOString(),
+            records: deduped,
+            page: {
+                limit: historyQuery.limit,
+                offset: 0,
+                returnedRecords: deduped.length,
+                totalFilteredRecords: deduped.length,
+                hasMore: false,
+                nextOffset: null,
+            },
+            summary: {
+                ...(base.summary || {}),
+                totalRecords: deduped.length,
+                totalExecutedActions: deduped.reduce((sum, item) => sum + Number(item?.executedCount || 0), 0),
+                totalUpdatedMasteryCount: deduped.reduce((sum, item) => sum + Number(item?.updatedMasteryCount || 0), 0),
+                averageMasteryDelta: deduped.length > 0
+                    ? deduped.reduce((sum, item) => sum + Number(item?.averageMasteryDelta || 0), 0) / deduped.length
+                    : 0,
+                averageTutorConfidence: deduped.length > 0
+                    ? deduped.reduce((sum, item) => sum + Number(item?.averageTutorConfidence || 0), 0) / deduped.length
+                    : 0,
+                executionKindBreakdown,
+            },
+        };
     },
 
-    _getDefaultTargetIds: function(limit = 1) {
-        const maxCount = Math.max(0, Number.isFinite(limit) ? Math.floor(limit) : 0);
-        if (maxCount <= 0) return [];
-        const result = [];
-        const seen = new Set();
-        const appendCandidate = (rawId) => {
-            if (typeof rawId !== 'string') return;
-            const normalized = rawId.trim();
-            if (!normalized || seen.has(normalized)) return;
-            seen.add(normalized);
-            result.push(normalized);
-        };
+    executeLearningWorkbenchAction: async function(params = {}) {
+        const userId = this._normalizeLearningWorkbenchUserId(this.learningWorkbench.userId);
+        const atomId = String(params.atomId || '').trim();
+        const actionKind = String(params.actionKind || '').trim();
+        const source = String(params.source || '').trim();
+        if (!atomId || !actionKind) {
+            this._setLearningWorkbenchStatus('Invalid action payload for tutor execution.', true);
+            return;
+        }
+        const answer = this._collectOptionalAnswerForLearningAction(actionKind, atomId);
+        const shouldAnalyzeAnswer = answer.length > 0;
 
-        const sourceData = this._getSourceGraphData();
-        if (sourceData && Array.isArray(sourceData.nodes)) {
-            sourceData.nodes.forEach((node) => appendCandidate(node?.id));
+        this.learningWorkbench.loading = true;
+        this._setLearningWorkbenchStatus(`Running session action (${actionKind}) for ${atomId}...`);
+        this._renderLearningWorkbenchState();
+        try {
+            const result = await this._requestLearningApi('/api/knowledge/session/action', {
+                userId,
+                action: {
+                    atomId,
+                    kind: actionKind,
+                    source: source || 'session_plan',
+                    prompt: `Learning workbench action: ${actionKind} from ${source || 'session_plan'}`,
+                    answer: shouldAnalyzeAnswer ? answer : undefined,
+                },
+                autoAnalyzeAnswer: shouldAnalyzeAnswer,
+                autoUpdateMasteryFromAnswer: shouldAnalyzeAnswer,
+                persistMemory: true,
+                memoryLayer: 'session',
+            });
+            const tutorResult = result && result.tutor ? result.tutor : null;
+            this.learningWorkbench.tutorFeedback = {
+                atomId,
+                actionKind,
+                source,
+                result,
+                tutorResult,
+                receivedAt: new Date().toISOString(),
+            };
+            const tutorActionKind = result?.trace?.tutorActionKind || 'unknown';
+            const persistedMemory = result?.trace?.persistedMemory === true;
+            const updatedMastery = result?.trace?.updatedMastery === true;
+            const effectiveOutcome = result?.trace?.effectiveOutcome || 'n/a';
+            const masterySource = result?.trace?.masterySource || 'none';
+            this._setLearningWorkbenchStatus(
+                `Session action finished (${tutorActionKind}); memory ${persistedMemory ? 'persisted' : 'skipped'}; mastery ${updatedMastery ? `updated (${effectiveOutcome}, ${masterySource})` : 'unchanged'}.`
+            );
+        } catch (error) {
+            const message = String(error?.message || error || 'Unknown tutor execution error');
+            this.learningWorkbench.lastError = message;
+            this._setLearningWorkbenchStatus(`Tutor action failed: ${message}`, true);
+        } finally {
+            this.learningWorkbench.loading = false;
+            this._renderLearningWorkbenchState();
         }
-        if (result.length < maxCount && Array.isArray(this.nodes)) {
-            this.nodes.forEach((node) => appendCandidate(node?.id));
+    },
+
+    runLearningWorkbenchSession: async function(options = {}) {
+        if (this.learningWorkbench.loading) {
+            return;
+        }
+        const userId = this._normalizeLearningWorkbenchUserId(this.learningWorkbench.userId);
+        const sessionPlan = this.learningWorkbench.sessionPlan;
+        if (!sessionPlan || !Array.isArray(sessionPlan.actions) || sessionPlan.actions.length === 0) {
+            this._setLearningWorkbenchStatus('No session plan actions to execute. Refresh first.', true);
+            return;
+        }
+        let actionLimit = Number(options.actionLimit);
+        if (!Number.isFinite(actionLimit) || actionLimit <= 0) {
+            if (typeof window !== 'undefined' && typeof window.prompt === 'function') {
+                const suggestedLimit = Math.min(3, sessionPlan.actions.length);
+                const raw = window.prompt(
+                    `Run how many planned actions? (1-${Math.min(20, sessionPlan.actions.length)})`,
+                    String(suggestedLimit)
+                );
+                if (raw === null) {
+                    this._setLearningWorkbenchStatus('Session execution canceled.');
+                    return;
+                }
+                actionLimit = Number(raw);
+            } else {
+                actionLimit = Math.min(3, sessionPlan.actions.length);
+            }
         }
+        actionLimit = Math.max(1, Math.min(20, Math.floor(Number(actionLimit) || 1), sessionPlan.actions.length));
+        const selectedActions = sessionPlan.actions.slice(0, actionLimit);
+        const answersByActionId = this._collectOptionalAnswersForSessionActions(selectedActions);
+        const answerCount = Object.keys(answersByActionId).length;
+        const autoAnalyzeAnswer = answerCount > 0;
 
-        return result.slice(0, maxCount);
+        this.learningWorkbench.loading = true;
+        this._setLearningWorkbenchStatus(`Running session plan execution for top ${actionLimit} actions...`);
+        this._renderLearningWorkbenchState();
+        try {
+            const result = await this._requestLearningApi('/api/knowledge/session/execute', {
+                userId,
+                executionKind: 'session',
+                sessionPlan,
+                actionLimit,
+                answersByActionId,
+                autoAnalyzeAnswer,
+                autoUpdateMasteryFromAnswer: autoAnalyzeAnswer,
+                persistMemory: true,
+                memoryLayer: 'session',
+            });
+            this.learningWorkbench.sessionExecution = {
+                ...result,
+                receivedAt: new Date().toISOString(),
+            };
+            this._appendLearningWorkbenchSessionRecord(result?.record || null);
+            const firstExecuted = Array.isArray(result?.items)
+                ? result.items.find((item) => item && item.status === 'executed' && item.result)
+                : null;
+            if (firstExecuted && firstExecuted.result) {
+                this.learningWorkbench.tutorFeedback = {
+                    atomId: firstExecuted.action?.atomId || '',
+                    actionKind: firstExecuted.action?.kind || '',
+                    source: firstExecuted.action?.source || 'session_plan',
+                    result: firstExecuted.result,
+                    tutorResult: firstExecuted.result?.tutor || null,
+                    receivedAt: new Date().toISOString(),
+                };
+            }
+            const summary = result?.summary || {};
+            const retestCount = Number(result?.retestPlan?.summary?.totalActions || 0);
+            this._setLearningWorkbenchStatus(
+                `Session execution finished: executed ${Number(summary.executedCount || 0)}/${Number(summary.attemptedActions || 0)}, mastery updates ${Number(summary.updatedMasteryCount || 0)}, analyzed answers ${Number(summary.analyzedAnswerCount || 0)} (input=${answerCount}), retest actions ${retestCount}.`
+            );
+        } catch (error) {
+            const message = String(error?.message || error || 'Unknown session execution error');
+            this.learningWorkbench.lastError = message;
+            this._setLearningWorkbenchStatus(`Session execution failed: ${message}`, true);
+        } finally {
+            this.learningWorkbench.loading = false;
+            this._renderLearningWorkbenchState();
+        }
     },
 
-    _isTauriMode: function() {
-        const hasTauriGlobal = typeof window !== 'undefined' && !!window.__TAURI__;
-        const runtimeCaps = (typeof window !== 'undefined' && window.__NC_RUNTIME_CAPS) ? window.__NC_RUNTIME_CAPS : null;
-        const hasDesktopRuntimeCaps = !!(runtimeCaps && runtimeCaps.supports_sidecar === true);
-        const userAgent = typeof navigator !== 'undefined' ? String(navigator.userAgent || '') : '';
-        return hasTauriGlobal || hasDesktopRuntimeCaps || userAgent.includes('Tauri');
-    },
+    runLearningWorkbenchRetestSession: async function() {
+        if (this.learningWorkbench.loading) {
+            return;
+        }
+        const userId = this._normalizeLearningWorkbenchUserId(this.learningWorkbench.userId);
+        const existingExecution = this.learningWorkbench.sessionExecution || null;
+        const retestActions = Array.isArray(existingExecution?.retestPlan?.actions)
+            ? existingExecution.retestPlan.actions
+            : [];
+        if (retestActions.length === 0) {
+            this._setLearningWorkbenchStatus('No immediate retest actions available. Run a session first.', true);
+            return;
+        }
+        const answersByActionId = this._collectOptionalAnswersForSessionActions(retestActions);
+        const answerCount = Object.keys(answersByActionId).length;
+        const autoAnalyzeAnswer = answerCount > 0;
+        const generatedAt = new Date().toISOString();
+        const totalEstimatedMinutes = retestActions.reduce(
+            (sum, action) => sum + Number(action?.estimatedMinutes || 0),
+            0
+        );
+        const retestSessionPlan = {
+            userId,
+            generatedAt,
+            actions: retestActions,
+            signals: {
+                misconceptions: [],
+                dueRetrainAtoms: Array.from(new Set(retestActions.map((action) => String(action.atomId || '').trim()))),
+                masteryPathTargets: [],
+                divergenceTargets: [],
+            },
+            summary: {
+                totalActions: retestActions.length,
+                totalEstimatedMinutes,
+                evidenceCoverageRatio: 1,
+            },
+        };
 
-    _getModeValue: function() {
-        if (this._isTauriMode()) {
-            return this.runtimeConfig.mode || (this.currentTargetId ? 'diffusion' : 'domain');
+        this.learningWorkbench.loading = true;
+        this._setLearningWorkbenchStatus(`Running immediate retest for ${retestActions.length} actions...`);
+        this._renderLearningWorkbenchState();
+        try {
+            const result = await this._requestLearningApi('/api/knowledge/session/execute', {
+                userId,
+                executionKind: 'retest',
+                sessionPlan: retestSessionPlan,
+                actionLimit: retestActions.length,
+                answersByActionId,
+                autoAnalyzeAnswer,
+                autoUpdateMasteryFromAnswer: autoAnalyzeAnswer,
+                persistMemory: true,
+                memoryLayer: 'session',
+                includeRetestPlan: false,
+            });
+            this.learningWorkbench.sessionExecution = {
+                ...result,
+                receivedAt: new Date().toISOString(),
+            };
+            this._appendLearningWorkbenchSessionRecord(result?.record || null);
+            const summary = result?.summary || {};
+            this._setLearningWorkbenchStatus(
+                `Retest execution finished: executed ${Number(summary.executedCount || 0)}/${Number(summary.attemptedActions || 0)}, mastery delta ${Number(summary.averageMasteryDelta || 0).toFixed(3)}.`
+            );
+        } catch (error) {
+            const message = String(error?.message || error || 'Unknown retest execution error');
+            this.learningWorkbench.lastError = message;
+            this._setLearningWorkbenchStatus(`Retest execution failed: ${message}`, true);
+        } finally {
+            this.learningWorkbench.loading = false;
+            this._renderLearningWorkbenchState();
         }
-        return document.getElementById('learning-mode')?.value || 'domain';
     },
 
-    _getStrategyValue: function() {
-        if (this._isTauriMode()) {
-            return this.runtimeConfig.strategy || 'foundational';
+    runLearningWorkbenchHistoryRetest: async function(recordId) {
+        if (this.learningWorkbench.loading) {
+            return;
+        }
+        const normalizedRecordId = String(recordId || '').trim();
+        if (!normalizedRecordId) {
+            this._setLearningWorkbenchStatus('Invalid history record id for replay.', true);
+            return;
+        }
+        const userId = this._normalizeLearningWorkbenchUserId(this.learningWorkbench.userId);
+        const records = Array.isArray(this.learningWorkbench.sessionHistory?.records)
+            ? this.learningWorkbench.sessionHistory.records
+            : [];
+        const targetRecord = records.find((item) => String(item?.id || '').trim() === normalizedRecordId) || null;
+        if (!targetRecord) {
+            this._setLearningWorkbenchStatus('Target history record was not found in current page.', true);
+            return;
+        }
+        const focusAtomIds = Array.from(
+            new Set(
+                (Array.isArray(targetRecord.focusAtomIds) ? targetRecord.focusAtomIds : [])
+                    .map((atomId) => String(atomId || '').trim())
+                    .filter((atomId) => atomId.length > 0)
+            )
+        );
+        if (focusAtomIds.length === 0) {
+            this._setLearningWorkbenchStatus('Selected history record has no focus atoms for replay.', true);
+            return;
         }
-        return document.getElementById('strategy')?.value || 'foundational';
-    },
 
-    _getLayoutValue: function() {
-        if (this._isTauriMode()) {
-            // Layout is backend-defaulted to Track(Focus) in Tauri flow.
-            return 'orbital';
+        this.learningWorkbench.loading = true;
+        this._setLearningWorkbenchStatus(`Replaying retest from history record ${normalizedRecordId}...`);
+        this._renderLearningWorkbenchState();
+        try {
+            const sessionPlan = await this._requestLearningApi('/api/knowledge/session/plan', {
+                userId,
+                focusAtomIds,
+                maxActions: Math.min(14, Math.max(4, focusAtomIds.length * 2)),
+                includeDivergence: false,
+                includeRetrain: true,
+            });
+            if (!sessionPlan || !Array.isArray(sessionPlan.actions) || sessionPlan.actions.length === 0) {
+                throw new Error('Replay retest failed because no runnable actions were generated.');
+            }
+            const actionLimit = Math.max(1, Math.min(8, focusAtomIds.length, sessionPlan.actions.length));
+            const selectedActions = sessionPlan.actions.slice(0, actionLimit);
+            const answersByActionId = this._collectOptionalAnswersForSessionActions(selectedActions);
+            const answerCount = Object.keys(answersByActionId).length;
+            const autoAnalyzeAnswer = answerCount > 0;
+            const result = await this._requestLearningApi('/api/knowledge/session/execute', {
+                userId,
+                executionKind: 'retest',
+                sessionPlan,
+                actionLimit,
+                answersByActionId,
+                autoAnalyzeAnswer,
+                autoUpdateMasteryFromAnswer: autoAnalyzeAnswer,
+                persistMemory: true,
+                memoryLayer: 'session',
+                includeRetestPlan: false,
+            });
+            this.learningWorkbench.sessionExecution = {
+                ...result,
+                receivedAt: new Date().toISOString(),
+            };
+            this._appendLearningWorkbenchSessionRecord(result?.record || null);
+            const summary = result?.summary || {};
+            this._setLearningWorkbenchStatus(
+                `History replay finished: executed ${Number(summary.executedCount || 0)}/${Number(summary.attemptedActions || 0)}, mastery delta ${Number(summary.averageMasteryDelta || 0).toFixed(3)}.`
+            );
+        } catch (error) {
+            const message = String(error?.message || error || 'Unknown history replay error');
+            this.learningWorkbench.lastError = message;
+            this._setLearningWorkbenchStatus(`History replay failed: ${message}`, true);
+        } finally {
+            this.learningWorkbench.loading = false;
+            this._renderLearningWorkbenchState();
         }
-        return document.getElementById('layout-style')?.value || 'orbital';
     },
 
-    _getRetainHistoryEnabled: function() {
-        if (this._isTauriMode()) {
-            return this.runtimeConfig.retainHistory !== false;
+    _renderLearningWorkbenchState: function() {
+        const userIdInput = document.getElementById('learning-user-id');
+        if (userIdInput && userIdInput.value !== this.learningWorkbench.userId) {
+            userIdInput.value = this.learningWorkbench.userId;
+        }
+
+        const qualityEl = document.getElementById('learning-quality-summary');
+        const qualityGatesEl = document.getElementById('learning-quality-gates');
+        const setQualityBaselineBtn = document.getElementById('btn-set-quality-baseline');
+        const evaluateQualityGatesBtn = document.getElementById('btn-evaluate-quality-gates');
+        const misconceptionEl = document.getElementById('learning-misconception-list');
+        const actionsEl = document.getElementById('learning-session-actions');
+        const runtimeEl = document.getElementById('learning-runtime-summary');
+        const updatedEl = document.getElementById('learning-workbench-updated-at');
+        const tutorFeedbackEl = document.getElementById('learning-tutor-feedback');
+        const sessionExecutionEl = document.getElementById('learning-session-execution');
+        const sessionHistoryEl = document.getElementById('learning-session-history');
+        const sessionHistorySummaryEl = document.getElementById('learning-session-history-summary');
+        const sessionHistoryFilterEl = document.getElementById('learning-history-kind-filter');
+        const sessionHistoryFromDateEl = document.getElementById('learning-history-from-date');
+        const sessionHistoryToDateEl = document.getElementById('learning-history-to-date');
+        const sessionHistoryApplyRangeBtn = document.getElementById('btn-learning-history-apply-range');
+        const sessionHistoryClearRangeBtn = document.getElementById('btn-learning-history-clear-range');
+        const sessionHistoryPrevBtn = document.getElementById('btn-learning-history-prev');
+        const sessionHistoryNextBtn = document.getElementById('btn-learning-history-next');
+        const sessionHistoryPageEl = document.getElementById('learning-history-page');
+
+        if (updatedEl) {
+            updatedEl.textContent = this.learningWorkbench.lastUpdatedAt
+                ? `Last updated: ${new Date(this.learningWorkbench.lastUpdatedAt).toLocaleString()}`
+                : 'Last updated: -';
+        }
+
+        if (qualityEl) {
+            const snapshot = this.learningWorkbench.qualitySnapshot?.snapshot || null;
+            const baseline = this.learningWorkbench.qualityBaselineSnapshot || null;
+            if (setQualityBaselineBtn) {
+                setQualityBaselineBtn.disabled = this.learningWorkbench.loading === true || !snapshot;
+            }
+            if (evaluateQualityGatesBtn) {
+                evaluateQualityGatesBtn.disabled = this.learningWorkbench.loading === true || !snapshot || !baseline;
+            }
+            if (!snapshot) {
+                qualityEl.innerHTML = '<li class="muted">No quality snapshot yet.</li>';
+            } else {
+                qualityEl.innerHTML = [
+                    `<li>Retest pass rate: <strong>${Number(snapshot.retestPassRatePct || 0).toFixed(2)}%</strong></li>`,
+                    `<li>Misconception recurrence: <strong>${Number(snapshot.misconceptionRecurrenceRatePct || 0).toFixed(2)}%</strong></li>`,
+                    `<li>Evidence-backed suggestions: <strong>${Number(snapshot.evidenceBackedSuggestionRatioPct || 0).toFixed(2)}%</strong></li>`,
+                    `<li>Path gain vs random: <strong>${Number(snapshot.averagePathMasteryGainPct || 0).toFixed(2)}% / ${Number(snapshot.randomPathMasteryGainPct || 0).toFixed(2)}%</strong></li>`,
+                    `<li>History window: <strong>${Math.max(1, Math.floor(Number(snapshot.historyWindowDays || 14)))}d, records ${Math.max(0, Math.floor(Number(snapshot.historyWindowRecords || 0)))}</strong></li>`,
+                    `<li>History mastery delta avg: <strong>${Number(snapshot.historyWindowAverageMasteryDelta || 0).toFixed(3)}</strong></li>`,
+                    `<li>History retest positive delta rate: <strong>${Number(snapshot.historyWindowRetestPositiveDeltaRatePct || 0).toFixed(2)}%</strong></li>`,
+                    `<li>Query p95: <strong>${Number(snapshot.queryP95Ms || 0).toFixed(2)} ms</strong></li>`,
+                    `<li>Baseline status: <strong>${baseline ? 'configured' : 'missing'}</strong></li>`,
+                ].join('');
+            }
         }
-        return document.getElementById('set-retain-history')?.checked ?? true;
-    },
 
-    _toggleHistorySidebar: function() {
-        const sidebar = document.getElementById('learning-history-sidebar');
-        if (!sidebar) return;
-        sidebar.style.zIndex = '3000';
-        if (sidebar.style.display === 'none' || sidebar.style.display === '') {
-            sidebar.style.display = 'flex';
-            sidebar.offsetHeight;
-            setTimeout(() => {
-                sidebar.style.transform = 'translateX(0)';
-            }, 10);
-        } else {
-            sidebar.style.transform = 'translateX(100%)';
-            setTimeout(() => {
-                sidebar.style.display = 'none';
-            }, 300);
+        if (qualityGatesEl) {
+            const evaluation = this.learningWorkbench.qualityGateEvaluation || null;
+            const baseline = this.learningWorkbench.qualityBaselineSnapshot || null;
+            if (!baseline) {
+                qualityGatesEl.textContent = 'No quality baseline yet. Use "Set Baseline" after refreshing quality snapshot.';
+            } else if (!evaluation) {
+                qualityGatesEl.textContent = 'No quality gate evaluation yet.';
+            } else {
+                const gateLines = Array.isArray(evaluation.gates)
+                    ? evaluation.gates.map((gate) => {
+                        const status = gate.passed === true ? 'PASS' : 'FAIL';
+                        const comparator = String(gate.comparator || '>=');
+                        const observedValue = Number(gate.observedValue || 0).toFixed(gate.unit === 'ms' ? 2 : 4);
+                        const threshold = Number(gate.threshold || 0).toFixed(gate.unit === 'ms' ? 2 : 4);
+                        return `- [${status}] ${gate.gateId}: ${observedValue} ${comparator} ${threshold} ${gate.unit}`;
+                    })
+                    : [];
+                const deltas = evaluation.deltas || {};
+                qualityGatesEl.textContent = [
+                    `Evaluated at: ${evaluation.evaluatedAt || '-'}`,
+                    `Overall: ${evaluation.overallPassed === true ? 'PASS' : 'FAIL'}`,
+                    `Delta retest pass-rate uplift: ${Number(deltas.retestPassRateUpliftPct || 0).toFixed(4)}`,
+                    `Delta misconception reduction: ${Number(deltas.misconceptionRecurrenceReductionPct || 0).toFixed(4)}`,
+                    `Delta path effectiveness lift: ${Number(deltas.pathEffectivenessLiftPct || 0).toFixed(4)}`,
+                    `Delta history mastery uplift: ${Number(deltas.historyWindowAverageMasteryDeltaUplift || 0).toFixed(6)}`,
+                    'Gates:',
+                    ...(gateLines.length > 0 ? gateLines : ['- n/a']),
+                ].join('\n');
+            }
+        }
+
+        if (misconceptionEl) {
+            const items = this.learningWorkbench.misconceptions?.items || [];
+            if (!Array.isArray(items) || items.length === 0) {
+                misconceptionEl.innerHTML = '<li class="muted">No recurring misconceptions detected.</li>';
+            } else {
+                misconceptionEl.innerHTML = items.map((item) => {
+                    const tag = String(item.errorTag || 'unknown');
+                    const count = Number(item.count || 0);
+                    const severity = Number(item.severityScore || 0).toFixed(3);
+                    return `<li><span class="chip">${tag}</span> count=${count}, severity=${severity}</li>`;
+                }).join('');
+            }
+        }
+
+        if (actionsEl) {
+            const actions = this.learningWorkbench.sessionPlan?.actions || [];
+            if (!Array.isArray(actions) || actions.length === 0) {
+                actionsEl.innerHTML = '<li class="muted">No session actions yet.</li>';
+            } else {
+                actionsEl.innerHTML = actions.slice(0, 10).map((action) => {
+                    const source = String(action.source || 'unknown');
+                    const kind = String(action.kind || 'action');
+                    const atomId = String(action.atomId || '');
+                    const minutes = Number(action.estimatedMinutes || 0);
+                    const safeKind = this._escapeHtml(kind);
+                    const safeSource = this._escapeHtml(source);
+                    const safeAtomId = this._escapeHtml(atomId);
+                    const encodedKind = encodeURIComponent(kind);
+                    const encodedAtomId = encodeURIComponent(atomId);
+                    const encodedSource = encodeURIComponent(source);
+                    return `
+                        <li>
+                          <div><strong>${safeKind}</strong> <span class="chip">${safeSource}</span> <code>${safeAtomId}</code> (${minutes}m)</div>
+                          <button
+                            class="btn-small workbench-run-action"
+                            data-action-kind="${encodedKind}"
+                            data-atom-id="${encodedAtomId}"
+                            data-action-source="${encodedSource}"
+                            type="button"
+                          >
+                            Ask Tutor
+                          </button>
+                        </li>
+                    `;
+                }).join('');
+            }
+        }
+
+        if (tutorFeedbackEl) {
+            const tutorFeedback = this.learningWorkbench.tutorFeedback;
+            if (!tutorFeedback || !tutorFeedback.result) {
+                tutorFeedbackEl.textContent = 'No tutor feedback yet.';
+            } else {
+                const trace = tutorFeedback.result?.trace || {};
+                const tutorResult = tutorFeedback.tutorResult || tutorFeedback.result?.tutor || {};
+                const message = String(tutorResult.message || '').trim();
+                const safeMessage = message.length > 0 ? message : 'Tutor returned an empty message.';
+                const answerAnalysis = tutorFeedback.result?.answerAnalysis || null;
+                const answerAnalysisMessage = String(answerAnalysis?.message || '').trim();
+                const safeAnswerAnalysis = answerAnalysisMessage.length > 0
+                    ? answerAnalysisMessage
+                    : 'No answer analysis was generated.';
+                tutorFeedbackEl.textContent = [
+                    `Action: ${tutorFeedback.actionKind} (${trace.tutorActionKind || 'unknown'})`,
+                    `Atom: ${tutorFeedback.atomId}`,
+                    `Memory persisted: ${trace.persistedMemory === true ? 'yes' : 'no'}`,
+                    `Mastery updated: ${trace.updatedMastery === true ? 'yes' : 'no'} (${trace.masterySource || 'none'})`,
+                    `Outcome/Error: ${trace.effectiveOutcome || 'n/a'} / ${trace.effectiveErrorTag || 'n/a'}`,
+                    safeMessage,
+                    '',
+                    'Answer Analysis:',
+                    safeAnswerAnalysis,
+                ].join('\n');
+            }
+        }
+
+        if (sessionExecutionEl) {
+            const execution = this.learningWorkbench.sessionExecution;
+            if (!execution || !execution.summary) {
+                sessionExecutionEl.textContent = 'No session execution yet.';
+            } else {
+                const summary = execution.summary || {};
+                const masteryDelta = execution.masteryDelta || null;
+                const retestPlan = execution.retestPlan || null;
+                const topDeltaLines = Array.isArray(masteryDelta?.items)
+                    ? masteryDelta.items.slice(0, 3).map((item) => {
+                        const before = Number(item.beforeMastery || 0).toFixed(3);
+                        const after = Number(item.afterMastery || 0).toFixed(3);
+                        const delta = Number(item.deltaMastery || 0);
+                        const signedDelta = `${delta >= 0 ? '+' : ''}${delta.toFixed(3)}`;
+                        const atomId = String(item.atomId || 'unknown_atom');
+                        return `- ${atomId}: ${before} -> ${after} (${signedDelta})`;
+                    })
+                    : [];
+                const retestPreviewLines = Array.isArray(retestPlan?.actions)
+                    ? retestPlan.actions.slice(0, 3).map((action) => {
+                        const atomId = String(action.atomId || 'unknown_atom');
+                        const kind = String(action.kind || 'action');
+                        const source = String(action.source || 'retrain_plan');
+                        return `- ${kind} @ ${atomId} (${source})`;
+                    })
+                    : [];
+                sessionExecutionEl.textContent = [
+                    `Executed at: ${execution.executedAt || '-'}`,
+                    `Planned/Attempted/Executed: ${Number(summary.plannedActions || 0)}/${Number(summary.attemptedActions || 0)}/${Number(summary.executedCount || 0)}`,
+                    `Skipped/Failed: ${Number(summary.skippedCount || 0)}/${Number(summary.failedCount || 0)}`,
+                    `Mastery updates (inferred/explicit): ${Number(summary.updatedMasteryCount || 0)} (${Number(summary.inferredMasteryCount || 0)}/${Number(summary.explicitMasteryCount || 0)})`,
+                    `Answer analyzed: ${Number(summary.analyzedAnswerCount || 0)}, memory persisted: ${Number(summary.memoryPersistedCount || 0)}`,
+                    `Avg tutor confidence: ${Number(summary.averageTutorConfidence || 0).toFixed(3)}`,
+                    `Mastery avg before/after/delta: ${Number(summary.averageMasteryBefore || 0).toFixed(3)} / ${Number(summary.averageMasteryAfter || 0).toFixed(3)} / ${Number(summary.averageMasteryDelta || 0).toFixed(3)}`,
+                    `Mastery movement improved/regressed/flat: ${Number(summary.improvedAtomCount || 0)}/${Number(summary.regressedAtomCount || 0)}/${Number(summary.unchangedAtomCount || 0)}`,
+                    `Stopped early: ${summary.stoppedEarly === true ? 'yes' : 'no'}`,
+                    ...(masteryDelta
+                        ? [
+                            `Compared atoms: ${Number(masteryDelta.comparedAtoms || 0)}, avg delta: ${Number(masteryDelta.averageDelta || 0).toFixed(3)}`,
+                            'Top mastery delta atoms:',
+                            ...(topDeltaLines.length > 0 ? topDeltaLines : ['- n/a']),
+                        ]
+                        : []),
+                    ...(retestPlan
+                        ? [
+                            `Immediate retest actions: ${Number(retestPlan.summary?.totalActions || 0)}`,
+                            'Retest preview:',
+                            ...(retestPreviewLines.length > 0 ? retestPreviewLines : ['- n/a']),
+                        ]
+                        : []),
+                ].join('\n');
+            }
+        }
+
+        if (sessionHistoryEl) {
+            const records = this.learningWorkbench.sessionHistory?.records || [];
+            const summary = this.learningWorkbench.sessionHistory?.summary || null;
+            const page = this.learningWorkbench.sessionHistory?.page || null;
+            const historyQuery = this._getLearningWorkbenchSessionHistoryQuery();
+            if (sessionHistoryFilterEl) {
+                sessionHistoryFilterEl.value = historyQuery.executionKind;
+            }
+            if (sessionHistoryFromDateEl) {
+                sessionHistoryFromDateEl.value = historyQuery.fromDate;
+            }
+            if (sessionHistoryToDateEl) {
+                sessionHistoryToDateEl.value = historyQuery.toDate;
+            }
+            if (sessionHistoryApplyRangeBtn) {
+                sessionHistoryApplyRangeBtn.disabled = this.learningWorkbench.loading === true;
+            }
+            if (sessionHistoryClearRangeBtn) {
+                const hasDateRange = historyQuery.fromDate.length > 0 || historyQuery.toDate.length > 0;
+                sessionHistoryClearRangeBtn.disabled = this.learningWorkbench.loading === true || !hasDateRange;
+            }
+            if (sessionHistoryPrevBtn) {
+                sessionHistoryPrevBtn.disabled = this.learningWorkbench.loading === true || historyQuery.offset <= 0;
+            }
+            if (sessionHistoryNextBtn) {
+                const canGoNext = page ? page.hasMore === true : false;
+                sessionHistoryNextBtn.disabled = this.learningWorkbench.loading === true || !canGoNext;
+            }
+            if (sessionHistoryPageEl) {
+                const totalFilteredRecords = Math.max(0, Number(page?.totalFilteredRecords || 0));
+                const totalPages = Math.max(1, Math.ceil(totalFilteredRecords / Math.max(1, historyQuery.limit)));
+                const pageIndex = Math.floor(historyQuery.offset / Math.max(1, historyQuery.limit)) + 1;
+                sessionHistoryPageEl.textContent = `Page ${Math.min(pageIndex, totalPages)}/${totalPages}`;
+            }
+            if (sessionHistorySummaryEl) {
+                const totalRecords = Number(summary?.totalRecords || 0);
+                const totalExecuted = Number(summary?.totalExecutedActions || 0);
+                const totalUpdated = Number(summary?.totalUpdatedMasteryCount || 0);
+                const avgDelta = Number(summary?.averageMasteryDelta || 0).toFixed(3);
+                const avgConfidence = Number(summary?.averageTutorConfidence || 0).toFixed(3);
+                const rangeSummary = historyQuery.fromDate || historyQuery.toDate
+                    ? `, range=${historyQuery.fromDate || '-'}..${historyQuery.toDate || '-'}`
+                    : '';
+                sessionHistorySummaryEl.textContent = `History summary: records=${totalRecords}, executed=${totalExecuted}, updated=${totalUpdated}, avgDelta=${avgDelta}, avgConfidence=${avgConfidence}${rangeSummary}`;
+            }
+            if (!Array.isArray(records) || records.length === 0) {
+                sessionHistoryEl.innerHTML = '<li class="muted">No session history yet.</li>';
+            } else {
+                sessionHistoryEl.innerHTML = records.slice(0, Math.max(1, historyQuery.limit)).map((record) => {
+                    const executedAt = new Date(record.executedAt || Date.now()).toLocaleString();
+                    const kind = this._escapeHtml(String(record.executionKind || 'session'));
+                    const executedCount = Number(record.executedCount || 0);
+                    const attempted = Number(record.attemptedActions || 0);
+                    const delta = Number(record.averageMasteryDelta || 0);
+                    const signedDelta = `${delta >= 0 ? '+' : ''}${delta.toFixed(3)}`;
+                    const recordId = String(record.id || '').trim();
+                    const encodedRecordId = encodeURIComponent(recordId);
+                    const focusAtomIds = Array.isArray(record.focusAtomIds) ? record.focusAtomIds : [];
+                    const focusAtomCount = focusAtomIds.length;
+                    const focusPreview = focusAtomIds
+                        .slice(0, 3)
+                        .map((atomId) => this._escapeHtml(String(atomId || '')))
+                        .filter((atomId) => atomId.length > 0)
+                        .join(', ');
+                    const replayDisabledAttr = focusAtomCount > 0 ? '' : ' disabled';
+                    return `
+                        <li>
+                          <div><span class="chip">${kind}</span> ${executedAt} - ${executedCount}/${attempted} - mastery delta ${signedDelta}</div>
+                          <div class="muted">Focus atoms: ${focusAtomCount}${focusPreview ? ` (${focusPreview})` : ''}</div>
+                          <button class="btn-small workbench-run-history-retest" data-history-record-id="${encodedRecordId}" type="button"${replayDisabledAttr}>Replay Retest</button>
+                        </li>
+                    `;
+                }).join('');
+            }
+        }
+
+        if (runtimeEl) {
+            const runtimeState = this.learningWorkbench.runtimeState?.state || null;
+            if (!runtimeState) {
+                runtimeEl.textContent = 'Runtime: unavailable';
+            } else {
+                const sessionTelemetry = runtimeState.sessionActionTelemetry || null;
+                const historyCount = Number(runtimeState.sessionExecutionHistoryRecords || 0);
+                const sessionSummary = sessionTelemetry
+                    ? `, sessionActions=${Number(sessionTelemetry.executionCount || 0)}, inferred=${Number(sessionTelemetry.inferredMasteryUpdateCount || 0)}, explicit=${Number(sessionTelemetry.explicitMasteryUpdateCount || 0)}, history=${historyCount}`
+                    : `, history=${historyCount}`;
+                runtimeEl.textContent = `Runtime: docs=${runtimeState.documents}, atoms=${runtimeState.activeAtoms}, relations=${runtimeState.activeRelationEdges}, ingestP95=${Number(runtimeState.ingestTelemetry?.ingestP95Ms || 0).toFixed(2)}ms${sessionSummary}`;
+            }
         }
     },
 
@@ -1708,6 +3493,7 @@ window.pathApp = {
         const pathContainer = document.getElementById('path-container');
         const graphWrapper = document.getElementById('graph-wrapper');
         const sidebar = document.getElementById('learning-history-sidebar');
+        const workbenchSidebar = document.getElementById('learning-workbench-sidebar');
 
         if (pathContainer) pathContainer.style.display = 'none';
         if (graphWrapper) graphWrapper.style.display = 'block';
@@ -1715,6 +3501,10 @@ window.pathApp = {
             sidebar.style.transform = 'translateX(100%)';
             sidebar.style.display = 'none';
         }
+        if (workbenchSidebar) {
+            workbenchSidebar.style.transform = 'translateX(-100%)';
+            workbenchSidebar.style.display = 'none';
+        }
         const multiWindowOptions = this._resolveMultiWindowOptions();
         
         // Single-window toggle: hide Godot, show Tauri.
@@ -2237,6 +4027,8 @@ window.pathApp = {
         const tauriMode = this._isTauriMode();
         const toolbar = document.getElementById('path-toolbar');
 
+        this._restoreLearningWorkbenchPreferences();
+
         if (tauriMode && toolbar) {
             // In Tauri, controls are migrated to Godot. Keep canvas view only.
             toolbar.style.display = 'none';
@@ -2266,6 +4058,24 @@ window.pathApp = {
         const markBtn = document.getElementById('btn-mark-complete');
         const historyBtn = document.getElementById('btn-toggle-history');
         const closeHistoryBtn = document.getElementById('btn-close-history');
+        const workbenchToggleBtn = document.getElementById('btn-toggle-learning-workbench');
+        const workbenchCloseBtn = document.getElementById('btn-close-learning-workbench');
+        const workbenchRefreshBtn = document.getElementById('btn-refresh-learning-workbench');
+        const workbenchSetQualityBaselineBtn = document.getElementById('btn-set-quality-baseline');
+        const workbenchEvaluateQualityGatesBtn = document.getElementById('btn-evaluate-quality-gates');
+        const workbenchIngestBtn = document.getElementById('btn-ingest-focus-node');
+        const workbenchRunSessionBtn = document.getElementById('btn-run-learning-session');
+        const workbenchRunRetestBtn = document.getElementById('btn-run-retest-session');
+        const workbenchUserIdInput = document.getElementById('learning-user-id');
+        const workbenchActionsList = document.getElementById('learning-session-actions');
+        const workbenchHistoryList = document.getElementById('learning-session-history');
+        const workbenchHistoryKindFilter = document.getElementById('learning-history-kind-filter');
+        const workbenchHistoryFromDate = document.getElementById('learning-history-from-date');
+        const workbenchHistoryToDate = document.getElementById('learning-history-to-date');
+        const workbenchHistoryApplyRangeBtn = document.getElementById('btn-learning-history-apply-range');
+        const workbenchHistoryClearRangeBtn = document.getElementById('btn-learning-history-clear-range');
+        const workbenchHistoryPrevBtn = document.getElementById('btn-learning-history-prev');
+        const workbenchHistoryNextBtn = document.getElementById('btn-learning-history-next');
 
         if (!tauriMode) {
             if (learningModeEl) {
@@ -2286,6 +4096,11 @@ window.pathApp = {
             if (layoutEl) layoutEl.addEventListener('change', () => this.triggerUpdate());
             if (markBtn) markBtn.addEventListener('click', () => this.markComplete());
             if (historyBtn) historyBtn.addEventListener('click', () => this._toggleHistorySidebar());
+            if (workbenchToggleBtn) {
+                workbenchToggleBtn.addEventListener('click', () => {
+                    this._toggleLearningWorkbenchSidebar();
+                });
+            }
         }
 
         if (closeHistoryBtn) {
@@ -2299,6 +4114,150 @@ window.pathApp = {
             });
         }
 
+        if (workbenchCloseBtn) {
+            workbenchCloseBtn.addEventListener('click', () => this._closeLearningWorkbenchSidebar());
+        }
+
+        if (workbenchRefreshBtn) {
+            workbenchRefreshBtn.addEventListener('click', () => {
+                void this.refreshLearningWorkbench({ force: true });
+            });
+        }
+
+        if (workbenchSetQualityBaselineBtn) {
+            workbenchSetQualityBaselineBtn.addEventListener('click', () => {
+                void this.setLearningWorkbenchQualityBaselineFromCurrent();
+            });
+        }
+
+        if (workbenchEvaluateQualityGatesBtn) {
+            workbenchEvaluateQualityGatesBtn.addEventListener('click', () => {
+                void this.evaluateLearningWorkbenchQualityGates();
+            });
+        }
+
+        if (workbenchIngestBtn) {
+            workbenchIngestBtn.addEventListener('click', () => {
+                void this.ingestFocusNodeForLearningWorkbench();
+            });
+        }
+
+        if (workbenchRunSessionBtn) {
+            workbenchRunSessionBtn.addEventListener('click', () => {
+                void this.runLearningWorkbenchSession();
+            });
+        }
+
+        if (workbenchRunRetestBtn) {
+            workbenchRunRetestBtn.addEventListener('click', () => {
+                void this.runLearningWorkbenchRetestSession();
+            });
+        }
+
+        if (workbenchUserIdInput) {
+            workbenchUserIdInput.value = this.learningWorkbench.userId || 'path_user_default';
+            workbenchUserIdInput.addEventListener('change', (event) => {
+                const candidate = typeof event?.target?.value === 'string'
+                    ? event.target.value
+                    : '';
+                this.learningWorkbench.userId = this._normalizeLearningWorkbenchUserId(candidate);
+                const historyQuery = this._getLearningWorkbenchSessionHistoryQuery();
+                this.learningWorkbench.sessionHistoryQuery = {
+                    ...historyQuery,
+                    offset: 0,
+                };
+                this.learningWorkbench.qualityBaselineSnapshot = this._loadLearningQualityBaseline(this.learningWorkbench.userId);
+                this.learningWorkbench.qualityGateEvaluation = null;
+                workbenchUserIdInput.value = this.learningWorkbench.userId;
+                this._persistLearningWorkbenchPreferences();
+                this._renderLearningWorkbenchState();
+                void this._syncLearningQualityBaselineFromServer(this.learningWorkbench.userId)
+                    .then(() => {
+                        this._renderLearningWorkbenchState();
+                    });
+            });
+        }
+
+        if (workbenchHistoryKindFilter) {
+            workbenchHistoryKindFilter.value = this._getLearningWorkbenchSessionHistoryQuery().executionKind;
+            workbenchHistoryKindFilter.addEventListener('change', (event) => {
+                const nextValue = typeof event?.target?.value === 'string'
+                    ? event.target.value
+                    : 'all';
+                this._setLearningWorkbenchHistoryExecutionKind(nextValue, { refresh: true });
+            });
+        }
+
+        if (workbenchHistoryFromDate) {
+            workbenchHistoryFromDate.value = this._getLearningWorkbenchSessionHistoryQuery().fromDate;
+        }
+
+        if (workbenchHistoryToDate) {
+            workbenchHistoryToDate.value = this._getLearningWorkbenchSessionHistoryQuery().toDate;
+        }
+
+        if (workbenchHistoryApplyRangeBtn) {
+            workbenchHistoryApplyRangeBtn.addEventListener('click', () => {
+                const fromDate = workbenchHistoryFromDate && typeof workbenchHistoryFromDate.value === 'string'
+                    ? workbenchHistoryFromDate.value
+                    : '';
+                const toDate = workbenchHistoryToDate && typeof workbenchHistoryToDate.value === 'string'
+                    ? workbenchHistoryToDate.value
+                    : '';
+                this._applyLearningWorkbenchHistoryDateRange(fromDate, toDate, { refresh: true });
+            });
+        }
+
+        if (workbenchHistoryClearRangeBtn) {
+            workbenchHistoryClearRangeBtn.addEventListener('click', () => {
+                this._applyLearningWorkbenchHistoryDateRange('', '', { refresh: true });
+            });
+        }
+
+        if (workbenchHistoryPrevBtn) {
+            workbenchHistoryPrevBtn.addEventListener('click', () => {
+                this._changeLearningWorkbenchHistoryPage(-1);
+            });
+        }
+
+        if (workbenchHistoryNextBtn) {
+            workbenchHistoryNextBtn.addEventListener('click', () => {
+                this._changeLearningWorkbenchHistoryPage(1);
+            });
+        }
+
+        if (workbenchActionsList) {
+            workbenchActionsList.addEventListener('click', (event) => {
+                const runBtn = event.target && typeof event.target.closest === 'function'
+                    ? event.target.closest('.workbench-run-action')
+                    : null;
+                if (!runBtn) {
+                    return;
+                }
+                const actionKind = decodeURIComponent(runBtn.getAttribute('data-action-kind') || '');
+                const atomId = decodeURIComponent(runBtn.getAttribute('data-atom-id') || '');
+                const source = decodeURIComponent(runBtn.getAttribute('data-action-source') || '');
+                void this.executeLearningWorkbenchAction({
+                    actionKind,
+                    atomId,
+                    source,
+                });
+            });
+        }
+
+        if (workbenchHistoryList) {
+            workbenchHistoryList.addEventListener('click', (event) => {
+                const replayBtn = event.target && typeof event.target.closest === 'function'
+                    ? event.target.closest('.workbench-run-history-retest')
+                    : null;
+                if (!replayBtn) {
+                    return;
+                }
+                const recordId = decodeURIComponent(replayBtn.getAttribute('data-history-record-id') || '');
+                void this.runLearningWorkbenchHistoryRetest(recordId);
+            });
+        }
+
         // Add Target Display UI if missing
         if (!tauriMode && !document.getElementById('target-display') && toolbar && learningModeEl) {
             const targetDiv = document.createElement('div');
@@ -2334,6 +4293,7 @@ window.pathApp = {
 
         this._ensurePathSemanticA11y();
         this._refreshPathSemanticA11y('Path mode initialized');
+        this._renderLearningWorkbenchState();
     },
 
     _ensurePathSemanticA11y: function() {
@@ -2453,6 +4413,14 @@ window.pathApp = {
 
         const now = Date.now();
         if ((now - this.semanticA11yLastAnnouncementAt) < 250) {
+            if (this.semanticA11yDeferredRefreshTimer) {
+                clearTimeout(this.semanticA11yDeferredRefreshTimer);
+            }
+            const delayMs = Math.max(25, 260 - (now - this.semanticA11yLastAnnouncementAt));
+            this.semanticA11yDeferredRefreshTimer = setTimeout(() => {
+                this.semanticA11yDeferredRefreshTimer = null;
+                this._refreshPathSemanticA11y(reason);
+            }, delayMs);
             return;
         }
 
@@ -2932,6 +4900,10 @@ window.pathApp = {
             }
             this.saveHistory();
             this.updateHistorySidebar();
+            const workbenchSidebar = document.getElementById('learning-workbench-sidebar');
+            if (workbenchSidebar && workbenchSidebar.style.display && workbenchSidebar.style.display !== 'none') {
+                void this.refreshLearningWorkbench({ force: false });
+            }
             
             const next = this.nodes.find(n => !this.completedNodes.has(n.id) && n.id !== node.id);
             if (next) setTimeout(() => this.switchCentral(next.id), 500);
@@ -3219,6 +5191,11 @@ window.pathApp = {
         const bridge = (typeof window !== 'undefined') ? window.NoteConnectionRuntime : null;
         const waitForRuntime = this._isTauriMode() && bridge && typeof bridge.whenReady === 'function';
 
+        if (this._isDetachedPreviewWithoutRuntimeBootstrap() && !forceDesktop) {
+            console.log('[PathApp] Detached preview runtime detected; skipping early WebSocket bootstrap.');
+            return;
+        }
+
         if (this._isTauriMode() && !forceDesktop) {
             // In normal Tauri flow, avoid idle early bridge sockets unless the desktop shell explicitly asks for one.
             return;
@@ -3346,7 +5323,12 @@ window.pathApp = {
 // This runs as soon as path_app.js is loaded, before init() is called.
 (function() {
     const isTauri = !!(window.pathApp && typeof window.pathApp._isTauriMode === 'function' && window.pathApp._isTauriMode());
-    if (isTauri) {
+    const isDetachedPreview = !!(
+        window.pathApp &&
+        typeof window.pathApp._isDetachedPreviewWithoutRuntimeBootstrap === 'function' &&
+        window.pathApp._isDetachedPreviewWithoutRuntimeBootstrap()
+    );
+    if (isTauri || isDetachedPreview) {
         // Bridge-first Tauri: only connect when Path Mode is explicitly initialized.
         return;
     }
@@ -3358,7 +5340,3 @@ window.pathApp = {
         }
     }, 500);
 })();
-
-
-
-