refactor: openapi selection

apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/active-deployment-card/status-indicator.tsx

@@ -60,28 +60,46 @@ export function StatusIndicator({
         </div>
         {withSignal && !isLoading && (
           <div className="absolute -top-0.5 -right-0.5">
-            {[0, 0.15, 0.3, 0.45].map((delay, index) => (
-              <div
-                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                key={index}
-                className={cn(
-                  "absolute inset-0 size-2 rounded-full",
-                  pulseColors[index],
-                  index === 0 && "opacity-75",
-                  index === 1 && "opacity-60",
-                  index === 2 && "opacity-40",
-                  index === 3 && "opacity-25",
-                )}
-                style={{
-                  animation: "ping 2s cubic-bezier(0, 0, 0.2, 1) infinite",
-                  animationDelay: `${delay}s`,
-                }}
-              />
-            ))}
-            <div className={cn("relative size-2 rounded-full", coreColor)} />
+            <PulseIndicator colors={pulseColors} coreColor={coreColor} />
           </div>
         )}
       </div>
     </InfoTooltip>
   );
 }
+
+type PulseIndicatorProps = {
+  colors?: string[];
+  coreColor?: string;
+  className?: string;
+};
+
+export function PulseIndicator({
+  colors = ["bg-successA-9", "bg-successA-10", "bg-successA-11", "bg-successA-12"],
+  coreColor = "bg-successA-9",
+  className,
+}: PulseIndicatorProps) {
+  return (
+    <div className={cn("relative", className)}>
+      {[0, 0.15, 0.3, 0.45].map((delay, index) => (
+        <div
+          // biome-ignore lint/suspicious/noArrayIndexKey: its okay
+          key={index}
+          className={cn(
+            "absolute inset-0 size-2 rounded-full",
+            colors[index],
+            index === 0 && "opacity-75",
+            index === 1 && "opacity-60",
+            index === 2 && "opacity-40",
+            index === 3 && "opacity-25",
+          )}
+          style={{
+            animation: "ping 2s cubic-bezier(0, 0, 0.2, 1) infinite",
+            animationDelay: `${delay}s`,
+          }}
+        />
+      ))}
+      <div className={cn("relative size-2 rounded-full", coreColor)} />
+    </div>
+  );
+}

apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/components/deployment-select.tsx

@@ -0,0 +1,107 @@
+"use client";
+import type { Deployment } from "@/lib/collections";
+import { shortenId } from "@/lib/shorten-id";
+import {
+  InfoTooltip,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@unkey/ui";
+import { format } from "date-fns";
+import { PulseIndicator } from "../../details/active-deployment-card/status-indicator";
+import { useProjectLayout } from "../../layout-provider";
+
+type DeploymentSelectProps = {
+  value: string;
+  onValueChange: (value: string) => void;
+  deployments: Array<{
+    deployment: Deployment;
+  }>;
+  isLoading: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  id?: string;
+  disabledDeploymentId?: string;
+};
+
+export function DeploymentSelect({
+  value,
+  onValueChange,
+  deployments,
+  isLoading,
+  placeholder = "Select deployment",
+  disabled = false,
+  id,
+  disabledDeploymentId,
+}: DeploymentSelectProps) {
+  const { liveDeploymentId } = useProjectLayout();
+  const renderOptions = () => {
+    if (isLoading) {
+      return (
+        <SelectItem value="loading" disabled>
+          Loading...
+        </SelectItem>
+      );
+    }
+    if (deployments.length === 0) {
+      return (
+        <SelectItem value="no-deployments" disabled>
+          No deployments found
+        </SelectItem>
+      );
+    }
+
+    return deployments.map(({ deployment }) => {
+      const isDisabled = deployment.id === disabledDeploymentId || !deployment.hasOpenApiSpec;
+      const deployedAt = format(deployment.createdAt, "MMM d, h:mm a");
+
+      return (
+        <SelectItem key={deployment.id} value={deployment.id} disabled={isDisabled}>
+          <InfoTooltip
+            disabled={!isDisabled && deployment.id !== liveDeploymentId}
+            content={
+              isDisabled
+                ? deployment.id === disabledDeploymentId
+                  ? "Already selected for comparison"
+                  : "No OpenAPI spec available"
+                : deployment.id === liveDeploymentId
+                  ? "Live deployment"
+                  : undefined
+            }
+            position={{
+              side: "right",
+              align: "end",
+            }}
+            asChild
+          >
+            <div className="flex items-center gap-2.5 text-[13px]">
+              <span className="text-grayA-12 font-medium truncate">{shortenId(deployment.id)}</span>
+              <span className="text-grayA-9">•</span>
+              <span className="text-grayA-9">{deployedAt}</span>
+              {deployment.id === liveDeploymentId && <PulseIndicator />}
+            </div>
+          </InfoTooltip>
+        </SelectItem>
+      );
+    });
+  };
+
+  return (
+    <Select
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled || isLoading || deployments.length === 0}
+    >
+      <SelectTrigger
+        id={id}
+        className="rounded-md"
+        title={value === liveDeploymentId ? "Live deployment" : ""}
+      >
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>{renderOptions()}</SelectContent>
+    </Select>
+  );
+}

apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/page.tsx

@@ -10,7 +10,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Card } from "../details/card";
 import { useProjectLayout } from "../layout-provider";
 import { DiffViewerContent } from "./components/client";
-import { DeploymentSelect } from "./deployment-select";
+import { DeploymentSelect } from "./components/deployment-select";
 
 export default function DiffPage() {
   const { collections, isDetailsOpen, liveDeploymentId } = useProjectLayout();

apps/dashboard/lib/collections/deploy/deployments.ts

@@ -14,6 +14,8 @@ const schema = z.object({
   gitCommitAuthorHandle: z.string().nullable(),
   gitCommitAuthorAvatarUrl: z.string(),
   gitCommitTimestamp: z.number().int().nullable(),
+  // OpenAPI
+  hasOpenApiSpec: z.boolean(),
   // Immutable configuration snapshot
   runtimeConfig: z.object({
     regions: z.array(

apps/dashboard/lib/trpc/routers/deploy/deployment/list.ts

@@ -9,7 +9,6 @@ export const listDeployments = t.procedure
   .input(z.object({ projectId: z.string() }))
   .query(async ({ ctx, input }) => {
     try {
-      // Get all deployments for this workspace and specific project
       const deployments = await db.query.deployments.findMany({
         where: (table, { eq, and }) =>
           and(eq(table.workspaceId, ctx.workspace.id), eq(table.projectId, input.projectId)),
@@ -25,16 +24,18 @@ export const listDeployments = t.procedure
           gitCommitTimestamp: true,
           runtimeConfig: true,
           status: true,
+          openapiSpec: true,
           createdAt: true,
         },
         limit: 500,
       });
 
-      return deployments.map((deployment) => ({
+      return deployments.map(({ openapiSpec, ...deployment }) => ({
         ...deployment,
         gitBranch: deployment.gitBranch ?? "main",
         gitCommitAuthorAvatarUrl:
           deployment.gitCommitAuthorAvatarUrl ?? "https://github.com/identicons/dummy-user.png",
+        hasOpenApiSpec: Boolean(openapiSpec),
         gitCommitTimestamp: deployment.gitCommitTimestamp,
       }));
     } catch (_error) {