Hub login session sync and login status display in options page

packages/extension/package.json

@@ -39,6 +39,7 @@
     "@radix-ui/react-toggle-group": "^1.1.7",
     "@sentry/react": "^9.42.0",
     "@sentry/vite-plugin": "^4.0.1",
+    "@supabase/supabase-js": "^2.105.4",
     "@testing-library/user-event": "^14.6.0",
     "bowser": "^2.14.1",
     "class-variance-authority": "^0.7.0",

packages/extension/public/_locales/de/messages.json

@@ -1247,5 +1247,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "Kann auf dieser Seite nicht ausgeführt werden (Seiten-URL stimmt nicht überein)"
+  },
+  "hub_login": {
+    "message": "Beim Hub anmelden"
   }
 }

packages/extension/public/_locales/en/messages.json

@@ -1253,5 +1253,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "Cannot run on this page (page URL does not match)"
+  },
+  "hub_login": {
+    "message": "Login to Hub"
   }
 }

packages/extension/public/_locales/es/messages.json

@@ -1247,5 +1247,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "No se puede ejecutar en esta página (la URL de la página no coincide)"
+  },
+  "hub_login": {
+    "message": "Iniciar sesión en Hub"
   }
 }

packages/extension/public/_locales/fr/messages.json

@@ -1247,5 +1247,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "Impossible d'exécuter sur cette page (l'URL de la page ne correspond pas)"
+  },
+  "hub_login": {
+    "message": "Se connecter au Hub"
   }
 }

packages/extension/public/_locales/hi/messages.json

@@ -1247,5 +1247,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "इस पेज पर नहीं चला सकते (पृष्ठ URL मेल नहीं खाता)"
+  },
+  "hub_login": {
+    "message": "Hub में लॉगिन करें"
   }
 }

packages/extension/public/_locales/id/messages.json

@@ -1250,5 +1250,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "Tidak dapat dijalankan di halaman ini (URL Halaman tidak cocok)"
+  },
+  "hub_login": {
+    "message": "Masuk ke Hub"
   }
 }

packages/extension/public/_locales/it/messages.json

@@ -1247,5 +1247,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "Impossibile eseguire su questa pagina (l'URL della pagina non corrisponde)"
+  },
+  "hub_login": {
+    "message": "Accedi all'Hub"
   }
 }

packages/extension/public/_locales/ja/messages.json

@@ -1244,5 +1244,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "このページでは実行できません（ページURLが一致しません）"
+  },
+  "hub_login": {
+    "message": "Hubへログイン"
   }
 }

packages/extension/public/_locales/ko/messages.json

@@ -1247,5 +1247,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "이 페이지에서 실행할 수 없습니다 (페이지 URL이 일치하지 않습니다)"
+  },
+  "hub_login": {
+    "message": "Hub에 로그인"
   }
 }

packages/extension/public/_locales/ms/messages.json

@@ -1250,5 +1250,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "Tidak boleh dijalankan pada halaman ini (URL Halaman tidak sepadan)"
+  },
+  "hub_login": {
+    "message": "Log masuk ke Hub"
   }
 }

packages/extension/public/_locales/pt_BR/messages.json

@@ -1250,5 +1250,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "Não é possível executar nesta página (URL da página não corresponde)"
+  },
+  "hub_login": {
+    "message": "Entrar no Hub"
   }
 }

packages/extension/public/_locales/pt_PT/messages.json

@@ -1250,5 +1250,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "Não é possível executar nesta página (URL da página não corresponde)"
+  },
+  "hub_login": {
+    "message": "Iniciar sessão no Hub"
   }
 }

packages/extension/public/_locales/ru/messages.json

@@ -1247,5 +1247,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "Невозможно выполнить на этой странице (URL страницы не совпадает)"
+  },
+  "hub_login": {
+    "message": "Войти в Hub"
   }
 }

packages/extension/public/_locales/zh_CN/messages.json

@@ -1247,5 +1247,8 @@
   },
   "Menu_disabled_urlNotMatch": {
     "message": "无法在此页面运行（页面URL不匹配）"
+  },
+  "hub_login": {
+    "message": "登录 Hub"
   }
 }

packages/extension/src/components/option/HubBanner.module.css

@@ -19,3 +19,17 @@
   font-size: 0.8rem;
   padding-left: 4px;
 }
+
+.userInfo {
+  @apply flex items-center gap-2;
+}
+
+.userAvatar {
+  @apply rounded-full;
+  object-fit: cover;
+}
+
+.userName {
+  @apply font-mono text-gray-700;
+  font-size: 0.85rem;
+}

packages/extension/src/components/option/HubBanner.tsx

@@ -4,16 +4,15 @@ import { t } from "@/services/i18n"
 import { cn } from "@/lib/utils"
 import { HUB_URL } from "@/const"
 
+const HUB_BANNER_LINK = `${HUB_URL}?utm_source=optionPage&utm_medium=banner`
+
 export function HubBanner() {
   return (
     <div className={css.menu}>
       <p className={css2.menuLabel}>
         <span>Sharing Commands</span>
       </p>
-      <a
-        href={`${HUB_URL}?utm_source=optionPage&utm_medium=banner`}
-        target="_blank"
-      >
+      <a href={HUB_BANNER_LINK} target="_blank" rel="noopener noreferrer">
         <img
           className={cn(css2.banner, "shadow-xl rounded-md px-2 pt-2 pb-1")}
           src="/SelectionCommandHub.png"

packages/extension/src/components/option/HubUserInfo.tsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from "react"
+import { LogIn } from "lucide-react"
+import { t } from "@/services/i18n"
+import { NEW_HUB_URL } from "@/const"
+import { Storage, LOCAL_STORAGE_KEY } from "@/services/storage"
+import type { HubUser } from "@/types"
+
+const HUB_LOGIN_LINK = `${NEW_HUB_URL}/auth/login?utm_source=extension&utm_medium=optionPage`
+
+export function HubUserInfo() {
+  const [hubUser, setHubUser] = useState<HubUser | null>(null)
+
+  useEffect(() => {
+    Storage.get<HubUser | null>(LOCAL_STORAGE_KEY.HUB_USER).then(setHubUser)
+
+    const unsubscribe = Storage.addListener<HubUser | null>(
+      LOCAL_STORAGE_KEY.HUB_USER,
+      (newVal) => setHubUser(newVal),
+    )
+    return unsubscribe
+  }, [])
+
+  if (hubUser) {
+    return (
+      <div className="flex items-center gap-2">
+        <img
+          className="rounded-full"
+          src={hubUser.image}
+          alt={hubUser.name}
+          width="24"
+          height="24"
+          onError={(e) => {
+            e.currentTarget.style.display = "none"
+          }}
+        />
+        <span className="font-mono text-sm text-gray-700">{hubUser.name}</span>
+      </div>
+    )
+  }
+
+  return (
+    <a
+      href={HUB_LOGIN_LINK}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center px-2 py-1 rounded-lg text-xs text-gray-600 border border-gray-300 hover:bg-gray-100 hover:scale-105 transition"
+    >
+      <LogIn size={16} className="mr-2 stroke-gray-600" />
+      {t("hub_login")}
+    </a>
+  )
+}

packages/extension/src/components/option/Option.tsx

@@ -10,6 +10,7 @@ import { ImportExport } from "@/components/option/ImportExport"
 import { UserSupport } from "@/components/option/UserSupport"
 import { DeveloperSupport } from "@/components/option/DeveloperSupport"
 import { HubBanner } from "@/components/option/HubBanner"
+import { HubUserInfo } from "@/components/option/HubUserInfo"
 import { SettingForm } from "@/components/option/SettingForm"
 import StorageUsage from "@/components/option/StorageUsage"
 import { PromptHistoryBanner } from "@/components/option/PromptHistoryBanner"
@@ -59,6 +60,9 @@ export function Option() {
           })}
         </h1>
         <span className={css.version}>Version: {VERSION}</span>
+        <div className="ml-auto">
+          <HubUserInfo />
+        </div>
       </header>
       <div className="flex m-auto gap-4 justify-center">
         <aside className="min-w-60">