chore: show error in tooltip for failed plans

apps/web/app/routes/ws/deployments/_components/plans/PlanStatusBadge.tsx

@@ -1,3 +1,12 @@
+import { AlertCircle } from "lucide-react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "~/components/ui/tooltip";
+
 export const PlanStatusDisplayName: Record<string, string> = {
   computing: "Computing",
   completed: "Completed",
@@ -16,7 +25,13 @@ const PlanStatusBadgeColor: Record<string, string> = {
     "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 border-yellow-200 dark:border-yellow-800",
 };
 
-export function PlanStatusBadge({ status }: { status: string }) {
+function PlanStatusBadgeInner({
+  status,
+  hasMessage = false,
+}: {
+  status: string;
+  hasMessage?: boolean;
+}) {
   return (
     <span
       className={`inline-flex items-center gap-1 rounded border px-2 py-0.5 text-xs font-medium ${
@@ -25,6 +40,37 @@ export function PlanStatusBadge({ status }: { status: string }) {
       }`}
     >
       {PlanStatusDisplayName[status] ?? status}
+      {hasMessage && <AlertCircle className="size-2.5" />}
     </span>
   );
 }
+
+export function PlanStatusBadge({
+  status,
+  message,
+}: {
+  status: string;
+  message?: string | null;
+}) {
+  if (message != null && message !== "") {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span
+              onClick={(e) => e.stopPropagation()}
+              onPointerDown={(e) => e.stopPropagation()}
+            >
+              <PlanStatusBadgeInner status={status} hasMessage />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent className="wrap-break-word flex max-w-sm items-start gap-1.5 whitespace-pre-wrap">
+            {message}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return <PlanStatusBadgeInner status={status} />;
+}

apps/web/app/routes/ws/deployments/page.$deploymentId.plans.$planId.tsx

@@ -3,7 +3,6 @@ import { FileText } from "lucide-react";
 import { Link, useParams } from "react-router";
 
 import { trpc } from "~/api/trpc";
-import { cn } from "~/lib/utils";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -22,6 +21,7 @@ import {
   TableRow,
 } from "~/components/ui/table";
 import { useWorkspace } from "~/components/WorkspaceProvider";
+import { cn } from "~/lib/utils";
 import { useDeployment } from "./_components/DeploymentProvider";
 import { DeploymentsNavbarTabs } from "./_components/DeploymentsNavbarTabs";
 import { PlanDiffDialog } from "./_components/plans/PlanDiffDialog";
@@ -35,8 +35,7 @@ export function meta() {
   ];
 }
 
-type Result =
-  RouterOutputs["deployment"]["plans"]["results"]["items"][number];
+type Result = RouterOutputs["deployment"]["plans"]["results"]["items"][number];
 
 function resultTitle(result: Result) {
   return `${result.environment.name} · ${result.resource.name} · ${result.agent.name}`;
@@ -69,18 +68,10 @@ function ChangesCell({ result }: { result: Result }) {
   if (result.status === "computing")
     return <span className="text-muted-foreground">—</span>;
   if (result.status === "errored")
-    return (
-      <span
-        className="text-red-600 dark:text-red-400"
-        title={result.message ?? undefined}
-      >
-        Errored
-      </span>
-    );
+    return <span className="text-red-600 dark:text-red-400">Errored</span>;
   if (result.status === "unsupported")
     return <span className="text-muted-foreground">Unsupported</span>;
-  if (result.hasChanges === true)
-    return <DiffStats stats={result.diffStats} />;
+  if (result.hasChanges === true) return <DiffStats stats={result.diffStats} />;
   if (result.hasChanges === false)
     return <span className="text-muted-foreground">No changes</span>;
   return <span className="text-muted-foreground">—</span>;
@@ -117,7 +108,7 @@ function ResultsTableRow({
       <TableCell>{result.resource.name}</TableCell>
       <TableCell>{result.agent.name}</TableCell>
       <TableCell>
-        <PlanStatusBadge status={result.status} />
+        <PlanStatusBadge {...result} />
       </TableCell>
       <TableCell>
         <ChangesCell result={result} />