From 6e57f78fc2198d0e7f97b8d3f89d09c75f815015 Mon Sep 17 00:00:00 2001
From: matevip <matevip@mate.vip>
Date: Sun, 10 May 2026 19:16:22 +0800
Subject: [PATCH] feat(wiki-ui): library home + workspace split for Wiki page

---
 mateclaw-ui/src/i18n/locales/en-US.ts         |  16 +
 mateclaw-ui/src/i18n/locales/zh-CN.ts         |  16 +
 mateclaw-ui/src/stores/useWikiStore.ts        |   9 +
 .../src/views/Wiki/components/WikiKBCard.vue  | 177 ++++
 .../src/views/Wiki/components/WikiLibrary.vue | 254 ++++++
 .../views/Wiki/components/WikiPageSidebar.vue | 599 +++++++++++++
 .../views/Wiki/components/WikiWorkspace.vue   | 118 +++
 .../Wiki/components/WikiWorkspaceHeader.vue   | 148 ++++
 mateclaw-ui/src/views/Wiki/index.vue          | 813 +-----------------
 mateclaw-ui/src/views/Wiki/utils/kbVisual.ts  |  72 ++
 10 files changed, 1428 insertions(+), 794 deletions(-)
 create mode 100644 mateclaw-ui/src/views/Wiki/components/WikiKBCard.vue
 create mode 100644 mateclaw-ui/src/views/Wiki/components/WikiLibrary.vue
 create mode 100644 mateclaw-ui/src/views/Wiki/components/WikiPageSidebar.vue
 create mode 100644 mateclaw-ui/src/views/Wiki/components/WikiWorkspace.vue
 create mode 100644 mateclaw-ui/src/views/Wiki/components/WikiWorkspaceHeader.vue
 create mode 100644 mateclaw-ui/src/views/Wiki/utils/kbVisual.ts

diff --git a/mateclaw-ui/src/i18n/locales/en-US.ts b/mateclaw-ui/src/i18n/locales/en-US.ts
index 4f31a350..e8a94e33 100644
--- a/mateclaw-ui/src/i18n/locales/en-US.ts
+++ b/mateclaw-ui/src/i18n/locales/en-US.ts
@@ -1767,6 +1767,22 @@ export default {
     knowledgeBases: 'Knowledge Bases',
     noKB: 'No knowledge bases yet',
     selectKB: 'Select a knowledge base',
+    library: {
+      countLabel: '{count} knowledge bases',
+      searchPlaceholder: 'Search knowledge bases...',
+      empty: 'No knowledge bases yet',
+      emptyHint: 'Click "New Knowledge Base" in the top right to start organizing your knowledge.',
+      noMatch: 'No matching knowledge bases',
+      open: 'Open',
+      pages: '{count} pages',
+      raws: '{count} materials',
+      noDescription: 'No description',
+      updatedAt: 'Updated {time}',
+      sortRecent: 'Recently updated',
+      sortName: 'Name',
+      sortPages: 'Pages',
+      backToLibrary: 'Back to library',
+    },
     selectPage: 'Select a page from the sidebar',
     pageKicker: 'Knowledge Page',
     confirmDelete: 'Delete page "{title}"? This cannot be undone.',
diff --git a/mateclaw-ui/src/i18n/locales/zh-CN.ts b/mateclaw-ui/src/i18n/locales/zh-CN.ts
index 9a340bae..e765063e 100644
--- a/mateclaw-ui/src/i18n/locales/zh-CN.ts
+++ b/mateclaw-ui/src/i18n/locales/zh-CN.ts
@@ -1779,6 +1779,22 @@ export default {
     knowledgeBases: '知识库',
     noKB: '暂无知识库',
     selectKB: '请选择一个知识库',
+    library: {
+      countLabel: '{count} 个知识库',
+      searchPlaceholder: '搜索知识库...',
+      empty: '还没有知识库',
+      emptyHint: '点击右上角"新建知识库"开始组织你的知识',
+      noMatch: '没有匹配的知识库',
+      open: '进入',
+      pages: '{count} 页',
+      raws: '{count} 材料',
+      noDescription: '暂无描述',
+      updatedAt: '更新于 {time}',
+      sortRecent: '最近更新',
+      sortName: '名称',
+      sortPages: '页面数',
+      backToLibrary: '返回库',
+    },
     selectPage: '从左侧选择一个页面查看',
     pageKicker: '知识页面',
     confirmDelete: '确认删除页面「{title}」？此操作不可撤销。',
diff --git a/mateclaw-ui/src/stores/useWikiStore.ts b/mateclaw-ui/src/stores/useWikiStore.ts
index 86ba8e6d..774db087 100644
--- a/mateclaw-ui/src/stores/useWikiStore.ts
+++ b/mateclaw-ui/src/stores/useWikiStore.ts
@@ -109,6 +109,14 @@ export const useWikiStore = defineStore('wiki', () => {
     }
   }
 
+  function backToLibrary() {
+    currentKB.value = null
+    currentPage.value = null
+    rawMaterials.value = []
+    pages.value = []
+    selectedRawId.value = null
+  }
+
   async function fetchRawMaterials(kbId: number) {
     const res: any = await wikiApi.listRaw(kbId)
     rawMaterials.value = res.data || []
@@ -183,6 +191,7 @@ export const useWikiStore = defineStore('wiki', () => {
     selectKB,
     createKB,
     deleteKB,
+    backToLibrary,
     fetchRawMaterials,
     fetchPages,
     filterPagesByRaw,
diff --git a/mateclaw-ui/src/views/Wiki/components/WikiKBCard.vue b/mateclaw-ui/src/views/Wiki/components/WikiKBCard.vue
new file mode 100644
index 00000000..bcfb7621
--- /dev/null
+++ b/mateclaw-ui/src/views/Wiki/components/WikiKBCard.vue
@@ -0,0 +1,177 @@
+<template>
+  <button
+    type="button"
+    class="kb-card mc-surface-card"
+    :class="{ 'kb-card--has-warn': failedJobCount > 0 }"
+    @click="$emit('open', kb.id)"
+  >
+    <div class="kb-card-top">
+      <div class="kb-card-icon" :style="iconStyle">{{ initial }}</div>
+      <span
+        class="kb-status-dot"
+        :class="kb.status"
+        :title="t(`wiki.status.${kb.status}`)"
+      ></span>
+    </div>
+    <div class="kb-card-body">
+      <h3 class="kb-card-name">{{ kb.name }}</h3>
+      <p class="kb-card-desc" :class="{ 'kb-card-desc--muted': !kb.description }">
+        {{ kb.description || t('wiki.library.noDescription') }}
+      </p>
+    </div>
+    <div class="kb-card-footer">
+      <div class="kb-card-stats">
+        <span class="kb-card-stat">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+          {{ kb.pageCount }}
+        </span>
+        <span class="kb-card-stat">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+          {{ kb.rawCount }}
+        </span>
+      </div>
+      <span class="kb-card-time">{{ relative }}</span>
+    </div>
+    <div v-if="failedJobCount > 0" class="kb-card-warn">
+      ⚠ {{ t('wiki.stats.failedJobs', { count: failedJobCount }) }}
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { WikiKB } from '@/stores/useWikiStore'
+import { kbAccent, kbAccentFg, kbInitial, relativeTime } from '../utils/kbVisual'
+
+const props = defineProps<{
+  kb: WikiKB
+  failedJobCount?: number
+}>()
+
+defineEmits<{ (e: 'open', id: number): void }>()
+
+const { t, locale } = useI18n()
+
+const failedJobCount = computed(() => props.failedJobCount ?? 0)
+const initial = computed(() => kbInitial(props.kb))
+const iconStyle = computed(() => ({
+  background: kbAccent(props.kb),
+  color: kbAccentFg(props.kb),
+}))
+const relative = computed(() => relativeTime(props.kb.updateTime, locale.value.startsWith('zh')))
+</script>
+
+<style scoped>
+.kb-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 18px;
+  text-align: left;
+  cursor: pointer;
+  border: 1px solid var(--mc-border-light);
+  background: var(--mc-bg-elevated);
+  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+  font-family: inherit;
+}
+.kb-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
+  border-color: var(--mc-border);
+}
+.kb-card:focus-visible { outline: 2px solid var(--mc-primary); outline-offset: 2px; }
+
+.kb-card-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+.kb-card-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  flex-shrink: 0;
+}
+
+.kb-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 9999px;
+  flex-shrink: 0;
+  margin-top: 6px;
+}
+.kb-status-dot.active { background: var(--mc-success); }
+.kb-status-dot.processing { background: var(--mc-primary); animation: pulse 1.4s ease-in-out infinite; }
+.kb-status-dot.error { background: var(--mc-danger); }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.kb-card-body { display: flex; flex-direction: column; gap: 4px; min-height: 56px; }
+.kb-card-name {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--mc-text-primary);
+  margin: 0;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.kb-card-desc {
+  font-size: 12.5px;
+  color: var(--mc-text-secondary);
+  margin: 0;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.kb-card-desc--muted { color: var(--mc-text-tertiary); font-style: italic; }
+
+.kb-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: auto;
+  padding-top: 12px;
+  border-top: 1px solid var(--mc-border-light);
+}
+.kb-card-stats { display: flex; align-items: center; gap: 10px; }
+.kb-card-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--mc-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+.kb-card-time {
+  font-size: 11px;
+  color: var(--mc-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.kb-card-warn {
+  font-size: 11px;
+  color: var(--mc-danger);
+  background: rgba(245, 108, 108, 0.08);
+  padding: 4px 8px;
+  border-radius: 6px;
+  margin-top: -2px;
+}
+.kb-card--has-warn { border-color: rgba(245, 108, 108, 0.3); }
+</style>
diff --git a/mateclaw-ui/src/views/Wiki/components/WikiLibrary.vue b/mateclaw-ui/src/views/Wiki/components/WikiLibrary.vue
new file mode 100644
index 00000000..b59de633
--- /dev/null
+++ b/mateclaw-ui/src/views/Wiki/components/WikiLibrary.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="wiki-library">
+    <div class="mc-page-header">
+      <div>
+        <div class="mc-page-kicker">{{ t('wiki.kicker') }}</div>
+        <h1 class="mc-page-title">{{ t('nav.wiki') }}</h1>
+        <p class="mc-page-desc">{{ t('wiki.desc') }}</p>
+      </div>
+      <button class="btn-primary page-cta" @click="$emit('create')">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+        </svg>
+        {{ t('wiki.createKB') }}
+      </button>
+    </div>
+
+    <div class="library-toolbar mc-surface-card">
+      <div class="library-count">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
+        {{ t('wiki.library.countLabel', { count: filtered.length }) }}
+      </div>
+      <div class="library-search">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        <input
+          v-model="searchInput"
+          type="text"
+          :placeholder="t('wiki.library.searchPlaceholder')"
+          class="library-search-input"
+        />
+        <button v-if="searchInput" class="library-search-clear" @click="searchInput = ''">✕</button>
+      </div>
+      <div class="library-sort">
+        <select v-model="sortInput" class="library-sort-select">
+          <option value="recent">{{ t('wiki.library.sortRecent') }}</option>
+          <option value="name">{{ t('wiki.library.sortName') }}</option>
+          <option value="pages">{{ t('wiki.library.sortPages') }}</option>
+        </select>
+      </div>
+    </div>
+
+    <div v-if="loading" class="library-message">{{ t('common.loading') }}</div>
+
+    <div v-else-if="kbs.length === 0" class="library-empty mc-surface-card">
+      <div class="library-empty-icon">
+        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
+          <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
+        </svg>
+      </div>
+      <h3 class="library-empty-title">{{ t('wiki.library.empty') }}</h3>
+      <p class="library-empty-hint">{{ t('wiki.library.emptyHint') }}</p>
+      <button class="btn-primary" @click="$emit('create')">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+        {{ t('wiki.createKB') }}
+      </button>
+    </div>
+
+    <div v-else-if="filtered.length === 0" class="library-message">
+      {{ t('wiki.library.noMatch') }}
+    </div>
+
+    <template v-else>
+      <div class="kb-grid">
+        <WikiKBCard
+          v-for="kb in pageItems"
+          :key="kb.id"
+          :kb="kb"
+          :failed-job-count="kbStats[kb.id]?.failedJobCount || 0"
+          @open="$emit('open', $event)"
+        />
+      </div>
+
+      <div class="library-pager">
+        <McPagination
+          v-model:page="page"
+          v-model:size="size"
+          :total="filtered.length"
+          :sizes="[12, 24, 48]"
+          hide-on-single-page
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { WikiKB } from '@/stores/useWikiStore'
+import McPagination from '@/components/common/McPagination.vue'
+import WikiKBCard from './WikiKBCard.vue'
+
+interface KBStats {
+  failedJobCount: number
+  [k: string]: any
+}
+
+const props = defineProps<{
+  kbs: WikiKB[]
+  kbStats: Record<number, KBStats>
+  loading: boolean
+}>()
+
+defineEmits<{
+  (e: 'open', id: number): void
+  (e: 'create'): void
+}>()
+
+const { t } = useI18n()
+
+const searchInput = ref('')
+type SortMode = 'recent' | 'name' | 'pages'
+const sortInput = ref<SortMode>('recent')
+
+const page = ref(1)
+const size = ref(12)
+
+const filtered = computed<WikiKB[]>(() => {
+  const q = searchInput.value.trim().toLowerCase()
+  let list = props.kbs.slice()
+  if (q) {
+    list = list.filter(kb =>
+      kb.name.toLowerCase().includes(q) ||
+      (kb.description || '').toLowerCase().includes(q)
+    )
+  }
+  if (sortInput.value === 'name') {
+    list.sort((a, b) => a.name.localeCompare(b.name))
+  } else if (sortInput.value === 'pages') {
+    list.sort((a, b) => (b.pageCount || 0) - (a.pageCount || 0))
+  } else {
+    list.sort((a, b) => {
+      const ta = a.updateTime ? new Date(a.updateTime).getTime() : 0
+      const tb = b.updateTime ? new Date(b.updateTime).getTime() : 0
+      return tb - ta
+    })
+  }
+  return list
+})
+
+// Reset to page 1 whenever the filtered/sorted set changes shape — otherwise
+// you can land on an out-of-range page after a search.
+watch([searchInput, sortInput], () => { page.value = 1 })
+watch(() => props.kbs.length, () => { page.value = 1 })
+
+const pageItems = computed(() => {
+  const start = (page.value - 1) * size.value
+  return filtered.value.slice(start, start + size.value)
+})
+</script>
+
+<style scoped>
+.wiki-library { display: flex; flex-direction: column; }
+
+.btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-hover)); color: white; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--mc-shadow-soft); transition: opacity 0.15s; }
+.btn-primary:hover { opacity: 0.9; }
+
+.library-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 10px 14px;
+  margin-bottom: 18px;
+}
+.library-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--mc-text-secondary);
+  padding-right: 14px;
+  border-right: 1px solid var(--mc-border-light);
+}
+.library-search {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  background: var(--mc-bg-muted);
+  border: 1px solid var(--mc-border-light);
+  border-radius: 10px;
+  color: var(--mc-text-tertiary);
+  transition: border-color 0.15s;
+  max-width: 360px;
+}
+.library-search:focus-within { border-color: var(--mc-primary); }
+.library-search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: 13px;
+  color: var(--mc-text-primary);
+  outline: none;
+  min-width: 0;
+}
+.library-search-input::placeholder { color: var(--mc-text-tertiary); }
+.library-search-clear { border: none; background: none; cursor: pointer; color: var(--mc-text-tertiary); font-size: 12px; padding: 0; line-height: 1; }
+.library-search-clear:hover { color: var(--mc-text-secondary); }
+
+.library-sort { margin-left: auto; }
+.library-sort-select {
+  padding: 7px 12px;
+  background: var(--mc-bg-muted);
+  border: 1px solid var(--mc-border-light);
+  border-radius: 10px;
+  color: var(--mc-text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.library-sort-select:focus { border-color: var(--mc-primary); }
+
+.library-message {
+  text-align: center;
+  padding: 48px 16px;
+  color: var(--mc-text-tertiary);
+  font-size: 14px;
+}
+
+.library-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 60px 20px;
+  gap: 14px;
+}
+.library-empty-icon { color: var(--mc-text-tertiary); opacity: 0.6; }
+.library-empty-title { font-size: 18px; font-weight: 700; color: var(--mc-text-primary); margin: 0; }
+.library-empty-hint { font-size: 13px; color: var(--mc-text-tertiary); margin: 0 0 8px; max-width: 380px; line-height: 1.5; }
+
+.kb-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 16px;
+  padding-bottom: 4px;
+}
+
+.library-pager {
+  margin-top: 18px;
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 980px) {
+  .library-toolbar { flex-wrap: wrap; }
+  .library-search { max-width: 100%; }
+  .library-sort { margin-left: 0; }
+}
+</style>
diff --git a/mateclaw-ui/src/views/Wiki/components/WikiPageSidebar.vue b/mateclaw-ui/src/views/Wiki/components/WikiPageSidebar.vue
new file mode 100644
index 00000000..a35c6ee1
--- /dev/null
+++ b/mateclaw-ui/src/views/Wiki/components/WikiPageSidebar.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="wiki-sidebar mc-surface-card">
+    <div class="sidebar-section sidebar-section--pages">
+      <div class="sidebar-title-row">
+        <h3 class="sidebar-label">
+          {{ t('wiki.pages') }}
+          <span class="count-badge">{{ store.pages.length }}</span>
+        </h3>
+        <div class="sidebar-title-actions">
+          <button
+            v-if="!batchMode"
+            class="icon-btn" :title="t('wiki.batchSelect')"
+            @click="batchMode = true"
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+          </button>
+          <button v-else class="icon-btn icon-btn--active" @click="exitBatchMode">✕</button>
+        </div>
+      </div>
+
+      <div class="search-wrap">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        <input
+          v-model="pageSearch"
+          type="text"
+          :placeholder="t('wiki.searchPages')"
+          class="search-input"
+        />
+        <button v-if="pageSearch" class="search-clear" @click="pageSearch = ''">✕</button>
+      </div>
+
+      <div v-if="batchMode" class="batch-bar">
+        <label class="batch-check-all">
+          <input type="checkbox" :checked="allSelected" @change="toggleSelectAll" />
+          <span>{{ t('wiki.selectAll') }}</span>
+        </label>
+        <button
+          class="batch-delete-btn"
+          :disabled="selectedSlugs.length === 0"
+          @click="handleBatchDelete"
+        >
+          {{ t('common.delete') }} ({{ selectedSlugs.length }})
+        </button>
+      </div>
+
+      <div v-if="store.selectedRawId" class="filter-banner">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 3H2l8 9.46V19l4 2V12.46L22 3z"/></svg>
+        {{ t('wiki.filteredByRaw') }}
+        <button class="filter-clear-btn" @click="store.clearRawFilter(store.currentKB!.id)">✕</button>
+      </div>
+
+      <div class="page-list" v-if="!pageSearch" ref="pageListEl" @scroll="onPageListScroll">
+        <div v-for="group in groupedPages" :key="group.type" class="page-group">
+          <button
+            class="group-header"
+            @click="toggleGroup(group.type)"
+          >
+            <svg
+              class="group-chevron"
+              :class="{ expanded: !collapsedGroups.has(group.type) }"
+              width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+            ><polyline points="9 18 15 12 9 6"/></svg>
+            <span class="group-label">{{ formatGroupLabel(group.type) }}</span>
+            <span class="group-count">{{ group.pages.length }}</span>
+          </button>
+          <div v-if="!collapsedGroups.has(group.type)" class="group-items">
+            <div
+              v-for="page in paginatedGroupPages(group)" :key="page.slug"
+              class="page-item"
+              :class="{
+                active: !batchMode && store.currentPage?.slug === page.slug,
+                'page-item--system': page.pageType === 'system'
+              }"
+              @click="batchMode ? toggleSelect(page.slug) : openPage(page.slug)"
+            >
+              <input
+                v-if="batchMode"
+                type="checkbox"
+                :checked="selectedSlugs.includes(page.slug)"
+                :disabled="isProtectedPage(page)"
+                class="page-checkbox"
+                @click.stop="!isProtectedPage(page) && toggleSelect(page.slug)"
+              />
+              <div class="page-item-body">
+                <div class="page-item-title">{{ page.title }}</div>
+                <div class="page-item-meta">
+                  <span v-if="page.lastUpdatedBy === 'manual'" class="edit-dot manual" title="Manual edit"></span>
+                  <span v-if="page.pageType === 'system'" class="page-flag page-flag--system">{{ t('wiki.systemPageBadge') }}</span>
+                  <span v-else-if="page.locked === 1" class="page-flag page-flag--locked">{{ t('wiki.lockedPageBadge') }}</span>
+                  <span class="meta-text">v{{ page.version }}</span>
+                </div>
+              </div>
+            </div>
+            <button
+              v-if="(groupPageLimit[group.type] || PAGE_STEP) < group.pages.length"
+              class="load-more-btn"
+              @click.stop="loadMoreGroup(group.type)"
+            >
+              {{ t('wiki.loadMore', { n: Math.min(PAGE_STEP, group.pages.length - (groupPageLimit[group.type] || PAGE_STEP)) }) }}
+            </button>
+          </div>
+        </div>
+        <div v-if="groupedPages.length === 0" class="empty-hint">{{ t('wiki.noPages') }}</div>
+
+        <div class="archived-section">
+          <button
+            class="archived-toggle"
+            :disabled="archivedLoading"
+            @click="toggleArchived"
+          >
+            <svg
+              class="archived-chevron"
+              :class="{ expanded: archivedOpen }"
+              width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+            ><polyline points="9 18 15 12 9 6"/></svg>
+            {{ t('wiki.archivedSection') }}
+            <span v-if="archivedPages.length > 0" class="archived-count">{{ archivedPages.length }}</span>
+          </button>
+          <div v-if="archivedOpen" class="archived-items">
+            <div v-if="archivedLoading" class="archived-empty">{{ t('common.loading') }}</div>
+            <div v-else-if="archivedPages.length === 0" class="archived-empty">{{ t('wiki.noArchived') }}</div>
+            <div v-else
+                 v-for="page in archivedPages" :key="'arc:' + page.slug"
+                 class="archived-item"
+                 @click="openPage(page.slug)"
+            >
+              <div class="archived-item-body">
+                <div class="archived-item-title">{{ page.title }}</div>
+                <div class="archived-item-meta">v{{ page.version }} · {{ page.slug }}</div>
+              </div>
+              <button
+                class="archived-restore-btn"
+                :title="t('wiki.unarchive')"
+                @click.stop="restoreArchivedPage(page.slug)"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                  <polyline points="3 7 12 12 21 7"/><path d="M3 7v10l9 5 9-5V7"/>
+                </svg>
+                {{ t('wiki.unarchive') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="page-list" v-else>
+        <div
+          v-for="page in paginatedSearch" :key="page.slug"
+          class="page-item"
+          :class="{
+            active: !batchMode && store.currentPage?.slug === page.slug,
+            'page-item--system': page.pageType === 'system'
+          }"
+          @click="batchMode ? toggleSelect(page.slug) : openPage(page.slug)"
+        >
+          <input
+            v-if="batchMode"
+            type="checkbox"
+            :checked="selectedSlugs.includes(page.slug)"
+            :disabled="isProtectedPage(page)"
+            class="page-checkbox"
+            @click.stop="!isProtectedPage(page) && toggleSelect(page.slug)"
+          />
+          <div class="page-item-body">
+            <div class="page-item-title">{{ page.title }}</div>
+            <div class="page-item-meta">
+              <span class="type-chip">{{ formatGroupLabel(page.pageType || 'other') }}</span>
+              <span v-if="page.pageType === 'system'" class="page-flag page-flag--system">{{ t('wiki.systemPageBadge') }}</span>
+              <span v-else-if="page.locked === 1" class="page-flag page-flag--locked">{{ t('wiki.lockedPageBadge') }}</span>
+              <span class="meta-text">v{{ page.version }}</span>
+            </div>
+          </div>
+        </div>
+        <div v-if="filteredPages.length > searchPageLimit" class="pagination-row">
+          <button class="load-more-btn" @click="searchPageLimit += PAGE_STEP">
+            {{ t('wiki.loadMore', { n: Math.min(PAGE_STEP, filteredPages.length - searchPageLimit) }) }}
+          </button>
+        </div>
+        <div v-if="filteredPages.length === 0" class="empty-hint">{{ t('wiki.noResults') }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useWikiStore, isProtectedPage, type WikiPage } from '@/stores/useWikiStore'
+import { wikiApi } from '@/api/index'
+
+const emit = defineEmits<{ (e: 'open-page', slug: string): void }>()
+
+const { t } = useI18n()
+const store = useWikiStore()
+const pageListEl = ref<HTMLElement | null>(null)
+
+const PAGE_STEP = 20
+const TYPE_ORDER = ['concept', 'technology', 'process', 'person', 'organization', 'product', 'place', 'event', 'term', 'other']
+
+const pageSearch = ref('')
+const searchPageLimit = ref(PAGE_STEP)
+const groupPageLimit = reactive<Record<string, number>>({})
+const collapsedGroups = reactive<Set<string>>(new Set())
+
+const batchMode = ref(false)
+const selectedSlugs = ref<string[]>([])
+
+const archivedOpen = ref(false)
+const archivedLoading = ref(false)
+const archivedPages = ref<WikiPage[]>([])
+
+const filteredPages = computed(() => {
+  const q = pageSearch.value.toLowerCase()
+  if (!q) return store.pages
+  return store.pages.filter(
+    (p) => p.title.toLowerCase().includes(q) || p.slug.toLowerCase().includes(q)
+  )
+})
+
+const paginatedSearch = computed(() => filteredPages.value.slice(0, searchPageLimit.value))
+
+const groupedPages = computed(() => {
+  const map = new Map<string, typeof store.pages>()
+  for (const page of store.pages) {
+    const type = (page.pageType || 'other').toLowerCase()
+    if (!map.has(type)) map.set(type, [])
+    map.get(type)!.push(page)
+  }
+  return [...map.entries()]
+    .sort(([a], [b]) => {
+      const ia = TYPE_ORDER.indexOf(a) >= 0 ? TYPE_ORDER.indexOf(a) : 99
+      const ib = TYPE_ORDER.indexOf(b) >= 0 ? TYPE_ORDER.indexOf(b) : 99
+      return ia - ib
+    })
+    .map(([type, pages]) => ({ type, pages }))
+})
+
+const allSelected = computed(() =>
+  filteredPages.value.length > 0 && selectedSlugs.value.length === filteredPages.value.length
+)
+
+watch(() => store.currentKB?.id, () => {
+  searchPageLimit.value = PAGE_STEP
+  Object.keys(groupPageLimit).forEach(k => delete groupPageLimit[k])
+  collapsedGroups.clear()
+  archivedOpen.value = false
+  archivedPages.value = []
+  pageSearch.value = ''
+  exitBatchMode()
+})
+
+watch(() => pageSearch.value, () => { searchPageLimit.value = PAGE_STEP })
+
+function toggleGroup(type: string) {
+  if (collapsedGroups.has(type)) collapsedGroups.delete(type)
+  else collapsedGroups.add(type)
+}
+
+function loadMoreGroup(type: string) {
+  groupPageLimit[type] = (groupPageLimit[type] || PAGE_STEP) + PAGE_STEP
+}
+
+function paginatedGroupPages(group: { type: string; pages: any[] }) {
+  const limit = groupPageLimit[group.type] || PAGE_STEP
+  return group.pages.slice(0, limit)
+}
+
+function formatGroupLabel(type: string): string {
+  if (!type) return t('wiki.pageTypes.other')
+  const key = `wiki.pageTypes.${type.toLowerCase()}`
+  const translated = t(key)
+  return translated === key ? (type.charAt(0).toUpperCase() + type.slice(1)) : translated
+}
+
+function toggleSelect(slug: string) {
+  const idx = selectedSlugs.value.indexOf(slug)
+  if (idx >= 0) selectedSlugs.value.splice(idx, 1)
+  else selectedSlugs.value.push(slug)
+}
+
+function toggleSelectAll() {
+  if (allSelected.value) selectedSlugs.value = []
+  else selectedSlugs.value = filteredPages.value.map(p => p.slug)
+}
+
+function exitBatchMode() {
+  batchMode.value = false
+  selectedSlugs.value = []
+}
+
+async function handleBatchDelete() {
+  if (selectedSlugs.value.length === 0 || !store.currentKB) return
+  const confirmed = confirm(t('wiki.confirmBatchDelete', { count: selectedSlugs.value.length }))
+  if (!confirmed) return
+  try {
+    await wikiApi.batchDeletePages(store.currentKB.id, selectedSlugs.value)
+    exitBatchMode()
+    await store.fetchPages(store.currentKB.id)
+  } catch (e: any) {
+    alert(e?.message || 'Batch delete failed')
+  }
+}
+
+async function toggleArchived() {
+  archivedOpen.value = !archivedOpen.value
+  if (archivedOpen.value && archivedPages.value.length === 0 && store.currentKB) {
+    archivedLoading.value = true
+    try {
+      const res: any = await wikiApi.listArchivedPages(store.currentKB.id)
+      archivedPages.value = (res?.data || res || []) as WikiPage[]
+    } catch (e) {
+      console.error('[Wiki] Failed to load archived pages', e)
+      archivedPages.value = []
+    } finally {
+      archivedLoading.value = false
+    }
+  }
+}
+
+async function restoreArchivedPage(slug: string) {
+  if (!store.currentKB) return
+  try {
+    await wikiApi.unarchivePage(store.currentKB.id, slug)
+    archivedPages.value = archivedPages.value.filter(p => p.slug !== slug)
+    await store.fetchPages(store.currentKB.id)
+  } catch (e: any) {
+    console.error('[Wiki] Unarchive failed', e)
+    alert(e?.message || 'Unarchive failed')
+  }
+}
+
+function openPage(slug: string) {
+  emit('open-page', slug)
+}
+
+function onPageListScroll() {
+  const el = pageListEl.value
+  if (!el) return
+  if (el.scrollTop + el.clientHeight >= el.scrollHeight - 60) {
+    for (const group of groupedPages.value) {
+      const limit = groupPageLimit[group.type] || PAGE_STEP
+      if (limit < group.pages.length) {
+        loadMoreGroup(group.type)
+        break
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.wiki-sidebar {
+  width: 272px;
+  min-width: 272px;
+  overflow-y: auto;
+  padding: 14px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 0;
+}
+
+.sidebar-section { display: flex; flex-direction: column; gap: 8px; }
+.sidebar-section--pages { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
+
+.sidebar-label {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--mc-text-tertiary);
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.count-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  background: var(--mc-bg-sunken);
+  color: var(--mc-text-secondary);
+  border-radius: 9999px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.search-wrap {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 7px 10px;
+  background: var(--mc-bg-muted);
+  border: 1px solid var(--mc-border-light);
+  border-radius: 10px;
+  color: var(--mc-text-tertiary);
+  transition: border-color 0.15s;
+}
+.search-wrap:focus-within { border-color: var(--mc-primary); }
+.search-input { flex: 1; border: none; background: transparent; font-size: 12px; color: var(--mc-text-primary); outline: none; }
+.search-input::placeholder { color: var(--mc-text-tertiary); }
+.search-clear { border: none; background: none; cursor: pointer; color: var(--mc-text-tertiary); font-size: 11px; padding: 0; line-height: 1; }
+.search-clear:hover { color: var(--mc-text-secondary); }
+
+.sidebar-title-row { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
+.sidebar-title-actions { display: flex; gap: 4px; }
+.icon-btn {
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--mc-border-light);
+  background: var(--mc-bg-elevated);
+  border-radius: 7px;
+  cursor: pointer;
+  color: var(--mc-text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  transition: all 0.15s;
+}
+.icon-btn:hover { background: var(--mc-bg-sunken); color: var(--mc-primary); }
+.icon-btn--active { color: var(--mc-primary); border-color: var(--mc-primary); }
+
+.page-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
+
+.page-group { display: flex; flex-direction: column; }
+.group-header {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 6px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background 0.12s;
+  width: 100%;
+  text-align: left;
+}
+.group-header:hover { background: var(--mc-bg-muted); }
+.group-chevron { color: var(--mc-text-tertiary); transition: transform 0.18s; flex-shrink: 0; }
+.group-chevron.expanded { transform: rotate(90deg); }
+.group-label { font-size: 11px; font-weight: 600; color: var(--mc-text-secondary); flex: 1; }
+.group-count {
+  font-size: 10px;
+  padding: 1px 5px;
+  background: var(--mc-bg-sunken);
+  color: var(--mc-text-tertiary);
+  border-radius: 9999px;
+  font-variant-numeric: tabular-nums;
+}
+.group-items { display: flex; flex-direction: column; gap: 1px; padding-left: 12px; }
+
+.page-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.12s;
+  border: 1px solid transparent;
+}
+.page-item:hover { background: var(--mc-bg-muted); }
+.page-item.active { background: var(--mc-primary-bg); border-color: rgba(217, 109, 70, 0.12); }
+.page-item-body { flex: 1; min-width: 0; }
+.page-item-title { font-size: 12px; color: var(--mc-text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.page-item-meta { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
+.meta-text { font-size: 10px; color: var(--mc-text-tertiary); }
+.type-chip { font-size: 10px; padding: 1px 5px; background: var(--mc-bg-sunken); border-radius: 4px; color: var(--mc-text-tertiary); }
+.edit-dot { width: 5px; height: 5px; border-radius: 9999px; flex-shrink: 0; }
+.edit-dot.manual { background: var(--mc-primary); }
+.page-checkbox { flex-shrink: 0; cursor: pointer; }
+.page-checkbox:disabled { cursor: not-allowed; opacity: 0.4; }
+
+.page-flag { font-size: 10px; padding: 1px 6px; border-radius: 99px; font-weight: 600; }
+.page-flag--system { background: var(--mc-primary-bg); color: var(--mc-primary); border: 1px solid var(--mc-primary); }
+.page-flag--locked { background: var(--mc-bg-elevated); color: var(--mc-text-secondary); border: 1px solid var(--mc-border-light); }
+
+.page-item--system { border-left: 2px solid var(--mc-primary); padding-left: 6px; }
+
+.archived-section { margin-top: 12px; border-top: 1px dashed var(--mc-border-light); padding-top: 8px; }
+.archived-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 4px;
+  background: none;
+  border: none;
+  font-size: 11px;
+  color: var(--mc-text-tertiary);
+  cursor: pointer;
+  text-align: left;
+}
+.archived-toggle:hover { color: var(--mc-text-secondary); }
+.archived-toggle:disabled { cursor: wait; opacity: 0.5; }
+.archived-chevron { transition: transform 0.15s; flex-shrink: 0; }
+.archived-chevron.expanded { transform: rotate(90deg); }
+.archived-count {
+  margin-left: auto;
+  padding: 0 6px;
+  background: var(--mc-bg-sunken);
+  border-radius: 99px;
+  font-weight: 600;
+  font-size: 10px;
+}
+
+.archived-items { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
+.archived-empty { padding: 6px 4px; font-size: 11px; font-style: italic; color: var(--mc-text-tertiary); }
+.archived-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.1s, background 0.1s;
+}
+.archived-item:hover { opacity: 1; background: var(--mc-bg-muted); }
+.archived-item-body { flex: 1; min-width: 0; }
+.archived-item-title { font-size: 12px; font-weight: 500; color: var(--mc-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.archived-item-meta { font-size: 10px; color: var(--mc-text-tertiary); margin-top: 1px; }
+
+.archived-restore-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border: 1px solid var(--mc-border-light);
+  border-radius: 6px;
+  background: none;
+  color: var(--mc-text-secondary);
+  font-size: 11px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s;
+}
+.archived-restore-btn:hover { color: var(--mc-primary); border-color: var(--mc-primary); background: var(--mc-primary-bg); }
+
+.load-more-btn {
+  width: 100%;
+  padding: 6px;
+  border: 1px dashed var(--mc-border-light);
+  background: none;
+  border-radius: 8px;
+  font-size: 11px;
+  color: var(--mc-text-tertiary);
+  cursor: pointer;
+  transition: all 0.15s;
+  margin-top: 2px;
+}
+.load-more-btn:hover { border-color: var(--mc-primary); color: var(--mc-primary); background: var(--mc-primary-bg); }
+
+.pagination-row { padding: 4px 0; }
+
+.batch-bar { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; background: var(--mc-bg-muted); border-radius: 8px; }
+.batch-check-all { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--mc-text-secondary); cursor: pointer; }
+.batch-check-all input { cursor: pointer; }
+.batch-delete-btn { padding: 3px 10px; border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; background: rgba(245, 108, 108, 0.1); color: var(--el-color-danger, #f56c6c); }
+.batch-delete-btn:hover:not(:disabled) { background: rgba(245, 108, 108, 0.2); }
+.batch-delete-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.empty-hint { font-size: 13px; color: var(--mc-text-tertiary); padding: 12px 4px; }
+
+.filter-banner {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 10px;
+  background: var(--mc-primary-bg);
+  border: 1px solid rgba(217,109,70,0.2);
+  border-radius: 8px;
+  font-size: 11px;
+  color: var(--mc-primary);
+  font-weight: 500;
+}
+.filter-clear-btn {
+  margin-left: auto;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--mc-primary);
+  font-size: 11px;
+  padding: 0 2px;
+  opacity: 0.7;
+  line-height: 1;
+}
+.filter-clear-btn:hover { opacity: 1; }
+
+@media (max-width: 980px) {
+  .wiki-sidebar { width: 100%; min-width: 0; max-height: 320px; }
+}
+</style>
diff --git a/mateclaw-ui/src/views/Wiki/components/WikiWorkspace.vue b/mateclaw-ui/src/views/Wiki/components/WikiWorkspace.vue
new file mode 100644
index 00000000..7b11af0f
--- /dev/null
+++ b/mateclaw-ui/src/views/Wiki/components/WikiWorkspace.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="wiki-workspace">
+    <WikiWorkspaceHeader :kb="kb" @back="store.backToLibrary()" />
+
+    <div class="wiki-layout">
+      <WikiPageSidebar @open-page="onOpenPage" />
+
+      <div class="wiki-content mc-surface-card">
+        <div class="wiki-content-body">
+          <div class="content-tabs">
+            <button
+              v-for="tab in tabs" :key="tab.key"
+              class="tab-btn" :class="{ active: activeTab === tab.key }"
+              @click="activeTab = tab.key"
+            >
+              {{ tab.label }}
+            </button>
+          </div>
+
+          <div v-if="activeTab === 'raw'" class="tab-content">
+            <RawMaterialPanel />
+          </div>
+
+          <div v-if="activeTab === 'pages'" class="tab-content">
+            <WikiPageViewer v-if="store.currentPage" />
+            <div v-else class="empty-state">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
+              </svg>
+              <p>{{ t('wiki.selectPage') }}</p>
+            </div>
+          </div>
+
+          <div v-if="activeTab === 'graph'" class="tab-content tab-content--graph">
+            <WikiGraphView :pages="store.pages" @open-page="onOpenPage" />
+          </div>
+
+          <div v-if="activeTab === 'config'" class="tab-content tab-content--config">
+            <WikiConfig />
+          </div>
+
+          <div v-if="activeTab === 'hotCache'" class="tab-content tab-content--hot-cache">
+            <HotCachePanel />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useWikiStore, type WikiKB } from '@/stores/useWikiStore'
+import RawMaterialPanel from './RawMaterialPanel.vue'
+import WikiPageViewer from './WikiPageViewer.vue'
+import WikiConfig from './WikiConfig.vue'
+import WikiGraphView from './WikiGraphView.vue'
+import HotCachePanel from './HotCachePanel.vue'
+import WikiWorkspaceHeader from './WikiWorkspaceHeader.vue'
+import WikiPageSidebar from './WikiPageSidebar.vue'
+
+defineProps<{ kb: WikiKB }>()
+
+const { t } = useI18n()
+const store = useWikiStore()
+
+const activeTab = ref('raw')
+
+const tabs = computed(() => [
+  { key: 'raw', label: t('wiki.rawMaterials') },
+  { key: 'pages', label: t('wiki.pages') },
+  { key: 'graph', label: t('wiki.graph.tab') },
+  { key: 'config', label: t('wiki.config') },
+  { key: 'hotCache', label: t('wiki.hotCache.tab') },
+])
+
+// When the user picks a different KB from the library, snap back to the
+// raw-materials tab so they don't land on stale state from the previous KB.
+watch(() => store.currentKB?.id, () => { activeTab.value = 'raw' })
+
+async function onOpenPage(slug: string) {
+  if (!store.currentKB) return
+  await store.loadPage(store.currentKB.id, slug)
+  activeTab.value = 'pages'
+}
+</script>
+
+<style scoped>
+.wiki-workspace {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.wiki-layout { display: flex; gap: 16px; flex: 1; min-height: 0; overflow: hidden; }
+
+.wiki-content { flex: 1; overflow: hidden; min-width: 0; padding: 16px; display: flex; flex-direction: column; min-height: 0; }
+.wiki-content-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.content-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--mc-bg-muted); border-radius: 14px; margin-bottom: 14px; border: 1px solid var(--mc-border-light); align-self: flex-start; }
+.tab-btn { padding: 7px 14px; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--mc-text-secondary); border-radius: 10px; transition: all 0.15s; font-weight: 500; }
+.tab-btn:hover { color: var(--mc-text-primary); }
+.tab-btn.active { color: var(--mc-primary); background: var(--mc-bg-elevated); box-shadow: 0 1px 4px rgba(0,0,0,0.08); font-weight: 600; }
+.tab-content { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
+.tab-content--config { overflow: hidden; padding-right: 0; }
+.tab-content--graph { overflow: hidden; padding: 0; }
+
+.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 200px; color: var(--mc-text-tertiary); text-align: center; }
+.empty-state p { font-size: 14px; }
+
+@media (max-width: 980px) {
+  .wiki-layout { flex-direction: column; overflow: visible; }
+  .wiki-content { overflow: visible; }
+  .tab-content { overflow: visible; }
+  .tab-content--config { overflow: visible; }
+}
+</style>
diff --git a/mateclaw-ui/src/views/Wiki/components/WikiWorkspaceHeader.vue b/mateclaw-ui/src/views/Wiki/components/WikiWorkspaceHeader.vue
new file mode 100644
index 00000000..ccb7b39b
--- /dev/null
+++ b/mateclaw-ui/src/views/Wiki/components/WikiWorkspaceHeader.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="workspace-header">
+    <button class="back-btn" @click="$emit('back')">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+        <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
+      </svg>
+      {{ t('wiki.library.backToLibrary') }}
+    </button>
+    <div class="workspace-title-block">
+      <div class="workspace-title-row">
+        <div class="workspace-icon" :style="iconStyle">{{ initial }}</div>
+        <div class="workspace-title-text">
+          <h1 class="workspace-title">{{ kb.name }}</h1>
+          <p v-if="kb.description" class="workspace-desc">{{ kb.description }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="workspace-meta">
+      <span class="workspace-stat">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+        {{ kb.pageCount }}
+      </span>
+      <span class="workspace-stat">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+        {{ kb.rawCount }}
+      </span>
+      <span class="kb-status-dot" :class="kb.status" :title="t(`wiki.status.${kb.status}`)"></span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { WikiKB } from '@/stores/useWikiStore'
+import { kbAccent, kbAccentFg, kbInitial } from '../utils/kbVisual'
+
+const props = defineProps<{ kb: WikiKB }>()
+defineEmits<{ (e: 'back'): void }>()
+
+const { t } = useI18n()
+
+const initial = computed(() => kbInitial(props.kb))
+const iconStyle = computed(() => ({
+  background: kbAccent(props.kb),
+  color: kbAccentFg(props.kb),
+}))
+</script>
+
+<style scoped>
+.workspace-header {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 4px 4px 18px;
+  flex-wrap: wrap;
+}
+.back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: var(--mc-bg-elevated);
+  border: 1px solid var(--mc-border-light);
+  border-radius: 10px;
+  color: var(--mc-text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.back-btn:hover {
+  color: var(--mc-primary);
+  border-color: var(--mc-primary);
+  background: var(--mc-primary-bg);
+}
+
+.workspace-title-block { flex: 1; min-width: 0; }
+.workspace-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.workspace-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.workspace-title-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.workspace-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--mc-text-primary);
+  margin: 0;
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.workspace-desc {
+  font-size: 12.5px;
+  color: var(--mc-text-tertiary);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.workspace-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 14px;
+  background: var(--mc-bg-elevated);
+  border: 1px solid var(--mc-border-light);
+  border-radius: 10px;
+}
+.workspace-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--mc-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.kb-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 9999px;
+  flex-shrink: 0;
+}
+.kb-status-dot.active { background: var(--mc-success); }
+.kb-status-dot.processing { background: var(--mc-primary); animation: pulse 1.4s ease-in-out infinite; }
+.kb-status-dot.error { background: var(--mc-danger); }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+@media (max-width: 980px) {
+  .workspace-meta { width: 100%; justify-content: flex-start; }
+}
+</style>
diff --git a/mateclaw-ui/src/views/Wiki/index.vue b/mateclaw-ui/src/views/Wiki/index.vue
index 23a1089e..8e017f9d 100644
--- a/mateclaw-ui/src/views/Wiki/index.vue
+++ b/mateclaw-ui/src/views/Wiki/index.vue
@@ -2,297 +2,21 @@
   <div class="mc-page-shell wiki-shell">
     <div class="mc-page-frame wiki-frame">
       <div class="mc-page-inner wiki-inner">
-        <div class="mc-page-header">
-          <div>
-            <div class="mc-page-kicker">{{ t('wiki.kicker') }}</div>
-            <h1 class="mc-page-title">{{ t('nav.wiki') }}</h1>
-            <p class="mc-page-desc">{{ t('wiki.desc') }}</p>
-          </div>
-          <button class="btn-primary page-cta" @click="showCreateKB = true">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
-            </svg>
-            {{ t('wiki.createKB') }}
-          </button>
-        </div>
-
-        <div class="wiki-layout">
-          <!-- Left sidebar: KB list + page list -->
-          <div class="wiki-sidebar mc-surface-card">
-
-            <!-- Knowledge bases -->
-            <div class="sidebar-section">
-              <h3 class="sidebar-label">{{ t('wiki.knowledgeBases') }}</h3>
-              <div v-if="store.loading" class="empty-hint">{{ t('common.loading') }}</div>
-              <div v-else-if="store.knowledgeBases.length === 0" class="empty-hint">{{ t('wiki.noKB') }}</div>
-              <div v-else class="kb-list">
-                <div
-                  v-for="kb in store.knowledgeBases" :key="kb.id"
-                  class="kb-item" :class="{ active: store.currentKB?.id === kb.id }"
-                  @click="selectKB(kb.id)"
-                >
-                  <div class="kb-item-name">{{ kb.name }}</div>
-                  <div class="kb-item-stats">
-                    <span class="stat-chip">
-                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
-                      {{ kb.pageCount }}
-                    </span>
-                    <span class="stat-chip">
-                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-                      {{ kb.rawCount }}
-                    </span>
-                    <span class="kb-status-dot" :class="kb.status" :title="t(`wiki.status.${kb.status}`)"></span>
-                  </div>
-                  <div v-if="kbStats[kb.id]?.failedJobCount > 0" class="kb-warn">
-                    ⚠ {{ t('wiki.stats.failedJobs', { count: kbStats[kb.id].failedJobCount }) }}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Page list -->
-            <div v-if="store.currentKB" class="sidebar-section sidebar-section--pages">
-              <div class="sidebar-title-row">
-                <h3 class="sidebar-label">
-                  {{ t('wiki.pages') }}
-                  <span class="count-badge">{{ store.pages.length }}</span>
-                </h3>
-                <div class="sidebar-title-actions">
-                  <button
-                    v-if="!batchMode"
-                    class="icon-btn" :title="t('wiki.batchSelect')"
-                    @click="batchMode = true"
-                  >
-                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
-                  </button>
-                  <button v-else class="icon-btn icon-btn--active" @click="exitBatchMode">✕</button>
-                </div>
-              </div>
-
-              <!-- Search -->
-              <div class="search-wrap">
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-                <input
-                  v-model="pageSearch"
-                  type="text"
-                  :placeholder="t('wiki.searchPages')"
-                  class="search-input"
-                />
-                <button v-if="pageSearch" class="search-clear" @click="pageSearch = ''">✕</button>
-              </div>
-
-              <!-- Batch actions -->
-              <div v-if="batchMode" class="batch-bar">
-                <label class="batch-check-all">
-                  <input type="checkbox" :checked="allSelected" @change="toggleSelectAll" />
-                  <span>{{ t('wiki.selectAll') }}</span>
-                </label>
-                <button
-                  class="batch-delete-btn"
-                  :disabled="selectedSlugs.length === 0"
-                  @click="handleBatchDelete"
-                >
-                  {{ t('common.delete') }} ({{ selectedSlugs.length }})
-                </button>
-              </div>
-
-              <!-- Raw material filter banner -->
-              <div v-if="store.selectedRawId" class="filter-banner">
-                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 3H2l8 9.46V19l4 2V12.46L22 3z"/></svg>
-                {{ t('wiki.filteredByRaw') }}
-                <button class="filter-clear-btn" @click="store.clearRawFilter(store.currentKB!.id)">✕</button>
-              </div>
-
-              <!-- Grouped page list -->
-              <div class="page-list" v-if="!pageSearch" ref="pageListEl" @scroll="onPageListScroll">
-                <div v-for="group in groupedPages" :key="group.type" class="page-group">
-                  <button
-                    class="group-header"
-                    @click="toggleGroup(group.type)"
-                  >
-                    <svg
-                      class="group-chevron"
-                      :class="{ expanded: !collapsedGroups.has(group.type) }"
-                      width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
-                    ><polyline points="9 18 15 12 9 6"/></svg>
-                    <span class="group-label">{{ formatGroupLabel(group.type) }}</span>
-                    <span class="group-count">{{ group.pages.length }}</span>
-                  </button>
-                  <div v-if="!collapsedGroups.has(group.type)" class="group-items">
-                    <div
-                      v-for="page in paginatedGroupPages(group)" :key="page.slug"
-                      class="page-item"
-                      :class="{
-                        active: !batchMode && store.currentPage?.slug === page.slug,
-                        'page-item--system': page.pageType === 'system'
-                      }"
-                      @click="batchMode ? toggleSelect(page.slug) : openPage(page.slug)"
-                    >
-                      <!-- RFC-051 PR-8: batch checkbox is disabled for protected pages so a stray
-                           batch-delete can't drag in overview/log or any locked page. -->
-                      <input
-                        v-if="batchMode"
-                        type="checkbox"
-                        :checked="selectedSlugs.includes(page.slug)"
-                        :disabled="isProtectedPage(page)"
-                        class="page-checkbox"
-                        @click.stop="!isProtectedPage(page) && toggleSelect(page.slug)"
-                      />
-                      <div class="page-item-body">
-                        <div class="page-item-title">{{ page.title }}</div>
-                        <div class="page-item-meta">
-                          <span v-if="page.lastUpdatedBy === 'manual'" class="edit-dot manual" title="Manual edit"></span>
-                          <span v-if="page.pageType === 'system'" class="page-flag page-flag--system">{{ t('wiki.systemPageBadge') }}</span>
-                          <span v-else-if="page.locked === 1" class="page-flag page-flag--locked">{{ t('wiki.lockedPageBadge') }}</span>
-                          <span class="meta-text">v{{ page.version }}</span>
-                        </div>
-                      </div>
-                    </div>
-                    <!-- Load more within group (visible when more items exist) -->
-                    <button
-                      v-if="(groupPageLimit[group.type] || PAGE_STEP) < group.pages.length"
-                      class="load-more-btn"
-                      @click.stop="loadMoreGroup(group.type)"
-                    >
-                      {{ t('wiki.loadMore', { n: Math.min(PAGE_STEP, group.pages.length - (groupPageLimit[group.type] || PAGE_STEP)) }) }}
-                    </button>
-                  </div>
-                </div>
-                <div v-if="groupedPages.length === 0" class="empty-hint">{{ t('wiki.noPages') }}</div>
-
-                <!-- RFC-051 PR-7 follow-up: archived pages drawer at the bottom of the list. -->
-                <div class="archived-section">
-                  <button
-                    class="archived-toggle"
-                    :disabled="archivedLoading"
-                    @click="toggleArchived"
-                  >
-                    <svg
-                      class="archived-chevron"
-                      :class="{ expanded: archivedOpen }"
-                      width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
-                    ><polyline points="9 18 15 12 9 6"/></svg>
-                    {{ t('wiki.archivedSection') }}
-                    <span v-if="archivedPages.length > 0" class="archived-count">{{ archivedPages.length }}</span>
-                  </button>
-                  <div v-if="archivedOpen" class="archived-items">
-                    <div v-if="archivedLoading" class="archived-empty">{{ t('common.loading') }}</div>
-                    <div v-else-if="archivedPages.length === 0" class="archived-empty">{{ t('wiki.noArchived') }}</div>
-                    <div v-else
-                         v-for="page in archivedPages" :key="'arc:' + page.slug"
-                         class="archived-item"
-                         @click="openPage(page.slug)"
-                    >
-                      <div class="archived-item-body">
-                        <div class="archived-item-title">{{ page.title }}</div>
-                        <div class="archived-item-meta">v{{ page.version }} · {{ page.slug }}</div>
-                      </div>
-                      <button
-                        class="archived-restore-btn"
-                        :title="t('wiki.unarchive')"
-                        @click.stop="restoreArchivedPage(page.slug)"
-                      >
-                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                          <polyline points="3 7 12 12 21 7"/><path d="M3 7v10l9 5 9-5V7"/>
-                        </svg>
-                        {{ t('wiki.unarchive') }}
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Flat search results -->
-              <div class="page-list" v-else>
-                <div
-                  v-for="page in paginatedSearch" :key="page.slug"
-                  class="page-item"
-                  :class="{
-                    active: !batchMode && store.currentPage?.slug === page.slug,
-                    'page-item--system': page.pageType === 'system'
-                  }"
-                  @click="batchMode ? toggleSelect(page.slug) : openPage(page.slug)"
-                >
-                  <input
-                    v-if="batchMode"
-                    type="checkbox"
-                    :checked="selectedSlugs.includes(page.slug)"
-                    :disabled="isProtectedPage(page)"
-                    class="page-checkbox"
-                    @click.stop="!isProtectedPage(page) && toggleSelect(page.slug)"
-                  />
-                  <div class="page-item-body">
-                    <div class="page-item-title">{{ page.title }}</div>
-                    <div class="page-item-meta">
-                      <span class="type-chip">{{ formatGroupLabel(page.pageType || 'other') }}</span>
-                      <span v-if="page.pageType === 'system'" class="page-flag page-flag--system">{{ t('wiki.systemPageBadge') }}</span>
-                      <span v-else-if="page.locked === 1" class="page-flag page-flag--locked">{{ t('wiki.lockedPageBadge') }}</span>
-                      <span class="meta-text">v{{ page.version }}</span>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="filteredPages.length > searchPageLimit" class="pagination-row">
-                  <button class="load-more-btn" @click="searchPageLimit += PAGE_STEP">
-                    {{ t('wiki.loadMore', { n: Math.min(PAGE_STEP, filteredPages.length - searchPageLimit) }) }}
-                  </button>
-                </div>
-                <div v-if="filteredPages.length === 0" class="empty-hint">{{ t('wiki.noResults') }}</div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Right: Content -->
-          <div class="wiki-content mc-surface-card">
-            <div v-if="!store.currentKB" class="empty-state">
-              <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
-                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
-              </svg>
-              <p>{{ t('wiki.selectKB') }}</p>
-            </div>
-
-            <div v-else class="wiki-content-body">
-              <div class="content-tabs">
-                <button
-                  v-for="tab in tabs" :key="tab.key"
-                  class="tab-btn" :class="{ active: activeTab === tab.key }"
-                  @click="activeTab = tab.key"
-                >
-                  {{ tab.label }}
-                </button>
-              </div>
-
-              <div v-if="activeTab === 'raw'" class="tab-content">
-                <RawMaterialPanel />
-              </div>
-
-              <div v-if="activeTab === 'pages'" class="tab-content">
-                <WikiPageViewer v-if="store.currentPage" />
-                <div v-else class="empty-state">
-                  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
-                  </svg>
-                  <p>{{ t('wiki.selectPage') }}</p>
-                </div>
-              </div>
-
-              <div v-if="activeTab === 'graph'" class="tab-content tab-content--graph">
-                <WikiGraphView :pages="store.pages" @open-page="openPage" />
-              </div>
-
-              <div v-if="activeTab === 'config'" class="tab-content tab-content--config">
-                <WikiConfig />
-              </div>
-
-              <div v-if="activeTab === 'hotCache'" class="tab-content tab-content--hot-cache">
-                <HotCachePanel />
-              </div>
-            </div>
-          </div>
-        </div>
+        <WikiLibrary
+          v-if="!store.currentKB"
+          :kbs="store.knowledgeBases"
+          :kb-stats="kbStats"
+          :loading="store.loading"
+          @open="enterKB"
+          @create="showCreateKB = true"
+        />
+        <WikiWorkspace
+          v-else
+          :kb="store.currentKB"
+        />
       </div>
     </div>
 
-    <!-- Create KB Modal -->
     <div v-if="showCreateKB" class="modal-overlay" @click.self="showCreateKB = false">
       <div class="modal-content">
         <h3 class="modal-title">{{ t('wiki.createKB') }}</h3>
@@ -314,21 +38,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
+import { ref, reactive, watch, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useWikiStore, isProtectedPage, type WikiPage } from '@/stores/useWikiStore'
+import { useWikiStore } from '@/stores/useWikiStore'
 import { wikiApi } from '@/api/index'
-import RawMaterialPanel from './components/RawMaterialPanel.vue'
-import WikiPageViewer from './components/WikiPageViewer.vue'
-import WikiConfig from './components/WikiConfig.vue'
-import WikiGraphView from './components/WikiGraphView.vue'
-import HotCachePanel from './components/HotCachePanel.vue'
+import WikiLibrary from './components/WikiLibrary.vue'
+import WikiWorkspace from './components/WikiWorkspace.vue'
 
 const { t } = useI18n()
 const store = useWikiStore()
-const pageListEl = ref<HTMLElement | null>(null)
 
-// KB health stats
 interface KBStats {
   pageCount: number
   enrichedPageCount: number
@@ -354,176 +73,9 @@ watch(() => store.knowledgeBases.length, () => {
 const showCreateKB = ref(false)
 const newKBName = ref('')
 const newKBDesc = ref('')
-const activeTab = ref('raw')
-const pageSearch = ref('')
 
-// Batch selection
-const batchMode = ref(false)
-const selectedSlugs = ref<string[]>([])
-
-// Pagination constants
-const PAGE_STEP = 20
-const searchPageLimit = ref(PAGE_STEP)
-
-// Per-group pagination limit map
-const groupPageLimit = reactive<Record<string, number>>({})
-
-// Which groups are collapsed
-const collapsedGroups = reactive<Set<string>>(new Set())
-
-// RFC-051 PR-7 follow-up: archived pages drawer state.
-const archivedOpen = ref(false)
-const archivedLoading = ref(false)
-const archivedPages = ref<WikiPage[]>([])
-
-async function toggleArchived() {
-  archivedOpen.value = !archivedOpen.value
-  if (archivedOpen.value && archivedPages.value.length === 0 && store.currentKB) {
-    archivedLoading.value = true
-    try {
-      const res: any = await wikiApi.listArchivedPages(store.currentKB.id)
-      archivedPages.value = (res?.data || res || []) as WikiPage[]
-    } catch (e) {
-      console.error('[Wiki] Failed to load archived pages', e)
-      archivedPages.value = []
-    } finally {
-      archivedLoading.value = false
-    }
-  }
-}
-
-async function restoreArchivedPage(slug: string) {
-  if (!store.currentKB) return
-  try {
-    await wikiApi.unarchivePage(store.currentKB.id, slug)
-    archivedPages.value = archivedPages.value.filter(p => p.slug !== slug)
-    // Bring the page back into the main list cache.
-    await store.fetchPages(store.currentKB.id)
-  } catch (e: any) {
-    console.error('[Wiki] Unarchive failed', e)
-    alert(e?.message || 'Unarchive failed')
-  }
-}
-
-// Reset archived drawer when KB changes so we re-fetch on first open in the new KB.
-watch(() => store.currentKB?.id, () => {
-  archivedOpen.value = false
-  archivedPages.value = []
-})
-
-function toggleGroup(type: string) {
-  if (collapsedGroups.has(type)) collapsedGroups.delete(type)
-  else collapsedGroups.add(type)
-}
-
-function loadMoreGroup(type: string) {
-  groupPageLimit[type] = (groupPageLimit[type] || PAGE_STEP) + PAGE_STEP
-}
-
-function paginatedGroupPages(group: { type: string; pages: any[] }) {
-  const limit = groupPageLimit[group.type] || PAGE_STEP
-  return group.pages.slice(0, limit)
-}
-
-function formatGroupLabel(type: string): string {
-  if (!type) return t('wiki.pageTypes.other')
-  const key = `wiki.pageTypes.${type.toLowerCase()}`
-  const translated = t(key)
-  // If i18n key not found it returns the key itself; fall back to capitalised type
-  return translated === key ? (type.charAt(0).toUpperCase() + type.slice(1)) : translated
-}
-
-// Type sort order
-const TYPE_ORDER = ['concept', 'technology', 'process', 'person', 'organization', 'product', 'place', 'event', 'term', 'other']
-
-const filteredPages = computed(() => {
-  const q = pageSearch.value.toLowerCase()
-  if (!q) return store.pages
-  return store.pages.filter(
-    (p) => p.title.toLowerCase().includes(q) || p.slug.toLowerCase().includes(q)
-  )
-})
-
-const paginatedSearch = computed(() => filteredPages.value.slice(0, searchPageLimit.value))
-
-const groupedPages = computed(() => {
-  const map = new Map<string, typeof store.pages>()
-  for (const page of store.pages) {
-    const type = (page.pageType || 'other').toLowerCase()
-    if (!map.has(type)) map.set(type, [])
-    map.get(type)!.push(page)
-  }
-  // Sort groups by TYPE_ORDER
-  return [...map.entries()]
-    .sort(([a], [b]) => {
-      const ia = TYPE_ORDER.indexOf(a) >= 0 ? TYPE_ORDER.indexOf(a) : 99
-      const ib = TYPE_ORDER.indexOf(b) >= 0 ? TYPE_ORDER.indexOf(b) : 99
-      return ia - ib
-    })
-    .map(([type, pages]) => ({ type, pages }))
-})
-
-// Reset pagination when KB changes
-watch(() => store.currentKB?.id, () => {
-  searchPageLimit.value = PAGE_STEP
-  Object.keys(groupPageLimit).forEach(k => delete groupPageLimit[k])
-  collapsedGroups.clear()
-})
-
-watch(() => pageSearch.value, () => {
-  searchPageLimit.value = PAGE_STEP
-})
-
-const allSelected = computed(() =>
-  filteredPages.value.length > 0 && selectedSlugs.value.length === filteredPages.value.length
-)
-
-function toggleSelect(slug: string) {
-  const idx = selectedSlugs.value.indexOf(slug)
-  if (idx >= 0) selectedSlugs.value.splice(idx, 1)
-  else selectedSlugs.value.push(slug)
-}
-
-function toggleSelectAll() {
-  if (allSelected.value) selectedSlugs.value = []
-  else selectedSlugs.value = filteredPages.value.map(p => p.slug)
-}
-
-function exitBatchMode() {
-  batchMode.value = false
-  selectedSlugs.value = []
-}
-
-async function handleBatchDelete() {
-  if (selectedSlugs.value.length === 0 || !store.currentKB) return
-  const confirmed = confirm(t('wiki.confirmBatchDelete', { count: selectedSlugs.value.length }))
-  if (!confirmed) return
-  try {
-    await wikiApi.batchDeletePages(store.currentKB.id, selectedSlugs.value)
-    exitBatchMode()
-    await store.fetchPages(store.currentKB.id)
-  } catch (e: any) {
-    alert(e?.message || 'Batch delete failed')
-  }
-}
-
-const tabs = computed(() => [
-  { key: 'raw', label: t('wiki.rawMaterials') },
-  { key: 'pages', label: t('wiki.pages') },
-  { key: 'graph', label: t('wiki.graph.tab') },
-  { key: 'config', label: t('wiki.config') },
-  { key: 'hotCache', label: t('wiki.hotCache.tab') },
-])
-
-async function selectKB(id: number) {
+async function enterKB(id: number) {
   await store.selectKB(id)
-  activeTab.value = 'raw'
-}
-
-async function openPage(slug: string) {
-  if (!store.currentKB) return
-  await store.loadPage(store.currentKB.id, slug)
-  activeTab.value = 'pages'
 }
 
 async function handleCreateKB() {
@@ -533,23 +85,6 @@ async function handleCreateKB() {
   newKBDesc.value = ''
 }
 
-// Infinite scroll: when the page-list container scrolls near the bottom,
-// auto-load more items for the last non-fully-expanded group.
-function onPageListScroll() {
-  const el = pageListEl.value
-  if (!el) return
-  if (el.scrollTop + el.clientHeight >= el.scrollHeight - 60) {
-    // Find the first group that still has hidden pages and load more
-    for (const group of groupedPages.value) {
-      const limit = groupPageLimit[group.type] || PAGE_STEP
-      if (limit < group.pages.length) {
-        loadMoreGroup(group.type)
-        break
-      }
-    }
-  }
-}
-
 onMounted(() => {
   store.fetchKnowledgeBases()
 })
@@ -558,319 +93,14 @@ onMounted(() => {
 <style scoped>
 .wiki-shell { background: transparent; height: 100%; min-height: 0; overflow: hidden; }
 .wiki-frame { height: min(calc(100vh - 28px), 100%); min-height: 0; overflow: hidden; }
-.wiki-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }
+.wiki-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; }
 
-.btn-primary { display: flex; align-items: center; gap: 6px; padding: 10px 18px; background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-hover)); color: white; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--mc-shadow-soft); transition: opacity 0.15s; }
+.btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-hover)); color: white; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--mc-shadow-soft); transition: opacity 0.15s; }
 .btn-primary:hover { opacity: 0.9; }
 .btn-primary:disabled { background: var(--mc-border); box-shadow: none; cursor: not-allowed; }
 .btn-secondary { padding: 8px 16px; background: var(--mc-bg-elevated); color: var(--mc-text-primary); border: 1px solid var(--mc-border); border-radius: 12px; font-size: 14px; cursor: pointer; transition: background 0.15s; }
 .btn-secondary:hover { background: var(--mc-bg-sunken); }
 
-/* Layout */
-.wiki-layout { display: flex; gap: 16px; flex: 1; min-height: 0; overflow: hidden; }
-
-/* Sidebar */
-.wiki-sidebar {
-  width: 272px;
-  min-width: 272px;
-  overflow-y: auto;
-  padding: 14px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  min-height: 0;
-}
-
-.sidebar-section { display: flex; flex-direction: column; gap: 8px; }
-.sidebar-section--pages { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
-
-.sidebar-label {
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--mc-text-tertiary);
-  padding: 0 4px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.count-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 16px;
-  padding: 0 5px;
-  background: var(--mc-bg-sunken);
-  color: var(--mc-text-secondary);
-  border-radius: 9999px;
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0;
-}
-
-/* Search */
-.search-wrap {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding: 7px 10px;
-  background: var(--mc-bg-muted);
-  border: 1px solid var(--mc-border-light);
-  border-radius: 10px;
-  color: var(--mc-text-tertiary);
-  transition: border-color 0.15s;
-}
-.search-wrap:focus-within { border-color: var(--mc-primary); }
-.search-input { flex: 1; border: none; background: transparent; font-size: 12px; color: var(--mc-text-primary); outline: none; }
-.search-input::placeholder { color: var(--mc-text-tertiary); }
-.search-clear { border: none; background: none; cursor: pointer; color: var(--mc-text-tertiary); font-size: 11px; padding: 0; line-height: 1; }
-.search-clear:hover { color: var(--mc-text-secondary); }
-
-/* KB list */
-.kb-list { display: flex; flex-direction: column; gap: 4px; }
-.kb-item {
-  padding: 10px 12px;
-  border-radius: 12px;
-  cursor: pointer;
-  transition: background 0.15s;
-  border: 1px solid transparent;
-}
-.kb-item:hover { background: var(--mc-bg-muted); }
-.kb-item.active { background: var(--mc-primary-bg); border-color: rgba(217, 109, 70, 0.15); }
-.kb-item-name { font-size: 13px; font-weight: 600; color: var(--mc-text-primary); margin-bottom: 5px; }
-.kb-item-stats { display: flex; align-items: center; gap: 6px; }
-.stat-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  font-size: 11px;
-  color: var(--mc-text-tertiary);
-}
-.kb-status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 9999px;
-  margin-left: auto;
-}
-.kb-status-dot.active { background: var(--mc-success); }
-.kb-status-dot.processing { background: var(--mc-primary); animation: pulse 1.4s ease-in-out infinite; }
-.kb-status-dot.error { background: var(--mc-danger); }
-.kb-warn { font-size: 11px; color: var(--mc-danger); margin-top: 3px; }
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-
-/* Page list and groups */
-.sidebar-title-row { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
-.sidebar-title-actions { display: flex; gap: 4px; }
-.icon-btn {
-  width: 24px;
-  height: 24px;
-  border: 1px solid var(--mc-border-light);
-  background: var(--mc-bg-elevated);
-  border-radius: 7px;
-  cursor: pointer;
-  color: var(--mc-text-secondary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  transition: all 0.15s;
-}
-.icon-btn:hover { background: var(--mc-bg-sunken); color: var(--mc-primary); }
-.icon-btn--active { color: var(--mc-primary); border-color: var(--mc-primary); }
-
-.page-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
-
-.page-group { display: flex; flex-direction: column; }
-.group-header {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 5px 6px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  border-radius: 8px;
-  transition: background 0.12s;
-  width: 100%;
-  text-align: left;
-}
-.group-header:hover { background: var(--mc-bg-muted); }
-.group-chevron { color: var(--mc-text-tertiary); transition: transform 0.18s; flex-shrink: 0; }
-.group-chevron.expanded { transform: rotate(90deg); }
-.group-label { font-size: 11px; font-weight: 600; color: var(--mc-text-secondary); flex: 1; }
-.group-count {
-  font-size: 10px;
-  padding: 1px 5px;
-  background: var(--mc-bg-sunken);
-  color: var(--mc-text-tertiary);
-  border-radius: 9999px;
-  font-variant-numeric: tabular-nums;
-}
-.group-items { display: flex; flex-direction: column; gap: 1px; padding-left: 12px; }
-
-.page-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 10px;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: background 0.12s;
-  border: 1px solid transparent;
-}
-.page-item:hover { background: var(--mc-bg-muted); }
-.page-item.active { background: var(--mc-primary-bg); border-color: rgba(217, 109, 70, 0.12); }
-.page-item-body { flex: 1; min-width: 0; }
-.page-item-title { font-size: 12px; color: var(--mc-text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.page-item-meta { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
-.meta-text { font-size: 10px; color: var(--mc-text-tertiary); }
-.type-chip { font-size: 10px; padding: 1px 5px; background: var(--mc-bg-sunken); border-radius: 4px; color: var(--mc-text-tertiary); }
-.edit-dot { width: 5px; height: 5px; border-radius: 9999px; flex-shrink: 0; }
-.edit-dot.manual { background: var(--mc-primary); }
-.page-checkbox { flex-shrink: 0; cursor: pointer; }
-.page-checkbox:disabled { cursor: not-allowed; opacity: 0.4; }
-
-/* RFC-051 PR-8: protection flag chips inside the page-item meta line. */
-.page-flag { font-size: 10px; padding: 1px 6px; border-radius: 99px; font-weight: 600; }
-.page-flag--system { background: var(--mc-primary-bg); color: var(--mc-primary); border: 1px solid var(--mc-primary); }
-.page-flag--locked { background: var(--mc-bg-elevated); color: var(--mc-text-secondary); border: 1px solid var(--mc-border-light); }
-
-/* Subtle accent on the row itself so system pages read as "managed by the system". */
-.page-item--system { border-left: 2px solid var(--mc-primary); padding-left: 6px; }
-
-/* RFC-051 PR-7 follow-up: archived drawer at the bottom of the page list. */
-.archived-section { margin-top: 12px; border-top: 1px dashed var(--mc-border-light); padding-top: 8px; }
-.archived-toggle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 6px 4px;
-  background: none;
-  border: none;
-  font-size: 11px;
-  color: var(--mc-text-tertiary);
-  cursor: pointer;
-  text-align: left;
-}
-.archived-toggle:hover { color: var(--mc-text-secondary); }
-.archived-toggle:disabled { cursor: wait; opacity: 0.5; }
-.archived-chevron { transition: transform 0.15s; flex-shrink: 0; }
-.archived-chevron.expanded { transform: rotate(90deg); }
-.archived-count {
-  margin-left: auto;
-  padding: 0 6px;
-  background: var(--mc-bg-sunken);
-  border-radius: 99px;
-  font-weight: 600;
-  font-size: 10px;
-}
-
-.archived-items { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
-.archived-empty { padding: 6px 4px; font-size: 11px; font-style: italic; color: var(--mc-text-tertiary); }
-.archived-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border-radius: 6px;
-  cursor: pointer;
-  opacity: 0.7;
-  transition: opacity 0.1s, background 0.1s;
-}
-.archived-item:hover { opacity: 1; background: var(--mc-bg-muted); }
-.archived-item-body { flex: 1; min-width: 0; }
-.archived-item-title { font-size: 12px; font-weight: 500; color: var(--mc-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.archived-item-meta { font-size: 10px; color: var(--mc-text-tertiary); margin-top: 1px; }
-
-.archived-restore-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  border: 1px solid var(--mc-border-light);
-  border-radius: 6px;
-  background: none;
-  color: var(--mc-text-secondary);
-  font-size: 11px;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: all 0.15s;
-}
-.archived-restore-btn:hover { color: var(--mc-primary); border-color: var(--mc-primary); background: var(--mc-primary-bg); }
-
-.load-more-btn {
-  width: 100%;
-  padding: 6px;
-  border: 1px dashed var(--mc-border-light);
-  background: none;
-  border-radius: 8px;
-  font-size: 11px;
-  color: var(--mc-text-tertiary);
-  cursor: pointer;
-  transition: all 0.15s;
-  margin-top: 2px;
-}
-.load-more-btn:hover { border-color: var(--mc-primary); color: var(--mc-primary); background: var(--mc-primary-bg); }
-
-.pagination-row { padding: 4px 0; }
-
-/* Batch */
-.batch-bar { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; background: var(--mc-bg-muted); border-radius: 8px; }
-.batch-check-all { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--mc-text-secondary); cursor: pointer; }
-.batch-check-all input { cursor: pointer; }
-.batch-delete-btn { padding: 3px 10px; border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; background: rgba(245, 108, 108, 0.1); color: var(--el-color-danger, #f56c6c); }
-.batch-delete-btn:hover:not(:disabled) { background: rgba(245, 108, 108, 0.2); }
-.batch-delete-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-
-.empty-hint { font-size: 13px; color: var(--mc-text-tertiary); padding: 12px 4px; }
-
-.filter-banner {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 5px 10px;
-  background: var(--mc-primary-bg);
-  border: 1px solid rgba(217,109,70,0.2);
-  border-radius: 8px;
-  font-size: 11px;
-  color: var(--mc-primary);
-  font-weight: 500;
-}
-.filter-clear-btn {
-  margin-left: auto;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: var(--mc-primary);
-  font-size: 11px;
-  padding: 0 2px;
-  opacity: 0.7;
-  line-height: 1;
-}
-.filter-clear-btn:hover { opacity: 1; }
-
-/* Content area */
-.wiki-content { flex: 1; overflow: hidden; min-width: 0; padding: 16px; display: flex; flex-direction: column; min-height: 0; }
-.wiki-content-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
-.content-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--mc-bg-muted); border-radius: 14px; margin-bottom: 14px; border: 1px solid var(--mc-border-light); align-self: flex-start; }
-.tab-btn { padding: 7px 14px; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--mc-text-secondary); border-radius: 10px; transition: all 0.15s; font-weight: 500; }
-.tab-btn:hover { color: var(--mc-text-primary); }
-.tab-btn.active { color: var(--mc-primary); background: var(--mc-bg-elevated); box-shadow: 0 1px 4px rgba(0,0,0,0.08); font-weight: 600; }
-.tab-content { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
-.tab-content--config { overflow: hidden; padding-right: 0; }
-.tab-content--graph { overflow: hidden; padding: 0; }
-
-.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 200px; color: var(--mc-text-tertiary); text-align: center; }
-.empty-state p { font-size: 14px; }
-
-/* Modal */
 .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
 .modal-content { background: var(--mc-bg-elevated); border: 1px solid var(--mc-border); border-radius: 18px; width: 100%; max-width: 520px; padding: 24px; box-shadow: 0 24px 64px rgba(0,0,0,0.18); }
 .modal-title { font-size: 17px; font-weight: 700; color: var(--mc-text-primary); margin: 0 0 18px; }
@@ -882,10 +112,5 @@ onMounted(() => {
 
 @media (max-width: 980px) {
   .wiki-frame { height: 100%; min-height: calc(100vh - 28px); }
-  .wiki-layout { flex-direction: column; overflow: visible; }
-  .wiki-sidebar { width: 100%; min-width: 0; max-height: 320px; }
-  .wiki-content { overflow: visible; }
-  .tab-content { overflow: visible; }
-  .tab-content--config { overflow: visible; }
 }
 </style>
diff --git a/mateclaw-ui/src/views/Wiki/utils/kbVisual.ts b/mateclaw-ui/src/views/Wiki/utils/kbVisual.ts
new file mode 100644
index 00000000..b665053a
--- /dev/null
+++ b/mateclaw-ui/src/views/Wiki/utils/kbVisual.ts
@@ -0,0 +1,72 @@
+// Visual helpers shared between the library grid and the workspace header so
+// the same KB shows the same color and initial wherever it appears.
+
+import type { WikiKB } from '@/stores/useWikiStore'
+
+interface PaletteEntry {
+  bg: string
+  fg: string
+}
+
+// Eight-color palette tuned to the warm/earthy brand. Each entry sits around
+// 45-55% lightness with mid saturation so colors stay distinct but live in the
+// same room as the rust-orange primary.
+const KB_PALETTE: PaletteEntry[] = [
+  { bg: 'hsl(20, 68%, 50%)', fg: '#fff' },   // terracotta
+  { bg: 'hsl(155, 32%, 42%)', fg: '#fff' },  // sage green
+  { bg: 'hsl(212, 45%, 48%)', fg: '#fff' },  // dusk blue
+  { bg: 'hsl(285, 30%, 50%)', fg: '#fff' },  // mauve
+  { bg: 'hsl(38, 72%, 50%)', fg: '#fff' },   // amber
+  { bg: 'hsl(195, 28%, 42%)', fg: '#fff' },  // slate teal
+  { bg: 'hsl(232, 38%, 52%)', fg: '#fff' },  // indigo
+  { bg: 'hsl(8, 62%, 50%)', fg: '#fff' },    // rosewood
+]
+
+type KBLike = Pick<WikiKB, 'id'> & { name?: string }
+
+// IDs are server-side snowflakes and exceed JS safe-int range, so numeric `% N`
+// loses all low bits and collapses to a single bucket. Hash the string form
+// instead, mixing in the name so re-opening the same KB stays color-stable.
+function paletteFor(kb: KBLike): PaletteEntry {
+  const seed = String(kb.id ?? '') + '|' + (kb.name || '')
+  let h = 5381
+  for (let i = 0; i < seed.length; i++) {
+    h = ((h << 5) + h + seed.charCodeAt(i)) | 0
+  }
+  const idx = ((h % KB_PALETTE.length) + KB_PALETTE.length) % KB_PALETTE.length
+  return KB_PALETTE[idx]
+}
+
+export function kbAccent(kb: KBLike): string {
+  return paletteFor(kb).bg
+}
+
+export function kbAccentFg(kb: KBLike): string {
+  return paletteFor(kb).fg
+}
+
+export function kbInitial(kb: { name?: string }): string {
+  if (!kb.name) return '?'
+  // Take the first visible character — works for both ASCII and CJK.
+  const ch = Array.from(kb.name.trim())[0]
+  return (ch || '?').toUpperCase()
+}
+
+export function relativeTime(iso: string | null | undefined, isZh: boolean): string {
+  if (!iso) return ''
+  const then = new Date(iso).getTime()
+  if (Number.isNaN(then)) return ''
+  const diffMs = Date.now() - then
+  const sec = Math.floor(diffMs / 1000)
+  if (sec < 60) return isZh ? '刚刚' : 'just now'
+  const min = Math.floor(sec / 60)
+  if (min < 60) return isZh ? `${min} 分钟前` : `${min}m ago`
+  const hr = Math.floor(min / 60)
+  if (hr < 24) return isZh ? `${hr} 小时前` : `${hr}h ago`
+  const day = Math.floor(hr / 24)
+  if (day < 30) return isZh ? `${day} 天前` : `${day}d ago`
+  const mon = Math.floor(day / 30)
+  if (mon < 12) return isZh ? `${mon} 个月前` : `${mon}mo ago`
+  const yr = Math.floor(day / 365)
+  return isZh ? `${yr} 年前` : `${yr}y ago`
+}