fix: onboarding feedback

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/components/actions/deployment-list-table-action.popover.constants.tsx

@@ -95,9 +95,7 @@ export const DeploymentListTableActions = ({
         label: "Go to logs...",
         icon: <Layers3 iconSize="md-regular" />,
         onClick: () => {
-          router.push(
-            `/${workspace.slug}/projects/${selectedDeployment.projectId}/deployments/${selectedDeployment.id}/logs`,
-          );
+          router.push(`/${workspace.slug}/projects/${selectedDeployment.projectId}/logs`);
         },
       },
     ];

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/deployments-list.tsx

@@ -68,9 +68,9 @@ export const DeploymentsList = () => {
           const isLive = liveDeploymentId === deployment.id;
           const iconContainer = <StatusIndicator withSignal={isLive} />;
           return (
-            <div className="flex flex-col items-start px-[18px] py-1.5">
+            <div className="flex flex-col items-start px-4.5 py-1.5">
               <div className="flex gap-3 items-center w-full">
-                <div className="flex-shrink-0">{iconContainer}</div>
+                <div className="shrink-0">{iconContainer}</div>
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2">
                     <div
@@ -82,7 +82,7 @@ export const DeploymentsList = () => {
                       {shortenId(deployment.id)}
                     </div>
                     {isLive ? (
-                      <div className="flex-shrink-0">
+                      <div className="shrink-0">
                         {project?.isRolledBack ? (
                           <EnvStatusBadge variant="rolledBack" text="Rolled Back" />
                         ) : (

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 } = useEnvironmentSettings();
+  const { settings, autoSave } = useEnvironmentSettings();
   const { environmentId, dockerfile: defaultValue } = settings;
 
   const {
@@ -48,6 +48,7 @@ export const Dockerfile = () => {
       displayValue={defaultValue}
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
+      autoSave={autoSave}
     >
       <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 } = useEnvironmentSettings();
+  const { settings, autoSave } = useEnvironmentSettings();
   const { environmentId, dockerContext: defaultValue } = settings;
 
   const {
@@ -48,6 +48,7 @@ export const RootDirectory = () => {
       displayValue={defaultValue || "."}
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
+      autoSave={autoSave}
     >
       <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 } = useEnvironmentSettings();
+  const { settings, autoSave } = useEnvironmentSettings();
   const { command, environmentId } = settings;
   const defaultCommand = command.join(" ");
 
@@ -70,6 +70,7 @@ export const Command = () => {
       }
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
+      autoSave={autoSave}
     >
       <FormTextarea
         label="Command"

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

@@ -31,7 +31,7 @@ const cpuSchema = z.object({
 type CpuFormValues = z.infer<typeof cpuSchema>;
 
 export const Cpu = () => {
-  const { settings } = useEnvironmentSettings();
+  const { settings, autoSave } = useEnvironmentSettings();
   const { environmentId, cpuMillicores: defaultCpu } = settings;
 
   const {
@@ -83,6 +83,7 @@ export const Cpu = () => {
       })()}
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
+      autoSave={autoSave}
     >
       <div className="flex flex-col">
         <span className="text-gray-11 text-[13px]">CPU per instance</span>
@@ -97,6 +98,7 @@ export const Cpu = () => {
                 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)))",

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

@@ -20,7 +20,7 @@ import { HTTP_METHODS, type HealthcheckFormValues, healthcheckSchema } from "./s
 import { intervalToSeconds, secondsToInterval } from "./utils";
 
 export const Healthcheck = () => {
-  const { settings } = useEnvironmentSettings();
+  const { settings, autoSave } = useEnvironmentSettings();
   const { healthcheck, environmentId } = settings;
 
   const defaultValues: HealthcheckFormValues = {
@@ -94,6 +94,7 @@ export const Healthcheck = () => {
       }
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
+      autoSave={autoSave}
     >
       <div className="flex flex-col gap-3 w-[520px]">
         {/* TODO: multi-check when API supports

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

@@ -20,7 +20,7 @@ const instancesSchema = z.object({
 type InstancesFormValues = z.infer<typeof instancesSchema>;
 
 export const Instances = () => {
-  const { settings } = useEnvironmentSettings();
+  const { settings, autoSave } = useEnvironmentSettings();
   const { environmentId, regionConfig } = settings;
 
   const selectedRegions = Object.keys(regionConfig);
@@ -82,6 +82,7 @@ export const Instances = () => {
       }
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
+      autoSave={autoSave}
     >
       <div className="flex flex-col">
         <span className="text-gray-11 text-[13px]">Instances per region</span>
@@ -96,6 +97,15 @@ export const Instances = () => {
                 setValue("instances", value, { shouldValidate: true });
               }
             }}
+            onValueCommit={
+              autoSave
+                ? ([value]) => {
+                    if (value !== undefined) {
+                      handleSubmit(onSubmit)();
+                    }
+                  }
+                : undefined
+            }
             className="flex-1 max-w-[480px]"
             rangeStyle={{
               background:

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

@@ -31,7 +31,7 @@ const memorySchema = z.object({
 type MemoryFormValues = z.infer<typeof memorySchema>;
 
 export const Memory = () => {
-  const { settings } = useEnvironmentSettings();
+  const { settings, autoSave } = useEnvironmentSettings();
   const { memoryMib: defaultMemory, environmentId } = settings;
 
   const {
@@ -83,6 +83,7 @@ export const Memory = () => {
       })()}
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
+      autoSave={autoSave}
     >
       <div className="flex flex-col">
         <span className="text-gray-11 text-[13px]">Memory per instance</span>
@@ -99,6 +100,7 @@ export const Memory = () => {
                 });
               }
             }}
+            onValueCommit={autoSave ? () => handleSubmit(onSubmit)() : undefined}
             className="flex-1 max-w-[480px]"
             rangeStyle={{
               background:

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

@@ -12,7 +12,7 @@ const portSchema = z.object({
 });
 
 export const Port = () => {
-  const { settings } = useEnvironmentSettings();
+  const { settings, autoSave } = useEnvironmentSettings();
   const { environmentId, port: defaultValue } = settings;
 
   const {
@@ -48,6 +48,7 @@ export const Port = () => {
       displayValue={String(defaultValue)}
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
+      autoSave={autoSave}
     >
       <FormInput
         required

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

@@ -21,7 +21,7 @@ const regionsSchema = z.object({
 type RegionsFormValues = z.infer<typeof regionsSchema>;
 
 export const Regions = () => {
-  const { settings } = useEnvironmentSettings();
+  const { settings, autoSave } = useEnvironmentSettings();
   const { environmentId, regionConfig } = settings;
   const defaultRegions = Object.keys(regionConfig);
 
@@ -35,6 +35,7 @@ export const Regions = () => {
       environmentId={environmentId}
       defaultRegions={defaultRegions}
       availableRegions={availableRegions ?? []}
+      autoSave={autoSave}
     />
   );
 };
@@ -43,12 +44,14 @@ type RegionsFormProps = {
   environmentId: string;
   defaultRegions: string[];
   availableRegions: string[];
+  autoSave?: boolean;
 };
 
 const RegionsForm: React.FC<RegionsFormProps> = ({
   environmentId,
   defaultRegions,
   availableRegions,
+  autoSave,
 }) => {
   const {
     handleSubmit,
@@ -150,6 +153,7 @@ const RegionsForm: React.FC<RegionsFormProps> = ({
       displayValue={displayValue}
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
+      autoSave={autoSave}
     >
       <FormCombobox
         label="Regions"

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

@@ -19,7 +19,7 @@ const keyspacesSchema = z.object({
 type KeyspacesFormValues = z.infer<typeof keyspacesSchema>;
 
 export const Keyspaces = () => {
-  const { settings } = useEnvironmentSettings();
+  const { settings, autoSave } = useEnvironmentSettings();
   const { environmentId } = settings;
 
   const { data: availableKeyspaces } =
@@ -39,6 +39,7 @@ export const Keyspaces = () => {
       environmentId={environmentId}
       defaultKeyspaceIds={defaultKeyspaceIds}
       availableKeyspaces={availableKeyspaces ?? {}}
+      autoSave={autoSave}
     />
   );
 };
@@ -47,12 +48,14 @@ type KeyspacesFormProps = {
   environmentId: string;
   defaultKeyspaceIds: string[];
   availableKeyspaces: Record<string, { id: string; api: { name: string } }>;
+  autoSave?: boolean;
 };
 
 const KeyspacesForm: React.FC<KeyspacesFormProps> = ({
   environmentId,
   defaultKeyspaceIds,
   availableKeyspaces,
+  autoSave,
 }) => {
   const {
     handleSubmit,
@@ -160,6 +163,7 @@ const KeyspacesForm: React.FC<KeyspacesFormProps> = ({
       displayValue={displayValue}
       onSubmit={handleSubmit(onSubmit)}
       saveState={saveState}
+      autoSave={autoSave}
     >
       <FormCombobox
         label="Keyspaces"

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/settings/components/shared/form-setting-card.tsx

@@ -18,6 +18,7 @@ type EditableSettingCardProps = {
 
   ref?: React.Ref<HTMLFormElement>;
   className?: string;
+  autoSave?: boolean;
 };
 
 export const FormSettingCard = ({
@@ -31,6 +32,7 @@ export const FormSettingCard = ({
   saveState,
   ref,
   className,
+  autoSave,
 }: EditableSettingCardProps) => {
   return (
     <SettingCard
@@ -49,31 +51,47 @@ export const FormSettingCard = ({
             e.preventDefault();
             onSubmit(e);
           }}
+          onBlur={(e) => {
+            if (!autoSave || saveState.status !== "ready") {
+              return;
+            }
+            const relatedTarget = e.relatedTarget instanceof Node ? e.relatedTarget : null;
+            if (!e.currentTarget.contains(relatedTarget)) {
+              e.currentTarget.requestSubmit();
+            }
+          }}
         >
-          <div className="px-4 pt-4 pb-2 flex flex-col gap-3 overflow-y-auto max-h-[500px]">
+          <div
+            className={cn(
+              "px-4 pt-4 flex flex-col gap-3 overflow-y-auto max-h-[500px]",
+              autoSave ? "pb-4" : "pb-2",
+            )}
+          >
             {children}
           </div>
-          <div className="px-4 pt-2 pb-4 flex justify-end">
-            <InfoTooltip
-              content={saveState.status === "disabled" ? saveState.reason : undefined}
-              disabled={
-                saveState.status !== "disabled" || !("reason" in saveState && saveState.reason)
-              }
-              asChild
-              variant="inverted"
-            >
-              <Button
-                type="submit"
-                variant="primary"
-                className="px-3 py-3"
-                size="sm"
-                disabled={saveState.status !== "ready"}
-                loading={saveState.status === "saving"}
+          {!autoSave && (
+            <div className="px-4 pt-2 pb-4 flex justify-end">
+              <InfoTooltip
+                content={saveState.status === "disabled" ? saveState.reason : undefined}
+                disabled={
+                  saveState.status !== "disabled" || !("reason" in saveState && saveState.reason)
+                }
+                asChild
+                variant="inverted"
               >
-                Save
-              </Button>
-            </InfoTooltip>
-          </div>
+                <Button
+                  type="submit"
+                  variant="primary"
+                  className="px-3 py-3"
+                  size="sm"
+                  disabled={saveState.status !== "ready"}
+                  loading={saveState.status === "saving"}
+                >
+                  Save
+                </Button>
+              </InfoTooltip>
+            </div>
+          )}
         </form>
       }
     >