feat: update frontend for account-based subscriptions

Replace all team_id/team_admin references with account_id/owner across
types, store, hooks, API clients, components, and pages. Add new
AccountSettingsPage, UpgradePrompt, CheckoutButton, useSubscription
hook, and accounts API client. AuthStore now parallel-fetches account
and subscription data alongside user profile.

Also fix folder sidebar not refreshing after tree deletion by
dispatching the folder-changed event in handleDeleteTree.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/hooks/usePermissions.ts

@@ -1,18 +1,18 @@
 /**
  * Centralized permissions hook for ResolutionFlow.
  *
- * Role hierarchy: super_admin > team_admin > engineer > viewer
+ * Role hierarchy: super_admin > owner > engineer > viewer
  *
  * Mirrors backend logic in backend/app/core/permissions.py
  */
 import { useAuthStore } from '@/store/authStore'
 import type { User } from '@/types'
 
-export type EffectiveRole = 'super_admin' | 'team_admin' | 'engineer' | 'viewer'
+export type EffectiveRole = 'super_admin' | 'owner' | 'engineer' | 'viewer'
 
 const ROLE_HIERARCHY: Record<EffectiveRole, number> = {
   super_admin: 4,
-  team_admin: 3,
+  owner: 3,
   engineer: 2,
   viewer: 1,
 }
@@ -20,7 +20,7 @@ const ROLE_HIERARCHY: Record<EffectiveRole, number> = {
 function getEffectiveRole(user: User | null): EffectiveRole {
   if (!user) return 'viewer'
   if (user.is_super_admin) return 'super_admin'
-  if (user.is_team_admin && user.team_id) return 'team_admin'
+  if (user.account_role === 'owner') return 'owner'
   return user.role as EffectiveRole
 }
 
@@ -37,7 +37,7 @@ export function usePermissions() {
   return {
     effectiveRole,
     isSuperAdmin: effectiveRole === 'super_admin',
-    isTeamAdmin: effectiveRole === 'team_admin' || effectiveRole === 'super_admin',
+    isAccountOwner: effectiveRole === 'owner' || effectiveRole === 'super_admin',
     isEngineer: hasMinimumRole(user, 'engineer'),
     isViewer: effectiveRole === 'viewer',
 
@@ -46,12 +46,12 @@ export function usePermissions() {
     canCreateSteps: hasMinimumRole(user, 'engineer'),
 
     // Resource-specific checks
-    canEditTree: (tree: { author_id: string | null; team_id?: string | null }) => {
+    canEditTree: (tree: { author_id: string | null; account_id?: string | null }) => {
       if (!user) return false
       if (user.is_super_admin) return true
       if (!hasMinimumRole(user, 'engineer')) return false
       if (tree.author_id && tree.author_id === user.id) return true
-      if (user.is_team_admin && tree.team_id === user.team_id && user.team_id) return true
+      if (user.account_role === 'owner' && tree.account_id === user.account_id && user.account_id) return true
       return false
     },
 
@@ -68,8 +68,8 @@ export function usePermissions() {
     },
 
     // Management permissions
-    canManageCategories: hasMinimumRole(user, 'team_admin'),
+    canManageCategories: hasMinimumRole(user, 'owner'),
     canManageGlobalCategories: effectiveRole === 'super_admin',
-    canManageTeam: effectiveRole === 'super_admin' || (effectiveRole === 'team_admin'),
+    canManageAccount: effectiveRole === 'super_admin' || effectiveRole === 'owner',
   }
 }

frontend/src/hooks/useSubscription.ts

@@ -0,0 +1,45 @@
+import { useAuthStore } from '@/store/authStore'
+
+export function useSubscription() {
+  const subscription = useAuthStore((s) => s.subscription)
+
+  const plan = subscription?.subscription.plan ?? 'free'
+  const limits = subscription?.limits ?? null
+  const usage = subscription?.usage ?? null
+  const isActive = subscription?.subscription.status === 'active' || subscription?.subscription.status === 'trialing'
+
+  const isPaidPlan = plan === 'pro' || plan === 'team'
+
+  const canUseFeature = (feature: 'custom_branding' | 'priority_support'): boolean => {
+    if (!limits) return false
+    return limits[feature]
+  }
+
+  const isAtTreeLimit = (): boolean => {
+    if (!limits || !usage) return false
+    if (limits.max_trees === null) return false // unlimited
+    return usage.tree_count >= limits.max_trees
+  }
+
+  const isAtSessionLimit = (): boolean => {
+    if (!limits || !usage) return false
+    if (limits.max_sessions_per_month === null) return false
+    return usage.session_count_this_month >= limits.max_sessions_per_month
+  }
+
+  const formatLimit = (value: number | null): string => {
+    return value === null ? 'Unlimited' : String(value)
+  }
+
+  return {
+    plan,
+    limits,
+    usage,
+    isActive,
+    isPaidPlan,
+    canUseFeature,
+    isAtTreeLimit,
+    isAtSessionLimit,
+    formatLimit,
+  }
+}