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>

tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionActions.test.ts

@@ -0,0 +1,137 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
+
+// Mock dependencies
+const mockFetchBalance = vi.fn()
+const mockFetchStatus = vi.fn()
+const mockShowTopUpCreditsDialog = vi.fn()
+const mockExecute = vi.fn()
+const mockT = vi.fn((key: string) => {
+  if (key === 'subscription.nextBillingCycle') return 'next billing cycle'
+  return key
+})
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: mockT
+  })
+}))
+
+vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
+  useFirebaseAuthActions: () => ({
+    fetchBalance: mockFetchBalance
+  })
+}))
+
+const mockFormattedRenewalDate = { value: '2024-12-31' }
+
+vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
+  useSubscription: () => ({
+    fetchStatus: mockFetchStatus,
+    formattedRenewalDate: mockFormattedRenewalDate
+  })
+}))
+
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => ({
+    showTopUpCreditsDialog: mockShowTopUpCreditsDialog
+  })
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    execute: mockExecute
+  })
+}))
+
+// Mock window.open
+const mockOpen = vi.fn()
+Object.defineProperty(window, 'open', {
+  writable: true,
+  value: mockOpen
+})
+
+describe('useSubscriptionActions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFormattedRenewalDate.value = '2024-12-31'
+  })
+
+  describe('refreshTooltip', () => {
+    it('should format tooltip with renewal date', () => {
+      const { refreshTooltip } = useSubscriptionActions()
+      expect(refreshTooltip.value).toBe('Refreshes on 2024-12-31')
+    })
+
+    it('should use fallback text when no renewal date', () => {
+      mockFormattedRenewalDate.value = ''
+      const { refreshTooltip } = useSubscriptionActions()
+      expect(refreshTooltip.value).toBe('Refreshes on next billing cycle')
+      expect(mockT).toHaveBeenCalledWith('subscription.nextBillingCycle')
+    })
+  })
+
+  describe('handleAddApiCredits', () => {
+    it('should call showTopUpCreditsDialog', () => {
+      const { handleAddApiCredits } = useSubscriptionActions()
+      handleAddApiCredits()
+      expect(mockShowTopUpCreditsDialog).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('handleMessageSupport', () => {
+    it('should execute support command and manage loading state', async () => {
+      const { handleMessageSupport, isLoadingSupport } =
+        useSubscriptionActions()
+
+      expect(isLoadingSupport.value).toBe(false)
+
+      const promise = handleMessageSupport()
+      expect(isLoadingSupport.value).toBe(true)
+
+      await promise
+      expect(mockExecute).toHaveBeenCalledWith('Comfy.ContactSupport')
+      expect(isLoadingSupport.value).toBe(false)
+    })
+
+    it('should handle errors gracefully', async () => {
+      mockExecute.mockRejectedValueOnce(new Error('Command failed'))
+      const { handleMessageSupport, isLoadingSupport } =
+        useSubscriptionActions()
+
+      await handleMessageSupport()
+      expect(isLoadingSupport.value).toBe(false)
+    })
+  })
+
+  describe('handleRefresh', () => {
+    it('should call both fetchBalance and fetchStatus', async () => {
+      const { handleRefresh } = useSubscriptionActions()
+      await handleRefresh()
+
+      expect(mockFetchBalance).toHaveBeenCalledOnce()
+      expect(mockFetchStatus).toHaveBeenCalledOnce()
+    })
+
+    it('should handle errors gracefully', async () => {
+      mockFetchBalance.mockRejectedValueOnce(new Error('Fetch failed'))
+      const { handleRefresh } = useSubscriptionActions()
+
+      // Should not throw
+      await expect(handleRefresh()).resolves.toBeUndefined()
+    })
+  })
+
+  describe('handleLearnMoreClick', () => {
+    it('should open learn more URL', () => {
+      const { handleLearnMoreClick } = useSubscriptionActions()
+      handleLearnMoreClick()
+
+      expect(mockOpen).toHaveBeenCalledWith(
+        'https://docs.comfy.org/get_started/cloud',
+        '_blank'
+      )
+    })
+  })
+})