codexmate 0.1.22 → 0.1.23

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.23",
   "description": "Codex/Claude Code/OpenClaw 配置、会话与任务编排 CLI + Web 工具",
   "main": "cli.js",
   "bin": {

package/web-ui/app.js

@@ -103,7 +103,9 @@ 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,
                 agentsHighlightHtml: '',
@@ -826,6 +828,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,187 @@
+/**
+ * Prompts-panel change axis: aggregates the line-level diff between the
+ * saved original content and the current editor content (or between the
+ * rendered diff rows) into clickable tick positions. Pure functions only.
+ *
+ * The diff engine itself is reused from logic.agents-diff.mjs (LCS for
+ * small inputs, window-sync for large ones) so hunk line numbers stay
+ * consistent with the red/green preview flow.
+ */
+
+import { buildLineDiff } from './logic.agents-diff.mjs';
+
+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 editor view.
+ *
+ * @param {string} baseText saved original content
+ * @param {string} currentText current editor content
+ * @returns {{ ticks: Array<object>, totalLines: number, truncated: boolean,
+ *            stats: { added: number, removed: number, unchanged: number } }}
+ */
+export function buildPromptsChangeAxis(baseText, currentText) {
+    const diff = buildLineDiff(baseText, currentText);
+    const totalLines = Math.max(1, diff.newLineCount);
+    const runs = [];
+    let run = null;
+    let newCursor = 0;
+    const flushRun = () => {
+        if (run) {
+            runs.push(run);
+            run = null;
+        }
+    };
+
+    for (const line of diff.lines) {
+        if (!line || !isChangedDiffType(line.type)) {
+            flushRun();
+            if (line && line.type === 'context' && typeof line.newNumber === 'number') {
+                newCursor = line.newNumber;
+            }
+            continue;
+        }
+        if (!run) {
+            run = {
+                anchor: line.type === 'add' && typeof line.newNumber === 'number'
+                    ? line.newNumber - 1
+                    : newCursor,
+                startLine: line.type === 'add' && typeof line.newNumber === 'number'
+                    ? line.newNumber
+                    : newCursor + 1,
+                added: 0,
+                removed: 0
+            };
+        }
+        if (line.type === 'add') {
+            run.added += 1;
+        } else {
+            run.removed += 1;
+        }
+    }
+    flushRun();
+
+    const { ticks, truncated } = capAxisTicks(runs, { total: totalLines });
+    return {
+        ticks,
+        totalLines,
+        truncated,
+        stats: diff.stats
+    };
+}
+
+/**
+ * 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
+    };
+}
+
+/**
+ * Proportional scroll position for jumping to a line inside the editor
+ * textarea. The textarea scrolls internally (min-height contract in
+ * prompts-editor.css), so scrollTop maps linearly onto the line space.
+ *
+ * @param {number} scrollHeight textarea scrollHeight
+ * @param {number} clientHeight textarea clientHeight
+ * @param {number} lineIndex 1-based target line in the current content
+ * @param {number} totalLines total line count of the current content
+ * @returns {number} clamped scrollTop value
+ */
+export function computePromptsAxisScrollTop(scrollHeight, clientHeight, lineIndex, totalLines) {
+    const maxScroll = Math.max(0, (Number(scrollHeight) || 0) - (Number(clientHeight) || 0));
+    if (maxScroll <= 0) {
+        return 0;
+    }
+    const safeTotal = Math.max(1, Number(totalLines) || 1);
+    const safeLine = Math.max(1, Number(lineIndex) || 1);
+    const ratio = Math.min(1, Math.max(0, (safeLine - 1) / Math.max(1, safeTotal - 1)));
+    return Math.min(maxScroll, Math.round(maxScroll * ratio));
+}

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

@@ -7,37 +7,68 @@
  * State contract (declared in app.js data()):
  *   promptsPreviewEnabled, promptsPreviewCollapsed, promptsMobileView,
  *   promptsPreviewLibsMissing, agentsHighlightHtml, sysPromptHighlightHtml,
- *   agentsPreviewHtml, sysPromptPreviewHtml
+ *   agentsPreviewHtml, sysPromptPreviewHtml, agentsChangeAxis, sysChangeAxis
  * 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 {
+    buildPromptsChangeAxis,
+    buildPromptsDiffAxis,
+    computePromptsAxisScrollTop
+} 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;
@@ -138,6 +169,145 @@ 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
+                };
+                this.consumePromptsAxisPendingJump(key);
+                return;
+            }
+            this.clearPromptsAxisPendingJump(key);
+            const current = this[meta.contentField];
+            const original = this[meta.originalField];
+            if (typeof current !== 'string' || current === original) {
+                this[meta.axisField] = emptyPromptsChangeAxis();
+                return;
+            }
+            const axis = buildPromptsChangeAxis(typeof original === 'string' ? original : '', current);
+            this[meta.axisField] = {
+                mode: 'edit',
+                ticks: axis.truncated ? [] : axis.ticks,
+                truncated: axis.truncated,
+                totalLines: axis.totalLines,
+                added: Number(axis.stats && axis.stats.added) || 0,
+                removed: Number(axis.stats && axis.stats.removed) || 0
+            };
+        },
+
+        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;
+            }
+            // Edit mode: a tick click opens the red/green comparison view
+            // focused on this hunk, so the user sees WHAT changed (old vs new),
+            // not just where. prepareAgentsDiff / prepareSysPromptDiff are the
+            // same preview entry the save/eye button uses; both settle their
+            // own error state internally and never reject.
+            const canOpenDiff = typeof this[meta.prepareDiffMethod] === 'function'
+                && !this[meta.loadingField]
+                && !this[meta.savingField]
+                && !this[meta.diffLoadingField];
+            if (canOpenDiff) {
+                this._promptsAxisPendingJump = { key, startLine: tick.startLine };
+                this[meta.prepareDiffMethod]();
+                return;
+            }
+            // Fallback when the diff flow is not wired on the context (isolated
+            // method usage): keep the legacy proportional editor scroll so the
+            // click still produces an observable move instead of a silent no-op.
+            const textarea = this.$refs && this.$refs[meta.textareaRef];
+            if (!textarea || typeof textarea.scrollTop !== 'number') {
+                return;
+            }
+            textarea.scrollTop = computePromptsAxisScrollTop(
+                textarea.scrollHeight,
+                textarea.clientHeight,
+                tick.startLine,
+                axis.totalLines
+            );
+            this.syncPromptsOverlayScroll(key);
+        },
+
+        clearPromptsAxisPendingJump(key) {
+            if (this._promptsAxisPendingJump && this._promptsAxisPendingJump.key === key) {
+                this._promptsAxisPendingJump = null;
+            }
+        },
+
+        consumePromptsAxisPendingJump(key) {
+            const pending = this._promptsAxisPendingJump;
+            if (!pending || pending.key !== key) {
+                return;
+            }
+            const meta = this.promptsEditorMeta(key);
+            if (!meta) {
+                this._promptsAxisPendingJump = null;
+                return;
+            }
+            const axis = this[meta.axisField];
+            if (!axis || axis.mode !== 'diff' || !axis.ticks.length) {
+                return;
+            }
+            this._promptsAxisPendingJump = null;
+            const target = axis.ticks.find((tick) => tick.startLine === pending.startLine)
+                || axis.ticks.find((tick) => tick.startLine >= pending.startLine)
+                || axis.ticks[axis.ticks.length - 1];
+            const applyScroll = () => {
+                const view = this.$refs && this.$refs[meta.diffViewRef];
+                const rows = view && view.children ? Array.prototype.slice.call(view.children) : [];
+                const row = rows[target.rowIndex];
+                if (row && typeof row.scrollIntoView === 'function') {
+                    row.scrollIntoView({ block: 'center' });
+                }
+            };
+            if (typeof this.$nextTick === 'function') {
+                this.$nextTick(applyScroll);
+            } else {
+                applyScroll();
+            }
         },
 
         setPromptsMobileView(view) {
@@ -148,6 +318,9 @@ export function createPromptsEditorMethods() {
 
         togglePromptsPreviewCollapsed() {
             this.promptsPreviewCollapsed = !this.promptsPreviewCollapsed;
+            if (typeof this.persistWebUiPreferences === 'function') {
+                this.persistWebUiPreferences({ promptsPreviewCollapsed: this.promptsPreviewCollapsed });
+            }
         }
     };
 }

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

@@ -241,6 +241,9 @@ 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.editor.changeAxisTruncated': 'Too many changed regions; collapsed to summary',
     'prompts.presets.title': 'Presets',
     'prompts.presets.hint': 'Manage presets.',
     'prompts.presets.namePlaceholder': 'Preset name',

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

@@ -242,6 +242,9 @@ 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.editor.changeAxisTruncated': '変更領域が多すぎるため、統計に折りたたまれました',
     'prompts.presets.title': 'プリセット',
     'prompts.presets.hint': 'プリセットを管理します。',
     'prompts.presets.namePlaceholder': 'プリセット名',

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

@@ -259,6 +259,9 @@ 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.editor.changeAxisTruncated': 'Quá nhiều vùng thay đổi; đã thu gọn thành thống kê',
     '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

@@ -241,6 +241,9 @@ 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.editor.changeAxisTruncated': '改動區域過多，已摺疊為統計',
     'prompts.presets.title': '預設池',
     'prompts.presets.hint': '管理預設。',
     'prompts.presets.namePlaceholder': '預設名稱',

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

@@ -241,6 +241,9 @@ 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.editor.changeAxisTruncated': '改动区域过多，已折叠为统计',
     'prompts.presets.title': '预设池',
     'prompts.presets.hint': '管理预设。',
     'prompts.presets.namePlaceholder': '预设名称',

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

@@ -189,15 +189,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>
@@ -228,6 +233,13 @@
                                         @input="onAgentsContentInput"
                                         @scroll="syncPromptsOverlayScroll('agents')"
                                         :placeholder="t(promptsSubTab === 'claude-project' ? 'modal.agents.placeholder.claudeProject' : 'modal.agents.placeholder')"></textarea>
+                                    <div v-if="!agentsDiffVisible && agentsChangeAxis.ticks.length" class="prompts-change-axis" role="navigation" :aria-label="t('prompts.editor.changeAxis')">
+                                        <button v-for="(tick, index) in agentsChangeAxis.ticks" :key="'agents-change-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 v-else-if="!agentsDiffVisible && agentsChangeAxis.truncated" class="prompts-change-axis prompts-change-axis--summary" :title="t('prompts.editor.changeAxisTruncated')">
+                                        <span class="prompts-change-summary add">+{{ agentsChangeAxis.added }}</span>
+                                        <span class="prompts-change-summary del">-{{ agentsChangeAxis.removed }}</span>
+                                    </div>
                                 </div>
                                 <div v-if="promptsPreviewEnabled" class="prompts-preview-pane">
                                     <div v-if="promptsPreviewLibsMissing" class="state-message error">{{ t('prompts.editor.previewUnavailable') }}</div>
@@ -331,7 +343,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 +359,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')">
@@ -369,6 +386,13 @@
                                             :readonly="sysPromptLoading || sysPromptSaving || sysPromptDiffVisible"
                                             @scroll="syncPromptsOverlayScroll('sys')"
                                             :placeholder="t('sysPrompt.placeholder')"></textarea>
+                                        <div v-if="!sysPromptDiffVisible && sysChangeAxis.ticks.length" class="prompts-change-axis" role="navigation" :aria-label="t('prompts.editor.changeAxis')">
+                                            <button v-for="(tick, index) in sysChangeAxis.ticks" :key="'sys-change-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 v-else-if="!sysPromptDiffVisible && sysChangeAxis.truncated" class="prompts-change-axis prompts-change-axis--summary" :title="t('prompts.editor.changeAxisTruncated')">
+                                            <span class="prompts-change-summary add">+{{ sysChangeAxis.added }}</span>
+                                            <span class="prompts-change-summary del">-{{ sysChangeAxis.removed }}</span>
+                                        </div>
                                     </div>
                                     <div v-if="promptsPreviewEnabled" class="prompts-preview-pane">
                                         <div v-if="promptsPreviewLibsMissing" class="state-message error">{{ t('prompts.editor.previewUnavailable') }}</div>

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

@@ -7300,17 +7300,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),
@@ -7400,7 +7424,35 @@ return function render(_ctx, _cache) {
                                 placeholder: _ctx.t(_ctx.promptsSubTab === 'claude-project' ? 'modal.agents.placeholder.claudeProject' : 'modal.agents.placeholder')
                               }, null, 40 /* PROPS, NEED_HYDRATION */, ["onUpdate:modelValue", "readonly", "onInput", "onScroll", "placeholder"]), [
                                 [_vModelText, _ctx.agentsContent]
-                              ])
+                              ]),
+                              (!_ctx.agentsDiffVisible && _ctx.agentsChangeAxis.ticks.length)
+                                ? (_openBlock(), _createElementBlock("div", {
+                                    key: 0,
+                                    class: "prompts-change-axis",
+                                    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-change-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"]))
+                                : (!_ctx.agentsDiffVisible && _ctx.agentsChangeAxis.truncated)
+                                  ? (_openBlock(), _createElementBlock("div", {
+                                      key: 1,
+                                      class: "prompts-change-axis prompts-change-axis--summary",
+                                      title: _ctx.t('prompts.editor.changeAxisTruncated')
+                                    }, [
+                                      _createElementVNode("span", { class: "prompts-change-summary add" }, "+" + _toDisplayString(_ctx.agentsChangeAxis.added), 1 /* TEXT */),
+                                      _createElementVNode("span", { class: "prompts-change-summary del" }, "-" + _toDisplayString(_ctx.agentsChangeAxis.removed), 1 /* TEXT */)
+                                    ], 8 /* PROPS */, ["title"]))
+                                  : _createCommentVNode("v-if", true)
                             ]),
                             (_ctx.promptsPreviewEnabled)
                               ? (_openBlock(), _createElementBlock("div", {
@@ -7725,17 +7777,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),
@@ -7824,7 +7900,35 @@ return function render(_ctx, _cache) {
                                   placeholder: _ctx.t('sysPrompt.placeholder')
                                 }, null, 40 /* PROPS, NEED_HYDRATION */, ["onUpdate:modelValue", "readonly", "onScroll", "placeholder"]), [
                                   [_vModelText, _ctx.sysPromptContent]
-                                ])
+                                ]),
+                                (!_ctx.sysPromptDiffVisible && _ctx.sysChangeAxis.ticks.length)
+                                  ? (_openBlock(), _createElementBlock("div", {
+                                      key: 0,
+                                      class: "prompts-change-axis",
+                                      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-change-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"]))
+                                  : (!_ctx.sysPromptDiffVisible && _ctx.sysChangeAxis.truncated)
+                                    ? (_openBlock(), _createElementBlock("div", {
+                                        key: 1,
+                                        class: "prompts-change-axis prompts-change-axis--summary",
+                                        title: _ctx.t('prompts.editor.changeAxisTruncated')
+                                      }, [
+                                        _createElementVNode("span", { class: "prompts-change-summary add" }, "+" + _toDisplayString(_ctx.sysChangeAxis.added), 1 /* TEXT */),
+                                        _createElementVNode("span", { class: "prompts-change-summary del" }, "-" + _toDisplayString(_ctx.sysChangeAxis.removed), 1 /* TEXT */)
+                                      ], 8 /* PROPS */, ["title"]))
+                                    : _createCommentVNode("v-if", true)
                               ]),
                               (_ctx.promptsPreviewEnabled)
                                 ? (_openBlock(), _createElementBlock("div", {

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

@@ -291,6 +291,104 @@
     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;
+}
+
+.prompts-change-axis--summary {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 2px;
+    width: auto;
+    font-size: 10px;
+    font-weight: var(--font-weight-secondary);
+}
+
+.prompts-change-summary {
+    padding: 0 6px;
+    border-radius: 999px;
+    white-space: nowrap;
+}
+
+.prompts-change-summary.add {
+    color: #2b6a3b;
+    background: rgba(57, 181, 97, 0.12);
+}
+
+.prompts-change-summary.del {
+    color: #8a2f36;
+    background: rgba(220, 95, 108, 0.12);
+}
 /* Mobile: force single column and edit/preview tab switching */
 @media (max-width: 767.98px) {
     .prompts-mobile-view-switch {
@@ -317,4 +415,8 @@
     .prompts-split-collapse-btn {
         display: none;
     }
+
+    .prompts-change-tick {
+        min-height: 12px;
+    }
 }