Initial commit: DNS Test - DNS health checking tool

Go backend (miekg/dns) + Nuxt 3 frontend (Tailwind CSS v4).

8 check categories, 52 checks total:
- Overview: @ record, WWW, MX with ASN/provider lookup
- Domain Registration: expiry, registrar (RDAP + whois fallback)
- Parent Delegation: NS records, glue, consistency
- Nameservers: 17 checks (reachability, auth, recursion, TCP/UDP, AXFR, etc.)
- SOA: serial consistency, timing values
- Mail (MX): 11 checks (CNAME, PTR, public IPs, consistency)
- Mail Auth: SPF, DKIM, DMARC
- WWW: A record, CNAME

Features:
- SSE streaming (results appear as each category completes)
- SQLite history (modernc.org/sqlite)
- Rate limiting, CORS, request logging
- Dark mode, responsive design

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

frontend/app/app.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100">
+    <header class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+      <div class="mx-auto flex max-w-5xl items-center justify-between px-4 py-4 sm:px-6">
+        <NuxtLink to="/" class="flex items-center gap-2 text-xl font-bold tracking-tight text-indigo-600 dark:text-indigo-400">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+          </svg>
+          DNS Test
+        </NuxtLink>
+        <button
+          @click="toggleTheme"
+          class="rounded-lg p-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+          aria-label="Toggle theme"
+        >
+          <svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+          </svg>
+          <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+          </svg>
+        </button>
+      </div>
+    </header>
+    <main>
+      <NuxtPage />
+    </main>
+    <footer class="mt-16 border-t border-gray-200 bg-white py-8 dark:border-gray-800 dark:bg-gray-900">
+      <div class="mx-auto max-w-5xl px-4 text-center text-sm text-gray-500 dark:text-gray-400 sm:px-6">
+        DNS Test &mdash; Check your domain's DNS health
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+const isDark = ref(false)
+
+function toggleTheme() {
+  isDark.value = !isDark.value
+  if (isDark.value) {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+}
+
+onMounted(() => {
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    isDark.value = true
+    document.documentElement.classList.add('dark')
+  }
+})
+</script>

frontend/app/assets/css/main.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));

frontend/app/components/CheckResult.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="border-b border-gray-100 last:border-b-0 dark:border-gray-800">
+    <div
+      class="flex items-start gap-3 px-4"
+      :class="[
+        compact ? 'py-2' : 'py-3',
+        hasDetails ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50' : 'cursor-default'
+      ]"
+      @click="hasDetails && (detailsOpen = !detailsOpen)"
+    >
+      <div class="mt-0.5 shrink-0" v-if="!compact">
+        <StatusBadge :status="check.status" />
+      </div>
+      <div v-else class="mt-1.5 shrink-0">
+        <span class="inline-block h-1.5 w-1.5 rounded-full"
+          :class="{
+            'bg-green-500': check.status === 'pass',
+            'bg-blue-500': check.status === 'info',
+          }"
+        ></span>
+      </div>
+      <div class="min-w-0 flex-1">
+        <div class="flex items-baseline justify-between gap-2">
+          <h4 :class="compact ? 'text-xs text-gray-700 dark:text-gray-300' : 'text-sm font-medium text-gray-900 dark:text-white'">
+            {{ check.title }}
+            <span v-if="compact" class="text-gray-400 dark:text-gray-500"> — {{ check.message }}</span>
+          </h4>
+        </div>
+        <p v-if="!compact" class="mt-0.5 text-sm text-gray-600 dark:text-gray-400">{{ check.message }}</p>
+      </div>
+      <div v-if="hasDetails && !compact" class="mt-1 shrink-0 text-gray-400 dark:text-gray-500">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4 transition-transform"
+          :class="{ 'rotate-180': detailsOpen }"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+      </div>
+    </div>
+    <div v-if="detailsOpen && hasDetails" class="border-t border-gray-100 bg-gray-50 px-4 py-3 dark:border-gray-800 dark:bg-gray-800/30">
+      <ul class="space-y-1">
+        <li
+          v-for="(detail, i) in check.details"
+          :key="i"
+          class="flex items-start gap-2 text-sm text-gray-600 dark:text-gray-400"
+        >
+          <span class="mt-1.5 inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400 dark:bg-gray-500"></span>
+          <span class="font-mono text-xs leading-relaxed">{{ detail }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CheckResult as CheckResultType } from '~/types/dns'
+
+const props = withDefaults(defineProps<{
+  check: CheckResultType
+  defaultExpanded?: boolean
+  compact?: boolean
+}>(), {
+  defaultExpanded: false,
+  compact: false,
+})
+
+const detailsOpen = ref(props.defaultExpanded)
+const hasDetails = computed(() => props.check.details && props.check.details.length > 0)
+</script>

frontend/app/components/DomainInput.vue

@@ -0,0 +1,51 @@
+<template>
+  <form @submit.prevent="onSubmit" class="flex flex-col gap-3 sm:flex-row">
+    <div class="relative flex-1">
+      <input
+        v-model="input"
+        type="text"
+        placeholder="Enter domain name (e.g., example.com)"
+        class="w-full rounded-xl border border-gray-300 bg-white px-4 py-3 text-base shadow-sm placeholder:text-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:focus:ring-indigo-400/20"
+      />
+    </div>
+    <button
+      type="submit"
+      :disabled="!input.trim()"
+      class="inline-flex items-center justify-center gap-2 rounded-xl bg-indigo-600 px-6 py-3 text-base font-semibold text-white shadow-sm transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-600"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+      </svg>
+      Check DNS
+    </button>
+  </form>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  initialValue?: string
+}>()
+
+const emit = defineEmits<{
+  submit: [domain: string]
+}>()
+
+const input = ref(props.initialValue || '')
+
+function cleanDomain(raw: string): string {
+  let domain = raw.trim()
+  domain = domain.replace(/^https?:\/\//, '')
+  domain = domain.replace(/^www\./, '')
+  domain = domain.replace(/\/+$/, '')
+  domain = domain.split('/')[0]
+  return domain.toLowerCase()
+}
+
+function onSubmit() {
+  const domain = cleanDomain(input.value)
+  if (domain) {
+    input.value = domain
+    emit('submit', domain)
+  }
+}
+</script>

frontend/app/components/LoadingSpinner.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="flex flex-col items-center justify-center py-20">
+    <div class="relative h-16 w-16">
+      <div class="absolute inset-0 rounded-full border-4 border-gray-200 dark:border-gray-700"></div>
+      <div class="absolute inset-0 animate-spin rounded-full border-4 border-transparent border-t-indigo-600 dark:border-t-indigo-400"></div>
+    </div>
+    <p class="mt-6 text-lg font-medium text-gray-600 dark:text-gray-400">
+      Checking DNS configuration...
+    </p>
+    <p class="mt-1 text-sm text-gray-400 dark:text-gray-500">
+      This may take a few seconds
+    </p>
+  </div>
+</template>

frontend/app/components/ReportSection.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+    <button
+      @click="expanded = !expanded"
+      class="flex w-full items-center justify-between px-5 py-4 text-left hover:bg-gray-50 dark:hover:bg-gray-800/50"
+    >
+      <div class="flex items-center gap-3">
+        <h3 class="text-base font-semibold text-gray-900 dark:text-white">{{ category.title }}</h3>
+        <div class="flex items-center gap-1.5">
+          <span v-if="passCount > 0" class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
+            {{ passCount }} passed
+          </span>
+          <span v-if="warnCount > 0" class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400">
+            {{ warnCount }} {{ warnCount === 1 ? 'warning' : 'warnings' }}
+          </span>
+          <span v-if="failCount > 0" class="inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400">
+            {{ failCount }} {{ failCount === 1 ? 'problem' : 'problems' }}
+          </span>
+          <span v-if="infoCount > 0" class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
+            {{ infoCount }} info
+          </span>
+        </div>
+      </div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-5 w-5 text-gray-400 transition-transform dark:text-gray-500"
+        :class="{ 'rotate-180': expanded }"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+      </svg>
+    </button>
+
+    <div v-if="expanded" class="border-t border-gray-200 dark:border-gray-800">
+      <!-- When filtering by status, show only those checks directly -->
+      <template v-if="props.statusFilter">
+        <CheckResult
+          v-for="check in filteredByStatus"
+          :key="check.id"
+          :check="check"
+          :default-expanded="true"
+        />
+      </template>
+
+      <template v-else>
+      <!-- Problems (fail) — always shown expanded with details -->
+      <CheckResult
+        v-for="check in failChecks"
+        :key="check.id"
+        :check="check"
+        :default-expanded="true"
+      />
+
+      <!-- Warnings — shown expanded with details -->
+      <CheckResult
+        v-for="check in warnChecks"
+        :key="check.id"
+        :check="check"
+        :default-expanded="true"
+      />
+
+      <!-- Passed checks — condensed into a compact list -->
+      <div v-if="passChecks.length > 0" class="border-b border-gray-100 last:border-b-0 dark:border-gray-800">
+        <div
+          class="flex cursor-pointer items-start gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800/50"
+          @click="passExpanded = !passExpanded"
+        >
+          <div class="mt-0.5 shrink-0">
+            <StatusBadge status="pass" />
+          </div>
+          <div class="min-w-0 flex-1">
+            <h4 class="text-sm font-medium text-gray-900 dark:text-white">
+              {{ passChecks.length }} {{ passChecks.length === 1 ? 'check' : 'checks' }} passed
+            </h4>
+            <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
+              {{ passChecks.map(c => c.title).join(' · ') }}
+            </p>
+          </div>
+          <div class="mt-1 shrink-0 text-gray-400 dark:text-gray-500">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-4 w-4 transition-transform"
+              :class="{ 'rotate-180': passExpanded }"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+            </svg>
+          </div>
+        </div>
+        <div v-if="passExpanded" class="border-t border-gray-100 bg-gray-50/50 dark:border-gray-800 dark:bg-gray-800/20">
+          <CheckResult
+            v-for="check in passChecks"
+            :key="check.id"
+            :check="check"
+            compact
+          />
+        </div>
+      </div>
+
+      <!-- Info checks — condensed similarly -->
+      <div v-if="infoChecks.length > 0" class="border-b border-gray-100 last:border-b-0 dark:border-gray-800">
+        <div
+          class="flex cursor-pointer items-start gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800/50"
+          @click="infoExpanded = !infoExpanded"
+        >
+          <div class="mt-0.5 shrink-0">
+            <StatusBadge status="info" />
+          </div>
+          <div class="min-w-0 flex-1">
+            <h4 class="text-sm font-medium text-gray-900 dark:text-white">
+              {{ infoChecks.length }} informational {{ infoChecks.length === 1 ? 'note' : 'notes' }}
+            </h4>
+            <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
+              {{ infoChecks.map(c => c.title).join(' · ') }}
+            </p>
+          </div>
+          <div class="mt-1 shrink-0 text-gray-400 dark:text-gray-500">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-4 w-4 transition-transform"
+              :class="{ 'rotate-180': infoExpanded }"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+            </svg>
+          </div>
+        </div>
+        <div v-if="infoExpanded" class="border-t border-gray-100 bg-gray-50/50 dark:border-gray-800 dark:bg-gray-800/20">
+          <CheckResult
+            v-for="check in infoChecks"
+            :key="check.id"
+            :check="check"
+            compact
+          />
+        </div>
+      </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Category, CheckStatus } from '~/types/dns'
+
+const props = defineProps<{
+  category: Category
+  statusFilter?: CheckStatus | null
+}>()
+
+const expanded = ref(true)
+const passExpanded = ref(false)
+const infoExpanded = ref(false)
+
+const passChecks = computed(() => props.category.checks.filter(c => c.status === 'pass'))
+const warnChecks = computed(() => props.category.checks.filter(c => c.status === 'warn'))
+const failChecks = computed(() => props.category.checks.filter(c => c.status === 'fail'))
+const infoChecks = computed(() => props.category.checks.filter(c => c.status === 'info'))
+const filteredByStatus = computed(() => props.statusFilter ? props.category.checks.filter(c => c.status === props.statusFilter) : [])
+
+const passCount = computed(() => passChecks.value.length)
+const warnCount = computed(() => warnChecks.value.length)
+const failCount = computed(() => failChecks.value.length)
+const infoCount = computed(() => infoChecks.value.length)
+</script>

frontend/app/components/StatusBadge.vue

@@ -0,0 +1,30 @@
+<template>
+  <span :class="classes" class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold uppercase tracking-wide">
+    {{ label }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { CheckStatus } from '~/types/dns'
+
+const props = defineProps<{
+  status: CheckStatus
+}>()
+
+const classes = computed(() => {
+  switch (props.status) {
+    case 'pass':
+      return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+    case 'warn':
+      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
+    case 'fail':
+      return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+    case 'info':
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
+    default:
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400'
+  }
+})
+
+const label = computed(() => props.status)
+</script>

frontend/app/components/SummaryBar.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
+    <div class="mb-3 flex items-center justify-between">
+      <h2 class="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Summary</h2>
+      <div class="flex items-center gap-2">
+        <button
+          v-if="activeFilter"
+          @click="emit('filter', null)"
+          class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+        >
+          Show all
+        </button>
+        <span class="text-sm text-gray-500 dark:text-gray-400">{{ total }} checks</span>
+      </div>
+    </div>
+
+    <!-- Bar -->
+    <div class="mb-4 flex h-3 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800" v-if="total > 0">
+      <div
+        v-if="summary.pass > 0"
+        class="bg-green-500 cursor-pointer transition-all hover:brightness-110"
+        :style="{ width: pct(summary.pass) }"
+        @click="emit('filter', 'pass')"
+      ></div>
+      <div
+        v-if="summary.info > 0"
+        class="bg-blue-500 cursor-pointer transition-all hover:brightness-110"
+        :style="{ width: pct(summary.info) }"
+        @click="emit('filter', 'info')"
+      ></div>
+      <div
+        v-if="summary.warn > 0"
+        class="bg-yellow-500 cursor-pointer transition-all hover:brightness-110"
+        :style="{ width: pct(summary.warn) }"
+        @click="emit('filter', 'warn')"
+      ></div>
+      <div
+        v-if="summary.fail > 0"
+        class="bg-red-500 cursor-pointer transition-all hover:brightness-110"
+        :style="{ width: pct(summary.fail) }"
+        @click="emit('filter', 'fail')"
+      ></div>
+    </div>
+
+    <!-- Counts (clickable) -->
+    <div class="flex flex-wrap gap-4 text-sm">
+      <button
+        v-if="summary.fail > 0"
+        @click="emit('filter', activeFilter === 'fail' ? null : 'fail')"
+        class="flex items-center gap-1.5 rounded-md px-2 py-0.5 transition"
+        :class="activeFilter === 'fail' ? 'bg-red-100 dark:bg-red-900/30' : 'hover:bg-gray-100 dark:hover:bg-gray-800'"
+      >
+        <span class="inline-block h-3 w-3 rounded-full bg-red-500"></span>
+        <span class="font-medium text-gray-700 dark:text-gray-300">{{ summary.fail }} failed</span>
+      </button>
+      <button
+        v-if="summary.warn > 0"
+        @click="emit('filter', activeFilter === 'warn' ? null : 'warn')"
+        class="flex items-center gap-1.5 rounded-md px-2 py-0.5 transition"
+        :class="activeFilter === 'warn' ? 'bg-yellow-100 dark:bg-yellow-900/30' : 'hover:bg-gray-100 dark:hover:bg-gray-800'"
+      >
+        <span class="inline-block h-3 w-3 rounded-full bg-yellow-500"></span>
+        <span class="font-medium text-gray-700 dark:text-gray-300">{{ summary.warn }} warnings</span>
+      </button>
+      <button
+        @click="emit('filter', activeFilter === 'pass' ? null : 'pass')"
+        class="flex items-center gap-1.5 rounded-md px-2 py-0.5 transition"
+        :class="activeFilter === 'pass' ? 'bg-green-100 dark:bg-green-900/30' : 'hover:bg-gray-100 dark:hover:bg-gray-800'"
+      >
+        <span class="inline-block h-3 w-3 rounded-full bg-green-500"></span>
+        <span class="font-medium text-gray-700 dark:text-gray-300">{{ summary.pass }} passed</span>
+      </button>
+      <button
+        v-if="summary.info > 0"
+        @click="emit('filter', activeFilter === 'info' ? null : 'info')"
+        class="flex items-center gap-1.5 rounded-md px-2 py-0.5 transition"
+        :class="activeFilter === 'info' ? 'bg-blue-100 dark:bg-blue-900/30' : 'hover:bg-gray-100 dark:hover:bg-gray-800'"
+      >
+        <span class="inline-block h-3 w-3 rounded-full bg-blue-500"></span>
+        <span class="font-medium text-gray-700 dark:text-gray-300">{{ summary.info }} info</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Summary, CheckStatus } from '~/types/dns'
+
+const props = defineProps<{
+  summary: Summary
+  activeFilter?: CheckStatus | null
+}>()
+
+const emit = defineEmits<{
+  filter: [status: CheckStatus | null]
+}>()
+
+const total = computed(() => props.summary.pass + props.summary.warn + props.summary.fail + props.summary.info)
+
+function pct(count: number): string {
+  if (total.value === 0) return '0%'
+  return `${(count / total.value * 100).toFixed(1)}%`
+}
+</script>

frontend/app/composables/useDnsCheck.ts

@@ -0,0 +1,106 @@
+import type { DnsReport, Category, Summary } from '~/types/dns'
+
+interface StreamEvent {
+  domain: string
+  category: Category
+  done?: boolean
+}
+
+export function useDnsCheck() {
+  const config = useRuntimeConfig()
+  const report = ref<DnsReport | null>(null)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const progress = ref(0)
+  const totalCategories = 8
+
+  async function checkDomain(domain: string) {
+    loading.value = true
+    error.value = null
+    report.value = null
+    progress.value = 0
+
+    // Initialize empty report
+    const startTime = Date.now()
+    const partialReport: DnsReport = {
+      domain,
+      timestamp: new Date().toISOString(),
+      duration_ms: 0,
+      summary: { pass: 0, warn: 0, fail: 0, info: 0 },
+      categories: [],
+    }
+
+    try {
+      const url = `${config.public.apiBase}/check/stream?domain=${encodeURIComponent(domain)}`
+      const eventSource = new EventSource(url)
+
+      await new Promise<void>((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          eventSource.close()
+          reject(new Error('Request timed out after 30 seconds'))
+        }, 30000)
+
+        eventSource.onmessage = (event) => {
+          try {
+            const data = JSON.parse(event.data) as StreamEvent & { done?: boolean }
+
+            if (data.done) {
+              clearTimeout(timeout)
+              eventSource.close()
+              partialReport.duration_ms = Date.now() - startTime
+              resolve()
+              return
+            }
+
+            if (data.category) {
+              partialReport.categories.push(data.category)
+              progress.value = partialReport.categories.length
+
+              // Recalculate summary
+              const summary: Summary = { pass: 0, warn: 0, fail: 0, info: 0 }
+              for (const cat of partialReport.categories) {
+                for (const check of cat.checks) {
+                  summary[check.status]++
+                }
+              }
+              partialReport.summary = summary
+              partialReport.duration_ms = Date.now() - startTime
+
+              // Update reactively
+              report.value = { ...partialReport, categories: [...partialReport.categories] }
+            }
+          } catch {
+            // ignore parse errors
+          }
+        }
+
+        eventSource.onerror = () => {
+          clearTimeout(timeout)
+          eventSource.close()
+          if (partialReport.categories.length > 0) {
+            // Got some results, show them
+            partialReport.duration_ms = Date.now() - startTime
+            report.value = { ...partialReport }
+            resolve()
+          } else {
+            reject(new Error('Connection to DNS check server failed'))
+          }
+        }
+      })
+    } catch (e: any) {
+      // Fallback to non-streaming API
+      try {
+        const data = await $fetch<DnsReport>(`${config.public.apiBase}/check?domain=${encodeURIComponent(domain)}`)
+        report.value = data
+        progress.value = totalCategories
+      } catch (e2: any) {
+        error.value = e2.data?.error || e2.message || e.message || 'Failed to check domain'
+      }
+    } finally {
+      loading.value = false
+      progress.value = totalCategories
+    }
+  }
+
+  return { report, loading, error, progress, totalCategories, checkDomain }
+}

frontend/app/pages/[...domain].vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="mx-auto max-w-5xl px-4 py-8 sm:px-6">
+    <div class="mb-8">
+      <DomainInput :initial-value="domain" @submit="onNewDomain" />
+    </div>
+
+    <!-- Loading state with progress -->
+    <div v-if="loading && !report" class="flex flex-col items-center justify-center py-20">
+      <div class="relative h-16 w-16">
+        <div class="absolute inset-0 rounded-full border-4 border-gray-200 dark:border-gray-700"></div>
+        <div class="absolute inset-0 animate-spin rounded-full border-4 border-transparent border-t-indigo-600 dark:border-t-indigo-400"></div>
+      </div>
+      <p class="mt-6 text-lg font-medium text-gray-600 dark:text-gray-400">
+        Checking DNS configuration...
+      </p>
+      <div class="mt-4 w-64">
+        <div class="flex h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+          <div
+            class="bg-indigo-600 transition-all duration-500 dark:bg-indigo-400"
+            :style="{ width: `${(progress / totalCategories) * 100}%` }"
+          ></div>
+        </div>
+        <p class="mt-2 text-center text-xs text-gray-400 dark:text-gray-500">
+          {{ progress }} / {{ totalCategories }} categories
+        </p>
+      </div>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error && !report" class="rounded-xl border border-red-200 bg-red-50 p-6 text-center dark:border-red-800 dark:bg-red-950/30">
+      <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
+      </svg>
+      <h2 class="mt-4 text-lg font-semibold text-red-800 dark:text-red-300">DNS Check Failed</h2>
+      <p class="mt-2 text-red-600 dark:text-red-400">{{ error }}</p>
+      <button
+        @click="checkDomain(domain)"
+        class="mt-4 inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700"
+      >
+        Try Again
+      </button>
+    </div>
+
+    <!-- Results (shown progressively as categories arrive) -->
+    <template v-if="report">
+      <div class="mb-6 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+            Report for <span class="text-indigo-600 dark:text-indigo-400">{{ report.domain }}</span>
+          </h1>
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            <template v-if="loading">Checking...</template>
+            <template v-else>Completed in {{ report.duration_ms }}ms</template>
+            &middot; {{ formatTimestamp(report.timestamp) }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Progress bar while still loading -->
+      <div v-if="loading" class="mb-4">
+        <div class="flex h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+          <div
+            class="bg-indigo-600 transition-all duration-500 dark:bg-indigo-400"
+            :style="{ width: `${(progress / totalCategories) * 100}%` }"
+          ></div>
+        </div>
+      </div>
+
+      <SummaryBar :summary="report.summary" :active-filter="statusFilter" @filter="onFilter" />
+
+      <div class="mt-8 space-y-6">
+        <ReportSection
+          v-for="category in filteredCategories"
+          :key="category.name"
+          :category="category"
+          :status-filter="statusFilter"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+import type { CheckStatus } from '~/types/dns'
+const { report, loading, error, progress, totalCategories, checkDomain } = useDnsCheck()
+const statusFilter = ref<CheckStatus | null>(null)
+
+const domain = computed(() => {
+  const params = route.params.domain
+  if (Array.isArray(params)) {
+    return params.join('/')
+  }
+  return params || ''
+})
+
+// Sort categories in consistent order as they arrive
+const categoryOrder = ['overview', 'registration', 'parent', 'nameservers', 'soa', 'mx', 'mail-auth', 'www']
+const sortedCategories = computed(() => {
+  if (!report.value) return []
+  return [...report.value.categories].sort((a, b) => {
+    return categoryOrder.indexOf(a.name) - categoryOrder.indexOf(b.name)
+  })
+})
+
+// Filter categories to only those with matching checks
+const filteredCategories = computed(() => {
+  if (!statusFilter.value) return sortedCategories.value
+  return sortedCategories.value.filter(cat =>
+    cat.checks.some(c => c.status === statusFilter.value)
+  )
+})
+
+function onFilter(status: CheckStatus | null) {
+  statusFilter.value = status
+}
+
+function onNewDomain(newDomain: string) {
+  router.push(`/${newDomain}`)
+}
+
+function formatTimestamp(ts: string) {
+  try {
+    return new Date(ts).toLocaleString()
+  } catch {
+    return ts
+  }
+}
+
+watch(domain, (val) => {
+  if (val) {
+    checkDomain(val)
+  }
+}, { immediate: true })
+
+useHead({
+  title: () => domain.value ? `DNS Test - ${domain.value}` : 'DNS Test',
+})
+</script>

frontend/app/pages/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="mx-auto max-w-5xl px-4 sm:px-6">
+    <section class="py-16 text-center sm:py-24">
+      <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-5xl">
+        DNS Test
+      </h1>
+      <p class="mx-auto mt-4 max-w-xl text-lg text-gray-600 dark:text-gray-400">
+        Check your domain's DNS health. Get a comprehensive report on your nameservers, mail servers, and DNS configuration.
+      </p>
+      <div class="mx-auto mt-10 max-w-xl">
+        <DomainInput @submit="onSubmit" />
+      </div>
+    </section>
+
+    <section class="grid gap-6 pb-16 sm:grid-cols-3">
+      <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
+        <div class="mb-3 inline-flex rounded-lg bg-indigo-100 p-2 text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
+          </svg>
+        </div>
+        <h3 class="font-semibold text-gray-900 dark:text-white">Nameserver Checks</h3>
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Verify NS records, delegation, and nameserver responsiveness.</p>
+      </div>
+      <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
+        <div class="mb-3 inline-flex rounded-lg bg-green-100 p-2 text-green-600 dark:bg-green-900/30 dark:text-green-400">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+          </svg>
+        </div>
+        <h3 class="font-semibold text-gray-900 dark:text-white">Mail Configuration</h3>
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Check MX records, SPF, DKIM, and DMARC policies.</p>
+      </div>
+      <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
+        <div class="mb-3 inline-flex rounded-lg bg-amber-100 p-2 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+          </svg>
+        </div>
+        <h3 class="font-semibold text-gray-900 dark:text-white">Security & DNSSEC</h3>
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Validate DNSSEC configuration and security best practices.</p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+const router = useRouter()
+
+function onSubmit(domain: string) {
+  router.push(`/${domain}`)
+}
+</script>

frontend/app/types/dns.ts

@@ -0,0 +1,31 @@
+export type CheckStatus = 'pass' | 'warn' | 'fail' | 'info'
+
+export interface CheckResult {
+  id: string
+  title: string
+  status: CheckStatus
+  message: string
+  details?: string[]
+  duration_ms: number
+}
+
+export interface Category {
+  name: string
+  title: string
+  checks: CheckResult[]
+}
+
+export interface Summary {
+  pass: number
+  warn: number
+  fail: number
+  info: number
+}
+
+export interface DnsReport {
+  domain: string
+  timestamp: string
+  duration_ms: number
+  summary: Summary
+  categories: Category[]
+}

frontend/nuxt.config.ts

@@ -0,0 +1,45 @@
+import tailwindcss from '@tailwindcss/vite'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+
+  vite: {
+    plugins: [
+      tailwindcss(),
+    ],
+  },
+
+  css: ['~/assets/css/main.css'],
+
+  app: {
+    baseURL: '/dnstest/',
+    head: {
+      title: 'DNS Test',
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'description', content: 'Check your domain\'s DNS health with comprehensive DNS testing and reporting.' },
+      ],
+      htmlAttrs: {
+        lang: 'en',
+      },
+    },
+  },
+
+  runtimeConfig: {
+    public: {
+      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/dnstest/api',
+    },
+  },
+
+  nitro: {
+    devProxy: {
+      '/dnstest/api/': {
+        target: 'http://localhost:8080/dnstest/api/',
+        changeOrigin: true,
+      },
+    },
+  },
+})

frontend/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "frontend",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "nuxt": "^4.4.2",
+    "tailwindcss": "^4.2.2",
+    "vue": "^3.5.30",
+    "vue-router": "^5.0.3"
+  }
+}

frontend/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}