fix-build-progress-status (#5215)

* env-vars-updates

* fix-reconciliation-state

* fix-build-progress-status

* multi-env-sliders (#5216)

* multi-env-sliders

* chore: fmt

* feat: extract shared logic

* fix: pr comments

* fix: apply changes to select env and upsert

Author: ogzhanolguncu

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(deployment-progress)/deployment-info.tsx

@@ -4,17 +4,25 @@ import { formatCpuParts, formatMemoryParts } from "@/lib/utils/deployment-format
 import { Bolt, Cloud, Grid, LayoutRight } from "@unkey/icons";
 import { Button, InfoTooltip } from "@unkey/ui";
 import { ActiveDeploymentCard } from "../../../../components/active-deployment-card";
-import { DeploymentStatusBadge } from "../../../../components/deployment-status-badge";
+import {
+  type DeploymentStatus,
+  DeploymentStatusBadge,
+} from "../../../../components/deployment-status-badge";
 import { InfoChip } from "../../../../components/info-chip";
 import { RegionFlags } from "../../../../components/region-flags";
 import { Section, SectionHeader } from "../../../../components/section";
 import { useOptionalProjectLayout } from "../../../layout-provider";
 import { useDeployment } from "../layout-provider";
 
-export function DeploymentInfo({ title = "Deployment" }: { title?: string }) {
+type DeploymentInfoProps = {
+  title?: string;
+  statusOverride?: DeploymentStatus;
+};
+
+export function DeploymentInfo({ title = "Deployment", statusOverride }: DeploymentInfoProps) {
   const { deployment } = useDeployment();
   const projectLayout = useOptionalProjectLayout();
-  const deploymentStatus = deployment.status;
+  const deploymentStatus = statusOverride ?? deployment.status;
 
   return (
     <Section>

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(deployment-progress)/deployment-progress.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { trpc } from "@/lib/trpc/client";
+import type { Router } from "@/lib/trpc/routers";
+import type { inferRouterOutputs } from "@trpc/server";
 import { CloudUp, Earth, Hammer2, LayerFront, Pulse, Sparkle3 } from "@unkey/icons";
 import { Button, SettingCardGroup } from "@unkey/ui";
 import { useParams, useRouter } from "next/navigation";
@@ -12,22 +14,16 @@ import { useDeployment } from "../layout-provider";
 import { DeploymentBuildStepsTable } from "./build-steps-table/deployment-build-steps-table";
 import { DeploymentStep } from "./deployment-step";
 
-export function DeploymentProgress() {
+type RouterOutputs = inferRouterOutputs<Router>;
+export type StepsData = RouterOutputs["deploy"]["deployment"]["steps"];
+
+export function DeploymentProgress({ stepsData }: { stepsData?: StepsData }) {
   const { deployment } = useDeployment();
   const router = useRouter();
   const params = useParams();
   const workspaceSlug = params.workspaceSlug as string;
   const isFailed = deployment.status === "failed";
 
-  const steps = trpc.deploy.deployment.steps.useQuery(
-    {
-      deploymentId: deployment.id,
-    },
-    {
-      refetchInterval: 1_000,
-    },
-  );
-
   const buildSteps = trpc.deploy.deployment.buildSteps.useQuery(
     {
       deploymentId: deployment.id,
@@ -51,7 +47,7 @@ export function DeploymentProgress() {
     };
   }, [isFailed]);
 
-  const { building, deploying, network, queued, starting, finalizing } = steps.data ?? {};
+  const { building, deploying, network, queued, starting, finalizing } = stepsData ?? {};
 
   const [redeployOpen, setRedeployOpen] = useState(false);
   const domainsForDeployment = getDomainsForDeployment(deployment.id);

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/page.tsx

@@ -1,10 +1,12 @@
 "use client";
-import { useEffect } from "react";
+import { trpc } from "@/lib/trpc/client";
+import { useEffect, useMemo } from "react";
 import { DeploymentDomainsCard } from "../../../components/deployment-domains-card";
+import type { DeploymentStatus } from "../../../components/deployment-status-badge";
 import { ProjectContentWrapper } from "../../../components/project-content-wrapper";
 import { useProjectData } from "../../data-provider";
 import { DeploymentInfo } from "./(deployment-progress)/deployment-info";
-import { DeploymentProgress } from "./(deployment-progress)/deployment-progress";
+import { DeploymentProgress, type StepsData } from "./(deployment-progress)/deployment-progress";
 import { DeploymentNetworkSection } from "./(overview)/components/sections/deployment-network-section";
 import { useDeployment } from "./layout-provider";
 
@@ -14,25 +16,78 @@ export default function DeploymentOverview() {
 
   const ready = deployment.status === "ready";
 
+  const stepsQuery = trpc.deploy.deployment.steps.useQuery(
+    { deploymentId: deployment.id },
+    { refetchInterval: ready ? false : 1_000, refetchOnWindowFocus: false },
+  );
+
+  const derivedStatus = useMemo(
+    () => deriveStatusFromSteps(stepsQuery.data, deployment.status),
+    [stepsQuery.data, deployment.status],
+  );
+
   useEffect(() => {
     if (ready) {
+      stepsQuery.refetch();
       refetchDomains();
     }
-  }, [ready, refetchDomains]);
+  }, [ready, refetchDomains, stepsQuery.refetch]);
 
   return (
     <ProjectContentWrapper centered>
-      <DeploymentInfo />
+      <DeploymentInfo statusOverride={derivedStatus} />
       {ready ? (
         <div key="ready" className="flex flex-col gap-5 animate-fade-slide-in">
           <DeploymentDomainsCard />
           <DeploymentNetworkSection />
         </div>
       ) : (
         <div key="progress" className="animate-fade-slide-in">
-          <DeploymentProgress />
+          <DeploymentProgress stepsData={stepsQuery.data} />
         </div>
       )}
     </ProjectContentWrapper>
   );
 }
+
+const DEPLOYMENT_STATUSES: ReadonlySet<string> = new Set<DeploymentStatus>([
+  "pending",
+  "building",
+  "deploying",
+  "network",
+  "ready",
+  "failed",
+]);
+
+function isDeploymentStatus(value: string): value is DeploymentStatus {
+  return DEPLOYMENT_STATUSES.has(value);
+}
+
+function deriveStatusFromSteps(steps: StepsData | undefined, fallback: string): DeploymentStatus {
+  if (!steps) {
+    return isDeploymentStatus(fallback) ? fallback : "pending";
+  }
+
+  const { queued, building, deploying, network } = steps;
+
+  if ([queued, building, deploying, network].some((s) => s?.error)) {
+    return "failed";
+  }
+  if (network?.completed) {
+    return "ready";
+  }
+  if (network && !network.endedAt) {
+    return "network";
+  }
+  if (deploying && !deploying.endedAt) {
+    return "deploying";
+  }
+  if (building && !building.endedAt) {
+    return "building";
+  }
+  if (queued && !queued.endedAt) {
+    return "pending";
+  }
+
+  return isDeploymentStatus(fallback) ? fallback : "pending";
+}

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/settings/components/build-settings/dockerfile-settings.tsx

@@ -12,7 +12,7 @@ const dockerfileSchema = z.object({
 });
 
 export const Dockerfile = () => {
-  const { settings, autoSave } = useEnvironmentSettings();
+  const { settings, variant } = useEnvironmentSettings();
   const { environmentId, dockerfile: defaultValue } = settings;
 
   const {
@@ -48,7 +48,7 @@ export const Dockerfile = () => {
       displayValue={defaultValue}
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
-      autoSave={autoSave}
+      autoSave={variant === "onboarding"}
     >
       <FormInput
         required

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/settings/components/build-settings/root-directory-settings.tsx

@@ -12,7 +12,7 @@ const rootDirectorySchema = z.object({
 });
 
 export const RootDirectory = () => {
-  const { settings, autoSave } = useEnvironmentSettings();
+  const { settings, variant } = useEnvironmentSettings();
   const { environmentId, dockerContext: defaultValue } = settings;
 
   const {
@@ -48,7 +48,7 @@ export const RootDirectory = () => {
       displayValue={defaultValue || "."}
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
-      autoSave={autoSave}
+      autoSave={variant === "onboarding"}
     >
       <FormInput
         label="Root directory"

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/settings/components/runtime-settings/command.tsx

@@ -17,7 +17,7 @@ const commandSchema = z.object({
 type CommandFormValues = z.infer<typeof commandSchema>;
 
 export const Command = () => {
-  const { settings, autoSave } = useEnvironmentSettings();
+  const { settings, variant } = useEnvironmentSettings();
   const { command, environmentId } = settings;
   const defaultCommand = command.join(" ");
 
@@ -70,7 +70,7 @@ export const Command = () => {
       }
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
-      autoSave={autoSave}
+      autoSave={variant === "onboarding"}
     >
       <FormTextarea
         label="Command"

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/settings/components/runtime-settings/cpu.tsx

@@ -1,17 +1,11 @@
 "use client";
 
-import { collection } from "@/lib/collections";
 import { formatCpuParts } from "@/lib/utils/deployment-formatters";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { Bolt } from "@unkey/icons";
-import { Slider } from "@unkey/ui";
-import { useEffect } from "react";
-import { useForm, useWatch } from "react-hook-form";
-import { z } from "zod";
-import { useEnvironmentSettings } from "../../environment-provider";
-import { FormSettingCard, resolveSaveState } from "../shared/form-setting-card";
-import { SettingDescription } from "../shared/setting-description";
-import { indexToValue, valueToIndex } from "../shared/slider-utils";
+import {
+  type ResourceSliderConfig,
+  ResourceSliderSetting,
+} from "../shared/resource-slider-setting";
 
 const CPU_OPTIONS = [
   { label: "1/4 vCPU", value: 256 },
@@ -24,97 +18,18 @@ const CPU_OPTIONS = [
   { label: "32 vCPU", value: 32768 },
 ] as const;
 
-const cpuSchema = z.object({
-  cpu: z.number(),
-});
-
-type CpuFormValues = z.infer<typeof cpuSchema>;
-
-export const Cpu = () => {
-  const { settings, autoSave } = useEnvironmentSettings();
-  const { environmentId, cpuMillicores: defaultCpu } = settings;
-
-  const {
-    handleSubmit,
-    setValue,
-    formState: { isValid, isSubmitting },
-    control,
-    reset,
-  } = useForm<CpuFormValues>({
-    resolver: zodResolver(cpuSchema),
-    mode: "onChange",
-    defaultValues: { cpu: defaultCpu },
-  });
-
-  useEffect(() => {
-    reset({ cpu: defaultCpu });
-  }, [defaultCpu, reset]);
-
-  const currentCpu = useWatch({ control, name: "cpu" });
-
-  const onSubmit = async (values: CpuFormValues) => {
-    collection.environmentSettings.update(environmentId, (draft) => {
-      draft.cpuMillicores = values.cpu;
-    });
-  };
-
-  const hasChanges = currentCpu !== defaultCpu;
-  const currentIndex = valueToIndex(CPU_OPTIONS, currentCpu);
-
-  const saveState = resolveSaveState([
-    [isSubmitting, { status: "saving" }],
-    [!isValid, { status: "disabled" }],
-    [!hasChanges, { status: "disabled", reason: "No changes to save" }],
-  ]);
-
-  return (
-    <FormSettingCard
-      icon={<Bolt className="text-gray-12" iconSize="xl-medium" />}
-      title="CPU"
-      description="CPU allocation for each instance"
-      displayValue={(() => {
-        const parts = formatCpuParts(defaultCpu);
-        return (
-          <div className="space-x-1">
-            <span className="font-medium text-gray-12">{parts.value}</span>
-            <span className="text-gray-11 font-normal">{parts.unit}</span>
-          </div>
-        );
-      })()}
-      onSubmit={handleSubmit(onSubmit)}
-      saveState={saveState}
-      autoSave={autoSave}
-    >
-      <div className="flex flex-col">
-        <span className="text-gray-11 text-[13px]">CPU per instance</span>
-        <div className="flex items-center gap-3">
-          <Slider
-            min={0}
-            max={CPU_OPTIONS.length - 1}
-            step={1}
-            value={[currentIndex]}
-            onValueChange={([value]) => {
-              if (value !== undefined) {
-                setValue("cpu", indexToValue(CPU_OPTIONS, value, 256), { shouldValidate: true });
-              }
-            }}
-            onValueCommit={autoSave ? () => handleSubmit(onSubmit)() : undefined}
-            className="flex-1 max-w-[480px]"
-            rangeStyle={{
-              background: "linear-gradient(to right, hsla(var(--infoA-4)), hsla(var(--infoA-12)))",
-              backgroundSize: `${currentIndex > 0 ? 100 / (currentIndex / (CPU_OPTIONS.length - 1)) : 100}% 100%`,
-              backgroundRepeat: "no-repeat",
-            }}
-          />
-          <span className="text-[13px]">
-            <span className="font-medium text-gray-12">{formatCpuParts(currentCpu).value}</span>{" "}
-            <span className="text-gray-11">{formatCpuParts(currentCpu).unit}</span>
-          </span>
-        </div>
-        <SettingDescription>
-          Higher CPU improves compute-heavy workloads. Changes apply on next deploy.
-        </SettingDescription>
-      </div>
-    </FormSettingCard>
-  );
+const cpuConfig: ResourceSliderConfig = {
+  icon: <Bolt className="text-gray-12" iconSize="xl-medium" />,
+  title: "CPU",
+  description: "CPU allocation for each instance",
+  settingDescription: "Higher CPU improves compute-heavy workloads. Changes apply on next deploy.",
+  colorVar: "infoA",
+  slider: { kind: "index-mapped", options: CPU_OPTIONS, fallback: 256 },
+  formatValue: formatCpuParts,
+  readValue: (s) => s.cpuMillicores,
+  writeValue: (draft, value) => {
+    draft.cpuMillicores = value;
+  },
 };
+
+export const Cpu = () => <ResourceSliderSetting config={cpuConfig} />;

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/settings/components/runtime-settings/healthcheck/index.tsx

@@ -21,7 +21,7 @@ import { HTTP_METHODS, type HealthcheckFormValues, healthcheckSchema } from "./s
 import { intervalToSeconds, secondsToInterval } from "./utils";
 
 export const Healthcheck = () => {
-  const { settings, autoSave } = useEnvironmentSettings();
+  const { settings, variant } = useEnvironmentSettings();
   const { healthcheck, environmentId } = settings;
 
   const defaultValues: HealthcheckFormValues = {
@@ -92,7 +92,7 @@ export const Healthcheck = () => {
       }
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
-      autoSave={autoSave}
+      autoSave={variant === "onboarding"}
     >
       <div className="flex flex-col gap-2 w-120">
         {/* TODO: multi-check when API supports