codexmate 0.1.20 → 0.1.22

package/web-ui/modules/app.methods.session-actions.mjs

@@ -174,28 +174,61 @@ export function createSessionActionMethods(options = {}) {
 
         async copySessionWorkspaceBrief() {
             const summary = this.activeSessionWorkspaceSummary;
-            const text = summary && typeof summary.briefText === 'string'
+            const brief = summary && typeof summary.briefText === 'string'
                 ? summary.briefText.trim()
                 : '';
-            if (!text) {
+            if (!brief) {
                 this.showMessage(this.t('sessions.workspace.copy.empty'), 'error');
                 return;
             }
+            const session = this.activeSession;
+            let exported;
+            let exportResult;
+            try {
+                const res = await api('export-session', {
+                    source: session.source,
+                    sessionId: session.sessionId,
+                    filePath: session.filePath
+                });
+                if (!res || typeof res !== 'object' || (typeof res.error === 'string' && res.error.trim())) {
+                    this.showMessage((res && res.error) || this.t('toast.copy.fail'), 'error');
+                    return;
+                }
+                exported = typeof res.content === 'string' ? res.content.trim() : '';
+                if (!exported) {
+                    this.showMessage(this.t('toast.copy.fail'), 'error');
+                    return;
+                }
+                exportResult = res;
+            } catch (e) {
+                this.showMessage(this.t('toast.copy.fail'), 'error');
+                return;
+            }
+            const text = `${brief}\n\n---\n\n${exported}`;
             const ok = this.fallbackCopyText(text);
             if (ok) {
-                this.showMessage(this.t('sessions.workspace.copy.success'), 'success');
+                this.notifyBriefCopied(exportResult);
                 return;
             }
             try {
                 if (navigator.clipboard && window.isSecureContext) {
                     await navigator.clipboard.writeText(text);
-                    this.showMessage(this.t('sessions.workspace.copy.success'), 'success');
+                    this.notifyBriefCopied(exportResult);
                     return;
                 }
             } catch (_) {}
             this.showMessage(this.t('toast.copy.fail'), 'error');
         },
 
+        notifyBriefCopied(exportResult) {
+            if (exportResult && exportResult.truncated) {
+                const maxLabel = exportResult.maxMessages === 'all' ? 'all' : exportResult.maxMessages;
+                this.showMessage(`已复制工作简报（会话全文已截断：最多 ${maxLabel} 条消息）`, 'info');
+                return;
+            }
+            this.showMessage(this.t('sessions.workspace.copy.success'), 'success');
+        },
+
         getSessionExportKey(session) {
             return `${session.source || 'unknown'}:${session.sessionId || ''}:${session.filePath || ''}`;
         },

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

@@ -63,6 +63,7 @@ function normalizePromptsSubTab(value) {
     const normalized = typeof value === 'string' ? value.trim().toLowerCase() : '';
     if (normalized === 'claude-project') return normalized;
     if (normalized === 'system') return normalized;
+    if (normalized === 'opencode') return normalized;
     return 'codex';
 }
 

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

@@ -229,9 +229,18 @@ const en = Object.freeze({
     'subtitle.settings': 'Manage downloads, directories, and trash.',
     'subtitle.prompts': 'Edit AGENTS.md and CLAUDE.md.',
     'prompts.subTab.codex': 'AGENTS.md (Codex)',
+    'prompts.subTab.opencode': 'AGENTS.md (OpenCode)',
     'prompts.subTab.project': 'CLAUDE.md',
     'prompts.subTab.system': 'System Prompt (Pi)',
     'prompts.subTab.presets': 'Preset pool',
+    'prompts.editor.toolbar': 'Markdown toolbar',
+    'prompts.editor.collapsePreview': 'Collapse preview',
+    'prompts.editor.expandPreview': 'Expand preview',
+    'prompts.editor.previewToggle': 'Live preview',
+    'prompts.editor.edit': 'Edit',
+    'prompts.editor.preview': 'Preview',
+    'prompts.editor.previewUnavailable': 'Preview components missing (marked / DOMPurify), please refresh the page',
+    'prompts.editor.previewEmpty': 'Nothing to preview yet',
     'prompts.presets.title': 'Presets',
     'prompts.presets.hint': 'Manage presets.',
     'prompts.presets.namePlaceholder': 'Preset name',
@@ -439,6 +448,7 @@ const en = Object.freeze({
     'toast.agents.saved.agents': 'AGENTS.md saved',
     'toast.agents.saved.claudeProject': 'Project CLAUDE.md saved',
     'toast.agents.saved.openclaw': 'OpenClaw AGENTS.md saved',
+    'toast.agents.saved.opencode': 'OpenCode AGENTS.md saved',
     'toast.agents.saved.workspace': 'Workspace file saved: {name}',
     'toast.delete.ok': 'Deleted',
     'toast.delete.fail': 'Delete failed',
@@ -961,6 +971,7 @@ const en = Object.freeze({
     'config.agents.open': 'Open AGENTS.md',
     'modal.agents.title.default': 'AGENTS.md editor',
     'modal.agents.title.openclaw': 'OpenClaw AGENTS.md editor',
+    'modal.agents.title.opencode': 'OpenCode AGENTS.md editor',
     'modal.agents.hint.default': 'Saved content will be written to AGENTS.md (next to config.toml).',
     'modal.agents.title.claudeProject': 'Project CLAUDE.md: {path}',
     'modal.agents.hint.claudeProject': 'Saved content will be written to CLAUDE.md in: {path}',
@@ -969,6 +980,7 @@ const en = Object.freeze({
     'modal.agents.contentLabel.claudeProject': 'CLAUDE.md content',
     'modal.agents.placeholder.claudeProject': 'Edit CLAUDE.md here',
     'modal.agents.hint.openclaw': 'Saved content will be written to OpenClaw workspace AGENTS.md.',
+    'modal.agents.hint.opencode': 'Saved content will be written to ~/.config/opencode/AGENTS.md.',
     'modal.agents.title.openclawWorkspaceFile': 'OpenClaw workspace file: {fileName}',
     'modal.agents.hint.openclawWorkspaceFile': 'Saved content will be written to OpenClaw workspace {fileName}.',
     'config.url.unset': 'URL not set',

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

@@ -230,9 +230,18 @@ const ja = Object.freeze({
     'subtitle.settings': 'ダウンロード・ディレクトリ・ゴミ箱の管理。',
     'subtitle.prompts': 'AGENTS.md と CLAUDE.md を編集。',
     'prompts.subTab.codex': 'AGENTS.md (Codex)',
+    'prompts.subTab.opencode': 'AGENTS.md (OpenCode)',
     'prompts.subTab.project': 'CLAUDE.md',
     'prompts.subTab.system': 'System Prompt (Pi)',
     'prompts.subTab.presets': 'プリセット',
+    'prompts.editor.toolbar': 'Markdown ツールバー',
+    'prompts.editor.collapsePreview': 'プレビューを折りたたむ',
+    'prompts.editor.expandPreview': 'プレビューを展開',
+    'prompts.editor.previewToggle': 'ライブプレビュー',
+    'prompts.editor.edit': '編集',
+    'prompts.editor.preview': 'プレビュー',
+    'prompts.editor.previewUnavailable': 'プレビュー用コンポーネント（marked / DOMPurify）が読み込まれていません。ページを再読み込みしてください',
+    'prompts.editor.previewEmpty': 'プレビューする内容がありません',
     'prompts.presets.title': 'プリセット',
     'prompts.presets.hint': 'プリセットを管理します。',
     'prompts.presets.namePlaceholder': 'プリセット名',
@@ -441,6 +450,7 @@ const ja = Object.freeze({
     'toast.agents.saved.agents': 'AGENTS.md 保存しました',
     'toast.agents.saved.claudeProject': 'プロジェクト CLAUDE.md 保存しました',
     'toast.agents.saved.openclaw': 'OpenClaw AGENTS.md 保存しました',
+    'toast.agents.saved.opencode': 'OpenCode AGENTS.md 保存しました',
     'toast.agents.saved.workspace': 'ワークスペースファイル保存済み: {name}',
     'toast.delete.ok': '削除しました',
     'toast.delete.fail': '削除に失敗しました',
@@ -964,6 +974,7 @@ const ja = Object.freeze({
     'config.agents.open': 'AGENTS.md を開く',
     'modal.agents.title.default': 'AGENTS.md エディタ',
     'modal.agents.title.openclaw': 'OpenClaw AGENTS.md エディタ',
+    'modal.agents.title.opencode': 'OpenCode AGENTS.md エディタ',
     'modal.agents.hint.default': '保存すると対象の AGENTS.md（config.toml と同階層）に書き込まれます。',
     'modal.agents.title.claudeProject': 'プロジェクト CLAUDE.md: {path}',
     'modal.agents.hint.claudeProject': '保存するとプロジェクトの CLAUDE.md に書き込まれます: {path}',
@@ -972,6 +983,7 @@ const ja = Object.freeze({
     'modal.agents.contentLabel.claudeProject': 'CLAUDE.md 内容',
     'modal.agents.placeholder.claudeProject': 'CLAUDE.md を編集',
     'modal.agents.hint.openclaw': '保存すると OpenClaw Workspace の AGENTS.md に書き込まれます。',
+    'modal.agents.hint.opencode': '保存すると ~/.config/opencode/AGENTS.md に書き込まれます。',
     'modal.agents.title.openclawWorkspaceFile': 'OpenClaw ワークスペースファイル: {fileName}',
     'modal.agents.hint.openclawWorkspaceFile': '保存すると OpenClaw Workspace の {fileName} に書き込まれます。',
     'config.url.unset': 'URL 未設定',

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

@@ -247,9 +247,18 @@ const vi = Object.freeze({
     'subtitle.settings': 'Quản lý tải xuống, thư mục và dữ liệu.',
     'subtitle.prompts': 'Chỉnh sửa AGENTS.md và CLAUDE.md.',
     'prompts.subTab.codex': 'AGENTS.md (Codex)',
+    'prompts.subTab.opencode': 'AGENTS.md (OpenCode)',
     'prompts.subTab.project': 'CLAUDE.md',
     'prompts.subTab.system': 'System Prompt (Pi)',
     'prompts.subTab.presets': 'Kho preset',
+    'prompts.editor.toolbar': 'Thanh công cụ Markdown',
+    'prompts.editor.collapsePreview': 'Thu gọn bản xem trước',
+    'prompts.editor.expandPreview': 'Mở rộng bản xem trước',
+    'prompts.editor.previewToggle': 'Xem trước trực tiếp',
+    'prompts.editor.edit': 'Chỉnh sửa',
+    '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.presets.title': 'Preset',
     'prompts.presets.hint': 'Quản lý preset.',
     'prompts.presets.namePlaceholder': 'Tên preset',
@@ -401,6 +410,7 @@ const vi = Object.freeze({
     'toast.agents.saved.agents': 'AGENTS.md đã lưu',
     'toast.agents.saved.claudeProject': 'CLAUDE.md dự án đã lưu',
     'toast.agents.saved.openclaw': 'OpenClaw AGENTS.md đã lưu',
+    'toast.agents.saved.opencode': 'OpenCode AGENTS.md đã lưu',
     'toast.agents.saved.workspace': 'Tệp workspace đã lưu: {name}',
     'toast.delete.ok': 'Đã xóa',
     'toast.delete.fail': 'Xóa thất bại',
@@ -1073,8 +1083,10 @@ const vi = Object.freeze({
     'config.agents.open': 'Mở AGENTS.md',
     'modal.agents.title.default': 'Trình soạn thảo AGENTS.md',
     'modal.agents.title.openclaw': 'Trình soạn thảo AGENTS.md OpenClaw',
+    'modal.agents.title.opencode': 'Trình soạn thảo AGENTS.md OpenCode',
     'modal.agents.hint.default': 'Nội dung đã lưu sẽ được ghi vào AGENTS.md (cạnh config.toml).',
     'modal.agents.hint.openclaw': 'Nội dung đã lưu sẽ được ghi vào AGENTS.md không gian làm việc OpenClaw.',
+    'modal.agents.hint.opencode': 'Nội dung đã lưu sẽ được ghi vào ~/.config/opencode/AGENTS.md.',
     'modal.agents.title.openclawWorkspaceFile': 'File không gian làm việc OpenClaw: {fileName}',
     'modal.agents.hint.openclawWorkspaceFile': 'Nội dung đã lưu sẽ được ghi vào OpenClaw {fileName}.',
     'config.url.unset': 'URL chưa đặt',

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

@@ -229,9 +229,18 @@ const zhTw = Object.freeze({
     'subtitle.settings': '管理下載、目錄與回收站。',
     'subtitle.prompts': '編輯 AGENTS.md 與 CLAUDE.md。',
     'prompts.subTab.codex': 'AGENTS.md (Codex)',
+    'prompts.subTab.opencode': 'AGENTS.md (OpenCode)',
     'prompts.subTab.project': 'CLAUDE.md',
     'prompts.subTab.system': 'System Prompt (Pi)',
     'prompts.subTab.presets': '預設池',
+    'prompts.editor.toolbar': 'Markdown 工具列',
+    'prompts.editor.collapsePreview': '收起預覽',
+    'prompts.editor.expandPreview': '展開預覽',
+    'prompts.editor.previewToggle': '即時預覽',
+    'prompts.editor.edit': '編輯',
+    'prompts.editor.preview': '預覽',
+    'prompts.editor.previewUnavailable': '預覽元件未載入（marked / DOMPurify 缺失），請重新整理頁面',
+    'prompts.editor.previewEmpty': '尚無內容可預覽',
     'prompts.presets.title': '預設池',
     'prompts.presets.hint': '管理預設。',
     'prompts.presets.namePlaceholder': '預設名稱',
@@ -439,6 +448,7 @@ const zhTw = Object.freeze({
     'toast.agents.saved.agents': 'AGENTS.md 已保存',
     'toast.agents.saved.claudeProject': '專案 CLAUDE.md 已保存',
     'toast.agents.saved.openclaw': 'OpenClaw AGENTS.md 已保存',
+    'toast.agents.saved.opencode': 'OpenCode AGENTS.md 已保存',
     'toast.agents.saved.workspace': '工作區文件已保存: {name}',
     'toast.delete.ok': '已刪除',
     'toast.delete.fail': '刪除失敗',
@@ -960,6 +970,7 @@ const zhTw = Object.freeze({
     'config.agents.open': '打開 AGENTS.md',
     'modal.agents.title.default': 'AGENTS.md 編輯器',
     'modal.agents.title.openclaw': 'OpenClaw AGENTS.md 編輯器',
+    'modal.agents.title.opencode': 'OpenCode AGENTS.md 編輯器',
     'modal.agents.hint.default': '保存後會寫入目標 AGENTS.md（與 config.toml 同級）。',
     'modal.agents.title.claudeProject': '專案 CLAUDE.md: {path}',
     'modal.agents.hint.claudeProject': '保存後會寫入專案目錄下的 CLAUDE.md: {path}',
@@ -968,6 +979,7 @@ const zhTw = Object.freeze({
     'modal.agents.contentLabel.claudeProject': 'CLAUDE.md 內容',
     'modal.agents.placeholder.claudeProject': '在這裡編輯 CLAUDE.md',
     'modal.agents.hint.openclaw': '保存後會寫入 OpenClaw Workspace 下的 AGENTS.md。',
+    'modal.agents.hint.opencode': '儲存後會寫入 ~/.config/opencode/AGENTS.md。',
     'modal.agents.title.openclawWorkspaceFile': 'OpenClaw 工作區文件: {fileName}',
     'modal.agents.hint.openclawWorkspaceFile': '保存後會寫入 OpenClaw Workspace 下的 {fileName}。',
     'config.url.unset': '未設 URL',

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

@@ -229,9 +229,18 @@ const zh = Object.freeze({
     'subtitle.settings': '管理下载、目录与回收站。',
     'subtitle.prompts': '编辑 AGENTS.md 与 CLAUDE.md。',
     'prompts.subTab.codex': 'AGENTS.md (Codex)',
+    'prompts.subTab.opencode': 'AGENTS.md (OpenCode)',
     'prompts.subTab.project': 'CLAUDE.md',
     'prompts.subTab.system': 'System Prompt (Pi)',
     'prompts.subTab.presets': '预设池',
+    'prompts.editor.toolbar': 'Markdown 工具栏',
+    'prompts.editor.collapsePreview': '收起预览',
+    'prompts.editor.expandPreview': '展开预览',
+    'prompts.editor.previewToggle': '实时预览',
+    'prompts.editor.edit': '编辑',
+    'prompts.editor.preview': '预览',
+    'prompts.editor.previewUnavailable': '预览组件未加载（marked / DOMPurify 缺失），请刷新页面',
+    'prompts.editor.previewEmpty': '暂无内容可预览',
     'prompts.presets.title': '预设池',
     'prompts.presets.hint': '管理预设。',
     'prompts.presets.namePlaceholder': '预设名称',
@@ -439,6 +448,7 @@ const zh = Object.freeze({
     'toast.agents.saved.agents': 'AGENTS.md 已保存',
     'toast.agents.saved.claudeProject': '项目 CLAUDE.md 已保存',
     'toast.agents.saved.openclaw': 'OpenClaw AGENTS.md 已保存',
+    'toast.agents.saved.opencode': 'OpenCode AGENTS.md 已保存',
     'toast.agents.saved.workspace': '工作区文件已保存: {name}',
     'toast.delete.ok': '已删除',
     'toast.delete.fail': '删除失败',
@@ -960,6 +970,7 @@ const zh = Object.freeze({
     'config.agents.open': '打开 AGENTS.md',
     'modal.agents.title.default': 'AGENTS.md 编辑器',
     'modal.agents.title.openclaw': 'OpenClaw AGENTS.md 编辑器',
+    'modal.agents.title.opencode': 'OpenCode AGENTS.md 编辑器',
     'modal.agents.hint.default': '保存后会写入目标 AGENTS.md（与 config.toml 同级）。',
     'modal.agents.title.claudeProject': '项目 CLAUDE.md: {path}',
     'modal.agents.hint.claudeProject': '保存后会写入项目目录下的 CLAUDE.md: {path}',
@@ -968,6 +979,7 @@ const zh = Object.freeze({
     'modal.agents.contentLabel.claudeProject': 'CLAUDE.md 内容',
     'modal.agents.placeholder.claudeProject': '在这里编辑 CLAUDE.md',
     'modal.agents.hint.openclaw': 'Workspace / AGENTS.md',
+    'modal.agents.hint.opencode': '保存后会写入 ~/.config/opencode/AGENTS.md。',
     'modal.agents.title.openclawWorkspaceFile': 'OpenClaw 工作区文件: {fileName}',
     'modal.agents.hint.openclawWorkspaceFile': 'Workspace / {fileName}',
     'config.url.unset': '未设 URL',

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

@@ -7,6 +7,7 @@
                     aria-labelledby="tab-prompts">
                 <div class="prompts-md-tabs" role="tablist" :aria-label="t('tab.prompts')">
                     <button type="button" :class="['prompts-md-tab', { active: promptsSubTab === 'codex' }]" role="tab" :aria-selected="promptsSubTab === 'codex'" @click="switchPromptsSubTab('codex')">{{ t('prompts.subTab.codex') }}</button>
+                    <button type="button" :class="['prompts-md-tab', { active: promptsSubTab === 'opencode' }]" role="tab" :aria-selected="promptsSubTab === 'opencode'" @click="switchPromptsSubTab('opencode')">{{ t('prompts.subTab.opencode') }}</button>
                     <button type="button" :class="['prompts-md-tab', { active: promptsSubTab === 'claude-project' }]" role="tab" :aria-selected="promptsSubTab === 'claude-project'" @click="switchPromptsSubTab('claude-project')">{{ t('prompts.subTab.project') }}</button>
                     <button type="button" :class="['prompts-md-tab', { active: promptsSubTab === 'system' }]" role="tab" :aria-selected="promptsSubTab === 'system'" @click="switchPromptsSubTab('system')">{{ t('prompts.subTab.system') }}</button>
                 </div>
@@ -200,17 +201,40 @@
                                 </div>
                             </div>
                         </div>
-                        <div :class="['editor-frame', { 'editor-frame--loading': agentsLoading }]">
+                        <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')">
+                                    <button type="button" role="tab" :aria-selected="promptsMobileView === 'edit'" :class="['prompts-mobile-view-btn', { active: promptsMobileView === 'edit' }]" @click="setPromptsMobileView('edit')">{{ t('prompts.editor.edit') }}</button>
+                                    <button type="button" role="tab" :aria-selected="promptsMobileView === 'preview'" :class="['prompts-mobile-view-btn', { active: promptsMobileView === 'preview' }]" @click="setPromptsMobileView('preview')">{{ t('prompts.editor.preview') }}</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div :class="['editor-frame prompts-editor-frame', { 'editor-frame--loading': agentsLoading, 'prompts-editor-frame--split': promptsPreviewEnabled, 'prompts-editor-frame--preview-collapsed': promptsPreviewCollapsed, 'prompts-editor-frame--mobile-preview': promptsPreviewEnabled && promptsMobileView === 'preview' }]">
+                            <button v-if="promptsPreviewEnabled" type="button" class="prompts-split-collapse-btn" :class="{ 'prompts-split-collapse-btn--collapsed': promptsPreviewCollapsed }" :title="promptsPreviewCollapsed ? t('prompts.editor.expandPreview') : t('prompts.editor.collapsePreview')" :aria-label="promptsPreviewCollapsed ? t('prompts.editor.expandPreview') : t('prompts.editor.collapsePreview')" @click="togglePromptsPreviewCollapsed()">
+                                <svg class="prompts-split-collapse-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>
+                            </button>
                             <div v-if="agentsLoading" class="editor-skeleton">
                                 <div class="skeleton-line" v-for="i in 6" :key="i"></div>
                             </div>
-                            <textarea
-                                v-model="agentsContent"
-                                class="form-input template-editor"
-                                spellcheck="false"
-                                :readonly="agentsLoading || agentsSaving || agentsDiffVisible"
-                                @input="onAgentsContentInput"
-                                :placeholder="t(promptsSubTab === 'claude-project' ? 'modal.agents.placeholder.claudeProject' : 'modal.agents.placeholder')"></textarea>
+                            <div class="prompts-editor-columns">
+                                <div class="prompts-edit-pane">
+                                    <pre ref="promptsAgentsHighlight" class="prompts-highlight-backdrop" aria-hidden="true" v-html="agentsHighlightHtml"></pre>
+                                    <textarea
+                                        ref="promptsAgentsTextarea"
+                                        v-model="agentsContent"
+                                        class="form-input template-editor"
+                                        spellcheck="false"
+                                        :readonly="agentsLoading || agentsSaving || agentsDiffVisible"
+                                        @input="onAgentsContentInput"
+                                        @scroll="syncPromptsOverlayScroll('agents')"
+                                        :placeholder="t(promptsSubTab === 'claude-project' ? 'modal.agents.placeholder.claudeProject' : 'modal.agents.placeholder')"></textarea>
+                                </div>
+                                <div v-if="promptsPreviewEnabled" class="prompts-preview-pane">
+                                    <div v-if="promptsPreviewLibsMissing" class="state-message error">{{ t('prompts.editor.previewUnavailable') }}</div>
+                                    <div v-else-if="!agentsPreviewHtml" class="state-message">{{ t('prompts.editor.previewEmpty') }}</div>
+                                    <div v-else class="prompts-preview-body" v-html="agentsPreviewHtml"></div>
+                                </div>
+                            </div>
                         </div>
                         <div v-if="promptsContextHint" :class="['prompts-context-hint', { 'prompts-context-hint--warn': promptsContextHint.warn }]">
                             {{ promptsContextHint.text }}
@@ -319,16 +343,39 @@
                                     </div>
                                 </div>
                             </div>
-                            <div :class="['editor-frame', { 'editor-frame--loading': sysPromptLoading }]">
+                            <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')">
+                                        <button type="button" role="tab" :aria-selected="promptsMobileView === 'edit'" :class="['prompts-mobile-view-btn', { active: promptsMobileView === 'edit' }]" @click="setPromptsMobileView('edit')">{{ t('prompts.editor.edit') }}</button>
+                                        <button type="button" role="tab" :aria-selected="promptsMobileView === 'preview'" :class="['prompts-mobile-view-btn', { active: promptsMobileView === 'preview' }]" @click="setPromptsMobileView('preview')">{{ t('prompts.editor.preview') }}</button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div :class="['editor-frame prompts-editor-frame', { 'editor-frame--loading': sysPromptLoading, 'prompts-editor-frame--split': promptsPreviewEnabled, 'prompts-editor-frame--preview-collapsed': promptsPreviewCollapsed, 'prompts-editor-frame--mobile-preview': promptsPreviewEnabled && promptsMobileView === 'preview' }]">
+                                <button v-if="promptsPreviewEnabled" type="button" class="prompts-split-collapse-btn" :class="{ 'prompts-split-collapse-btn--collapsed': promptsPreviewCollapsed }" :title="promptsPreviewCollapsed ? t('prompts.editor.expandPreview') : t('prompts.editor.collapsePreview')" :aria-label="promptsPreviewCollapsed ? t('prompts.editor.expandPreview') : t('prompts.editor.collapsePreview')" @click="togglePromptsPreviewCollapsed()">
+                                    <svg class="prompts-split-collapse-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>
+                                </button>
                                 <div v-if="sysPromptLoading" class="editor-skeleton">
                                     <div class="skeleton-line" v-for="i in 6" :key="i"></div>
                                 </div>
-                                <textarea
-                                    v-model="sysPromptContent"
-                                    class="form-input template-editor"
-                                    spellcheck="false"
-                                    :readonly="sysPromptLoading || sysPromptSaving || sysPromptDiffVisible"
-                                    :placeholder="t('sysPrompt.placeholder')"></textarea>
+                                <div class="prompts-editor-columns">
+                                    <div class="prompts-edit-pane">
+                                        <pre ref="promptsSysHighlight" class="prompts-highlight-backdrop" aria-hidden="true" v-html="sysPromptHighlightHtml"></pre>
+                                        <textarea
+                                            ref="promptsSysTextarea"
+                                            v-model="sysPromptContent"
+                                            class="form-input template-editor"
+                                            spellcheck="false"
+                                            :readonly="sysPromptLoading || sysPromptSaving || sysPromptDiffVisible"
+                                            @scroll="syncPromptsOverlayScroll('sys')"
+                                            :placeholder="t('sysPrompt.placeholder')"></textarea>
+                                    </div>
+                                    <div v-if="promptsPreviewEnabled" class="prompts-preview-pane">
+                                        <div v-if="promptsPreviewLibsMissing" class="state-message error">{{ t('prompts.editor.previewUnavailable') }}</div>
+                                        <div v-else-if="!sysPromptPreviewHtml" class="state-message">{{ t('prompts.editor.previewEmpty') }}</div>
+                                        <div v-else class="prompts-preview-body" v-html="sysPromptPreviewHtml"></div>
+                                    </div>
+                                </div>
                             </div>
                             <div v-if="sysPromptContextHint()" :class="['prompts-context-hint', { 'prompts-context-hint--warn': sysPromptContextHint().warn }]">
                                 {{ sysPromptContextHint().text }}