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

package/web-ui/app.js

@@ -102,6 +102,16 @@ document.addEventListener('DOMContentLoaded', () => {
                 showConfigTemplateModal: false,
                 showAgentsModal: false,
                 promptsSubTab: 'codex',
+                promptsPreviewEnabled: true,
+                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: '',
+                sysPromptHighlightHtml: '',
+                agentsPreviewHtml: '',
+                sysPromptPreviewHtml: '',
                 projectClaudeMdPath: '',
                 promptHistoryVisible: false,
                 promptHistoryLoading: false,
@@ -812,6 +822,30 @@ document.addEventListener('DOMContentLoaded', () => {
                     if (typeof this.loadPromptsTabContent === 'function') this.loadPromptsTabContent();
                 }
             },
+            agentsContent() {
+                if (typeof this.schedulePromptsEditorRefresh === 'function') this.schedulePromptsEditorRefresh('agents');
+            },
+            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/index.html

@@ -8,6 +8,9 @@
     <link rel="apple-touch-icon" href="/res/logo-pack.webp">
     <script src="/res/vue.runtime.global.prod.js"></script>
     <script src="/res/json5.min.js"></script>
+    <script src="/res/highlight.min.js"></script>
+    <script src="/res/marked.min.js"></script>
+    <script src="/res/purify.min.js"></script>
     <link rel="stylesheet" href="/web-ui/styles.css">
 </head>
 <body>

package/web-ui/logic.markdown-editor.mjs

@@ -0,0 +1,77 @@
+/**
+ * Pure logic for the prompts-panel Markdown editor.
+ * No DOM access in this module so every function stays unit-testable.
+ *
+ * Syntax highlighting delegates to the vendored highlight.js UMD build
+ * (web-ui/res/highlight.min.js, "markdown" grammar is included in the
+ * common build) and the rendered highlight markup is layered behind a
+ * transparent textarea. Preview rendering delegates to the vendored
+ * marked + DOMPurify pair; raw markdown may embed arbitrary HTML, so
+ * sanitize is mandatory before the result reaches v-html.
+ */
+
+const HIGHLIGHT_MAX_CHARS = 200000;
+const HTML_ESCAPE_MAP = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+};
+
+
+let hasWarnedHighlightFallback = false;
+
+export function escapeHtmlText(text) {
+    return String(text === null || text === undefined ? '' : text)
+        .replace(/[&<>"']/g, (ch) => HTML_ESCAPE_MAP[ch]);
+}
+
+function plainHighlightFallback(text) {
+    if (!hasWarnedHighlightFallback) {
+        hasWarnedHighlightFallback = true;
+        // eslint-disable-next-line no-console
+        console.warn('prompts editor: highlight.js unavailable, editor falls back to plain text rendering');
+    }
+    return escapeHtmlText(text) + '\n';
+}
+
+/**
+ * Produce the highlighted HTML layer for a markdown source string.
+ * highlight.js escapes HTML entities itself; the trailing newline keeps
+ * the <pre> backdrop visually aligned with the textarea's final line.
+ * Returns escaped plain text when hljs is missing or the input exceeds
+ * the highlight budget (observable degradation, never a fake success).
+ */
+export function highlightMarkdownText(text, hljs) {
+    const source = typeof text === 'string' ? text : '';
+    if (!hljs || typeof hljs.highlight !== 'function' || typeof hljs.getLanguage !== 'function' || !hljs.getLanguage('markdown')) {
+        return plainHighlightFallback(source);
+    }
+    if (source.length > HIGHLIGHT_MAX_CHARS) {
+        return plainHighlightFallback(source);
+    }
+    try {
+        return hljs.highlight(source, { language: 'markdown', ignoreUnescapedHTML: true }).value + '\n';
+    } catch (e) {
+        return plainHighlightFallback(source);
+    }
+}
+
+
+/**
+ * Render a markdown preview. Returns a state object instead of raw HTML so
+ * the UI can surface "libs missing" and "empty input" explicitly instead
+ * of faking a successful render.
+ */
+export function buildMarkdownPreviewHtml(text, marked, purify) {
+    const source = typeof text === 'string' ? text : '';
+    if (!source.trim()) {
+        return { empty: true, html: '' };
+    }
+    if (!marked || typeof marked.parse !== 'function' || !purify || typeof purify.sanitize !== 'function') {
+        return { unavailable: true, html: '' };
+    }
+    const rawHtml = marked.parse(source, { gfm: true, breaks: false });
+    return { html: purify.sanitize(String(rawHtml)) };
+}

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.computed.session.mjs

@@ -112,30 +112,39 @@ function extractWorkspaceArtifacts(line, target) {
     }
 }
 
-function buildWorkspaceBriefText(summary, labels = {}) {
+function buildWorkspaceBriefText(summary, labels = {}, metricLabels = {}) {
     if (!summary || !summary.available) return '';
     const label = (key, fallback) => (labels && labels[key]) || fallback;
+    const metricLabel = (key, fallback) => (metricLabels && metricLabels[key]) || fallback;
     const lines = [
         `# ${label('title', 'Session workspace brief')}`,
         '',
         `${label('source', 'Source')}: ${summary.sourceLabel || summary.source || '-'}`,
         `${label('messages', 'Messages')}: ${summary.messageCount}`,
+        `${metricLabel('userLabel', 'User')}: ${summary.roleCounts.user}`,
+        `${metricLabel('assistantLabel', 'Assistant')}: ${summary.roleCounts.assistant}`,
+        `${metricLabel('commandsLabel', 'Commands')}: ${summary.commands.length}`,
+        `${metricLabel('artifactsLabel', 'Artifacts')}: ${summary.files.length + summary.links.length}`,
+        `${metricLabel('risksLabel', 'Risks')}: ${summary.risks.length + summary.nextSteps.length}`,
         `${label('path', 'Path')}: ${summary.cwd || '-'}`,
         ''
     ];
     const sections = [
-        ['signals', label('signals', 'Signals'), summary.signals],
-        ['commands', label('commands', 'Reusable commands'), summary.commands],
-        ['files', label('files', 'Files'), summary.files],
-        ['links', label('links', 'Links'), summary.links],
-        ['risks', label('risks', 'Risks / blockers'), summary.risks],
-        ['nextSteps', label('nextSteps', 'Next steps'), summary.nextSteps]
+        ['signals', label('signals', 'Signals'), summary.signals, label('noneSignals', 'No strong signals yet')],
+        ['commands', label('commands', 'Reusable commands'), summary.commands, label('noneCommands', 'No command signals')],
+        ['files', label('files', 'Files'), summary.files, label('noneFiles', 'No file signals')],
+        ['links', label('links', 'Links'), summary.links, label('noneLinks', 'No link signals')],
+        ['risks', label('risks', 'Risks / blockers'), summary.risks, label('noneRisks', 'No risks or todos detected')],
+        ['nextSteps', label('nextSteps', 'Next steps'), summary.nextSteps, label('noneRisks', 'No risks or todos detected')]
     ];
-    for (const [, sectionTitle, items] of sections) {
-        if (!Array.isArray(items) || !items.length) continue;
+    for (const [, sectionTitle, items, emptyText] of sections) {
         lines.push(`## ${sectionTitle}`);
-        for (const item of items) {
-            lines.push(`- ${item}`);
+        if (Array.isArray(items) && items.length) {
+            for (const item of items) {
+                lines.push(`- ${item}`);
+            }
+        } else {
+            lines.push(`- ${emptyText}`);
         }
         lines.push('');
     }
@@ -231,7 +240,13 @@ export function buildSessionWorkspaceSummary(session, messages, options = {}) {
         risks,
         nextSteps
     };
-    summary.briefText = buildWorkspaceBriefText(summary, options.briefLabels || {});
+    summary.briefText = buildWorkspaceBriefText(summary, options.briefLabels || {}, {
+        userLabel: options.userLabel,
+        assistantLabel: options.assistantLabel,
+        commandsLabel: options.commandsLabel,
+        artifactsLabel: options.artifactsLabel,
+        risksLabel: options.risksLabel
+    });
     return summary;
 }
 
@@ -474,7 +489,12 @@ export function createSessionComputed() {
                     files: t ? t('sessions.workspace.files') : 'Files',
                     links: t ? t('sessions.workspace.links') : 'Links',
                     risks: t ? t('sessions.workspace.risks') : 'Risks / blockers',
-                    nextSteps: t ? t('sessions.workspace.nextSteps') : 'Next steps'
+                    nextSteps: t ? t('sessions.workspace.nextSteps') : 'Next steps',
+                    noneSignals: t ? t('sessions.workspace.empty') : 'No strong signals yet',
+                    noneCommands: t ? t('sessions.workspace.noneCommands') : 'No command signals',
+                    noneFiles: t ? t('sessions.workspace.noneFiles') : 'No file signals',
+                    noneLinks: t ? t('sessions.workspace.noneLinks') : 'No link signals',
+                    noneRisks: t ? t('sessions.workspace.noneRisks') : 'No risks or todos detected'
                 }
             });
         },

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

@@ -13,6 +13,7 @@ import {
 } from './app.constants.mjs';
 import { createAgentsMethods } from './app.methods.agents.mjs';
 import { createSystemPromptMethods } from './app.methods.system-prompt.mjs';
+import { createPromptsEditorMethods } from './app.methods.prompts-editor.mjs';
 import { createClaudeConfigMethods } from './app.methods.claude-config.mjs';
 import { createCodexConfigMethods } from './app.methods.codex-config.mjs';
 import { createInstallMethods } from './app.methods.install.mjs';
@@ -51,6 +52,7 @@ import {
 export function createAppMethods() {
     return {
         ...createI18nMethods(),
+        ...createPromptsEditorMethods(),
         ...createWebhookMethods(),
         ...createStartupClaudeMethods({
             api,