codexmate 0.1.21 → 0.1.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -10
- package/README.vi.md +0 -2
- package/README.zh.md +0 -10
- package/cli.js +1 -0
- package/package.json +1 -1
- package/web-ui/app.js +34 -0
- package/web-ui/index.html +3 -0
- package/web-ui/logic.markdown-editor.mjs +77 -0
- package/web-ui/logic.prompts-change-axis.mjs +187 -0
- package/web-ui/modules/app.computed.session.mjs +33 -13
- package/web-ui/modules/app.methods.index.mjs +2 -0
- package/web-ui/modules/app.methods.prompts-editor.mjs +326 -0
- package/web-ui/modules/app.methods.session-actions.mjs +37 -4
- package/web-ui/modules/app.methods.web-ui-preferences.mjs +4 -0
- package/web-ui/modules/i18n/locales/en.mjs +11 -0
- package/web-ui/modules/i18n/locales/ja.mjs +11 -0
- package/web-ui/modules/i18n/locales/vi.mjs +11 -0
- package/web-ui/modules/i18n/locales/zh-tw.mjs +11 -0
- package/web-ui/modules/i18n/locales/zh.mjs +11 -0
- package/web-ui/partials/index/panel-prompts.html +95 -25
- package/web-ui/res/highlight.min.js +1244 -0
- package/web-ui/res/marked.min.js +6 -0
- package/web-ui/res/purify.min.js +3 -0
- package/web-ui/res/web-ui-render.precompiled.js +315 -41
- package/web-ui/styles/prompts-editor.css +422 -0
- package/web-ui/styles.css +1 -0
|
@@ -189,29 +189,64 @@
|
|
|
189
189
|
<div v-else-if="agentsDiffError" class="state-message error">{{ agentsDiffError }}</div>
|
|
190
190
|
<div v-else-if="agentsDiffTruncated" class="agents-diff-empty">{{ t('diff.tooLargeSkip') }}</div>
|
|
191
191
|
<div v-else-if="!agentsDiffHasChanges" class="agents-diff-empty">{{ t('diff.noChanges') }}</div>
|
|
192
|
-
<div v-else class="
|
|
193
|
-
<div
|
|
194
|
-
v-for="(
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
<
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
192
|
+
<div v-else class="prompts-diff-frame">
|
|
193
|
+
<div v-if="agentsChangeAxis.ticks.length" class="prompts-change-axis prompts-change-axis--diff" role="navigation" :aria-label="t('prompts.editor.changeAxis')">
|
|
194
|
+
<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>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="agents-diff-view agents-diff-editor" ref="promptsAgentsDiffView">
|
|
197
|
+
<div
|
|
198
|
+
v-for="(line, index) in agentsDiffLines"
|
|
199
|
+
:key="line.key || (line.type + '-' + index)"
|
|
200
|
+
:class="['agents-diff-line', line.type]">
|
|
201
|
+
<span class="agents-diff-line-sign">
|
|
202
|
+
{{ line.type === 'add' ? '+' : (line.type === 'del' ? '-' : ' ') }}
|
|
203
|
+
</span>
|
|
204
|
+
<span class="agents-diff-line-text">{{ line.value }}</span>
|
|
205
|
+
</div>
|
|
201
206
|
</div>
|
|
202
207
|
</div>
|
|
203
208
|
</div>
|
|
204
|
-
<div
|
|
209
|
+
<div class="prompts-md-toolbar" role="toolbar" :aria-label="t('prompts.editor.toolbar')">
|
|
210
|
+
<div class="prompts-md-toolbar-group prompts-md-toolbar-group--view">
|
|
211
|
+
<div v-if="promptsPreviewEnabled" class="prompts-mobile-view-switch" role="tablist" :aria-label="t('prompts.editor.previewToggle')">
|
|
212
|
+
<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>
|
|
213
|
+
<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>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
<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' }]">
|
|
218
|
+
<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()">
|
|
219
|
+
<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>
|
|
220
|
+
</button>
|
|
205
221
|
<div v-if="agentsLoading" class="editor-skeleton">
|
|
206
222
|
<div class="skeleton-line" v-for="i in 6" :key="i"></div>
|
|
207
223
|
</div>
|
|
208
|
-
<
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
224
|
+
<div class="prompts-editor-columns">
|
|
225
|
+
<div class="prompts-edit-pane">
|
|
226
|
+
<pre ref="promptsAgentsHighlight" class="prompts-highlight-backdrop" aria-hidden="true" v-html="agentsHighlightHtml"></pre>
|
|
227
|
+
<textarea
|
|
228
|
+
ref="promptsAgentsTextarea"
|
|
229
|
+
v-model="agentsContent"
|
|
230
|
+
class="form-input template-editor"
|
|
231
|
+
spellcheck="false"
|
|
232
|
+
:readonly="agentsLoading || agentsSaving || agentsDiffVisible"
|
|
233
|
+
@input="onAgentsContentInput"
|
|
234
|
+
@scroll="syncPromptsOverlayScroll('agents')"
|
|
235
|
+
:placeholder="t(promptsSubTab === 'claude-project' ? 'modal.agents.placeholder.claudeProject' : 'modal.agents.placeholder')"></textarea>
|
|
236
|
+
<div v-if="!agentsDiffVisible && agentsChangeAxis.ticks.length" class="prompts-change-axis" role="navigation" :aria-label="t('prompts.editor.changeAxis')">
|
|
237
|
+
<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>
|
|
238
|
+
</div>
|
|
239
|
+
<div v-else-if="!agentsDiffVisible && agentsChangeAxis.truncated" class="prompts-change-axis prompts-change-axis--summary" :title="t('prompts.editor.changeAxisTruncated')">
|
|
240
|
+
<span class="prompts-change-summary add">+{{ agentsChangeAxis.added }}</span>
|
|
241
|
+
<span class="prompts-change-summary del">-{{ agentsChangeAxis.removed }}</span>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
<div v-if="promptsPreviewEnabled" class="prompts-preview-pane">
|
|
245
|
+
<div v-if="promptsPreviewLibsMissing" class="state-message error">{{ t('prompts.editor.previewUnavailable') }}</div>
|
|
246
|
+
<div v-else-if="!agentsPreviewHtml" class="state-message">{{ t('prompts.editor.previewEmpty') }}</div>
|
|
247
|
+
<div v-else class="prompts-preview-body" v-html="agentsPreviewHtml"></div>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
215
250
|
</div>
|
|
216
251
|
<div v-if="promptsContextHint" :class="['prompts-context-hint', { 'prompts-context-hint--warn': promptsContextHint.warn }]">
|
|
217
252
|
{{ promptsContextHint.text }}
|
|
@@ -308,7 +343,11 @@
|
|
|
308
343
|
<div v-else-if="sysPromptDiffError" class="state-message error">{{ sysPromptDiffError }}</div>
|
|
309
344
|
<div v-else-if="sysPromptDiffTruncated" class="agents-diff-empty">{{ t('diff.tooLargeSkip') }}</div>
|
|
310
345
|
<div v-else-if="!sysPromptDiffHasChangesValue" class="agents-diff-empty">{{ t('diff.noChanges') }}</div>
|
|
311
|
-
|
|
346
|
+
<div v-else class="prompts-diff-frame">
|
|
347
|
+
<div v-if="sysChangeAxis.ticks.length" class="prompts-change-axis prompts-change-axis--diff" role="navigation" :aria-label="t('prompts.editor.changeAxis')">
|
|
348
|
+
<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>
|
|
349
|
+
</div>
|
|
350
|
+
<div class="agents-diff-view agents-diff-editor" ref="promptsSysDiffView">
|
|
312
351
|
<div
|
|
313
352
|
v-for="(line, index) in sysPromptDiffLines"
|
|
314
353
|
:key="'sys-prompt-diff-' + index"
|
|
@@ -320,16 +359,47 @@
|
|
|
320
359
|
</div>
|
|
321
360
|
</div>
|
|
322
361
|
</div>
|
|
323
|
-
|
|
362
|
+
</div>
|
|
363
|
+
<div class="prompts-md-toolbar" role="toolbar" :aria-label="t('prompts.editor.toolbar')">
|
|
364
|
+
<div class="prompts-md-toolbar-group prompts-md-toolbar-group--view">
|
|
365
|
+
<div v-if="promptsPreviewEnabled" class="prompts-mobile-view-switch" role="tablist" :aria-label="t('prompts.editor.previewToggle')">
|
|
366
|
+
<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>
|
|
367
|
+
<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>
|
|
368
|
+
</div>
|
|
369
|
+
</div>
|
|
370
|
+
</div>
|
|
371
|
+
<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' }]">
|
|
372
|
+
<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()">
|
|
373
|
+
<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>
|
|
374
|
+
</button>
|
|
324
375
|
<div v-if="sysPromptLoading" class="editor-skeleton">
|
|
325
376
|
<div class="skeleton-line" v-for="i in 6" :key="i"></div>
|
|
326
377
|
</div>
|
|
327
|
-
<
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
378
|
+
<div class="prompts-editor-columns">
|
|
379
|
+
<div class="prompts-edit-pane">
|
|
380
|
+
<pre ref="promptsSysHighlight" class="prompts-highlight-backdrop" aria-hidden="true" v-html="sysPromptHighlightHtml"></pre>
|
|
381
|
+
<textarea
|
|
382
|
+
ref="promptsSysTextarea"
|
|
383
|
+
v-model="sysPromptContent"
|
|
384
|
+
class="form-input template-editor"
|
|
385
|
+
spellcheck="false"
|
|
386
|
+
:readonly="sysPromptLoading || sysPromptSaving || sysPromptDiffVisible"
|
|
387
|
+
@scroll="syncPromptsOverlayScroll('sys')"
|
|
388
|
+
:placeholder="t('sysPrompt.placeholder')"></textarea>
|
|
389
|
+
<div v-if="!sysPromptDiffVisible && sysChangeAxis.ticks.length" class="prompts-change-axis" role="navigation" :aria-label="t('prompts.editor.changeAxis')">
|
|
390
|
+
<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>
|
|
391
|
+
</div>
|
|
392
|
+
<div v-else-if="!sysPromptDiffVisible && sysChangeAxis.truncated" class="prompts-change-axis prompts-change-axis--summary" :title="t('prompts.editor.changeAxisTruncated')">
|
|
393
|
+
<span class="prompts-change-summary add">+{{ sysChangeAxis.added }}</span>
|
|
394
|
+
<span class="prompts-change-summary del">-{{ sysChangeAxis.removed }}</span>
|
|
395
|
+
</div>
|
|
396
|
+
</div>
|
|
397
|
+
<div v-if="promptsPreviewEnabled" class="prompts-preview-pane">
|
|
398
|
+
<div v-if="promptsPreviewLibsMissing" class="state-message error">{{ t('prompts.editor.previewUnavailable') }}</div>
|
|
399
|
+
<div v-else-if="!sysPromptPreviewHtml" class="state-message">{{ t('prompts.editor.previewEmpty') }}</div>
|
|
400
|
+
<div v-else class="prompts-preview-body" v-html="sysPromptPreviewHtml"></div>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
333
403
|
</div>
|
|
334
404
|
<div v-if="sysPromptContextHint()" :class="['prompts-context-hint', { 'prompts-context-hint--warn': sysPromptContextHint().warn }]">
|
|
335
405
|
{{ sysPromptContextHint().text }}
|