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/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>