From 373b462195b80ff8d44200720f781d1ca9d8bfd6 Mon Sep 17 00:00:00 2001 From: matevip Date: Sat, 16 May 2026 14:51:31 +0800 Subject: [PATCH] feat(ui): export and import buttons for agent memory snapshot --- mateclaw-ui/src/api/index.ts | 38 +++ mateclaw-ui/src/i18n/locales/en-US.ts | 22 ++ mateclaw-ui/src/i18n/locales/zh-CN.ts | 22 ++ mateclaw-ui/src/views/AgentContext.vue | 441 ++++++++++++++++++++++++- 4 files changed, 522 insertions(+), 1 deletion(-) diff --git a/mateclaw-ui/src/api/index.ts b/mateclaw-ui/src/api/index.ts index 4da7abcb..127233f6 100644 --- a/mateclaw-ui/src/api/index.ts +++ b/mateclaw-ui/src/api/index.ts @@ -583,6 +583,44 @@ export const agentContextApi = { http.get(`/agents/${agentId}/workspace/prompt-files`), setPromptFiles: (agentId: string | number, files: string[]) => http.put(`/agents/${agentId}/workspace/prompt-files`, { files }), + + // Memory snapshot — export downloads a ZIP via native fetch (axios R + // interceptor would mis-handle the binary body); import + preview go + // through axios with multipart so the standard auth / workspace headers + // flow automatically. + exportMemorySnapshot: async (agentId: string | number): Promise => { + const token = localStorage.getItem('token') + const workspaceId = localStorage.getItem('mc-workspace-id') + const headers: Record = {} + if (token) headers.Authorization = `Bearer ${token}` + if (workspaceId) headers['X-Workspace-Id'] = workspaceId + const url = `/api/v1/agents/${agentId}/workspace/memory/export` + const response = await fetch(url, { headers }) + if (!response.ok) { + // Try to parse the standard R error envelope for a useful message. + let detail = `HTTP ${response.status}` + try { + const body = await response.json() + if (body && typeof body.msg === 'string') detail = body.msg + } catch { /* ignore — non-JSON body */ } + throw new Error(detail) + } + return response.blob() + }, + previewImportMemorySnapshot: (agentId: string | number, file: File) => { + const form = new FormData() + form.append('file', file) + return http.post(`/agents/${agentId}/workspace/memory/import/preview`, form, { + headers: { 'Content-Type': 'multipart/form-data' }, + }) + }, + applyImportMemorySnapshot: (agentId: string | number, file: File) => { + const form = new FormData() + form.append('file', file) + return http.post(`/agents/${agentId}/workspace/memory/import`, form, { + headers: { 'Content-Type': 'multipart/form-data' }, + }) + }, } // ==================== Security ==================== diff --git a/mateclaw-ui/src/i18n/locales/en-US.ts b/mateclaw-ui/src/i18n/locales/en-US.ts index 129f4314..8ad5eb1f 100644 --- a/mateclaw-ui/src/i18n/locales/en-US.ts +++ b/mateclaw-ui/src/i18n/locales/en-US.ts @@ -1021,6 +1021,28 @@ export default { invalidFilename: 'Please enter a valid .md filename', loadFailed: 'Failed to load file list', loadFileFailed: 'Failed to load file content', + exportSnapshot: 'Export snapshot', + exportSnapshotTitle: 'Export memory snapshot', + exportSnapshotDesc: "Bundle this agent's AGENTS / MEMORY / PROFILE / SOUL / KNOWLEDGE.md plus the memory/ daily ledger into a ZIP, named with the current timestamp. The enabled / sortOrder flags are not exported.", + exportSuccess: 'Snapshot exported', + exportFailed: 'Export failed', + importSnapshot: 'Import snapshot', + importSnapshotTitle: 'Import memory snapshot', + importSelectPrompt: 'Pick a ZIP snapshot to import', + importPreviewing: 'Inspecting snapshot...', + importPreviewFailed: 'Failed to inspect snapshot', + importApplying: 'Applying...', + importApplied: 'Applied {applied}, skipped {skipped}', + importFailed: 'Import failed', + importPreviewWillCreate: 'Will create', + importPreviewWillUpdate: 'Will overwrite', + importPreviewWillSkip: 'Skipped', + importPreviewEmpty: 'Nothing to import', + importPreviewCreateNone: '(none)', + importPreviewUpdateMeta: '{old} B → {new} B', + importPreviewSkipReason: 'reason: {reason}', + importConfirmHint: 'Confirming will overwrite existing files with the same name.', + importApply: 'Confirm import', }, agents: { kicker: 'Employee Studio', diff --git a/mateclaw-ui/src/i18n/locales/zh-CN.ts b/mateclaw-ui/src/i18n/locales/zh-CN.ts index 03329867..d2468b97 100644 --- a/mateclaw-ui/src/i18n/locales/zh-CN.ts +++ b/mateclaw-ui/src/i18n/locales/zh-CN.ts @@ -913,6 +913,28 @@ export default { invalidFilename: '请输入有效的 .md 文件名', loadFailed: '加载文件列表失败', loadFileFailed: '加载文件内容失败', + exportSnapshot: '导出快照', + exportSnapshotTitle: '导出记忆快照', + exportSnapshotDesc: '把当前智能体的 AGENTS / MEMORY / PROFILE / SOUL / KNOWLEDGE.md 以及 memory/ 下的每日日记打包成 ZIP，按当前时间命名下载。enabled / sortOrder 不会导出。', + exportSuccess: '快照已导出', + exportFailed: '导出失败', + importSnapshot: '导入快照', + importSnapshotTitle: '导入记忆快照', + importSelectPrompt: '请选择 ZIP 格式的记忆快照', + importPreviewing: '正在解析快照...', + importPreviewFailed: '解析快照失败', + importApplying: '正在应用...', + importApplied: '已应用 {applied} 个，跳过 {skipped} 个', + importFailed: '导入失败', + importPreviewWillCreate: '将创建', + importPreviewWillUpdate: '将覆盖', + importPreviewWillSkip: '跳过', + importPreviewEmpty: '没有可导入的文件', + importPreviewCreateNone: '无', + importPreviewUpdateMeta: '{old} 字节 → {new} 字节', + importPreviewSkipReason: '原因：{reason}', + importConfirmHint: '确认导入会覆盖现有同名文件。', + importApply: '确认导入', }, agents: { kicker: '员工工作室', diff --git a/mateclaw-ui/src/views/AgentContext.vue b/mateclaw-ui/src/views/AgentContext.vue index 47446745..1b04ba52 100644 --- a/mateclaw-ui/src/views/AgentContext.vue +++ b/mateclaw-ui/src/views/AgentContext.vue @@ -34,12 +34,41 @@ + + +

{{ t('agentContext.coreFilesDesc') }}

@@ -167,6 +196,99 @@ + + +
+ +
+ +
@@ -238,6 +360,39 @@ const previewMode = ref<'off' | 'split' | 'preview'>('off') const showNewFileDialog = ref(false) const newFilename = ref('') +// 记忆快照导出 / 导入 +interface FileDiff { + filename: string + oldSize: number + newSize: number + oldHash: string + newHash: string +} +interface SkipEntry { + filename: string + reason: string +} +interface ImportPreview { + willCreate: string[] + willUpdate: FileDiff[] + willSkip: SkipEntry[] +} +const importFileInput = ref(null) +const showImportDialog = ref(false) +const importPreview = ref(null) +const importPendingFile = ref(null) +const importLoading = ref(false) +const importLoadingMessage = ref('') +const exportInFlight = ref(false) +const importInFlight = ref(false) +const importFileName = computed(() => importPendingFile.value?.name ?? '') +const hasAnyChange = computed(() => { + const p = importPreview.value + if (!p) return false + return p.willCreate.length > 0 || p.willUpdate.length > 0 +}) +const canApplyImport = computed(() => !importLoading.value && !!importPreview.value && hasAnyChange.value) + const hasChanges = computed(() => fileContent.value !== originalContent.value) const isValidFilename = computed(() => { @@ -437,6 +592,106 @@ async function createNewFile() { } } +// ---- memory snapshot: export ---- +async function exportMemorySnapshot() { + if (!selectedAgentId.value || exportInFlight.value) return + exportInFlight.value = true + try { + const blob = await agentContextApi.exportMemorySnapshot(selectedAgentId.value) + // Build a timestamped filename so successive backups don't collide on disk. + // Pattern: memory-agent--YYYYMMDD-HHmm.zip + const stamp = formatStamp(new Date()) + const filename = `memory-agent-${selectedAgentId.value}-${stamp}.zip` + const url = URL.createObjectURL(blob) + const a = document.createElement('a') + a.href = url + a.download = filename + document.body.appendChild(a) + a.click() + document.body.removeChild(a) + URL.revokeObjectURL(url) + mcToast.success(t('agentContext.exportSuccess')) + } catch (e: unknown) { + const msg = e instanceof Error ? e.message : '' + mcToast.error(msg ? `${t('agentContext.exportFailed')}: ${msg}` : t('agentContext.exportFailed')) + } finally { + exportInFlight.value = false + } +} + +// ---- memory snapshot: import ---- +function onImportClick() { + if (!selectedAgentId.value || importInFlight.value) return + // Reset the input so picking the same file twice still fires `change`. + if (importFileInput.value) importFileInput.value.value = '' + importFileInput.value?.click() +} + +async function onImportFilePicked(event: Event) { + const target = event.target as HTMLInputElement | null + const file = target?.files?.[0] + if (!file) return + importPendingFile.value = file + importPreview.value = null + showImportDialog.value = true + importLoading.value = true + importLoadingMessage.value = t('agentContext.importPreviewing') + try { + const res: any = await agentContextApi.previewImportMemorySnapshot(selectedAgentId.value, file) + importPreview.value = (res?.data ?? null) as ImportPreview | null + } catch (e: unknown) { + const msg = e instanceof Error ? e.message : '' + mcToast.error(msg ? `${t('agentContext.importPreviewFailed')}: ${msg}` : t('agentContext.importPreviewFailed')) + closeImportDialog() + } finally { + importLoading.value = false + } +} + +function closeImportDialog() { + showImportDialog.value = false + importPreview.value = null + importPendingFile.value = null +} + +async function applyImport() { + if (!canApplyImport.value || !importPendingFile.value || !selectedAgentId.value) return + importLoading.value = true + importLoadingMessage.value = t('agentContext.importApplying') + importInFlight.value = true + try { + const res: any = await agentContextApi.applyImportMemorySnapshot(selectedAgentId.value, importPendingFile.value) + const applied = Number(res?.data?.applied ?? 0) + const skipped = Number(res?.data?.skipped ?? 0) + mcToast.success(t('agentContext.importApplied', { applied, skipped })) + closeImportDialog() + // Re-fetch so the file list and any edited file reflect overwrites. + await fetchFiles() + await fetchPromptFiles() + if (selectedFile.value) { + const stillThere = files.value.find(f => f.filename === selectedFile.value?.filename) + if (stillThere) { + await onFileClick(stillThere) + } else { + selectedFile.value = null + fileContent.value = '' + originalContent.value = '' + } + } + } catch (e: unknown) { + const msg = e instanceof Error ? e.message : '' + mcToast.error(msg ? `${t('agentContext.importFailed')}: ${msg}` : t('agentContext.importFailed')) + } finally { + importLoading.value = false + importInFlight.value = false + } +} + +function formatStamp(d: Date): string { + const pad = (n: number) => String(n).padStart(2, '0') + return `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}` +} + function formatSize(bytes: number): string { if (!bytes || bytes === 0) return '0 B' if (bytes < 1024) return bytes + ' B' @@ -500,7 +755,8 @@ function formatTime(time?: string): string { .section-title { font-size: 14px; font-weight: 600; color: var(--mc-text-primary); margin: 0; } .panel-actions { display: flex; gap: 4px; } .icon-btn { width: 30px; height: 30px; border: 1px solid var(--mc-border); background: var(--mc-bg-elevated); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--mc-text-secondary); transition: all 0.15s; } -.icon-btn:hover { background: var(--mc-bg-sunken); color: var(--mc-text-primary); } +.icon-btn:hover:not(:disabled) { background: var(--mc-bg-sunken); color: var(--mc-text-primary); } +.icon-btn:disabled { opacity: 0.45; cursor: not-allowed; } .info-text { font-size: 12px; color: var(--mc-text-tertiary); padding: 6px 16px 0; margin: 0; line-height: 1.4; } .divider { height: 1px; background: var(--mc-border-light); margin: 10px 16px; } @@ -569,6 +825,189 @@ function formatTime(time?: string): string { .empty-editor { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--mc-text-tertiary); font-size: 14px; } +/* ===== Memory snapshot — glass import dialog ===== */ +.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } + +.mc-glass-overlay { + position: fixed; inset: 0; + background: rgba(20, 14, 10, 0.32); + backdrop-filter: blur(8px) saturate(140%); + -webkit-backdrop-filter: blur(8px) saturate(140%); + z-index: 2000; + display: flex; align-items: center; justify-content: center; padding: 20px; +} +:global(html.dark) .mc-glass-overlay { background: rgba(0, 0, 0, 0.55); } + +.mc-glass-panel { + width: 100%; max-width: 560px; + max-height: 80vh; + display: flex; flex-direction: column; + background: rgba(255, 250, 245, 0.88); + backdrop-filter: blur(48px) saturate(180%); + -webkit-backdrop-filter: blur(48px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: 18px; + box-shadow: 0 24px 60px rgba(25, 14, 8, 0.22), 0 2px 6px rgba(25, 14, 8, 0.08); + animation: mc-glass-pop 0.28s cubic-bezier(0.32, 0.72, 0, 1.2); +} +:global(html.dark) .mc-glass-panel { + background: rgba(32, 26, 22, 0.88); + border-color: rgba(255, 255, 255, 0.10); + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4); +} +@keyframes mc-glass-pop { + from { opacity: 0; transform: scale(0.94) translateY(6px); } + to { opacity: 1; transform: scale(1) translateY(0); } +} + +.mc-glass-fade-enter-active, .mc-glass-fade-leave-active { transition: opacity 0.18s ease; } +.mc-glass-fade-enter-from, .mc-glass-fade-leave-to { opacity: 0; } + +.mc-glass-head { + display: flex; align-items: flex-start; justify-content: space-between; + gap: 12px; + padding: 20px 24px 14px; + border-bottom: 1px solid rgba(255, 255, 255, 0.4); +} +:global(html.dark) .mc-glass-head { border-bottom-color: rgba(255, 255, 255, 0.06); } +.mc-glass-head-text h2 { font-size: 16px; font-weight: 600; color: var(--mc-text-primary); margin: 0; line-height: 1.4; } +.mc-glass-subtitle { font-size: 12px; color: var(--mc-text-tertiary); margin: 4px 0 0; word-break: break-all; } +.mc-glass-close { + width: 32px; height: 32px; border: none; background: rgba(255, 255, 255, 0.35); + cursor: pointer; color: var(--mc-text-tertiary); + display: flex; align-items: center; justify-content: center; + border-radius: 10px; flex-shrink: 0; + transition: background 0.18s ease, color 0.18s ease; +} +.mc-glass-close:hover { background: rgba(255, 255, 255, 0.6); color: var(--mc-text-primary); } +:global(html.dark) .mc-glass-close { background: rgba(255, 255, 255, 0.05); } +:global(html.dark) .mc-glass-close:hover { background: rgba(255, 255, 255, 0.12); color: var(--mc-text-primary); } + +.mc-glass-body { + padding: 16px 24px; + overflow-y: auto; + flex: 1; + min-height: 0; +} + +.mc-glass-foot { + display: flex; justify-content: flex-end; gap: 10px; + padding: 14px 24px 18px; + border-top: 1px solid rgba(255, 255, 255, 0.4); +} +:global(html.dark) .mc-glass-foot { border-top-color: rgba(255, 255, 255, 0.06); } + +.mc-glass-btn { + padding: 8px 16px; font-size: 14px; font-weight: 500; + border-radius: 10px; cursor: pointer; + transition: background 0.18s ease, transform 0.12s ease; +} +.mc-glass-btn:disabled { cursor: not-allowed; opacity: 0.55; } +.mc-glass-btn--ghost { + background: rgba(255, 255, 255, 0.4); + border: 1px solid rgba(255, 255, 255, 0.6); + color: var(--mc-text-primary); +} +.mc-glass-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.65); } +:global(html.dark) .mc-glass-btn--ghost { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.10); +} +:global(html.dark) .mc-glass-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); } +.mc-glass-btn--primary { + background: var(--mc-primary); color: white; + border: 1px solid var(--mc-primary); + box-shadow: 0 4px 14px rgba(217, 119, 87, 0.32); +} +.mc-glass-btn--primary:hover:not(:disabled) { background: var(--mc-primary-hover); } + +/* Loading state */ +.import-loading { + display: flex; align-items: center; gap: 12px; + padding: 20px 4px; color: var(--mc-text-secondary); font-size: 14px; +} +.import-spinner { + width: 18px; height: 18px; + border: 2px solid rgba(217, 119, 87, 0.25); + border-top-color: var(--mc-primary); + border-radius: 50%; + animation: mc-import-spin 0.7s linear infinite; +} +@keyframes mc-import-spin { to { transform: rotate(360deg); } } + +/* Diff sections */ +.diff-section { + margin-bottom: 14px; + padding: 12px 14px; + background: rgba(255, 255, 255, 0.45); + border: 1px solid rgba(255, 255, 255, 0.55); + border-radius: 12px; +} +:global(html.dark) .diff-section { + background: rgba(255, 255, 255, 0.04); + border-color: rgba(255, 255, 255, 0.08); +} +.diff-section-head { + display: flex; align-items: center; gap: 8px; + font-size: 12px; font-weight: 600; color: var(--mc-text-secondary); + text-transform: uppercase; letter-spacing: 0.04em; + margin-bottom: 8px; +} +.diff-section-count { + margin-left: auto; + font-size: 11px; font-weight: 600; color: var(--mc-text-tertiary); + background: rgba(0, 0, 0, 0.06); padding: 2px 7px; border-radius: 9px; + letter-spacing: 0; +} +:global(html.dark) .diff-section-count { background: rgba(255, 255, 255, 0.08); } +.diff-pill { font-size: 18px; line-height: 1; } +.diff-pill--create { color: #16a34a; } +.diff-pill--update { color: #f59e0b; } +.diff-pill--skip { color: #94a3b8; } + +.diff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } +.diff-row { + display: flex; align-items: flex-start; gap: 10px; + padding: 6px 10px; + border-radius: 8px; + font-size: 13px; + color: var(--mc-text-primary); +} +.diff-row-icon { + flex-shrink: 0; + font-family: 'SF Mono', Monaco, Consolas, monospace; + font-size: 13px; font-weight: 700; line-height: 20px; + width: 18px; text-align: center; +} +.diff-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } +.diff-row-name { font-weight: 500; word-break: break-all; } +.diff-row-meta { font-size: 11px; color: var(--mc-text-tertiary); } + +.diff-row--create { background: rgba(22, 163, 74, 0.08); } +.diff-row--create .diff-row-icon { color: #16a34a; } +.diff-row--update { background: rgba(245, 158, 11, 0.10); } +.diff-row--update .diff-row-icon { color: #f59e0b; } +.diff-row--skip { background: rgba(148, 163, 184, 0.10); } +.diff-row--skip .diff-row-icon { color: #94a3b8; } + +.diff-empty { font-size: 12px; color: var(--mc-text-tertiary); margin: 0; padding: 4px 2px; } +.diff-empty--all { padding: 24px 0; text-align: center; font-size: 13px; } + +.import-confirm-hint { + margin: 8px 2px 0; + padding: 8px 12px; + font-size: 12px; color: var(--mc-text-secondary); + background: rgba(217, 119, 87, 0.10); + border-radius: 8px; + border-left: 3px solid var(--mc-primary); +} +:global(html.dark) .import-confirm-hint { background: rgba(217, 119, 87, 0.16); } + +@media (max-width: 600px) { + .mc-glass-panel { max-width: 100%; max-height: 90vh; } + .mc-glass-head, .mc-glass-body, .mc-glass-foot { padding-left: 18px; padding-right: 18px; } +} + /* 弹窗 */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal { background: var(--mc-bg-elevated); border: 1px solid var(--mc-border); border-radius: 16px; width: 100%; max-width: 420px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }