From fd8871c5b1450bb6f373caa0f47f841c6b293487 Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Mon, 6 Jul 2026 20:22:49 +0800
Subject: [PATCH 1/5] fix(web): clarify archive session confirmation copy

---
 .changeset/web-archive-confirm-copy.md       | 5 +++++
 apps/kimi-web/src/i18n/locales/en/sidebar.ts | 2 +-
 apps/kimi-web/src/i18n/locales/zh/sidebar.ts | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/web-archive-confirm-copy.md

diff --git a/.changeset/web-archive-confirm-copy.md b/.changeset/web-archive-confirm-copy.md
new file mode 100644
index 0000000000..82a7cd3f18
--- /dev/null
+++ b/.changeset/web-archive-confirm-copy.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+web: Clarify the archive confirmation to mention restoring or deleting from Settings.
diff --git a/apps/kimi-web/src/i18n/locales/en/sidebar.ts b/apps/kimi-web/src/i18n/locales/en/sidebar.ts
index cda064d444..d9634b40dd 100644
--- a/apps/kimi-web/src/i18n/locales/en/sidebar.ts
+++ b/apps/kimi-web/src/i18n/locales/en/sidebar.ts
@@ -12,7 +12,7 @@ export default {
   newChat: 'New Chat',
   newWorkspace: 'New Workspace',
   emptyState: 'No sessions yet · click New Session to start',
-  archiveConfirm: 'Archive session?',
+  archiveConfirm: 'Archive this session? You can restore it or permanently delete it later from Settings.',
   options: 'Options',
   rename: 'Rename',
   copyPath: 'Copy path',
diff --git a/apps/kimi-web/src/i18n/locales/zh/sidebar.ts b/apps/kimi-web/src/i18n/locales/zh/sidebar.ts
index 473f3eecad..da8b2b43e8 100644
--- a/apps/kimi-web/src/i18n/locales/zh/sidebar.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/sidebar.ts
@@ -12,7 +12,7 @@ export default {
   newChat: '新建对话',
   newWorkspace: '新建工作区',
   emptyState: '还没有会话 · 点击 新建会话 开始',
-  archiveConfirm: '归档会话？',
+  archiveConfirm: '确认归档会话？归档后可以从「设置」中恢复或彻底删除会话',
   options: '选项',
   rename: '重命名',
   copyPath: '复制路径',

From 1d2c6869cc215c14fafb6a0953ecf7b1dc88a619 Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Mon, 6 Jul 2026 20:30:59 +0800
Subject: [PATCH 2/5] fix(web): drop delete mention from archive confirmation
 copy

---
 .changeset/web-archive-confirm-copy.md       | 2 +-
 apps/kimi-web/src/i18n/locales/en/sidebar.ts | 2 +-
 apps/kimi-web/src/i18n/locales/zh/sidebar.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.changeset/web-archive-confirm-copy.md b/.changeset/web-archive-confirm-copy.md
index 82a7cd3f18..79bfe1c95b 100644
--- a/.changeset/web-archive-confirm-copy.md
+++ b/.changeset/web-archive-confirm-copy.md
@@ -2,4 +2,4 @@
 "@moonshot-ai/kimi-code": patch
 ---
 
-web: Clarify the archive confirmation to mention restoring or deleting from Settings.
+web: Clarify the archive confirmation to mention restoring from Settings.
diff --git a/apps/kimi-web/src/i18n/locales/en/sidebar.ts b/apps/kimi-web/src/i18n/locales/en/sidebar.ts
index d9634b40dd..3bb705ca36 100644
--- a/apps/kimi-web/src/i18n/locales/en/sidebar.ts
+++ b/apps/kimi-web/src/i18n/locales/en/sidebar.ts
@@ -12,7 +12,7 @@ export default {
   newChat: 'New Chat',
   newWorkspace: 'New Workspace',
   emptyState: 'No sessions yet · click New Session to start',
-  archiveConfirm: 'Archive this session? You can restore it or permanently delete it later from Settings.',
+  archiveConfirm: 'Archive this session? You can restore it later from Settings.',
   options: 'Options',
   rename: 'Rename',
   copyPath: 'Copy path',
diff --git a/apps/kimi-web/src/i18n/locales/zh/sidebar.ts b/apps/kimi-web/src/i18n/locales/zh/sidebar.ts
index da8b2b43e8..bea56f556a 100644
--- a/apps/kimi-web/src/i18n/locales/zh/sidebar.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/sidebar.ts
@@ -12,7 +12,7 @@ export default {
   newChat: '新建对话',
   newWorkspace: '新建工作区',
   emptyState: '还没有会话 · 点击 新建会话 开始',
-  archiveConfirm: '确认归档会话？归档后可以从「设置」中恢复或彻底删除会话',
+  archiveConfirm: '确认归档会话？归档后可以从「设置」中恢复',
   options: '选项',
   rename: '重命名',
   copyPath: '复制路径',

From 0fb2f9684f15b97fd41721bc304be0e914153ed6 Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Mon, 6 Jul 2026 20:52:08 +0800
Subject: [PATCH 3/5] feat(web): add archived-sessions restore entry to mobile
 settings

Mobile used a separate settings bottom-sheet with no archived-sessions
restore surface, so the archive confirmation pointing users to Settings
to restore was untrue on mobile. Add an Archived sessions sub-view to
the mobile settings sheet with search, sort and restore, mirroring the
desktop Settings tab.
---
 .changeset/web-archive-confirm-copy.md        |   2 +-
 .../components/mobile/MobileSettingsSheet.vue | 241 +++++++++++++++++-
 apps/kimi-web/src/i18n/locales/en/mobile.ts   |   3 +
 apps/kimi-web/src/i18n/locales/zh/mobile.ts   |   3 +
 4 files changed, 246 insertions(+), 3 deletions(-)

diff --git a/.changeset/web-archive-confirm-copy.md b/.changeset/web-archive-confirm-copy.md
index 79bfe1c95b..97ecc63b08 100644
--- a/.changeset/web-archive-confirm-copy.md
+++ b/.changeset/web-archive-confirm-copy.md
@@ -2,4 +2,4 @@
 "@moonshot-ai/kimi-code": patch
 ---
 
-web: Clarify the archive confirmation to mention restoring from Settings.
+web: Add an Archived sessions entry to the mobile settings sheet and clarify the archive confirmation to mention restoring from Settings.
diff --git a/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue b/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
index 07697e7231..d5305da7e8 100644
--- a/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
+++ b/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
@@ -6,11 +6,12 @@
 <!-- (theme / color scheme / language) and the sign-in/out entry, which previously -->
 <!-- had no mobile counterpart. -->
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { ConversationStatus, PermissionMode } from '../../types';
-import type { AppModel, ThinkingLevel } from '../../api/types';
+import type { AppModel, AppSession, ThinkingLevel } from '../../api/types';
 import type { ColorScheme } from '../../composables/useKimiWebClient';
+import { useKimiWebClient } from '../../composables/useKimiWebClient';
 import {
   coerceThinkingForModel,
   commitLevel,
@@ -146,6 +147,92 @@ function onLogout(): void {
   emit('logout');
   emit('update:modelValue', false);
 }
+
+// ---------------------------------------------------------------------------
+// Archived-sessions sub-view — mirrors the desktop Settings "Archived" tab so
+// the mobile archive confirmation (which points users to Settings to restore)
+// is true here too. Loads all archived sessions once when the view opens;
+// search + sort run client-side over the full set.
+// ---------------------------------------------------------------------------
+const client = useKimiWebClient();
+type SheetView = 'main' | 'archived';
+const view = ref<SheetView>('main');
+
+const archivedItems = ref<AppSession[]>([]);
+const archivedLoading = ref(false);
+const archivedLoaded = ref(false);
+const archiveQuery = ref('');
+const archiveSort = ref<'archived-desc' | 'created-desc' | 'name-asc'>('archived-desc');
+
+const ARCHIVED_PAGE_SIZE = 100;
+
+async function loadAllArchived(): Promise<void> {
+  if (archivedLoading.value || archivedLoaded.value) return;
+  archivedLoading.value = true;
+  try {
+    const all: AppSession[] = [];
+    let beforeId: string | undefined;
+    for (;;) {
+      const page = await client.loadArchivedSessions({ beforeId, pageSize: ARCHIVED_PAGE_SIZE });
+      all.push(...page.items);
+      if (!page.hasMore || page.items.length === 0) break;
+      const next = page.items.at(-1)?.id;
+      if (next === undefined) break;
+      beforeId = next;
+    }
+    archivedItems.value = all;
+    archivedLoaded.value = true;
+  } catch (err) {
+    console.warn('loadAllArchived failed', err);
+  } finally {
+    archivedLoading.value = false;
+  }
+}
+
+function openArchived(): void {
+  view.value = 'archived';
+  if (!archivedLoaded.value) void loadAllArchived();
+}
+
+function backToMain(): void {
+  view.value = 'main';
+}
+
+const filteredArchived = computed<AppSession[]>(() => {
+  const q = archiveQuery.value.trim().toLowerCase();
+  let rows = archivedItems.value.filter((s) => s.archived === true);
+  if (q) rows = rows.filter((s) => s.title.toLowerCase().includes(q));
+  rows = rows.slice();
+  if (archiveSort.value === 'archived-desc') {
+    rows.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
+  } else if (archiveSort.value === 'created-desc') {
+    rows.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+  } else {
+    rows.sort((a, b) => a.title.localeCompare(b.title, 'zh'));
+  }
+  return rows;
+});
+
+async function onRestore(id: string): Promise<void> {
+  const ok = await client.restoreSession(id);
+  if (ok) archivedItems.value = archivedItems.value.filter((s) => s.id !== id);
+}
+
+function archiveTime(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  const pad = (n: number): string => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+// Reset to the main view whenever the sheet is closed, so reopening starts at
+// the top rather than mid-list.
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (!open) view.value = 'main';
+  },
+);
 </script>
 
 <template>
@@ -154,6 +241,7 @@ function onLogout(): void {
     :title="t('mobile.settingsTitle')"
     @update:model-value="emit('update:modelValue', $event)"
   >
+    <template v-if="view === 'main'">
     <div class="group-title">{{ t('mobile.groupSession') }}</div>
 
     <!-- Model → opens ModelPicker -->
@@ -228,6 +316,15 @@ function onLogout(): void {
 
     <div class="group-title">{{ t('mobile.groupApp') }}</div>
 
+    <!-- Archived sessions → opens the archived restore sub-view -->
+    <button type="button" class="srow" @click="openArchived">
+      <span class="srow-main">
+        <span class="srow-label">{{ t('mobile.archivedSessions') }}</span>
+        <span class="srow-sub">{{ t('mobile.archivedSessionsSub') }}</span>
+      </span>
+      <span class="chev">›</span>
+    </button>
+
     <!-- App preferences (the desktop settings-popover controls) -->
     <div class="srow read-only pref">
       <span class="srow-main">
@@ -297,6 +394,50 @@ function onLogout(): void {
       </span>
       <span class="srow-val dim">{{ serverVersion }}</span>
     </div>
+    </template>
+
+    <template v-else>
+      <!-- Archived sessions sub-view -->
+      <div class="arch-subhead">
+        <button type="button" class="arch-back" @click="backToMain">
+          <span class="chev back">‹</span> {{ t('mobile.archivedBack') }}
+        </button>
+        <span class="arch-count">{{ t('mobile.sessionCount', { n: filteredArchived.length }) }}</span>
+      </div>
+
+      <div class="arch-tools">
+        <label class="arch-search">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>
+          <input v-model="archiveQuery" :placeholder="t('settings.archivedSearch')" />
+        </label>
+        <SegmentedControl
+          size="sm"
+          :model-value="archiveSort"
+          :options="[
+            { value: 'archived-desc', label: t('settings.archivedSortArchived') },
+            { value: 'created-desc', label: t('settings.archivedSortCreated') },
+            { value: 'name-asc', label: t('settings.archivedSortName') },
+          ]"
+          @update:model-value="archiveSort = $event as 'archived-desc' | 'created-desc' | 'name-asc'"
+        />
+      </div>
+
+      <div v-if="archivedLoading" class="arch-empty">{{ t('settings.archivedLoadingAll') }}</div>
+
+      <template v-else-if="filteredArchived.length > 0">
+        <div v-for="s in filteredArchived" :key="s.id" class="arch-row">
+          <div class="arch-meta">
+            <div class="arch-name">{{ s.title }}</div>
+            <div class="arch-time">{{ t('settings.archivedAt', { time: archiveTime(s.updatedAt) }) }}</div>
+          </div>
+          <button type="button" class="arch-restore" @click="onRestore(s.id)">{{ t('settings.archivedRestore') }}</button>
+        </div>
+      </template>
+
+      <div v-else class="arch-empty">
+        {{ archivedItems.length === 0 ? t('settings.archivedEmpty') : t('settings.archivedNoMatch') }}
+      </div>
+    </template>
   </BottomSheet>
 </template>
 
@@ -478,4 +619,100 @@ function onLogout(): void {
 .srow,
 .srow-sub,
 .srow-val { font-family: var(--sans); }
+
+/* Archived sessions sub-view */
+.arch-subhead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3) var(--space-1);
+}
+.arch-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  border: none;
+  background: none;
+  padding: var(--space-1) var(--space-2) var(--space-1) 0;
+  font-family: var(--font-ui);
+  font-size: var(--text-base);
+  color: var(--color-accent-hover);
+  cursor: pointer;
+}
+.chev.back { font-size: 20px; }
+.arch-count {
+  font-family: var(--font-ui);
+  font-size: var(--text-sm);
+  color: var(--color-text-faint);
+}
+.arch-tools {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  flex-wrap: wrap;
+}
+.arch-search {
+  flex: 1;
+  min-width: 160px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0 var(--space-3);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-md);
+  background: var(--color-bg);
+  color: var(--color-text-faint);
+  font-size: var(--text-sm);
+}
+.arch-search:focus-within { border-color: var(--color-accent); box-shadow: var(--p-focus-ring); color: var(--color-text-muted); }
+.arch-search svg { width: 15px; height: 15px; flex: none; }
+.arch-search input { width: 100%; border: none; outline: none; background: transparent; font: inherit; color: var(--color-text); }
+.arch-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: 56px;
+  padding: var(--space-2) var(--space-3);
+  border-top: 1px solid var(--color-line);
+}
+.arch-row:first-of-type { border-top: none; }
+.arch-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.arch-name {
+  font-family: var(--font-ui);
+  font-size: var(--text-base);
+  color: var(--color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.arch-time {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-text-faint);
+}
+.arch-restore {
+  flex: none;
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-sunken);
+  color: var(--color-text);
+  font-family: var(--font-ui);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  padding: var(--space-1) var(--space-3);
+  min-height: 32px;
+  cursor: pointer;
+}
+.arch-restore:hover { background: var(--color-line); }
+.arch-restore:active { background: var(--color-surface-sunken); }
+.arch-empty {
+  padding: var(--space-6) var(--space-4);
+  text-align: center;
+  font-family: var(--font-ui);
+  font-size: var(--text-sm);
+  color: var(--color-text-faint);
+}
 </style>
diff --git a/apps/kimi-web/src/i18n/locales/en/mobile.ts b/apps/kimi-web/src/i18n/locales/en/mobile.ts
index 01dc4ecd4c..ae60023dd6 100644
--- a/apps/kimi-web/src/i18n/locales/en/mobile.ts
+++ b/apps/kimi-web/src/i18n/locales/en/mobile.ts
@@ -16,4 +16,7 @@ export default {
   permYoloSub: 'auto-approve all',
   planModeSub: 'Plan mode',
   swarmModeSub: 'Swarm mode',
+  archivedSessions: 'Archived sessions',
+  archivedSessionsSub: 'Browse and restore archived sessions',
+  archivedBack: 'Back',
 } as const;
diff --git a/apps/kimi-web/src/i18n/locales/zh/mobile.ts b/apps/kimi-web/src/i18n/locales/zh/mobile.ts
index f4f8690f73..22799adf2f 100644
--- a/apps/kimi-web/src/i18n/locales/zh/mobile.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/mobile.ts
@@ -16,4 +16,7 @@ export default {
   permYoloSub: '全部自动批准',
   planModeSub: '计划模式',
   swarmModeSub: 'Swarm 模式',
+  archivedSessions: '已归档会话',
+  archivedSessionsSub: '查看并恢复已归档会话',
+  archivedBack: '返回',
 } as const;

From 3d5b7998c67c45281a4e41cb3a5b04938af4cad4 Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Mon, 6 Jul 2026 22:17:28 +0800
Subject: [PATCH 4/5] fix(web): refresh mobile archived list and use Input
 primitive

Refresh the archived-sessions list each time the mobile sub-view opens so
sessions archived from the mobile switcher show up without remounting the
sheet, and replace the hand-rolled search input plus inline svg with the
shared Input primitive.
---
 .../components/mobile/MobileSettingsSheet.vue | 36 +++++++------------
 1 file changed, 13 insertions(+), 23 deletions(-)

diff --git a/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue b/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
index d5305da7e8..401022e722 100644
--- a/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
+++ b/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
@@ -21,6 +21,7 @@ import {
 } from '../../lib/modelThinking';
 import BottomSheet from '../dialogs/BottomSheet.vue';
 import LanguageSwitcher from '../settings/LanguageSwitcher.vue';
+import Input from '../ui/Input.vue';
 import SegmentedControl from '../ui/SegmentedControl.vue';
 
 const { t } = useI18n();
@@ -167,8 +168,9 @@ const archiveSort = ref<'archived-desc' | 'created-desc' | 'name-asc'>('archived
 const ARCHIVED_PAGE_SIZE = 100;
 
 async function loadAllArchived(): Promise<void> {
-  if (archivedLoading.value || archivedLoaded.value) return;
+  if (archivedLoading.value) return;
   archivedLoading.value = true;
+  archivedLoaded.value = false;
   try {
     const all: AppSession[] = [];
     let beforeId: string | undefined;
@@ -191,7 +193,8 @@ async function loadAllArchived(): Promise<void> {
 
 function openArchived(): void {
   view.value = 'archived';
-  if (!archivedLoaded.value) void loadAllArchived();
+  archiveQuery.value = '';
+  void loadAllArchived();
 }
 
 function backToMain(): void {
@@ -406,10 +409,13 @@ watch(
       </div>
 
       <div class="arch-tools">
-        <label class="arch-search">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>
-          <input v-model="archiveQuery" :placeholder="t('settings.archivedSearch')" />
-        </label>
+        <Input
+          class="arch-search-input"
+          :model-value="archiveQuery"
+          size="sm"
+          :placeholder="t('settings.archivedSearch')"
+          @update:model-value="archiveQuery = $event"
+        />
         <SegmentedControl
           size="sm"
           :model-value="archiveSort"
@@ -653,23 +659,7 @@ watch(
   padding: var(--space-2) var(--space-3);
   flex-wrap: wrap;
 }
-.arch-search {
-  flex: 1;
-  min-width: 160px;
-  height: 34px;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: 0 var(--space-3);
-  border: 1px solid var(--color-line);
-  border-radius: var(--radius-md);
-  background: var(--color-bg);
-  color: var(--color-text-faint);
-  font-size: var(--text-sm);
-}
-.arch-search:focus-within { border-color: var(--color-accent); box-shadow: var(--p-focus-ring); color: var(--color-text-muted); }
-.arch-search svg { width: 15px; height: 15px; flex: none; }
-.arch-search input { width: 100%; border: none; outline: none; background: transparent; font: inherit; color: var(--color-text); }
+.arch-search-input { flex: 1; min-width: 160px; }
 .arch-row {
   display: flex;
   align-items: center;

From 7f935347650ebd63ebde3e9e550da1248a2dca74 Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Mon, 6 Jul 2026 22:41:29 +0800
Subject: [PATCH 5/5] fix(web): use Button primitive for mobile archived
 restore

Render the mobile Archived sessions restore action with the shared Button
primitive instead of a hand-rolled button and scoped CSS, matching the
desktop archived list and the app's design-system rule.
---
 .../components/mobile/MobileSettingsSheet.vue  | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue b/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
index 401022e722..24034c703f 100644
--- a/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
+++ b/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
@@ -21,6 +21,7 @@ import {
 } from '../../lib/modelThinking';
 import BottomSheet from '../dialogs/BottomSheet.vue';
 import LanguageSwitcher from '../settings/LanguageSwitcher.vue';
+import Button from '../ui/Button.vue';
 import Input from '../ui/Input.vue';
 import SegmentedControl from '../ui/SegmentedControl.vue';
 
@@ -436,7 +437,7 @@ watch(
             <div class="arch-name">{{ s.title }}</div>
             <div class="arch-time">{{ t('settings.archivedAt', { time: archiveTime(s.updatedAt) }) }}</div>
           </div>
-          <button type="button" class="arch-restore" @click="onRestore(s.id)">{{ t('settings.archivedRestore') }}</button>
+          <Button variant="secondary" size="sm" @click="onRestore(s.id)">{{ t('settings.archivedRestore') }}</Button>
         </div>
       </template>
 
@@ -683,21 +684,6 @@ watch(
   font-size: var(--text-xs);
   color: var(--color-text-faint);
 }
-.arch-restore {
-  flex: none;
-  border: 1px solid var(--color-line);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-sunken);
-  color: var(--color-text);
-  font-family: var(--font-ui);
-  font-size: var(--text-sm);
-  font-weight: var(--weight-medium);
-  padding: var(--space-1) var(--space-3);
-  min-height: 32px;
-  cursor: pointer;
-}
-.arch-restore:hover { background: var(--color-line); }
-.arch-restore:active { background: var(--color-surface-sunken); }
 .arch-empty {
   padding: var(--space-6) var(--space-4);
   text-align: center;