From b4f60ca73ea8ef21840eb2d71e2f23eb7dafb655 Mon Sep 17 00:00:00 2001
From: Aditya Choudhari <adityachoudhari26@gmail.com>
Date: Thu, 23 Apr 2026 13:12:43 -0700
Subject: [PATCH 1/2] chore: show error in tooltip for failed plans

---
 .../_components/plans/PlanStatusBadge.tsx     | 43 ++++++++++++++++++-
 .../page.$deploymentId.plans.$planId.tsx      | 19 +++-----
 2 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/apps/web/app/routes/ws/deployments/_components/plans/PlanStatusBadge.tsx b/apps/web/app/routes/ws/deployments/_components/plans/PlanStatusBadge.tsx
index 96969be98..8daf6de16 100644
--- a/apps/web/app/routes/ws/deployments/_components/plans/PlanStatusBadge.tsx
+++ b/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,32 @@ 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>
+            <PlanStatusBadgeInner status={status} hasMessage />
+          </TooltipTrigger>
+          <TooltipContent className="wrap-break-word flex max-w-sm items-center gap-1.5">
+            {message}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return <PlanStatusBadgeInner status={status} />;
+}
diff --git a/apps/web/app/routes/ws/deployments/page.$deploymentId.plans.$planId.tsx b/apps/web/app/routes/ws/deployments/page.$deploymentId.plans.$planId.tsx
index 92d431989..bc01ce148 100644
--- a/apps/web/app/routes/ws/deployments/page.$deploymentId.plans.$planId.tsx
+++ b/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} />

From e3a335aeb08c858ad396e733ea52e610eb9fbe0d Mon Sep 17 00:00:00 2001
From: Aditya Choudhari <adityachoudhari26@gmail.com>
Date: Thu, 23 Apr 2026 13:31:03 -0700
Subject: [PATCH 2/2] cleanup

---
 .../deployments/_components/plans/PlanStatusBadge.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/routes/ws/deployments/_components/plans/PlanStatusBadge.tsx b/apps/web/app/routes/ws/deployments/_components/plans/PlanStatusBadge.tsx
index 8daf6de16..e427d9383 100644
--- a/apps/web/app/routes/ws/deployments/_components/plans/PlanStatusBadge.tsx
+++ b/apps/web/app/routes/ws/deployments/_components/plans/PlanStatusBadge.tsx
@@ -56,10 +56,15 @@ export function PlanStatusBadge({
     return (
       <TooltipProvider>
         <Tooltip>
-          <TooltipTrigger>
-            <PlanStatusBadgeInner status={status} hasMessage />
+          <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-center gap-1.5">
+          <TooltipContent className="wrap-break-word flex max-w-sm items-start gap-1.5 whitespace-pre-wrap">
             {message}
           </TooltipContent>
         </Tooltip>