@stacksjs/defaults 0.70.229 → 0.70.231

package/resources/components/Dashboard/Infrastructure/CloudDashboard.stx

@@ -0,0 +1,249 @@
+<script client>
+import type {
+  DashboardCloudEvent,
+  DashboardCloudProject,
+  DashboardCloudResource,
+  DashboardCloudSnapshot,
+  DashboardServerDeployment,
+} from '../../../../app/Actions/Dashboard/Cloud/cloud-overview'
+import { dashboardApi } from '../../../../functions/dashboard-api'
+
+interface ResourceGroup {
+  category: string
+  label: string
+  resources: DashboardCloudResource[]
+}
+
+const project = state<DashboardCloudProject>({
+  name: 'Cloud project',
+  slug: 'app',
+  mode: 'server',
+  provider: 'not configured',
+  region: 'not configured',
+})
+const snapshot = state<DashboardCloudSnapshot | null>(null)
+const loading = state(true)
+const loadError = state('')
+const selectedResource = state<DashboardCloudResource | null>(null)
+
+const resourceGroups = derived<ResourceGroup[]>(() => {
+  const resources = snapshot()?.resources || []
+  const labels: Record<string, string> = {
+    network: 'Network',
+    storage: 'Storage',
+    queue: 'Queues',
+    function: 'Functions',
+    database: 'Databases',
+    cdn: 'Content delivery',
+    container: 'Containers',
+    site: 'Sites',
+  }
+  const order = ['network', 'storage', 'queue', 'function', 'database', 'cdn', 'container', 'site']
+  return order
+    .map(category => ({
+      category,
+      label: labels[category] || category,
+      resources: resources.filter(resource => resource.category === category),
+    }))
+    .filter(group => group.resources.length > 0)
+})
+const totalInstances = derived(() => (snapshot()?.serverDefinitions || []).reduce((total, server) => total + server.instances, 0))
+const attentionDeployments = derived(() => (snapshot()?.deployments || []).filter(deployment => deployment.status === 'attention'))
+const activeResources = derived(() => (snapshot()?.resources || []).filter(resource => resource.status !== 'inactive').length)
+
+function formatDate(value: string | null): string {
+  if (!value)
+    return 'Not recorded'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? 'Not recorded'
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+}
+
+function eventIcon(event: DashboardCloudEvent): string {
+  if (event.type === 'attention')
+    return 'i-hugeicons-alert-02 text-amber-500'
+  if (event.type === 'success')
+    return 'i-hugeicons-checkmark-circle-02 text-green-500'
+  return 'i-hugeicons-information-circle text-blue-500'
+}
+
+function deploymentMessage(deployment: DashboardServerDeployment): string {
+  if (!deployment.operation)
+    return 'No pending operation is recorded.'
+  return `Resize ${deployment.operation.sourceType || 'current type'} to ${deployment.operation.targetType || 'requested type'} is ${deployment.operation.status}.`
+}
+
+function closeResource(): void {
+  selectedResource.set(null)
+}
+
+async function loadCloud(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const response = await dashboardApi<DashboardCloudSnapshot>('/api/dashboard/cloud')
+    project.set(response.project)
+    snapshot.set({
+      ...response,
+      environments: Array.isArray(response.environments) ? response.environments : [],
+      serverDefinitions: Array.isArray(response.serverDefinitions) ? response.serverDefinitions : [],
+      deployments: Array.isArray(response.deployments) ? response.deployments : [],
+      resources: Array.isArray(response.resources) ? response.resources : [],
+      serverlessServices: Array.isArray(response.serverlessServices) ? response.serverlessServices : [],
+      serverlessLinks: Array.isArray(response.serverlessLinks) ? response.serverlessLinks : [],
+      events: Array.isArray(response.events) ? response.events : [],
+    })
+  }
+  catch (error) {
+    snapshot.set(null)
+    loadError.set(error instanceof Error ? error.message : 'Cloud state could not be loaded.')
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === 'Escape')
+    closeResource()
+})
+
+onMount(() => {
+  void loadCloud()
+})
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <div class="flex gap-2 items-center">
+        <h1 class="font-semibold text-2xl text-neutral-900 tracking-tight dark:text-white">Cloud infrastructure</h1>
+        <CloudStatusBadge :status="project().provider === 'not configured' ? 'inactive' : 'configured'" />
+      </div>
+      <p class="mt-1 max-w-2xl text-neutral-500 text-sm dark:text-neutral-400">Configuration from config/cloud.ts kept separate from deployment state persisted by ts-cloud.</p>
+    </div>
+    <Button variant="secondary" :loading="loading()" @click="loadCloud">
+      <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+  </header>
+
+  <div :if="loadError()" role="alert" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/40 border border-red-200 rounded-xl dark:border-red-900">
+    <span>{{ loadError() }}</span>
+    <Button variant="secondary" size="sm" @click="loadCloud">Try again</Button>
+  </div>
+
+  <section class="grid gap-3 grid-cols-2 xl:grid-cols-4">
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Provider</p>
+      <p class="mt-2 capitalize font-semibold text-neutral-900 text-xl dark:text-white">{{ project().provider }}</p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Mode</p>
+      <p class="mt-2 capitalize font-semibold text-neutral-900 text-xl dark:text-white">{{ project().mode }}</p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Compute instances</p>
+      <p class="mt-2 font-semibold text-neutral-900 text-xl dark:text-white">{{ totalInstances() }}</p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Active resources</p>
+      <p class="mt-2 font-semibold text-neutral-900 text-xl dark:text-white">{{ activeResources() }}</p>
+    </div>
+  </section>
+
+  <section :if="attentionDeployments().length > 0" aria-label="Cloud operations needing attention" class="space-y-3">
+    <article :for="deployment in attentionDeployments()" class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between p-4 text-amber-900 dark:text-amber-100 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-xl dark:border-amber-900/70">
+      <div class="flex gap-3 items-start">
+        <span class="shrink-0 mt-0.5 h-5 w-5 text-amber-600 dark:text-amber-400 i-hugeicons-alert-02"></span>
+        <div>
+          <p class="font-semibold text-sm">{{ deployment.serverName }} needs attention</p>
+          <p class="mt-1 text-amber-800 text-sm dark:text-amber-200">{{ deploymentMessage(deployment) }}</p>
+        </div>
+      </div>
+      <StxLink to="/servers" class="shrink-0 font-semibold text-amber-800 text-sm dark:text-amber-200 hover:underline">Inspect server state</StxLink>
+    </article>
+  </section>
+
+  <section class="grid gap-4 lg:grid-cols-[minmax(0,1.4fr)_minmax(18rem,0.6fr)]">
+    <div class="p-5 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <div class="flex gap-4 items-start justify-between">
+        <div>
+          <h2 class="font-semibold text-neutral-900 dark:text-white">Environment state</h2>
+          <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Deployment badges only appear when persisted provider state exists.</p>
+        </div>
+        <span class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ project().region }}</span>
+      </div>
+      <div class="grid gap-3 sm:grid-cols-2 mt-4">
+        <div :for="environment in snapshot()?.environments || []" class="flex gap-3 items-center justify-between p-3 bg-neutral-50 dark:bg-neutral-800 border border-neutral-100 rounded-lg dark:border-neutral-700">
+          <div>
+            <p class="font-semibold text-neutral-900 text-sm dark:text-white">{{ environment.name }}</p>
+            <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">{{ environment.branch || 'no branch' }} · {{ environment.region }}</p>
+          </div>
+          <CloudStatusBadge :status="environment.status" />
+        </div>
+      </div>
+      <p :if="(snapshot()?.environments || []).length === 0" class="mt-4 p-4 text-center text-neutral-500 text-sm dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-800 rounded-lg">No environments are configured.</p>
+    </div>
+
+    <div class="p-5 text-white bg-neutral-950 border border-neutral-800 rounded-xl">
+      <p class="text-neutral-400 text-xs uppercase">State boundary</p>
+      <h2 class="mt-2 font-semibold text-lg">Declared is not deployed</h2>
+      <dl class="grid gap-3 grid-cols-2 mt-5">
+        <div><dt class="text-neutral-400 text-xs">Definitions</dt><dd class="mt-1 font-semibold text-xl">{{ (snapshot()?.serverDefinitions || []).length }}</dd></div>
+        <div><dt class="text-neutral-400 text-xs">Deployments</dt><dd class="mt-1 font-semibold text-xl">{{ (snapshot()?.deployments || []).length }}</dd></div>
+      </dl>
+      <StxLink to="/servers" class="inline-flex gap-2 items-center mt-6 font-semibold text-blue-300 text-sm hover:text-blue-200">
+        Open server inventory
+        <span class="h-4 w-4 i-hugeicons-arrow-right-01"></span>
+      </StxLink>
+    </div>
+  </section>
+
+  <section>
+    <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+      <div>
+        <h2 class="font-semibold text-neutral-900 dark:text-white">Configured resources</h2>
+        <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Only resources present in the current cloud configuration are listed.</p>
+      </div>
+      <p class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ (snapshot()?.resources || []).length }} records</p>
+    </div>
+    <div class="mt-4 space-y-6">
+      <section :for="group in resourceGroups()">
+        <div class="flex gap-2 items-center">
+          <h3 class="font-semibold text-neutral-700 text-sm dark:text-neutral-200">{{ group.label }}</h3>
+          <span class="px-2 py-0.5 text-neutral-600 text-xs dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800 rounded-full">{{ group.resources.length }}</span>
+        </div>
+        <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3 mt-3">
+          <CloudResourceButton :for="resource in group.resources" :item="resource" @inspect="selectedResource.set($event)" />
+        </div>
+      </section>
+    </div>
+    <div :if="!loading() && (snapshot()?.resources || []).length === 0" class="mt-4 p-8 text-center bg-white dark:bg-neutral-900 border border-dashed border-neutral-200 rounded-xl dark:border-neutral-700">
+      <span class="inline-block h-7 w-7 text-neutral-400 i-hugeicons-cloud"></span>
+      <p class="mt-3 font-semibold text-neutral-900 dark:text-white">No cloud resources configured</p>
+      <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Add infrastructure entries to config/cloud.ts to populate this inventory.</p>
+    </div>
+  </section>
+
+  <section :if="(snapshot()?.events || []).length > 0">
+    <h2 class="font-semibold text-neutral-900 dark:text-white">Recorded cloud events</h2>
+    <div class="mt-3 bg-white dark:bg-neutral-900 border border-neutral-200 divide-neutral-200 divide-y rounded-xl dark:border-neutral-700 dark:divide-neutral-700">
+      <article :for="event in snapshot()?.events || []" class="flex gap-3 p-4">
+        <span :class="'shrink-0 mt-0.5 h-5 w-5 ' + eventIcon(event)"></span>
+        <div class="flex-1 min-w-0">
+          <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+            <p class="font-semibold text-neutral-900 text-sm dark:text-white">{{ event.service }}</p>
+            <time class="text-neutral-500 text-xs dark:text-neutral-400">{{ formatDate(event.timestamp) }}</time>
+          </div>
+          <p class="mt-1 text-neutral-600 text-sm dark:text-neutral-300">{{ event.message }}</p>
+        </div>
+      </article>
+    </div>
+  </section>
+
+  <footer :if="snapshot()?.generatedAt" class="text-neutral-400 text-right text-xs dark:text-neutral-500">Snapshot {{ formatDate(snapshot()?.generatedAt || null) }}</footer>
+
+  <CloudDetailsDialog :open="Boolean(selectedResource())" :item="selectedResource()" @close="closeResource" />
+</div>

package/resources/components/Dashboard/Infrastructure/CloudDetailsDialog.stx

@@ -0,0 +1,36 @@
+<script client>
+import type { DashboardCloudResource } from '../../../../app/Actions/Dashboard/Cloud/cloud-overview'
+
+const open = useReactiveProp('open', false)
+const item = useReactiveProp('item', null as DashboardCloudResource | null)
+const emit = defineEmits()
+</script>
+
+<div :if="open() && item()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
+  <button type="button" aria-label="Close cloud resource details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
+  <section role="dialog" aria-modal="true" aria-labelledby="cloud-resource-title" class="overflow-y-auto relative max-h-[90vh] max-w-lg w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700 shadow-xl">
+    <header class="flex gap-4 items-start justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700">
+      <div>
+        <p class="capitalize text-neutral-500 text-xs dark:text-neutral-400">{{ item()?.category }} resource</p>
+        <h2 id="cloud-resource-title" class="mt-1 font-semibold text-lg text-neutral-900 dark:text-white">{{ item()?.name }}</h2>
+      </div>
+      <Button variant="ghost" iconOnly ariaLabel="Close cloud resource details" @click="emit('close')">
+        <span class="block h-5 w-5 i-hugeicons-cancel-01"></span>
+      </Button>
+    </header>
+    <div class="p-5">
+      <div class="flex gap-3 items-center">
+        <CloudStatusBadge :status="item()?.status || 'inactive'" />
+        <span class="capitalize text-neutral-500 text-sm dark:text-neutral-400">{{ item()?.type }}</span>
+      </div>
+      <p class="mt-4 leading-6 text-neutral-700 text-sm dark:text-neutral-300">{{ item()?.description }}</p>
+      <dl :if="(item()?.details || []).length > 0" class="grid gap-4 sm:grid-cols-2 mt-5">
+        <div :for="detail in item()?.details || []">
+          <dt class="text-neutral-500 text-xs dark:text-neutral-400">{{ detail.label }}</dt>
+          <dd class="mt-1 break-all font-medium text-neutral-900 text-sm dark:text-white">{{ detail.value }}</dd>
+        </div>
+      </dl>
+      <p :if="(item()?.details || []).length === 0" class="mt-5 p-3 text-neutral-500 text-sm dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-800 rounded-lg">No additional configuration fields are recorded for this resource.</p>
+    </div>
+  </section>
+</div>

package/resources/components/Dashboard/Infrastructure/CloudResourceButton.stx

@@ -0,0 +1,62 @@
+<script client>
+import type { DashboardCloudResource } from '../../../../app/Actions/Dashboard/Cloud/cloud-overview'
+
+const item = useReactiveProp('item', null as DashboardCloudResource | null)
+const emit = defineEmits()
+
+function iconClass(): string {
+  const category = item()?.category
+  if (category === 'network')
+    return 'i-hugeicons-cellular-network'
+  if (category === 'api')
+    return 'i-hugeicons-globe'
+  if (category === 'assets')
+    return 'i-hugeicons-folder-01'
+  if (category === 'cache')
+    return 'i-hugeicons-database-02'
+  if (category === 'cli')
+    return 'i-hugeicons-command-line'
+  if (category === 'firewall')
+    return 'i-hugeicons-shield-01'
+  if (category === 'storage')
+    return 'i-hugeicons-folder-01'
+  if (category === 'queue')
+    return 'i-hugeicons-message-multiple-02'
+  if (category === 'function')
+    return 'i-hugeicons-function'
+  if (category === 'database')
+    return 'i-hugeicons-database-02'
+  if (category === 'cdn')
+    return 'i-hugeicons-cloud-fast-wind'
+  if (category === 'container')
+    return 'i-hugeicons-package'
+  if (category === 'site')
+    return 'i-hugeicons-globe'
+  return 'i-hugeicons-cloud'
+}
+
+function inspect(): void {
+  const resource = item()
+  if (resource)
+    emit('inspect', resource)
+}
+</script>
+
+<button
+  type="button"
+  :aria-label="'Inspect ' + (item()?.name || 'cloud resource')"
+  class="flex gap-3 items-start p-4 w-full text-left bg-white dark:bg-neutral-900 hover:bg-neutral-50 dark:hover:bg-neutral-800 border border-neutral-200 rounded-xl dark:border-neutral-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 transition-colors"
+  @click="inspect"
+>
+  <span class="flex items-center justify-center shrink-0 h-9 w-9 text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/50 rounded-lg">
+    <span :class="'h-5 w-5 ' + iconClass()"></span>
+  </span>
+  <span class="flex-1 min-w-0">
+    <span class="flex gap-2 items-center justify-between">
+      <span class="font-semibold text-neutral-900 text-sm truncate dark:text-white">{{ item()?.name || 'Unnamed resource' }}</span>
+      <CloudStatusBadge :status="item()?.status || 'inactive'" />
+    </span>
+    <span class="block mt-1 capitalize text-neutral-500 text-xs dark:text-neutral-400">{{ item()?.type || 'Resource' }}</span>
+    <span class="block mt-2 leading-5 text-neutral-600 text-sm dark:text-neutral-300">{{ item()?.description || 'No description recorded.' }}</span>
+  </span>
+</button>

package/resources/components/Dashboard/Infrastructure/CloudStatusBadge.stx

@@ -0,0 +1,29 @@
+<script client>
+const status = useReactiveProp<string>('status', 'configured')
+
+const label = derived(() => status().replaceAll('-', ' '))
+const badgeClass = derived(() => {
+  const base = 'inline-flex items-center gap-1.5 px-2 py-1 font-semibold text-[11px] capitalize rounded-full'
+  if (status() === 'deployed')
+    return `${base} text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40`
+  if (status() === 'attention')
+    return `${base} text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40`
+  if (status() === 'inactive')
+    return `${base} text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800`
+  return `${base} text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40`
+})
+const dotClass = derived(() => {
+  if (status() === 'deployed')
+    return 'h-1.5 w-1.5 bg-green-500 rounded-full'
+  if (status() === 'attention')
+    return 'h-1.5 w-1.5 bg-amber-500 rounded-full'
+  if (status() === 'inactive')
+    return 'h-1.5 w-1.5 bg-neutral-400 rounded-full'
+  return 'h-1.5 w-1.5 bg-blue-500 rounded-full'
+})
+</script>
+
+<span :class="badgeClass()">
+  <span :class="dotClass()"></span>
+  {{ label() }}
+</span>

package/resources/components/Dashboard/Infrastructure/DnsDashboard.stx

@@ -0,0 +1,252 @@
+<script client>
+import type {
+  DashboardDnsDomain,
+  DashboardDnsRecord,
+  DashboardDnsSnapshot,
+  DashboardDnsTypeCount,
+} from '../../../../app/Actions/Dashboard/Infrastructure/dns-overview'
+import { dashboardApi } from '../../../../functions/dashboard-api'
+
+const domains = state<DashboardDnsDomain[]>([])
+const records = state<DashboardDnsRecord[]>([])
+const nameservers = state<string[]>([])
+const typeCounts = state<DashboardDnsTypeCount[]>([])
+const generatedAt = state('')
+const loading = state(true)
+const loadError = state('')
+const search = state('')
+const typeFilter = state('all')
+const selectedRecord = state<DashboardDnsRecord | null>(null)
+
+const filteredRecords = derived(() => {
+  const query = search().trim().toLowerCase()
+  return records().filter((record) => {
+    const matchesType = typeFilter() === 'all' || record.type === typeFilter()
+    const matchesSearch = !query || [
+      record.type,
+      record.name,
+      record.value,
+      record.priority,
+    ].filter(value => value !== null).join(' ').toLowerCase().includes(query)
+    return matchesType && matchesSearch
+  })
+})
+const primaryDomain = derived(() => domains()[0] ?? null)
+const maxTypeCount = derived(() => Math.max(1, ...typeCounts().map(item => item.count)))
+
+function formatDate(value: string): string {
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? 'Not recorded'
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+}
+
+function ttlLabel(record: DashboardDnsRecord): string {
+  return record.ttl === null ? 'Provider default' : `${record.ttl}s`
+}
+
+function typeWidth(item: DashboardDnsTypeCount): string {
+  return `${Math.round((item.count / maxTypeCount()) * 100)}%`
+}
+
+function typeColor(type: string): string {
+  if (type === 'A')
+    return 'bg-blue-500'
+  if (type === 'AAAA')
+    return 'bg-violet-500'
+  if (type === 'CNAME')
+    return 'bg-green-500'
+  if (type === 'MX')
+    return 'bg-amber-500'
+  return 'bg-rose-500'
+}
+
+function inspectRecord(record: DashboardDnsRecord): void {
+  selectedRecord.set(record)
+}
+
+function closeRecord(): void {
+  selectedRecord.set(null)
+}
+
+async function loadDns(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const result = await dashboardApi<DashboardDnsSnapshot>('/api/dashboard/dns')
+    domains.set(Array.isArray(result.domains) ? result.domains : [])
+    records.set(Array.isArray(result.records) ? result.records : [])
+    nameservers.set(Array.isArray(result.nameservers) ? result.nameservers : [])
+    typeCounts.set(Array.isArray(result.typeCounts) ? result.typeCounts : [])
+    generatedAt.set(result.generatedAt || '')
+  }
+  catch (error) {
+    domains.set([])
+    records.set([])
+    nameservers.set([])
+    typeCounts.set([])
+    generatedAt.set('')
+    loadError.set(error instanceof Error ? error.message : 'DNS configuration could not be loaded.')
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === 'Escape')
+    closeRecord()
+})
+
+onMount(() => {
+  void loadDns()
+})
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <div class="flex gap-2 items-center">
+        <h1 class="font-semibold text-2xl text-neutral-900 tracking-tight dark:text-white">DNS</h1>
+        <CloudStatusBadge :status="domains().length || records().length ? 'configured' : 'inactive'" />
+      </div>
+      <p class="mt-1 max-w-2xl text-neutral-500 text-sm dark:text-neutral-400">DNS declarations from config/dns.ts and the project domain from config/cloud.ts.</p>
+    </div>
+    <Button variant="secondary" :loading="loading()" @click="loadDns">
+      <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+  </header>
+
+  <div :if="loadError()" role="alert" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/40 border border-red-200 rounded-xl dark:border-red-900">
+    <span>{{ loadError() }}</span>
+    <Button variant="secondary" size="sm" @click="loadDns">Try again</Button>
+  </div>
+
+  <section class="grid gap-3 grid-cols-2 xl:grid-cols-4">
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Domains</p>
+      <p class="mt-2 font-semibold text-neutral-900 text-xl dark:text-white">{{ domains().length }}</p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Records</p>
+      <p class="mt-2 font-semibold text-neutral-900 text-xl dark:text-white">{{ records().length }}</p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Nameservers</p>
+      <p class="mt-2 font-semibold text-neutral-900 text-xl dark:text-white">{{ nameservers().length }}</p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Hosted zone</p>
+      <p class="mt-2 font-medium text-neutral-900 text-sm truncate dark:text-white">{{ primaryDomain()?.hostedZoneId || 'Not set' }}</p>
+    </div>
+  </section>
+
+  <section class="grid gap-4 grid-cols-1 xl:grid-cols-[minmax(0,1.4fr)_minmax(18rem,0.6fr)]">
+    <div class="p-5 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <div class="flex gap-3 items-start justify-between">
+        <div>
+          <h2 class="font-semibold text-neutral-900 dark:text-white">Configured entry point</h2>
+          <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configuration only. This is not a live DNS resolution or provider health check.</p>
+        </div>
+        <CloudStatusBadge :status="primaryDomain() ? 'configured' : 'inactive'" />
+      </div>
+      <div :if="primaryDomain()" class="flex gap-4 items-center mt-5 p-4 bg-blue-50 dark:bg-blue-950/25 border border-blue-100 rounded-xl dark:border-blue-900/50">
+        <span class="flex items-center justify-center shrink-0 h-10 w-10 text-blue-600 dark:text-blue-300 bg-white/80 dark:bg-black/20 rounded-xl"><span class="h-5 w-5 i-hugeicons-globe"></span></span>
+        <div class="min-w-0">
+          <p class="font-semibold text-neutral-900 truncate dark:text-white">{{ primaryDomain()?.domain }}</p>
+          <p class="mt-1 font-mono text-neutral-500 text-xs truncate dark:text-neutral-400">{{ primaryDomain()?.hostedZoneId || 'No hosted zone ID configured' }}</p>
+        </div>
+      </div>
+      <EmptyState :if="!loading() && !primaryDomain()" icon="i-hugeicons-globe-x" title="No project domain configured" description="Add infrastructure.dns.domain to config/cloud.ts." />
+    </div>
+
+    <div class="p-5 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <h2 class="font-semibold text-neutral-900 dark:text-white">Record distribution</h2>
+      <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Exact counts from config/dns.ts.</p>
+      <div class="mt-5 space-y-3">
+        <div :for="item in typeCounts()" class="grid gap-3 grid-cols-[3.5rem_minmax(0,1fr)_2rem] items-center">
+          <span class="font-mono font-semibold text-neutral-700 text-xs dark:text-neutral-300">{{ item.type }}</span>
+          <div class="overflow-hidden h-2 bg-neutral-100 dark:bg-neutral-800 rounded-full">
+            <div :class="'h-full rounded-full ' + typeColor(item.type)" :style="{ width: typeWidth(item) }"></div>
+          </div>
+          <span class="font-mono text-neutral-500 text-right text-xs dark:text-neutral-400">{{ item.count }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+      <div>
+        <h2 class="font-semibold text-neutral-900 dark:text-white">Configured records</h2>
+        <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Source-controlled declarations. Provider mutations are intentionally not inferred from this page.</p>
+      </div>
+      <div class="flex flex-col gap-2 sm:flex-row">
+        <label class="block relative sm:w-72">
+          <span class="sr-only">Search DNS records</span>
+          <span class="absolute left-3 top-2.5 h-4 w-4 text-neutral-400 i-hugeicons-search-01"></span>
+          <input x-model="search" type="search" placeholder="Search records" class="pl-9 pr-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-neutral-300 rounded-lg dark:border-neutral-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20" />
+        </label>
+        <label>
+          <span class="sr-only">Filter DNS record type</span>
+          <select x-model="typeFilter" class="px-3 py-2 h-10 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-neutral-300 rounded-lg dark:border-neutral-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
+            <option value="all">All types</option>
+            <option value="A">A</option>
+            <option value="AAAA">AAAA</option>
+            <option value="CNAME">CNAME</option>
+            <option value="MX">MX</option>
+            <option value="TXT">TXT</option>
+          </select>
+        </label>
+      </div>
+    </div>
+
+    <div :if="loading()" class="flex items-center justify-center mt-4 py-16 text-neutral-500 text-sm dark:text-neutral-400 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
+      Loading DNS configuration...
+    </div>
+
+    <EmptyState :if="!loading() && !loadError() && filteredRecords().length === 0" icon="i-hugeicons-internet" :title="records().length ? 'No matching DNS records' : 'No DNS records configured'" :description="records().length ? 'Adjust the search or record type filter.' : 'Add records to config/dns.ts, then refresh this page.'" />
+
+    <div :if="!loading() && filteredRecords().length > 0" class="overflow-x-auto mt-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <table class="min-w-full divide-neutral-200 divide-y dark:divide-neutral-700">
+        <thead class="bg-neutral-50 dark:bg-neutral-800/70">
+          <tr>
+            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">Type</th>
+            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">Name</th>
+            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">Value</th>
+            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">TTL</th>
+            <th scope="col" class="px-5 py-3"><span class="sr-only">Actions</span></th>
+          </tr>
+        </thead>
+        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-800">
+          <tr :for="record in filteredRecords()" class="hover:bg-neutral-50 dark:hover:bg-neutral-800/50">
+            <td class="px-5 py-4"><span class="inline-flex px-2 py-1 font-mono font-semibold text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-md">{{ record.type }}</span></td>
+            <td class="px-5 py-4 font-mono text-neutral-900 text-sm whitespace-nowrap dark:text-white">{{ record.name }}</td>
+            <td class="px-5 py-4 max-w-md font-mono text-neutral-500 text-sm truncate dark:text-neutral-400">{{ record.value || 'Not set' }}</td>
+            <td class="px-5 py-4 text-neutral-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ ttlLabel(record) }}</td>
+            <td class="px-5 py-4 text-right"><Button variant="ghost" size="sm" @click="inspectRecord(record)">Inspect</Button></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+    <header class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700">
+      <div><h2 class="font-semibold text-neutral-900 dark:text-white">Nameservers</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured delegation targets.</p></div>
+      <span class="font-mono text-neutral-400 text-xs">{{ nameservers().length }}</span>
+    </header>
+    <div :if="nameservers().length > 0" class="grid gap-3 sm:grid-cols-2 p-5">
+      <div :for="nameserver in nameservers()" class="flex gap-3 items-center p-3 bg-neutral-50 dark:bg-neutral-800 rounded-lg">
+        <span class="shrink-0 h-4 w-4 text-neutral-400 i-hugeicons-server-stack-01"></span>
+        <code class="break-all text-neutral-700 text-xs dark:text-neutral-300">{{ nameserver }}</code>
+      </div>
+    </div>
+    <p :if="nameservers().length === 0" class="p-5 text-neutral-500 text-sm dark:text-neutral-400">No nameservers configured.</p>
+    <p :if="generatedAt()" class="px-5 py-3 text-neutral-400 text-xs dark:text-neutral-500 bg-neutral-50 dark:bg-neutral-800/50 border-neutral-100 border-t dark:border-neutral-800">Snapshot {{ formatDate(generatedAt()) }}</p>
+  </section>
+
+  <DnsRecordDialog :open="Boolean(selectedRecord())" :record="selectedRecord()" @close="closeRecord" />
+</div>