@stacksjs/defaults 0.70.229 → 0.70.231

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

@@ -0,0 +1,317 @@
+<script client>
+import type {
+  DashboardLogRecord,
+  DashboardLogSummary,
+  DashboardLogType,
+} from '../../../../app/Actions/Dashboard/Infrastructure/log-dashboard'
+import { dashboardApi } from '../../../../functions/dashboard-api'
+
+interface LogPagination {
+  page: number
+  perPage: number
+  total: number
+  totalPages: number
+}
+
+interface LogOptions {
+  sources: string[]
+  projects: string[]
+  types: string[]
+  ranges: string[]
+}
+
+interface LogResponse {
+  logs: DashboardLogRecord[]
+  summary: DashboardLogSummary
+  pagination: LogPagination
+  options: LogOptions
+  generatedAt?: string
+}
+
+const EMPTY_SUMMARY: DashboardLogSummary = { total: 0, error: 0, warning: 0, info: 0, success: 0 }
+const EMPTY_PAGINATION: LogPagination = { page: 1, perPage: 25, total: 0, totalPages: 1 }
+const EMPTY_OPTIONS: LogOptions = { sources: [], projects: [], types: [], ranges: [] }
+
+const logs = state<DashboardLogRecord[]>([])
+const summary = state<DashboardLogSummary>({ ...EMPTY_SUMMARY })
+const pagination = state<LogPagination>({ ...EMPTY_PAGINATION })
+const options = state<LogOptions>({ ...EMPTY_OPTIONS })
+const generatedAt = state('')
+const loading = state(true)
+const loadError = state('')
+const search = state('')
+const source = state('')
+const type = state('')
+const project = state('')
+const range = state('30')
+const perPage = state('25')
+const autoRefresh = state(false)
+const selectedLog = state<DashboardLogRecord | null>(null)
+let loadVersion = 0
+
+const levels = derived(() => [
+  { type: 'error' as const, label: 'Errors', count: summary().error },
+  { type: 'warning' as const, label: 'Warnings', count: summary().warning },
+  { type: 'info' as const, label: 'Info', count: summary().info },
+  { type: 'success' as const, label: 'Success', count: summary().success },
+])
+const hasFilters = derived(() => Boolean(search() || source() || type() || project() || range() !== '30'))
+const pageStart = derived(() => pagination().total === 0 ? 0 : (pagination().page - 1) * pagination().perPage + 1)
+const pageEnd = derived(() => Math.min(pagination().total, pagination().page * pagination().perPage))
+
+function countWidth(count: number): string {
+  if (summary().total <= 0)
+    return '0%'
+  return `${Math.max(2, Math.round((count / summary().total) * 100))}%`
+}
+
+function formatDate(value: string): 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 rangeLabel(value: string): string {
+  if (value === 'all')
+    return 'All time'
+  if (value === '1')
+    return 'Last 24 hours'
+  return `Last ${value} days`
+}
+
+function closeLog(): void {
+  selectedLog.set(null)
+}
+
+function openLog(record: DashboardLogRecord): void {
+  selectedLog.set(record)
+}
+
+function clearData(): void {
+  logs.set([])
+  summary.set({ ...EMPTY_SUMMARY })
+  pagination.set({ ...EMPTY_PAGINATION })
+  options.set({ ...EMPTY_OPTIONS })
+  generatedAt.set('')
+}
+
+async function loadLogs(showLoading = true): Promise<void> {
+  const version = ++loadVersion
+  if (showLoading)
+    loading.set(true)
+  loadError.set('')
+  try {
+    const params = new URLSearchParams({
+      page: String(pagination().page),
+      per_page: perPage(),
+      range: range(),
+    })
+    if (search())
+      params.set('search', search().trim())
+    if (source())
+      params.set('source', source())
+    if (type())
+      params.set('type', type())
+    if (project())
+      params.set('project', project())
+
+    const result = await dashboardApi<LogResponse>(`/api/dashboard/logs?${params}`)
+    if (version !== loadVersion)
+      return
+    logs.set(Array.isArray(result.logs) ? result.logs : [])
+    summary.set(result.summary || { ...EMPTY_SUMMARY })
+    pagination.set(result.pagination || { ...EMPTY_PAGINATION })
+    options.set(result.options || { ...EMPTY_OPTIONS })
+    generatedAt.set(result.generatedAt || '')
+  }
+  catch (error) {
+    if (version !== loadVersion)
+      return
+    clearData()
+    loadError.set(error instanceof Error ? error.message : 'Logs could not be loaded.')
+  }
+  finally {
+    if (version === loadVersion)
+      loading.set(false)
+  }
+}
+
+function reloadFilters(): void {
+  pagination.set({ ...pagination(), page: 1 })
+  void loadLogs()
+}
+
+const scheduleSearch = debounce(() => {
+  reloadFilters()
+}, 250)
+
+function resetFilters(): void {
+  search.set('')
+  source.set('')
+  type.set('')
+  project.set('')
+  range.set('30')
+  reloadFilters()
+}
+
+function previousPage(): void {
+  if (pagination().page <= 1)
+    return
+  pagination.set({ ...pagination(), page: pagination().page - 1 })
+  void loadLogs()
+}
+
+function nextPage(): void {
+  if (pagination().page >= pagination().totalPages)
+    return
+  pagination.set({ ...pagination(), page: pagination().page + 1 })
+  void loadLogs()
+}
+
+function toggleAutoRefresh(): void {
+  autoRefresh.set(!autoRefresh())
+}
+
+const visibility = useDocumentVisibility()
+const { pause: pauseRefresh, resume: resumeRefresh } = useIntervalFn(() => {
+  if (autoRefresh() && visibility.value === 'visible')
+    void loadLogs(false)
+}, 15000, { immediate: false })
+
+effect(() => {
+  if (autoRefresh())
+    resumeRefresh()
+  else
+    pauseRefresh()
+})
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === 'Escape')
+    closeLog()
+})
+
+onMount(() => {
+  void loadLogs()
+})
+
+onDestroy(() => {
+  scheduleSearch.cancel()
+  pauseRefresh()
+})
+</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">System logs</h1>
+        <CloudStatusBadge :status="loadError() ? 'attention' : 'configured'" />
+      </div>
+      <p class="mt-1 max-w-2xl text-neutral-500 text-sm dark:text-neutral-400">Persisted Log model records. Counts, filters, and details come from the same database query.</p>
+    </div>
+    <div class="flex gap-2 items-center">
+      <Button variant="secondary" interaction="toggle" :pressed="autoRefresh()" @click="toggleAutoRefresh">
+        <span :class="'h-4 w-4 i-hugeicons-refresh ' + (autoRefresh() ? 'animate-spin' : '')"></span>
+        {{ autoRefresh() ? 'Auto refresh on' : 'Auto refresh off' }}
+      </Button>
+      <Button variant="secondary" iconOnly :loading="loading()" ariaLabel="Refresh system logs" @click="loadLogs">
+        <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      </Button>
+    </div>
+  </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="loadLogs">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">Matching records</p>
+      <p class="mt-2 font-semibold text-neutral-900 text-xl dark:text-white">{{ summary().total }}</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">Errors</p>
+      <p class="mt-2 font-semibold text-red-600 text-xl dark:text-red-400">{{ summary().error }}</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">Warnings</p>
+      <p class="mt-2 font-semibold text-amber-600 text-xl dark:text-amber-400">{{ summary().warning }}</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">Selected range</p>
+      <p class="mt-2 font-medium text-neutral-900 text-sm dark:text-white">{{ rangeLabel(range()) }}</p>
+    </div>
+  </section>
+
+  <section class="grid gap-4 grid-cols-1 xl:grid-cols-[minmax(0,0.7fr)_minmax(0,1.3fr)]">
+    <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">Type distribution</h2>
+      <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Exact counts for the active server-side filters.</p>
+      <div class="mt-5 space-y-4">
+        <div :for="level in levels()" class="grid gap-3 grid-cols-[5.5rem_minmax(0,1fr)_2.5rem] items-center">
+          <LogLevelBadge :type="level.type" />
+          <div class="overflow-hidden h-2 bg-neutral-100 dark:bg-neutral-800 rounded-full">
+            <div :style="'width: ' + countWidth(level.count)" :class="'h-full rounded-full ' + (level.type === 'error' ? 'bg-red-500' : level.type === 'warning' ? 'bg-amber-500' : level.type === 'success' ? 'bg-green-500' : 'bg-blue-500')"></div>
+          </div>
+          <span class="font-mono text-neutral-500 text-right text-xs dark:text-neutral-400">{{ level.count }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="p-5 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+        <div><h2 class="font-semibold text-neutral-900 dark:text-white">Query logs</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Search message, project, file, and stack trace.</p></div>
+        <p :if="generatedAt()" class="text-neutral-400 text-xs dark:text-neutral-500">Snapshot {{ formatDate(generatedAt()) }}</p>
+      </div>
+      <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3 mt-5">
+        <label class="block relative sm:col-span-2 xl:col-span-1">
+          <span class="sr-only">Search system logs</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 logs" class="pl-9 pr-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 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" @input="scheduleSearch" />
+        </label>
+        <label><span class="sr-only">Filter by type</span><select x-model="type" class="px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700" @change="reloadFilters"><option value="">All types</option><option :for="entry in options().types" :value="entry">{{ entry }}</option></select></label>
+        <label><span class="sr-only">Filter by source</span><select x-model="source" class="px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700" @change="reloadFilters"><option value="">All sources</option><option :for="entry in options().sources" :value="entry">{{ entry }}</option></select></label>
+        <label><span class="sr-only">Filter by project</span><select x-model="project" class="px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700" @change="reloadFilters"><option value="">All projects</option><option :for="entry in options().projects" :value="entry">{{ entry }}</option></select></label>
+        <label><span class="sr-only">Filter by time range</span><select x-model="range" class="px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-950 border border-neutral-300 rounded-lg dark:border-neutral-700" @change="reloadFilters"><option value="1">Last 24 hours</option><option value="7">Last 7 days</option><option value="30">Last 30 days</option><option value="90">Last 90 days</option><option value="all">All time</option></select></label>
+        <Button :if="hasFilters()" variant="secondary" @click="resetFilters"><span class="h-4 w-4 i-hugeicons-cancel-01"></span>Reset filters</Button>
+      </div>
+    </div>
+  </section>
+
+  <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+    <div :if="loading() && logs().length === 0" class="flex items-center justify-center py-20 text-neutral-500 text-sm dark:text-neutral-400"><span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>Loading system logs</div>
+    <EmptyState :if="!loading() && !loadError() && logs().length === 0" icon="i-hugeicons-file-search" title="No matching log records" description="Adjust the server-side filters or wait for the application to persist another Log model record." />
+    <div :if="logs().length > 0" class="overflow-x-auto">
+      <table class="min-w-full text-sm">
+        <thead class="text-neutral-500 text-xs uppercase dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-800/60 border-b border-neutral-200 dark:border-neutral-700">
+          <tr><th class="px-5 py-3 font-medium text-left">Occurred</th><th class="px-5 py-3 font-medium text-left">Type</th><th class="px-5 py-3 font-medium text-left">Source</th><th class="px-5 py-3 font-medium text-left">Message</th><th class="px-5 py-3 font-medium text-left">Project</th><th class="px-5 py-3 font-medium text-right">Details</th></tr>
+        </thead>
+        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-800">
+          <tr :for="record in logs()" class="hover:bg-neutral-50 dark:hover:bg-neutral-800/70">
+            <td class="px-5 py-4 text-neutral-500 whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.timestamp) }}</td>
+            <td class="px-5 py-4"><LogLevelBadge :type="record.type" /></td>
+            <td class="px-5 py-4 font-mono text-neutral-700 text-xs dark:text-neutral-300">{{ record.source || 'Not recorded' }}</td>
+            <td class="px-5 py-4 max-w-md"><p class="font-medium text-neutral-900 dark:text-white">{{ record.message }}</p><p :if="record.file" class="mt-1 font-mono text-neutral-400 text-xs truncate dark:text-neutral-500">{{ record.file }}</p></td>
+            <td class="px-5 py-4 text-neutral-600 whitespace-nowrap dark:text-neutral-300">{{ record.project || 'Not recorded' }}</td>
+            <td class="px-5 py-4 text-right"><Button variant="ghost" iconOnly :ariaLabel="'Inspect log ' + record.id" @click="openLog(record)"><span class="block h-5 w-5 i-hugeicons-view"></span></Button></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <footer :if="logs().length > 0" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-5 py-4 text-neutral-500 text-sm dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-800/50 border-neutral-200 border-t dark:border-neutral-700">
+      <p>Showing {{ pageStart() }} to {{ pageEnd() }} of {{ pagination().total }}</p>
+      <div class="flex gap-2 items-center">
+        <label><span class="sr-only">Logs per page</span><select x-model="perPage" class="px-2 py-1.5 text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-neutral-300 rounded-lg dark:border-neutral-700" @change="reloadFilters"><option value="10">10 per page</option><option value="25">25 per page</option><option value="50">50 per page</option><option value="100">100 per page</option></select></label>
+        <Button variant="secondary" iconOnly :disabled="pagination().page <= 1" ariaLabel="Previous log page" @click="previousPage"><span class="block h-4 w-4 i-hugeicons-arrow-left-01"></span></Button>
+        <span class="font-mono text-neutral-600 text-xs dark:text-neutral-300">{{ pagination().page }} / {{ pagination().totalPages }}</span>
+        <Button variant="secondary" iconOnly :disabled="pagination().page >= pagination().totalPages" ariaLabel="Next log page" @click="nextPage"><span class="block h-4 w-4 i-hugeicons-arrow-right-01"></span></Button>
+      </div>
+    </footer>
+  </section>
+
+  <LogDetailsDialog :open="Boolean(selectedLog())" :record="selectedLog()" @close="closeLog" />
+</div>

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

@@ -0,0 +1,31 @@
+<script client>
+import type { DashboardMailbox } from '../../../../app/Actions/Dashboard/Infrastructure/mailbox-overview'
+
+const open = useReactiveProp('open', false)
+const mailbox = useReactiveProp('mailbox', null as DashboardMailbox | null)
+const emit = defineEmits()
+</script>
+
+<div :if="open() && mailbox()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
+  <button type="button" aria-label="Close mailbox details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
+  <section role="dialog" aria-modal="true" aria-labelledby="mailbox-details-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="text-neutral-500 text-xs dark:text-neutral-400">Configured mailbox</p>
+        <h2 id="mailbox-details-title" class="mt-1 break-all font-semibold text-lg text-neutral-900 dark:text-white">{{ mailbox()?.email }}</h2>
+      </div>
+      <Button variant="ghost" iconOnly ariaLabel="Close mailbox details" @click="emit('close')">
+        <span class="block h-5 w-5 i-hugeicons-cancel-01"></span>
+      </Button>
+    </header>
+    <dl class="grid gap-5 sm:grid-cols-2 p-5 text-sm">
+      <div><dt class="text-neutral-500 dark:text-neutral-400">Username</dt><dd class="mt-1 font-mono text-neutral-900 dark:text-white">{{ mailbox()?.username }}</dd></div>
+      <div><dt class="text-neutral-500 dark:text-neutral-400">State</dt><dd class="mt-1"><CloudStatusBadge :status="mailbox()?.status || 'inactive'" /></dd></div>
+      <div class="sm:col-span-2"><dt class="text-neutral-500 dark:text-neutral-400">Address</dt><dd class="mt-1 break-all font-mono text-neutral-900 dark:text-white">{{ mailbox()?.email }}</dd></div>
+    </dl>
+    <div class="flex gap-3 justify-end px-5 py-4 bg-neutral-50 dark:bg-neutral-800/60 border-neutral-200 border-t dark:border-neutral-700">
+      <Button tag="a" href="/inbox/activity" variant="secondary">Mail activity</Button>
+      <Button tag="a" href="/inbox">Open inbox</Button>
+    </div>
+  </section>
+</div>

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

@@ -0,0 +1,241 @@
+<script client>
+import type {
+  DashboardMailbox,
+  DashboardMailboxDomain,
+  DashboardMailboxFeature,
+  DashboardMailboxForward,
+  DashboardMailboxPort,
+  DashboardMailboxSnapshot,
+  DashboardMailboxStorage,
+} from '../../../../app/Actions/Dashboard/Infrastructure/mailbox-overview'
+import { dashboardApi } from '../../../../functions/dashboard-api'
+
+const mailboxes = state<DashboardMailbox[]>([])
+const domains = state<DashboardMailboxDomain[]>([])
+const from = state<{ name: string | null, address: string | null }>({ name: null, address: null })
+const server = state<DashboardMailboxSnapshot['server']>({
+  enabled: false,
+  mode: null,
+  scan: false,
+  features: [],
+  ports: [],
+  storage: [],
+})
+const forwards = state<DashboardMailboxForward[]>([])
+const generatedAt = state('')
+const loading = state(true)
+const loadError = state('')
+const search = state('')
+const selectedMailbox = state<DashboardMailbox | null>(null)
+
+const filteredMailboxes = derived(() => {
+  const query = search().trim().toLowerCase()
+  if (!query)
+    return mailboxes()
+  return mailboxes().filter(mailbox =>
+    `${mailbox.email} ${mailbox.username}`.toLowerCase().includes(query),
+  )
+})
+const enabledFeatures = derived(() => server().features.filter(feature => feature.enabled))
+const primaryDomain = derived(() => domains()[0] ?? null)
+
+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 featureLabel(feature: DashboardMailboxFeature): string {
+  return feature.name.replace(/([a-z])([A-Z])/g, '$1 $2')
+}
+
+function portLabel(port: DashboardMailboxPort): string {
+  return port.name.replace(/([a-z])([A-Z])/g, '$1 $2')
+}
+
+function storageLabel(item: DashboardMailboxStorage): string {
+  return item.name.replace(/([a-z])([A-Z])/g, '$1 $2')
+}
+
+function inspectMailbox(mailbox: DashboardMailbox): void {
+  selectedMailbox.set(mailbox)
+}
+
+function closeMailbox(): void {
+  selectedMailbox.set(null)
+}
+
+async function loadMailboxes(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const result = await dashboardApi<DashboardMailboxSnapshot>('/api/dashboard/mailboxes')
+    mailboxes.set(Array.isArray(result.mailboxes) ? result.mailboxes : [])
+    domains.set(Array.isArray(result.domains) ? result.domains : [])
+    from.set(result.from || { name: null, address: null })
+    server.set(result.server || {
+      enabled: false,
+      mode: null,
+      scan: false,
+      features: [],
+      ports: [],
+      storage: [],
+    })
+    forwards.set(Array.isArray(result.forwards) ? result.forwards : [])
+    generatedAt.set(result.generatedAt || '')
+  }
+  catch (error) {
+    mailboxes.set([])
+    domains.set([])
+    from.set({ name: null, address: null })
+    server.set({
+      enabled: false,
+      mode: null,
+      scan: false,
+      features: [],
+      ports: [],
+      storage: [],
+    })
+    forwards.set([])
+    generatedAt.set('')
+    loadError.set(error instanceof Error ? error.message : 'Mailbox configuration could not be loaded.')
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === 'Escape')
+    closeMailbox()
+})
+
+onMount(() => {
+  void loadMailboxes()
+})
+</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">Mailboxes</h1>
+        <CloudStatusBadge :status="server().enabled ? 'configured' : 'inactive'" />
+      </div>
+      <p class="mt-1 max-w-2xl text-neutral-500 text-sm dark:text-neutral-400">Mailbox and mail-server declarations from config/email.ts. No delivery or provider health is inferred.</p>
+    </div>
+    <div class="flex gap-2 items-center">
+      <Button tag="a" href="/inbox/activity" variant="secondary">Mail activity</Button>
+      <Button tag="a" href="/inbox">Open inbox</Button>
+      <Button variant="secondary" iconOnly :loading="loading()" ariaLabel="Refresh mailbox configuration" @click="loadMailboxes">
+        <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      </Button>
+    </div>
+  </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="loadMailboxes">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">Mailboxes</p>
+      <p class="mt-2 font-semibold text-neutral-900 text-xl dark:text-white">{{ mailboxes().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">Mode</p>
+      <p class="mt-2 capitalize font-semibold text-neutral-900 text-xl dark:text-white">{{ server().mode || 'Not set' }}</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">Enabled features</p>
+      <p class="mt-2 font-semibold text-neutral-900 text-xl dark:text-white">{{ enabledFeatures().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">Domain</p>
+      <p class="mt-2 font-medium text-neutral-900 text-sm truncate dark:text-white">{{ primaryDomain()?.domain || 'Not set' }}</p>
+    </div>
+  </section>
+
+  <section class="grid gap-4 grid-cols-1 xl:grid-cols-[minmax(0,1fr)_minmax(18rem,0.65fr)]">
+    <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-center justify-between">
+        <div><h2 class="font-semibold text-neutral-900 dark:text-white">Mail server</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Declared server capabilities and endpoints.</p></div>
+        <CloudStatusBadge :status="server().enabled ? 'configured' : 'inactive'" />
+      </div>
+      <dl class="grid gap-4 sm:grid-cols-3 mt-5 text-sm">
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Server endpoint</dt><dd class="mt-1 break-all font-medium text-neutral-900 dark:text-white">{{ primaryDomain()?.subdomain || 'Not set' }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Spam and virus scan</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ server().scan ? 'Enabled' : 'Disabled' }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">From address</dt><dd class="mt-1 break-all font-medium text-neutral-900 dark:text-white">{{ from().address || 'Not set' }}</dd></div>
+      </dl>
+      <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3 mt-5">
+        <div :for="feature in server().features" 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 ' + (feature.enabled ? 'text-green-500 i-hugeicons-checkmark-circle-02' : 'text-neutral-400 i-hugeicons-cancel-circle')"></span>
+          <span class="capitalize text-neutral-700 text-sm dark:text-neutral-300">{{ featureLabel(feature) }}</span>
+        </div>
+      </div>
+    </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">Ports</h2>
+      <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured listener ports.</p>
+      <dl class="grid gap-x-5 gap-y-3 grid-cols-2 mt-5 text-sm">
+        <div :for="port in server().ports" class="flex gap-3 items-center justify-between">
+          <dt class="capitalize text-neutral-500 dark:text-neutral-400">{{ portLabel(port) }}</dt>
+          <dd class="font-mono font-semibold text-neutral-900 dark:text-white">{{ port.port }}</dd>
+        </div>
+      </dl>
+    </div>
+  </section>
+
+  <section>
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+      <div><h2 class="font-semibold text-neutral-900 dark:text-white">Configured mailboxes</h2><p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Addresses are source-controlled in config/email.ts.</p></div>
+      <label class="block relative sm:w-72">
+        <span class="sr-only">Search mailboxes</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 mailboxes" 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>
+    </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 mailbox configuration...
+    </div>
+
+    <EmptyState :if="!loading() && !loadError() && filteredMailboxes().length === 0" icon="i-hugeicons-mail-01" :title="mailboxes().length ? 'No matching mailboxes' : 'No mailboxes configured'" :description="mailboxes().length ? 'Adjust the mailbox search.' : 'Add mailbox names to config/email.ts, then refresh this page.'" />
+
+    <div :if="!loading() && filteredMailboxes().length > 0" class="grid gap-3 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 mt-4">
+      <button :for="mailbox in filteredMailboxes()" type="button" class="flex gap-4 items-center 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" @click="inspectMailbox(mailbox)">
+        <span class="flex items-center justify-center shrink-0 h-10 w-10 text-blue-600 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/30 rounded-xl"><span class="h-5 w-5 i-hugeicons-mail-01"></span></span>
+        <span class="flex-1 min-w-0"><span class="block font-semibold text-neutral-900 text-sm truncate dark:text-white">{{ mailbox.email }}</span><span class="block mt-1 text-neutral-500 text-xs dark:text-neutral-400">{{ mailbox.username }}</span></span>
+        <CloudStatusBadge :status="mailbox.status" />
+      </button>
+    </div>
+  </section>
+
+  <section class="grid gap-4 grid-cols-1 xl:grid-cols-2">
+    <div 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">Forwarding</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured address copies.</p></div><span class="font-mono text-neutral-400 text-xs">{{ forwards().length }}</span></header>
+      <div :if="forwards().length > 0" class="divide-neutral-100 divide-y dark:divide-neutral-800">
+        <div :for="forward in forwards()" class="px-5 py-4">
+          <p class="font-medium font-mono text-neutral-900 text-sm dark:text-white">{{ forward.source }}</p>
+          <p class="mt-1 break-all text-neutral-500 text-xs dark:text-neutral-400">Forwards to {{ forward.destinations.join(', ') || 'no destinations' }}</p>
+        </div>
+      </div>
+      <p :if="forwards().length === 0" class="p-5 text-neutral-500 text-sm dark:text-neutral-400">No forwarding rules configured.</p>
+    </div>
+
+    <div 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">Retention</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured mail storage policy.</p></div><span class="font-mono text-neutral-400 text-xs">{{ server().storage.length }}</span></header>
+      <dl :if="server().storage.length > 0" class="grid gap-4 sm:grid-cols-2 p-5 text-sm">
+        <div :for="item in server().storage"><dt class="capitalize text-neutral-500 dark:text-neutral-400">{{ storageLabel(item) }}</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ item.value }}</dd></div>
+      </dl>
+      <p :if="server().storage.length === 0" class="p-5 text-neutral-500 text-sm dark:text-neutral-400">No storage policy 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>
+    </div>
+  </section>
+
+  <MailboxDetailsDialog :open="Boolean(selectedMailbox())" :mailbox="selectedMailbox()" @close="closeMailbox" />
+</div>