fix: show version tag/name in Plans page breadcrumb instead of UUID

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

@@ -35,7 +35,8 @@ export function meta() {
   ];
 }
 
-type Result = RouterOutputs["deployment"]["plans"]["results"][number];
+type Result =
+  RouterOutputs["deployment"]["plans"]["results"]["items"][number];
 
 function resultTitle(result: Result) {
   return `${result.environment.name} · ${result.resource.name} · ${result.agent.name}`;
@@ -142,7 +143,8 @@ export default function DeploymentPlanDetail() {
     { enabled: !!planId, refetchInterval: 5000 },
   );
 
-  const results = resultsQuery.data ?? [];
+  const version = resultsQuery.data?.version;
+  const results = resultsQuery.data?.items ?? [];
   const activeResult = results.find((r) => r.resultId === resultId);
 
   return (
@@ -174,7 +176,9 @@ export default function DeploymentPlanDetail() {
                 </Link>
               </BreadcrumbItem>
               <BreadcrumbSeparator />
-              <BreadcrumbPage className="font-mono">{planId}</BreadcrumbPage>
+              <BreadcrumbPage className="max-w-xs truncate font-mono">
+                {version?.name ?? version?.tag ?? planId}
+              </BreadcrumbPage>
             </BreadcrumbList>
           </Breadcrumb>
         </div>

packages/trpc/src/routes/deployment-plans.ts

@@ -136,7 +136,11 @@ export const deploymentPlansRouter = router({
     )
     .query(async ({ input, ctx }) => {
       const plan = await ctx.db
-        .select({ id: schema.deploymentPlan.id })
+        .select({
+          id: schema.deploymentPlan.id,
+          versionTag: schema.deploymentPlan.versionTag,
+          versionName: schema.deploymentPlan.versionName,
+        })
         .from(schema.deploymentPlan)
         .where(
           and(
@@ -184,26 +188,29 @@ export const deploymentPlansRouter = router({
         .where(eq(schema.deploymentPlanTarget.planId, input.planId))
         .orderBy(schema.environment.name, schema.resource.name);
 
-      return rows.map((r) => {
-        const agent = r.dispatchContext.jobAgent ?? {};
-        return {
-          resultId: r.resultId,
-          targetId: r.targetId,
-          environment: { id: r.environmentId, name: r.environmentName },
-          resource: { id: r.resourceId, name: r.resourceName },
-          agent: {
-            id: (agent.id as string | undefined) ?? "",
-            name: (agent.name as string | undefined) ?? "",
-            type: (agent.type as string | undefined) ?? "",
-          },
-          status: r.status,
-          hasChanges: r.hasChanges,
-          message: r.message,
-          contentHash: r.contentHash,
-          startedAt: r.startedAt,
-          completedAt: r.completedAt,
-        };
-      });
+      return {
+        version: { tag: plan.versionTag, name: plan.versionName },
+        items: rows.map((r) => {
+          const agent = r.dispatchContext.jobAgent ?? {};
+          return {
+            resultId: r.resultId,
+            targetId: r.targetId,
+            environment: { id: r.environmentId, name: r.environmentName },
+            resource: { id: r.resourceId, name: r.resourceName },
+            agent: {
+              id: (agent.id as string | undefined) ?? "",
+              name: (agent.name as string | undefined) ?? "",
+              type: (agent.type as string | undefined) ?? "",
+            },
+            status: r.status,
+            hasChanges: r.hasChanges,
+            message: r.message,
+            contentHash: r.contentHash,
+            startedAt: r.startedAt,
+            completedAt: r.completedAt,
+          };
+        }),
+      };
     }),
 
   resultDiff: protectedProcedure