@allbluecn/web-app 0.3.0

package/src/components/billing/login-prompt-dialog.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState, type ReactElement } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Loader2, LogIn } from 'lucide-react'
+import { toast } from 'sonner'
+import { openLoginUrl } from '@/server/remote-auth'
+import { useTranslation } from 'react-i18next'
+
+interface LoginPromptDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  feature?: string
+  onSuccess?: () => void
+}
+
+export function LoginPromptDialog({
+  open,
+  onOpenChange,
+  feature,
+  onSuccess,
+}: LoginPromptDialogProps): ReactElement {
+  const { t } = useTranslation('billing')
+  const [exchanging, setExchanging] = useState(false)
+
+  useEffect(() => {
+    if (!onOpenChange) return
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!open) return
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        onOpenChange(false)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open, onOpenChange])
+
+  const handleLogin = async () => {
+    try {
+      await openLoginUrl(`/login?desktop_redirect=true`)
+    } catch (e) {
+      toast.error(t('openBrowserFailed', { message: e instanceof Error ? e.message : t('unknownError') }))
+      setExchanging(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <LogIn className="size-5" />
+            {feature
+              ? t('loginToUnlockFeature', { feature })
+              : t('loginToUnlock', { feature: t('moreFeatures') })}
+          </DialogTitle>
+          <DialogDescription>
+            {t('loginDescription')}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-2 text-sm text-muted-foreground space-y-1">
+          <p>• {t('loginBenefit1')}</p>
+          <p>• {t('loginBenefit2')}</p>
+          <p>• {t('loginBenefit3')}</p>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>{t('later')}</Button>
+          <Button onClick={handleLogin} disabled={exchanging}>
+            {exchanging ? (
+              <Loader2 className="size-4 animate-spin mr-2" />
+            ) : (
+              <LogIn className="size-4 mr-2" />
+            )}
+            {t('goToLogin')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/billing/pricing-card.tsx

@@ -0,0 +1,81 @@
+import { Check } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+interface PricingCardProps {
+  plan: {
+    name: string
+    displayName: string
+    description: string | null
+    priceMonthly: number
+    priceYearly: number | null
+    currency: 'usd' | 'cny'
+    maxSeats: number | null
+    aiQuotaMonthly: number | null
+    features: Record<string, boolean>
+    providerPriceId?: string | null
+  }
+  currency: 'usd' | 'cny'
+  onSubscribe: (planId: string) => void
+}
+
+export function PricingCard({ plan, onSubscribe }: PricingCardProps) {
+  const { t } = useTranslation('billing')
+  const currencySymbol = plan.currency === 'usd' ? '$' : '¥'
+  const isFree = plan.priceMonthly === 0
+
+  return (
+    <div className="flex flex-col rounded-xl border border-border bg-background p-6 shadow-sm">
+      <h3 className="text-lg font-semibold">{plan.displayName}</h3>
+      <p className="text-sm text-muted-foreground mt-1">{plan.description}</p>
+
+      <div className="mt-4 mb-6">
+        {isFree ? (
+          <span className="text-2xl font-bold">{t('free')}</span>
+        ) : (
+          <div className="flex items-baseline gap-1">
+            <span className="text-2xl font-bold">
+              {currencySymbol}{plan.priceMonthly}
+            </span>
+            <span className="text-sm text-muted-foreground">{t('perMonth')}</span>
+          </div>
+        )}
+      </div>
+
+      {plan.maxSeats != null && (
+        <p className="text-sm text-muted-foreground mb-2">
+          {t('maxSeats', { count: plan.maxSeats })}
+        </p>
+      )}
+
+      {plan.aiQuotaMonthly != null && (
+        <p className="text-sm text-muted-foreground mb-4">
+          {t('aiQuota', { quota: plan.aiQuotaMonthly })}
+        </p>
+      )}
+
+      <ul className="space-y-2 mb-6 flex-1">
+        {Object.entries(plan.features).map(([feature, enabled]) =>
+          enabled ? (
+            <li key={feature} className="flex items-center gap-2 text-sm">
+              <Check size={14} className="text-primary" />
+              <span>{feature}</span>
+            </li>
+          ) : null,
+        )}
+      </ul>
+
+      <button
+        type="button"
+        onClick={() => onSubscribe(plan.name)}
+        disabled={isFree}
+        className={`w-full py-2 rounded-lg font-medium transition-colors ${
+          isFree
+            ? 'bg-muted text-muted-foreground cursor-default'
+            : 'bg-primary text-primary-foreground hover:bg-primary/90'
+        }`}
+      >
+        {isFree ? t('currentPlan') : t('startTrial')}
+      </button>
+    </div>
+  )
+}

package/src/components/billing/pricing-page.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react'
+import { useLoaderData } from '@tanstack/react-router'
+import { CurrencyToggle } from './currency-toggle'
+import { PricingCard } from './pricing-card'
+import { redirectToCheckout } from './checkout-redirect'
+import { useTranslation } from 'react-i18next'
+import { isChina } from '@/lib/deploy-region'
+
+export function PricingPage() {
+  const { t } = useTranslation('billing')
+  const { plans, currency } = useLoaderData({ from: '/_public/pricing' })
+  const [selectedCurrency, setSelectedCurrency] = useState<'usd' | 'cny'>(currency)
+  const isCn = isChina()
+
+  if (plans.length === 0 || isCn) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+        <p className="text-lg text-muted-foreground">
+          {isCn ? t('comingSoon') : t('saasOnly')}
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 py-12">
+      <div className="text-center mb-12">
+        <h1 className="text-3xl font-bold">{t('choosePlanTitle')}</h1>
+        <p className="text-muted-foreground mt-2">
+          {t('trialDescription')}
+        </p>
+        <div className="mt-4 flex justify-center">
+          <CurrencyToggle />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {plans.map((plan) => (
+          <PricingCard
+            key={plan.name}
+            plan={plan}
+            currency={selectedCurrency}
+            onSubscribe={async (planName) => {
+              const plan = plans.find((p) => p.name === planName)
+              if (plan?.providerPriceId) {
+                await redirectToCheckout(plan.name, selectedCurrency)
+              }
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/billing/seats-manager.tsx

@@ -0,0 +1,177 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useState } from 'react'
+import { Link } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { Minus, Plus } from 'lucide-react'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/button'
+import { useResource } from './use-resource'
+import { useSubscription } from './subscription-provider'
+import { updateSeatsFn } from '@/server/serverFns/billing'
+import { isChina } from '@/lib/deploy-region'
+
+const MAX_ADDON = 100
+
+interface SeatsManagerProps {
+  subscription: {
+    planName: string
+    status: string
+    seats: number
+    addonSeats: number
+    currentPeriodStart: Date | null
+    currentPeriodEnd: Date | null
+    trialEndsAt: Date | null
+    features: Record<string, boolean>
+    currency: string
+  } | null
+  onRefresh: () => void
+}
+
+export function SeatsManager({ subscription, onRefresh }: SeatsManagerProps) {
+  const { t } = useTranslation('billing')
+  const { planName } = useSubscription()
+  const seats = useResource('seats')
+  const isCn = isChina()
+
+  const [newAddon, setNewAddon] = useState(subscription?.addonSeats ?? 0)
+  const [submitting, setSubmitting] = useState(false)
+
+  const activeSub =
+    subscription && subscription.status === 'active' ? subscription : null
+  if (!activeSub || planName === 'free') {
+    return (
+      <div className="rounded-xl border border-border bg-background p-6">
+        <h3 className="text-lg font-semibold">{t('seatsManager.title')}</h3>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {t('seatsUpgradeCta')}
+        </p>
+        {!isCn && (
+          <Button asChild className="mt-3">
+            <Link to="/settings/billing">{t('seatsGoBilling')}</Link>
+          </Button>
+        )}
+      </div>
+    )
+  }
+
+  if (seats.unlimited) {
+    return (
+      <div className="rounded-xl border border-border bg-background p-6">
+        <h3 className="text-lg font-semibold">{t('seatsManager.title')}</h3>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {t('seatsUnlimited')}
+        </p>
+      </div>
+    )
+  }
+
+  const limit = seats.limit as number
+  const base = limit - activeSub.addonSeats
+  const newLimit = base + newAddon
+  const canDec = newAddon > 0 && newLimit - 1 >= seats.usage
+  const canInc = newAddon < MAX_ADDON
+  const dirty = newAddon !== activeSub.addonSeats
+
+  const submit = async () => {
+    setSubmitting(true)
+    try {
+      const result = await updateSeatsFn({ data: { addonSeats: newAddon } })
+      if (result.checkoutUrl) {
+        window.location.href = result.checkoutUrl
+        return
+      }
+      toast.success(t('seatsManager.success'))
+      onRefresh()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : String(e))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="rounded-xl border border-border bg-background p-6">
+      <h3 className="text-lg font-semibold">{t('seatsManager.title')}</h3>
+      <p className="mt-1 text-sm text-muted-foreground">
+        {t('seatsUsage', { usage: seats.usage, limit })}
+        {' · '}
+        {t('seatsBase', { base })}
+        {' + '}
+        {t('seatsAddonCount', { count: newAddon })}
+      </p>
+
+      {isCn ? (
+        <p className="mt-4 text-sm text-muted-foreground rounded-lg border border-border px-3 py-2">
+          {t('seatsPaymentUnavailable')}
+        </p>
+      ) : (
+        <>
+          <div className="mt-4 flex items-center gap-3">
+            <Button
+              variant="outline"
+              size="icon"
+              aria-label={t('seatsRemove')}
+              disabled={!canDec || submitting}
+              onClick={() => setNewAddon((v) => v - 1)}
+            >
+              <Minus className="size-4" />
+            </Button>
+            <span className="w-12 text-center text-lg font-semibold tabular-nums">
+              {newLimit}
+            </span>
+            <Button
+              variant="outline"
+              size="icon"
+              aria-label={t('seatsAdd')}
+              disabled={!canInc || submitting}
+              onClick={() => setNewAddon((v) => v + 1)}
+            >
+              <Plus className="size-4" />
+            </Button>
+            <span className="text-sm text-muted-foreground">
+              {t('seatsUnitPrice')}
+            </span>
+          </div>
+
+          {!canDec && seats.usage >= newLimit && (
+            <p className="mt-2 text-xs text-muted-foreground">
+              {t('seatsFloorHint', { usage: seats.usage })}
+            </p>
+          )}
+          <p className="mt-2 text-xs text-muted-foreground">
+            {t('seatsProrationHint')}
+          </p>
+          {activeSub.addonSeats === 0 && newAddon > 0 && (
+            <p className="mt-1 text-xs text-muted-foreground">
+              {t('seatsCheckoutRedirect')}
+            </p>
+          )}
+
+          <Button
+            className="mt-4"
+            disabled={!dirty || submitting}
+            onClick={submit}
+          >
+            {t('seatsConfirm')}
+          </Button>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/billing/subscription-card.tsx

@@ -0,0 +1,100 @@
+import { format } from 'date-fns'
+import { redirectToCheckout, redirectToPortal } from './checkout-redirect'
+import { useTranslation } from 'react-i18next'
+import { isChina } from '@/lib/deploy-region'
+
+interface SubscriptionCardProps {
+  subscription: {
+    planName: string
+    status: string
+    seats: number
+    addonSeats: number
+    currentPeriodStart: Date | null
+    currentPeriodEnd: Date | null
+    trialEndsAt: Date | null
+    features: Record<string, boolean>
+    currency: string
+  } | null
+}
+
+export function SubscriptionCard({
+  subscription,
+}: SubscriptionCardProps) {
+  const { t } = useTranslation('billing')
+  const isCn = isChina()
+
+  if (!subscription) {
+    return (
+      <div className="rounded-xl border border-border bg-background p-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-lg font-semibold">{t('freePlan')}</h3>
+            <p className="text-sm text-muted-foreground">
+              {t('freeDescription')}
+            </p>
+          </div>
+          {!isCn && (
+            <button
+              onClick={() => redirectToCheckout('pro', 'usd')}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
+            >
+              {t('upgradeToPro')}
+            </button>
+          )}
+          {isCn && (
+            <span className="px-4 py-2 text-sm text-muted-foreground bg-muted rounded-lg">
+              {t('comingSoon')}
+            </span>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  const currencySymbol = subscription.currency === 'usd' ? '$' : '¥'
+  const periodEnd = subscription.currentPeriodEnd
+    ? format(subscription.currentPeriodEnd, 'yyyy-MM-dd')
+    : '—'
+
+  const capitalizedPlanName =
+    subscription.planName.charAt(0).toUpperCase() +
+    subscription.planName.slice(1)
+
+  return (
+    <div className="rounded-xl border border-border bg-background p-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold">
+            {t('planName', { name: capitalizedPlanName })}
+          </h3>
+          <p className="text-sm text-muted-foreground">
+            {t('statusLabel', { status: subscription.status })}
+            {subscription.trialEndsAt
+              ? ` | ${t('trialUntil', { date: format(subscription.trialEndsAt, 'yyyy-MM-dd') })}`
+              : ''}
+            {' | '}{t('expiresAt', { date: periodEnd })}
+            {' | '}{t('currencyLabel', { currency: currencySymbol })}
+          </p>
+          <p className="text-sm text-muted-foreground">
+            {t('seatsUsedLabel', { seats: subscription.seats })}
+          </p>
+        </div>
+        <div className="flex gap-2">
+          {!isCn && (
+            <button
+              onClick={redirectToPortal}
+              className="px-4 py-2 border border-border rounded-lg hover:bg-muted transition-colors"
+            >
+              {t('manageBilling')}
+            </button>
+          )}
+          {isCn && (
+            <span className="px-4 py-2 text-sm text-muted-foreground bg-muted rounded-lg border border-border">
+              {t('comingSoon')}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/billing/subscription-provider.tsx

@@ -0,0 +1,111 @@
+import { createContext, useContext, useState, useEffect, type ReactElement } from 'react'
+import { getEffectivePlanFn } from '@/server/serverFns/billing'
+import { BillingUnavailableError, type ProFeature } from '@allbluecn/kernel'
+import { getTauriInvoke } from '@allbluecn/shared/lib/desktop-detect'
+import { implementedModules } from '@/plugins/modules.gen'
+import { FeatureRegistry, OSS_BASE_FEATURES, type FeatureKey, type ResourceSnapshots } from '@allbluecn/shared'
+
+interface PlanState {
+  planName: string
+  features: Record<string, boolean>
+  unavailable: FeatureKey[]
+  resources: ResourceSnapshots | null
+  loading: boolean
+  error?: Error
+}
+
+const DEFAULT_OSS_RESOURCES: ResourceSnapshots = {
+  seats: { limit: 'unlimited', usage: 0 },
+  guestSeats: { limit: 'unlimited', usage: 0 },
+  aiQuotaMonthly: { limit: 'unlimited', usage: 0 },
+  agentQuota: { limit: 'unlimited', usage: 0 },
+  skillQuota: { limit: 'unlimited', usage: 0 },
+  workspaces: { limit: 'unlimited', usage: 0 },
+}
+
+function buildOssFallback(): PlanState {
+  const features: Record<string, boolean> = {}
+  for (const k of OSS_BASE_FEATURES) {
+    features[k] = true
+  }
+  const unavailable: FeatureKey[] = []
+  for (const [key, meta] of Object.entries(
+    FeatureRegistry,
+  ) as [FeatureKey, typeof FeatureRegistry[FeatureKey]][]) {
+    if (meta.module && implementedModules[meta.module as ProFeature] === false) {
+      unavailable.push(key)
+    }
+  }
+  return {
+    planName: 'open-source',
+    features,
+    unavailable,
+    resources: DEFAULT_OSS_RESOURCES,
+    loading: false,
+  }
+}
+
+const SubscriptionContext = createContext<PlanState>(buildOssFallback())
+
+export function useSubscription(): PlanState {
+  return useContext(SubscriptionContext)
+}
+
+export function SubscriptionProvider({
+  children,
+}: {
+  children: React.ReactNode
+}): ReactElement {
+  const [state, setState] = useState<PlanState>(buildOssFallback())
+
+  useEffect(() => {
+    let cancelled = false
+    setState((prev) => ({ ...prev, loading: true }))
+    getEffectivePlanFn()
+      .then((data) => {
+        if (!cancelled) {
+          setState({
+            planName: data.planName,
+            features: data.features,
+            unavailable: data.unavailable ?? [],
+            resources: data.resources,
+            loading: false,
+          })
+        }
+      })
+      .catch((error) => {
+        if (!cancelled) {
+          if (error instanceof BillingUnavailableError) {
+            setState(buildOssFallback())
+          } else {
+            setState({ ...buildOssFallback(), error })
+          }
+        }
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  useEffect(() => {
+    if (state.loading) return
+    let cancelled = false
+    getTauriInvoke().then((invoke) => {
+      if (cancelled || !invoke) return
+      invoke('update_plan_state', {
+        planName: state.planName,
+        features: state.features,
+      }).catch(() => {
+      })
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [state.planName, state.features, state.loading])
+
+  return (
+    <SubscriptionContext.Provider value={state}>
+      {children}
+    </SubscriptionContext.Provider>
+  )
+}

package/src/components/billing/upgrade-prompt.tsx

@@ -0,0 +1,49 @@
+import { Link } from '@tanstack/react-router'
+import { ArrowRight } from 'lucide-react'
+import { type ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
+import { isChina } from '@/lib/deploy-region'
+
+interface UpgradePromptProps {
+  feature: string
+}
+
+export function UpgradePrompt({ feature }: UpgradePromptProps): ReactElement {
+  const { t } = useTranslation('billing')
+
+  const featureLabels: Record<string, string> = {
+    multiProvider: t('featureMultiProvider'),
+    hostedAi: t('featureHostedAi'),
+    byokAi: t('featureByokAi'),
+    aiQuota: t('featureAiQuota'),
+    sso: t('featureSso'),
+    auditLog: t('featureAuditLog'),
+    largePageSize: t('featureLargePageSize'),
+  }
+
+  const label = featureLabels[feature] ?? feature
+
+  if (isChina()) {
+    return (
+      <div className="flex flex-col items-center gap-2 p-4 rounded-lg border border-dashed border-primary/20 bg-muted/50 text-center">
+        <p className="text-sm text-muted-foreground">
+          {t('comingSoon')}
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-2 p-4 rounded-lg border border-dashed border-primary/20 bg-muted/50 text-center">
+      <p className="text-sm text-muted-foreground">
+        {t('needHigherPlan', { label })}
+      </p>
+      <Link
+        to="/pricing"
+        className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+      >
+        {t('upgradeToPro')} <ArrowRight size={14} />
+      </Link>
+    </div>
+  )
+}

package/src/components/billing/use-feature.ts

@@ -0,0 +1,29 @@
+import { useSubscription } from './subscription-provider'
+import { useSession } from '@/lib/auth/auth-client'
+import { type FeatureKey } from '@allbluecn/shared'
+
+interface FeatureState {
+  enabled: boolean
+  loading: boolean
+  requiresLogin?: boolean
+  unavailable?: boolean
+}
+
+export function useFeature(feature: FeatureKey): FeatureState {
+  const { features, loading, unavailable } = useSubscription()
+  const { data: session } = useSession()
+  const isGuest = session?.user?.id === 'local-guest'
+
+  if (unavailable?.includes(feature)) {
+    return { enabled: false, loading: false, unavailable: true }
+  }
+
+  if (isGuest) {
+    return { enabled: false, loading: false, requiresLogin: true }
+  }
+
+  return {
+    enabled: features[feature] === true,
+    loading,
+  }
+}