From 30b9912dede886d5bfba75a708a41d35ada2e418 Mon Sep 17 00:00:00 2001
From: matevip <matevip@mate.vip>
Date: Tue, 21 Apr 2026 04:58:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20redesign=20Memory=20view=20?=
 =?UTF-8?q?=E2=80=94=20follow=20mc-page-shell=20design=20system?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mateclaw-ui/src/i18n/locales/en-US.ts         |   2 +
 mateclaw-ui/src/i18n/locales/zh-CN.ts         |   4 +-
 .../views/Memory/components/DreamTimeline.vue | 167 ++++++++++--------
 mateclaw-ui/src/views/Memory/index.vue        | 146 +++++++++++----
 4 files changed, 211 insertions(+), 108 deletions(-)

diff --git a/mateclaw-ui/src/i18n/locales/en-US.ts b/mateclaw-ui/src/i18n/locales/en-US.ts
index d803774a..bfef5adf 100644
--- a/mateclaw-ui/src/i18n/locales/en-US.ts
+++ b/mateclaw-ui/src/i18n/locales/en-US.ts
@@ -1782,7 +1782,9 @@ export default {
     },
   },
   memory: {
+    kicker: 'Memory',
     title: 'Memory',
+    desc: 'What your Agent thinks about, remembers, and lets go.',
     selectAgent: 'Select Agent',
     selectAgentHint: 'Select an agent to view its memory',
     tabTimeline: 'Dream Timeline',
diff --git a/mateclaw-ui/src/i18n/locales/zh-CN.ts b/mateclaw-ui/src/i18n/locales/zh-CN.ts
index bfa32ea1..b543821a 100644
--- a/mateclaw-ui/src/i18n/locales/zh-CN.ts
+++ b/mateclaw-ui/src/i18n/locales/zh-CN.ts
@@ -1792,7 +1792,9 @@ export default {
     },
   },
   memory: {
-    title: '记忆管理',
+    kicker: 'Memory',
+    title: '记忆',
+    desc: '你的 Agent 在想什么、记住了什么、遗忘了什么。',
     selectAgent: '选择 Agent',
     selectAgentHint: '请先选择一个 Agent 查看其记忆',
     tabTimeline: 'Dream 时间线',
diff --git a/mateclaw-ui/src/views/Memory/components/DreamTimeline.vue b/mateclaw-ui/src/views/Memory/components/DreamTimeline.vue
index 1c1607c3..e7718499 100644
--- a/mateclaw-ui/src/views/Memory/components/DreamTimeline.vue
+++ b/mateclaw-ui/src/views/Memory/components/DreamTimeline.vue
@@ -1,47 +1,54 @@
 <template>
   <div class="dream-timeline">
     <div v-if="store.loading" class="loading-state">
-      <el-skeleton :rows="5" animated />
+      <div class="skeleton-card mc-surface-card" v-for="i in 3" :key="i">
+        <el-skeleton :rows="2" animated />
+      </div>
     </div>
 
-    <el-empty v-else-if="store.reports.length === 0" :description="t('memory.noReports')" />
+    <div v-else-if="store.reports.length === 0" class="empty-state">
+      <div class="empty-icon">🌙</div>
+      <p>{{ t('memory.noReports') }}</p>
+    </div>
 
-    <div v-else class="timeline-list">
+    <div v-else class="timeline-cards">
       <div
         v-for="report in store.reports"
         :key="report.id"
-        class="timeline-item"
-        :class="{ active: selectedId === report.id }"
+        class="dream-card mc-surface-card"
+        :class="{ selected: selectedId === report.id }"
         @click="selectReport(report)"
       >
-        <div class="timeline-dot" :class="report.status.toLowerCase()" />
-        <div class="timeline-content">
-          <div class="timeline-header">
-            <el-tag :type="modeTagType(report.mode)" size="small">{{ report.mode }}</el-tag>
-            <span class="timeline-time">{{ formatTime(report.startedAt) }}</span>
-          </div>
-          <div class="timeline-meta">
-            <span v-if="report.topic" class="topic">{{ report.topic }}</span>
-            <span class="counts">
-              +{{ report.promotedCount }} / -{{ report.rejectedCount }} / {{ report.candidateCount }} candidates
-            </span>
-          </div>
-          <div v-if="report.llmReason" class="timeline-reason">{{ truncate(report.llmReason, 80) }}</div>
+        <div class="card-top">
+          <span class="status-dot" :class="report.status.toLowerCase()" />
+          <span class="card-mode">{{ report.mode }}</span>
+          <span class="card-time">{{ formatRelativeTime(report.startedAt) }}</span>
         </div>
+
+        <div v-if="report.topic" class="card-topic">{{ report.topic }}</div>
+
+        <div class="card-stats">
+          <span class="stat promoted">+{{ report.promotedCount }}</span>
+          <span class="stat rejected">-{{ report.rejectedCount }}</span>
+          <span class="stat total">{{ report.candidateCount }} candidates</span>
+        </div>
+
+        <p v-if="report.llmReason" class="card-reason">{{ truncate(report.llmReason, 120) }}</p>
       </div>
 
-      <div class="pagination-wrapper">
+      <div v-if="store.total > pageSize" class="pagination-wrap">
         <el-pagination
           v-model:current-page="currentPage"
           :page-size="pageSize"
           :total="store.total"
           layout="prev, pager, next"
+          small
           @current-change="onPageChange"
         />
       </div>
     </div>
 
-    <!-- Detail panel -->
+    <!-- Detail drawer -->
     <DreamReportPanel v-if="selectedId" :report="store.currentReport" @close="selectedId = null" />
   </div>
 </template>
@@ -79,14 +86,17 @@ function selectReport(report: DreamReportItem) {
   store.fetchReport(props.agentId, report.id)
 }
 
-function modeTagType(mode: string) {
-  return mode === 'FOCUSED' ? 'warning' : 'info'
-}
-
-function formatTime(isoStr: string) {
+function formatRelativeTime(isoStr: string) {
   if (!isoStr) return ''
   const d = new Date(isoStr)
-  return d.toLocaleString()
+  const now = new Date()
+  const diffMs = now.getTime() - d.getTime()
+  const diffH = Math.floor(diffMs / 3600000)
+  if (diffH < 1) return 'just now'
+  if (diffH < 24) return `${diffH}h ago`
+  const diffD = Math.floor(diffH / 24)
+  if (diffD < 7) return `${diffD}d ago`
+  return d.toLocaleDateString()
 }
 
 function truncate(str: string, max: number) {
@@ -96,72 +106,91 @@ function truncate(str: string, max: number) {
 
 <style scoped>
 .dream-timeline {
-  position: relative;
+  margin-top: 8px;
 }
-.timeline-list {
-  padding-left: 20px;
-  border-left: 2px solid var(--el-border-color-lighter);
+.timeline-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
-.timeline-item {
-  position: relative;
-  padding: 12px 16px;
-  margin-bottom: 8px;
-  border-radius: 8px;
+.dream-card {
+  padding: 16px 20px;
+  border-radius: 12px;
   cursor: pointer;
-  transition: background-color 0.2s;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
-.timeline-item:hover {
-  background-color: var(--el-fill-color-light);
+.dream-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
 }
-.timeline-item.active {
-  background-color: var(--el-color-primary-light-9);
+.dream-card.selected {
+  border-color: var(--el-color-primary);
+  box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
 }
-.timeline-dot {
-  position: absolute;
-  left: -27px;
-  top: 18px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--el-color-info);
-}
-.timeline-dot.success { background: var(--el-color-success); }
-.timeline-dot.failed { background: var(--el-color-danger); }
-.timeline-dot.skipped { background: var(--el-color-warning); }
-.timeline-header {
+.card-top {
   display: flex;
   align-items: center;
   gap: 8px;
-}
-.timeline-time {
   font-size: 12px;
   color: var(--el-text-color-secondary);
 }
-.timeline-meta {
-  margin-top: 4px;
-  font-size: 13px;
-  color: var(--el-text-color-regular);
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--el-color-info-light-3);
 }
-.timeline-meta .topic {
+.status-dot.success { background: var(--el-color-success); }
+.status-dot.failed { background: var(--el-color-danger); }
+.status-dot.skipped { background: var(--el-color-warning); }
+.card-mode {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-size: 11px;
+}
+.card-time { margin-left: auto; }
+.card-topic {
+  margin-top: 8px;
+  font-size: 15px;
   font-weight: 500;
-  margin-right: 8px;
+  color: var(--el-text-color-primary);
 }
-.timeline-meta .counts {
-  color: var(--el-text-color-secondary);
-  font-size: 12px;
+.card-stats {
+  margin-top: 8px;
+  display: flex;
+  gap: 12px;
+  font-size: 13px;
 }
-.timeline-reason {
-  margin-top: 4px;
+.stat.promoted { color: var(--el-color-success); font-weight: 600; }
+.stat.rejected { color: var(--el-color-danger-light-3); }
+.stat.total { color: var(--el-text-color-secondary); }
+.card-reason {
+  margin-top: 6px;
   font-size: 12px;
   color: var(--el-text-color-secondary);
-  font-style: italic;
+  line-height: 1.4;
 }
-.pagination-wrapper {
+.pagination-wrap {
   margin-top: 16px;
   display: flex;
   justify-content: center;
 }
 .loading-state {
-  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
+.skeleton-card {
+  padding: 16px 20px;
+  border-radius: 12px;
+}
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48px 0;
+  color: var(--el-text-color-placeholder);
+}
+.empty-icon { font-size: 32px; margin-bottom: 12px; }
 </style>
diff --git a/mateclaw-ui/src/views/Memory/index.vue b/mateclaw-ui/src/views/Memory/index.vue
index 3bdce9b2..46f26e6b 100644
--- a/mateclaw-ui/src/views/Memory/index.vue
+++ b/mateclaw-ui/src/views/Memory/index.vue
@@ -1,35 +1,61 @@
 <template>
-  <div class="memory-view">
-    <div class="memory-header">
-      <h2>{{ t('memory.title') }}</h2>
-      <el-select v-model="selectedAgentId" :placeholder="t('memory.selectAgent')" style="width: 200px" @change="onAgentChange">
-        <el-option v-for="agent in agents" :key="agent.id" :label="agent.name" :value="agent.id" />
-      </el-select>
-    </div>
+  <div class="mc-page-shell memory-shell">
+    <div class="mc-page-frame memory-frame">
+      <div class="mc-page-inner memory-inner">
+        <div class="mc-page-header">
+          <div>
+            <div class="mc-page-kicker">{{ t('memory.kicker') }}</div>
+            <h1 class="mc-page-title">{{ t('memory.title') }}</h1>
+            <p class="mc-page-desc">{{ t('memory.desc') }}</p>
+          </div>
+          <el-select
+            v-model="selectedAgentId"
+            :placeholder="t('memory.selectAgent')"
+            class="agent-selector"
+            @change="onAgentChange"
+          >
+            <el-option v-for="agent in agents" :key="agent.id" :label="agent.name" :value="agent.id" />
+          </el-select>
+        </div>
 
-    <el-tabs v-model="activeTab" class="memory-tabs">
-      <el-tab-pane :label="t('memory.tabTimeline')" name="timeline">
-        <DreamTimeline v-if="selectedAgentId" :agent-id="selectedAgentId" />
-        <el-empty v-else :description="t('memory.selectAgentHint')" />
-      </el-tab-pane>
-      <el-tab-pane :label="t('memory.tabMemory')" name="memory" disabled>
-        <el-empty description="Phase 2b" />
-      </el-tab-pane>
-      <el-tab-pane :label="t('memory.tabProfile')" name="profile" disabled>
-        <el-empty description="Phase 2b" />
-      </el-tab-pane>
-      <el-tab-pane :label="t('memory.tabFacts')" name="facts" disabled>
-        <el-empty description="Phase 3" />
-      </el-tab-pane>
-    </el-tabs>
+        <!-- Morning Card -->
+        <MorningCard v-if="selectedAgentId" :agent-id="selectedAgentId" />
+
+        <!-- Tab navigation: minimal, no borders -->
+        <div class="memory-nav">
+          <button
+            v-for="tab in tabs"
+            :key="tab.key"
+            class="memory-nav-btn"
+            :class="{ active: activeTab === tab.key, disabled: tab.disabled }"
+            :disabled="tab.disabled"
+            @click="activeTab = tab.key"
+          >
+            {{ tab.label }}
+          </button>
+        </div>
+
+        <!-- Content -->
+        <div class="memory-content">
+          <DreamTimeline v-if="activeTab === 'timeline' && selectedAgentId" :agent-id="selectedAgentId" />
+          <div v-else-if="!selectedAgentId" class="empty-state">
+            <p>{{ t('memory.selectAgentHint') }}</p>
+          </div>
+          <div v-else class="empty-state">
+            <p>Coming soon</p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAgentStore } from '@/stores/useAgentStore'
 import DreamTimeline from './components/DreamTimeline.vue'
+import MorningCard from './components/MorningCard.vue'
 
 const { t } = useI18n()
 const agentStore = useAgentStore()
@@ -37,6 +63,13 @@ const agents = ref<any[]>([])
 const selectedAgentId = ref<number | null>(null)
 const activeTab = ref('timeline')
 
+const tabs = computed(() => [
+  { key: 'timeline', label: t('memory.tabTimeline'), disabled: false },
+  { key: 'memory', label: t('memory.tabMemory'), disabled: true },
+  { key: 'profile', label: t('memory.tabProfile'), disabled: true },
+  { key: 'facts', label: t('memory.tabFacts'), disabled: true },
+])
+
 onMounted(async () => {
   await agentStore.fetchAgents()
   agents.value = agentStore.agents
@@ -46,27 +79,64 @@ onMounted(async () => {
 })
 
 function onAgentChange() {
-  // DreamTimeline watches agentId prop
+  activeTab.value = 'timeline'
 }
 </script>
 
 <style scoped>
-.memory-view {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
+.memory-shell {
+  --memory-max-width: 960px;
 }
-.memory-header {
+.memory-frame {
+  max-width: var(--memory-max-width);
+}
+.agent-selector {
+  width: 180px;
+}
+
+/* Minimal tab navigation — inspired by Apple's segment control */
+.memory-nav {
+  display: flex;
+  gap: 2px;
+  margin: 24px 0 16px;
+  padding: 3px;
+  background: var(--el-fill-color-light);
+  border-radius: 8px;
+  width: fit-content;
+}
+.memory-nav-btn {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--el-text-color-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.memory-nav-btn:hover:not(.disabled) {
+  color: var(--el-text-color-primary);
+}
+.memory-nav-btn.active {
+  background: var(--el-bg-color);
+  color: var(--el-text-color-primary);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+.memory-nav-btn.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.memory-content {
+  min-height: 300px;
+}
+.empty-state {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-.memory-header h2 {
-  margin: 0;
-  font-size: 20px;
-}
-.memory-tabs {
-  margin-top: 10px;
+  justify-content: center;
+  min-height: 200px;
+  color: var(--el-text-color-placeholder);
+  font-size: 14px;
 }
 </style>