update subscription panel for new designs (#6378)

## Summary

Refactoring of subscription panel to improve maintainability and match
Figma design exactly. Extracted business logic into
`useSubscriptionCredits` and `useSubscriptionActions` composables, added
comprehensive testing, and enhanced the design system with proper
semantic tokens.

- Extract credit calculations and action handlers into reusable
composables
- Add component and unit tests with proper mocking patterns  
- Update terminology from "API Nodes" to "Partner Nodes"
- Make credit breakdown dynamic using real API data instead of hardcoded
values
- Add semantic design tokens for modal card surfaces with light/dark
theme support
- Reduce component complexity from ~100 lines to ~25 lines of logic
- Improve layout spacing, typography, and responsive behavior to match
Figma specs

<img width="1948" height="1494" alt="Selection_2220"
src="https://github.com/user-attachments/assets/b922582d-7edf-4884-b787-ad783c896b80"
/>

<img width="1948" height="1494" alt="Selection_2219"
src="https://github.com/user-attachments/assets/50a9f263-9adb-439d-8a89-94a498d394e3"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6378-update-subscription-panel-for-new-designs-29b6d73d3650815c9ce2c5977ac7f893)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>

src/platform/cloud/subscription/composables/useSubscriptionActions.ts

@@ -0,0 +1,66 @@
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useDialogService } from '@/services/dialogService'
+import { useCommandStore } from '@/stores/commandStore'
+
+/**
+ * Composable for handling subscription panel actions and loading states
+ */
+export function useSubscriptionActions() {
+  const { t } = useI18n()
+  const dialogService = useDialogService()
+  const authActions = useFirebaseAuthActions()
+  const commandStore = useCommandStore()
+  const { fetchStatus, formattedRenewalDate } = useSubscription()
+
+  const isLoadingSupport = ref(false)
+
+  const refreshTooltip = computed(() => {
+    const date =
+      formattedRenewalDate.value || t('subscription.nextBillingCycle')
+    return `Refreshes on ${date}`
+  })
+
+  onMounted(() => {
+    void handleRefresh()
+  })
+
+  const handleAddApiCredits = () => {
+    dialogService.showTopUpCreditsDialog()
+  }
+
+  const handleMessageSupport = async () => {
+    try {
+      isLoadingSupport.value = true
+      await commandStore.execute('Comfy.ContactSupport')
+    } catch (error) {
+      console.error('[useSubscriptionActions] Error contacting support:', error)
+    } finally {
+      isLoadingSupport.value = false
+    }
+  }
+
+  const handleRefresh = async () => {
+    try {
+      await Promise.all([authActions.fetchBalance(), fetchStatus()])
+    } catch (error) {
+      console.error('[useSubscriptionActions] Error refreshing data:', error)
+    }
+  }
+
+  const handleLearnMoreClick = () => {
+    window.open('https://docs.comfy.org/get_started/cloud', '_blank')
+  }
+
+  return {
+    isLoadingSupport,
+    refreshTooltip,
+    handleAddApiCredits,
+    handleMessageSupport,
+    handleRefresh,
+    handleLearnMoreClick
+  }
+}

src/platform/cloud/subscription/composables/useSubscriptionCredits.ts

@@ -0,0 +1,61 @@
+import { computed } from 'vue'
+
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { formatMetronomeCurrency } from '@/utils/formatUtil'
+
+/**
+ * Composable for handling subscription credit calculations and formatting
+ */
+export function useSubscriptionCredits() {
+  const authStore = useFirebaseAuthStore()
+
+  const totalCredits = computed(() => {
+    if (!authStore.balance?.amount_micros) return '0.00'
+    try {
+      return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
+    } catch (error) {
+      console.error(
+        '[useSubscriptionCredits] Error formatting total credits:',
+        error
+      )
+      return '0.00'
+    }
+  })
+
+  const monthlyBonusCredits = computed(() => {
+    const balance = authStore.balance as any
+    if (!balance?.cloud_credit_balance_micros) return '0.00'
+    try {
+      return formatMetronomeCurrency(balance.cloud_credit_balance_micros, 'usd')
+    } catch (error) {
+      console.error(
+        '[useSubscriptionCredits] Error formatting monthly bonus credits:',
+        error
+      )
+      return '0.00'
+    }
+  })
+
+  const prepaidCredits = computed(() => {
+    const balance = authStore.balance as any
+    if (!balance?.prepaid_balance_micros) return '0.00'
+    try {
+      return formatMetronomeCurrency(balance.prepaid_balance_micros, 'usd')
+    } catch (error) {
+      console.error(
+        '[useSubscriptionCredits] Error formatting prepaid credits:',
+        error
+      )
+      return '0.00'
+    }
+  })
+
+  const isLoadingBalance = computed(() => authStore.isFetchingBalance)
+
+  return {
+    totalCredits,
+    monthlyBonusCredits,
+    prepaidCredits,
+    isLoadingBalance
+  }
+}