Add alert about domain error

messages/en-US.json

@@ -2681,5 +2681,6 @@
     "approvalsEmptyStateStep2Title": "Enable Device Approvals",
     "approvalsEmptyStateStep2Description": "Edit a role and enable the 'Require Device Approvals' option. Users with this role will need admin approval for new devices.",
     "approvalsEmptyStatePreviewDescription": "Preview: When enabled, pending device requests will appear here for review",
-    "approvalsEmptyStateButtonText": "Manage Roles"
+    "approvalsEmptyStateButtonText": "Manage Roles",
+    "domainErrorTitle": "We are having trouble verifying your domain"
 }

server/db/pg/schema/schema.ts

@@ -22,7 +22,8 @@ export const domains = pgTable("domains", {
     tries: integer("tries").notNull().default(0),
     certResolver: varchar("certResolver"),
     customCertResolver: varchar("customCertResolver"),
-    preferWildcardCert: boolean("preferWildcardCert")
+    preferWildcardCert: boolean("preferWildcardCert"),
+    errorMessage: text("errorMessage")
 });
 
 export const dnsRecords = pgTable("dnsRecords", {

server/db/sqlite/schema/schema.ts

@@ -13,7 +13,8 @@ export const domains = sqliteTable("domains", {
     failed: integer("failed", { mode: "boolean" }).notNull().default(false),
     tries: integer("tries").notNull().default(0),
     certResolver: text("certResolver"),
-    preferWildcardCert: integer("preferWildcardCert", { mode: "boolean" })
+    preferWildcardCert: integer("preferWildcardCert", { mode: "boolean" }),
+    errorMessage: text("errorMessage")
 });
 
 export const dnsRecords = sqliteTable("dnsRecords", {

server/routers/domain/listDomains.ts

@@ -40,7 +40,8 @@ async function queryDomains(orgId: string, limit: number, offset: number) {
             tries: domains.tries,
             configManaged: domains.configManaged,
             certResolver: domains.certResolver,
-            preferWildcardCert: domains.preferWildcardCert
+            preferWildcardCert: domains.preferWildcardCert,
+            errorMessage: domains.errorMessage
         })
         .from(orgDomains)
         .where(eq(orgDomains.orgId, orgId))

src/app/[orgId]/settings/domains/[domainId]/page.tsx

@@ -69,6 +69,7 @@ export default async function DomainSettingsPage({
                     failed={domain.failed}
                     verified={domain.verified}
                     type={domain.type}
+                    errorMessage={domain.errorMessage}
                 />
 
                 <DNSRecordsTable records={dnsRecords} type={domain.type} />

src/components/DomainInfoCard.tsx

@@ -10,17 +10,20 @@ import {
 import { useTranslations } from "next-intl";
 import { Badge } from "./ui/badge";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { AlertTriangle } from "lucide-react";
 
 type DomainInfoCardProps = {
     failed: boolean;
     verified: boolean;
     type: string | null;
+    errorMessage?: string | null;
 };
 
 export default function DomainInfoCard({
     failed,
     verified,
-    type
+    type,
+    errorMessage
 }: DomainInfoCardProps) {
     const t = useTranslations();
     const env = useEnvContext();
@@ -39,6 +42,7 @@ export default function DomainInfoCard({
     };
 
     return (
+        <div className="space-y-3">
         <Alert>
             <AlertDescription>
                 <InfoSections cols={3}>
@@ -79,5 +83,19 @@ export default function DomainInfoCard({
                 </InfoSections>
             </AlertDescription>
         </Alert>
+        {errorMessage && (failed || !verified) && (
+            <Alert variant={failed ? "destructive" : "warning"}>
+                <AlertTriangle className="h-4 w-4" />
+                <AlertTitle>
+                    {failed
+                        ? t("domainErrorTitle", { fallback: "Domain Error" })
+                        : t("domainPendingErrorTitle", { fallback: "Verification Issue" })}
+                </AlertTitle>
+                <AlertDescription className="font-mono text-xs break-all">
+                    {errorMessage}
+                </AlertDescription>
+            </Alert>
+        )}
+        </div>
     );
 }

src/components/DomainsTable.tsx

@@ -27,6 +27,12 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger
 } from "./ui/dropdown-menu";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger
+} from "./ui/tooltip";
 import Link from "next/link";
 
 export type DomainRow = {
@@ -39,6 +45,7 @@ export type DomainRow = {
     configManaged: boolean;
     certResolver: string;
     preferWildcardCert: boolean;
+    errorMessage?: string | null;
 };
 
 type Props = {
@@ -175,7 +182,7 @@ export default function DomainsTable({ domains, orgId }: Props) {
             );
         },
         cell: ({ row }) => {
-            const { verified, failed, type } = row.original;
+            const { verified, failed, type, errorMessage } = row.original;
             if (verified) {
                 return type == "wildcard" ? (
                     <Badge variant="outlinePrimary">{t("manual")}</Badge>
@@ -183,12 +190,44 @@ export default function DomainsTable({ domains, orgId }: Props) {
                     <Badge variant="green">{t("verified")}</Badge>
                 );
             } else if (failed) {
+                if (errorMessage) {
+                    return (
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Badge variant="red" className="cursor-help">
+                                        {t("failed", { fallback: "Failed" })}
+                                    </Badge>
+                                </TooltipTrigger>
+                                <TooltipContent className="max-w-xs">
+                                    <p className="break-words">{errorMessage}</p>
+                                </TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+                    );
+                }
                 return (
                     <Badge variant="red">
                         {t("failed", { fallback: "Failed" })}
                     </Badge>
                 );
             } else {
+                if (errorMessage) {
+                    return (
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Badge variant="yellow" className="cursor-help">
+                                        {t("pending")}
+                                    </Badge>
+                                </TooltipTrigger>
+                                <TooltipContent className="max-w-xs">
+                                    <p className="break-words">{errorMessage}</p>
+                                </TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+                    );
+                }
                 return <Badge variant="yellow">{t("pending")}</Badge>;
             }
         }