['onSelectionChange'] = ({ detail }) => selectOffers(detail?.selectedItems ?? []);
+
const onSubmitWizard = async () => {
const isValid = await trigger();
@@ -255,8 +297,9 @@ export const Launch: React.FC = () => {
() => ({
spot_policy: 'on-demand',
...configuredOfferFilters,
+ ...urlOfferFilters,
}),
- [configuredOfferFilters],
+ [configuredOfferFilters, urlOfferFilters],
);
const yaml = useGenerateYaml({
formValues,
@@ -376,6 +419,8 @@ export const Launch: React.FC = () => {
showFleetFilter
selectedItems={selectedOffers}
onSelectionChange={onChangeOffer}
+ preselectedGpu={preselectedGpu}
+ onPreselect={(gpu) => selectOffers([gpu])}
onChangeBackendFilter={setSelectedBackends}
onChangeFleetFilter={setSelectedFleets}
permanentFilters={{ project_name: formValues.project ?? '' }}
diff --git a/frontend/src/pages/Runs/LaunchOptions/constants.tsx b/frontend/src/pages/Runs/LaunchOptions/constants.tsx
new file mode 100644
index 0000000000..49700d2d76
--- /dev/null
+++ b/frontend/src/pages/Runs/LaunchOptions/constants.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+
+import { Link, NavigateLink } from 'components';
+
+import { DOCS_URL, QUICK_START_URL } from 'consts';
+import { ROUTES } from 'routes';
+
+export const CLI_INFO = {
+ header: Run with the CLI
,
+ body: (
+ <>
+
+ A run is described by a configuration in a .dstack.yml file and submitted with{' '}
+ dstack apply.
+
+
+ -
+
+ Dev environments
+ {' '}
+ let you provision an instance and access it with your desktop IDE or SSH.
+
+ -
+
+ Tasks
+ {' '}
+ run arbitrary commands on one or more nodes, such as training or batch processing.
+
+ -
+
+ Services
+ {' '}
+ deploy models or web apps as secure and scalable endpoints.
+
+
+
+ For a step-by-step walkthrough, see the{' '}
+
+ Quickstart
+
+ .
+
+
+ ),
+};
+
+export const getTemplatesInfo = (projectName: string) => ({
+ header: From a template
,
+ body: (
+ <>
+
+ A template is a run configuration with a form. Pick a template, choose resources, and fill in its settings; the
+ last step shows the resulting configuration before you launch it.
+
+
+ Templates come from a Git repository: each is a YAML file in its .dstack/templates folder. A
+ project admin sets the repository in the{' '}
+
+ project settings
+
+ ; without one, the server's default is used.
+
+
+ See examples in{' '}
+
+ dstackai/dstack-templates
+
+ .
+
+
+ ),
+});
+
+export const AGENTS_INFO = {
+ header: Run with agents
,
+ body: (
+ <>
+
+ With{' '}
+
+ dstack skills
+ {' '}
+ installed, AI agents like Claude, Codex, and Cursor work with dstack on your behalf: they define configurations,
+ run them, and manage dstack through the CLI, from fleets and volumes to runs and their logs.
+
+
+ See{' '}
+
+ Installation
+ {' '}
+ for details.
+
+
+ ),
+};
diff --git a/frontend/src/pages/Runs/LaunchOptions/index.tsx b/frontend/src/pages/Runs/LaunchOptions/index.tsx
new file mode 100644
index 0000000000..a4687d6909
--- /dev/null
+++ b/frontend/src/pages/Runs/LaunchOptions/index.tsx
@@ -0,0 +1,391 @@
+import React, { FC, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { product } from 'product';
+
+import {
+ Box,
+ Button,
+ Cards,
+ Code,
+ Container,
+ ContentLayout,
+ FormField,
+ Header,
+ InfoLink,
+ Popover,
+ PropertyFilter,
+ SpaceBetween,
+ Spinner,
+ StatusIndicator,
+} from 'components';
+
+import { QUICK_START_URL } from 'consts';
+import { useBreadcrumbs, useHelpPanel } from 'hooks';
+import { copyToClipboard } from 'libs';
+import { tokensToSearchParams } from 'libs/filters';
+import { ROUTES } from 'routes';
+import { useLazyGetGpusListQuery } from 'services/gpu';
+import { useGetProjectQuery } from 'services/project';
+import { useGetAllTemplatesQuery } from 'services/templates';
+
+import { getRequestParams } from 'pages/Offers/List';
+import { getOfferFilters, useFilters } from 'pages/Offers/List/hooks/useFilters';
+import { useCheckAvailableProjectPermission } from 'pages/Project/hooks/useCheckAvailableProjectPermission';
+import { useConfigProjectCliCommand } from 'pages/Project/hooks/useConfigProjectCliComand';
+
+import { AGENTS_INFO, CLI_INFO, getTemplatesInfo } from './constants';
+
+import styles from './styles.module.scss';
+
+const INSTALL_COMMAND = 'uv tool install dstack -U';
+const APPLY_COMMAND = 'dstack apply -f .dstack.yml';
+const SKILLS_COMMAND = 'npx skills add dstackai/dstack';
+// The page layout's padding below the content.
+const PAGE_BOTTOM_PADDING = 40;
+// Matches the breakpoint in styles.module.scss where the columns stack.
+const STACKED_COLUMNS_QUERY = '(max-width: 960px)';
+
+export const LaunchOptions: FC = () => {
+ const { t } = useTranslation();
+ const [searchParams, setSearchParams] = useSearchParams();
+ const [gpus, setGpus] = useState([]);
+ const [getGpus] = useLazyGetGpusListQuery();
+
+ useBreadcrumbs([
+ {
+ text: t('projects.runs'),
+ href: ROUTES.RUNS.LIST,
+ },
+ {
+ text: t('runs.launch_page.title'),
+ href: ROUTES.RUNS.LAUNCH,
+ },
+ ]);
+
+ // The same filter as on Offers; GPU names and backends load only when their list is opened.
+ const [initialFilters] = useState(() => getOfferFilters(searchParams));
+
+ const loadGpus = async (projectName: string) => {
+ const data = await getGpus(getRequestParams({ project_name: projectName, group_by: ['gpu'] })).unwrap();
+ setGpus(data.gpus);
+ };
+
+ const {
+ filteringRequestParams,
+ propertyFilterRef,
+ propertyFilterQuery,
+ onChangePropertyFilter,
+ filteringOptions,
+ filteringProperties,
+ filteringStatusType,
+ handleLoadItems,
+ } = useFilters({ gpus, withSearchParams: false, showFleetFilter: true, defaultFilters: initialFilters, loadGpus });
+
+ // The filter owns the URL, apart from the selected template.
+ useEffect(() => {
+ setSearchParams(
+ (params) => {
+ const next = tokensToSearchParams(propertyFilterQuery.tokens);
+ const template = params.get('template');
+
+ if (template) {
+ next.set('template', template);
+ }
+
+ return next;
+ },
+ { replace: true },
+ );
+ }, [propertyFilterQuery]);
+
+ const projectName =
+ typeof filteringRequestParams.project_name === 'string' ? filteringRequestParams.project_name : undefined;
+
+ const { currentData: templates, isFetching: isFetchingTemplates } = useGetAllTemplatesQuery(
+ { projectName: projectName ?? '' },
+ { skip: !product.hasTemplates || !projectName },
+ );
+
+ const renderWaysToLaunch = () => {
+ if (!projectName) {
+ return {t('runs.launch_page.select_project')};
+ }
+
+ // Templates are an Enterprise feature; without them, the CLI is the only way to launch.
+ if (!product.hasTemplates) {
+ return ;
+ }
+
+ // Waiting for the templates keeps the layout from switching once they arrive.
+ if (isFetchingTemplates) {
+ return ;
+ }
+
+ return ;
+ };
+
+ return (
+ {t('runs.launch_page.title')}}>
+
+
+
+ {renderWaysToLaunch()}
+
+
+ );
+};
+
+// Reaches the window's bottom; extra height goes to the CLI card and the template cards.
+const Columns: FC<{ projectName: string; templates: ITemplate[] }> = ({ projectName, templates }) => {
+ const columnsRef = useRef(null);
+ const minHeight = useHeightToWindowBottom(columnsRef);
+
+ return (
+
+
+
+ {/* Fills the row, so the template cards scroll inside it. */}
+
+
+
{command}
+
+
+
{t('common.copied')}}
+ >
+
+
+