From 110f1583438748dfa474b037d4deea40cae7cd4c Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Wed, 23 Sep 2026 08:18:05 +0900
Subject: [PATCH 1/6] fix: fall back to default icon colors when
 resolveIconColors fails

An outdated service worker can answer resolveIconColors with null,
which left the menu stuck in the loading state. Render unanswered
icons with the default colors instead, while still leaving them
uncached so the next menu retries.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../hooks/useSettingsWithImageCache.test.tsx  | 36 +++++++++++++++++--
 .../src/hooks/useSettingsWithImageCache.ts    | 16 +++++++--
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/packages/extension/src/hooks/useSettingsWithImageCache.test.tsx b/packages/extension/src/hooks/useSettingsWithImageCache.test.tsx
index 3d1fbd20..206d239b 100644
--- a/packages/extension/src/hooks/useSettingsWithImageCache.test.tsx
+++ b/packages/extension/src/hooks/useSettingsWithImageCache.test.tsx
@@ -298,9 +298,12 @@ describe("useSettingsWithImageCache", () => {
     mockIpcSend.mockResolvedValueOnce([]).mockResolvedValueOnce([false])
 
     const firstRender = renderHook(() => useSettingsWithImageCache())
-    await waitFor(() => expect(mockIpcSend).toHaveBeenCalledTimes(1))
-    expect(firstRender.result.current.loading).toBe(true)
-    expect(firstRender.result.current.commands).toEqual([])
+    await waitFor(() => expect(firstRender.result.current.loading).toBe(false))
+    expect(mockIpcSend).toHaveBeenCalledTimes(1)
+    // Falls back to the default colors instead of blocking the menu.
+    expect(firstRender.result.current.commands).toEqual([
+      { ...command, preserveOriginalColor: false },
+    ])
     firstRender.unmount()
 
     const secondRender = renderHook(() => useSettingsWithImageCache())
@@ -312,6 +315,33 @@ describe("useSettingsWithImageCache", () => {
     ])
   })
 
+  it("US-30-a: should fall back to the default colors when IPC returns null", async () => {
+    const command = {
+      id: "null-response",
+      openMode: OPEN_MODE.POPUP,
+      title: "Null response",
+      iconUrl: "http://null.example.com/icon.png",
+    }
+    const folder = {
+      id: "null-folder",
+      title: "Null folder",
+      iconUrl: "http://null.example.com/folder.png",
+    }
+
+    mockSections({ folders: [folder] }, [command as Command])
+    mockIpcSend.mockResolvedValueOnce(null as any)
+
+    const { result } = renderHook(() => useSettingsWithImageCache())
+    await waitFor(() => expect(result.current.loading).toBe(false))
+
+    expect(result.current.commands).toEqual([
+      { ...command, preserveOriginalColor: false },
+    ])
+    expect(result.current.folders).toEqual([
+      { ...folder, preserveOriginalColor: false },
+    ])
+  })
+
   it("US-31: should use the AI service URL for AI Prompt icon preservation", async () => {
     const chatgptUrl = getAiServicesFallback().find(
       (s) => s.id === "chatgpt",
diff --git a/packages/extension/src/hooks/useSettingsWithImageCache.ts b/packages/extension/src/hooks/useSettingsWithImageCache.ts
index cc8c7777..80a405a9 100644
--- a/packages/extension/src/hooks/useSettingsWithImageCache.ts
+++ b/packages/extension/src/hooks/useSettingsWithImageCache.ts
@@ -74,9 +74,16 @@ const getIconTargetUrl = (command: Command) =>
 /**
  * Resolves every query, asking the service worker only about the ones it has
  * not answered yet. Returns null until the answers for `queries` are in.
+ *
+ * When the service worker fails to answer (e.g. an outdated worker that does
+ * not know the command), the unanswered queries fall back to `false` so the
+ * menu still renders with the default (recolored) icons.
  */
 function usePreservedIconColors(queries: IconColorQuery[]): boolean[] | null {
   const [, setResolvedVersion] = useState(0)
+  const [failedQueries, setFailedQueries] = useState<IconColorQuery[] | null>(
+    null,
+  )
 
   useEffect(() => {
     let active = true
@@ -89,6 +96,9 @@ function usePreservedIconColors(queries: IconColorQuery[]): boolean[] | null {
             BgCommand.resolveIconColors,
             unknown,
           )
+          if (!Array.isArray(results)) {
+            throw new Error(`Unexpected icon color response: ${results}`)
+          }
           if (results.length !== unknown.length) {
             throw new Error(
               `Unexpected icon color response length: expected ${unknown.length}, got ${results.length}`,
@@ -103,6 +113,8 @@ function usePreservedIconColors(queries: IconColorQuery[]): boolean[] | null {
       }
       if (!active) return
       if (queries.some((q) => !answerCache.has(queryKey(q)))) {
+        // Render with the default colors rather than blocking the menu.
+        setFailedQueries(queries)
         return
       }
       setResolvedVersion((version) => version + 1)
@@ -115,10 +127,10 @@ function usePreservedIconColors(queries: IconColorQuery[]): boolean[] | null {
   }, [queries])
 
   if (queries.some((q) => !answerCache.has(queryKey(q)))) {
-    return null
+    if (failedQueries !== queries) return null
   }
 
-  return queries.map((q) => answerCache.get(queryKey(q)) as boolean)
+  return queries.map((q) => answerCache.get(queryKey(q)) ?? false)
 }
 
 /**

From 345a16da4e52e153711c5b9ab5332d48c9f1b20c Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Wed, 23 Sep 2026 08:50:26 +0900
Subject: [PATCH 2/6] refactor: split ImportExport into service, hook and view

- Move React-independent import/export/backup logic to
  services/settings/importExport.ts
- Add useImportExport hook that only holds state and wires service calls
- Keep ImportExport.tsx focused on rendering
- Add unit tests for the importExport service

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/option/ImportExport.tsx    | 530 +++--------------
 .../src/hooks/option/useImportExport.ts       |  77 +++
 .../services/settings/importExport.test.ts    | 538 ++++++++++++++++++
 .../src/services/settings/importExport.ts     | 266 +++++++++
 4 files changed, 975 insertions(+), 436 deletions(-)
 create mode 100644 packages/extension/src/hooks/option/useImportExport.ts
 create mode 100644 packages/extension/src/services/settings/importExport.test.ts
 create mode 100644 packages/extension/src/services/settings/importExport.ts

diff --git a/packages/extension/src/components/option/ImportExport.tsx b/packages/extension/src/components/option/ImportExport.tsx
index 3b9b218a..1eb478a9 100644
--- a/packages/extension/src/components/option/ImportExport.tsx
+++ b/packages/extension/src/components/option/ImportExport.tsx
@@ -1,360 +1,65 @@
-import { useState, useRef, useEffect } from "react"
+import { useState } from "react"
 import { Dialog } from "./Dialog"
-import type { UserSettings, Caches, ShortcutSettings } from "@/types"
-
-import { Storage, STORAGE_KEY, LOCAL_STORAGE_KEY } from "@/services/storage"
-import {
-  DailyBackupManager,
-  WeeklyBackupManager,
-  LegacyBackupManager,
-} from "@/services/storage/backupManager"
-import { Settings, migrate } from "@/services/settings/settings"
-import { enhancedSettings } from "@/services/settings/enhancedSettings"
-import { CACHE_SECTIONS } from "@/services/settings/settingsCache"
-import { isBase64, isUrl } from "@/lib/utils"
-import { APP_ID } from "@/const"
 import { t } from "@/services/i18n"
 import { Download, Upload, Undo2, RotateCcw } from "lucide-react"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import type { BackupData } from "@/services/storage/backupManager"
 import { TEST_IDS } from "@/testIds"
+import { useImportExport } from "@/hooks/option/useImportExport"
+import {
+  BACKUP_TYPES,
+  isCheckingBackups,
+  hasAvailableBackup,
+  getAvailableBackups,
+} from "@/services/settings/importExport"
+import type { BackupType } from "@/services/settings/importExport"
 
 import css from "./Option.module.css"
 
-// Backup type constants
-const BACKUP_TYPES = {
-  LEGACY: "legacy",
-  DAILY: "daily",
-  WEEKLY: "weekly",
-} as const
-
-// Backup status constants
-const BACKUP_STATUS = {
-  CHECKING: "checking",
-  AVAILABLE: "available",
-  NONE: "none",
-} as const
-
-type BackupType = (typeof BACKUP_TYPES)[keyof typeof BACKUP_TYPES]
-type BackupStatus = (typeof BACKUP_STATUS)[keyof typeof BACKUP_STATUS]
-
-function getTimestamp() {
-  const date = new Date()
-  const year = date.getFullYear()
-  const month = (date.getMonth() + 1).toString().padStart(2, "0")
-  const day = date.getDate().toString().padStart(2, "0")
-  const hours = date.getHours().toString().padStart(2, "0")
-  const minutes = date.getMinutes().toString().padStart(2, "0")
-  return `${year}${month}${day}_${hours}${minutes}`
+const getBackupTypeLabel = (type: BackupType) => {
+  switch (type) {
+    case BACKUP_TYPES.LEGACY:
+      return t("Option_RestoreFromBackup_legacy")
+    case BACKUP_TYPES.DAILY:
+      return t("Option_RestoreFromBackup_daily")
+    case BACKUP_TYPES.WEEKLY:
+      return t("Option_RestoreFromBackup_weekly")
+  }
 }
 
 export function ImportExport() {
   const [resetDialog, setResetDialog] = useState(false)
   const [importDialog, setImportDialog] = useState(false)
   const [restoreDialog, setRestoreDialog] = useState(false)
-  const [importJson, setImportJson] = useState<UserSettings>()
-  const [backupData, setBackupData] = useState<{
-    [BACKUP_TYPES.LEGACY]: {
-      status: BackupStatus
-      info: {
-        timestamp: number
-        commandCount: number
-        folderCount?: number
-      } | null
-    }
-    [BACKUP_TYPES.DAILY]: {
-      status: BackupStatus
-      info: {
-        timestamp: number
-        commandCount: number
-        folderCount?: number
-      } | null
-    }
-    [BACKUP_TYPES.WEEKLY]: {
-      status: BackupStatus
-      info: {
-        timestamp: number
-        commandCount: number
-        folderCount?: number
-      } | null
-    }
-  }>({
-    [BACKUP_TYPES.LEGACY]: { status: BACKUP_STATUS.CHECKING, info: null },
-    [BACKUP_TYPES.DAILY]: { status: BACKUP_STATUS.CHECKING, info: null },
-    [BACKUP_TYPES.WEEKLY]: { status: BACKUP_STATUS.CHECKING, info: null },
-  })
-  const [selectedBackupType, setSelectedBackupType] = useState<BackupType>(
-    BACKUP_TYPES.LEGACY,
-  )
-  const inputFile = useRef<HTMLInputElement>(null)
-
-  // Check backup status on initialization
-  useEffect(() => {
-    checkBackupStatus()
-  }, [])
-
-  const checkBackupStatus = async () => {
-    try {
-      const newBackupData = { ...backupData }
-
-      // 1. Check legacy backup
-      const legacyBackup = await Storage.get<BackupData>(
-        LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
-      )
-
-      if (
-        legacyBackup &&
-        legacyBackup.commands &&
-        Array.isArray(legacyBackup.commands)
-      ) {
-        newBackupData[BACKUP_TYPES.LEGACY] = {
-          status: BACKUP_STATUS.AVAILABLE,
-          info: {
-            timestamp: legacyBackup.timestamp,
-            commandCount: legacyBackup.commands.length,
-            folderCount: Array.isArray(legacyBackup.folders)
-              ? legacyBackup.folders.length
-              : 0,
-          },
-        }
-      } else {
-        newBackupData[BACKUP_TYPES.LEGACY] = {
-          status: BACKUP_STATUS.NONE,
-          info: null,
-        }
-      }
-
-      // 2. Check daily backup
-      const dailyBackupManager = new DailyBackupManager()
-      const dailyBackup = await dailyBackupManager.getLastBackupData()
-
-      if (
-        dailyBackup &&
-        dailyBackup.commands &&
-        Array.isArray(dailyBackup.commands)
-      ) {
-        newBackupData[BACKUP_TYPES.DAILY] = {
-          status: BACKUP_STATUS.AVAILABLE,
-          info: {
-            timestamp: dailyBackup.timestamp,
-            commandCount: dailyBackup.commands.length,
-            folderCount: Array.isArray(dailyBackup.folders)
-              ? dailyBackup.folders.length
-              : 0,
-          },
-        }
-      } else {
-        newBackupData[BACKUP_TYPES.DAILY] = {
-          status: BACKUP_STATUS.NONE,
-          info: null,
-        }
-      }
-
-      // 3. Check weekly backup
-      const weeklyBackupManager = new WeeklyBackupManager()
-      const weeklyBackup = await weeklyBackupManager.getLastBackupData()
-
-      if (
-        weeklyBackup &&
-        weeklyBackup.commands &&
-        Array.isArray(weeklyBackup.commands)
-      ) {
-        newBackupData[BACKUP_TYPES.WEEKLY] = {
-          status: BACKUP_STATUS.AVAILABLE,
-          info: {
-            timestamp: weeklyBackup.timestamp,
-            commandCount: weeklyBackup.commands.length,
-            folderCount: Array.isArray(weeklyBackup.folders)
-              ? weeklyBackup.folders.length
-              : 0,
-          },
-        }
-      } else {
-        newBackupData[BACKUP_TYPES.WEEKLY] = {
-          status: BACKUP_STATUS.NONE,
-          info: null,
-        }
-      }
-
-      setBackupData(newBackupData)
-
-      // Set default selection to first available backup
-      if (
-        newBackupData[BACKUP_TYPES.LEGACY].status === BACKUP_STATUS.AVAILABLE
-      ) {
-        setSelectedBackupType(BACKUP_TYPES.LEGACY)
-      } else if (
-        newBackupData[BACKUP_TYPES.DAILY].status === BACKUP_STATUS.AVAILABLE
-      ) {
-        setSelectedBackupType(BACKUP_TYPES.DAILY)
-      } else if (
-        newBackupData[BACKUP_TYPES.WEEKLY].status === BACKUP_STATUS.AVAILABLE
-      ) {
-        setSelectedBackupType(BACKUP_TYPES.WEEKLY)
-      }
-    } catch (error) {
-      console.error("Failed to check backup status:", error)
-      setBackupData({
-        [BACKUP_TYPES.LEGACY]: { status: BACKUP_STATUS.NONE, info: null },
-        [BACKUP_TYPES.DAILY]: { status: BACKUP_STATUS.NONE, info: null },
-        [BACKUP_TYPES.WEEKLY]: { status: BACKUP_STATUS.NONE, info: null },
-      })
-    }
-  }
-
-  const handleReset = () => {
-    setResetDialog(true)
-  }
+  const {
+    importJson,
+    backupStatus,
+    selectedBackupType,
+    setSelectedBackupType,
+    reset,
+    exportSettings,
+    selectImportFile,
+    runImport,
+    restore,
+  } = useImportExport()
+  const availableBackups = getAvailableBackups(backupStatus)
 
   const handleResetClose = (ret: boolean) => {
-    if (ret) {
-      Settings.reset().then(() => location.reload())
-    }
+    if (ret) reset()
     setResetDialog(false)
   }
 
-  const handleExport = async () => {
-    const data = await Storage.get<UserSettings>(STORAGE_KEY.USER)
-    data.commands = await Storage.getCommands()
-    data.shortcuts = await Storage.get<ShortcutSettings>(STORAGE_KEY.SHORTCUTS)
-
-    // for back compatibility
-    // cache key to image data url
-    const caches = (await enhancedSettings.getSection(
-      CACHE_SECTIONS.CACHES,
-      true,
-    )) as Caches
-    for (const c of data.commands) {
-      if (!c.iconUrl) continue
-      if (isBase64(c.iconUrl) || isUrl(c.iconUrl)) continue
-      if (caches?.images?.[c.iconUrl]) {
-        c.iconUrl = caches.images[c.iconUrl]
-      }
-    }
-
-    const text = JSON.stringify(data, null, 2)
-    const blob = new Blob([text], { type: "text/plain" })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement("a")
-    document.body.appendChild(a)
-    a.download = `${APP_ID}_${getTimestamp()}.json`
-    a.href = url
-    a.click()
-    a.remove()
-    URL.revokeObjectURL(url)
-  }
-
-  const handleImport = () => {
-    if (inputFile == null || inputFile.current == null) return
-    const files = inputFile.current.files
-    if (files == null) return
-    for (let i = 0; i < files.length; i++) {
-      const file = files[i]
-      const reader = new FileReader()
-      reader.onload = (e) => {
-        if (e.target != null) {
-          const text = e.target.result as string
-          const json = JSON.parse(text)
-          setImportJson(json)
-        }
-      }
-      reader.readAsText(file)
-    }
+  const handleImportFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) selectImportFile(file)
   }
 
   const handleImportClose = (ret: boolean) => {
-    if (ret && importJson != null) {
-      ;(async () => {
-        const {
-          commandExecutionCount = 0,
-          hasShownReviewRequest = false,
-          hasDismissedPromptHistoryBanner = false,
-          hasShownHubShareToast = false,
-          hasShownOnboarding = false,
-        } = await enhancedSettings.get()
-        const data = await migrate({
-          ...importJson,
-          commandExecutionCount,
-          hasShownReviewRequest,
-          hasDismissedPromptHistoryBanner,
-          hasShownHubShareToast,
-          hasShownOnboarding,
-          stars: [],
-        })
-        await Settings.set(data)
-        location.reload()
-      })()
-    }
+    if (ret) runImport()
     setImportDialog(false)
   }
 
-  const handleRestore = async () => {
-    setRestoreDialog(true)
-  }
-
   const handleRestoreClose = (ret: boolean) => {
-    if (ret) {
-      ;(async () => {
-        try {
-          let backupCommands: any[] = []
-
-          if (selectedBackupType === BACKUP_TYPES.LEGACY) {
-            // Restore from legacy backup
-            const manager = new LegacyBackupManager()
-            const data = await manager.restoreFromBackup()
-            backupCommands = data.commands
-
-            if (data.folders && data.folders.length > 0) {
-              // Restore folders to settings
-              const currentSettings = await enhancedSettings.get()
-              await Settings.set({
-                ...currentSettings,
-                folders: data.folders,
-              })
-            }
-          } else if (selectedBackupType === BACKUP_TYPES.DAILY) {
-            // Restore from daily backup
-            const dailyBackupManager = new DailyBackupManager()
-            const dailyData = await dailyBackupManager.restoreFromBackup()
-            backupCommands = dailyData.commands
-
-            if (dailyData.folders && dailyData.folders.length > 0) {
-              // Restore folders to settings
-              const currentSettings = await enhancedSettings.get()
-              await Settings.set({
-                ...currentSettings,
-                folders: dailyData.folders,
-              })
-            }
-          } else if (selectedBackupType === BACKUP_TYPES.WEEKLY) {
-            // Restore from weekly backup
-            const weeklyBackupManager = new WeeklyBackupManager()
-            const weeklyData = await weeklyBackupManager.restoreFromBackup()
-            backupCommands = weeklyData.commands
-
-            if (weeklyData.folders && weeklyData.folders.length > 0) {
-              // Restore folders to settings
-              const currentSettings = await enhancedSettings.get()
-              await Settings.set({
-                ...currentSettings,
-                folders: weeklyData.folders,
-              })
-            }
-          }
-
-          if (backupCommands.length > 0) {
-            // Save restored commands
-            await Storage.setCommands(backupCommands)
-            location.reload()
-          } else {
-            alert(t("Option_RestoreFromBackup_failed"))
-          }
-        } catch (error) {
-          console.error("Failed to restore from backup:", error)
-          alert("Failed to restore from backup.")
-        }
-      })()
-    }
+    if (ret) restore()
     setRestoreDialog(false)
   }
 
@@ -376,7 +81,7 @@ export function ImportExport() {
           {t("Option_Import")}
         </button>
         <button
-          onClick={handleExport}
+          onClick={exportSettings}
           className={css.menuButton}
           type="button"
           data-testid={TEST_IDS.exportButton}
@@ -385,17 +90,13 @@ export function ImportExport() {
           {t("Option_Export")}
         </button>
         <button
-          onClick={handleRestore}
+          onClick={() => setRestoreDialog(true)}
           className={css.menuButton}
           type="button"
           title={
-            Object.values(backupData).every(
-              (backup) => backup.status === BACKUP_STATUS.CHECKING,
-            )
+            isCheckingBackups(backupStatus)
               ? t("Option_RestoreFromBackup_checking")
-              : !Object.values(backupData).some(
-                    (backup) => backup.status === BACKUP_STATUS.AVAILABLE,
-                  )
+              : !hasAvailableBackup(backupStatus)
                 ? t("Option_RestoreFromBackup_no_backup")
                 : t("Option_RestoreFromBackup_tooltip")
           }
@@ -404,7 +105,7 @@ export function ImportExport() {
           {t("Option_RestoreFromBackup")}
         </button>
         <button
-          onClick={handleReset}
+          onClick={() => setResetDialog(true)}
           className={css.menuButton}
           type="button"
           data-testid={TEST_IDS.resetButton}
@@ -440,8 +141,7 @@ export function ImportExport() {
           type="file"
           name="settings"
           accept=".json"
-          onChange={handleImport}
-          ref={inputFile}
+          onChange={handleImportFileChange}
           className={`${css.buttonImport}`}
           data-testid={TEST_IDS.importFileInput}
         />
@@ -450,106 +150,64 @@ export function ImportExport() {
         open={restoreDialog}
         onClose={handleRestoreClose}
         title={t("Option_RestoreFromBackup_dialog_title")}
-        description={() => {
-          const availableBackups = Object.entries(backupData).filter(
-            ([, backup]) => backup.status === BACKUP_STATUS.AVAILABLE,
-          )
-
-          if (availableBackups.length === 0) {
-            return <span>{t("Option_RestoreFromBackup_dialog_no_data")}</span>
-          }
-
-          return <span>{t("Option_RestoreFromBackup_dialog_select")}</span>
-        }}
-        okText={t("Option_RestoreFromBackup_dialog_restore")}
-        okDisabled={
-          !Object.values(backupData).some(
-            (backup) => backup.status === BACKUP_STATUS.AVAILABLE,
+        description={() =>
+          availableBackups.length === 0 ? (
+            <span>{t("Option_RestoreFromBackup_dialog_no_data")}</span>
+          ) : (
+            <span>{t("Option_RestoreFromBackup_dialog_select")}</span>
           )
         }
+        okText={t("Option_RestoreFromBackup_dialog_restore")}
+        okDisabled={!hasAvailableBackup(backupStatus)}
       >
-        {(() => {
-          const availableBackups = Object.entries(backupData).filter(
-            ([, backup]) => backup.status === BACKUP_STATUS.AVAILABLE,
-          )
-
-          if (availableBackups.length === 0) {
-            return null
-          }
-
-          const getBackupTypeLabel = (type: string) => {
-            switch (type) {
-              case BACKUP_TYPES.LEGACY:
-                return t("Option_RestoreFromBackup_legacy")
-              case BACKUP_TYPES.DAILY:
-                return t("Option_RestoreFromBackup_daily")
-              case BACKUP_TYPES.WEEKLY:
-                return t("Option_RestoreFromBackup_weekly")
-              default:
-                return type
-            }
-          }
-
-          return (
-            <div>
-              <RadioGroup
-                value={selectedBackupType}
-                onValueChange={(value) =>
-                  setSelectedBackupType(value as typeof selectedBackupType)
-                }
-              >
-                {availableBackups
-                  .sort(([typeA], [typeB]) => {
-                    // Put legacy at the bottom
-                    if (typeA === BACKUP_TYPES.LEGACY) return 1
-                    if (typeB === BACKUP_TYPES.LEGACY) return -1
-                    return 0
-                  })
-                  .map(([type, backup]) => (
-                    <div key={type} className="flex items-start space-x-3">
-                      <RadioGroupItem value={type} className="mt-1" />
-                      <div className="flex-1">
-                        <label
-                          className="text-sm font-medium cursor-pointer"
-                          onClick={() =>
-                            setSelectedBackupType(
-                              type as typeof selectedBackupType,
-                            )
-                          }
-                        >
-                          {getBackupTypeLabel(type)}
-                        </label>
-                        {backup.info && (
-                          <div className="text-xs text-gray-600 mt-1">
-                            <div>
-                              {t("Option_RestoreFromBackup_created")}{" "}
-                              {new Date(backup.info.timestamp).toLocaleString()}
-                            </div>
-                            <div>
-                              {t("Option_RestoreFromBackup_commands")}{" "}
-                              {backup.info.commandCount}{" "}
-                              {t("Option_RestoreFromBackup_items")}
-                            </div>
-                            {backup.info.folderCount !== undefined && (
-                              <div>
-                                {t("Option_RestoreFromBackup_folders")}{" "}
-                                {backup.info.folderCount}{" "}
-                                {t("Option_RestoreFromBackup_items")}
-                              </div>
-                            )}
+        {availableBackups.length > 0 && (
+          <div>
+            <RadioGroup
+              value={selectedBackupType}
+              onValueChange={(value) =>
+                setSelectedBackupType(value as BackupType)
+              }
+            >
+              {availableBackups.map(([type, backup]) => (
+                <div key={type} className="flex items-start space-x-3">
+                  <RadioGroupItem value={type} className="mt-1" />
+                  <div className="flex-1">
+                    <label
+                      className="text-sm font-medium cursor-pointer"
+                      onClick={() => setSelectedBackupType(type)}
+                    >
+                      {getBackupTypeLabel(type)}
+                    </label>
+                    {backup.info && (
+                      <div className="text-xs text-gray-600 mt-1">
+                        <div>
+                          {t("Option_RestoreFromBackup_created")}{" "}
+                          {new Date(backup.info.timestamp).toLocaleString()}
+                        </div>
+                        <div>
+                          {t("Option_RestoreFromBackup_commands")}{" "}
+                          {backup.info.commandCount}{" "}
+                          {t("Option_RestoreFromBackup_items")}
+                        </div>
+                        {backup.info.folderCount !== undefined && (
+                          <div>
+                            {t("Option_RestoreFromBackup_folders")}{" "}
+                            {backup.info.folderCount}{" "}
+                            {t("Option_RestoreFromBackup_items")}
                           </div>
                         )}
                       </div>
-                    </div>
-                  ))}
-              </RadioGroup>
-              <p className="mt-4 text-sm text-yellow-600">
-                <strong>{t("Option_RestoreFromBackup_warning")}</strong>{" "}
-                {t("Option_RestoreFromBackup_warning_message")}
-              </p>
-            </div>
-          )
-        })()}
+                    )}
+                  </div>
+                </div>
+              ))}
+            </RadioGroup>
+            <p className="mt-4 text-sm text-yellow-600">
+              <strong>{t("Option_RestoreFromBackup_warning")}</strong>{" "}
+              {t("Option_RestoreFromBackup_warning_message")}
+            </p>
+          </div>
+        )}
       </Dialog>
     </>
   )
diff --git a/packages/extension/src/hooks/option/useImportExport.ts b/packages/extension/src/hooks/option/useImportExport.ts
new file mode 100644
index 00000000..1132f508
--- /dev/null
+++ b/packages/extension/src/hooks/option/useImportExport.ts
@@ -0,0 +1,77 @@
+import { useState, useEffect } from "react"
+import type { UserSettings } from "@/types"
+import { t } from "@/services/i18n"
+import {
+  BACKUP_TYPES,
+  INITIAL_BACKUP_STATUS,
+  checkBackupStatus,
+  getDefaultBackupType,
+  resetSettings,
+  exportSettings,
+  readSettingsFile,
+  importSettings,
+  restoreFromBackup,
+} from "@/services/settings/importExport"
+import type {
+  BackupType,
+  BackupStatusMap,
+} from "@/services/settings/importExport"
+
+export function useImportExport() {
+  const [importJson, setImportJson] = useState<UserSettings>()
+  const [backupStatus, setBackupStatus] = useState<BackupStatusMap>(
+    INITIAL_BACKUP_STATUS,
+  )
+  const [selectedBackupType, setSelectedBackupType] = useState<BackupType>(
+    BACKUP_TYPES.LEGACY,
+  )
+
+  // Check backup status on initialization
+  useEffect(() => {
+    checkBackupStatus().then((statusMap) => {
+      setBackupStatus(statusMap)
+      const defaultType = getDefaultBackupType(statusMap)
+      if (defaultType) setSelectedBackupType(defaultType)
+    })
+  }, [])
+
+  const reset = async () => {
+    await resetSettings()
+    location.reload()
+  }
+
+  const selectImportFile = async (file: File) => {
+    setImportJson(await readSettingsFile(file))
+  }
+
+  const runImport = async () => {
+    if (importJson == null) return
+    await importSettings(importJson)
+    location.reload()
+  }
+
+  const restore = async () => {
+    try {
+      if (await restoreFromBackup(selectedBackupType)) {
+        location.reload()
+      } else {
+        alert(t("Option_RestoreFromBackup_failed"))
+      }
+    } catch (error) {
+      console.error("Failed to restore from backup:", error)
+      alert("Failed to restore from backup.")
+    }
+  }
+
+  return {
+    importJson,
+    backupStatus,
+    selectedBackupType,
+    setSelectedBackupType,
+    reset,
+    exportSettings,
+    selectImportFile,
+    runImport,
+    restore,
+  }
+}
diff --git a/packages/extension/src/services/settings/importExport.test.ts b/packages/extension/src/services/settings/importExport.test.ts
new file mode 100644
index 00000000..bd2f2fd1
--- /dev/null
+++ b/packages/extension/src/services/settings/importExport.test.ts
@@ -0,0 +1,538 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import {
+  BACKUP_TYPES,
+  BACKUP_STATUS,
+  INITIAL_BACKUP_STATUS,
+  getTimestamp,
+  resetSettings,
+  buildExportData,
+  exportSettings,
+  readSettingsFile,
+  importSettings,
+  checkBackupStatus,
+  getDefaultBackupType,
+  isCheckingBackups,
+  hasAvailableBackup,
+  getAvailableBackups,
+  restoreFromBackup,
+} from "./importExport"
+import type { BackupStatusMap, BackupEntry } from "./importExport"
+import { Storage, STORAGE_KEY, LOCAL_STORAGE_KEY } from "@/services/storage"
+import { Settings, migrate } from "@/services/settings/settings"
+import { enhancedSettings } from "@/services/settings/enhancedSettings"
+import { CACHE_SECTIONS } from "@/services/settings/settingsCache"
+import { APP_ID } from "@/const"
+
+const backupMocks = vi.hoisted(() => ({
+  legacy: { getLastBackupData: vi.fn(), restoreFromBackup: vi.fn() },
+  daily: { getLastBackupData: vi.fn(), restoreFromBackup: vi.fn() },
+  weekly: { getLastBackupData: vi.fn(), restoreFromBackup: vi.fn() },
+}))
+
+vi.mock("@/services/storage/backupManager", () => ({
+  LegacyBackupManager: vi.fn(() => backupMocks.legacy),
+  DailyBackupManager: vi.fn(() => backupMocks.daily),
+  WeeklyBackupManager: vi.fn(() => backupMocks.weekly),
+}))
+
+vi.mock("@/services/storage", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/services/storage")>()
+  return {
+    ...actual,
+    Storage: {
+      get: vi.fn(),
+      getCommands: vi.fn(),
+      setCommands: vi.fn(),
+    },
+  }
+})
+
+vi.mock("@/services/settings/settings", () => ({
+  Settings: { reset: vi.fn(), set: vi.fn() },
+  migrate: vi.fn(),
+}))
+
+vi.mock("@/services/settings/enhancedSettings", () => ({
+  enhancedSettings: { get: vi.fn(), getSection: vi.fn() },
+}))
+
+const mockStorage = vi.mocked(Storage)
+const mockSettings = vi.mocked(Settings)
+const mockMigrate = vi.mocked(migrate)
+const mockEnhancedSettings = vi.mocked(enhancedSettings)
+
+const entry = (
+  status: BackupEntry["status"],
+  info: BackupEntry["info"] = null,
+): BackupEntry => ({ status, info })
+
+const statusMap = (
+  legacy: BackupEntry["status"],
+  daily: BackupEntry["status"],
+  weekly: BackupEntry["status"],
+): BackupStatusMap => ({
+  [BACKUP_TYPES.LEGACY]: entry(legacy),
+  [BACKUP_TYPES.DAILY]: entry(daily),
+  [BACKUP_TYPES.WEEKLY]: entry(weekly),
+})
+
+const { AVAILABLE, NONE, CHECKING } = BACKUP_STATUS
+
+describe("importExport", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe("INITIAL_BACKUP_STATUS", () => {
+    it("IE-01: should be CHECKING for all backup types", () => {
+      expect(INITIAL_BACKUP_STATUS).toEqual(
+        statusMap(CHECKING, CHECKING, CHECKING),
+      )
+    })
+  })
+
+  describe("getTimestamp", () => {
+    it("IE-02: should format date as YYYYMMDD_HHmm with zero padding", () => {
+      expect(getTimestamp(new Date(2024, 0, 5, 3, 7))).toBe("20240105_0307")
+    })
+
+    it("IE-03: should format two-digit values as is", () => {
+      expect(getTimestamp(new Date(2024, 11, 31, 23, 59))).toBe("20241231_2359")
+    })
+  })
+
+  describe("resetSettings", () => {
+    it("IE-04: should call Settings.reset", async () => {
+      mockSettings.reset.mockResolvedValue(undefined as any)
+      await resetSettings()
+      expect(mockSettings.reset).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("buildExportData", () => {
+    const setup = (commands: any[], caches: any) => {
+      mockStorage.get.mockImplementation(async (key: any) => {
+        if (key === STORAGE_KEY.USER) return { folders: [] }
+        if (key === STORAGE_KEY.SHORTCUTS) return { shortcuts: [] }
+        return undefined
+      })
+      mockStorage.getCommands.mockResolvedValue(commands)
+      mockEnhancedSettings.getSection.mockResolvedValue(caches)
+    }
+
+    it("IE-05: should merge user settings, commands and shortcuts", async () => {
+      const commands = [{ id: "1", iconUrl: "" }]
+      setup(commands, { images: {} })
+
+      const data = await buildExportData()
+
+      expect(data).toEqual({
+        folders: [],
+        commands,
+        shortcuts: { shortcuts: [] },
+      })
+      expect(mockEnhancedSettings.getSection).toHaveBeenCalledWith(
+        CACHE_SECTIONS.CACHES,
+        true,
+      )
+    })
+
+    it("IE-06: should replace cache key iconUrl with cached data url", async () => {
+      setup([{ id: "1", iconUrl: "cache-key" }], {
+        images: { "cache-key": "data:image/png;base64,xxx" },
+      })
+
+      const data = await buildExportData()
+
+      expect(data.commands[0].iconUrl).toBe("data:image/png;base64,xxx")
+    })
+
+    it("IE-07: should keep base64 / url / uncached iconUrl as is", async () => {
+      setup(
+        [
+          { id: "1", iconUrl: "data:image/png;base64,aaa" },
+          { id: "2", iconUrl: "https://example.com/icon.png" },
+          { id: "3", iconUrl: "unknown-key" },
+          { id: "4" },
+        ],
+        {
+          images: {
+            "data:image/png;base64,aaa": "replaced",
+            "https://example.com/icon.png": "replaced",
+          },
+        },
+      )
+
+      const data = await buildExportData()
+
+      expect(data.commands.map((c) => c.iconUrl)).toEqual([
+        "data:image/png;base64,aaa",
+        "https://example.com/icon.png",
+        "unknown-key",
+        undefined,
+      ])
+    })
+
+    it("IE-08: should not throw when caches is undefined", async () => {
+      setup([{ id: "1", iconUrl: "cache-key" }], undefined)
+
+      const data = await buildExportData()
+
+      expect(data.commands[0].iconUrl).toBe("cache-key")
+    })
+  })
+
+  describe("exportSettings", () => {
+    let createObjectURL: ReturnType<typeof vi.fn>
+    let revokeObjectURL: ReturnType<typeof vi.fn>
+    let clickSpy: ReturnType<typeof vi.spyOn>
+
+    beforeEach(() => {
+      vi.useFakeTimers({ toFake: ["Date"] })
+      vi.setSystemTime(new Date(2024, 0, 5, 3, 7))
+      createObjectURL = vi.fn(() => "blob:mock")
+      revokeObjectURL = vi.fn()
+      URL.createObjectURL = createObjectURL as any
+      URL.revokeObjectURL = revokeObjectURL as any
+      clickSpy = vi
+        .spyOn(HTMLAnchorElement.prototype, "click")
+        .mockImplementation(() => {})
+
+      mockStorage.get.mockImplementation(async (key: any) =>
+        key === STORAGE_KEY.USER ? { folders: [] } : { shortcuts: [] },
+      )
+      mockStorage.getCommands.mockResolvedValue([])
+      mockEnhancedSettings.getSection.mockResolvedValue({ images: {} })
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+      clickSpy.mockRestore()
+    })
+
+    it("IE-09: should download a json file of export data", async () => {
+      await exportSettings()
+
+      expect(clickSpy).toHaveBeenCalledTimes(1)
+      const clicked = clickSpy.mock.contexts[0] as HTMLAnchorElement
+      expect(clicked.download).toBe(`${APP_ID}_20240105_0307.json`)
+      expect(clicked.href).toBe("blob:mock")
+
+      const blob = createObjectURL.mock.calls[0][0] as Blob
+      // jsdom's Blob does not implement text(), so read it via FileReader.
+      const text = await new Promise<string>((resolve) => {
+        const reader = new FileReader()
+        reader.onload = () => resolve(reader.result as string)
+        reader.readAsText(blob)
+      })
+      expect(JSON.parse(text)).toEqual({
+        folders: [],
+        commands: [],
+        shortcuts: { shortcuts: [] },
+      })
+      expect(revokeObjectURL).toHaveBeenCalledWith("blob:mock")
+    })
+
+    it("IE-10: should remove the anchor element after download", async () => {
+      await exportSettings()
+      expect(document.querySelectorAll("a").length).toBe(0)
+    })
+  })
+
+  describe("readSettingsFile", () => {
+    it("IE-11: should parse json file content", async () => {
+      const json = { folders: [], commands: [{ id: "1" }] }
+      const file = new File([JSON.stringify(json)], "settings.json", {
+        type: "application/json",
+      })
+
+      await expect(readSettingsFile(file)).resolves.toEqual(json)
+    })
+
+    it("IE-12: should reject when file content is invalid json", async () => {
+      const file = new File(["{ invalid"], "settings.json")
+
+      await expect(readSettingsFile(file)).rejects.toBeInstanceOf(SyntaxError)
+    })
+
+    it("IE-13: should reject when FileReader fails", async () => {
+      const error = new Error("read error")
+      const readSpy = vi
+        .spyOn(FileReader.prototype, "readAsText")
+        .mockImplementation(function (this: FileReader) {
+          Object.defineProperty(this, "error", { value: error })
+          this.onerror?.(new ProgressEvent("error") as any)
+        })
+
+      await expect(readSettingsFile(new File([""], "a.json"))).rejects.toBe(
+        error,
+      )
+      readSpy.mockRestore()
+    })
+  })
+
+  describe("importSettings", () => {
+    beforeEach(() => {
+      mockMigrate.mockImplementation(async (data: any) => ({
+        ...data,
+        migrated: true,
+      }))
+      mockSettings.set.mockResolvedValue(true as any)
+    })
+
+    it("IE-14: should keep local-only states and reset stars", async () => {
+      mockEnhancedSettings.get.mockResolvedValue({
+        commandExecutionCount: 10,
+        hasShownReviewRequest: true,
+        hasDismissedPromptHistoryBanner: true,
+        hasShownHubShareToast: true,
+        hasShownOnboarding: true,
+      } as any)
+      const importJson = {
+        folders: [{ id: "f1" }],
+        commandExecutionCount: 999,
+        hasShownOnboarding: false,
+        stars: [{ id: "s1" }],
+      } as any
+
+      await importSettings(importJson)
+
+      const expected = {
+        folders: [{ id: "f1" }],
+        commandExecutionCount: 10,
+        hasShownReviewRequest: true,
+        hasDismissedPromptHistoryBanner: true,
+        hasShownHubShareToast: true,
+        hasShownOnboarding: true,
+        stars: [],
+      }
+      expect(mockMigrate).toHaveBeenCalledWith(expected)
+      expect(mockSettings.set).toHaveBeenCalledWith({
+        ...expected,
+        migrated: true,
+      })
+    })
+
+    it("IE-15: should use default values when local states are undefined", async () => {
+      mockEnhancedSettings.get.mockResolvedValue({} as any)
+
+      await importSettings({ folders: [] } as any)
+
+      expect(mockMigrate).toHaveBeenCalledWith({
+        folders: [],
+        commandExecutionCount: 0,
+        hasShownReviewRequest: false,
+        hasDismissedPromptHistoryBanner: false,
+        hasShownHubShareToast: false,
+        hasShownOnboarding: false,
+        stars: [],
+      })
+    })
+
+    it("IE-16: should propagate migrate error without saving", async () => {
+      mockEnhancedSettings.get.mockResolvedValue({} as any)
+      mockMigrate.mockRejectedValue(new Error("migrate failed"))
+
+      await expect(importSettings({} as any)).rejects.toThrow("migrate failed")
+      expect(mockSettings.set).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("checkBackupStatus", () => {
+    const backup = (commandCount: number, folders?: unknown) => ({
+      version: "1.0.0",
+      timestamp: 1700000000000,
+      commands: Array.from({ length: commandCount }, (_, i) => ({
+        id: `${i}`,
+      })),
+      folders,
+    })
+
+    it("IE-17: should return AVAILABLE with info for existing backups", async () => {
+      mockStorage.get.mockResolvedValue(backup(3, [{ id: "f1" }]))
+      backupMocks.daily.getLastBackupData.mockResolvedValue(backup(2, []))
+      backupMocks.weekly.getLastBackupData.mockResolvedValue(backup(1))
+
+      const result = await checkBackupStatus()
+
+      expect(mockStorage.get).toHaveBeenCalledWith(
+        LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
+      )
+      expect(result).toEqual({
+        [BACKUP_TYPES.LEGACY]: entry(AVAILABLE, {
+          timestamp: 1700000000000,
+          commandCount: 3,
+          folderCount: 1,
+        }),
+        [BACKUP_TYPES.DAILY]: entry(AVAILABLE, {
+          timestamp: 1700000000000,
+          commandCount: 2,
+          folderCount: 0,
+        }),
+        [BACKUP_TYPES.WEEKLY]: entry(AVAILABLE, {
+          timestamp: 1700000000000,
+          commandCount: 1,
+          folderCount: 0,
+        }),
+      })
+    })
+
+    it("IE-18: should return NONE for missing or invalid backups", async () => {
+      mockStorage.get.mockResolvedValue({ commands: "invalid" })
+      backupMocks.daily.getLastBackupData.mockResolvedValue(null)
+      backupMocks.weekly.getLastBackupData.mockResolvedValue(undefined)
+
+      const result = await checkBackupStatus()
+
+      expect(result).toEqual(statusMap(NONE, NONE, NONE))
+    })
+
+    it("IE-19: should treat empty commands array as AVAILABLE", async () => {
+      mockStorage.get.mockResolvedValue(backup(0))
+      backupMocks.daily.getLastBackupData.mockResolvedValue(null)
+      backupMocks.weekly.getLastBackupData.mockResolvedValue(null)
+
+      const result = await checkBackupStatus()
+
+      expect(result[BACKUP_TYPES.LEGACY].status).toBe(AVAILABLE)
+      expect(result[BACKUP_TYPES.LEGACY].info?.commandCount).toBe(0)
+    })
+
+    it("IE-20: should return NONE for all when an error occurs", async () => {
+      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+      mockStorage.get.mockRejectedValue(new Error("storage error"))
+
+      const result = await checkBackupStatus()
+
+      expect(result).toEqual(statusMap(NONE, NONE, NONE))
+      expect(consoleSpy).toHaveBeenCalled()
+      consoleSpy.mockRestore()
+    })
+  })
+
+  describe("getDefaultBackupType", () => {
+    it.each([
+      [statusMap(AVAILABLE, AVAILABLE, AVAILABLE), BACKUP_TYPES.LEGACY],
+      [statusMap(NONE, AVAILABLE, AVAILABLE), BACKUP_TYPES.DAILY],
+      [statusMap(NONE, NONE, AVAILABLE), BACKUP_TYPES.WEEKLY],
+      [statusMap(NONE, NONE, NONE), undefined],
+      [statusMap(CHECKING, CHECKING, CHECKING), undefined],
+    ])("IE-21: should pick the first available type (%#)", (map, expected) => {
+      expect(getDefaultBackupType(map)).toBe(expected)
+    })
+  })
+
+  describe("isCheckingBackups", () => {
+    it("IE-22: should be true only when all backups are CHECKING", () => {
+      expect(isCheckingBackups(statusMap(CHECKING, CHECKING, CHECKING))).toBe(
+        true,
+      )
+      expect(isCheckingBackups(statusMap(CHECKING, NONE, CHECKING))).toBe(false)
+      expect(isCheckingBackups(statusMap(NONE, NONE, NONE))).toBe(false)
+    })
+  })
+
+  describe("hasAvailableBackup", () => {
+    it("IE-23: should be true when any backup is AVAILABLE", () => {
+      expect(hasAvailableBackup(statusMap(NONE, NONE, AVAILABLE))).toBe(true)
+      expect(hasAvailableBackup(statusMap(NONE, NONE, NONE))).toBe(false)
+      expect(hasAvailableBackup(statusMap(CHECKING, CHECKING, CHECKING))).toBe(
+        false,
+      )
+    })
+  })
+
+  describe("getAvailableBackups", () => {
+    it("IE-24: should return only available backups with legacy at the bottom", () => {
+      const result = getAvailableBackups(
+        statusMap(AVAILABLE, AVAILABLE, AVAILABLE),
+      )
+      expect(result.map(([type]) => type)).toEqual([
+        BACKUP_TYPES.DAILY,
+        BACKUP_TYPES.WEEKLY,
+        BACKUP_TYPES.LEGACY,
+      ])
+    })
+
+    it("IE-25: should exclude unavailable backups", () => {
+      const result = getAvailableBackups(statusMap(AVAILABLE, NONE, CHECKING))
+      expect(result).toEqual([[BACKUP_TYPES.LEGACY, entry(AVAILABLE)]])
+    })
+
+    it("IE-26: should return empty array when nothing is available", () => {
+      expect(getAvailableBackups(statusMap(NONE, NONE, NONE))).toEqual([])
+    })
+  })
+
+  describe("restoreFromBackup", () => {
+    const commands = [{ id: "c1" }, { id: "c2" }]
+    const folders = [{ id: "f1" }]
+
+    beforeEach(() => {
+      mockEnhancedSettings.get.mockResolvedValue({
+        folders: [{ id: "old" }],
+        other: "value",
+      } as any)
+      mockSettings.set.mockResolvedValue(true as any)
+      mockStorage.setCommands.mockResolvedValue(true as any)
+    })
+
+    it.each([
+      [BACKUP_TYPES.LEGACY, backupMocks.legacy],
+      [BACKUP_TYPES.DAILY, backupMocks.daily],
+      [BACKUP_TYPES.WEEKLY, backupMocks.weekly],
+    ] as const)(
+      "IE-27: should restore from the %s backup manager",
+      async (type, manager) => {
+        manager.restoreFromBackup.mockResolvedValue({ commands, folders })
+
+        const result = await restoreFromBackup(type)
+
+        expect(result).toBe(true)
+        expect(manager.restoreFromBackup).toHaveBeenCalledTimes(1)
+        expect(mockSettings.set).toHaveBeenCalledWith({
+          folders,
+          other: "value",
+        })
+        expect(mockStorage.setCommands).toHaveBeenCalledWith(commands)
+      },
+    )
+
+    it("IE-28: should not update folders when backup has no folders", async () => {
+      backupMocks.daily.restoreFromBackup.mockResolvedValue({
+        commands,
+        folders: [],
+      })
+
+      const result = await restoreFromBackup(BACKUP_TYPES.DAILY)
+
+      expect(result).toBe(true)
+      expect(mockSettings.set).not.toHaveBeenCalled()
+      expect(mockStorage.setCommands).toHaveBeenCalledWith(commands)
+    })
+
+    it("IE-29: should return false without saving commands when backup has no commands", async () => {
+      backupMocks.weekly.restoreFromBackup.mockResolvedValue({
+        commands: [],
+        folders: [],
+      })
+
+      const result = await restoreFromBackup(BACKUP_TYPES.WEEKLY)
+
+      expect(result).toBe(false)
+      expect(mockStorage.setCommands).not.toHaveBeenCalled()
+    })
+
+    it("IE-30: should propagate errors", async () => {
+      backupMocks.legacy.restoreFromBackup.mockResolvedValue({
+        commands,
+        folders: [],
+      })
+      mockStorage.setCommands.mockRejectedValue(new Error("save failed"))
+
+      await expect(restoreFromBackup(BACKUP_TYPES.LEGACY)).rejects.toThrow(
+        "save failed",
+      )
+    })
+  })
+})
diff --git a/packages/extension/src/services/settings/importExport.ts b/packages/extension/src/services/settings/importExport.ts
new file mode 100644
index 00000000..7db89e1d
--- /dev/null
+++ b/packages/extension/src/services/settings/importExport.ts
@@ -0,0 +1,266 @@
+import type { UserSettings, Caches, ShortcutSettings } from "@/types"
+import { Storage, STORAGE_KEY, LOCAL_STORAGE_KEY } from "@/services/storage"
+import {
+  DailyBackupManager,
+  WeeklyBackupManager,
+  LegacyBackupManager,
+} from "@/services/storage/backupManager"
+import type {
+  BackupData,
+  BaseBackupManager,
+} from "@/services/storage/backupManager"
+import { Settings, migrate } from "@/services/settings/settings"
+import { enhancedSettings } from "@/services/settings/enhancedSettings"
+import { CACHE_SECTIONS } from "@/services/settings/settingsCache"
+import { isBase64, isUrl } from "@/lib/utils"
+import { APP_ID } from "@/const"
+
+// Backup type constants
+export const BACKUP_TYPES = {
+  LEGACY: "legacy",
+  DAILY: "daily",
+  WEEKLY: "weekly",
+} as const
+
+// Backup status constants
+export const BACKUP_STATUS = {
+  CHECKING: "checking",
+  AVAILABLE: "available",
+  NONE: "none",
+} as const
+
+export type BackupType = (typeof BACKUP_TYPES)[keyof typeof BACKUP_TYPES]
+export type BackupStatus = (typeof BACKUP_STATUS)[keyof typeof BACKUP_STATUS]
+
+export type BackupInfo = {
+  timestamp: number
+  commandCount: number
+  folderCount?: number
+}
+
+export type BackupEntry = {
+  status: BackupStatus
+  info: BackupInfo | null
+}
+
+export type BackupStatusMap = Record<BackupType, BackupEntry>
+
+// Order used to pick the default backup selection.
+const BACKUP_PRIORITY: BackupType[] = [
+  BACKUP_TYPES.LEGACY,
+  BACKUP_TYPES.DAILY,
+  BACKUP_TYPES.WEEKLY,
+]
+
+const createBackupStatusMap = (status: BackupStatus): BackupStatusMap => ({
+  [BACKUP_TYPES.LEGACY]: { status, info: null },
+  [BACKUP_TYPES.DAILY]: { status, info: null },
+  [BACKUP_TYPES.WEEKLY]: { status, info: null },
+})
+
+export const INITIAL_BACKUP_STATUS: BackupStatusMap = createBackupStatusMap(
+  BACKUP_STATUS.CHECKING,
+)
+
+export function getTimestamp(date = new Date()): string {
+  const year = date.getFullYear()
+  const month = (date.getMonth() + 1).toString().padStart(2, "0")
+  const day = date.getDate().toString().padStart(2, "0")
+  const hours = date.getHours().toString().padStart(2, "0")
+  const minutes = date.getMinutes().toString().padStart(2, "0")
+  return `${year}${month}${day}_${hours}${minutes}`
+}
+
+/**
+ * Reset all settings to default.
+ */
+export async function resetSettings(): Promise<void> {
+  await Settings.reset()
+}
+
+/**
+ * Build the settings data to be exported.
+ */
+export async function buildExportData(): Promise<UserSettings> {
+  const data = await Storage.get<UserSettings>(STORAGE_KEY.USER)
+  data.commands = await Storage.getCommands()
+  data.shortcuts = await Storage.get<ShortcutSettings>(STORAGE_KEY.SHORTCUTS)
+
+  // for back compatibility
+  // cache key to image data url
+  const caches = (await enhancedSettings.getSection(
+    CACHE_SECTIONS.CACHES,
+    true,
+  )) as Caches
+  for (const c of data.commands) {
+    if (!c.iconUrl) continue
+    if (isBase64(c.iconUrl) || isUrl(c.iconUrl)) continue
+    if (caches?.images?.[c.iconUrl]) {
+      c.iconUrl = caches.images[c.iconUrl]
+    }
+  }
+  return data
+}
+
+/**
+ * Export settings and download them as a json file.
+ */
+export async function exportSettings(): Promise<void> {
+  const data = await buildExportData()
+  const text = JSON.stringify(data, null, 2)
+  const blob = new Blob([text], { type: "text/plain" })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement("a")
+  document.body.appendChild(a)
+  a.download = `${APP_ID}_${getTimestamp()}.json`
+  a.href = url
+  a.click()
+  a.remove()
+  URL.revokeObjectURL(url)
+}
+
+/**
+ * Read a settings json file.
+ */
+export function readSettingsFile(file: File): Promise<UserSettings> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      if (e.target == null) return
+      try {
+        resolve(JSON.parse(e.target.result as string))
+      } catch (error) {
+        reject(error)
+      }
+    }
+    reader.onerror = () => reject(reader.error)
+    reader.readAsText(file)
+  })
+}
+
+/**
+ * Import settings, keeping the user's local-only states.
+ */
+export async function importSettings(importJson: UserSettings): Promise<void> {
+  const {
+    commandExecutionCount = 0,
+    hasShownReviewRequest = false,
+    hasDismissedPromptHistoryBanner = false,
+    hasShownHubShareToast = false,
+    hasShownOnboarding = false,
+  } = await enhancedSettings.get()
+  const data = await migrate({
+    ...importJson,
+    commandExecutionCount,
+    hasShownReviewRequest,
+    hasDismissedPromptHistoryBanner,
+    hasShownHubShareToast,
+    hasShownOnboarding,
+    stars: [],
+  })
+  await Settings.set(data)
+}
+
+const toBackupEntry = (backup: BackupData | null | undefined): BackupEntry => {
+  if (backup && backup.commands && Array.isArray(backup.commands)) {
+    return {
+      status: BACKUP_STATUS.AVAILABLE,
+      info: {
+        timestamp: backup.timestamp,
+        commandCount: backup.commands.length,
+        folderCount: Array.isArray(backup.folders) ? backup.folders.length : 0,
+      },
+    }
+  }
+  return { status: BACKUP_STATUS.NONE, info: null }
+}
+
+/**
+ * Check the status of each backup.
+ */
+export async function checkBackupStatus(): Promise<BackupStatusMap> {
+  try {
+    const legacyBackup = await Storage.get<BackupData>(
+      LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
+    )
+    const dailyBackup = await new DailyBackupManager().getLastBackupData()
+    const weeklyBackup = await new WeeklyBackupManager().getLastBackupData()
+    return {
+      [BACKUP_TYPES.LEGACY]: toBackupEntry(legacyBackup),
+      [BACKUP_TYPES.DAILY]: toBackupEntry(dailyBackup),
+      [BACKUP_TYPES.WEEKLY]: toBackupEntry(weeklyBackup),
+    }
+  } catch (error) {
+    console.error("Failed to check backup status:", error)
+    return createBackupStatusMap(BACKUP_STATUS.NONE)
+  }
+}
+
+/**
+ * Get the first available backup type, or undefined if none is available.
+ */
+export function getDefaultBackupType(
+  statusMap: BackupStatusMap,
+): BackupType | undefined {
+  return BACKUP_PRIORITY.find(
+    (type) => statusMap[type].status === BACKUP_STATUS.AVAILABLE,
+  )
+}
+
+export function isCheckingBackups(statusMap: BackupStatusMap): boolean {
+  return Object.values(statusMap).every(
+    (backup) => backup.status === BACKUP_STATUS.CHECKING,
+  )
+}
+
+export function hasAvailableBackup(statusMap: BackupStatusMap): boolean {
+  return Object.values(statusMap).some(
+    (backup) => backup.status === BACKUP_STATUS.AVAILABLE,
+  )
+}
+
+/**
+ * Get available backups, with legacy placed at the bottom.
+ */
+export function getAvailableBackups(
+  statusMap: BackupStatusMap,
+): Array<[BackupType, BackupEntry]> {
+  return (Object.entries(statusMap) as Array<[BackupType, BackupEntry]>)
+    .filter(([, backup]) => backup.status === BACKUP_STATUS.AVAILABLE)
+    .sort(([typeA], [typeB]) => {
+      if (typeA === BACKUP_TYPES.LEGACY) return 1
+      if (typeB === BACKUP_TYPES.LEGACY) return -1
+      return 0
+    })
+}
+
+const createBackupManager = (type: BackupType): BaseBackupManager => {
+  switch (type) {
+    case BACKUP_TYPES.LEGACY:
+      return new LegacyBackupManager()
+    case BACKUP_TYPES.DAILY:
+      return new DailyBackupManager()
+    case BACKUP_TYPES.WEEKLY:
+      return new WeeklyBackupManager()
+  }
+}
+
+/**
+ * Restore commands and folders from the specified backup.
+ * @returns true if commands were restored, false if the backup has no commands.
+ */
+export async function restoreFromBackup(type: BackupType): Promise<boolean> {
+  const data = await createBackupManager(type).restoreFromBackup()
+
+  if (data.folders && data.folders.length > 0) {
+    const currentSettings = await enhancedSettings.get()
+    await Settings.set({
+      ...currentSettings,
+      folders: data.folders,
+    })
+  }
+
+  if (data.commands.length === 0) return false
+  await Storage.setCommands(data.commands)
+  return true
+}

From 2cbdb13db06b06fed5b79228c57aabc1ddf95ade Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Wed, 23 Sep 2026 08:54:24 +0900
Subject: [PATCH 3/6] fix: hide backups without commands from restore options

Backups with an empty commands array were shown as restorable but
always failed to restore. Treat them as unavailable instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/services/settings/importExport.test.ts     | 14 ++++++++------
 .../src/services/settings/importExport.ts          |  3 ++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/extension/src/services/settings/importExport.test.ts b/packages/extension/src/services/settings/importExport.test.ts
index bd2f2fd1..80a6dfc9 100644
--- a/packages/extension/src/services/settings/importExport.test.ts
+++ b/packages/extension/src/services/settings/importExport.test.ts
@@ -387,15 +387,17 @@ describe("importExport", () => {
       expect(result).toEqual(statusMap(NONE, NONE, NONE))
     })
 
-    it("IE-19: should treat empty commands array as AVAILABLE", async () => {
-      mockStorage.get.mockResolvedValue(backup(0))
-      backupMocks.daily.getLastBackupData.mockResolvedValue(null)
-      backupMocks.weekly.getLastBackupData.mockResolvedValue(null)
+    it("IE-19: should treat empty commands array as NONE", async () => {
+      mockStorage.get.mockResolvedValue(backup(0, [{ id: "f1" }]))
+      backupMocks.daily.getLastBackupData.mockResolvedValue(backup(0))
+      backupMocks.weekly.getLastBackupData.mockResolvedValue(backup(1))
 
       const result = await checkBackupStatus()
 
-      expect(result[BACKUP_TYPES.LEGACY].status).toBe(AVAILABLE)
-      expect(result[BACKUP_TYPES.LEGACY].info?.commandCount).toBe(0)
+      expect(result[BACKUP_TYPES.LEGACY]).toEqual(entry(NONE))
+      expect(result[BACKUP_TYPES.DAILY]).toEqual(entry(NONE))
+      expect(result[BACKUP_TYPES.WEEKLY].status).toBe(AVAILABLE)
+      expect(getDefaultBackupType(result)).toBe(BACKUP_TYPES.WEEKLY)
     })
 
     it("IE-20: should return NONE for all when an error occurs", async () => {
diff --git a/packages/extension/src/services/settings/importExport.ts b/packages/extension/src/services/settings/importExport.ts
index 7db89e1d..84afbcb6 100644
--- a/packages/extension/src/services/settings/importExport.ts
+++ b/packages/extension/src/services/settings/importExport.ts
@@ -162,7 +162,8 @@ export async function importSettings(importJson: UserSettings): Promise<void> {
 }
 
 const toBackupEntry = (backup: BackupData | null | undefined): BackupEntry => {
-  if (backup && backup.commands && Array.isArray(backup.commands)) {
+  // A backup without commands cannot be restored, so treat it as NONE.
+  if (backup && Array.isArray(backup.commands) && backup.commands.length > 0) {
     return {
       status: BACKUP_STATUS.AVAILABLE,
       info: {

From dd127a90f9fc47189464d270574d8812365da42b Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Wed, 23 Sep 2026 09:20:42 +0900
Subject: [PATCH 4/6] fix: keep sync storage writes queued during an in-flight
 write

debouncedSyncSet cleared the pending buffer and resolved all waiting
promises when a write completed, so data added while chrome.storage.sync.set
was in flight was silently dropped. Detach the batch when the write starts
and serialize writes so later batches land after earlier ones.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/services/storage/index.test.ts        | 89 +++++++++++++++++++
 .../extension/src/services/storage/index.ts   | 42 ++++++---
 2 files changed, 117 insertions(+), 14 deletions(-)

diff --git a/packages/extension/src/services/storage/index.test.ts b/packages/extension/src/services/storage/index.test.ts
index 0292ca88..4b1884fb 100644
--- a/packages/extension/src/services/storage/index.test.ts
+++ b/packages/extension/src/services/storage/index.test.ts
@@ -207,6 +207,95 @@ describe("debouncedSyncSet", () => {
       )
     })
   })
+
+  describe("Calls during an in-flight write", () => {
+    // Make sync.set hold its callback until the test completes it manually.
+    const deferSyncSet = () => {
+      const callbacks: (() => void)[] = []
+      mockChromeStorageSync.set.mockImplementation((_data, callback) => {
+        callbacks.push(callback)
+      })
+      return callbacks
+    }
+
+    afterEach(() => {
+      mockChromeStorageSync.set.mockImplementation((_data, callback) => {
+        callback?.()
+      })
+    })
+
+    it("DS-10: Keep data added during a write for the next write", async () => {
+      const callbacks = deferSyncSet()
+
+      const promise1 = debouncedSyncSet({ key1: "value1" })
+      await vi.advanceTimersByTimeAsync(10)
+      expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(1)
+
+      // Add data while the first write is in flight
+      const promise2 = debouncedSyncSet({ key2: "value2" })
+      callbacks[0]()
+      await promise1
+
+      await vi.advanceTimersByTimeAsync(10)
+      expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(2)
+      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(
+        2,
+        { key2: "value2" },
+        expect.any(Function),
+      )
+
+      callbacks[1]()
+      await promise2
+    })
+
+    it("DS-11: Do not resolve a call until its own data is written", async () => {
+      const callbacks = deferSyncSet()
+
+      const promise1 = debouncedSyncSet({ key1: "value1" })
+      await vi.advanceTimersByTimeAsync(10)
+
+      let resolved2 = false
+      const promise2 = debouncedSyncSet({ key2: "value2" }).then(() => {
+        resolved2 = true
+      })
+
+      // Completing the first write must not resolve the second call
+      callbacks[0]()
+      await promise1
+      await vi.advanceTimersByTimeAsync(0)
+      expect(resolved2).toBe(false)
+
+      await vi.advanceTimersByTimeAsync(10)
+      callbacks[1]()
+      await promise2
+      expect(resolved2).toBe(true)
+    })
+
+    it("DS-12: Start the next write only after the previous one completes", async () => {
+      const callbacks = deferSyncSet()
+
+      const promise1 = debouncedSyncSet({ key1: "value1" })
+      await vi.advanceTimersByTimeAsync(10)
+
+      // The next batch's timer fires while the first write is still in flight
+      const promise2 = debouncedSyncSet({ key1: "value2" })
+      await vi.advanceTimersByTimeAsync(10)
+      expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(1)
+
+      callbacks[0]()
+      await promise1
+      await vi.advanceTimersByTimeAsync(0)
+      expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(2)
+      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(
+        2,
+        { key1: "value2" },
+        expect.any(Function),
+      )
+
+      callbacks[1]()
+      await promise2
+    })
+  })
 })
 
 describe("BaseStorage.get", () => {
diff --git a/packages/extension/src/services/storage/index.ts b/packages/extension/src/services/storage/index.ts
index b8e9b6a8..2ce7f945 100644
--- a/packages/extension/src/services/storage/index.ts
+++ b/packages/extension/src/services/storage/index.ts
@@ -11,15 +11,40 @@ import {
 
 const SYNC_DEBOUNCE_DELAY = 10
 
-let syncSetTimeout: NodeJS.Timeout | null
+let syncSetTimeout: NodeJS.Timeout | null = null
 let syncSetResolves: (() => void)[] = []
-const syncSetData = new Map<string, unknown>()
+let syncSetData = new Map<string, unknown>()
+// Serializes writes so that a later batch never lands before an earlier one.
+let syncSetLastWrite: Promise<void> = Promise.resolve()
 
 export const cmdSyncKey = (idx: number): CMD_KEY => `${CMD_PREFIX}${idx}`
 
 export const cmdLocalKey = (idx: number): CMD_LOCAL_KEY =>
   `${CMD_PREFIX}local-${idx}`
 
+const flushSyncSet = () => {
+  // Detach the current batch so that data added during the write
+  // is kept for the next batch instead of being cleared.
+  const dataToSet = Object.fromEntries(syncSetData)
+  const resolves = syncSetResolves
+  syncSetData = new Map()
+  syncSetResolves = []
+  syncSetTimeout = null
+
+  syncSetLastWrite = syncSetLastWrite.then(
+    () =>
+      new Promise<void>((done) => {
+        chrome.storage.sync.set(dataToSet, () => {
+          if (chrome.runtime.lastError != null) {
+            console.error(chrome.runtime.lastError)
+          }
+          resolves.forEach((res) => res())
+          done()
+        })
+      }),
+  )
+}
+
 export const debouncedSyncSet = (
   data: Record<string, unknown>,
 ): Promise<void> => {
@@ -32,19 +57,8 @@ export const debouncedSyncSet = (
       syncSetData.set(key, value)
     })
 
-    syncSetTimeout = setTimeout(async () => {
-      const dataToSet = Object.fromEntries(syncSetData)
-      chrome.storage.sync.set(dataToSet, () => {
-        if (chrome.runtime.lastError != null) {
-          console.error(chrome.runtime.lastError)
-        }
-        syncSetData.clear()
-        syncSetTimeout = null
-        syncSetResolves.forEach((res) => res())
-        syncSetResolves = []
-      })
-    }, SYNC_DEBOUNCE_DELAY)
     syncSetResolves.push(resolve)
+    syncSetTimeout = setTimeout(flushSyncSet, SYNC_DEBOUNCE_DELAY)
   })
 }
 

From 06ed6f03f2f8206db2bbc7ea2290e9fb82817160 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Wed, 23 Sep 2026 15:18:15 +0900
Subject: [PATCH 5/6] refactor: use promise-based chrome.storage.sync.set in
 debouncedSyncSet

Replace the callback API with async/await. Errors are caught and
logged so waiting callers still resolve and the write chain keeps
running after a failed write.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/services/storage/index.test.ts        | 113 ++++++++++--------
 .../extension/src/services/storage/index.ts   |  27 +++--
 2 files changed, 76 insertions(+), 64 deletions(-)

diff --git a/packages/extension/src/services/storage/index.test.ts b/packages/extension/src/services/storage/index.test.ts
index 4b1884fb..5c42e31c 100644
--- a/packages/extension/src/services/storage/index.test.ts
+++ b/packages/extension/src/services/storage/index.test.ts
@@ -2,9 +2,7 @@ import { beforeEach, afterEach, describe, it, expect, vi } from "vitest"
 
 // Mock Chrome API
 const mockChromeStorageSync = {
-  set: vi.fn().mockImplementation((_data, callback) => {
-    callback?.()
-  }),
+  set: vi.fn().mockResolvedValue(undefined),
 }
 
 const mockChromeStorageLocal = {
@@ -61,10 +59,7 @@ describe("debouncedSyncSet", () => {
       await promise
 
       expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(1)
-      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(
-        testData,
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(testData)
     })
 
     it("DS-02: Debounce with multiple consecutive calls", async () => {
@@ -78,10 +73,11 @@ describe("debouncedSyncSet", () => {
 
       // Verify it's called only once
       expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(1)
-      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(
-        { key1: "value1", key2: "value2", key3: "value3" },
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenCalledWith({
+        key1: "value1",
+        key2: "value2",
+        key3: "value3",
+      })
     })
 
     it("DS-03: Data merge operation", async () => {
@@ -95,10 +91,10 @@ describe("debouncedSyncSet", () => {
       vi.advanceTimersByTime(10)
       await Promise.all([promise1, promise2, promise3])
 
-      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(
-        { key1: "updated_value1", key2: "value2" },
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenCalledWith({
+        key1: "updated_value1",
+        key2: "value2",
+      })
     })
   })
 
@@ -118,9 +114,8 @@ describe("debouncedSyncSet", () => {
 
     it("DS-05: Error handling", async () => {
       const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
-
-      // Set Chrome runtime error
-      mockChromeRuntime.lastError = { message: "Storage error" }
+      const error = new Error("Storage error")
+      mockChromeStorageSync.set.mockRejectedValueOnce(error)
 
       const promise = debouncedSyncSet({ key1: "value1" })
       vi.advanceTimersByTime(10)
@@ -129,7 +124,29 @@ describe("debouncedSyncSet", () => {
       await expect(promise).resolves.toBeUndefined()
 
       // Verify error is logged to console
-      expect(consoleSpy).toHaveBeenCalledWith({ message: "Storage error" })
+      expect(consoleSpy).toHaveBeenCalledWith(error)
+
+      consoleSpy.mockRestore()
+    })
+
+    it("DS-13: Keep writing after a failed write", async () => {
+      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+      mockChromeStorageSync.set.mockRejectedValueOnce(
+        new Error("Storage error"),
+      )
+
+      const promise1 = debouncedSyncSet({ key1: "value1" })
+      vi.advanceTimersByTime(10)
+      await promise1
+
+      const promise2 = debouncedSyncSet({ key2: "value2" })
+      vi.advanceTimersByTime(10)
+      await promise2
+
+      expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(2)
+      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(2, {
+        key2: "value2",
+      })
 
       consoleSpy.mockRestore()
     })
@@ -149,10 +166,11 @@ describe("debouncedSyncSet", () => {
       // Verify all Promises resolve successfully
       expect(promises).toEqual([undefined, undefined, undefined])
       expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(1)
-      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(
-        { key1: "value1", key2: "value2", key3: "value3" },
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenCalledWith({
+        key1: "value1",
+        key2: "value2",
+        key3: "value3",
+      })
     })
 
     it("DS-07: Internal state cleanup", async () => {
@@ -167,11 +185,9 @@ describe("debouncedSyncSet", () => {
       await promise2
 
       expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(2)
-      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(
-        2,
-        { key2: "value2" },
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(2, {
+        key2: "value2",
+      })
     })
   })
 
@@ -182,10 +198,7 @@ describe("debouncedSyncSet", () => {
       vi.advanceTimersByTime(10)
       await promise
 
-      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(
-        {},
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenCalledWith({})
     })
 
     it("DS-09: Additional calls during timeout", async () => {
@@ -201,27 +214,25 @@ describe("debouncedSyncSet", () => {
 
       // Verify called only once and both data are merged
       expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(1)
-      expect(mockChromeStorageSync.set).toHaveBeenCalledWith(
-        { key1: "value1", key2: "value2" },
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenCalledWith({
+        key1: "value1",
+        key2: "value2",
+      })
     })
   })
 
   describe("Calls during an in-flight write", () => {
-    // Make sync.set hold its callback until the test completes it manually.
+    // Make sync.set stay pending until the test completes it manually.
     const deferSyncSet = () => {
       const callbacks: (() => void)[] = []
-      mockChromeStorageSync.set.mockImplementation((_data, callback) => {
-        callbacks.push(callback)
-      })
+      mockChromeStorageSync.set.mockImplementation(
+        () => new Promise<void>((resolve) => callbacks.push(resolve)),
+      )
       return callbacks
     }
 
     afterEach(() => {
-      mockChromeStorageSync.set.mockImplementation((_data, callback) => {
-        callback?.()
-      })
+      mockChromeStorageSync.set.mockResolvedValue(undefined)
     })
 
     it("DS-10: Keep data added during a write for the next write", async () => {
@@ -238,11 +249,9 @@ describe("debouncedSyncSet", () => {
 
       await vi.advanceTimersByTimeAsync(10)
       expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(2)
-      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(
-        2,
-        { key2: "value2" },
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(2, {
+        key2: "value2",
+      })
 
       callbacks[1]()
       await promise2
@@ -286,11 +295,9 @@ describe("debouncedSyncSet", () => {
       await promise1
       await vi.advanceTimersByTimeAsync(0)
       expect(mockChromeStorageSync.set).toHaveBeenCalledTimes(2)
-      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(
-        2,
-        { key1: "value2" },
-        expect.any(Function),
-      )
+      expect(mockChromeStorageSync.set).toHaveBeenNthCalledWith(2, {
+        key1: "value2",
+      })
 
       callbacks[1]()
       await promise2
diff --git a/packages/extension/src/services/storage/index.ts b/packages/extension/src/services/storage/index.ts
index 2ce7f945..d4b58281 100644
--- a/packages/extension/src/services/storage/index.ts
+++ b/packages/extension/src/services/storage/index.ts
@@ -22,6 +22,19 @@ export const cmdSyncKey = (idx: number): CMD_KEY => `${CMD_PREFIX}${idx}`
 export const cmdLocalKey = (idx: number): CMD_LOCAL_KEY =>
   `${CMD_PREFIX}local-${idx}`
 
+const writeSyncBatch = async (
+  data: Record<string, unknown>,
+  resolves: (() => void)[],
+) => {
+  try {
+    await chrome.storage.sync.set(data)
+  } catch (error) {
+    console.error(error)
+  } finally {
+    resolves.forEach((res) => res())
+  }
+}
+
 const flushSyncSet = () => {
   // Detach the current batch so that data added during the write
   // is kept for the next batch instead of being cleared.
@@ -31,17 +44,9 @@ const flushSyncSet = () => {
   syncSetResolves = []
   syncSetTimeout = null
 
-  syncSetLastWrite = syncSetLastWrite.then(
-    () =>
-      new Promise<void>((done) => {
-        chrome.storage.sync.set(dataToSet, () => {
-          if (chrome.runtime.lastError != null) {
-            console.error(chrome.runtime.lastError)
-          }
-          resolves.forEach((res) => res())
-          done()
-        })
-      }),
+  // writeSyncBatch never rejects, so the chain keeps running after a failure.
+  syncSetLastWrite = syncSetLastWrite.then(() =>
+    writeSyncBatch(dataToSet, resolves),
   )
 }
 

From 4fd69a72f09786306640ec9580105bc0c23e6fa8 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Wed, 23 Sep 2026 15:20:44 +0900
Subject: [PATCH 6/6] fix: notify the user when the selected settings file
 cannot be read

An invalid JSON file caused an unhandled rejection with no feedback.
Catch the error, alert the user and clear the previously selected
file so it is not imported by mistake.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/hooks/option/useImportExport.test.ts  | 82 +++++++++++++++++++
 .../src/hooks/option/useImportExport.ts       |  9 +-
 2 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 packages/extension/src/hooks/option/useImportExport.test.ts

diff --git a/packages/extension/src/hooks/option/useImportExport.test.ts b/packages/extension/src/hooks/option/useImportExport.test.ts
new file mode 100644
index 00000000..36312e27
--- /dev/null
+++ b/packages/extension/src/hooks/option/useImportExport.test.ts
@@ -0,0 +1,82 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import { renderHook, waitFor, act } from "@testing-library/react"
+import { useImportExport } from "./useImportExport"
+import {
+  checkBackupStatus,
+  readSettingsFile,
+  INITIAL_BACKUP_STATUS,
+} from "@/services/settings/importExport"
+
+vi.mock("@/services/settings/importExport", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@/services/settings/importExport")>()
+  return {
+    ...actual,
+    checkBackupStatus: vi.fn(),
+    readSettingsFile: vi.fn(),
+  }
+})
+
+const mockCheckBackupStatus = vi.mocked(checkBackupStatus)
+const mockReadSettingsFile = vi.mocked(readSettingsFile)
+
+describe("useImportExport", () => {
+  let alertSpy: ReturnType<typeof vi.spyOn>
+  let consoleSpy: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockCheckBackupStatus.mockResolvedValue(INITIAL_BACKUP_STATUS)
+    alertSpy = vi.spyOn(window, "alert").mockImplementation(() => {})
+    consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    alertSpy.mockRestore()
+    consoleSpy.mockRestore()
+  })
+
+  const renderImportExport = async () => {
+    const hook = renderHook(() => useImportExport())
+    await waitFor(() => expect(mockCheckBackupStatus).toHaveBeenCalled())
+    return hook
+  }
+
+  describe("selectImportFile", () => {
+    it("UIE-01: should set importJson when the file is valid", async () => {
+      const json = { folders: [] } as any
+      mockReadSettingsFile.mockResolvedValue(json)
+      const { result } = await renderImportExport()
+
+      await act(() => result.current.selectImportFile(new File([""], "a.json")))
+
+      expect(result.current.importJson).toBe(json)
+      expect(alertSpy).not.toHaveBeenCalled()
+    })
+
+    it("UIE-02: should alert and not throw when the file is invalid", async () => {
+      mockReadSettingsFile.mockRejectedValue(new SyntaxError("invalid json"))
+      const { result } = await renderImportExport()
+
+      await expect(
+        act(() => result.current.selectImportFile(new File([""], "a.json"))),
+      ).resolves.not.toThrow()
+
+      expect(result.current.importJson).toBeUndefined()
+      expect(alertSpy).toHaveBeenCalledWith("Failed to read settings file.")
+    })
+
+    it("UIE-03: should clear the previous file when an invalid file is selected", async () => {
+      mockReadSettingsFile
+        .mockResolvedValueOnce({ folders: [] } as any)
+        .mockRejectedValueOnce(new SyntaxError("invalid json"))
+      const { result } = await renderImportExport()
+
+      await act(() => result.current.selectImportFile(new File([""], "a.json")))
+      expect(result.current.importJson).toBeDefined()
+
+      await act(() => result.current.selectImportFile(new File([""], "b.json")))
+      expect(result.current.importJson).toBeUndefined()
+    })
+  })
+})
diff --git a/packages/extension/src/hooks/option/useImportExport.ts b/packages/extension/src/hooks/option/useImportExport.ts
index 1132f508..e0aed135 100644
--- a/packages/extension/src/hooks/option/useImportExport.ts
+++ b/packages/extension/src/hooks/option/useImportExport.ts
@@ -41,7 +41,14 @@ export function useImportExport() {
   }
 
   const selectImportFile = async (file: File) => {
-    setImportJson(await readSettingsFile(file))
+    try {
+      setImportJson(await readSettingsFile(file))
+    } catch (error) {
+      // Clear the previously selected file so that it is not imported by mistake.
+      setImportJson(undefined)
+      console.error("Failed to read settings file:", error)
+      alert("Failed to read settings file.")
+    }
   }
 
   const runImport = async () => {