codexmate 0.1.22 → 0.1.24

package/README.md

@@ -26,16 +26,6 @@
 
 <br />
 
-<p>
-  <img src="site/.vitepress/public/images/readme/config-codex.png" alt="Codex Mate Codex provider configuration" width="100%" />
-</p>
-<p>
-  <img src="site/.vitepress/public/images/readme/config-opencode.png" alt="Codex Mate OpenCode provider configuration" width="100%" />
-</p>
-<p>
-  <img src="site/.vitepress/public/images/readme/sessions.png" alt="Codex Mate unified session browser" width="100%" />
-</p>
-
 </div>
 
 ---

package/README.vi.md

@@ -26,8 +26,6 @@
 
 <br />
 
-<img src="site/.vitepress/public/images/readme-hero.png" alt="Giao diện Codex Mate" width="100%" />
-
 </div>
 
 ---

package/README.zh.md

@@ -25,16 +25,6 @@
 
 <br />
 
-<p>
-  <img src="site/.vitepress/public/images/readme/config-codex.png" alt="Codex Mate Codex Provider 配置" width="100%" />
-</p>
-<p>
-  <img src="site/.vitepress/public/images/readme/config-opencode.png" alt="Codex Mate OpenCode Provider 配置" width="100%" />
-</p>
-<p>
-  <img src="site/.vitepress/public/images/readme/sessions.png" alt="Codex Mate 统一会话浏览器" width="100%" />
-</p>
-
 </div>
 
 ---

package/cli.js

@@ -1076,6 +1076,7 @@ function normalizeWebUiPreferences(value = {}) {
         configTemplateDiffConfirmEnabled: normalizeBooleanPreference(source.configTemplateDiffConfirmEnabled, true),
         sessionsUsageTimeRange: normalizeUsageTimeRangePreference(source.sessionsUsageTimeRange),
         promptsSubTab: normalizePromptsSubTabPreference(source.promptsSubTab),
+        promptsPreviewCollapsed: normalizeBooleanPreference(source.promptsPreviewCollapsed, true),
         sysPromptScope: normalizeSysPromptScopePreference(source.sysPromptScope),
         sysPromptMode: normalizeSysPromptModePreference(source.sysPromptMode),
         projectClaudeMdPath: typeof source.projectClaudeMdPath === 'string' ? source.projectClaudeMdPath : '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codexmate",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "description": "Codex/Claude Code/OpenClaw 配置、会话与任务编排 CLI + Web 工具",
   "main": "cli.js",
   "bin": {

package/web-ui/app.js

@@ -103,9 +103,14 @@ document.addEventListener('DOMContentLoaded', () => {
                 showAgentsModal: false,
                 promptsSubTab: 'codex',
                 promptsPreviewEnabled: true,
-                promptsPreviewCollapsed: false,
+                promptsPreviewCollapsed: true,
+                agentsChangeAxis: { mode: 'edit', ticks: [], truncated: false, totalLines: 0, added: 0, removed: 0 },
+                sysChangeAxis: { mode: 'edit', ticks: [], truncated: false, totalLines: 0, added: 0, removed: 0 },
                 promptsMobileView: 'edit',
                 promptsPreviewLibsMissing: false,
+                promptsPathReferencePaths: {},
+                promptsPathReferenceLoading: false,
+                promptsPathReferenceCacheKey: '',
                 agentsHighlightHtml: '',
                 sysPromptHighlightHtml: '',
                 agentsPreviewHtml: '',
@@ -826,6 +831,24 @@ document.addEventListener('DOMContentLoaded', () => {
             sysPromptContent() {
                 if (typeof this.schedulePromptsEditorRefresh === 'function') this.schedulePromptsEditorRefresh('sys');
             },
+            agentsOriginalContent() {
+                if (typeof this.schedulePromptsChangeAxis === 'function') this.schedulePromptsChangeAxis('agents');
+            },
+            sysPromptOriginalContent() {
+                if (typeof this.schedulePromptsChangeAxis === 'function') this.schedulePromptsChangeAxis('sys');
+            },
+            agentsDiffVisible() {
+                if (typeof this.refreshPromptsChangeAxis === 'function') this.refreshPromptsChangeAxis('agents');
+            },
+            sysPromptDiffVisible() {
+                if (typeof this.refreshPromptsChangeAxis === 'function') this.refreshPromptsChangeAxis('sys');
+            },
+            agentsDiffLines() {
+                if (this.agentsDiffVisible && typeof this.refreshPromptsChangeAxis === 'function') this.refreshPromptsChangeAxis('agents');
+            },
+            sysPromptDiffLines() {
+                if (this.sysPromptDiffVisible && typeof this.refreshPromptsChangeAxis === 'function') this.refreshPromptsChangeAxis('sys');
+            },
             projectClaudeMdPath(newPath) {
                 if (typeof this.persistWebUiPreferences === 'function') {
                     this.persistWebUiPreferences({ projectClaudeMdPath: newPath || '' });

package/web-ui/logic.prompts-change-axis.mjs

@@ -0,0 +1,102 @@
+/**
+ * Prompts-panel change axis: aggregates the rendered diff rows into
+ * clickable tick positions for the red/green diff preview view.
+ * Pure functions only.
+ */
+
+const AXIS_MAX_TICKS = 200;
+const AXIS_MIN_TICK_HEIGHT_PERCENT = 1.2;
+
+function isChangedDiffType(type) {
+    return type === 'add' || type === 'del';
+}
+
+function clampAxisPercent(value) {
+    if (!Number.isFinite(value) || value < 0) return 0;
+    if (value > 100) return 100;
+    return value;
+}
+
+function tickKindForRun(added, removed) {
+    if (added && removed) return 'mixed';
+    return added ? 'add' : 'del';
+}
+
+function buildTickFromRun(run, positioning) {
+    const height = clampAxisPercent(Math.max(
+        AXIS_MIN_TICK_HEIGHT_PERCENT,
+        (Math.max(run.added, run.removed) / Math.max(1, positioning.total)) * 100
+    ));
+    const top = Math.min(clampAxisPercent((run.anchor / Math.max(1, positioning.total)) * 100), 100 - height);
+    return {
+        kind: tickKindForRun(run.added, run.removed),
+        startLine: run.startLine,
+        endLine: run.startLine + Math.max(run.added, run.removed) - 1,
+        added: run.added,
+        removed: run.removed,
+        top,
+        height,
+        rowIndex: typeof run.rowIndex === 'number' ? run.rowIndex : null
+    };
+}
+
+function capAxisTicks(runs, positioning) {
+    const truncated = runs.length > AXIS_MAX_TICKS;
+    const visibleRuns = truncated ? runs.slice(0, AXIS_MAX_TICKS) : runs;
+    return {
+        ticks: visibleRuns.map((run) => buildTickFromRun(run, positioning)),
+        truncated
+    };
+}
+
+/**
+ * Build change-axis ticks for the diff preview view. Tick positions map to
+ * rendered row indexes so clicks scroll the diff list to the exact row.
+ *
+ * @param {Array<object>} diffLines rendered diff rows ({type, value, oldNumber, newNumber})
+ * @returns {{ ticks: Array<object>, rowCount: number, truncated: boolean }}
+ */
+export function buildPromptsDiffAxis(diffLines) {
+    const rows = Array.isArray(diffLines) ? diffLines.filter((line) => line && line.type) : [];
+    const rowCount = rows.length;
+    const runs = [];
+    let run = null;
+    const flushRun = () => {
+        if (run) {
+            runs.push(run);
+            run = null;
+        }
+    };
+
+    rows.forEach((line, index) => {
+        if (!isChangedDiffType(line.type)) {
+            flushRun();
+            return;
+        }
+        if (!run) {
+            run = {
+                anchor: index,
+                rowIndex: index,
+                startLine: line.type === 'add' && typeof line.newNumber === 'number'
+                    ? line.newNumber
+                    : (typeof line.oldNumber === 'number' ? line.oldNumber : index + 1),
+                added: 0,
+                removed: 0
+            };
+        }
+        if (line.type === 'add') {
+            run.added += 1;
+        } else {
+            run.removed += 1;
+        }
+    });
+    flushRun();
+
+    const { ticks, truncated } = capAxisTicks(runs, { total: Math.max(1, rowCount) });
+    return {
+        ticks,
+        rowCount,
+        truncated
+    };
+}
+

package/web-ui/logic.prompts-path-reference.mjs

@@ -0,0 +1,118 @@
+/**
+ * Prompts-panel "path reference" logic: build the dropdown entries that
+ * point to the OTHER instruction-file tabs' real absolute paths, and
+ * splice the rendered reference sentence into editor content at the caret.
+ *
+ * The inserted sentence is instruction-file CONTENT (not UI text), so it
+ * is intentionally a fixed English template, independent of the UI locale.
+ *
+ * Pure functions only: no Vue, no DOM, no api access.
+ */
+
+export const PROMPT_PATH_REFERENCE_TEMPLATE = 'Always follow the rules defined in `{path}`.';
+
+const PROMPT_PATH_REFERENCE_ENTRY_ORDER = ['codex', 'opencode', 'claudeGlobal', 'claudeProject', 'system'];
+
+// promptsSubTab value -> entry id excluded from that tab's own dropdown.
+const CURRENT_TAB_EXCLUDED_ENTRY = {
+    'codex': 'codex',
+    'opencode': 'opencode',
+    'claude-project': 'claudeProject',
+    'system': 'system'
+};
+
+export function buildPromptPathReferenceSentence(path) {
+    const target = typeof path === 'string' ? path.trim() : '';
+    if (!target) {
+        return '';
+    }
+    return PROMPT_PATH_REFERENCE_TEMPLATE.replace('{path}', target);
+}
+
+/**
+ * Splice `text` into `content` at the given selection, replacing the
+ * selected range (same contract as typing over a selection). Out-of-range
+ * indices are clamped; invalid indices fall back to "insert at end".
+ */
+export function insertPromptPathReferenceText(content, selectionStart, selectionEnd, text) {
+    const source = typeof content === 'string' ? content : '';
+    const inserted = typeof text === 'string' ? text : '';
+    const fallback = source.length;
+    const rawStart = Number.isFinite(selectionStart) ? Number(selectionStart) : fallback;
+    const rawEnd = Number.isFinite(selectionEnd) ? Number(selectionEnd) : fallback;
+    const start = Math.min(Math.max(rawStart, 0), source.length);
+    const end = Math.min(Math.max(rawEnd, start), source.length);
+    return {
+        content: source.slice(0, start) + inserted + source.slice(end),
+        caret: start + inserted.length
+    };
+}
+
+/**
+ * Build the dropdown option list for the prompts editors.
+ *
+ * config:
+ *   - currentTab: promptsSubTab value ('codex' | 'opencode' | 'claude-project' | 'system')
+ *   - paths: map entry id -> { path, exists, error } (server-resolved absolute paths)
+ *   - t: i18n translator, signature t(key, params)
+ *   - systemFile: file name shown for the Pi system-prompt entry (SYSTEM.md / APPEND_SYSTEM.md)
+ *
+ * Each option: { id, label, path, exists, disabled, disabledReason }.
+ * Missing/error entries stay in the list but render disabled, so a failed
+ * fetch is visible instead of silently hiding a tab.
+ */
+export function buildPromptPathReferenceOptions(config) {
+    const cfg = config || {};
+    const currentTab = CURRENT_TAB_EXCLUDED_ENTRY[cfg.currentTab] ? cfg.currentTab : 'codex';
+    const excludedEntry = CURRENT_TAB_EXCLUDED_ENTRY[currentTab];
+    const paths = cfg.paths || {};
+    const t = typeof cfg.t === 'function' ? cfg.t : ((key) => key);
+    const systemFile = typeof cfg.systemFile === 'string' && cfg.systemFile.trim()
+        ? cfg.systemFile.trim()
+        : 'SYSTEM.md';
+
+    const labelKeys = {
+        codex: 'prompts.pathReference.codex',
+        opencode: 'prompts.pathReference.opencode',
+        claudeGlobal: 'prompts.pathReference.claudeGlobal',
+        claudeProject: 'prompts.pathReference.claudeProject',
+        system: 'prompts.pathReference.system'
+    };
+
+    const options = [];
+    for (const id of PROMPT_PATH_REFERENCE_ENTRY_ORDER) {
+        if (id === excludedEntry) {
+            continue;
+        }
+        const entry = paths[id] || null;
+        let label = id === 'system'
+            ? t(labelKeys[id], { file: systemFile })
+            : t(labelKeys[id]);
+        let disabled = false;
+        let disabledReason = '';
+        if (id === 'claudeProject' && !(entry && entry.path)) {
+            disabled = true;
+            disabledReason = t('prompts.pathReference.projectMissing');
+        }
+        if (!entry) {
+            disabled = true;
+            if (!disabledReason) {
+                disabledReason = t('prompts.pathReference.notLoaded');
+            }
+        } else if (entry.error) {
+            disabled = true;
+            disabledReason = entry.error;
+        } else if (entry.path && entry.exists === false) {
+            label += ' · ' + t('common.notExistsWillCreateOnSave');
+        }
+        options.push({
+            id,
+            label,
+            path: entry && entry.path ? entry.path : '',
+            exists: entry ? !!entry.exists : false,
+            disabled,
+            disabledReason
+        });
+    }
+    return options;
+}

package/web-ui/modules/app.methods.agents.mjs

@@ -1020,6 +1020,7 @@ export function createAgentsMethods(options = {}) {
         },
 
         loadPromptsTabContent() {
+            if (typeof this.loadPromptsPathReferences === "function") this.loadPromptsPathReferences();
             if (this.promptsSubTab === 'system') {
                 if (typeof this.loadSystemPrompt === 'function') this.loadSystemPrompt();
             } else {

package/web-ui/modules/app.methods.index.mjs

@@ -52,7 +52,7 @@ import {
 export function createAppMethods() {
     return {
         ...createI18nMethods(),
-        ...createPromptsEditorMethods(),
+        ...createPromptsEditorMethods({ api }),
         ...createWebhookMethods(),
         ...createStartupClaudeMethods({
             api,

package/web-ui/modules/app.methods.prompts-editor.mjs

@@ -7,37 +7,73 @@
  * State contract (declared in app.js data()):
  *   promptsPreviewEnabled, promptsPreviewCollapsed, promptsMobileView,
  *   promptsPreviewLibsMissing, agentsHighlightHtml, sysPromptHighlightHtml,
- *   agentsPreviewHtml, sysPromptPreviewHtml
+ *   agentsPreviewHtml, sysPromptPreviewHtml, agentsChangeAxis, sysChangeAxis,
+ *   promptsPathReferencePaths, promptsPathReferenceLoading,
+ *   promptsPathReferenceCacheKey (path-reference dropdown)
  * Template contract:
  *   refs promptsAgentsTextarea / promptsSysTextarea on the two textareas,
- *   refs promptsAgentsHighlight / promptsSysHighlight on the backdrop <pre>.
+ *   refs promptsAgentsHighlight / promptsSysHighlight on the backdrop <pre>,
+ *   refs promptsAgentsDiffView / promptsSysDiffView on the two diff row containers.
  */
 
 import {
     buildMarkdownPreviewHtml,
     highlightMarkdownText
 } from '../logic.markdown-editor.mjs';
+import {
+    buildPromptPathReferenceOptions as buildPromptPathReferenceOptionList,
+    buildPromptPathReferenceSentence,
+    insertPromptPathReferenceText
+} from '../logic.prompts-path-reference.mjs';
+import {
+    buildPromptsDiffAxis
+} from '../logic.prompts-change-axis.mjs';
 
 const PROMPTS_HIGHLIGHT_DEBOUNCE_MS = 150;
 const PROMPTS_PREVIEW_DEBOUNCE_MS = 300;
+const PROMPTS_AXIS_DEBOUNCE_MS = 300;
 
 const PROMPTS_EDITOR_META = {
     agents: {
         contentField: 'agentsContent',
+        originalField: 'agentsOriginalContent',
         highlightField: 'agentsHighlightHtml',
         previewField: 'agentsPreviewHtml',
+        axisField: 'agentsChangeAxis',
+        diffLinesField: 'agentsDiffLines',
+        diffStatsField: 'agentsDiffStats',
+        diffVisibleField: 'agentsDiffVisible',
+        loadingField: 'agentsLoading',
+        savingField: 'agentsSaving',
+        diffLoadingField: 'agentsDiffLoading',
+        prepareDiffMethod: 'prepareAgentsDiff',
         textareaRef: 'promptsAgentsTextarea',
-        highlightRef: 'promptsAgentsHighlight'
+        highlightRef: 'promptsAgentsHighlight',
+        diffViewRef: 'promptsAgentsDiffView'
     },
     sys: {
         contentField: 'sysPromptContent',
+        originalField: 'sysPromptOriginalContent',
         highlightField: 'sysPromptHighlightHtml',
         previewField: 'sysPromptPreviewHtml',
+        axisField: 'sysChangeAxis',
+        diffLinesField: 'sysPromptDiffLines',
+        diffStatsField: 'sysPromptDiffStats',
+        diffVisibleField: 'sysPromptDiffVisible',
+        loadingField: 'sysPromptLoading',
+        savingField: 'sysPromptSaving',
+        diffLoadingField: 'sysPromptDiffLoading',
+        prepareDiffMethod: 'prepareSysPromptDiff',
         textareaRef: 'promptsSysTextarea',
-        highlightRef: 'promptsSysHighlight'
+        highlightRef: 'promptsSysHighlight',
+        diffViewRef: 'promptsSysDiffView'
     }
 };
 
+function emptyPromptsChangeAxis() {
+    return { mode: 'edit', ticks: [], truncated: false, totalLines: 0, added: 0, removed: 0 };
+}
+
 function resolvePromptsHljs() {
     if (typeof window !== 'undefined' && window.hljs) {
         return window.hljs;
@@ -52,7 +88,9 @@ function resolvePromptsPreviewLibs() {
     return { marked: window.marked || null, purify: window.DOMPurify || null };
 }
 
-export function createPromptsEditorMethods() {
+export function createPromptsEditorMethods(options = {}) {
+    const { api } = options;
+
     return {
         promptsEditorMeta(key) {
             return PROMPTS_EDITOR_META[key] || null;
@@ -138,6 +176,65 @@ export function createPromptsEditorMethods() {
         schedulePromptsEditorRefresh(key) {
             this.schedulePromptsHighlight(key);
             this.schedulePromptsPreview(key);
+            this.schedulePromptsChangeAxis(key);
+        },
+
+        refreshPromptsChangeAxis(key) {
+            const meta = this.promptsEditorMeta(key);
+            if (!meta) {
+                return;
+            }
+            if (this[meta.diffVisibleField]) {
+                const axis = buildPromptsDiffAxis(this[meta.diffLinesField]);
+                const stats = this[meta.diffStatsField];
+                this[meta.axisField] = {
+                    mode: 'diff',
+                    ticks: axis.truncated ? [] : axis.ticks,
+                    truncated: axis.truncated,
+                    totalLines: axis.rowCount,
+                    added: Number(stats && stats.added) || 0,
+                    removed: Number(stats && stats.removed) || 0
+                };
+                return;
+            }
+            // Edit mode renders no axis (the axis is a diff-preview-only
+            // affordance): keep it empty so the full line-diff cost is only
+            // paid while the red/green preview is open.
+            this[meta.axisField] = emptyPromptsChangeAxis();
+        },
+
+        schedulePromptsChangeAxis(key) {
+            const meta = this.promptsEditorMeta(key);
+            if (!meta) {
+                return;
+            }
+            if (!this._promptsAxisTimers) {
+                this._promptsAxisTimers = {};
+            }
+            if (this._promptsAxisTimers[key]) {
+                clearTimeout(this._promptsAxisTimers[key]);
+            }
+            this._promptsAxisTimers[key] = setTimeout(() => {
+                this._promptsAxisTimers[key] = null;
+                this.refreshPromptsChangeAxis(key);
+            }, PROMPTS_AXIS_DEBOUNCE_MS);
+        },
+
+        jumpToPromptsChangeTick(key, tick) {
+            const meta = this.promptsEditorMeta(key);
+            const axis = meta ? this[meta.axisField] : null;
+            if (!meta || !axis || !tick) {
+                return;
+            }
+            if (axis.mode === 'diff') {
+                const view = this.$refs && this.$refs[meta.diffViewRef];
+                const rows = view && view.children ? Array.prototype.slice.call(view.children) : [];
+                const target = rows[tick.rowIndex];
+                if (target && typeof target.scrollIntoView === 'function') {
+                    target.scrollIntoView({ block: 'center' });
+                }
+                return;
+            }
         },
 
         setPromptsMobileView(view) {
@@ -148,6 +245,135 @@ export function createPromptsEditorMethods() {
 
         togglePromptsPreviewCollapsed() {
             this.promptsPreviewCollapsed = !this.promptsPreviewCollapsed;
+            if (typeof this.persistWebUiPreferences === 'function') {
+                this.persistWebUiPreferences({ promptsPreviewCollapsed: this.promptsPreviewCollapsed });
+            }
+        },
+
+        buildPromptsPathReferenceCacheKey() {
+            return [
+                (this.projectClaudeMdPath || '').trim(),
+                this.sysPromptScope || 'global',
+                this.sysPromptMode || 'system'
+            ].join('|');
+        },
+
+        // Lazy loader for the path-reference dropdown. Fetches the OTHER tabs'
+        // real absolute paths via the existing metaOnly RPC contracts
+        // (get-agents-file / get-opencode-agents-file / get-claude-md-file
+        // return path + exists without content; get-system-prompt returns
+        // path + a small SYSTEM.md/APPEND_SYSTEM.md read). Cache key covers the
+        // only inputs that change a resolved path: project baseDir, sysPrompt
+        // scope and mode. Idempotent per key; concurrent callers share the
+        // in-flight promise.
+        loadPromptsPathReferences() {
+            const cacheKey = this.buildPromptsPathReferenceCacheKey();
+            if (this.promptsPathReferenceCacheKey === cacheKey && !this.promptsPathReferenceLoading) {
+                return Promise.resolve();
+            }
+            if (this.promptsPathReferenceLoading && this._promptsPathReferencePromise) {
+                return this._promptsPathReferencePromise;
+            }
+            if (typeof api !== 'function') {
+                return Promise.resolve();
+            }
+            const projectPath = (this.projectClaudeMdPath || '').trim();
+            const scope = this.sysPromptScope || 'global';
+            const mode = this.sysPromptMode || 'system';
+            const fetchEntry = async (action, params) => {
+                try {
+                    const res = await api(action, params);
+                    if (res && res.error) {
+                        return { path: '', exists: false, error: String(res.error) };
+                    }
+                    return { path: (res && res.path) || '', exists: !!(res && res.exists) };
+                } catch (e) {
+                    return {
+                        path: '',
+                        exists: false,
+                        error: typeof this.t === 'function' ? this.t('prompts.pathReference.loadFailed') : 'load failed'
+                    };
+                }
+            };
+            this.promptsPathReferenceLoading = true;
+            const promise = Promise.all([
+                fetchEntry('get-agents-file', { metaOnly: true }),
+                fetchEntry('get-opencode-agents-file', { metaOnly: true }),
+                fetchEntry('get-claude-md-file', { metaOnly: true }),
+                projectPath
+                    ? fetchEntry('get-claude-md-file', { baseDir: projectPath, metaOnly: true })
+                    : Promise.resolve(null),
+                fetchEntry('get-system-prompt', { scope, mode })
+            ]).then((results) => {
+                this.promptsPathReferencePaths = {
+                    codex: results[0],
+                    opencode: results[1],
+                    claudeGlobal: results[2],
+                    claudeProject: results[3] || { path: '', exists: false, error: '' },
+                    system: results[4]
+                };
+                this.promptsPathReferenceCacheKey = cacheKey;
+            }).finally(() => {
+                this.promptsPathReferenceLoading = false;
+                this._promptsPathReferencePromise = null;
+            });
+            this._promptsPathReferencePromise = promise;
+            return promise;
+        },
+
+        promptsPathReferenceOptionList() {
+            return buildPromptPathReferenceOptionList({
+                currentTab: this.promptsSubTab,
+                paths: this.promptsPathReferencePaths || {},
+                t: (key, params) => (typeof this.t === 'function' ? this.t(key, params) : key),
+                systemFile: (this.sysPromptMode || 'system') === 'append' ? 'APPEND_SYSTEM.md' : 'SYSTEM.md'
+            });
+        },
+
+        insertPromptPathReference(entryId, key, event) {
+            const select = event && event.target;
+            if (select && typeof select.value === 'string') {
+                select.value = '';
+            }
+            const meta = this.promptsEditorMeta(key);
+            const entry = (this.promptsPathReferencePaths || {})[entryId];
+            if (!meta || !entry || !entry.path || entry.error) {
+                return;
+            }
+            if (this[meta.loadingField] || this[meta.savingField] || this[meta.diffVisibleField]) {
+                return;
+            }
+            const sentence = buildPromptPathReferenceSentence(entry.path);
+            if (!sentence) {
+                return;
+            }
+            const textarea = typeof this.$refs === 'object' && this.$refs
+                ? this.$refs[meta.textareaRef]
+                : null;
+            const content = typeof this[meta.contentField] === 'string' ? this[meta.contentField] : '';
+            let start = content.length;
+            let end = content.length;
+            if (textarea && typeof textarea.selectionStart === 'number') {
+                start = textarea.selectionStart;
+                end = textarea.selectionEnd;
+            }
+            const result = insertPromptPathReferenceText(content, start, end, sentence);
+            this[meta.contentField] = result.content;
+            this.schedulePromptsEditorRefresh(key);
+            const restoreCaret = () => {
+                if (textarea && typeof textarea.setSelectionRange === 'function') {
+                    textarea.setSelectionRange(result.caret, result.caret);
+                    textarea.focus();
+                }
+            };
+            if (typeof this.$nextTick === 'function') {
+                this.$nextTick(restoreCaret);
+            } else {
+                restoreCaret();
+            }
+            if (typeof this.showMessage === 'function') {
+                this.showMessage(this.t('prompts.pathReference.toast.inserted'), 'success');
+            }
         }
     };
 }

package/web-ui/modules/app.methods.web-ui-preferences.mjs

@@ -341,6 +341,7 @@ export function createWebUiPreferencesMethods(options = {}) {
                     : this.configTemplateDiffConfirmEnabled !== false,
                 sessionsUsageTimeRange: normalizeUsageTimeRange(hasOwn(source, 'sessionsUsageTimeRange') ? source.sessionsUsageTimeRange : this.sessionsUsageTimeRange),
                 promptsSubTab: normalizePromptsSubTab(hasOwn(source, 'promptsSubTab') ? source.promptsSubTab : this.promptsSubTab),
+                promptsPreviewCollapsed: normalizeBoolean(hasOwn(source, 'promptsPreviewCollapsed') ? source.promptsPreviewCollapsed : this.promptsPreviewCollapsed, true),
                 sysPromptScope: normalizeSysPromptScope(hasOwn(source, 'sysPromptScope') ? source.sysPromptScope : this.sysPromptScope),
                 sysPromptMode: normalizeSysPromptMode(hasOwn(source, 'sysPromptMode') ? source.sysPromptMode : this.sysPromptMode),
                 promptPresets: normalizePromptPresets(hasOwn(source, 'promptPresets') ? source.promptPresets : this.promptPresets),
@@ -398,6 +399,9 @@ export function createWebUiPreferencesMethods(options = {}) {
                 if (typeof source.promptsSubTab === 'string') {
                     this.promptsSubTab = normalizePromptsSubTab(source.promptsSubTab);
                 }
+                if (hasOwn(source, 'promptsPreviewCollapsed')) {
+                    this.promptsPreviewCollapsed = normalizeBoolean(source.promptsPreviewCollapsed, true);
+                }
                 if (typeof source.sysPromptScope === 'string') {
                     this.sysPromptScope = normalizeSysPromptScope(source.sysPromptScope);
                 }

package/web-ui/modules/i18n/locales/en.mjs

@@ -232,6 +232,17 @@ const en = Object.freeze({
     'prompts.subTab.opencode': 'AGENTS.md (OpenCode)',
     'prompts.subTab.project': 'CLAUDE.md',
     'prompts.subTab.system': 'System Prompt (Pi)',
+    'prompts.pathReference.title': 'Insert rule reference',
+    'prompts.pathReference.placeholder': 'Insert rule reference…',
+    'prompts.pathReference.codex': 'AGENTS.md (Codex)',
+    'prompts.pathReference.opencode': 'AGENTS.md (OpenCode)',
+    'prompts.pathReference.claudeGlobal': 'CLAUDE.md (Global)',
+    'prompts.pathReference.claudeProject': 'CLAUDE.md (Project)',
+    'prompts.pathReference.system': '{file} (Pi System Prompt)',
+    'prompts.pathReference.projectMissing': 'No project path selected',
+    'prompts.pathReference.notLoaded': 'Loading path…',
+    'prompts.pathReference.loadFailed': 'Failed to load path',
+    'prompts.pathReference.toast.inserted': 'Rule reference inserted',
     'prompts.subTab.presets': 'Preset pool',
     'prompts.editor.toolbar': 'Markdown toolbar',
     'prompts.editor.collapsePreview': 'Collapse preview',
@@ -241,6 +252,8 @@ const en = Object.freeze({
     'prompts.editor.preview': 'Preview',
     'prompts.editor.previewUnavailable': 'Preview components missing (marked / DOMPurify), please refresh the page',
     'prompts.editor.previewEmpty': 'Nothing to preview yet',
+    'prompts.editor.changeAxis': 'Change navigation axis',
+    'prompts.editor.changeAxisTick': 'Line {line} (+{added} / -{removed})',
     'prompts.presets.title': 'Presets',
     'prompts.presets.hint': 'Manage presets.',
     'prompts.presets.namePlaceholder': 'Preset name',

package/web-ui/modules/i18n/locales/ja.mjs

@@ -233,6 +233,17 @@ const ja = Object.freeze({
     'prompts.subTab.opencode': 'AGENTS.md (OpenCode)',
     'prompts.subTab.project': 'CLAUDE.md',
     'prompts.subTab.system': 'System Prompt (Pi)',
+    'prompts.pathReference.title': 'ルール参照を挿入',
+    'prompts.pathReference.placeholder': 'ルール参照を挿入…',
+    'prompts.pathReference.codex': 'AGENTS.md (Codex)',
+    'prompts.pathReference.opencode': 'AGENTS.md (OpenCode)',
+    'prompts.pathReference.claudeGlobal': 'CLAUDE.md（グローバル）',
+    'prompts.pathReference.claudeProject': 'CLAUDE.md（現在のプロジェクト）',
+    'prompts.pathReference.system': '{file}（Pi System Prompt）',
+    'prompts.pathReference.projectMissing': 'プロジェクトパス未選択',
+    'prompts.pathReference.notLoaded': 'パス読み込み中…',
+    'prompts.pathReference.loadFailed': 'パスの読み込みに失敗しました',
+    'prompts.pathReference.toast.inserted': 'ルール参照を挿入しました',
     'prompts.subTab.presets': 'プリセット',
     'prompts.editor.toolbar': 'Markdown ツールバー',
     'prompts.editor.collapsePreview': 'プレビューを折りたたむ',
@@ -242,6 +253,8 @@ const ja = Object.freeze({
     'prompts.editor.preview': 'プレビュー',
     'prompts.editor.previewUnavailable': 'プレビュー用コンポーネント（marked / DOMPurify）が読み込まれていません。ページを再読み込みしてください',
     'prompts.editor.previewEmpty': 'プレビューする内容がありません',
+    'prompts.editor.changeAxis': '変更ナビゲーション軸',
+    'prompts.editor.changeAxisTick': '{line} 行目（+{added} / -{removed}）',
     'prompts.presets.title': 'プリセット',
     'prompts.presets.hint': 'プリセットを管理します。',
     'prompts.presets.namePlaceholder': 'プリセット名',

package/web-ui/modules/i18n/locales/vi.mjs

@@ -250,6 +250,17 @@ const vi = Object.freeze({
     'prompts.subTab.opencode': 'AGENTS.md (OpenCode)',
     'prompts.subTab.project': 'CLAUDE.md',
     'prompts.subTab.system': 'System Prompt (Pi)',
+    'prompts.pathReference.title': 'Chèn tham chiếu quy tắc',
+    'prompts.pathReference.placeholder': 'Chèn tham chiếu quy tắc…',
+    'prompts.pathReference.codex': 'AGENTS.md (Codex)',
+    'prompts.pathReference.opencode': 'AGENTS.md (OpenCode)',
+    'prompts.pathReference.claudeGlobal': 'CLAUDE.md (Toàn cục)',
+    'prompts.pathReference.claudeProject': 'CLAUDE.md (Dự án hiện tại)',
+    'prompts.pathReference.system': '{file} (System Prompt Pi)',
+    'prompts.pathReference.projectMissing': 'Chưa chọn đường dẫn dự án',
+    'prompts.pathReference.notLoaded': 'Đang tải đường dẫn…',
+    'prompts.pathReference.loadFailed': 'Tải đường dẫn thất bại',
+    'prompts.pathReference.toast.inserted': 'Đã chèn tham chiếu quy tắc',
     'prompts.subTab.presets': 'Kho preset',
     'prompts.editor.toolbar': 'Thanh công cụ Markdown',
     'prompts.editor.collapsePreview': 'Thu gọn bản xem trước',
@@ -259,6 +270,8 @@ const vi = Object.freeze({
     'prompts.editor.preview': 'Xem trước',
     'prompts.editor.previewUnavailable': 'Thư viện xem trước (marked / DOMPurify) chưa được tải, hãy tải lại trang',
     'prompts.editor.previewEmpty': 'Chưa có nội dung để xem trước',
+    'prompts.editor.changeAxis': 'Trục điều hướng thay đổi',
+    'prompts.editor.changeAxisTick': 'Dòng {line} (+{added} / -{removed})',
     'prompts.presets.title': 'Preset',
     'prompts.presets.hint': 'Quản lý preset.',
     'prompts.presets.namePlaceholder': 'Tên preset',

package/web-ui/modules/i18n/locales/zh-tw.mjs

@@ -232,6 +232,17 @@ const zhTw = Object.freeze({
     'prompts.subTab.opencode': 'AGENTS.md (OpenCode)',
     'prompts.subTab.project': 'CLAUDE.md',
     'prompts.subTab.system': 'System Prompt (Pi)',
+    'prompts.pathReference.title': '插入規則引用',
+    'prompts.pathReference.placeholder': '插入規則引用…',
+    'prompts.pathReference.codex': 'AGENTS.md (Codex)',
+    'prompts.pathReference.opencode': 'AGENTS.md (OpenCode)',
+    'prompts.pathReference.claudeGlobal': 'CLAUDE.md（全域）',
+    'prompts.pathReference.claudeProject': 'CLAUDE.md（目前專案）',
+    'prompts.pathReference.system': '{file}（Pi System Prompt）',
+    'prompts.pathReference.projectMissing': '未選擇專案路徑',
+    'prompts.pathReference.notLoaded': '路徑載入中…',
+    'prompts.pathReference.loadFailed': '路徑載入失敗',
+    'prompts.pathReference.toast.inserted': '已插入規則引用',
     'prompts.subTab.presets': '預設池',
     'prompts.editor.toolbar': 'Markdown 工具列',
     'prompts.editor.collapsePreview': '收起預覽',
@@ -241,6 +252,8 @@ const zhTw = Object.freeze({
     'prompts.editor.preview': '預覽',
     'prompts.editor.previewUnavailable': '預覽元件未載入（marked / DOMPurify 缺失），請重新整理頁面',
     'prompts.editor.previewEmpty': '尚無內容可預覽',
+    'prompts.editor.changeAxis': '改動導覽軸',
+    'prompts.editor.changeAxisTick': '第 {line} 行（+{added} / -{removed}）',
     'prompts.presets.title': '預設池',
     'prompts.presets.hint': '管理預設。',
     'prompts.presets.namePlaceholder': '預設名稱',

package/web-ui/modules/i18n/locales/zh.mjs

@@ -232,6 +232,17 @@ const zh = Object.freeze({
     'prompts.subTab.opencode': 'AGENTS.md (OpenCode)',
     'prompts.subTab.project': 'CLAUDE.md',
     'prompts.subTab.system': 'System Prompt (Pi)',
+    'prompts.pathReference.title': '插入规则引用',
+    'prompts.pathReference.placeholder': '插入规则引用…',
+    'prompts.pathReference.codex': 'AGENTS.md (Codex)',
+    'prompts.pathReference.opencode': 'AGENTS.md (OpenCode)',
+    'prompts.pathReference.claudeGlobal': 'CLAUDE.md（全局）',
+    'prompts.pathReference.claudeProject': 'CLAUDE.md（当前项目）',
+    'prompts.pathReference.system': '{file}（Pi System Prompt）',
+    'prompts.pathReference.projectMissing': '未选择项目路径',
+    'prompts.pathReference.notLoaded': '路径加载中…',
+    'prompts.pathReference.loadFailed': '路径加载失败',
+    'prompts.pathReference.toast.inserted': '已插入规则引用',
     'prompts.subTab.presets': '预设池',
     'prompts.editor.toolbar': 'Markdown 工具栏',
     'prompts.editor.collapsePreview': '收起预览',
@@ -241,6 +252,8 @@ const zh = Object.freeze({
     'prompts.editor.preview': '预览',
     'prompts.editor.previewUnavailable': '预览组件未加载（marked / DOMPurify 缺失），请刷新页面',
     'prompts.editor.previewEmpty': '暂无内容可预览',
+    'prompts.editor.changeAxis': '改动导航轴',
+    'prompts.editor.changeAxisTick': '第 {line} 行（+{added} / -{removed}）',
     'prompts.presets.title': '预设池',
     'prompts.presets.hint': '管理预设。',
     'prompts.presets.namePlaceholder': '预设名称',

package/web-ui/partials/index/panel-prompts.html

@@ -44,6 +44,17 @@
                             </span>
                         </div>
                         <div class="prompts-editor-actions">
+                            <div class="prompts-editor-group prompts-editor-group--pathref">
+                                <select
+                                    class="form-input prompts-path-reference-select"
+                                    :disabled="agentsLoading || agentsSaving || agentsDiffVisible || promptsPathReferenceLoading"
+                                    :title="t('prompts.pathReference.title')"
+                                    @focus="loadPromptsPathReferences()"
+                                    @change="insertPromptPathReference($event.target.value, 'agents', $event)">
+                                    <option value="">{{ t('prompts.pathReference.placeholder') }}</option>
+                                    <option v-for="opt in promptsPathReferenceOptionList()" :key="opt.id" :value="opt.id" :disabled="opt.disabled">{{ opt.label }}</option>
+                                </select>
+                            </div>
                             <div class="prompts-editor-group prompts-editor-group--secondary">
                                 <button
                                     class="btn-mini"
@@ -189,15 +200,20 @@
                             <div v-else-if="agentsDiffError" class="state-message error">{{ agentsDiffError }}</div>
                             <div v-else-if="agentsDiffTruncated" class="agents-diff-empty">{{ t('diff.tooLargeSkip') }}</div>
                             <div v-else-if="!agentsDiffHasChanges" class="agents-diff-empty">{{ t('diff.noChanges') }}</div>
-                            <div v-else class="agents-diff-view agents-diff-editor">
-                                <div
-                                    v-for="(line, index) in agentsDiffLines"
-                                    :key="line.key || (line.type + '-' + index)"
-                                    :class="['agents-diff-line', line.type]">
-                                    <span class="agents-diff-line-sign">
-                                        {{ line.type === 'add' ? '+' : (line.type === 'del' ? '-' : ' ') }}
-                                    </span>
-                                    <span class="agents-diff-line-text">{{ line.value }}</span>
+                            <div v-else class="prompts-diff-frame">
+                                <div v-if="agentsChangeAxis.ticks.length" class="prompts-change-axis prompts-change-axis--diff" role="navigation" :aria-label="t('prompts.editor.changeAxis')">
+                                    <button v-for="(tick, index) in agentsChangeAxis.ticks" :key="'agents-diff-axis-' + index" type="button" class="prompts-change-tick" :class="'prompts-change-tick--' + tick.kind" :style="{ top: tick.top + '%', height: tick.height + '%' }" :title="t('prompts.editor.changeAxisTick', { line: tick.startLine, added: tick.added, removed: tick.removed })" @click="jumpToPromptsChangeTick('agents', tick)"></button>
+                                </div>
+                                <div class="agents-diff-view agents-diff-editor" ref="promptsAgentsDiffView">
+                                    <div
+                                        v-for="(line, index) in agentsDiffLines"
+                                        :key="line.key || (line.type + '-' + index)"
+                                        :class="['agents-diff-line', line.type]">
+                                        <span class="agents-diff-line-sign">
+                                            {{ line.type === 'add' ? '+' : (line.type === 'del' ? '-' : ' ') }}
+                                        </span>
+                                        <span class="agents-diff-line-text">{{ line.value }}</span>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -270,6 +286,17 @@
                                 </span>
                             </div>
                             <div class="prompts-editor-actions">
+                                <div class="prompts-editor-group prompts-editor-group--pathref">
+                                    <select
+                                        class="form-input prompts-path-reference-select"
+                                        :disabled="sysPromptLoading || sysPromptSaving || sysPromptDiffVisible || promptsPathReferenceLoading"
+                                        :title="t('prompts.pathReference.title')"
+                                        @focus="loadPromptsPathReferences()"
+                                        @change="insertPromptPathReference($event.target.value, 'sys', $event)">
+                                        <option value="">{{ t('prompts.pathReference.placeholder') }}</option>
+                                        <option v-for="opt in promptsPathReferenceOptionList()" :key="opt.id" :value="opt.id" :disabled="opt.disabled">{{ opt.label }}</option>
+                                    </select>
+                                </div>
                                 <div class="prompts-editor-group prompts-editor-group--secondary">
                                     <button class="btn-mini" @click="exportSysPromptContent" :disabled="sysPromptLoading || sysPromptSaving || !sysPromptContent" :title="t('modal.agents.export')">
                                         <svg class="btn-icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12M8 11l4 4 4-4M4 17v2h16v-2"/></svg>
@@ -331,7 +358,11 @@
                                 <div v-else-if="sysPromptDiffError" class="state-message error">{{ sysPromptDiffError }}</div>
                                 <div v-else-if="sysPromptDiffTruncated" class="agents-diff-empty">{{ t('diff.tooLargeSkip') }}</div>
                                 <div v-else-if="!sysPromptDiffHasChangesValue" class="agents-diff-empty">{{ t('diff.noChanges') }}</div>
-                                <div v-else class="agents-diff-view agents-diff-editor">
+                            <div v-else class="prompts-diff-frame">
+                                <div v-if="sysChangeAxis.ticks.length" class="prompts-change-axis prompts-change-axis--diff" role="navigation" :aria-label="t('prompts.editor.changeAxis')">
+                                    <button v-for="(tick, index) in sysChangeAxis.ticks" :key="'sys-diff-axis-' + index" type="button" class="prompts-change-tick" :class="'prompts-change-tick--' + tick.kind" :style="{ top: tick.top + '%', height: tick.height + '%' }" :title="t('prompts.editor.changeAxisTick', { line: tick.startLine, added: tick.added, removed: tick.removed })" @click="jumpToPromptsChangeTick('sys', tick)"></button>
+                                </div>
+                                <div class="agents-diff-view agents-diff-editor" ref="promptsSysDiffView">
                                     <div
                                         v-for="(line, index) in sysPromptDiffLines"
                                         :key="'sys-prompt-diff-' + index"
@@ -343,6 +374,7 @@
                                     </div>
                                 </div>
                             </div>
+                        </div>
                             <div class="prompts-md-toolbar" role="toolbar" :aria-label="t('prompts.editor.toolbar')">
                                 <div class="prompts-md-toolbar-group prompts-md-toolbar-group--view">
                                     <div v-if="promptsPreviewEnabled" class="prompts-mobile-view-switch" role="tablist" :aria-label="t('prompts.editor.previewToggle')">

package/web-ui/res/web-ui-render.precompiled.js

@@ -6953,6 +6953,24 @@ return function render(_ctx, _cache) {
                             : _createCommentVNode("v-if", true)
                         ]),
                         _createElementVNode("div", { class: "prompts-editor-actions" }, [
+                          _createElementVNode("div", { class: "prompts-editor-group prompts-editor-group--pathref" }, [
+                            _createElementVNode("select", {
+                              class: "form-input prompts-path-reference-select",
+                              disabled: _ctx.agentsLoading || _ctx.agentsSaving || _ctx.agentsDiffVisible || _ctx.promptsPathReferenceLoading,
+                              title: _ctx.t('prompts.pathReference.title'),
+                              onFocus: $event => (_ctx.loadPromptsPathReferences()),
+                              onChange: $event => (_ctx.insertPromptPathReference($event.target.value, 'agents', $event))
+                            }, [
+                              _createElementVNode("option", { value: "" }, _toDisplayString(_ctx.t('prompts.pathReference.placeholder')), 1 /* TEXT */),
+                              (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.promptsPathReferenceOptionList(), (opt) => {
+                                return (_openBlock(), _createElementBlock("option", {
+                                  key: opt.id,
+                                  value: opt.id,
+                                  disabled: opt.disabled
+                                }, _toDisplayString(opt.label), 9 /* TEXT, PROPS */, ["value", "disabled"]))
+                              }), 128 /* KEYED_FRAGMENT */))
+                            ], 40 /* PROPS, NEED_HYDRATION */, ["disabled", "title", "onFocus", "onChange"])
+                          ]),
                           _createElementVNode("div", { class: "prompts-editor-group prompts-editor-group--secondary" }, [
                             _createElementVNode("button", {
                               class: "btn-mini",
@@ -7300,17 +7318,41 @@ return function render(_ctx, _cache) {
                                         }, _toDisplayString(_ctx.t('diff.noChanges')), 1 /* TEXT */))
                                       : (_openBlock(), _createElementBlock("div", {
                                           key: 5,
-                                          class: "agents-diff-view agents-diff-editor"
+                                          class: "prompts-diff-frame"
                                         }, [
-                                          (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.agentsDiffLines, (line, index) => {
-                                            return (_openBlock(), _createElementBlock("div", {
-                                              key: line.key || (line.type + '-' + index),
-                                              class: _normalizeClass(['agents-diff-line', line.type])
-                                            }, [
-                                              _createElementVNode("span", { class: "agents-diff-line-sign" }, _toDisplayString(line.type === 'add' ? '+' : (line.type === 'del' ? '-' : ' ')), 1 /* TEXT */),
-                                              _createElementVNode("span", { class: "agents-diff-line-text" }, _toDisplayString(line.value), 1 /* TEXT */)
-                                            ], 2 /* CLASS */))
-                                          }), 128 /* KEYED_FRAGMENT */))
+                                          (_ctx.agentsChangeAxis.ticks.length)
+                                            ? (_openBlock(), _createElementBlock("div", {
+                                                key: 0,
+                                                class: "prompts-change-axis prompts-change-axis--diff",
+                                                role: "navigation",
+                                                "aria-label": _ctx.t('prompts.editor.changeAxis')
+                                              }, [
+                                                (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.agentsChangeAxis.ticks, (tick, index) => {
+                                                  return (_openBlock(), _createElementBlock("button", {
+                                                    key: 'agents-diff-axis-' + index,
+                                                    type: "button",
+                                                    class: _normalizeClass(["prompts-change-tick", 'prompts-change-tick--' + tick.kind]),
+                                                    style: _normalizeStyle({ top: tick.top + '%', height: tick.height + '%' }),
+                                                    title: _ctx.t('prompts.editor.changeAxisTick', { line: tick.startLine, added: tick.added, removed: tick.removed }),
+                                                    onClick: $event => (_ctx.jumpToPromptsChangeTick('agents', tick))
+                                                  }, null, 14 /* CLASS, STYLE, PROPS */, ["title", "onClick"]))
+                                                }), 128 /* KEYED_FRAGMENT */))
+                                              ], 8 /* PROPS */, ["aria-label"]))
+                                            : _createCommentVNode("v-if", true),
+                                          _createElementVNode("div", {
+                                            class: "agents-diff-view agents-diff-editor",
+                                            ref: "promptsAgentsDiffView"
+                                          }, [
+                                            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.agentsDiffLines, (line, index) => {
+                                              return (_openBlock(), _createElementBlock("div", {
+                                                key: line.key || (line.type + '-' + index),
+                                                class: _normalizeClass(['agents-diff-line', line.type])
+                                              }, [
+                                                _createElementVNode("span", { class: "agents-diff-line-sign" }, _toDisplayString(line.type === 'add' ? '+' : (line.type === 'del' ? '-' : ' ')), 1 /* TEXT */),
+                                                _createElementVNode("span", { class: "agents-diff-line-text" }, _toDisplayString(line.value), 1 /* TEXT */)
+                                              ], 2 /* CLASS */))
+                                            }), 128 /* KEYED_FRAGMENT */))
+                                          ], 512 /* NEED_PATCH */)
                                         ]))
                             ]))
                           : _createCommentVNode("v-if", true),
@@ -7472,6 +7514,24 @@ return function render(_ctx, _cache) {
                               : _createCommentVNode("v-if", true)
                           ]),
                           _createElementVNode("div", { class: "prompts-editor-actions" }, [
+                            _createElementVNode("div", { class: "prompts-editor-group prompts-editor-group--pathref" }, [
+                              _createElementVNode("select", {
+                                class: "form-input prompts-path-reference-select",
+                                disabled: _ctx.sysPromptLoading || _ctx.sysPromptSaving || _ctx.sysPromptDiffVisible || _ctx.promptsPathReferenceLoading,
+                                title: _ctx.t('prompts.pathReference.title'),
+                                onFocus: $event => (_ctx.loadPromptsPathReferences()),
+                                onChange: $event => (_ctx.insertPromptPathReference($event.target.value, 'sys', $event))
+                              }, [
+                                _createElementVNode("option", { value: "" }, _toDisplayString(_ctx.t('prompts.pathReference.placeholder')), 1 /* TEXT */),
+                                (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.promptsPathReferenceOptionList(), (opt) => {
+                                  return (_openBlock(), _createElementBlock("option", {
+                                    key: opt.id,
+                                    value: opt.id,
+                                    disabled: opt.disabled
+                                  }, _toDisplayString(opt.label), 9 /* TEXT, PROPS */, ["value", "disabled"]))
+                                }), 128 /* KEYED_FRAGMENT */))
+                              ], 40 /* PROPS, NEED_HYDRATION */, ["disabled", "title", "onFocus", "onChange"])
+                            ]),
                             _createElementVNode("div", { class: "prompts-editor-group prompts-editor-group--secondary" }, [
                               _createElementVNode("button", {
                                 class: "btn-mini",
@@ -7725,17 +7785,41 @@ return function render(_ctx, _cache) {
                                           }, _toDisplayString(_ctx.t('diff.noChanges')), 1 /* TEXT */))
                                         : (_openBlock(), _createElementBlock("div", {
                                             key: 5,
-                                            class: "agents-diff-view agents-diff-editor"
+                                            class: "prompts-diff-frame"
                                           }, [
-                                            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.sysPromptDiffLines, (line, index) => {
-                                              return (_openBlock(), _createElementBlock("div", {
-                                                key: 'sys-prompt-diff-' + index,
-                                                class: _normalizeClass(['agents-diff-line', line.type])
-                                              }, [
-                                                _createElementVNode("span", { class: "agents-diff-line-sign" }, _toDisplayString(line.type === 'add' ? '+' : (line.type === 'del' ? '-' : ' ')), 1 /* TEXT */),
-                                                _createElementVNode("span", { class: "agents-diff-line-text" }, _toDisplayString(line.value), 1 /* TEXT */)
-                                              ], 2 /* CLASS */))
-                                            }), 128 /* KEYED_FRAGMENT */))
+                                            (_ctx.sysChangeAxis.ticks.length)
+                                              ? (_openBlock(), _createElementBlock("div", {
+                                                  key: 0,
+                                                  class: "prompts-change-axis prompts-change-axis--diff",
+                                                  role: "navigation",
+                                                  "aria-label": _ctx.t('prompts.editor.changeAxis')
+                                                }, [
+                                                  (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.sysChangeAxis.ticks, (tick, index) => {
+                                                    return (_openBlock(), _createElementBlock("button", {
+                                                      key: 'sys-diff-axis-' + index,
+                                                      type: "button",
+                                                      class: _normalizeClass(["prompts-change-tick", 'prompts-change-tick--' + tick.kind]),
+                                                      style: _normalizeStyle({ top: tick.top + '%', height: tick.height + '%' }),
+                                                      title: _ctx.t('prompts.editor.changeAxisTick', { line: tick.startLine, added: tick.added, removed: tick.removed }),
+                                                      onClick: $event => (_ctx.jumpToPromptsChangeTick('sys', tick))
+                                                    }, null, 14 /* CLASS, STYLE, PROPS */, ["title", "onClick"]))
+                                                  }), 128 /* KEYED_FRAGMENT */))
+                                                ], 8 /* PROPS */, ["aria-label"]))
+                                              : _createCommentVNode("v-if", true),
+                                            _createElementVNode("div", {
+                                              class: "agents-diff-view agents-diff-editor",
+                                              ref: "promptsSysDiffView"
+                                            }, [
+                                              (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.sysPromptDiffLines, (line, index) => {
+                                                return (_openBlock(), _createElementBlock("div", {
+                                                  key: 'sys-prompt-diff-' + index,
+                                                  class: _normalizeClass(['agents-diff-line', line.type])
+                                                }, [
+                                                  _createElementVNode("span", { class: "agents-diff-line-sign" }, _toDisplayString(line.type === 'add' ? '+' : (line.type === 'del' ? '-' : ' ')), 1 /* TEXT */),
+                                                  _createElementVNode("span", { class: "agents-diff-line-text" }, _toDisplayString(line.value), 1 /* TEXT */)
+                                                ], 2 /* CLASS */))
+                                              }), 128 /* KEYED_FRAGMENT */))
+                                            ], 512 /* NEED_PATCH */)
                                           ]))
                               ]))
                             : _createCommentVNode("v-if", true),

package/web-ui/styles/prompts-editor.css

@@ -291,6 +291,79 @@
     max-width: 100%;
 }
 
+
+/*
+ * Change axis: clickable per-hunk navigation strip rendered on the
+ * right edge of the edit pane (edit mode) and of the diff frame
+ * (diff preview mode). Ticks are positioned by percentage of the
+ * content line space (edit) or of the rendered rows (diff).
+ */
+.prompts-change-axis {
+    position: absolute;
+    top: 6px;
+    bottom: 6px;
+    right: 2px;
+    width: 10px;
+    z-index: 3;
+    pointer-events: none;
+}
+
+.prompts-change-tick {
+    position: absolute;
+    left: 0;
+    right: 0;
+    min-height: 8px;
+    padding: 0;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    pointer-events: auto;
+}
+
+.prompts-change-tick:focus-visible {
+    outline: 2px solid var(--color-brand);
+    outline-offset: 1px;
+}
+
+.prompts-change-tick--add {
+    background: rgba(57, 181, 97, 0.5);
+}
+
+.prompts-change-tick--add:hover,
+.prompts-change-tick--add:focus-visible {
+    background: rgba(57, 181, 97, 0.85);
+}
+
+.prompts-change-tick--del {
+    background: rgba(220, 95, 108, 0.5);
+}
+
+.prompts-change-tick--del:hover,
+.prompts-change-tick--del:focus-visible {
+    background: rgba(220, 95, 108, 0.85);
+}
+
+.prompts-change-tick--mixed {
+    background: linear-gradient(180deg,
+        rgba(220, 95, 108, 0.5) 0%,
+        rgba(220, 95, 108, 0.5) 50%,
+        rgba(57, 181, 97, 0.5) 50%,
+        rgba(57, 181, 97, 0.5) 100%);
+}
+
+.prompts-change-tick--mixed:hover,
+.prompts-change-tick--mixed:focus-visible {
+    background: linear-gradient(180deg,
+        rgba(220, 95, 108, 0.85) 0%,
+        rgba(220, 95, 108, 0.85) 50%,
+        rgba(57, 181, 97, 0.85) 50%,
+        rgba(57, 181, 97, 0.85) 100%);
+}
+
+.prompts-diff-frame {
+    position: relative;
+}
+
 /* Mobile: force single column and edit/preview tab switching */
 @media (max-width: 767.98px) {
     .prompts-mobile-view-switch {
@@ -317,4 +390,25 @@
     .prompts-split-collapse-btn {
         display: none;
     }
+
+    .prompts-change-tick {
+        min-height: 12px;
+    }
+}
+
+
+.prompts-editor-group--pathref .prompts-path-reference-select {
+    width: auto;
+    max-width: 190px;
+    min-width: 120px;
+    padding: 5px 8px;
+    font-size: var(--font-size-caption);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    flex-shrink: 1;
+}
+
+.prompts-editor-group--pathref .prompts-path-reference-select:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
 }