@hubspot/cli 8.0.0 → 8.0.2-experimental.0

package/lib/projects/localDev/LocalDevWebsocketServer.js

@@ -1,41 +1,24 @@
-import { WebSocketServer } from 'ws';
-import { isPortManagerServerRunning, requestPorts, } from '@hubspot/local-dev-lib/portManager';
-import { uiLogger } from '../../ui/logger.js';
 import { addLocalStateFlag } from '@hubspot/local-dev-lib/config';
 import { LOCAL_DEV_UI_MESSAGE_SEND_TYPES, LOCAL_DEV_SERVER_MESSAGE_TYPES, CONFIG_LOCAL_STATE_FLAGS, LOCAL_DEV_WEBSOCKET_SERVER_INSTANCE_ID, } from '../../constants.js';
-import { lib } from '../../../lang/en.js';
 import { removeAnsiCodes } from '../../ui/removeAnsiCodes.js';
 import { isDeployWebsocketMessage, isViewedWelcomeScreenWebsocketMessage, isUploadWebsocketMessage, isAppInstallFailureWebsocketMessage, isAppInstallSuccessWebsocketMessage, isAppInstallInitiatedWebsocketMessage, } from './localDevWebsocketServerUtils.js';
-import { pkg } from '../../jsonLoader.js';
+import CLIWebSocketServer from '../../CLIWebSocketServer.js';
 const LOCAL_DEV_WEBSOCKET_SERVER_VERSION = 2;
 const LOG_PREFIX = '[LocalDevWebsocketServer]';
-const DOMAINS = ['hubspot.com', 'hubspotqa.com'];
-const SUBDOMAINS = ['local', 'app', 'app-na2', 'app-na3', 'app-ap1', 'app-eu1'];
-const ALLOWED_ORIGIN_REGEX = new RegExp(`^https://(${SUBDOMAINS.join('|')})\\.(${DOMAINS.join('|')})$`);
 class LocalDevWebsocketServer {
-    server;
-    debug;
+    cliWebSocketServer;
     localDevProcess;
     constructor(localDevProcess, debug) {
         this.localDevProcess = localDevProcess;
-        this.debug = debug;
-    }
-    log(message) {
-        if (this.debug) {
-            uiLogger.log(`${LOG_PREFIX} ${message}`);
-        }
-    }
-    logError(message) {
-        if (this.debug) {
-            uiLogger.error(`${LOG_PREFIX} ${message}`);
-        }
-    }
-    sendMessage(websocket, message) {
-        websocket.send(JSON.stringify(message));
+        this.cliWebSocketServer = new CLIWebSocketServer({
+            instanceId: LOCAL_DEV_WEBSOCKET_SERVER_INSTANCE_ID,
+            logPrefix: LOG_PREFIX,
+            debug,
+        });
     }
     async handleUpload(websocket) {
         const { uploadSuccess, buildSuccess, deploySuccess, deployId } = await this.localDevProcess.uploadProject();
-        this.sendMessage(websocket, {
+        this.cliWebSocketServer.sendMessage(websocket, {
             type: uploadSuccess
                 ? LOCAL_DEV_UI_MESSAGE_SEND_TYPES.UPLOAD_SUCCESS
                 : LOCAL_DEV_UI_MESSAGE_SEND_TYPES.UPLOAD_FAILURE,
@@ -50,7 +33,7 @@ class LocalDevWebsocketServer {
     }
     async handleDeploy(websocket, force) {
         const { success, deployId } = await this.localDevProcess.deployLatestBuild(force);
-        this.sendMessage(websocket, {
+        this.cliWebSocketServer.sendMessage(websocket, {
             type: success
                 ? LOCAL_DEV_UI_MESSAGE_SEND_TYPES.DEPLOY_SUCCESS
                 : LOCAL_DEV_UI_MESSAGE_SEND_TYPES.DEPLOY_FAILURE,
@@ -70,52 +53,35 @@ class LocalDevWebsocketServer {
     async handleAppInstallInitiated() {
         this.localDevProcess.sendDevServerMessage(LOCAL_DEV_SERVER_MESSAGE_TYPES.OAUTH_APP_INSTALL_INITIATED);
     }
-    setupMessageHandlers(websocket) {
-        websocket.on('message', data => {
-            try {
-                const message = JSON.parse(data.toString());
-                if (!message.type) {
-                    this.logError(lib.LocalDevWebsocketServer.errors.missingTypeField(data.toString()));
-                    return;
-                }
-                if (isUploadWebsocketMessage(message)) {
-                    this.handleUpload(websocket);
-                }
-                else if (isDeployWebsocketMessage(message)) {
-                    this.handleDeploy(websocket, message.data.force);
-                }
-                else if (isViewedWelcomeScreenWebsocketMessage(message)) {
-                    addLocalStateFlag(CONFIG_LOCAL_STATE_FLAGS.LOCAL_DEV_UI_WELCOME);
-                }
-                else if (isAppInstallSuccessWebsocketMessage(message)) {
-                    this.handleAppInstallSuccess();
-                }
-                else if (isAppInstallFailureWebsocketMessage(message)) {
-                    this.handleAppInstallFailure();
-                }
-                else if (isAppInstallInitiatedWebsocketMessage(message)) {
-                    this.handleAppInstallInitiated();
-                }
-                else {
-                    this.logError(lib.LocalDevWebsocketServer.errors.unknownMessageType(message.type));
-                }
-            }
-            catch (e) {
-                this.logError(lib.LocalDevWebsocketServer.errors.invalidJSON(data.toString()));
-            }
-        });
-    }
-    sendCliMetadata(websocket) {
-        this.sendMessage(websocket, {
-            type: LOCAL_DEV_UI_MESSAGE_SEND_TYPES.CLI_METADATA,
-            data: {
-                cliVersion: pkg.version,
-                localDevWebsocketServerVersion: LOCAL_DEV_WEBSOCKET_SERVER_VERSION,
-            },
-        });
+    handleMessage(websocket, message) {
+        if (isUploadWebsocketMessage(message)) {
+            this.handleUpload(websocket);
+            return true;
+        }
+        else if (isDeployWebsocketMessage(message)) {
+            this.handleDeploy(websocket, message.data.force);
+            return true;
+        }
+        else if (isViewedWelcomeScreenWebsocketMessage(message)) {
+            addLocalStateFlag(CONFIG_LOCAL_STATE_FLAGS.LOCAL_DEV_UI_WELCOME);
+            return true;
+        }
+        else if (isAppInstallSuccessWebsocketMessage(message)) {
+            this.handleAppInstallSuccess();
+            return true;
+        }
+        else if (isAppInstallFailureWebsocketMessage(message)) {
+            this.handleAppInstallFailure();
+            return true;
+        }
+        else if (isAppInstallInitiatedWebsocketMessage(message)) {
+            this.handleAppInstallInitiated();
+            return true;
+        }
+        return false;
     }
     sendProjectData(websocket) {
-        this.sendMessage(websocket, {
+        this.cliWebSocketServer.sendMessage(websocket, {
             type: LOCAL_DEV_UI_MESSAGE_SEND_TYPES.UPDATE_PROJECT_DATA,
             data: {
                 projectName: this.localDevProcess.projectData.name,
@@ -129,7 +95,7 @@ class LocalDevWebsocketServer {
     }
     setupProjectNodesListener(websocket) {
         const listener = (nodes) => {
-            this.sendMessage(websocket, {
+            this.cliWebSocketServer.sendMessage(websocket, {
                 type: LOCAL_DEV_UI_MESSAGE_SEND_TYPES.UPDATE_PROJECT_NODES,
                 data: nodes,
             });
@@ -141,7 +107,7 @@ class LocalDevWebsocketServer {
     }
     setupAppDataListener(websocket) {
         const listener = (appData) => {
-            this.sendMessage(websocket, {
+            this.cliWebSocketServer.sendMessage(websocket, {
                 type: LOCAL_DEV_UI_MESSAGE_SEND_TYPES.UPDATE_APP_DATA,
                 data: appData,
             });
@@ -154,7 +120,7 @@ class LocalDevWebsocketServer {
     setupUploadWarningsListener(websocket) {
         const listener = (uploadWarnings) => {
             const formattedUploadWarnings = Array.from(uploadWarnings).map(removeAnsiCodes);
-            this.sendMessage(websocket, {
+            this.cliWebSocketServer.sendMessage(websocket, {
                 type: LOCAL_DEV_UI_MESSAGE_SEND_TYPES.UPDATE_UPLOAD_WARNINGS,
                 data: { uploadWarnings: formattedUploadWarnings },
             });
@@ -167,7 +133,7 @@ class LocalDevWebsocketServer {
     setupDevServersStartedListener(websocket) {
         const listener = (devServersStarted) => {
             if (devServersStarted) {
-                this.sendMessage(websocket, {
+                this.cliWebSocketServer.sendMessage(websocket, {
                     type: LOCAL_DEV_UI_MESSAGE_SEND_TYPES.DEV_SERVERS_STARTED,
                 });
             }
@@ -184,33 +150,20 @@ class LocalDevWebsocketServer {
         this.setupDevServersStartedListener(websocket);
     }
     async start() {
-        const portManagerIsRunning = await isPortManagerServerRunning();
-        if (!portManagerIsRunning) {
-            throw new Error(lib.LocalDevWebsocketServer.errors.portManagerNotRunning(LOG_PREFIX));
-        }
-        const portData = await requestPorts([
-            { instanceId: LOCAL_DEV_WEBSOCKET_SERVER_INSTANCE_ID },
-        ]);
-        const port = portData[LOCAL_DEV_WEBSOCKET_SERVER_INSTANCE_ID];
-        this.server = new WebSocketServer({ port });
-        this.log(lib.LocalDevWebsocketServer.logs.startup(port));
-        this.server.on('connection', (ws, req) => {
-            const origin = req.headers.origin;
-            if (!origin || !ALLOWED_ORIGIN_REGEX.test(origin)) {
-                ws.close(1008, lib.LocalDevWebsocketServer.errors.originNotAllowed(origin));
-                return;
-            }
-            this.sendCliMetadata(ws);
-            this.sendProjectData(ws);
-            this.setupMessageHandlers(ws);
-            this.setupStateListeners(ws);
-            this.localDevProcess.sendDevServerMessage(LOCAL_DEV_SERVER_MESSAGE_TYPES.WEBSOCKET_SERVER_CONNECTED);
+        return this.cliWebSocketServer.start({
+            metadata: {
+                localDevWebsocketServerVersion: LOCAL_DEV_WEBSOCKET_SERVER_VERSION,
+            },
+            onConnection: ws => {
+                this.sendProjectData(ws);
+                this.setupStateListeners(ws);
+                this.localDevProcess.sendDevServerMessage(LOCAL_DEV_SERVER_MESSAGE_TYPES.WEBSOCKET_SERVER_CONNECTED);
+            },
+            onMessage: (ws, message) => this.handleMessage(ws, message),
         });
-        this.server.on('close', () => { });
     }
     shutdown() {
-        this.server?.close();
-        this.server = undefined;
+        this.cliWebSocketServer.shutdown();
     }
 }
 export default LocalDevWebsocketServer;

package/lib/projects/localDev/localDevWebsocketServerUtils.d.ts

@@ -1,7 +1,8 @@
-import { LocalDevDeployWebsocketMessage, LocalDevWebsocketMessage } from '../../../types/LocalDev.js';
-export declare function isUploadWebsocketMessage(message: LocalDevWebsocketMessage): boolean;
-export declare function isDeployWebsocketMessage(message: LocalDevWebsocketMessage): message is LocalDevDeployWebsocketMessage;
-export declare function isViewedWelcomeScreenWebsocketMessage(message: LocalDevWebsocketMessage): boolean;
-export declare function isAppInstallSuccessWebsocketMessage(message: LocalDevWebsocketMessage): boolean;
-export declare function isAppInstallInitiatedWebsocketMessage(message: LocalDevWebsocketMessage): boolean;
-export declare function isAppInstallFailureWebsocketMessage(message: LocalDevWebsocketMessage): boolean;
+import { LocalDevDeployWebsocketMessage } from '../../../types/LocalDev.js';
+import { CLIWebSocketMessage } from '../../CLIWebSocketServer.js';
+export declare function isUploadWebsocketMessage(message: CLIWebSocketMessage): boolean;
+export declare function isDeployWebsocketMessage(message: CLIWebSocketMessage): message is LocalDevDeployWebsocketMessage;
+export declare function isViewedWelcomeScreenWebsocketMessage(message: CLIWebSocketMessage): boolean;
+export declare function isAppInstallSuccessWebsocketMessage(message: CLIWebSocketMessage): boolean;
+export declare function isAppInstallInitiatedWebsocketMessage(message: CLIWebSocketMessage): boolean;
+export declare function isAppInstallFailureWebsocketMessage(message: CLIWebSocketMessage): boolean;

package/lib/projects/platformVersion.js

@@ -6,5 +6,5 @@ export function isV2Project(platformVersion) {
         return true;
     }
     const [year, minor] = platformVersion.split(/[.-]/);
-    return Number(year) >= 2025 && Number(minor) >= 2;
+    return (Number(year) === 2025 && Number(minor) >= 2) || Number(year) > 2025;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hubspot/cli",
-    "version": "8.0.0",
+    "version": "8.0.2-experimental.0",
     "description": "The official CLI for developing on HubSpot",
     "license": "Apache-2.0",
     "repository": "https://github.com/HubSpot/hubspot-cli",
@@ -8,9 +8,9 @@
     "dependencies": {
         "@hubspot/cms-dev-server": "1.2.1",
         "@hubspot/local-dev-lib": "5.1.1",
-        "@hubspot/project-parsing-lib": "0.11.2",
+        "@hubspot/project-parsing-lib": "0.12.0",
         "@hubspot/serverless-dev-runtime": "7.0.7",
-        "@hubspot/ui-extensions-dev-server": "1.1.3",
+        "@hubspot/ui-extensions-dev-server": "1.1.8",
         "@inquirer/prompts": "7.1.0",
         "@modelcontextprotocol/sdk": "1.25.0",
         "archiver": "7.0.1",
@@ -22,6 +22,8 @@
         "findup-sync": "4.0.0",
         "fs-extra": "8.1.0",
         "ink": "6.6.0",
+        "ink-spinner": "5.0.0",
+        "ink-text-input": "6.0.0",
         "js-yaml": "4.1.0",
         "minimatch": "10.0.1",
         "moment": "2.30.1",
@@ -80,7 +82,7 @@
         "list-all-commands": "yarn tsx ./scripts/get-all-commands.ts",
         "local-link": "hubspot-linking",
         "mcp-local": "yarn tsx ./scripts/mcp-local.ts",
-        "prettier:write": "prettier --write './**/*.{ts,js,json}'",
+        "prettier:write": "prettier --write './**/*.{ts,js,json,tsx}'",
         "release": "yarn tsx ./scripts/release.ts release",
         "sync-to-public": "yarn tsx ./scripts/sync-to-public.ts repo-sync",
         "ink-playground": "yarn build && yarn tsx ./scripts/ink-playground.ts",
@@ -115,5 +117,8 @@
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
+    },
+    "resolutions": {
+        "eslint-visitor-keys": "4.2.0"
     }
 }

package/types/LocalDev.d.ts

@@ -20,10 +20,6 @@ export type LocalDevStateConstructorOptions = {
     initialProjectProfileData: HSProfileVariables;
     env: Environment;
 };
-export type LocalDevWebsocketMessage = {
-    type: string;
-    data?: unknown;
-};
 export type LocalDevDeployWebsocketMessage = {
     type: typeof LOCAL_DEV_UI_MESSAGE_RECEIVE_TYPES.DEPLOY;
     data: {

package/ui/components/ActionSection.d.ts

@@ -0,0 +1,12 @@
+import { ValueOf } from '@hubspot/local-dev-lib/types/Utils';
+import { ACTION_STATUSES } from '../constants.js';
+type ActionStatus = ValueOf<typeof ACTION_STATUSES>;
+export type ActionSectionProps = {
+    status: ActionStatus;
+    statusText: string;
+    errorMessage?: string;
+    children: React.ReactNode;
+};
+export declare function ActionSection({ status, statusText, errorMessage, children, }: ActionSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function getActionSection(props: ActionSectionProps): React.ReactNode;
+export {};

package/ui/components/ActionSection.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { ACTION_STATUSES } from '../constants.js';
+import { INK_COLORS } from '../styles.js';
+import { StatusIcon } from './StatusIcon.js';
+const LEFT_BORDER_BOX_PROPS = {
+    flexDirection: 'column',
+    borderStyle: 'single',
+    borderColor: INK_COLORS.GRAY,
+    borderLeft: true,
+    borderTop: false,
+    borderRight: false,
+    borderBottom: false,
+    paddingLeft: 2,
+    marginLeft: 1,
+};
+export function ActionSection({ status, statusText, errorMessage, children, }) {
+    if (status === ACTION_STATUSES.IDLE) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "row", columnGap: 1, children: [_jsx(StatusIcon, { status: status }), _jsx(Text, { children: statusText })] }), _jsxs(Box, { ...LEFT_BORDER_BOX_PROPS, children: [children, status === ACTION_STATUSES.ERROR && errorMessage && (_jsx(Text, { color: INK_COLORS.ALERT_RED, wrap: "wrap", children: errorMessage }))] })] }));
+}
+export function getActionSection(props) {
+    return _jsx(ActionSection, { ...props });
+}

package/ui/components/BoxWithTitle.d.ts

@@ -1,9 +1,11 @@
 export interface BoxWithTitleProps {
     title: string;
-    message: string;
+    message?: string;
     titleBackgroundColor?: string;
     borderColor?: string;
     textCentered?: boolean;
+    children?: React.ReactNode;
+    flexGrow?: number;
 }
 export declare function getBoxWithTitle(props: BoxWithTitleProps): React.ReactNode;
-export declare function BoxWithTitle({ title, message, titleBackgroundColor, borderColor, textCentered, }: BoxWithTitleProps): React.ReactNode;
+export declare function BoxWithTitle({ title, message, titleBackgroundColor, borderColor, textCentered, children, flexGrow, }: BoxWithTitleProps): React.ReactNode;

package/ui/components/BoxWithTitle.js

@@ -4,6 +4,6 @@ import { CONTAINER_STYLES } from '../styles.js';
 export function getBoxWithTitle(props) {
     return _jsx(BoxWithTitle, { ...props });
 }
-export function BoxWithTitle({ title, message, titleBackgroundColor, borderColor, textCentered, }) {
-    return (_jsxs(Box, { ...CONTAINER_STYLES, borderStyle: "round", borderColor: borderColor, alignSelf: "flex-start", children: [_jsx(Box, { position: "absolute", marginTop: -2, paddingX: 0, alignSelf: "flex-start", justifyContent: "center", alignItems: "center", children: _jsx(Text, { backgroundColor: titleBackgroundColor, bold: true, children: ` ${title} ` }) }), _jsx(Box, { flexDirection: "column", rowGap: 1, children: message?.split('\n\n').map((section, sectionIndex) => (_jsx(Box, { flexDirection: "column", alignItems: textCentered ? 'center' : 'flex-start', children: section.split('\n').map((line, lineIndex) => (_jsx(Text, { children: line }, `${sectionIndex}-${lineIndex}`))) }, sectionIndex))) })] }));
+export function BoxWithTitle({ title, message, titleBackgroundColor, borderColor, textCentered, children, flexGrow, }) {
+    return (_jsxs(Box, { ...CONTAINER_STYLES, flexGrow: flexGrow, borderStyle: "round", borderColor: borderColor, children: [_jsx(Box, { position: "absolute", marginTop: -2, paddingX: 0, alignSelf: "flex-start", justifyContent: "center", alignItems: "center", children: _jsx(Text, { backgroundColor: titleBackgroundColor, bold: true, children: ` ${title} ` }) }), _jsxs(Box, { flexDirection: "column", rowGap: 1, children: [message?.split('\n\n').map((section, sectionIndex) => (_jsx(Box, { flexDirection: "column", alignItems: textCentered ? 'center' : 'flex-start', children: section.split('\n').map((line, lineIndex) => (_jsx(Text, { children: line }, `${sectionIndex}-${lineIndex}`))) }, sectionIndex))), children] })] }));
 }

package/ui/components/FullScreen.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type FullScreenProps = {
+    children: React.ReactNode;
+};
+export declare function FullScreen({ children }: FullScreenProps): React.ReactNode;
+export declare function getFullScreen(props: FullScreenProps): React.ReactNode;

package/ui/components/FullScreen.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from 'ink';
+import { useTerminalSize } from '../lib/useTerminalSize.js';
+export function FullScreen({ children }) {
+    // Use rows - 1 to prevent flickering
+    // See: https://github.com/vadimdemedes/ink/issues/359
+    const { rows, columns } = useTerminalSize();
+    const height = rows - 1;
+    return (_jsx(Box, { flexDirection: "column", width: columns, height: height, overflow: "hidden", children: children }));
+}
+export function getFullScreen(props) {
+    return _jsx(FullScreen, { ...props });
+}

package/ui/components/GetStartedFlow.d.ts

@@ -0,0 +1,24 @@
+import { SelectInputItem } from '../components/SelectInput.js';
+export declare const DEFAULT_PROJECT_NAME = "get-started-project";
+export declare const GET_STARTED_FLOW_OPTIONS: SelectInputItem[];
+export declare const FLOW_STEPS: {
+    readonly SELECT: "select";
+    readonly NAME_INPUT: "name-input";
+    readonly DEST_INPUT: "dest-input";
+    readonly CREATING: "creating";
+    readonly COMPLETE: "complete";
+};
+export type GetStartedFlowProps = {
+    derivedAccountId: number;
+    onRunCreateProject: (args: {
+        projectName: string;
+        projectDest: string;
+    }) => Promise<{
+        projectName: string;
+        projectDest: string;
+    }>;
+    initialName?: string;
+    initialDest?: string;
+};
+export declare function getGetStartedFlow(props: GetStartedFlowProps): React.ReactNode;
+export declare function GetStartedFlow({ derivedAccountId, onRunCreateProject, initialName, initialDest, }: GetStartedFlowProps): import("react/jsx-runtime").JSX.Element;

package/ui/components/GetStartedFlow.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { sanitizeFileName, untildify } from '@hubspot/local-dev-lib/path';
+import { Box, Text, useApp, useFocus, useInput } from 'ink';
+import { useCallback, useEffect, useState } from 'react';
+import { commands } from '../../lang/en.js';
+import { GET_STARTED_OPTIONS } from '../../lib/constants.js';
+import { uiAccountDescription } from '../../lib/ui/index.js';
+import { ActionSection } from '../components/ActionSection.js';
+import { BoxWithTitle } from '../components/BoxWithTitle.js';
+import { InputField } from '../components/InputField.js';
+import { SelectInput } from '../components/SelectInput.js';
+import { ACTION_STATUSES } from '../constants.js';
+import { INK_COLORS } from '../styles.js';
+export const DEFAULT_PROJECT_NAME = 'get-started-project';
+export const GET_STARTED_FLOW_OPTIONS = [
+    {
+        label: commands.getStarted.prompts.options.app,
+        value: GET_STARTED_OPTIONS.APP,
+    },
+    {
+        label: commands.getStarted.prompts.options.cmsTheme,
+        value: 'CMS_THEME',
+        disabled: true,
+    },
+    {
+        label: commands.getStarted.prompts.options.cmsReactModule,
+        value: 'CMS_REACT_MODULE',
+        disabled: true,
+    },
+];
+export const FLOW_STEPS = {
+    SELECT: 'select',
+    NAME_INPUT: 'name-input',
+    DEST_INPUT: 'dest-input',
+    CREATING: 'creating',
+    COMPLETE: 'complete',
+};
+export function getGetStartedFlow(props) {
+    return _jsx(GetStartedFlow, { ...props });
+}
+export function GetStartedFlow({ derivedAccountId, onRunCreateProject, initialName, initialDest, }) {
+    useFocus({ autoFocus: true });
+    const { exit } = useApp();
+    const accountName = uiAccountDescription(derivedAccountId);
+    // Determine initial step based on what was provided via CLI
+    const getInitialStep = () => {
+        if (initialName && initialDest) {
+            return FLOW_STEPS.CREATING;
+        }
+        else if (initialName) {
+            return FLOW_STEPS.DEST_INPUT;
+        }
+        else if (initialDest) {
+            return FLOW_STEPS.NAME_INPUT;
+        }
+        return FLOW_STEPS.SELECT;
+    };
+    const hasInitialValues = Boolean(initialName && initialDest);
+    const [step, setStep] = useState(getInitialStep());
+    const [selectedLabel, setSelectedLabel] = useState(initialName ? commands.getStarted.prompts.options.app : '');
+    const [projectName, setProjectName] = useState(initialName || DEFAULT_PROJECT_NAME);
+    const [projectDest, setProjectDest] = useState(initialDest
+        ? untildify(initialDest)
+        : sanitizeFileName(DEFAULT_PROJECT_NAME));
+    const [createStatus, setCreateStatus] = useState(initialName ? ACTION_STATUSES.RUNNING : ACTION_STATUSES.IDLE);
+    const [createError, setCreateError] = useState('');
+    // Only auto-update dest from name if dest wasn't provided via CLI
+    useEffect(() => {
+        if (!initialDest) {
+            setProjectDest(sanitizeFileName(projectName));
+        }
+    }, [projectName, initialDest]);
+    const handleSelect = useCallback((item) => {
+        if (item.disabled)
+            return;
+        setSelectedLabel(item.label);
+        setStep(FLOW_STEPS.NAME_INPUT);
+        setCreateStatus(ACTION_STATUSES.RUNNING);
+    }, []);
+    const handleNameSubmit = useCallback(() => {
+        setStep(FLOW_STEPS.DEST_INPUT);
+    }, []);
+    const handleDestChange = useCallback((value) => {
+        setProjectDest(value);
+        if (createError) {
+            setCreateError('');
+        }
+    }, [createError]);
+    const handleDestSubmit = useCallback(async () => {
+        setStep(FLOW_STEPS.CREATING);
+        setCreateError('');
+        setCreateStatus(ACTION_STATUSES.RUNNING);
+        try {
+            await onRunCreateProject({
+                projectName,
+                projectDest,
+            });
+            setCreateStatus(ACTION_STATUSES.DONE);
+            setStep(FLOW_STEPS.COMPLETE);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error
+                ? error.message
+                : commands.getStarted.v2.unknownError;
+            setCreateStatus(ACTION_STATUSES.ERROR);
+            setCreateError(errorMessage);
+            setStep(FLOW_STEPS.DEST_INPUT);
+        }
+    }, [onRunCreateProject, projectName, projectDest]);
+    // Auto-start project creation when initial values are provided
+    useEffect(() => {
+        if (hasInitialValues && step === FLOW_STEPS.CREATING) {
+            setCreateStatus(ACTION_STATUSES.RUNNING);
+            handleDestSubmit();
+        }
+    }, [hasInitialValues, step, handleDestSubmit]);
+    useInput((_, key) => {
+        if (step === FLOW_STEPS.COMPLETE && key.return) {
+            exit();
+        }
+    });
+    const titleText = commands.getStarted.v2.startTitle;
+    const overviewText = commands.getStarted.v2.guideOverview(accountName);
+    const projectsText = commands.getStarted.v2.projects;
+    const selectPrompt = commands.getStarted.v2.prompts.selectOptionV2;
+    const runningProjectCreateText = commands.getStarted.v2.runningProjectCreate;
+    return (_jsx(BoxWithTitle, { flexGrow: 1, title: "hs get-started", borderColor: INK_COLORS.HUBSPOT_ORANGE, titleBackgroundColor: INK_COLORS.HUBSPOT_ORANGE, children: _jsxs(Box, { flexDirection: "column", rowGap: 1, children: [_jsx(Text, { bold: true, children: titleText }), step === FLOW_STEPS.SELECT ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: overviewText }), _jsx(Text, { children: projectsText }), _jsxs(Box, { flexDirection: "row", flexWrap: "wrap", columnGap: 1, children: [_jsx(Text, { color: INK_COLORS.HUBSPOT_TEAL, children: "?" }), _jsx(Text, { children: selectPrompt })] }), _jsx(SelectInput, { items: GET_STARTED_FLOW_OPTIONS, onSelect: handleSelect })] })) : (_jsxs(Box, { flexDirection: "row", flexWrap: "wrap", columnGap: 1, children: [_jsx(Text, { color: INK_COLORS.HUBSPOT_TEAL, children: "?" }), _jsx(Text, { children: `${selectPrompt}` }), _jsx(Text, { color: INK_COLORS.INFO_BLUE, children: selectedLabel })] })), _jsxs(ActionSection, { status: createStatus, statusText: runningProjectCreateText, errorMessage: createError, children: [step !== FLOW_STEPS.SELECT && (_jsx(InputField, { flag: "name", prompt: "Enter your project name", value: projectName, isEditing: step === FLOW_STEPS.NAME_INPUT, onChange: setProjectName, onSubmit: handleNameSubmit })), step !== FLOW_STEPS.SELECT && step !== FLOW_STEPS.NAME_INPUT && (_jsx(InputField, { flag: "dest", prompt: "Choose where to create the project", value: projectDest, isEditing: step === FLOW_STEPS.DEST_INPUT, onChange: handleDestChange, onSubmit: handleDestSubmit }))] }), step === FLOW_STEPS.COMPLETE && (_jsxs(Box, { flexDirection: "row", flexWrap: "wrap", columnGap: 1, children: [_jsx(Text, { color: INK_COLORS.HUBSPOT_TEAL, children: "?" }), _jsx(Text, { children: commands.getStarted.v2.pressEnterToContinueDeploy(accountName) })] }))] }) }));
+}

package/ui/components/InputField.d.ts

@@ -0,0 +1,10 @@
+export type InputFieldProps = {
+    flag: string;
+    prompt: string;
+    value: string;
+    isEditing: boolean;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+};
+export declare function InputField({ flag, prompt, value, isEditing, onChange, onSubmit, }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function getInputField(props: InputFieldProps): React.ReactNode;

package/ui/components/InputField.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { INK_COLORS } from '../styles.js';
+export function InputField({ flag, prompt, value, isEditing, onChange, onSubmit, }) {
+    return (_jsxs(Box, { flexDirection: "row", flexWrap: "wrap", columnGap: 1, marginBottom: 1, children: [_jsx(Text, { color: INK_COLORS.HUBSPOT_TEAL, children: "?" }), _jsxs(Text, { children: ["[--", flag, "] ", prompt] }), _jsx(Text, { color: INK_COLORS.INFO_BLUE, children: _jsx(TextInput, { focus: isEditing, value: value, onChange: onChange, onSubmit: onSubmit }) })] }));
+}
+export function getInputField(props) {
+    return _jsx(InputField, { ...props });
+}

package/ui/components/SelectInput.d.ts

@@ -0,0 +1,11 @@
+export type SelectInputItem = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export type SelectInputProps = {
+    items: SelectInputItem[];
+    onSelect: (item: SelectInputItem) => void;
+};
+export declare function SelectInput({ items, onSelect }: SelectInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function getSelectInput(props: SelectInputProps): React.ReactNode;

package/ui/components/SelectInput.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+import { INK_COLORS } from '../styles.js';
+export function SelectInput({ items, onSelect }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    useInput((_, key) => {
+        if (key.upArrow) {
+            setSelectedIndex(prevIndex => {
+                let newIndex = prevIndex - 1;
+                if (newIndex < 0) {
+                    newIndex = items.length - 1;
+                }
+                // Skip disabled items
+                while (items[newIndex]?.disabled && newIndex !== prevIndex) {
+                    newIndex--;
+                    if (newIndex < 0) {
+                        newIndex = items.length - 1;
+                    }
+                }
+                return newIndex;
+            });
+        }
+        if (key.downArrow) {
+            setSelectedIndex(prevIndex => {
+                let newIndex = prevIndex + 1;
+                if (newIndex >= items.length) {
+                    newIndex = 0;
+                }
+                // Skip disabled items
+                while (items[newIndex]?.disabled && newIndex !== prevIndex) {
+                    newIndex++;
+                    if (newIndex >= items.length) {
+                        newIndex = 0;
+                    }
+                }
+                return newIndex;
+            });
+        }
+        if (key.return) {
+            const selectedItem = items[selectedIndex];
+            if (selectedItem && !selectedItem.disabled) {
+                onSelect(selectedItem);
+            }
+        }
+    });
+    return (_jsx(Box, { flexDirection: "column", children: items.map((item, index) => {
+            const isSelected = index === selectedIndex;
+            const isDisabled = item.disabled;
+            return (_jsxs(Box, { flexDirection: "row", columnGap: 1, children: [_jsx(Text, { color: isSelected ? INK_COLORS.INFO_BLUE : undefined, children: isSelected ? '❯' : ' ' }), _jsx(Text, { color: isDisabled
+                            ? INK_COLORS.GRAY
+                            : isSelected
+                                ? INK_COLORS.INFO_BLUE
+                                : undefined, dimColor: isDisabled, children: item.label })] }, item.value));
+        }) }));
+}
+export function getSelectInput(props) {
+    return _jsx(SelectInput, { ...props });
+}