@hubspot/cli 8.0.8-experimental.1 → 8.0.8-experimental.2

package/mcp-server/tools/project/__tests__/CreateProjectTool.test.js

@@ -1,11 +1,11 @@
 import { CreateProjectTool, } from '../CreateProjectTool.js';
-import { runCommandInDir } from '../../../utils/project.js';
+import { runCommandInDir } from '../../../utils/command.js';
 import { addFlag } from '../../../utils/command.js';
 import { APP_DISTRIBUTION_TYPES, EMPTY_PROJECT, PROJECT_WITH_APP, } from '../../../../lib/constants.js';
 import { mcpFeedbackRequest } from '../../../utils/feedbackTracking.js';
 import { trackToolUsage } from '../../../utils/toolUsageTracking.js';
 vi.mock('@modelcontextprotocol/sdk/server/mcp.js');
-vi.mock('../../../utils/project');
+vi.mock('../../../utils/command');
 vi.mock('../../../utils/command');
 vi.mock('../../../../lib/constants');
 vi.mock('../../../../lib/projects/create/v2');

package/mcp-server/tools/project/__tests__/CreateTestAccountTool.test.js

@@ -1,12 +1,12 @@
 import { CreateTestAccountTool, } from '../CreateTestAccountTool.js';
-import { runCommandInDir } from '../../../utils/project.js';
+import { runCommandInDir } from '../../../utils/command.js';
 import { addFlag } from '../../../utils/command.js';
 import { mcpFeedbackRequest } from '../../../utils/feedbackTracking.js';
 import { trackToolUsage } from '../../../utils/toolUsageTracking.js';
 import fs from 'fs';
 import * as config from '@hubspot/local-dev-lib/config';
 vi.mock('@modelcontextprotocol/sdk/server/mcp.js');
-vi.mock('../../../utils/project');
+vi.mock('../../../utils/command');
 vi.mock('../../../utils/command');
 vi.mock('../../../utils/toolUsageTracking');
 vi.mock('../../../utils/feedbackTracking');

package/mcp-server/tools/project/__tests__/DeployProjectTool.test.js

@@ -1,10 +1,10 @@
 import { DeployProjectTool } from '../DeployProjectTool.js';
-import { runCommandInDir } from '../../../utils/project.js';
+import { runCommandInDir } from '../../../utils/command.js';
 import { addFlag } from '../../../utils/command.js';
 import { mcpFeedbackRequest } from '../../../utils/feedbackTracking.js';
 import { trackToolUsage } from '../../../utils/toolUsageTracking.js';
 vi.mock('@modelcontextprotocol/sdk/server/mcp.js');
-vi.mock('../../../utils/project');
+vi.mock('../../../utils/command');
 vi.mock('../../../utils/command');
 vi.mock('../../../utils/toolUsageTracking');
 vi.mock('../../../utils/feedbackTracking');

package/mcp-server/tools/project/__tests__/UploadProjectTools.test.js

@@ -1,13 +1,21 @@
 import { UploadProjectTools } from '../UploadProjectTools.js';
 import { getAllHsProfiles } from '@hubspot/project-parsing-lib/profiles';
 import { getProjectConfig } from '../../../../lib/projects/config.js';
-import { runCommandInDir } from '../../../utils/project.js';
+import { runCommandInDir } from '../../../utils/command.js';
 import { mcpFeedbackRequest } from '../../../utils/feedbackTracking.js';
 import { trackToolUsage } from '../../../utils/toolUsageTracking.js';
 vi.mock('@modelcontextprotocol/sdk/server/mcp.js');
 vi.mock('@hubspot/project-parsing-lib/profiles');
 vi.mock('../../../../lib/projects/config.js');
-vi.mock('../../../utils/project');
+vi.mock('../../../utils/command', () => ({
+    runCommandInDir: vi.fn(),
+    addFlag: vi.fn((command, flagName, value) => {
+        if (Array.isArray(value)) {
+            return `${command} --${flagName} ${value.map(item => `"${item}"`).join(' ')}`;
+        }
+        return `${command} --${flagName} "${value}"`;
+    }),
+}));
 vi.mock('../../../utils/toolUsageTracking');
 vi.mock('../../../utils/feedbackTracking');
 const mockTrackToolUsage = trackToolUsage;

package/mcp-server/tools/project/__tests__/ValidateProjectTool.test.js

@@ -1,9 +1,9 @@
 import { ValidateProjectTool, } from '../ValidateProjectTool.js';
-import { runCommandInDir } from '../../../utils/project.js';
+import { runCommandInDir } from '../../../utils/command.js';
 import { mcpFeedbackRequest } from '../../../utils/feedbackTracking.js';
 import { trackToolUsage } from '../../../utils/toolUsageTracking.js';
 vi.mock('@modelcontextprotocol/sdk/server/mcp.js');
-vi.mock('../../../utils/project');
+vi.mock('../../../utils/command');
 vi.mock('../../../utils/toolUsageTracking');
 vi.mock('../../../utils/feedbackTracking');
 const mockTrackToolUsage = trackToolUsage;

package/mcp-server/utils/__tests__/command.test.js

@@ -1,6 +1,20 @@
-import { addFlag } from '../command.js';
-vi.mock('child_process');
-vi.mock('util');
+import fs from 'fs';
+import path from 'path';
+const mockExecAsync = vi.fn();
+vi.mock('node:child_process');
+vi.mock('util', () => ({
+    default: {
+        promisify: () => mockExecAsync,
+    },
+    promisify: () => mockExecAsync,
+}));
+vi.mock('fs');
+vi.mock('path');
+// Import after mocks are set up
+const { addFlag, runCommandInDir } = await import('../command.js');
+const mockExistsSync = vi.mocked(fs.existsSync);
+const mockMkdirSync = vi.mocked(fs.mkdirSync);
+const mockResolve = vi.mocked(path.resolve);
 describe('mcp-server/utils/command', () => {
     describe('addFlag', () => {
         it('should add string flag to command', () => {
@@ -42,4 +56,220 @@ describe('mcp-server/utils/command', () => {
             expect(result).toBe('hs project create --features "card with spaces" "settings"');
         });
     });
+    describe('runCommandInDir', () => {
+        const mockDirectory = '/test/directory';
+        const mockCommand = 'npm install';
+        const mockResolvedPath = '/resolved/test/directory';
+        beforeEach(() => {
+            mockResolve.mockReturnValue(mockResolvedPath);
+        });
+        it('should run command in existing directory', async () => {
+            const expectedResult = {
+                stdout: 'command output',
+                stderr: '',
+            };
+            mockExistsSync.mockReturnValue(true);
+            mockExecAsync.mockResolvedValue(expectedResult);
+            const result = await runCommandInDir(mockDirectory, mockCommand);
+            expect(mockExistsSync).toHaveBeenCalledWith(mockDirectory);
+            expect(mockMkdirSync).not.toHaveBeenCalled();
+            expect(mockResolve).toHaveBeenCalledWith(mockDirectory);
+            expect(mockExecAsync).toHaveBeenCalledWith(mockCommand, expect.objectContaining({
+                cwd: mockResolvedPath,
+                env: expect.any(Object),
+            }));
+            expect(result).toEqual(expectedResult);
+        });
+        it('should create directory if it does not exist', async () => {
+            const expectedResult = {
+                stdout: 'command output',
+                stderr: '',
+            };
+            mockExistsSync.mockReturnValue(false);
+            mockExecAsync.mockResolvedValue(expectedResult);
+            const result = await runCommandInDir(mockDirectory, mockCommand);
+            expect(mockExistsSync).toHaveBeenCalledWith(mockDirectory);
+            expect(mockMkdirSync).toHaveBeenCalledWith(mockDirectory);
+            expect(mockResolve).toHaveBeenCalledWith(mockDirectory);
+            expect(mockExecAsync).toHaveBeenCalledWith(mockCommand, expect.objectContaining({
+                cwd: mockResolvedPath,
+                env: expect.any(Object),
+            }));
+            expect(result).toEqual(expectedResult);
+        });
+        it('should propagate execAsync errors', async () => {
+            const error = new Error('Command failed');
+            mockExistsSync.mockReturnValue(true);
+            mockExecAsync.mockRejectedValue(error);
+            await expect(runCommandInDir(mockDirectory, mockCommand)).rejects.toThrow('Command failed');
+            expect(mockExecAsync).toHaveBeenCalledWith(mockCommand, expect.objectContaining({
+                cwd: mockResolvedPath,
+                env: expect.any(Object),
+            }));
+        });
+        it('should handle stderr in results', async () => {
+            const expectedResult = {
+                stdout: 'some output',
+                stderr: 'warning message',
+            };
+            mockExistsSync.mockReturnValue(true);
+            mockExecAsync.mockResolvedValue(expectedResult);
+            const result = await runCommandInDir(mockDirectory, mockCommand);
+            expect(result.stdout).toBe('some output');
+            expect(result.stderr).toBe('warning message');
+        });
+        it('should add --disable-usage-tracking flag to hs commands', async () => {
+            const hsCommand = 'hs project upload';
+            const expectedResult = {
+                stdout: 'success',
+                stderr: '',
+            };
+            mockExistsSync.mockReturnValue(true);
+            mockExecAsync.mockResolvedValue(expectedResult);
+            await runCommandInDir(mockDirectory, hsCommand);
+            expect(mockExecAsync).toHaveBeenCalledWith('hs project upload --disable-usage-tracking "true"', expect.objectContaining({
+                cwd: mockResolvedPath,
+                env: expect.any(Object),
+            }));
+        });
+        it('should not add --disable-usage-tracking flag to non-hs commands', async () => {
+            const nonHsCommand = 'npm install';
+            const expectedResult = {
+                stdout: 'success',
+                stderr: '',
+            };
+            mockExistsSync.mockReturnValue(true);
+            mockExecAsync.mockResolvedValue(expectedResult);
+            await runCommandInDir(mockDirectory, nonHsCommand);
+            expect(mockExecAsync).toHaveBeenCalledWith('npm install', expect.objectContaining({
+                cwd: mockResolvedPath,
+                env: expect.any(Object),
+            }));
+        });
+        it('should add --disable-usage-tracking flag to hs commands with existing flags', async () => {
+            const hsCommand = 'hs project upload --profile prod';
+            const expectedResult = {
+                stdout: 'success',
+                stderr: '',
+            };
+            mockExistsSync.mockReturnValue(true);
+            mockExecAsync.mockResolvedValue(expectedResult);
+            await runCommandInDir(mockDirectory, hsCommand);
+            expect(mockExecAsync).toHaveBeenCalledWith('hs project upload --profile prod --disable-usage-tracking "true"', expect.objectContaining({
+                cwd: mockResolvedPath,
+                env: expect.any(Object),
+            }));
+        });
+        it('should handle hs commands that start with whitespace', async () => {
+            const hsCommand = 'hs init';
+            const expectedResult = {
+                stdout: 'success',
+                stderr: '',
+            };
+            mockExistsSync.mockReturnValue(true);
+            mockExecAsync.mockResolvedValue(expectedResult);
+            await runCommandInDir(mockDirectory, hsCommand);
+            expect(mockExecAsync).toHaveBeenCalledWith('hs init --disable-usage-tracking "true"', expect.objectContaining({
+                cwd: mockResolvedPath,
+                env: expect.any(Object),
+            }));
+        });
+        it('should use npx -p @hubspot/cli when HUBSPOT_MCP_STANDALONE is true', async () => {
+            const originalEnv = process.env.HUBSPOT_MCP_STANDALONE;
+            process.env.HUBSPOT_MCP_STANDALONE = 'true';
+            const hsCommand = 'hs project upload';
+            const expectedResult = {
+                stdout: 'success',
+                stderr: '',
+            };
+            mockExistsSync.mockReturnValue(true);
+            mockExecAsync.mockResolvedValue(expectedResult);
+            await runCommandInDir(mockDirectory, hsCommand);
+            expect(mockExecAsync).toHaveBeenCalledWith('npx -y -p @hubspot/cli hs project upload --disable-usage-tracking "true"', expect.objectContaining({
+                cwd: mockResolvedPath,
+                env: expect.any(Object),
+            }));
+            // Restore original env
+            if (originalEnv === undefined) {
+                delete process.env.HUBSPOT_MCP_STANDALONE;
+            }
+            else {
+                process.env.HUBSPOT_MCP_STANDALONE = originalEnv;
+            }
+        });
+        it('should use regular hs command when HUBSPOT_MCP_STANDALONE is not set', async () => {
+            const originalEnv = process.env.HUBSPOT_MCP_STANDALONE;
+            delete process.env.HUBSPOT_MCP_STANDALONE;
+            const hsCommand = 'hs project upload';
+            const expectedResult = {
+                stdout: 'success',
+                stderr: '',
+            };
+            mockExistsSync.mockReturnValue(true);
+            mockExecAsync.mockResolvedValue(expectedResult);
+            await runCommandInDir(mockDirectory, hsCommand);
+            expect(mockExecAsync).toHaveBeenCalledWith('hs project upload --disable-usage-tracking "true"', expect.objectContaining({
+                cwd: mockResolvedPath,
+                env: expect.any(Object),
+            }));
+            // Restore original env
+            if (originalEnv !== undefined) {
+                process.env.HUBSPOT_MCP_STANDALONE = originalEnv;
+            }
+        });
+        it('should use npx -p @hubspot/cli for hs commands with flags in standalone mode', async () => {
+            const originalEnv = process.env.HUBSPOT_MCP_STANDALONE;
+            process.env.HUBSPOT_MCP_STANDALONE = 'true';
+            const hsCommand = 'hs project upload --profile prod';
+            const expectedResult = {
+                stdout: 'success',
+                stderr: '',
+            };
+            mockExistsSync.mockReturnValue(true);
+            mockExecAsync.mockResolvedValue(expectedResult);
+            await runCommandInDir(mockDirectory, hsCommand);
+            expect(mockExecAsync).toHaveBeenCalledWith('npx -y -p @hubspot/cli hs project upload --profile prod --disable-usage-tracking "true"', expect.objectContaining({
+                cwd: mockResolvedPath,
+                env: expect.any(Object),
+            }));
+            // Restore original env
+            if (originalEnv === undefined) {
+                delete process.env.HUBSPOT_MCP_STANDALONE;
+            }
+            else {
+                process.env.HUBSPOT_MCP_STANDALONE = originalEnv;
+            }
+        });
+        it('should use pinned CLI version when HUBSPOT_CLI_VERSION is set in standalone mode', async () => {
+            const originalStandaloneEnv = process.env.HUBSPOT_MCP_STANDALONE;
+            const originalVersionEnv = process.env.HUBSPOT_CLI_VERSION;
+            process.env.HUBSPOT_MCP_STANDALONE = 'true';
+            process.env.HUBSPOT_CLI_VERSION = '8.1.0';
+            const hsCommand = 'hs project upload';
+            const expectedResult = {
+                stdout: 'success',
+                stderr: '',
+            };
+            mockExistsSync.mockReturnValue(true);
+            mockExecAsync.mockResolvedValue(expectedResult);
+            await runCommandInDir(mockDirectory, hsCommand);
+            expect(mockExecAsync).toHaveBeenCalledWith('npx -y -p @hubspot/cli@8.1.0 hs project upload --disable-usage-tracking "true"', expect.objectContaining({
+                cwd: mockResolvedPath,
+                env: expect.any(Object),
+            }));
+            // Restore original env
+            if (originalStandaloneEnv === undefined) {
+                delete process.env.HUBSPOT_MCP_STANDALONE;
+            }
+            else {
+                process.env.HUBSPOT_MCP_STANDALONE = originalStandaloneEnv;
+            }
+            if (originalVersionEnv === undefined) {
+                delete process.env.HUBSPOT_CLI_VERSION;
+            }
+            else {
+                process.env.HUBSPOT_CLI_VERSION = originalVersionEnv;
+            }
+        });
+    });
 });

package/mcp-server/utils/command.d.ts

@@ -1,3 +1,8 @@
 import { exec } from 'node:child_process';
 export declare const execAsync: typeof exec.__promisify__;
 export declare function addFlag(command: string, flagName: string, value: string | number | boolean | string[]): string;
+export interface CommandResults {
+    stderr: string;
+    stdout: string;
+}
+export declare function runCommandInDir(directory: string, command: string): Promise<CommandResults>;

package/mcp-server/utils/command.js

@@ -1,3 +1,5 @@
+import path from 'path';
+import fs from 'fs';
 import util from 'util';
 import { exec } from 'node:child_process';
 export const execAsync = util.promisify(exec);
@@ -7,3 +9,25 @@ export function addFlag(command, flagName, value) {
     }
     return `${command} --${flagName} "${value}"`;
 }
+export async function runCommandInDir(directory, command) {
+    if (!fs.existsSync(directory)) {
+        fs.mkdirSync(directory);
+    }
+    let finalCommand = command;
+    if (command.startsWith('hs ')) {
+        // Check if running in standalone mode
+        if (process.env.HUBSPOT_MCP_STANDALONE === 'true') {
+            const cliPackage = process.env.HUBSPOT_CLI_VERSION
+                ? `@hubspot/cli@${process.env.HUBSPOT_CLI_VERSION}`
+                : '@hubspot/cli';
+            finalCommand = command.replace(/^hs /, `npx -y -p ${cliPackage} hs `);
+        }
+        finalCommand = addFlag(finalCommand, 'disable-usage-tracking', true);
+    }
+    return execAsync(finalCommand, {
+        cwd: path.resolve(directory),
+        env: {
+            ...process.env,
+        },
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hubspot/cli",
-    "version": "8.0.8-experimental.1",
+    "version": "8.0.8-experimental.2",
     "description": "The official CLI for developing on HubSpot",
     "license": "Apache-2.0",
     "repository": "https://github.com/HubSpot/hubspot-cli",
@@ -119,12 +119,6 @@
         "registry": "https://registry.npmjs.org/"
     },
     "resolutions": {
-        "eslint-visitor-keys": "4.2.0",
-        "react": "19.2.3",
-        "react-dom": "19.2.3"
-    },
-    "overrides": {
-        "react": "19.2.3",
-        "react-dom": "19.2.3"
+        "eslint-visitor-keys": "4.2.0"
     }
 }

package/ui/components/getStarted/GetStartedFlow.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { sanitizeFileName, untildify } from '@hubspot/local-dev-lib/path';
 import { useApp, useFocus, useInput } from 'ink';
+import open from 'open';
 import { useCallback, useEffect, useReducer } from 'react';
 import { commands } from '../../../lang/en.js';
-import { createProjectAction, trackGetStartedUsage, uploadAndDeployAction, } from '../../../lib/getStartedV2Actions.js';
+import { createProjectAction, pollAppInstallation, trackGetStartedUsage, uploadAndDeployAction, } from '../../../lib/getStartedV2Actions.js';
+import { validateProjectDirectory } from '../../../lib/prompts/projectNameAndDestPrompt.js';
 import { uiAccountDescription } from '../../../lib/ui/index.js';
 import { ACTION_STATUSES, GET_STARTED_FLOW_STEPS, } from '../../lib/constants.js';
 import { flowReducer } from './reducer.js';
+import { InstallationScreen } from './screens/InstallationScreen.js';
 import { ProjectSetupScreen } from './screens/ProjectSetupScreen.js';
 import { UploadScreen } from './screens/UploadScreen.js';
 import { getProject } from './selectors.js';
@@ -44,6 +47,7 @@ export function GetStartedFlow({ derivedAccountId, initialName, initialDest, })
         statuses: {
             create: initialName ? ACTION_STATUSES.RUNNING : ACTION_STATUSES.IDLE,
             upload: ACTION_STATUSES.IDLE,
+            installApp: ACTION_STATUSES.IDLE,
         },
     });
     const [state, dispatch] = useReducer(flowReducer, getInitialState());
@@ -68,6 +72,16 @@ export function GetStartedFlow({ derivedAccountId, initialName, initialDest, })
         dispatch({ type: 'SET_STEP', payload: GET_STARTED_FLOW_STEPS.DEST_INPUT });
     }, []);
     const handleDestSubmit = useCallback(async () => {
+        const validationResult = validateProjectDirectory(project.destination);
+        if (validationResult !== true) {
+            dispatch({
+                type: 'SET_DEST_ERROR',
+                payload: typeof validationResult === 'string'
+                    ? validationResult
+                    : commands.getStarted.v2.unknownError,
+            });
+            return;
+        }
         dispatch({ type: 'SET_STEP', payload: GET_STARTED_FLOW_STEPS.CREATING });
         try {
             await createProjectAction({
@@ -108,6 +122,57 @@ export function GetStartedFlow({ derivedAccountId, initialName, initialDest, })
             dispatch({ type: 'UPLOAD_ERROR', payload: errorMessage });
         }
     }, [derivedAccountId, project.destination]);
+    const handlePollInstallation = useCallback(async () => {
+        const uploadApp = project.uploadResult?.app;
+        const projectId = project.uploadResult?.projectId;
+        if (!projectId || !uploadApp?.uid) {
+            dispatch({
+                type: 'INSTALL_APP_ERROR',
+                payload: commands.getStarted.v2.unknownError,
+            });
+            return;
+        }
+        try {
+            await pollAppInstallation({
+                accountId: derivedAccountId,
+                projectId,
+                appUid: uploadApp.uid,
+                requiredScopes: uploadApp.config?.auth?.requiredScopes,
+                optionalScopes: uploadApp.config?.auth?.optionalScopes,
+                onTimeout: () => {
+                    dispatch({ type: 'SET_POLLING_TIMED_OUT', payload: true });
+                },
+            });
+            dispatch({ type: 'INSTALL_APP_DONE' });
+        }
+        catch (error) {
+            dispatch({
+                type: 'INSTALL_APP_ERROR',
+                payload: error instanceof Error
+                    ? error.message
+                    : commands.getStarted.v2.unknownError,
+            });
+        }
+    }, [project.uploadResult, derivedAccountId]);
+    const handleBrowserOpen = useCallback(async (shouldOpen) => {
+        await trackGetStartedUsage({
+            step: 'open-install-page',
+            type: shouldOpen ? 'opened' : 'declined',
+        }, derivedAccountId);
+        if (shouldOpen && project.uploadResult?.installUrl) {
+            try {
+                await open(project.uploadResult.installUrl, { url: true });
+            }
+            catch (error) {
+                dispatch({
+                    type: 'SET_BROWSER_FAILED_URL',
+                    payload: project.uploadResult.installUrl,
+                });
+            }
+        }
+        dispatch({ type: 'START_INSTALL_APP' });
+        await handlePollInstallation();
+    }, [project.uploadResult, derivedAccountId, handlePollInstallation]);
     const handleNameChange = useCallback((value) => {
         dispatch({ type: 'SET_PROJECT_NAME', payload: value });
     }, []);
@@ -116,7 +181,8 @@ export function GetStartedFlow({ derivedAccountId, initialName, initialDest, })
     }, []);
     useInput((_, key) => {
         const hasError = state.statuses.create === ACTION_STATUSES.ERROR ||
-            state.statuses.upload === ACTION_STATUSES.ERROR;
+            state.statuses.upload === ACTION_STATUSES.ERROR ||
+            state.statuses.installApp === ACTION_STATUSES.ERROR;
         if (hasError) {
             exit();
             return;
@@ -126,11 +192,22 @@ export function GetStartedFlow({ derivedAccountId, initialName, initialDest, })
         if (state.step === GET_STARTED_FLOW_STEPS.COMPLETE) {
             handleUploadStart();
         }
+        else if (state.step === GET_STARTED_FLOW_STEPS.OPEN_APP_PROMPT) {
+            handleBrowserOpen(true);
+        }
+        else if (state.step === GET_STARTED_FLOW_STEPS.INSTALLING_APP &&
+            state.statuses.installApp === ACTION_STATUSES.DONE) {
+            // Ready for card setup - will be handled in PR3
+            exit();
+        }
     });
     if (state.step === GET_STARTED_FLOW_STEPS.UPLOADING ||
         state.step === GET_STARTED_FLOW_STEPS.OPEN_APP_PROMPT) {
         return _jsx(UploadScreen, { state: state, accountName: accountName });
     }
+    if (state.step === GET_STARTED_FLOW_STEPS.INSTALLING_APP) {
+        return _jsx(InstallationScreen, { state: state, accountName: accountName });
+    }
     // Show project setup screen for initial flow
     return (_jsx(ProjectSetupScreen, { state: state, onSelectOption: handleSelect, onNameChange: handleNameChange, onNameSubmit: handleNameSubmit, onDestChange: handleDestChange, onDestSubmit: handleDestSubmit }));
 }

package/ui/components/getStarted/reducer.d.ts

@@ -14,6 +14,7 @@ export type AppState = {
 export type ActionStatuses = {
     create: ActionStatus;
     upload: ActionStatus;
+    installApp: ActionStatus;
 };
 export type FlowState = {
     step: FlowStep;
@@ -21,6 +22,9 @@ export type FlowState = {
     app: AppState;
     statuses: ActionStatuses;
     error?: string;
+    destError?: string;
+    browserFailedUrl?: string;
+    pollingTimedOut?: boolean;
 };
 type FlowAction = {
     type: 'SET_STEP';
@@ -37,6 +41,9 @@ type FlowAction = {
 } | {
     type: 'SET_ERROR';
     payload: string;
+} | {
+    type: 'SET_DEST_ERROR';
+    payload: string;
 } | {
     type: 'CLEAR_ERROR';
 } | {
@@ -54,6 +61,19 @@ type FlowAction = {
 } | {
     type: 'UPLOAD_ERROR';
     payload: string;
+} | {
+    type: 'START_INSTALL_APP';
+} | {
+    type: 'INSTALL_APP_DONE';
+} | {
+    type: 'INSTALL_APP_ERROR';
+    payload: string;
+} | {
+    type: 'SET_BROWSER_FAILED_URL';
+    payload: string;
+} | {
+    type: 'SET_POLLING_TIMED_OUT';
+    payload: boolean;
 };
 export declare function flowReducer(state: FlowState, action: FlowAction): FlowState;
 export {};

package/ui/components/getStarted/reducer.js

@@ -17,6 +17,13 @@ export function flowReducer(state, action) {
             return {
                 ...state,
                 project: { ...state.project, destination: action.payload },
+                destError: undefined,
+            };
+        case 'SET_DEST_ERROR':
+            return {
+                ...state,
+                step: GET_STARTED_FLOW_STEPS.DEST_INPUT,
+                destError: action.payload,
             };
         case 'SET_ERROR':
             return { ...state, error: action.payload };
@@ -66,6 +73,35 @@ export function flowReducer(state, action) {
                 statuses: { ...state.statuses, upload: ACTION_STATUSES.ERROR },
                 error: action.payload,
             };
+        case 'START_INSTALL_APP':
+            return {
+                ...state,
+                step: GET_STARTED_FLOW_STEPS.INSTALLING_APP,
+                statuses: { ...state.statuses, installApp: ACTION_STATUSES.RUNNING },
+                error: undefined,
+                pollingTimedOut: false,
+            };
+        case 'INSTALL_APP_DONE':
+            return {
+                ...state,
+                statuses: { ...state.statuses, installApp: ACTION_STATUSES.DONE },
+            };
+        case 'INSTALL_APP_ERROR':
+            return {
+                ...state,
+                statuses: { ...state.statuses, installApp: ACTION_STATUSES.ERROR },
+                error: action.payload,
+            };
+        case 'SET_BROWSER_FAILED_URL':
+            return {
+                ...state,
+                browserFailedUrl: action.payload,
+            };
+        case 'SET_POLLING_TIMED_OUT':
+            return {
+                ...state,
+                pollingTimedOut: action.payload,
+            };
         default:
             return state;
     }

package/ui/components/getStarted/screens/InstallationScreen.d.ts

@@ -0,0 +1,7 @@
+import { FlowState } from '../reducer.js';
+type InstallationScreenProps = {
+    state: FlowState;
+    accountName: string;
+};
+export declare function InstallationScreen({ state, accountName, }: InstallationScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/components/getStarted/screens/InstallationScreen.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { commands } from '../../../../lang/en.js';
+import { ActionSection } from '../../ActionSection.js';
+import { BoxWithTitle } from '../../BoxWithTitle.js';
+import { INK_COLORS } from '../../../styles.js';
+import { getProject } from '../selectors.js';
+import { ACTION_STATUSES, GET_STARTED_FLOW_STEPS, } from '../../../lib/constants.js';
+export function InstallationScreen({ state, accountName, }) {
+    const project = getProject(state);
+    const titleText = commands.getStarted.v2.startTitle;
+    // If we get to the installation screen, the app is uploaded and we have the name
+    const appName = project.uploadResult?.app?.config.name;
+    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 }), _jsx(Text, { children: commands.getStarted.v2.installInstructions }), _jsx(ActionSection, { status: state.statuses.installApp, statusText: commands.getStarted.v2.installingApp(appName, accountName) }), state.browserFailedUrl && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsx(Text, { color: INK_COLORS.WARNING_YELLOW, children: commands.getStarted.v2.browserFailedToOpen(state.browserFailedUrl) }) })), state.pollingTimedOut && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsx(Text, { color: INK_COLORS.WARNING_YELLOW, children: commands.getStarted.v2.pollingTimeout(2) }) })), state.step === GET_STARTED_FLOW_STEPS.INSTALLING_APP &&
+                    state.statuses.installApp === ACTION_STATUSES.DONE && (_jsx(Text, { children: commands.getStarted.v2.pressEnterToContinueSetup }))] }) }));
+}

package/ui/components/getStarted/screens/ProjectSetupScreen.js

@@ -35,5 +35,6 @@ export function ProjectSetupScreen({ state, onSelectOption, onNameChange, onName
     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 }), state.step === GET_STARTED_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: onSelectOption })] })) : (_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: state.app.selectedLabel })] })), _jsxs(ActionSection, { status: state.statuses.create, statusText: runningProjectCreateText, errorMessage: state.statuses.create === ACTION_STATUSES.ERROR
                         ? `${state.error}\n\n${commands.getStarted.v2.pressKeyToExit}`
                         : undefined, children: [state.step !== GET_STARTED_FLOW_STEPS.SELECT && (_jsx(InputField, { flag: "name", prompt: "Enter your project name", value: project.name, isEditing: state.step === GET_STARTED_FLOW_STEPS.NAME_INPUT, onChange: onNameChange, onSubmit: onNameSubmit })), state.step !== GET_STARTED_FLOW_STEPS.SELECT &&
-                            state.step !== GET_STARTED_FLOW_STEPS.NAME_INPUT && (_jsx(InputField, { flag: "dest", prompt: "Choose where to create the project", value: project.destination, isEditing: state.step === GET_STARTED_FLOW_STEPS.DEST_INPUT, onChange: onDestChange, onSubmit: onDestSubmit }))] }), state.step === GET_STARTED_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(state.app.selectedLabel) })] }))] }) }));
+                            state.step !== GET_STARTED_FLOW_STEPS.NAME_INPUT && (_jsxs(_Fragment, { children: [_jsx(InputField, { flag: "dest", prompt: "Choose where to create the project", value: project.destination, isEditing: state.step === GET_STARTED_FLOW_STEPS.DEST_INPUT, onChange: onDestChange, onSubmit: onDestSubmit }), state.destError &&
+                                    state.step === GET_STARTED_FLOW_STEPS.DEST_INPUT && (_jsx(Text, { color: INK_COLORS.ALERT_RED, children: state.destError }))] }))] }), state.step === GET_STARTED_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(state.app.selectedLabel) })] }))] }) }));
 }