feat(server+web+desktop): Phase 3.2-B Payple 결제 연동 + 대시보드 Premium 상태 표시

Payple PG 연동:
- _shared/payple.ts: Payple API 래퍼 (auth/billing/cancel/deleteBillingKey)
- payple-checkout Edge Function: 빌링키 결제 + 구독 활성화
- payple-webhook Edge Function: 결제완료/취소 이벤트
- payple-manage Edge Function: 구독 취소 (빌링키 해지)
- DB migration: payment_provider + payple_payer_id + payple_pay_oid
- 웹 billing 페이지: Payple JS SDK 결제창 + 관리 버튼 (Stripe 대체)
- Electron LicenseModal: shell.openExternal → 웹 결제 페이지

대시보드 Premium 상태:
- CrtDisplay services에 PREMIUM LLM LED 추가
- 백엔드 인디케이터 카드 (Local/Premium) + 티어 카드
- 사용량 섹션: 전 티어 표시 + 모델별 Premium 쿼터
- 12개 locale × 14개 i18n 키

apps/desktop/src/renderer/components/LicenseModal.tsx

@@ -83,9 +83,9 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
   const isFree = currentTier === 'free'
   const isPro = currentTier === 'pro'
 
-  const handleUpgrade = useCallback(() => {
-    alert(t('license.paymentPending'))
-  }, [t])
+  const handleUpgrade = useCallback((tier: 'pro' | 'pro_plus' = 'pro') => {
+    window.electronAPI.license.openBilling({ tier })
+  }, [])
 
   return (
     <Dialog
@@ -141,7 +141,7 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
 
             {isFree && (
               <>
-                <PhysicalButton onClick={handleUpgrade} sx={{ width: '100%' }}>
+                <PhysicalButton onClick={() => handleUpgrade('pro')} sx={{ width: '100%' }}>
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                     <Led color="green" size={8} />
                     <PhosphorText variant="compact">
@@ -149,7 +149,7 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
                     </PhosphorText>
                   </Box>
                 </PhysicalButton>
-                <PhysicalButton onClick={handleUpgrade} sx={{ width: '100%' }}>
+                <PhysicalButton onClick={() => handleUpgrade('pro_plus')} sx={{ width: '100%' }}>
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                     <Led color="green" size={8} />
                     <PhosphorText variant="compact">
@@ -168,7 +168,7 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
                     {t('license.currentPlan')} — {t('license.proPlan')}
                   </PhosphorText>
                 </Box>
-                <PhysicalButton onClick={handleUpgrade} sx={{ width: '100%' }}>
+                <PhysicalButton onClick={() => handleUpgrade('pro_plus')} sx={{ width: '100%' }}>
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                     <Led color="green" size={8} />
                     <PhosphorText variant="compact">

apps/desktop/src/renderer/pages/DashboardPage.tsx

@@ -13,6 +13,23 @@ import { formatHotkeyLabel } from '../utils/format-hotkey'
 import { FileDropZone } from '../components/FileDropZone'
 import type { StatsSummary, HistoryEntry, HotkeyBinding, CaptionState, LicenseTier, UsageQuota } from '@d3ro/core/types'
 
+// ── Premium 쿼터 모델별 한도 (서버 quota.ts / LicenseService QUOTA_LIMITS 와 동기) ──
+const PREMIUM_MODEL_LIMITS: Record<LicenseTier, Array<{ model: string; i18nKey: string; limit: number; period: 'daily' | 'weekly' }>> = {
+  free: [
+    { model: 'llm_haiku', i18nKey: 'dashboard.modelHaiku', limit: 250, period: 'weekly' },
+  ],
+  pro: [
+    { model: 'llm_haiku', i18nKey: 'dashboard.modelHaiku', limit: 1500, period: 'daily' },
+    { model: 'llm_sonnet', i18nKey: 'dashboard.modelSonnet', limit: 300, period: 'daily' },
+    { model: 'llm_opus', i18nKey: 'dashboard.modelOpus', limit: 50, period: 'daily' },
+  ],
+  pro_plus: [
+    { model: 'llm_haiku', i18nKey: 'dashboard.modelHaiku', limit: -1, period: 'daily' },
+    { model: 'llm_sonnet', i18nKey: 'dashboard.modelSonnet', limit: 1500, period: 'daily' },
+    { model: 'llm_opus', i18nKey: 'dashboard.modelOpus', limit: 300, period: 'daily' },
+  ],
+}
+
 // ── 메인 컴포넌트 ─────────────────────────────────────
 
 export function DashboardPage(): React.ReactElement {
@@ -27,6 +44,7 @@ export function DashboardPage(): React.ReactElement {
   const audioDecayRef = useRef<ReturnType<typeof setInterval> | null>(null)
   const [licenseTier, setLicenseTier] = useState<LicenseTier>('free')
   const [usageQuotas, setUsageQuotas] = useState<UsageQuota[]>([])
+  const [premiumStatus, setPremiumStatus] = useState<{ available: boolean; backend: 'local' | 'premium' } | null>(null)
 
   const loadData = useCallback(() => {
     window.electronAPI.stats.getSummary().then((r) => {
@@ -50,6 +68,9 @@ export function DashboardPage(): React.ReactElement {
     window.electronAPI.license.getAllUsage().then((r) => {
       if (r.success) setUsageQuotas(r.data)
     })
+    window.electronAPI.llm.premium.getStatus().then((r) => {
+      if (r.success) setPremiumStatus(r.data)
+    })
   }, [])
 
   useEffect(() => {
@@ -89,9 +110,14 @@ export function DashboardPage(): React.ReactElement {
   const services = useMemo(() => [
     { name: t('service.sttEngine'), status: t('service.ready'), ok: true },
     { name: t('service.ollamaLlm'), status: ollamaConnected ? t('service.connected') : t('service.offline'), ok: ollamaConnected },
+    {
+      name: t('service.premiumLlm'),
+      status: premiumStatus?.available ? t('service.connected') : t('service.notConfigured'),
+      ok: premiumStatus?.available ?? false,
+    },
     { name: t('service.hotkeyHook'), status: t('service.active'), ok: true },
     { name: t('service.audioInput'), status: t('service.standby'), ok: true },
-  ], [t, ollamaConnected])
+  ], [t, ollamaConnected, premiumStatus])
 
   return (
     <Box sx={{ maxWidth: 900, mx: 'auto', p: 4, pb: 8 }}>
@@ -250,8 +276,51 @@ export function DashboardPage(): React.ReactElement {
         ))}
       </Box>
 
-      {/* ── 2.4. 사용량 바 (Free 티어) ─────────────── */}
-      {licenseTier === 'free' && usageQuotas.length > 0 && (
+      {/* ── 2.4. 백엔드 인디케이터 + 사용량 바 ─────────────── */}
+      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2, mt: 2 }}>
+        {/* 현재 백엔드 카드 */}
+        <MetalCard>
+          <Box sx={{ px: 1, py: 0.5 }}>
+            <PhosphorText variant="label" sx={{ mb: 1, display: 'block' }}>
+              {t('dashboard.currentBackend').toUpperCase()}
+            </PhosphorText>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <Led
+                color={premiumStatus?.backend === 'premium' ? 'green' : 'amber'}
+                size={8}
+                pulse={premiumStatus?.backend === 'premium'}
+              />
+              <PhosphorText variant="value">
+                {premiumStatus?.backend === 'premium'
+                  ? t('dashboard.backendPremium').toUpperCase()
+                  : t('dashboard.backendLocal').toUpperCase()}
+              </PhosphorText>
+            </Box>
+          </Box>
+        </MetalCard>
+
+        {/* 티어 카드 */}
+        <MetalCard>
+          <Box sx={{ px: 1, py: 0.5 }}>
+            <PhosphorText variant="label" sx={{ mb: 1, display: 'block' }}>
+              {t('license.currentTier').toUpperCase()}
+            </PhosphorText>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <Led
+                color={licenseTier === 'free' ? 'amber' : 'green'}
+                size={8}
+                pulse={licenseTier !== 'free'}
+              />
+              <PhosphorText variant="value">
+                {t(`license.${licenseTier === 'pro_plus' ? 'proPlus' : licenseTier}`).toUpperCase()}
+              </PhosphorText>
+            </Box>
+          </Box>
+        </MetalCard>
+      </Box>
+
+      {/* 사용량 바 — 모든 티어에서 표시 */}
+      {usageQuotas.length > 0 && (
         <Box sx={{ mt: 2 }}>
           <MetalCard>
             <Box sx={{ px: 1, py: 0.5 }}>
@@ -288,6 +357,45 @@ export function DashboardPage(): React.ReactElement {
                   )}
                 </Box>
               ))}
+
+              {/* Premium 모델별 쿼터 표시 */}
+              {premiumStatus?.backend === 'premium' && PREMIUM_MODEL_LIMITS[licenseTier].length > 0 && (
+                <>
+                  <PhosphorText variant="label" sx={{ mt: 1.5, mb: 0.5, display: 'block', color: d3roPalette.tag.green }}>
+                    {t('dashboard.premiumQuota').toUpperCase()}
+                  </PhosphorText>
+                  {PREMIUM_MODEL_LIMITS[licenseTier].map((m) => (
+                    <Box key={m.model} sx={{ mb: 1 }}>
+                      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.3 }}>
+                        <PhosphorText variant="small">
+                          {t(m.i18nKey)}
+                        </PhosphorText>
+                        <PhosphorText variant="small" sx={{ color: d3roPalette.accent.amber }}>
+                          {m.limit === -1
+                            ? t('license.unlimited')
+                            : `${m.limit}/${t(m.period === 'weekly' ? 'dashboard.quotaWeekly' : 'dashboard.quotaDaily')}`}
+                        </PhosphorText>
+                      </Box>
+                      {m.limit > 0 && (
+                        <Box sx={{
+                          height: 3,
+                          borderRadius: '2px',
+                          bgcolor: d3roPalette.bg.inset,
+                          overflow: 'hidden',
+                        }}>
+                          <Box sx={{
+                            height: '100%',
+                            width: '0%',
+                            bgcolor: d3roPalette.tag.green,
+                            borderRadius: '2px',
+                            transition: 'width 0.3s ease',
+                          }} />
+                        </Box>
+                      )}
+                    </Box>
+                  ))}
+                </>
+              )}
             </Box>
           </MetalCard>
         </Box>