feat(companion): rename Tabby companion to Sagi, replace cat avatar with mascot

Full rename across files, identifiers, CSS classes, and user-facing strings
(en/vi locales, ARCHITECTURE.md). Replaces the hand-drawn animated cat
avatar with the pig-superhero mascot artwork, split into parts to keep
per-eye cursor tracking and blink animation working; whole-mascot mood
transforms (breathe/bob/shake/tilt) and new zzz/bang/sparkle overlays
carry the rest of the mood expression since the traced art has no shared
palette to key off of.

client/src/pages/Settings.tsx

@@ -23,7 +23,7 @@
  * ## Internal dependencies
  * - `../lib/api`
  * - `../lib/eventBus`
- * - `../components/Tabby/prefs`
+ * - `../components/Sagi/prefs`
  * - `../lib/format`
  * - `../lib/push`
  * - `../components/Tip`
@@ -98,7 +98,7 @@ import {
   Settings as SettingsIcon,
   FolderOpen,
   Info,
-  Cat,
+  PiggyBank,
   History,
   ChevronLeft,
   ChevronRight,
@@ -107,7 +107,7 @@ import {
 import { api } from "../lib/api";
 import { eventBus } from "../lib/eventBus";
 import { isRemoteDataRefreshMessage } from "../lib/remoteDataEvents";
-import { tabbyPrefs } from "../components/Tabby/prefs";
+import { sagiPrefs } from "../components/Sagi/prefs";
 import { fmt, fmtCost, getCurrentLocale } from "../lib/format";
 import { subscribeToPush, unsubscribeFromPush } from "../lib/push";
 import { Tip } from "../components/Tip";
@@ -136,7 +136,7 @@ const SETTINGS_SECTIONS: {
     fallback: "Remote Data Sources",
     Icon: Cloud,
   },
-  { id: "tabby", labelKey: "tabby.title", fallback: "Tabby", Icon: Cat },
+  { id: "sagi", labelKey: "sagi.title", fallback: "Sagi", Icon: PiggyBank },
   { id: "notifications", labelKey: "notifications.title", Icon: Bell },
   { id: "alerts", labelKey: "alertsHub.title", Icon: BellRing },
   { id: "data", labelKey: "data.title", Icon: Database },
@@ -457,10 +457,10 @@ export function Settings() {
   } | null>(null);
   const [confirmAction, setConfirmAction] = useState<string | null>(null);
   const [notifPrefs, setNotifPrefs] = useState<NotifPrefs>(loadNotifPrefs);
-  const [tabbyEnabled, setTabbyEnabled] = useState(() => tabbyPrefs.getEnabled());
-  const setTabby = useCallback((v: boolean) => {
-    tabbyPrefs.setEnabled(v);
-    setTabbyEnabled(v);
+  const [sagiEnabled, setSagiEnabled] = useState(() => sagiPrefs.getEnabled());
+  const setSagi = useCallback((v: boolean) => {
+    sagiPrefs.setEnabled(v);
+    setSagiEnabled(v);
   }, []);
   const [abandonHours, setAbandonHours] = useState("24");
   const [purgeDays, setPurgeDays] = useState("90");
@@ -1466,37 +1466,37 @@ export function Settings() {
         <RemoteSources />
       </section>
 
-      {/* ─── TABBY COMPANION ─── */}
-      <section id="tabby" className="scroll-mt-24">
+      {/* ─── SAGI COMPANION ─── */}
+      <section id="sagi" className="scroll-mt-24">
         <h3 className="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1">
           <span className="text-base leading-none" aria-hidden>
-            🐾
+            🦸
           </span>
-          {t("tabby.title", "Tabby companion")}
+          {t("sagi.title", "Sagi companion")}
         </h3>
         <p className="text-xs text-fg-muted mb-4">
-          {t("tabby.description", "A floating cat that reacts to your live sessions.")}
+          {t("sagi.description", "A floating mascot that reacts to your live sessions.")}
         </p>
 
         <div className="card p-5">
           <div className="flex items-center gap-3">
             <div
               className={`w-10 h-10 rounded-xl flex items-center justify-center transition-colors ${
-                tabbyEnabled
+                sagiEnabled
                   ? "bg-blue-600/10 border border-blue-600/20"
                   : "bg-surface-2 border border-border"
               }`}
             >
               <span className="text-lg leading-none" aria-hidden>
-                🐾
+                🦸
               </span>
             </div>
             <Toggle
-              checked={tabbyEnabled}
-              onChange={setTabby}
-              label={t("tabby.enable", "Show Tabby")}
+              checked={sagiEnabled}
+              onChange={setSagi}
+              label={t("sagi.enable", "Show Sagi")}
               description={t(
-                "tabby.enableDesc",
+                "sagi.enableDesc",
                 "Display the corner companion across the dashboard (⌘B to open)"
               )}
             />

client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap

@@ -7641,7 +7641,7 @@ exports[`screen snapshots > Settings 1`] = `
           type="button"
         >
           <svg
-            class="lucide lucide-cat w-3.5 h-3.5"
+            class="lucide lucide-piggy-bank w-3.5 h-3.5"
             fill="none"
             height="24"
             stroke="currentColor"
@@ -7653,19 +7653,16 @@ exports[`screen snapshots > Settings 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z"
+              d="M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 3 2 4.5V20h4v-2h3v2h4v-4c1-.5 1.7-1 2-2h2v-4h-2c0-1-.5-1.5-1-2V5z"
             />
             <path
-              d="M8 14v.5"
+              d="M2 9v1c0 1.1.9 2 2 2h1"
             />
             <path
-              d="M16 14v.5"
-            />
-            <path
-              d="M11.25 16.25h1.5L12 17l-.75-.75Z"
+              d="M16 11h.01"
             />
           </svg>
-          Tabby companion
+          Sagi companion
         </button>
         <button
           class="inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-2.5 py-1.5 rounded-lg border transition-colors flex-shrink-0 border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
@@ -9245,7 +9242,7 @@ exports[`screen snapshots > Settings 1`] = `
     </section>
     <section
       class="scroll-mt-24"
-      id="tabby"
+      id="sagi"
     >
       <h3
         class="text-sm font-medium text-fg-secondary flex items-center gap-2 mb-1"
@@ -9254,14 +9251,14 @@ exports[`screen snapshots > Settings 1`] = `
           aria-hidden="true"
           class="text-base leading-none"
         >
-          🐾
+          🦸
         </span>
-        Tabby companion
+        Sagi companion
       </h3>
       <p
         class="text-xs text-fg-muted mb-4"
       >
-        A floating cat that reacts to your live sessions.
+        A floating mascot that reacts to your live sessions.
       </p>
       <div
         class="card p-5"
@@ -9276,7 +9273,7 @@ exports[`screen snapshots > Settings 1`] = `
               aria-hidden="true"
               class="text-lg leading-none"
             >
-              🐾
+              🦸
             </span>
           </div>
           <label
@@ -9288,7 +9285,7 @@ exports[`screen snapshots > Settings 1`] = `
               <p
                 class="text-sm text-fg-secondary group-hover:text-fg-secondary transition-colors"
               >
-                Show Tabby
+                Show Sagi
               </p>
               <p
                 class="text-xs text-fg-muted mt-0.5"