@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/servers/index.stx

@@ -0,0 +1,483 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Servers')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="px-4 sm:px-6 lg:px-8">
+    <div class="flex items-center justify-between mb-8">
+      <PageHeader title="Servers" description="Manage all your application servers." />
+      <div class="sm:flex-none mt-4 sm:ml-16 sm:mt-0">
+        <button type="button" class="block px-3 py-2 font-semibold text-center text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">Add Server</button>
+      </div>
+    </div>
+
+    <div class="mb-8 bg-white dark:bg-neutral-700 rounded-lg shadow">
+      <div class="p-6">
+        <div class="flex items-center justify-between mb-4">
+          <h4 class="font-medium text-base text-gray-900 dark:text-neutral-100">Infrastructure overview</h4>
+          <span class="text-gray-500 text-sm dark:text-neutral-400">{{ serversRaw.length }} servers</span>
+        </div>
+
+        <div class="grid gap-6 grid-cols-1 lg:grid-cols-12">
+          <div class="lg:col-span-3">
+            <div class="flex flex-col items-center p-4 bg-pink-50 dark:bg-pink-900/30 rounded-lg">
+              <div class="flex items-center justify-center mb-2 h-12 w-12 text-pink-600 dark:text-pink-300 bg-pink-200 dark:bg-pink-900 rounded-full">
+                <div class="h-6 w-6 i-hugeicons-globe"></div>
+              </div>
+              <p class="font-medium text-gray-900 text-sm dark:text-white">DNS</p>
+              <p class="text-gray-500 text-xs dark:text-neutral-400">Entry point</p>
+            </div>
+          </div>
+
+          <div class="hidden lg:flex items-center justify-center lg:col-span-1 text-gray-400 dark:text-neutral-500">
+            <div class="h-6 w-6 i-hugeicons-arrow-right-01"></div>
+          </div>
+
+          <div class="lg:col-span-3">
+            <div class="flex flex-col items-center p-4 bg-blue-50 dark:bg-blue-900/30 rounded-lg">
+              <div class="flex items-center justify-center mb-2 h-12 w-12 text-blue-600 dark:text-blue-300 bg-blue-200 dark:bg-blue-900 rounded-full">
+                <div class="h-6 w-6 i-hugeicons-balance"></div>
+              </div>
+              <p class="font-medium text-gray-900 text-sm dark:text-white">Load balancer</p>
+              <p class="text-gray-500 text-xs dark:text-neutral-400">{{ useLoadBalancer ? 'Enabled' : 'Disabled' }}</p>
+            </div>
+          </div>
+
+          <div class="hidden lg:flex items-center justify-center lg:col-span-1 text-gray-400 dark:text-neutral-500">
+            <div class="h-6 w-6 i-hugeicons-arrow-right-01"></div>
+          </div>
+
+          <div class="lg:col-span-4">
+            <div class="space-y-2">
+              <template :for="group in serversByType">
+                <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-neutral-800 rounded-lg">
+                  <div class="flex gap-2 items-center">
+                    <span :class="typeBadgeClassFor(group.type)">{{ group.label }}</span>
+                  </div>
+                  <span class="font-mono text-gray-900 text-sm dark:text-white">×{{ group.servers.length }}</span>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between mb-3 mt-6">
+          <h5 class="font-medium text-gray-900 text-sm dark:text-neutral-100">Topology</h5>
+          <p class="text-gray-500 text-xs dark:text-neutral-400">Drag nodes · scroll to zoom</p>
+        </div>
+        <div id="servers_topology" class="h-[420px] w-full bg-neutral-50 dark:bg-neutral-800 rounded-lg"></div>
+      </div>
+    </div>
+
+    <div class="mb-6">
+      <div class="relative max-w-md">
+        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+          <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+        </div>
+        <input x-model="searchQuery" type="text" placeholder="Search servers..." class="block placeholder-gray-500 pl-10 pr-3 py-2 w-full leading-5 text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+      </div>
+    </div>
+
+    <div class="overflow-hidden bg-white dark:bg-neutral-700 rounded-lg shadow">
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-600">
+          <thead class="bg-gray-50 dark:bg-neutral-800">
+            <tr>
+              <th scope="col" @click="toggleSort('name')" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
+                <div class="flex gap-1 items-center">Name <div :class="sortIconClass('name')"></div></div>
+              </th>
+              <th scope="col" @click="toggleSort('type')" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
+                <div class="flex gap-1 items-center">Type <div :class="sortIconClass('type')"></div></div>
+              </th>
+              <th scope="col" @click="toggleSort('region')" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
+                <div class="flex gap-1 items-center">Region <div :class="sortIconClass('region')"></div></div>
+              </th>
+              <th scope="col" @click="toggleSort('size')" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
+                <div class="flex gap-1 items-center">Size <div :class="sortIconClass('size')"></div></div>
+              </th>
+              <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-400">OS</th>
+              <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-400">Database</th>
+              <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-400">Search</th>
+              <th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th>
+            </tr>
+          </thead>
+          <tbody class="bg-white dark:bg-neutral-700 divide-gray-200 divide-y dark:divide-neutral-600">
+            <template :for="server in filteredServers">
+              <tr class="hover:bg-gray-50 dark:hover:bg-neutral-600">
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="font-medium text-gray-900 text-sm dark:text-neutral-100">{{ server.name }}</div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <span :class="typeBadgeClassFor(server.type)">{{ server.type }}</span>
+                </td>
+                <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ server.region }}</td>
+                <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ server.size }}</td>
+                <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ server.serverOS }}</td>
+                <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ server.database || 'None' }}</td>
+                <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ server.searchEngine || 'None' }}</td>
+                <td class="px-6 py-4 font-medium text-right text-sm whitespace-nowrap">
+                  <div class="flex gap-4 items-center justify-end">
+                    <button @click="selectServer(server.key)" class="text-gray-600 dark:text-neutral-300 hover:text-gray-900 dark:hover:text-white">View</button>
+                    <a :href="serverEditHref(server.key)" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300">Edit</a>
+                  </div>
+                </td>
+              </tr>
+            </template>
+            <tr :show="filteredServers().length === 0">
+              <td colspan="8" class="px-6 py-8 text-center text-gray-500 text-sm dark:text-neutral-400">No servers match your search.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div :show="selectedServer() !== null" @click.self="closeServer()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black bg-opacity-50">
+      <div class="overflow-y-auto p-6 max-h-[90vh] max-w-2xl w-full bg-white dark:bg-neutral-800 rounded-lg shadow-xl">
+        <div class="flex items-start justify-between mb-4">
+          <div>
+            <h3 class="font-semibold text-gray-900 text-lg dark:text-white">{{ selectedServer()?.name }}</h3>
+            <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ selectedServer()?.domain }}</p>
+          </div>
+          <button @click="closeServer()" class="text-gray-400 dark:text-neutral-300 hover:text-gray-600 dark:hover:text-white">
+            <i class="h-5 w-5 i-hugeicons-cancel-01"></i>
+          </button>
+        </div>
+
+        <dl class="grid gap-3 grid-cols-1 sm:grid-cols-2">
+          <template :for="entry in selectedDetails">
+            <div class="flex gap-4 justify-between py-2 border-gray-100 border-t dark:border-neutral-700">
+              <dt class="text-gray-500 text-sm dark:text-neutral-400">{{ entry.label }}</dt>
+              <dd class="font-medium text-gray-900 text-right text-sm dark:text-white">{{ entry.value }}</dd>
+            </div>
+          </template>
+        </dl>
+      </div>
+    </div>
+
+    <div class="mt-12">
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Recent Events</h3>
+          <p class="mt-2 text-gray-700 text-sm dark:text-neutral-400">Latest server events and notifications.</p>
+        </div>
+      </div>
+
+      <div class="inline-block min-w-full align-middle">
+        <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+          <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-600">
+            <thead class="bg-gray-50 dark:bg-neutral-600">
+              <tr>
+                <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Type</th>
+                <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Service</th>
+                <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Message</th>
+                <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-100">Timestamp</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-700 divide-gray-200 divide-y dark:divide-neutral-700">
+              <template :for="event in serverEventsRaw">
+                <tr class="hover:bg-gray-50 dark:hover:bg-neutral-600">
+                  <td class="pl-4 pr-3 py-4 sm:pl-6 text-sm whitespace-nowrap">
+                    <div :class="eventTypeIcon(event.type) + ' ' + eventTypeColor(event.type)" class="h-5 w-5"></div>
+                  </td>
+                  <td class="px-3 py-4 text-gray-900 text-sm whitespace-nowrap dark:text-neutral-100">{{ event.service }}</td>
+                  <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">{{ event.message }}</td>
+                  <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ event.timestamp }}</td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+interface ServerConfig {
+  key: string
+  name: string
+  domain: string
+  region: string
+  type: string
+  size: string
+  diskSize: number
+  serverOS: string
+  bunVersion: string
+  database: string
+  databaseName: string
+  searchEngine: string
+}
+
+const serversData: ServerConfig[] = [
+  { key: 'app1', name: 'app-cosmic-nebula', domain: 'stacksjs.com', region: 'us-east-1', type: 'app', size: 't3.micro', diskSize: 20, serverOS: 'ubuntu-24-lts-x86_64', bunVersion: 'v1.2.4', database: 'sqlite', databaseName: 'stacks', searchEngine: 'meilisearch' },
+  { key: 'worker1', name: 'worker-cosmic-nebula', domain: 'stacksjs.com', region: 'us-east-1', type: 'worker', size: 't3.micro', diskSize: 20, serverOS: 'ubuntu-24-lts-x86_64', bunVersion: 'v1.2.4', database: '', databaseName: '', searchEngine: '' },
+  { key: 'worker2', name: 'worker2-cosmic-nebula', domain: 'stacksjs.com', region: 'us-east-1', type: 'worker', size: 't3.micro', diskSize: 20, serverOS: 'ubuntu-24-lts-x86_64', bunVersion: 'v1.2.4', database: '', databaseName: '', searchEngine: '' },
+  { key: 'worker3', name: 'worker3-cosmic-nebula', domain: 'stacksjs.com', region: 'us-east-1', type: 'worker', size: 't3.micro', diskSize: 20, serverOS: 'ubuntu-24-lts-x86_64', bunVersion: 'v1.2.4', database: '', databaseName: '', searchEngine: '' },
+  { key: 'cache1', name: 'cache-cosmic-nebula', domain: 'stacksjs.com', region: 'us-east-1', type: 'cache', size: 't3.micro', diskSize: 20, serverOS: 'ubuntu-24-lts-x86_64', bunVersion: 'v1.2.4', database: '', databaseName: '', searchEngine: '' },
+  { key: 'database1', name: 'database-cosmic-nebula', domain: 'stacksjs.com', region: 'us-east-1', type: 'database', size: 't3.micro', diskSize: 20, serverOS: 'ubuntu-24-lts-x86_64', bunVersion: '', database: 'sqlite', databaseName: 'stacks', searchEngine: '' },
+  { key: 'search1', name: 'search-cosmic-nebula', domain: 'stacksjs.com', region: 'us-east-1', type: 'search', size: 't3.micro', diskSize: 20, serverOS: 'ubuntu-24-lts-x86_64', bunVersion: 'v1.2.4', database: '', databaseName: '', searchEngine: 'meilisearch' },
+]
+
+// Grouped view + static events — moved out of the former
+// `<script server>` block (stacksjs/stacks#1838).
+const serversByType = ['app', 'worker', 'cache', 'database', 'search']
+  .map(type => ({
+    type,
+    label: type.charAt(0).toUpperCase() + type.slice(1),
+    servers: serversData.filter(s => s.type === type),
+  }))
+  .filter(group => group.servers.length > 0)
+
+const useLoadBalancer = true
+
+const serverEventsRaw = [
+  { id: '1', service: 'App Server', type: 'success', message: 'Server deployment completed successfully', timestamp: '2024-03-21 14:23:45' },
+  { id: '2', service: 'Worker', type: 'info', message: 'New worker instance launched', timestamp: '2024-03-21 14:20:12' },
+  { id: '3', service: 'Database', type: 'warning', message: 'High CPU utilization detected', timestamp: '2024-03-21 14:15:30' },
+  { id: '4', service: 'Cache', type: 'error', message: 'Connection timeout', timestamp: '2024-03-21 14:10:55' },
+  { id: '5', service: 'Search', type: 'success', message: 'Index rebuilt successfully', timestamp: '2024-03-21 14:05:22' },
+]
+
+function eventTypeColor(type: string): string {
+  switch (type) {
+    case 'success': return 'text-green-500'
+    case 'error': return 'text-red-500'
+    case 'warning': return 'text-yellow-500'
+    default: return 'text-blue-500'
+  }
+}
+
+function eventTypeIcon(type: string): string {
+  switch (type) {
+    case 'success': return 'i-hugeicons-checkmark-circle-02'
+    case 'error': return 'i-hugeicons-cancel-circle'
+    case 'warning': return 'i-hugeicons-alert-02'
+    default: return 'i-hugeicons-information-circle'
+  }
+}
+
+const searchQuery = state('')
+const sortKey = state<keyof ServerConfig>('name')
+const sortOrder = state<'asc' | 'desc'>('asc')
+const selectedServerKey = state<string | null>(null)
+
+const filteredServers = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const key = sortKey()
+  const order = sortOrder()
+  const result = serversData.filter((server) => {
+    if (!q)
+      return true
+    return server.name.toLowerCase().includes(q)
+      || server.domain.toLowerCase().includes(q)
+      || server.type.toLowerCase().includes(q)
+      || server.region.toLowerCase().includes(q)
+  })
+  result.sort((a, b) => {
+    const av = String(a[key] ?? '')
+    const bv = String(b[key] ?? '')
+    if (av === bv)
+      return 0
+    return order === 'asc' ? (av < bv ? -1 : 1) : (av < bv ? 1 : -1)
+  })
+  return result
+})
+
+const selectedServer = derived(() => serversData.find(s => s.key === selectedServerKey()) ?? null)
+
+const selectedDetails = derived(() => {
+  const server = selectedServer()
+  if (!server)
+    return []
+  const entries: Array<{ label: string, value: string }> = [
+    { label: 'Domain', value: server.domain },
+    { label: 'Region', value: server.region },
+    { label: 'Type', value: server.type },
+    { label: 'Size', value: server.size },
+    { label: 'Disk', value: `${server.diskSize}GB` },
+    { label: 'OS', value: server.serverOS },
+  ]
+  if (server.bunVersion)
+    entries.push({ label: 'Bun version', value: server.bunVersion })
+  if (server.database)
+    entries.push({ label: 'Database', value: `${server.database}${server.databaseName ? ` (${server.databaseName})` : ''}` })
+  if (server.searchEngine)
+    entries.push({ label: 'Search engine', value: server.searchEngine })
+  return entries
+})
+
+function selectServer(key: string) {
+  selectedServerKey.set(key)
+}
+
+function closeServer() {
+  selectedServerKey.set(null)
+}
+
+function toggleSort(key: keyof ServerConfig) {
+  if (sortKey() === key)
+    sortOrder.set(sortOrder() === 'asc' ? 'desc' : 'asc')
+  else {
+    sortKey.set(key)
+    sortOrder.set('asc')
+  }
+}
+
+function sortIconClass(key: keyof ServerConfig) {
+  if (sortKey() !== key)
+    return 'h-4 w-4 opacity-0'
+  return sortOrder() === 'asc' ? 'h-4 w-4 i-hugeicons-chevron-down' : 'h-4 w-4 i-hugeicons-chevron-up'
+}
+
+function typeBadgeClassFor(type: string): string {
+  const base = 'inline-flex px-2 font-semibold leading-5 text-xs rounded-full'
+  switch (type) {
+    case 'app': return `${base} bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200`
+    case 'worker': return `${base} bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200`
+    case 'cache': return `${base} bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200`
+    case 'database': return `${base} bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200`
+    case 'search': return `${base} bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200`
+    case 'web': return `${base} bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200`
+    default: return `${base} bg-gray-100 text-gray-800 dark:bg-neutral-700 dark:text-neutral-200`
+  }
+}
+
+function serverEditHref(key: string): string {
+  return `/servers/${key}`
+}
+
+function nodeFill(type: 'dns' | 'lb' | 'app' | 'worker' | 'cache' | 'database' | 'search' | 'web'): { ring: string, fill: string } {
+  switch (type) {
+    case 'dns': return { ring: '#EC4899', fill: '#FCE7F3' }
+    case 'lb': return { ring: '#3B82F6', fill: '#DBEAFE' }
+    case 'app': return { ring: '#10B981', fill: '#D1FAE5' }
+    case 'worker': return { ring: '#F59E0B', fill: '#FEF3C7' }
+    case 'cache': return { ring: '#A855F7', fill: '#F3E8FF' }
+    case 'database': return { ring: '#22C55E', fill: '#DCFCE7' }
+    case 'search': return { ring: '#6366F1', fill: '#E0E7FF' }
+    default: return { ring: '#6B7280', fill: '#F3F4F6' }
+  }
+}
+
+let topologyCleanup: (() => void) | null = null
+
+interface TopoNode { id: string, type: 'dns' | 'lb' | 'app' | 'worker' | 'cache' | 'database' | 'search' | 'web', label: string, key?: string, x?: number, y?: number, fx?: number | null, fy?: number | null }
+interface TopoLink { source: string | TopoNode, target: string | TopoNode }
+
+async function renderTopology() {
+  const container = document.getElementById('servers_topology')
+  if (!container)
+    return
+  topologyCleanup?.()
+  container.innerHTML = ''
+
+  const d3 = await import('d3')
+  const width = container.clientWidth || 800
+  const height = container.clientHeight || 420
+
+  const nodes: TopoNode[] = [
+    { id: 'dns', type: 'dns', label: 'DNS' },
+    { id: 'lb', type: 'lb', label: 'Load balancer' },
+    ...serversData.map(s => ({ id: s.key, type: s.type as TopoNode['type'], label: s.name, key: s.key })),
+  ]
+  const links: TopoLink[] = [
+    { source: 'dns', target: 'lb' },
+    ...serversData.map(s => ({ source: 'lb', target: s.key })),
+  ]
+
+  const svg = d3.select(container)
+    .append('svg')
+    .attr('width', width)
+    .attr('height', height)
+    .attr('viewBox', [0, 0, width, height])
+    .attr('style', 'max-width: 100%; height: auto;')
+
+  const zoomGroup = svg.append('g')
+  const zoom = d3.zoom<SVGSVGElement, unknown>()
+    .scaleExtent([0.3, 3])
+    .on('zoom', event => zoomGroup.attr('transform', event.transform.toString()))
+  svg.call(zoom as any)
+
+  const link = zoomGroup.append('g')
+    .attr('stroke', '#94A3B8')
+    .attr('stroke-opacity', 0.5)
+    .attr('stroke-dasharray', '4,4')
+    .selectAll('line')
+    .data(links)
+    .join('line')
+    .attr('stroke-width', 2)
+
+  const node = zoomGroup.append('g')
+    .selectAll<SVGGElement, TopoNode>('g')
+    .data(nodes)
+    .join('g')
+    .attr('cursor', d => d.key ? 'pointer' : 'default')
+    .on('click', (_event, d) => {
+      if (d.key)
+        selectServer(d.key)
+    })
+
+  node.append('circle')
+    .attr('r', 26)
+    .attr('fill', d => nodeFill(d.type).fill)
+    .attr('stroke', d => nodeFill(d.type).ring)
+    .attr('stroke-width', 3)
+
+  node.append('text')
+    .text(d => d.label.length > 14 ? `${d.label.slice(0, 12)}…` : d.label)
+    .attr('text-anchor', 'middle')
+    .attr('dy', 44)
+    .attr('fill', 'currentColor')
+    .attr('font-size', '11px')
+    .attr('font-weight', '500')
+    .attr('class', 'text-gray-700 dark:text-neutral-200')
+    .attr('pointer-events', 'none')
+
+  const drag = d3.drag<SVGGElement, TopoNode>()
+    .on('start', (event, d) => {
+      if (!event.active)
+        simulation.alphaTarget(0.3).restart()
+      d.fx = d.x
+      d.fy = d.y
+    })
+    .on('drag', (event, d) => { d.fx = event.x; d.fy = event.y })
+    .on('end', (event, d) => {
+      if (!event.active)
+        simulation.alphaTarget(0)
+      d.fx = null
+      d.fy = null
+    })
+  node.call(drag as any)
+
+  const simulation = d3.forceSimulation<TopoNode>(nodes)
+    .force('link', d3.forceLink<TopoNode, TopoLink>(links).id(d => d.id).distance(120).strength(1))
+    .force('charge', d3.forceManyBody().strength(-380))
+    .force('x', d3.forceX<TopoNode>(d => d.type === 'dns' ? width * 0.15 : d.type === 'lb' ? width * 0.4 : width * 0.75).strength(0.6))
+    .force('y', d3.forceY<TopoNode>(height / 2).strength(0.15))
+    .force('collide', d3.forceCollide<TopoNode>().radius(38))
+    .on('tick', () => {
+      link
+        .attr('x1', d => (d.source as TopoNode).x ?? 0)
+        .attr('y1', d => (d.source as TopoNode).y ?? 0)
+        .attr('x2', d => (d.target as TopoNode).x ?? 0)
+        .attr('y2', d => (d.target as TopoNode).y ?? 0)
+      node.attr('transform', d => `translate(${d.x ?? 0},${d.y ?? 0})`)
+    })
+
+  topologyCleanup = () => {
+    simulation.stop()
+    container.innerHTML = ''
+  }
+}
+
+onMount(() => {
+  void renderTopology()
+})
+
+onDestroy(() => {
+  topologyCleanup?.()
+  topologyCleanup = null
+})
+</script>
+
+@endsection

package/views/dashboard/settings/billing.stx

@@ -0,0 +1,50 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="container mx-auto px-4 py-8 lg:px-8">
+  <div id="subscribed">
+    <TransactionHistory />
+    <div class="flex space-x-8">
+      <div class="mt-16 px-8 py-6 w-2/3 bg-white dark:bg-neutral-800 ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+        @if(paymentStore.isStateLoading('fetchActivePlan') && paymentStore.isStateLoading('fetchStripeCustomer'))
+          <LoadingDetails :height="24" />
+        @else
+          <div class="w-full">
+            @if(showCurrentPlan)
+              <ActivePlan />
+            @else
+              <Plans />
+            @endif
+          </div>
+        @endif
+      </div>
+      <PaymentMethod />
+    </div>
+  </div>
+</div>
+<script client>
+import { useAuth } from '../../../functions/auth'
+import { useBillable } from '../../../functions/billing/payments'
+
+// Moved out of the former `<script server>` block (stacksjs/stacks#1838).
+// `usePaymentStore` is auto-imported by stx.
+const { isEmpty, showCurrentPlan } = useBillable()
+const paymentStore = usePaymentStore()
+
+onMount(async () => {
+  const { user } = useAuth()
+  const userId = user.value?.id
+
+  if (!userId) return
+
+  await paymentStore.fetchStripeCustomer(userId).then(async () => {
+    if (!isEmpty(paymentStore.getStripeCustomer)) {
+      await paymentStore.fetchDefaultPaymentMethod(userId)
+      await paymentStore.fetchUserActivePlan(userId)
+      await paymentStore.fetchTransactionHistory(userId)
+    }
+  })
+})
+</script>
+
+@endsection