feat(settings): data-safe editors, deep-linked search, Data/About/Cost pages

- EditorModal loads once per path (a parent re-render no longer reloads the
  file over the user's typing), refuses Save after a failed load, opens a
  truncated (>256 KB) file read-only, and asks before overwriting a file
  that changed on disk or could not be re-read.
- Settings/Hooks editors unset only keys from the snapshot taken at Edit,
  warn when the file changed underneath, keep a renamed key's value, and
  refuse a new key named like a redacted one (env) or a read-only hook
  event, which used to replace the secret/hooks.
- Project scope shows its resolved folder and is disabled inside the
  plugin cache. Account-profile, pricing-row and pet deletes confirm;
  two-click actions disarm after 3 s; unsaved drafts ask before closing.
- Search indexes every Claude Code / Codex sub-tab, opens it via ?tab= and
  scrolls to + highlights the row; the active config tab is in the URL.
- General splits into General / Data / About; Pricing moves to a Cost
  group with one shared load; config tabs group as Content / Extensions /
  Config with arrow-key roving; Promise.allSettled per tab.
- Data: browser-preferences export/import (allowlisted keys), per-section
  reset, housekeeping dry-run first, clear-all behind a typed phrase.
  Server: purge days must be a whole number >= 1 (INVALID_PURGE_DAYS) and
  dry_run returns exactly what the real run would delete.
- Alerts can be edited; webhooks/alerts/remote-source failures toast;
  copies go through copyText; modals get dialog roles and useDialog.
- Sagi: Ctrl/Cmd+B only when shown and not typing, default spot clear of
  row controls, arrow keys move it, reduced motion honoured; the dead
  /run launch link goes to the workspace.

client/src/components/config/ProjectMemoryModal.tsx

@@ -8,15 +8,19 @@
  * The directory list is `GET /api/run/cwds` (the dashboard's known projects),
  * offered as suggestions on a plain text input rather than a closed dropdown:
  * a project you have never run through the dashboard is exactly the case this
- * modal exists for, so it must stay typeable.
+ * modal exists for, so it must stay typeable. Typed text is a draft: closing
+ * asks first, and it is a real dialog (focus trap, Escape).
  *
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useCallback, useEffect, useId, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BookOpen, X, Save, AlertCircle } from "lucide-react";
 import { api, type CwdSuggestion } from "../../lib/api";
+import { confirmDiscard } from "../../lib/confirm";
+import { useDialog } from "../../hooks/useDialog";
+import { useUnsavedGuard } from "../../hooks/useUnsavedGuard";
 
 interface ProjectMemoryModalProps {
   /** i18n namespace of the calling page — "ccConfig" or "codexConfig". */
@@ -55,13 +59,23 @@ export function ProjectMemoryModal({
       .catch(() => undefined);
   }, []);
 
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
+  // Typed text is a draft: closing (X, Cancel, backdrop, Escape) asks first,
+  // and Escape inside the textarea only leaves the field.
+  const dirty = dir.trim() !== "" || content !== template;
+  useUnsavedGuard(dirty);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const requestClose = useCallback(async () => {
+    if (dirty && !(await confirmDiscard())) return;
+    onClose();
+  }, [dirty, onClose]);
+  useDialog(true, panelRef, () => {
+    const el = document.activeElement;
+    if (el instanceof HTMLTextAreaElement) {
+      el.blur();
+      return;
+    }
+    void requestClose();
+  });
 
   const handleCreate = useCallback(async () => {
     const target = dir.trim();
@@ -82,22 +96,28 @@ export function ProjectMemoryModal({
 
   return (
     <div
-      className="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4"
-      onClick={onClose}
+      className="fixed inset-0 bg-surface-0/70 z-50 flex items-center justify-center p-4"
+      onClick={() => void requestClose()}
     >
       <div
+        ref={panelRef}
         role="dialog"
-        aria-label={t("projectMemory.title", { file: filename })}
+        aria-modal="true"
+        aria-labelledby={`${listId}-title`}
         className="relative w-full max-w-3xl max-h-[90vh] rounded-xl border border-border bg-surface-1 flex flex-col"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
           <BookOpen className="w-4 h-4 text-fg-muted" />
-          <span className="text-sm font-medium text-fg-primary flex-1 truncate">
+          <span
+            id={`${listId}-title`}
+            className="text-sm font-medium text-fg-primary flex-1 truncate"
+          >
             {t("projectMemory.title", { file: filename })}
           </span>
           <button
-            onClick={onClose}
+            type="button"
+            onClick={() => void requestClose()}
             className="text-fg-secondary hover:text-fg-primary p-1 rounded-md hover:bg-surface-3"
             aria-label={t("projectMemory.close")}
           >
@@ -151,7 +171,10 @@ export function ProjectMemoryModal({
           </div>
 
           {error && (
-            <div className="rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-xs text-status-danger inline-flex items-center gap-2">
+            <div
+              role="alert"
+              className="rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-xs text-status-danger inline-flex items-center gap-2"
+            >
               <AlertCircle className="w-3.5 h-3.5" />
               {error}
             </div>
@@ -160,12 +183,14 @@ export function ProjectMemoryModal({
 
         <div className="border-t border-border px-4 py-3 flex items-center justify-end gap-2">
           <button
-            onClick={onClose}
+            type="button"
+            onClick={() => void requestClose()}
             className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-border bg-surface-2 hover:bg-surface-3 text-fg-secondary"
           >
             {t("projectMemory.cancel")}
           </button>
           <button
+            type="button"
             onClick={handleCreate}
             disabled={saving}
             className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-accent/40 bg-accent/15 hover:bg-accent/25 text-accent inline-flex items-center gap-1.5 disabled:opacity-60"