@hubspot/cli 8.0.1-experimental.0 → 8.0.3-experimental.0

package/ui/components/getStarted/GetStartedFlow.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { sanitizeFileName, untildify } from '@hubspot/local-dev-lib/path';
+import { useApp, useFocus, useInput } from 'ink';
+import { useCallback, useEffect, useReducer } from 'react';
+import { commands } from '../../../lang/en.js';
+import { createProjectAction, trackGetStartedUsage, uploadAndDeployAction, } from '../../../lib/getStartedV2Actions.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 { ProjectSetupScreen } from './screens/ProjectSetupScreen.js';
+import { UploadScreen } from './screens/UploadScreen.js';
+import { getProject } from './selectors.js';
+export const DEFAULT_PROJECT_NAME = 'my-project';
+export function getGetStartedFlow(props) {
+    return _jsx(GetStartedFlow, { ...props });
+}
+function determineInitialStep(initialName, initialDest) {
+    if (initialName && initialDest) {
+        return GET_STARTED_FLOW_STEPS.CREATING;
+    }
+    else if (initialName) {
+        return GET_STARTED_FLOW_STEPS.DEST_INPUT;
+    }
+    else if (initialDest) {
+        return GET_STARTED_FLOW_STEPS.NAME_INPUT;
+    }
+    return GET_STARTED_FLOW_STEPS.SELECT;
+}
+export function GetStartedFlow({ derivedAccountId, initialName, initialDest, }) {
+    useFocus({ autoFocus: true });
+    const { exit } = useApp();
+    const accountName = uiAccountDescription(derivedAccountId);
+    const getInitialState = () => ({
+        step: determineInitialStep(initialName, initialDest),
+        project: {
+            name: initialName || DEFAULT_PROJECT_NAME,
+            destination: initialDest
+                ? untildify(initialDest)
+                : sanitizeFileName(DEFAULT_PROJECT_NAME),
+        },
+        app: {
+            selectedLabel: initialName ? commands.getStarted.prompts.options.app : '',
+        },
+        statuses: {
+            create: initialName ? ACTION_STATUSES.RUNNING : ACTION_STATUSES.IDLE,
+            upload: ACTION_STATUSES.IDLE,
+        },
+    });
+    const [state, dispatch] = useReducer(flowReducer, getInitialState());
+    const project = getProject(state);
+    // Only auto-update dest from name if dest wasn't provided via CLI
+    useEffect(() => {
+        if (!initialDest) {
+            dispatch({
+                type: 'SET_PROJECT_DEST',
+                payload: sanitizeFileName(project.name),
+            });
+        }
+    }, [project.name, initialDest]);
+    const handleSelect = useCallback(async (item) => {
+        if (item.disabled)
+            return;
+        await trackGetStartedUsage({ step: 'select-option', type: item.value }, derivedAccountId);
+        dispatch({ type: 'SET_SELECTED_LABEL', payload: item.label });
+        dispatch({ type: 'START_PROJECT_CREATION' });
+    }, [derivedAccountId]);
+    const handleNameSubmit = useCallback(() => {
+        dispatch({ type: 'SET_STEP', payload: GET_STARTED_FLOW_STEPS.DEST_INPUT });
+    }, []);
+    const handleDestSubmit = useCallback(async () => {
+        dispatch({ type: 'SET_STEP', payload: GET_STARTED_FLOW_STEPS.CREATING });
+        try {
+            await createProjectAction({
+                projectName: project.name,
+                projectDest: project.destination,
+            });
+            await trackGetStartedUsage({ successful: true, step: 'github-clone' }, derivedAccountId);
+            await trackGetStartedUsage({ successful: true, step: 'project-creation' }, derivedAccountId);
+            dispatch({ type: 'PROJECT_CREATION_SUCCESS' });
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error
+                ? error.message
+                : commands.getStarted.v2.unknownError;
+            await trackGetStartedUsage({ successful: false, step: 'project-creation' }, derivedAccountId);
+            dispatch({ type: 'PROJECT_CREATION_ERROR', payload: errorMessage });
+        }
+    }, [derivedAccountId, project.name, project.destination]);
+    const handleUploadStart = useCallback(async () => {
+        await trackGetStartedUsage({ step: 'upload-decision', type: 'upload' }, derivedAccountId);
+        dispatch({ type: 'START_UPLOAD' });
+        try {
+            const result = await uploadAndDeployAction({
+                accountId: derivedAccountId,
+                projectDest: project.destination,
+            });
+            await trackGetStartedUsage({ successful: true, step: 'upload' }, derivedAccountId);
+            dispatch({
+                type: 'UPLOAD_SUCCESS',
+                payload: result,
+            });
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error
+                ? error.message
+                : commands.getStarted.v2.unknownError;
+            await trackGetStartedUsage({ successful: false, step: 'upload' }, derivedAccountId);
+            dispatch({ type: 'UPLOAD_ERROR', payload: errorMessage });
+        }
+    }, [derivedAccountId, project.destination]);
+    const handleNameChange = useCallback((value) => {
+        dispatch({ type: 'SET_PROJECT_NAME', payload: value });
+    }, []);
+    const handleDestChange = useCallback((value) => {
+        dispatch({ type: 'SET_PROJECT_DEST', payload: value });
+    }, []);
+    useInput((_, key) => {
+        const hasError = state.statuses.create === ACTION_STATUSES.ERROR ||
+            state.statuses.upload === ACTION_STATUSES.ERROR;
+        if (hasError) {
+            exit();
+            return;
+        }
+        if (!key.return)
+            return;
+        if (state.step === GET_STARTED_FLOW_STEPS.COMPLETE) {
+            handleUploadStart();
+        }
+    });
+    if (state.step === GET_STARTED_FLOW_STEPS.UPLOADING ||
+        state.step === GET_STARTED_FLOW_STEPS.OPEN_APP_PROMPT) {
+        return _jsx(UploadScreen, { 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

@@ -0,0 +1,59 @@
+import { ValueOf } from '@hubspot/local-dev-lib/types/Utils';
+import { type UploadAndDeployResult } from '../../../lib/getStartedV2Actions.js';
+import { ACTION_STATUSES, GET_STARTED_FLOW_STEPS } from '../../lib/constants.js';
+export type FlowStep = ValueOf<typeof GET_STARTED_FLOW_STEPS>;
+export type ActionStatus = ValueOf<typeof ACTION_STATUSES>;
+export type ProjectState = {
+    name: string;
+    destination: string;
+    uploadResult?: UploadAndDeployResult;
+};
+export type AppState = {
+    selectedLabel: string;
+};
+export type ActionStatuses = {
+    create: ActionStatus;
+    upload: ActionStatus;
+};
+export type FlowState = {
+    step: FlowStep;
+    project: ProjectState;
+    app: AppState;
+    statuses: ActionStatuses;
+    error?: string;
+};
+type FlowAction = {
+    type: 'SET_STEP';
+    payload: FlowStep;
+} | {
+    type: 'SET_SELECTED_LABEL';
+    payload: string;
+} | {
+    type: 'SET_PROJECT_NAME';
+    payload: string;
+} | {
+    type: 'SET_PROJECT_DEST';
+    payload: string;
+} | {
+    type: 'SET_ERROR';
+    payload: string;
+} | {
+    type: 'CLEAR_ERROR';
+} | {
+    type: 'START_PROJECT_CREATION';
+} | {
+    type: 'PROJECT_CREATION_SUCCESS';
+} | {
+    type: 'PROJECT_CREATION_ERROR';
+    payload: string;
+} | {
+    type: 'START_UPLOAD';
+} | {
+    type: 'UPLOAD_SUCCESS';
+    payload: UploadAndDeployResult;
+} | {
+    type: 'UPLOAD_ERROR';
+    payload: string;
+};
+export declare function flowReducer(state: FlowState, action: FlowAction): FlowState;
+export {};

package/ui/components/getStarted/reducer.js

@@ -0,0 +1,72 @@
+import { ACTION_STATUSES, GET_STARTED_FLOW_STEPS, } from '../../lib/constants.js';
+export function flowReducer(state, action) {
+    switch (action.type) {
+        case 'SET_STEP':
+            return { ...state, step: action.payload };
+        case 'SET_SELECTED_LABEL':
+            return {
+                ...state,
+                app: { ...state.app, selectedLabel: action.payload },
+            };
+        case 'SET_PROJECT_NAME':
+            return {
+                ...state,
+                project: { ...state.project, name: action.payload },
+            };
+        case 'SET_PROJECT_DEST':
+            return {
+                ...state,
+                project: { ...state.project, destination: action.payload },
+            };
+        case 'SET_ERROR':
+            return { ...state, error: action.payload };
+        case 'CLEAR_ERROR':
+            return { ...state, error: undefined };
+        case 'START_PROJECT_CREATION':
+            return {
+                ...state,
+                step: GET_STARTED_FLOW_STEPS.NAME_INPUT,
+                statuses: { ...state.statuses, create: ACTION_STATUSES.RUNNING },
+                error: undefined,
+            };
+        case 'PROJECT_CREATION_SUCCESS':
+            return {
+                ...state,
+                step: GET_STARTED_FLOW_STEPS.COMPLETE,
+                statuses: { ...state.statuses, create: ACTION_STATUSES.DONE },
+                error: undefined,
+            };
+        case 'PROJECT_CREATION_ERROR':
+            return {
+                ...state,
+                statuses: { ...state.statuses, create: ACTION_STATUSES.ERROR },
+                error: action.payload,
+            };
+        case 'START_UPLOAD':
+            return {
+                ...state,
+                step: GET_STARTED_FLOW_STEPS.UPLOADING,
+                statuses: { ...state.statuses, upload: ACTION_STATUSES.RUNNING },
+                error: undefined,
+            };
+        case 'UPLOAD_SUCCESS':
+            return {
+                ...state,
+                step: GET_STARTED_FLOW_STEPS.OPEN_APP_PROMPT,
+                statuses: { ...state.statuses, upload: ACTION_STATUSES.DONE },
+                project: {
+                    ...state.project,
+                    uploadResult: action.payload,
+                },
+                error: undefined,
+            };
+        case 'UPLOAD_ERROR':
+            return {
+                ...state,
+                statuses: { ...state.statuses, upload: ACTION_STATUSES.ERROR },
+                error: action.payload,
+            };
+        default:
+            return state;
+    }
+}

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

@@ -0,0 +1,16 @@
+import { SelectInputItem } from '../../SelectInput.js';
+import { FlowState } from '../reducer.js';
+export declare const GET_STARTED_FLOW_OPTIONS: SelectInputItem[];
+type ProjectSetupScreenProps = {
+    state: FlowState;
+    onSelectOption: (item: {
+        label: string;
+        value: string;
+    }) => void;
+    onNameChange: (value: string) => void;
+    onNameSubmit: () => void;
+    onDestChange: (value: string) => void;
+    onDestSubmit: () => void;
+};
+export declare function ProjectSetupScreen({ state, onSelectOption, onNameChange, onNameSubmit, onDestChange, onDestSubmit, }: ProjectSetupScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { commands } from '../../../../lang/en.js';
+import { GET_STARTED_OPTIONS } from '../../../../lib/constants.js';
+import { ActionSection } from '../../ActionSection.js';
+import { BoxWithTitle } from '../../BoxWithTitle.js';
+import { InputField } from '../../InputField.js';
+import { SelectInput } from '../../SelectInput.js';
+import { INK_COLORS } from '../../../styles.js';
+import { getProject } from '../selectors.js';
+import { ACTION_STATUSES, GET_STARTED_FLOW_STEPS, } from '../../../lib/constants.js';
+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 function ProjectSetupScreen({ state, onSelectOption, onNameChange, onNameSubmit, onDestChange, onDestSubmit, }) {
+    const project = getProject(state);
+    const titleText = commands.getStarted.v2.startTitle;
+    const overviewText = commands.getStarted.v2.guideOverview(state.app.selectedLabel);
+    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 }), 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) })] }))] }) }));
+}

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

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

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import path from 'path';
+import { Box, Text } from 'ink';
+import { APP_KEY as AppKey } from '@hubspot/project-parsing-lib/constants';
+import { commands } from '../../../../lang/en.js';
+import { buildProjectTree, } from '../../../../lib/projects/components.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 } from '../../../lib/constants.js';
+function renderProjectTree(projectName, app, projectMetadata) {
+    const componentsByType = new Map();
+    const uids = [];
+    // Get app UID
+    uids.push(app.uid || app.config?.name || 'unknown');
+    // Build componentsByType from projectMetadata
+    Object.entries(projectMetadata.components).forEach(([componentType, metadata]) => {
+        if (componentType === AppKey || !metadata?.hsMetaFiles)
+            return;
+        const components = metadata.hsMetaFiles.map((filePath) => ({
+            filename: path.basename(filePath),
+            isNew: false,
+        }));
+        if (components.length > 0) {
+            componentsByType.set(componentType, components);
+        }
+    });
+    const tree = buildProjectTree(projectName, uids, componentsByType, false);
+    return (_jsx(Box, { flexDirection: "column", children: tree.split('\n').map((line, i) => (_jsx(Text, { children: line }, i))) }));
+}
+export function UploadScreen({ state, accountName }) {
+    const project = getProject(state);
+    const titleText = commands.getStarted.v2.startTitle;
+    const uploadingProjectText = commands.getStarted.v2.uploadingProject;
+    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(ActionSection, { status: state.statuses.upload, statusText: uploadingProjectText, errorMessage: state.statuses.upload === ACTION_STATUSES.ERROR
+                        ? `${state.error}\n\n${commands.getStarted.v2.pressKeyToExit}`
+                        : undefined }), state.statuses.upload === ACTION_STATUSES.DONE &&
+                    project.uploadResult?.projectName && (_jsxs(_Fragment, { children: [_jsx(Text, { children: commands.getStarted.v2.appDeployedReady }), project.uploadResult.app &&
+                            project.uploadResult.projectMetadata && (_jsxs(Box, { flexDirection: "column", rowGap: 1, children: [renderProjectTree(project.uploadResult.projectName, project.uploadResult.app, project.uploadResult.projectMetadata), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: commands.getStarted.v2.appConfigDetails }), _jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [_jsxs(Box, { flexDirection: "row", columnGap: 1, children: [_jsx(Text, { bold: true, children: commands.getStarted.v2.distribution }), _jsx(Text, { children: "\u2192" }), _jsx(Text, { children: project.uploadResult.app.config?.distribution ||
+                                                                'private' })] }), _jsxs(Box, { flexDirection: "row", columnGap: 1, children: [_jsx(Text, { bold: true, children: commands.getStarted.v2.authType }), _jsx(Text, { children: "\u2192" }), _jsx(Text, { children: project.uploadResult.app.config?.auth?.type ||
+                                                                'static' })] })] })] })] })), project.uploadResult.projectDir && (_jsx(Text, { children: commands.getStarted.v2.checkOutConfig(`${project.uploadResult.projectDir}/src/app/app-hsmeta.json`) })), _jsx(Text, { children: commands.getStarted.v2.pressEnterToInstall(accountName) })] }))] }) }));
+}

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

@@ -0,0 +1,2 @@
+import { FlowState, ProjectState } from './reducer.js';
+export declare const getProject: (state: FlowState) => ProjectState;

package/ui/components/getStarted/selectors.js

@@ -0,0 +1 @@
+export const getProject = (state) => state.project;

package/ui/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ACTION_STATUSES: {
+    readonly IDLE: "idle";
+    readonly RUNNING: "running";
+    readonly DONE: "done";
+    readonly ERROR: "error";
+};

package/ui/constants.js

@@ -0,0 +1,6 @@
+export const ACTION_STATUSES = {
+    IDLE: 'idle',
+    RUNNING: 'running',
+    DONE: 'done',
+    ERROR: 'error',
+};

package/ui/lib/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const ACTION_STATUSES: {
+    readonly IDLE: "idle";
+    readonly RUNNING: "running";
+    readonly DONE: "done";
+    readonly ERROR: "error";
+};
+export declare const GET_STARTED_FLOW_STEPS: {
+    readonly SELECT: "select";
+    readonly NAME_INPUT: "name-input";
+    readonly DEST_INPUT: "dest-input";
+    readonly CREATING: "creating";
+    readonly INSTALLING: "installing";
+    readonly UPLOADING: "uploading";
+    readonly OPEN_APP_PROMPT: "open-app-prompt";
+    readonly COMPLETE: "complete";
+};

package/ui/lib/constants.js

@@ -0,0 +1,16 @@
+export const ACTION_STATUSES = {
+    IDLE: 'idle',
+    RUNNING: 'running',
+    DONE: 'done',
+    ERROR: 'error',
+};
+export const GET_STARTED_FLOW_STEPS = {
+    SELECT: 'select',
+    NAME_INPUT: 'name-input',
+    DEST_INPUT: 'dest-input',
+    CREATING: 'creating',
+    INSTALLING: 'installing',
+    UPLOADING: 'uploading',
+    OPEN_APP_PROMPT: 'open-app-prompt',
+    COMPLETE: 'complete',
+};

package/ui/playground/fixtures.js

@@ -1,8 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getSuccessBox, getInfoBox, getWarningBox, getAlertBox, } from '../components/StatusMessageBoxes.js';
 import { getBoxWithTitle } from '../components/BoxWithTitle.js';
 import { getTable } from '../components/Table.js';
+import { getActionSection } from '../components/ActionSection.js';
+import { getInputField } from '../components/InputField.js';
+import { getSelectInput } from '../components/SelectInput.js';
+import { getStatusIcon } from '../components/StatusIcon.js';
 import { SuccessBox, InfoBox, WarningBox, AlertBox, } from '../components/StatusMessageBoxes.js';
 import { BoxWithTitle } from '../components/BoxWithTitle.js';
+import { ActionSection } from '../components/ActionSection.js';
+import { InputField } from '../components/InputField.js';
+import { SelectInput } from '../components/SelectInput.js';
+import { StatusIcon } from '../components/StatusIcon.js';
+import { ACTION_STATUSES } from '../constants.js';
+import { Text } from 'ink';
 /**
  * These components will be used by the playground. Please add any new components here.
  */
@@ -73,6 +84,42 @@ export const populatedComponents = {
         }),
         signature: '',
     },
+    ActionSection: {
+        component: getActionSection({
+            status: ACTION_STATUSES.DONE,
+            statusText: 'Action completed successfully',
+            children: _jsx(Text, { children: "This is an action section" }),
+        }),
+        signature: ActionSection.toString(),
+    },
+    InputField: {
+        component: getInputField({
+            flag: 'name',
+            prompt: 'Enter your name',
+            value: 'example',
+            isEditing: false,
+            onChange: () => { },
+            onSubmit: () => { },
+        }),
+        signature: InputField.toString(),
+    },
+    SelectInput: {
+        component: getSelectInput({
+            items: [
+                { label: 'Option 1', value: 'option1' },
+                { label: 'Option 2', value: 'option2' },
+                { label: 'Option 3', value: 'option3' },
+            ],
+            onSelect: () => { },
+        }),
+        signature: SelectInput.toString(),
+    },
+    StatusIcon: {
+        component: getStatusIcon({
+            status: ACTION_STATUSES.DONE,
+        }),
+        signature: StatusIcon.toString(),
+    },
 };
 export function getComponentOptions() {
     return Object.keys(populatedComponents);

package/ui/render.d.ts

@@ -1,4 +1,5 @@
 import { Scalar } from './components/Table.js';
+import { ReactNode } from 'react';
 /**
  * Renders an Ink component to stdout and immediately unmounts.
  * Uses a proxy to report large viewport dimensions, preventing Ink from clipping output.
@@ -17,3 +18,6 @@ export declare function renderTable(tableHeaders: string[], tableData: Scalar[][
  * @param items - 2D array where each inner array is a row (typically single-item arrays for a simple list).
  */
 export declare function renderList(items: string[][]): Promise<void>;
+export declare function renderInteractive(component: ReactNode, options?: {
+    fullScreen?: boolean;
+}): Promise<void>;

package/ui/render.js

@@ -1,6 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from 'ink';
 import { getTable } from './components/Table.js';
 import { mapTableDataToObjects } from './lib/table.js';
+import { FullScreen } from './components/FullScreen.js';
+import SpinniesManager from '../lib/ui/SpinniesManager.js';
 // Ink 6 clips output when it exceeds stdout.rows — we can use a large row count to prevent this.
 // This value is arbitrary but large enough to prevent clipping for any realistic static output.
 const INK_VIEWPORT_ROWS_FOR_STATIC_OUTPUT = 1000;
@@ -42,3 +45,31 @@ export async function renderTable(tableHeaders, tableData, borderless) {
 export async function renderList(items) {
     await renderTable([''], items, true);
 }
+export async function renderInteractive(component, options = {
+    fullScreen: false,
+}) {
+    // Disable SpinniesManager output during Ink rendering to prevent spinner text
+    // from interfering with Ink's terminal control (especially when using fullScreen
+    // mode's alternative buffer). Re-enable after rendering completes.
+    SpinniesManager.setDisableOutput(true);
+    if (options.fullScreen) {
+        // Enter alternative buffer
+        process.stdout.write('\x1b[?1049h');
+        let instance;
+        try {
+            instance = render(_jsx(FullScreen, { children: component }), {
+                patchConsole: true,
+            });
+            await instance.waitUntilExit();
+        }
+        finally {
+            // Exit alternative buffer
+            process.stdout.write('\x1b[?1049l');
+        }
+    }
+    else {
+        const instance = render(component);
+        await instance.waitUntilExit();
+    }
+    SpinniesManager.setDisableOutput(false);
+}

package/ui/styles.d.ts

@@ -14,5 +14,8 @@ export declare const INK_COLORS: {
     SUCCESS_GREEN: string;
     INFO_BLUE: string;
     WARNING_YELLOW: string;
+    HUBSPOT_ORANGE: string;
+    HUBSPOT_TEAL: string;
     WHITE: string;
+    GRAY: string;
 };

package/ui/styles.js

@@ -14,5 +14,8 @@ export const INK_COLORS = {
     SUCCESS_GREEN: '#4deb7a',
     INFO_BLUE: '#4dcbeb',
     WARNING_YELLOW: '#EEB117',
+    HUBSPOT_ORANGE: '#FF7A59',
+    HUBSPOT_TEAL: '#00BDA5',
     WHITE: 'white',
+    GRAY: '#99ACC2',
 };