codexmate 0.1.20 → 0.1.22

package/README.md

@@ -63,7 +63,7 @@ Unlike simple wrappers, Codex Mate acts as a **Local Agent Bridge**:
 - **Pi Provider Config**: Manage Pi providers from the Web UI with lossless round-trip writes to `~/.pi/agent/models.json`, auto-fetched remote model lists, and one-click default provider/model switching via `~/.pi/agent/settings.json`.
 - **Provider Health Cleanup**: Probe local Codex and Claude provider routes, surface failed configs in one modal, and bulk-clean selected broken providers without touching healthy or protected entries.
 - **Skills Marketplace**: A local-first market to share and import skills between different agent apps.
-- **Prompt File Editor**: Unified editor for global and project-level `CLAUDE.md` and `AGENTS.md` with auto-detection of project paths, plus a shared preset pool for reusable prompts.
+- **Prompt File Editor**: Unified editor for global and project-level `CLAUDE.md` and `AGENTS.md` (including OpenCode's `~/.config/opencode/AGENTS.md`) with auto-detection of project paths, plus a shared preset pool for reusable prompts.
 - **Task Orchestrator**: Plan and execute complex tasks with dependency tracking.
 
 ---

package/README.vi.md

@@ -69,7 +69,7 @@ Khác với các wrapper đơn giản, Codex Mate hoạt động như một **Ag
 | **Bridge OpenAI** | ✅ | Chuyển đổi Codex Responses API sang định dạng OpenAI chuẩn |
 | **Kiểm tra sức khỏe Provider** | ✅ | Kiểm tra route provider Codex/Claude, đánh dấu cấu hình lỗi và xóa hàng loạt các provider hỏng đã chọn một cách an toàn |
 | **Mẫu Prompt** | ✅ | Plugin prompt tái sử dụng được với hỗ trợ biến |
-| **Trình sửa tệp prompt** | ✅ | Chỉnh sửa CLAUDE.md / AGENTS.md và dùng kho preset chung. Áp dụng preset chỉ cập nhật editor; cần lưu thủ công để ghi vào tệp. |
+| **Trình sửa tệp prompt** | ✅ | Chỉnh sửa CLAUDE.md / AGENTS.md (bao gồm `~/.config/opencode/AGENTS.md` của OpenCode) và dùng kho preset chung. Áp dụng preset chỉ cập nhật editor; cần lưu thủ công để ghi vào tệp. |
 | **Tích hợp MCP** | ✅ | Expose tool và resource cục bộ qua MCP stdio |
 | **Tự động cập nhật** | ✅ | Cập nhật nhanh qua `codexmate update` |
 

package/README.zh.md

@@ -61,7 +61,7 @@
 - **Pi Provider 配置**：在 Web UI 中管理 Pi 供应商，写入 `~/.pi/agent/models.json` 时无损保留未知字段，支持自动拉取远端模型列表，并可一键切换 `~/.pi/agent/settings.json` 中的默认供应商/模型。
 - **Provider 健康清理**：探测本地 Codex 与 Claude provider 路由，在同一个弹窗里集中展示失败配置，并批量清理已选坏配置，不影响正常或受保护项。
 - **Skills 市场**：本地优先的市场，支持在不同的智能体应用之间共享和导入 Skills。
-- **提示词文件编辑器**：统一编辑全局和项目级 `CLAUDE.md` 与 `AGENTS.md`，支持项目路径自动检测，并提供通用预设池复用 prompt。
+- **提示词文件编辑器**：统一编辑全局和项目级 `CLAUDE.md` 与 `AGENTS.md`（含 OpenCode 的 `~/.config/opencode/AGENTS.md`），支持项目路径自动检测，并提供通用预设池复用 prompt。
 - **任务编排器**：支持带有依赖跟踪的复杂任务规划与执行。
 
 ---

package/cli/agents-files.js

@@ -15,6 +15,7 @@ function createAgentsFileController(deps = {}) {
         CLAUDE_MD_FILE_NAME,
         readOpenclawAgentsFile,
         readOpenclawWorkspaceFile,
+        OPENCODE_CONFIG_DIR,
         backupPromptBeforeWrite
     } = deps;
 
@@ -33,6 +34,7 @@ function createAgentsFileController(deps = {}) {
     if (typeof CLAUDE_MD_FILE_NAME !== 'string' || !CLAUDE_MD_FILE_NAME) throw new Error('createAgentsFileController 缺少 CLAUDE_MD_FILE_NAME');
     if (typeof readOpenclawAgentsFile !== 'function') throw new Error('createAgentsFileController 缺少 readOpenclawAgentsFile');
     if (typeof readOpenclawWorkspaceFile !== 'function') throw new Error('createAgentsFileController 缺少 readOpenclawWorkspaceFile');
+    if (typeof OPENCODE_CONFIG_DIR !== 'string' || !OPENCODE_CONFIG_DIR) throw new Error('createAgentsFileController 缺少 OPENCODE_CONFIG_DIR');
     if (typeof backupPromptBeforeWrite !== 'function' && typeof backupPromptBeforeWrite !== 'undefined') throw new Error('createAgentsFileController 备份回调无效');
 
     function resolveAgentsFilePath(params = {}) {
@@ -236,7 +238,9 @@ function createAgentsFileController(deps = {}) {
         }
         let agentsHistoryBucket = '';
         if (typeof backupPromptBeforeWrite === 'function') {
-            const bucket = 'codex_' + sanitizeHistoryId(String(params.baseDir || '').trim() || 'global');
+            const explicitBucket = typeof params.historyBucket === 'string' ? params.historyBucket.trim() : '';
+            const bucket = explicitBucket
+                || ('codex_' + sanitizeHistoryId(String(params.baseDir || '').trim() || 'global'));
             backupPromptBeforeWrite(bucket, filePath);
             agentsHistoryBucket = bucket;
         }
@@ -254,6 +258,43 @@ function createAgentsFileController(deps = {}) {
         }
     }
 
+
+    function readOpencodeAgentsFile(params = {}) {
+        const baseDir = OPENCODE_CONFIG_DIR;
+        const filePath = path.join(baseDir, AGENTS_FILE_NAME);
+        const lineEndingFallback = os.EOL === '\r\n' ? '\r\n' : '\n';
+
+        if (!fs.existsSync(baseDir)) {
+            return {
+                exists: false,
+                path: filePath,
+                content: '',
+                lineEnding: lineEndingFallback,
+                configDir: baseDir,
+                baseDirMissing: true
+            };
+        }
+
+        const readResult = readAgentsFile({ baseDir, metaOnly: !!params.metaOnly });
+        return {
+            ...readResult,
+            configDir: baseDir
+        };
+    }
+
+    function applyOpencodeAgentsFile(params = {}) {
+        const baseDir = OPENCODE_CONFIG_DIR;
+        ensureDir(baseDir);
+        const result = applyAgentsFile({
+            ...params,
+            baseDir,
+            historyBucket: 'opencode_global'
+        });
+        return {
+            ...result,
+            configDir: baseDir
+        };
+    }
     function normalizeDiffText(input) {
         const safe = typeof input === 'string' ? input : '';
         return normalizeLineEnding(stripUtf8Bom(safe), '\n');
@@ -273,6 +314,8 @@ function createAgentsFileController(deps = {}) {
             readResult = readOpenclawAgentsFile({ metaOnly });
         } else if (context === 'openclaw-workspace') {
             readResult = readOpenclawWorkspaceFile({ ...params, metaOnly });
+        } else if (context === 'opencode') {
+            readResult = readOpencodeAgentsFile({ metaOnly });
         } else if (context === 'codex') {
             readResult = readAgentsFile({ ...params, metaOnly });
         } else {
@@ -310,6 +353,8 @@ function createAgentsFileController(deps = {}) {
         applyClaudeMdFile,
         readAgentsFile,
         applyAgentsFile,
+        readOpencodeAgentsFile,
+        applyOpencodeAgentsFile,
         normalizeDiffText,
         buildAgentsDiff
     };

package/cli.js

@@ -1190,7 +1190,8 @@ function getApiToolConfigWriteTarget(action) {
     ]);
     const opencodeWriteActions = new Set([
         'apply-opencode-config',
-        'update-opencode-selection'
+        'update-opencode-selection',
+        'apply-opencode-agents-file'
     ]);
     const kilocodeWriteActions = new Set([
         'apply-kilocode-config',
@@ -2372,6 +2373,8 @@ const {
     applyClaudeMdFile,
     readAgentsFile,
     applyAgentsFile,
+    readOpencodeAgentsFile,
+    applyOpencodeAgentsFile,
     normalizeDiffText,
     buildAgentsDiff
 } = createAgentsFileController({
@@ -2394,7 +2397,8 @@ const {
     },
     readOpenclawWorkspaceFile() {
         return readOpenclawWorkspaceFile(...arguments);
-    }
+    },
+    OPENCODE_CONFIG_DIR
 });
 
 const {
@@ -13694,6 +13698,12 @@ function createWebServer({ htmlPath, assetsDir, webDir, host, port, openBrowser
                         case 'get-openclaw-agents-file':
                             result = readOpenclawAgentsFile();
                             break;
+                        case 'get-opencode-agents-file':
+                            result = readOpencodeAgentsFile(params || {});
+                            break;
+                        case 'apply-opencode-agents-file':
+                            result = applyOpencodeAgentsFile(params || {});
+                            break;
                         case 'apply-openclaw-agents-file':
                             result = applyOpenclawAgentsFile(params || {});
                             break;

package/package.json

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

package/web-ui/app.js

@@ -102,6 +102,14 @@ document.addEventListener('DOMContentLoaded', () => {
                 showConfigTemplateModal: false,
                 showAgentsModal: false,
                 promptsSubTab: 'codex',
+                promptsPreviewEnabled: true,
+                promptsPreviewCollapsed: false,
+                promptsMobileView: 'edit',
+                promptsPreviewLibsMissing: false,
+                agentsHighlightHtml: '',
+                sysPromptHighlightHtml: '',
+                agentsPreviewHtml: '',
+                sysPromptPreviewHtml: '',
                 projectClaudeMdPath: '',
                 promptHistoryVisible: false,
                 promptHistoryLoading: false,
@@ -812,6 +820,12 @@ 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');
+            },
             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/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.agents.mjs

@@ -33,6 +33,9 @@ function resolveAgentsHistoryBucket(instance) {
         const projectPath = (instance.projectClaudeMdPath || '').trim();
         return 'claude-project_' + sanitizePromptHistoryId(projectPath || 'global');
     }
+    if (subTab === 'opencode') {
+        return 'opencode_global';
+    }
     return 'codex_global';
 }
 
@@ -216,6 +219,13 @@ export function createAgentsMethods(options = {}) {
                 this.agentsModalHint = tr('modal.agents.hint.openclawWorkspaceFile', `Workspace / ${fileName}`, { fileName });
                 return;
             }
+            if (context === 'opencode') {
+                this.agentsContext = 'opencode';
+                this.agentsWorkspaceFileName = '';
+                this.agentsModalTitle = tr('modal.agents.title.opencode', 'OpenCode AGENTS.md 编辑器');
+                this.agentsModalHint = tr('modal.agents.hint.opencode', '保存后会写入 ~/.config/opencode/AGENTS.md。');
+                return;
+            }
             this.agentsContext = context === 'openclaw' ? 'openclaw' : 'codex';
             if (this.agentsContext === 'openclaw') {
                 this.agentsModalTitle = tr('modal.agents.title.openclaw', 'OpenClaw AGENTS.md 编辑器');
@@ -700,6 +710,8 @@ export function createAgentsMethods(options = {}) {
                     }
                 } else if (this.agentsContext === 'openclaw') {
                     action = 'apply-openclaw-agents-file';
+                } else if (this.agentsContext === 'opencode') {
+                    action = 'apply-opencode-agents-file';
                 } else if (this.agentsContext === 'openclaw-workspace') {
                     action = 'apply-openclaw-workspace-file';
                     params.fileName = this.agentsWorkspaceFileName;
@@ -716,7 +728,11 @@ export function createAgentsMethods(options = {}) {
                     ? this.t('toast.agents.saved.workspace', { name: this.agentsWorkspaceFileName || '' }).replace(/:\s*$/, '')
                     : (this.agentsContext === 'claude-project'
                         ? this.t('toast.agents.saved.claudeProject')
-                        : (this.agentsContext === 'openclaw' ? this.t('toast.agents.saved.openclaw') : this.t('toast.agents.saved.agents')));
+                        : (this.agentsContext === 'openclaw'
+                            ? this.t('toast.agents.saved.openclaw')
+                            : (this.agentsContext === 'opencode'
+                                ? this.t('toast.agents.saved.opencode')
+                                : this.t('toast.agents.saved.agents'))));
                 this.showMessage(successLabel, 'success');
                 if (this.mainTab === 'prompts') {
                     this.loadPromptsContent();
@@ -987,7 +1003,7 @@ export function createAgentsMethods(options = {}) {
         },
 
         switchPromptsSubTab(subTab) {
-            const normalized = subTab === 'claude-project' || subTab === 'system' ? subTab : 'codex';
+            const normalized = subTab === 'claude-project' || subTab === 'system' || subTab === 'opencode' ? subTab : 'codex';
             if (normalized === 'claude-project' && !this.projectPathOptions.length && !this.projectPathOptionsLoading) {
                 this.loadProjectPathOptions();
             }
@@ -1035,6 +1051,8 @@ export function createAgentsMethods(options = {}) {
                     if (projectPath) {
                         rpcParams.baseDir = projectPath;
                     }
+                } else if (subTab === 'opencode') {
+                    action = 'get-opencode-agents-file';
                 } else {
                     action = 'get-agents-file';
                 }
@@ -1051,7 +1069,7 @@ export function createAgentsMethods(options = {}) {
                 this.agentsPath = res.path || '';
                 this.agentsExists = !!res.exists;
                 this.agentsLineEnding = res.lineEnding === '\r\n' ? '\r\n' : '\n';
-                this.agentsContext = subTab === 'claude-project' ? 'claude-project' : 'codex';
+                this.agentsContext = subTab === 'claude-project' ? 'claude-project' : (subTab === 'opencode' ? 'opencode' : 'codex');
             } catch (e) {
                 if (!isLatestRequestToken(this, '_agentsOpenRequestToken', requestToken)) {
                     return;

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,

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

@@ -0,0 +1,153 @@
+/**
+ * Prompts-panel Markdown editor methods: overlay highlight sync,
+ * mobile view switching, and the live split preview (marked + DOMPurify,
+ * debounced). One implementation is shared by the agentsContent editor
+ * and the sysPromptContent editor.
+ *
+ * State contract (declared in app.js data()):
+ *   promptsPreviewEnabled, promptsPreviewCollapsed, promptsMobileView,
+ *   promptsPreviewLibsMissing, agentsHighlightHtml, sysPromptHighlightHtml,
+ *   agentsPreviewHtml, sysPromptPreviewHtml
+ * Template contract:
+ *   refs promptsAgentsTextarea / promptsSysTextarea on the two textareas,
+ *   refs promptsAgentsHighlight / promptsSysHighlight on the backdrop <pre>.
+ */
+
+import {
+    buildMarkdownPreviewHtml,
+    highlightMarkdownText
+} from '../logic.markdown-editor.mjs';
+
+const PROMPTS_HIGHLIGHT_DEBOUNCE_MS = 150;
+const PROMPTS_PREVIEW_DEBOUNCE_MS = 300;
+
+const PROMPTS_EDITOR_META = {
+    agents: {
+        contentField: 'agentsContent',
+        highlightField: 'agentsHighlightHtml',
+        previewField: 'agentsPreviewHtml',
+        textareaRef: 'promptsAgentsTextarea',
+        highlightRef: 'promptsAgentsHighlight'
+    },
+    sys: {
+        contentField: 'sysPromptContent',
+        highlightField: 'sysPromptHighlightHtml',
+        previewField: 'sysPromptPreviewHtml',
+        textareaRef: 'promptsSysTextarea',
+        highlightRef: 'promptsSysHighlight'
+    }
+};
+
+function resolvePromptsHljs() {
+    if (typeof window !== 'undefined' && window.hljs) {
+        return window.hljs;
+    }
+    return null;
+}
+
+function resolvePromptsPreviewLibs() {
+    if (typeof window === 'undefined') {
+        return { marked: null, purify: null };
+    }
+    return { marked: window.marked || null, purify: window.DOMPurify || null };
+}
+
+export function createPromptsEditorMethods() {
+    return {
+        promptsEditorMeta(key) {
+            return PROMPTS_EDITOR_META[key] || null;
+        },
+
+
+        refreshPromptsHighlight(key) {
+            const meta = this.promptsEditorMeta(key);
+            if (!meta) {
+                return;
+            }
+            this[meta.highlightField] = highlightMarkdownText(this[meta.contentField], resolvePromptsHljs());
+            this.syncPromptsOverlayScroll(key);
+        },
+
+        schedulePromptsHighlight(key) {
+            const meta = this.promptsEditorMeta(key);
+            if (!meta) {
+                return;
+            }
+            if (!this._promptsHighlightTimers) {
+                this._promptsHighlightTimers = {};
+            }
+            if (this._promptsHighlightTimers[key]) {
+                clearTimeout(this._promptsHighlightTimers[key]);
+            }
+            this._promptsHighlightTimers[key] = setTimeout(() => {
+                this._promptsHighlightTimers[key] = null;
+                this.refreshPromptsHighlight(key);
+            }, PROMPTS_HIGHLIGHT_DEBOUNCE_MS);
+        },
+
+        syncPromptsOverlayScroll(key) {
+            const meta = this.promptsEditorMeta(key);
+            if (!meta || typeof this.$refs !== 'object' || !this.$refs) {
+                return;
+            }
+            const textarea = this.$refs[meta.textareaRef];
+            const backdrop = this.$refs[meta.highlightRef];
+            if (!textarea || !backdrop) {
+                return;
+            }
+            backdrop.scrollTop = textarea.scrollTop;
+            backdrop.scrollLeft = textarea.scrollLeft;
+        },
+
+        refreshPromptsPreview(key) {
+            const meta = this.promptsEditorMeta(key);
+            if (!meta) {
+                return;
+            }
+            if (!this.promptsPreviewEnabled) {
+                return;
+            }
+            const libs = resolvePromptsPreviewLibs();
+            const state = buildMarkdownPreviewHtml(this[meta.contentField], libs.marked, libs.purify);
+            if (state.unavailable) {
+                this.promptsPreviewLibsMissing = true;
+                this[meta.previewField] = '';
+                return;
+            }
+            this.promptsPreviewLibsMissing = false;
+            this[meta.previewField] = state.html;
+        },
+
+        schedulePromptsPreview(key) {
+            const meta = this.promptsEditorMeta(key);
+            if (!meta) {
+                return;
+            }
+            if (!this._promptsPreviewTimers) {
+                this._promptsPreviewTimers = {};
+            }
+            if (this._promptsPreviewTimers[key]) {
+                clearTimeout(this._promptsPreviewTimers[key]);
+            }
+            this._promptsPreviewTimers[key] = setTimeout(() => {
+                this._promptsPreviewTimers[key] = null;
+                this.refreshPromptsPreview(key);
+            }, PROMPTS_PREVIEW_DEBOUNCE_MS);
+        },
+
+        schedulePromptsEditorRefresh(key) {
+            this.schedulePromptsHighlight(key);
+            this.schedulePromptsPreview(key);
+        },
+
+        setPromptsMobileView(view) {
+            if (view === 'edit' || view === 'preview') {
+                this.promptsMobileView = view;
+            }
+        },
+
+        togglePromptsPreviewCollapsed() {
+            this.promptsPreviewCollapsed = !this.promptsPreviewCollapsed;
+        }
+    };
+}