feat: add openapi changes indicator

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

@@ -1,21 +1,27 @@
 import { Cloud } from "@unkey/icons";
 import { cn } from "@unkey/ui/src/lib/utils";
 
-export function StatusIndicator({
-  withSignal = false,
-}: {
+type StatusIndicatorProps = {
   withSignal?: boolean;
-}) {
+  className?: string;
+};
+
+export function StatusIndicator({ withSignal = false, className }: StatusIndicatorProps) {
   return (
     <div className="relative">
-      <div className="size-5 rounded flex items-center justify-center cursor-pointer border border-grayA-3 transition-all duration-100 bg-grayA-3">
+      <div
+        className={cn(
+          "size-5 rounded flex items-center justify-center cursor-pointer border border-grayA-3 transition-all duration-100 bg-grayA-3",
+          className,
+        )}
+      >
         <Cloud size="sm-regular" className="text-gray-12" />
       </div>
       {withSignal && (
         <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>
+              // biome-ignore lint/suspicious/noArrayIndexKey: its okay to use index as key
               key={index}
               className={cn(
                 "absolute inset-0 size-2 rounded-full",

apps/dashboard/app/(app)/projects/[projectId]/details/project-details-expandables/detail-section.tsx

@@ -2,22 +2,33 @@ import type { ReactNode } from "react";
 import type { DetailItem } from "./sections";
 
 type DetailRowProps = {
-  icon: ReactNode;
-  label: string;
+  icon: ReactNode | null;
+  label: string | null;
   children: ReactNode;
   alignment?: "center" | "start";
 };
 
 function DetailRow({ icon, label, children, alignment = "center" }: DetailRowProps) {
   const alignmentClass = alignment === "start" ? "items-start" : "items-center";
 
+  // If both icon and label are missing, let children take full space
+  if (!icon && !label) {
+    return (
+      <div className={`flex ${alignmentClass}`}>
+        <div className="text-grayA-11 text-[13px] min-w-0 flex-1">{children}</div>
+      </div>
+    );
+  }
+
   return (
     <div className={`flex ${alignmentClass}`}>
       <div className="flex items-center gap-3 w-[135px]">
-        <div className="bg-grayA-3 size-[22px] rounded-md flex items-center justify-center">
-          {icon}
-        </div>
-        <span className="text-grayA-11 text-[13px]">{label}</span>
+        {icon && (
+          <div className="bg-grayA-3 size-[22px] rounded-md flex items-center justify-center">
+            {icon}
+          </div>
+        )}
+        {label && <span className="text-grayA-11 text-[13px]">{label}</span>}
       </div>
       <div className="text-grayA-11 text-[13px] min-w-0 flex-1">{children}</div>
     </div>

apps/dashboard/app/(app)/projects/[projectId]/details/project-details-expandables/index.tsx

@@ -34,6 +34,15 @@ export const ProjectDetailsExpandable = ({
 
   const data = query.data.at(0);
 
+  const project = query.data.at(0)?.project;
+  const { data: domains } = useLiveQuery(
+    (q) =>
+      q
+        .from({ domain: collections.domains })
+        .where(({ domain }) => eq(domain.deploymentId, project?.liveDeploymentId)),
+    [project?.liveDeploymentId],
+  );
+
   if (!data?.deployment) {
     return null;
   }
@@ -100,44 +109,44 @@ export const ProjectDetailsExpandable = ({
                 >
                   <Cube size="2xl-medium" className="!size-[20px]" />
                 </Button>
-                <div className="flex flex-col gap-1">
-                  <span className="text-accent-12 font-medium text-sm">dashboard</span>
+                <div className="flex flex-col ">
+                  <span className="text-accent-12 font-medium text-sm">{project?.name}</span>
                   <div className="gap-2 items-center flex">
                     <a
-                      href="https://api.gateway.com"
+                      href="https://domainsData.at(0)?.domain"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-gray-9 text-sm hover:underline"
+                      className="text-gray-9 text-sm hover:underline truncate max-w-[120px]"
                     >
-                      api.gateway.com
+                      {domains.at(0)?.domain}
                     </a>
                     <InfoTooltip
                       position={{
                         side: "bottom",
                       }}
                       content={
-                        <div className="space-y-1">
-                          {["staging.gateway.com", "dev.gateway.com"].map((region) => (
+                        <div className="space-y-1 z-40">
+                          {domains.slice(1).map((d) => (
                             <div
-                              key={region}
+                              key={d.domain}
                               className="text-xs font-medium flex items-center gap-1.5"
                             >
                               <div className="w-1 h-1 bg-gray-8 rounded-full" />
                               <a
-                                href={`https://${region}`}
+                                href={`https://${d.domain}`}
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                className="hover:underline"
+                                className="hover:underline truncate max-w-[270px]"
                               >
-                                {region}
+                                {d.domain}
                               </a>
                             </div>
                           ))}
                         </div>
                       }
                     >
                       <div className="rounded-full px-1.5 py-0.5 bg-grayA-3 text-gray-12 text-xs leading-[18px] font-mono tabular-nums">
-                        +2
+                        +{domains.slice(1).length}
                       </div>
                     </InfoTooltip>
                   </div>

apps/dashboard/app/(app)/projects/[projectId]/details/project-details-expandables/sections.tsx

@@ -1,5 +1,6 @@
 import type { Deployment } from "@/lib/collections";
 import {
+  ArrowRight,
   Bolt,
   ChartActivity,
   CircleHalfDottedClock,
@@ -17,10 +18,11 @@ import {
 import { Badge, TimestampInfo } from "@unkey/ui";
 import type { ReactNode } from "react";
 import { Avatar } from "../active-deployment-card/git-avatar";
+import { StatusIndicator } from "../active-deployment-card/status-indicator";
 
 export type DetailItem = {
-  icon: ReactNode;
-  label: string;
+  icon: ReactNode | null;
+  label: string | null;
   content: ReactNode;
   alignment?: "center" | "start";
 };
@@ -31,6 +33,39 @@ export type DetailSection = {
 };
 
 export const createDetailSections = (details: Deployment): DetailSection[] => [
+  {
+    title: "OpenAPI changes",
+    items: [
+      {
+        icon: null,
+        label: null,
+        alignment: "start",
+        content: (
+          <div className="gap-4 items-center flex w-full">
+            <div className="rounded-[10px] flex items-center border border-gray-5 h-[52px] w-full">
+              <div className="bg-grayA-2 rounded-l-[10px] border-r border-grayA-3 h-full w-1/3 flex items-center justify-center">
+                <StatusIndicator className="bg-transparent" />
+              </div>
+              <div className="flex flex-col flex-1 px-3">
+                <div className="text-grayA-9 text-xs">from</div>
+                <div className="text-accent-12 font-medium text-xs">v_charlie042</div>
+              </div>
+            </div>
+            <ArrowRight className="shrink-0 text-gray-9 size-[14px]" size="sm-regular" />
+            <div className="rounded-[10px] flex items-center border border-gray-5 h-[52px] w-full">
+              <div className="bg-grayA-2 border-r border-grayA-3 h-full w-1/3 flex items-center justify-center">
+                <StatusIndicator withSignal className="bg-transparent" />
+              </div>
+              <div className="flex flex-col flex-1 px-3">
+                <div className="text-grayA-9 text-xs">from</div>
+                <div className="text-accent-12 font-medium text-xs">v_oz</div>
+              </div>
+            </div>
+          </div>
+        ),
+      },
+    ],
+  },
   {
     title: "Active deployment",
     items: [