@pmate/account-sdk 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pmate/account-sdk",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "files": [
     "src",
@@ -8,38 +8,53 @@
     "!src/tests/**"
   ],
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./node": "./src/node/index.ts"
   },
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "npm:publish": "npm publish --registry https://registry.npmjs.org/",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
   "peerDependencies": {
     "jotai": "*",
     "jotai-family": "*",
     "react": "*"
   },
+  "peerDependenciesMeta": {
+    "jotai": {
+      "optional": true
+    },
+    "jotai-family": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
   "dependencies": {
+    "@pmate/auth-widgets": "^0.1.0",
+    "@pmate/lang": "^1.0.2",
+    "@pmate/meta": "^1.1.3",
+    "@pmate/service-core": "^1.0.0",
+    "@pmate/utils": "^1.0.3",
     "browser-image-compression": "^2.0.2",
+    "elysia": "^1.4.19",
     "i18next": "^23.0.0",
     "react-i18next": "^13.0.0",
-    "react-use": "^17.6.0",
-    "@pmate/lang": "1.0.2",
-    "@pmate/utils": "1.0.3",
-    "@pmate/meta": "1.1.3"
+    "react-use": "^17.6.0"
   },
   "devDependencies": {
-    "@types/react": "*",
-    "@types/react-dom": "*",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "@vitejs/plugin-react": "^4.2.1",
     "jsdom": "^26.1.0",
     "react-dom": "*",
     "typescript": "^5.2.2",
-    "vite": "^7.3.1",
+    "vite": "catalog:",
     "vitest": "^4.0.17"
-  },
-  "scripts": {
-    "npm:publish": "npm publish --registry https://registry.npmjs.org/",
-    "test": "vitest run",
-    "test:watch": "vitest"
   }
-}
+}

package/src/api/AppService.ts

@@ -1,17 +1,17 @@
 import { lru } from "@pmate/utils"
-import type { AppConfig, ProfileStep } from "../types/app"
+import type { AppConfig, AppThemePreset, ProfileStep } from "../types/app"
 
-const APPS_ENDPOINT = "https://apps-api.pmate.chat"
-const DEFAULT_BACKGROUND = "linear-gradient(180deg, #9ca3af 0%, #6b7280 100%)"
+const APPS_ENDPOINT =
+  process.env.VITE_PUBLIC_APPS_SERVER_ENDPOINT || "https://apps-api.pmate.chat"
 const DEFAULT_ICON = "https://parrot-static.pmate.chat/parrot-logo.png"
+const DEFAULT_THEME_PRESET: AppThemePreset = "default"
 
 type AppRegistryRecord = {
   id: string
   name: string
   icon: string
   theme?: {
-    background?: string
-    themeColor?: string
+    preset?: AppThemePreset
     welcomeText?: string
   }
   profileSchema?: ProfileStep[]
@@ -26,12 +26,12 @@ const buildDisplayNameFromAppId = (appId: string): string => {
 
 const toAppConfig = (record: AppRegistryRecord): AppConfig => {
   const fallbackName = buildDisplayNameFromAppId(record.id)
+  const themePreset = record.theme?.preset || DEFAULT_THEME_PRESET
   return {
     id: record.id,
     name: record.name || fallbackName,
     icon: record.icon || DEFAULT_ICON,
-    background: record.theme?.background || DEFAULT_BACKGROUND,
-    themeColor: record.theme?.themeColor,
+    themePreset,
     welcomeText: record.theme?.welcomeText || `Welcome to ${fallbackName}`,
     profiles: record.profileSchema ?? [],
   }

package/src/atoms/appConfigAtom.ts

@@ -0,0 +1,24 @@
+import { atom, type Atom } from "jotai"
+import { atomFamily, type AtomFamily } from "jotai-family"
+import { DEFAULT_APP_ID } from "../constants"
+import { AppService } from "../api/AppService"
+import type { AppConfig } from "../types/app"
+import { resolveAppId } from "../utils/resolveAppId"
+
+export const resolveAppConfigId = (app?: string | null) => {
+  return resolveAppId(app ?? DEFAULT_APP_ID)
+}
+
+type AppConfigAtomFamily = AtomFamily<string, Atom<Promise<AppConfig>>>
+
+export const appConfigAtom: AppConfigAtomFamily = atomFamily((appId: string) =>
+  atom(async () => {
+    return AppService.getAppConfig(appId)
+  })
+)
+
+export const clearAppConfigAtoms = () => {
+  for (const appId of appConfigAtom.getParams()) {
+    appConfigAtom.remove(appId)
+  }
+}

package/src/atoms/index.ts

@@ -1,4 +1,5 @@
 export * from "./uploadAvatarAtom"
+export * from "./appConfigAtom"
 export * from "./accountAtom"
 export * from "./accountProfileAtom"
 export * from "./switchProfileAtom"

package/src/components/{AuthProviderV2.tsx → AuthProvider.tsx}

@@ -1,24 +1,25 @@
-import { Button } from "./Button"
-import { Drawer } from "./Drawer"
+import {
+  AuthLoginPromptSheet,
+  AuthSessionErrorCard,
+} from "@pmate/auth-widgets"
 import { useSetAtom } from "jotai"
 import {
   Component,
   PropsWithChildren,
   useCallback,
   useEffect,
-  useMemo,
   useState,
 } from "react"
-import { useAuthSnapshot } from "../hooks/useAuthSnapshot"
 import { accountAtom } from "../atoms/accountAtom"
-import { AccountLifecycleState } from "../types/account.types"
 import { userLogoutAtom } from "../atoms/userLogoutAtom"
-import { Redirect } from "../utils/Redirect"
+import { useAuthSnapshot } from "../hooks/useAuthSnapshot"
+import { AccountLifecycleState } from "../types/account.types"
 import { NotAuthenticatedError } from "../utils/errors"
 import {
   getWindowPathname,
   subscribeToLocationChange,
 } from "../utils/location"
+import { Redirect } from "../utils/Redirect"
 
 export type AuthRoute =
   | string
@@ -61,8 +62,8 @@ const getAuthBehaviors = (
   })
   const authBehavior =
     matchedAuthRoute && typeof matchedAuthRoute !== "string"
-      ? (matchedAuthRoute.behavior ?? "prompt")
-      : "prompt"
+      ? (matchedAuthRoute.behavior ?? "redirect")
+      : "redirect"
   const requiresAuth = Boolean(matchedAuthRoute)
   return {
     authBehavior,
@@ -70,13 +71,12 @@ const getAuthBehaviors = (
   }
 }
 
-type AuthProviderV2Props = PropsWithChildren<{
+type AuthProviderProps = PropsWithChildren<{
   app: string
   authRoutes?: AuthRoute[]
   onLoginSuccess?: () => void | Promise<void>
-  rtcProvider?: React.ComponentType<{ children: React.ReactNode }>
   pathname?: string
-  navigate?: (to: string, options?: { replace?: boolean }) => void
+  rtcProvider?: React.ComponentType<{ children: React.ReactNode }>
 }>
 
 const useWindowPathname = () => {
@@ -89,27 +89,14 @@ const useWindowPathname = () => {
   return pathname
 }
 
-export const AuthProviderV2 = ({
+export const AuthProvider = ({
   app,
   authRoutes,
-  rtcProvider: RtcProvider,
-  pathname: pathnameProp,
-  navigate: navigateProp,
   children,
-}: AuthProviderV2Props) => {
+  pathname: pathnameProp,
+  rtcProvider: RtcProvider,
+}: AuthProviderProps) => {
   const pathname = pathnameProp ?? useWindowPathname()
-  const navigate = useMemo(() => {
-    if (navigateProp) {
-      return navigateProp
-    }
-    return (to: string, options?: { replace?: boolean }) => {
-      if (options?.replace) {
-        window.location.replace(to)
-        return
-      }
-      window.location.assign(to)
-    }
-  }, [navigateProp])
   const [isLoginPromptOpen, setIsLoginPromptOpen] = useState(false)
   const [isLoginErrorDismissed, setIsLoginErrorDismissed] = useState(false)
   const setAccountSnapshot = useSetAtom(accountAtom)
@@ -167,6 +154,7 @@ export const AuthProviderV2 = ({
       requiresAuth && !snapshot.account && authBehavior === "prompt",
     )
   }, [authBehavior, loading, requiresAuth, snapshot.account])
+
   useEffect(() => {
     if (!loginError) {
       setIsLoginErrorDismissed(false)
@@ -177,9 +165,7 @@ export const AuthProviderV2 = ({
     setIsLoginPromptOpen(false)
     if (window.history.length > 1) {
       window.history.back()
-      return
     }
-    // window.location.href = "/"
   }
 
   if (loading && requiresAuth) {
@@ -187,26 +173,12 @@ export const AuthProviderV2 = ({
   }
   if (loginError && requiresAuth && !isLoginErrorDismissed) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-slate-50 p-6">
-        <div className="w-full max-w-md rounded-xl border border-rose-200 bg-white p-6 shadow-sm">
-          <div className="text-sm font-semibold text-rose-600">
-            Login failed
-          </div>
-          <p className="mt-2 text-sm text-slate-600">
-            We could not restore your session. Please try again.
-          </p>
-          <div className="mt-3 text-xs text-rose-500">{loginError.message}</div>
-          <div className="mt-4 flex flex-wrap gap-3">
-            <button
-              className="rounded-md bg-rose-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-rose-700"
-              type="button"
-              onClick={() => window.location.reload()}
-            >
-              Reload
-            </button>
-          </div>
-        </div>
-      </div>
+      <AuthSessionErrorCard
+        title="Login failed"
+        description="We could not restore your session. Please try again."
+        message={loginError.message}
+        onAction={() => window.location.reload()}
+      />
     )
   }
   if (requiresAuth && hasAccount === null) {
@@ -214,36 +186,12 @@ export const AuthProviderV2 = ({
   }
   if (requiresAuth && hasAccount === false && authBehavior === "prompt") {
     return (
-      <Drawer
+      <AuthLoginPromptSheet
         open={isLoginPromptOpen}
-        onClose={handleBack}
-        anchor="bottom"
-        overlayClassName="bg-black/40"
-      >
-        <div className="rounded-t-2xl px-6 pb-6 pt-4">
-          <div className="mx-auto mb-3 h-1.5 w-12 rounded-full bg-slate-200" />
-          <div className="text-lg font-semibold text-slate-900">
-            You need login to continue ?
-          </div>
-          <div className="mt-5 flex items-center justify-end gap-3">
-            <Button
-              type="button"
-              variant="plain"
-              className="min-w-[96px] justify-center"
-              onClick={handleBack}
-            >
-              Back
-            </Button>
-            <Button
-              type="button"
-              className="min-w-[96px] justify-center"
-              onClick={() => Redirect.toLogin(app)}
-            >
-              Login
-            </Button>
-          </div>
-        </div>
-      </Drawer>
+        onBack={handleBack}
+        onLogin={() => Redirect.toLogin(app)}
+        title="You need login to continue ?"
+      />
     )
   }
   if (!requiresAuth) {
@@ -251,12 +199,14 @@ export const AuthProviderV2 = ({
   }
   const RtcWrapper = RtcProvider ?? (({ children }) => <>{children}</>)
   return (
-    <AuthErrorBoundary navigate={navigate}>
+    <AuthErrorBoundary app={app}>
       <RtcWrapper>{children}</RtcWrapper>
     </AuthErrorBoundary>
   )
 }
 
+export const AuthProviderV2 = AuthProvider
+
 interface AuthErrorBoundaryState {
   hasError: boolean
 }
@@ -296,16 +246,16 @@ class AuthErrorBoundaryInner extends Component<
 }
 
 const AuthErrorBoundary = ({
+  app,
   children,
-  navigate,
 }: PropsWithChildren<{
-  navigate: (to: string, options?: { replace?: boolean }) => void
+  app: string
 }>) => {
   const logout = useSetAtom(userLogoutAtom)
   const handleAuthError = useCallback(async () => {
     await logout()
-    navigate("/login", { replace: true })
-  }, [logout, navigate])
+    Redirect.toLogin(app)
+  }, [app, logout])
 
   return (
     <AuthErrorBoundaryInner onAuthError={handleAuthError}>

package/src/components/index.ts

@@ -1 +1 @@
-export * from "./AuthProviderV2"
+export * from "./AuthProvider"

package/src/hooks/useAppBackgroundStyle.ts

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react"
 import { getWindowSearch, subscribeToLocationChange } from "../utils/location"
+import { getAppThemeBackground } from "../utils/appTheme"
 import { useAppConfig } from "./useAppConfig"
 
 export const useAppBackgroundStyle = () => {
@@ -17,8 +18,7 @@ export const useAppBackgroundStyle = () => {
 
   return useMemo(
     () => ({
-      background:
-        appConfig?.background || "linear-gradient(180deg, #9ca3af 0%, #6b7280 100%)",
+      background: getAppThemeBackground(appConfig?.themePreset),
     }),
     [appConfig]
   )

package/src/hooks/useAppConfig.ts

@@ -1,8 +1,7 @@
 import { useEffect, useState } from "react"
+import { resolveAppConfigId } from "../atoms/appConfigAtom"
 import { AppService } from "../api/AppService"
-import { DEFAULT_APP_ID } from "../constants"
 import type { AppConfig } from "../types/app"
-import { resolveAppId } from "../utils/resolveAppId"
 
 type AppConfigState = {
   appConfig: AppConfig | null
@@ -11,7 +10,7 @@ type AppConfigState = {
 }
 
 export const useAppConfig = (app?: string | null): AppConfigState => {
-  const resolvedApp = resolveAppId(app ?? DEFAULT_APP_ID)
+  const resolvedApp = resolveAppConfigId(app)
   const [state, setState] = useState<AppConfigState>({
     appConfig: null,
     isLoading: true,
@@ -21,17 +20,25 @@ export const useAppConfig = (app?: string | null): AppConfigState => {
   useEffect(() => {
     let active = true
     setState({ appConfig: null, isLoading: true, error: null })
+
     AppService.getAppConfig(resolvedApp)
       .then((appConfig) => {
-        if (!active) return
+        if (!active) {
+          return
+        }
         setState({ appConfig, isLoading: false, error: null })
       })
       .catch((error: unknown) => {
-        if (!active) return
+        if (!active) {
+          return
+        }
         setState({
           appConfig: null,
           isLoading: false,
-          error: error instanceof Error ? error : new Error("Failed to load app config"),
+          error:
+            error instanceof Error
+              ? error
+              : new Error("Failed to load app config"),
         })
       })
 

package/src/hooks/useProfileStepFlow.ts

@@ -2,8 +2,6 @@ import { useCallback, useMemo } from "react"
 import { isProfileStepType, ProfileStepType } from "../utils/profileStep"
 import { useAppConfig } from "./useAppConfig"
 
-const DEFAULT_CREATE_STEP: ProfileStepType = "learning-language"
-
 type UseProfileStepFlowParams = {
   params: URLSearchParams
 }
@@ -13,7 +11,13 @@ export const useProfileStepFlow = ({
 }: UseProfileStepFlowParams) => {
   const appParam = params.get("app")
   const redirectParam = params.get("redirect")
-  const { appConfig } = useAppConfig(appParam)
+  const { appConfig, error, isLoading } = useAppConfig(appParam)
+  const shouldBlockStep = Boolean(appParam) && isLoading && !appConfig && !error
+
+  // The app registry decides the canonical order of profile steps.
+  // When the config is still loading for an explicit app, we intentionally
+  // block the create flow instead of briefly falling back to a synthetic
+  // default step that does not exist in the app schema.
   const appProfileSteps = useMemo<ProfileStepType[]>(
     () =>
       (appConfig?.profiles ?? [])
@@ -24,15 +28,27 @@ export const useProfileStepFlow = ({
   const stepParam = params.get("step")
   const normalizedStep: ProfileStepType | null =
     appProfileSteps.find((item) => item === stepParam) ?? null
-  const defaultStep: ProfileStepType = appProfileSteps[0] ?? DEFAULT_CREATE_STEP
-  const activeStep: ProfileStepType = normalizedStep ?? defaultStep
+
+  // step=... wins when it is valid for the current app.
+  // Otherwise we use the first configured step. If the app does not declare
+  // any profile schema, create-profile should stay unavailable instead of
+  // inventing a fallback step.
+  const defaultStep: ProfileStepType | null = shouldBlockStep
+    ? null
+    : (appProfileSteps[0] ?? null)
+  const activeStep: ProfileStepType | null = normalizedStep ?? defaultStep
+
+  // createSteps stays empty while we intentionally block rendering.
+  // Once app config is ready, it mirrors the registry schema order exactly.
   const createSteps = useMemo<ProfileStepType[]>(() => {
-    return appProfileSteps.length > 0 ? appProfileSteps : [DEFAULT_CREATE_STEP]
-  }, [appProfileSteps])
-  const currentStepIndex = createSteps.indexOf(activeStep)
+    return shouldBlockStep ? [] : appProfileSteps
+  }, [appProfileSteps, shouldBlockStep])
+  const currentStepIndex =
+    activeStep === null ? -1 : createSteps.indexOf(activeStep)
   const nextStep =
     currentStepIndex >= 0 ? createSteps[currentStepIndex + 1] : undefined
-  const isCreateFlowStep = createSteps.includes(activeStep)
+  const isCreateFlowStep =
+    activeStep === null ? false : createSteps.includes(activeStep)
   const buildStepUrl = useCallback(
     (next: ProfileStepType) => {
       const search = new URLSearchParams()
@@ -53,7 +69,10 @@ export const useProfileStepFlow = ({
     appProfileSteps,
     buildStepUrl,
     createSteps,
+    error,
+    isLoading,
     isCreateFlowStep,
+    isReady: activeStep !== null,
     nextStep,
   }
 }

package/src/index.ts

@@ -2,7 +2,7 @@ export * from "./atoms"
 export * from "./components"
 export * from "./i18n"
 export { DEFAULT_APP_ID } from "./constants"
-export type { AppConfig, ProfileStep } from "./types/app"
+export type { AppConfig, AppThemePreset, ProfileStep } from "./types/app"
 export * from "./hooks"
 export * from "./utils"
 export * from "./api"

package/src/node/index.ts

@@ -0,0 +1,271 @@
+import type {
+  AccountViewResult,
+  AuthSession,
+  AuthzCheckResult,
+  RoleBinding,
+  ServerResponse,
+} from "@pmate/meta"
+import { BizErrorCode } from "@pmate/meta"
+import { ServiceError } from "@pmate/service-core"
+import { Elysia } from "elysia"
+
+export type AuthenticatedAccount = {
+  token: string
+  accountId: string
+  session: AuthSession
+}
+
+export type AuthClientLike = {
+  authenticateRequest(request: Request): Promise<AuthenticatedAccount>
+  checkAuthorization(
+    request: Request,
+    input: { account?: string; namespace: string; roles: string[] }
+  ): Promise<AuthzCheckResult>
+  getAccountView(
+    request: Request,
+    query: { account?: string; mobile?: string; nickName?: string }
+  ): Promise<AccountViewResult>
+  listRoleBindings(
+    request: Request,
+    query: { account?: string; namespace?: string }
+  ): Promise<RoleBinding[]>
+  createRoleBinding(
+    request: Request,
+    input: { account: string; namespace: string; role: string; source?: string }
+  ): Promise<RoleBinding>
+}
+
+export class AuthClient implements AuthClientLike {
+  private readonly authApiBaseUrl: string
+  private readonly fetchImpl: typeof fetch
+
+  constructor(options: { authApiBaseUrl?: string; fetchImpl?: typeof fetch } = {}) {
+    this.authApiBaseUrl = (
+      options.authApiBaseUrl ||
+      process.env.AUTH_API_BASE_URL ||
+      "https://auth-api-v2.pmate.chat"
+    ).replace(/\/+$/, "")
+    this.fetchImpl = options.fetchImpl ?? fetch
+  }
+
+  async authenticateRequest(request: Request): Promise<AuthenticatedAccount> {
+    const token = extractBearerToken(request.headers.get("authorization"))
+    const session = await authRequest<AuthSession | null>(
+      this.fetchImpl,
+      this.authApiBaseUrl,
+      "/session",
+      {
+        method: "GET",
+        token,
+      }
+    )
+    if (!session?.identity?.accountId) {
+      throw new ServiceError("Unauthorized", 401, BizErrorCode.AUTH_ERROR)
+    }
+    return {
+      token,
+      accountId: session.identity.accountId,
+      session,
+    }
+  }
+
+  async checkAuthorization(
+    request: Request,
+    input: { account?: string; namespace: string; roles: string[] }
+  ) {
+    const auth = await this.authenticateRequest(request)
+    return authRequest<AuthzCheckResult>(
+      this.fetchImpl,
+      this.authApiBaseUrl,
+      "/authz/check",
+      {
+        method: "POST",
+        token: auth.token,
+        body: JSON.stringify({
+          account: input.account ?? auth.accountId,
+          namespace: input.namespace,
+          roles: input.roles,
+        }),
+      }
+    )
+  }
+
+  async getAccountView(
+    request: Request,
+    query: { account?: string; mobile?: string; nickName?: string }
+  ) {
+    const auth = await this.authenticateRequest(request)
+    const url = new URL(`${this.authApiBaseUrl}/accounts/view`)
+    if (query.account) url.searchParams.set("account", query.account)
+    if (query.mobile) url.searchParams.set("mobile", query.mobile)
+    if (query.nickName) url.searchParams.set("nickName", query.nickName)
+    return authRequest<AccountViewResult>(this.fetchImpl, this.authApiBaseUrl, url, {
+      method: "GET",
+      token: auth.token,
+    })
+  }
+
+  async listRoleBindings(
+    request: Request,
+    query: { account?: string; namespace?: string }
+  ) {
+    const auth = await this.authenticateRequest(request)
+    const url = new URL(`${this.authApiBaseUrl}/role/bindings`)
+    if (query.account) url.searchParams.set("account", query.account)
+    if (query.namespace) url.searchParams.set("namespace", query.namespace)
+    return authRequest<RoleBinding[]>(this.fetchImpl, this.authApiBaseUrl, url, {
+      method: "GET",
+      token: auth.token,
+    })
+  }
+
+  async createRoleBinding(
+    request: Request,
+    input: { account: string; namespace: string; role: string; source?: string }
+  ) {
+    const auth = await this.authenticateRequest(request)
+    return authRequest<RoleBinding>(
+      this.fetchImpl,
+      this.authApiBaseUrl,
+      "/role/bindings",
+      {
+        method: "POST",
+        token: auth.token,
+        body: JSON.stringify(input),
+      }
+    )
+  }
+}
+
+export function createAccountAuthPlugin(options: {
+  authApiBaseUrl?: string
+  fetchImpl?: typeof fetch
+} = {}) {
+  const client = new AuthClient(options)
+  return new Elysia({ name: "pmate-account-auth" }).decorate(
+    "accountAuthClient",
+    client
+  )
+}
+
+export function requireAuth(
+  client: AuthClientLike,
+  options: {
+    namespace?:
+      | string
+      | ((context: {
+          request: Request
+          params?: Record<string, string | undefined>
+          query?: Record<string, unknown>
+          body?: unknown
+        }) => string | Promise<string>)
+    roles?: string[]
+  } = {}
+) {
+  return {
+    beforeHandle: async (context: {
+      request: Request
+      params?: Record<string, string | undefined>
+      query?: Record<string, unknown>
+      body?: unknown
+    }) => {
+      if (context.request.method.toUpperCase() === "OPTIONS") {
+        return
+      }
+
+      const auth = await client.authenticateRequest(context.request)
+      let namespace: string | undefined
+      let matchedRole: string | undefined
+      if (options.roles?.length) {
+        namespace =
+          typeof options.namespace === "function"
+            ? await options.namespace(context)
+            : options.namespace
+        if (!namespace) {
+          throw new ServiceError(
+            "Namespace is required for role authorization",
+            500,
+            BizErrorCode.AUTH_ERROR
+          )
+        }
+        const result = await client.checkAuthorization(context.request, {
+          account: auth.accountId,
+          namespace,
+          roles: options.roles,
+        })
+        if (!result.allowed) {
+          throw new ServiceError("Forbidden", 403, BizErrorCode.AUTH_ERROR)
+        }
+        matchedRole = result.matchedRole
+      }
+
+      const authContext = {
+        ...auth,
+        ...(namespace ? { namespace } : {}),
+        ...(matchedRole ? { matchedRole } : {}),
+      }
+      ;(context as Record<string, unknown>).auth = authContext
+      ;(context.request as Request & { auth?: typeof authContext }).auth =
+        authContext
+    },
+  }
+}
+
+type AuthRequestInit = RequestInit & { token?: string }
+
+async function authRequest<T>(
+  fetchImpl: typeof fetch,
+  authApiBaseUrl: string,
+  path: string | URL,
+  init: AuthRequestInit
+): Promise<T> {
+  const { token, headers, ...rest } = init
+  const url =
+    path instanceof URL
+      ? path.toString()
+      : `${authApiBaseUrl}${path.startsWith("/") ? path : `/${path}`}`
+  const response = await fetchImpl(url, {
+    ...rest,
+    headers: {
+      "Content-Type": "application/json",
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...(headers ?? {}),
+    },
+  })
+
+  let json: ServerResponse<T> | null = null
+  try {
+    json = (await response.json()) as ServerResponse<T>
+  } catch {
+    json = null
+  }
+
+  if (!response.ok || !json?.success) {
+    throw new ServiceError(
+      json?.message || response.statusText || "Request failed",
+      response.status || 500,
+      BizErrorCode.AUTH_ERROR
+    )
+  }
+
+  return json.data
+}
+
+function extractBearerToken(header: string | null) {
+  if (!header) {
+    throw new ServiceError(
+      "Missing authorization header",
+      401,
+      BizErrorCode.AUTH_ERROR
+    )
+  }
+  const match = header.match(/^Bearer\s+(.+)$/i)
+  if (!match) {
+    throw new ServiceError(
+      "Invalid authorization header",
+      401,
+      BizErrorCode.AUTH_ERROR
+    )
+  }
+  return match[1].trim()
+}

package/src/types/app.ts

@@ -11,12 +11,18 @@ export type ProfileStep = {
   required: boolean
 }
 
+export type AppThemePreset =
+  | "default"
+  | "chat"
+  | "parrotmate"
+  | "sunrise"
+  | "graphite"
+
 export interface AppConfig {
   id: string
   name: string
   icon: string
-  background: string
-  themeColor?: string
+  themePreset: AppThemePreset
   welcomeText: string
   profiles: ProfileStep[]
 }

package/src/utils/AccountManagerV2.ts

@@ -216,6 +216,9 @@ export class AccountManagerV2 extends EmitterV2<AccountManagerEventMap> {
   }
 
   public clearSelectedProfile(): void {
+    if (!getSelectedProfileId(this.app)) {
+      return
+    }
     clearSelectedProfileId(this.app)
     this.emit(AccountManagerEvent.StateChange)
   }

package/src/utils/appTheme.ts

@@ -0,0 +1,16 @@
+import type { AppThemePreset } from "../types/app"
+
+const DEFAULT_THEME_PRESET: AppThemePreset = "default"
+
+const THEME_BACKGROUNDS: Record<AppThemePreset, string> = {
+  default: "linear-gradient(180deg, #9ca3af 0%, #6b7280 100%)",
+  chat: "linear-gradient(180deg, #0f766e 0%, #115e59 100%)",
+  parrotmate: "linear-gradient(180deg, #5b4cf0 0%, #4537d2 100%)",
+  sunrise: "linear-gradient(180deg, #f59e0b 0%, #ea580c 100%)",
+  graphite: "linear-gradient(180deg, #111827 0%, #1f2937 100%)",
+}
+
+export const getAppThemeBackground = (themePreset?: AppThemePreset) => {
+  const preset = themePreset ?? DEFAULT_THEME_PRESET
+  return THEME_BACKGROUNDS[preset] ?? THEME_BACKGROUNDS[DEFAULT_THEME_PRESET]
+}

package/src/utils/index.ts

@@ -9,3 +9,4 @@ export * from "./resolveAppId"
 export * from "./errors"
 export * from "./profileStep"
 export * from "./Redirect"
+export * from "./appTheme"

package/src/components/Button.tsx

@@ -1,39 +0,0 @@
-import React from "react"
-
-type ButtonVariant = "primary" | "plain"
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant
-}
-
-const joinClassNames = (...parts: Array<string | false | null | undefined>) =>
-  parts.filter(Boolean).join(" ")
-
-const baseClassName =
-  "inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
-
-const variantClassName: Record<ButtonVariant, string> = {
-  primary: "bg-slate-900 text-white hover:bg-slate-800",
-  plain: "border border-slate-200 bg-white text-slate-700 hover:bg-slate-50",
-}
-
-export const Button = ({
-  variant = "primary",
-  className,
-  disabled,
-  ...props
-}: ButtonProps) => {
-  return (
-    <button
-      {...props}
-      disabled={disabled}
-      className={joinClassNames(
-        baseClassName,
-        variantClassName[variant],
-        disabled && "cursor-not-allowed opacity-60",
-        className,
-      )}
-    />
-  )
-}

package/src/components/Drawer.tsx

@@ -1,80 +0,0 @@
-import React, { useEffect, useState } from "react"
-
-type DrawerAnchor = "left" | "right" | "top" | "bottom"
-
-export interface DrawerProps {
-  open: boolean
-  onClose: () => void
-  children: React.ReactNode
-  anchor?: DrawerAnchor
-  className?: string
-  overlayClassName?: string
-  id?: string
-  style?: React.CSSProperties
-}
-
-const joinClassNames = (...parts: Array<string | false | null | undefined>) =>
-  parts.filter(Boolean).join(" ")
-
-const positionClassMap: Record<DrawerAnchor, string> = {
-  left: "left-0 top-0 h-full",
-  right: "right-0 top-0 h-full",
-  top: "left-0 top-0 w-full",
-  bottom: "bottom-0 left-0 w-full",
-}
-
-const hiddenTransformMap: Record<DrawerAnchor, string> = {
-  left: "-translate-x-full",
-  right: "translate-x-full",
-  top: "-translate-y-full",
-  bottom: "translate-y-full",
-}
-
-export const Drawer = ({
-  open,
-  onClose,
-  children,
-  anchor = "right",
-  className,
-  overlayClassName,
-  id,
-  style,
-}: DrawerProps) => {
-  const [mounted, setMounted] = useState(open)
-
-  useEffect(() => {
-    if (open) {
-      setMounted(true)
-    }
-  }, [open])
-
-  const handleTransitionEnd = () => {
-    if (!open) {
-      setMounted(false)
-    }
-  }
-
-  if (!mounted) return null
-
-  return (
-    <div
-      id={id}
-      className={joinClassNames("fixed inset-0 z-[1002]", overlayClassName)}
-      onClick={onClose}
-    >
-      <div
-        className={joinClassNames(
-          "absolute bg-white transition-transform duration-300",
-          positionClassMap[anchor],
-          open ? "translate-x-0 translate-y-0" : hiddenTransformMap[anchor],
-          className,
-        )}
-        style={style}
-        onClick={(event) => event.stopPropagation()}
-        onTransitionEnd={handleTransitionEnd}
-      >
-        {children}
-      </div>
-    </div>
-  )
-}