@hubspot/cli 7.6.0-beta.11 → 7.6.0-beta.12

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

@@ -10,11 +10,11 @@ const inputSchema = {
     absoluteCurrentWorkingDirectory,
     name: z
         .string()
-        .describe('The name of the project to be created.  This name is how your project will appear in HubSpot. If not specified by the user, do not choose for them.  Changing this is potentially destructive.')
+        .describe('If not specified by the user, DO NOT choose for them.  Changing this is potentially destructive.The name of the project to be created.  This name is how your project will appear in HubSpot. ')
         .optional(),
     destination: z
         .string()
-        .describe('Relative path to the directory the project will be created in. DO NOT use the current directory unless the user has explicitly stated to do so.'),
+        .describe('DO NOT use the current directory unless the user has explicitly stated to do so. Relative path to the directory the project will be created in.'),
     projectBase: z
         .union([z.literal(EMPTY_PROJECT), z.literal(PROJECT_WITH_APP)])
         .describe('Empty will create an empty project, and app will create a project with an app inside of it.'),
@@ -23,19 +23,19 @@ const inputSchema = {
         z.literal(APP_DISTRIBUTION_TYPES.MARKETPLACE),
         z.literal(APP_DISTRIBUTION_TYPES.PRIVATE),
     ]))
-        .describe('Private is used if you do not wish to distribute your application on the HubSpot marketplace. If not specified by the user, do not choose for them.  This cannot be changed after a project is uploaded.'),
+        .describe('If not specified by the user, DO NOT choose for them.  This cannot be changed after a project is uploaded. Private is used if you do not wish to distribute your application on the HubSpot marketplace. '),
     auth: z
         .optional(z.union([
         z.literal(APP_AUTH_TYPES.STATIC),
         z.literal(APP_AUTH_TYPES.OAUTH),
     ]))
-        .describe('Static uses a static non changing authentication token, and is only available for private distribution. If not specified by the user, do not choose for them.  This cannot be changed after a project is uploaded.')
+        .describe('If not specified by the user, DO NOT choose for them.  This cannot be changed after a project is uploaded. Static uses a static non changing authentication token, and is only available for private distribution. ')
         .optional(),
     features,
 };
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const inputSchemaZodObject = z.object({ ...inputSchema });
-const toolName = 'create-hubspot-project';
+const toolName = 'create-project';
 export class CreateProjectTool extends Tool {
     constructor(mcpServer) {
         super(mcpServer);

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

@@ -15,7 +15,7 @@ const inputSchema = {
 const inputSchemaZodObject = z.object({
     ...inputSchema,
 });
-const toolName = 'deploy-hubspot-project';
+const toolName = 'deploy-project';
 export class DeployProjectTool extends Tool {
     constructor(mcpServer) {
         super(mcpServer);

package/mcp-server/tools/project/DocFetchTool.js

@@ -12,7 +12,7 @@ const inputSchema = {
 const inputSchemaZodObject = z.object({
     ...inputSchema,
 });
-const toolName = 'fetch-hubspot-doc';
+const toolName = 'fetch-doc';
 export class DocFetchTool extends Tool {
     constructor(mcpServer) {
         super(mcpServer);
@@ -42,7 +42,7 @@ export class DocFetchTool extends Tool {
     register() {
         return this.mcpServer.registerTool(toolName, {
             title: 'Fetch HubSpot Developer Documentation (single file)',
-            description: 'Always use this immediately after `search-hubspot-docs` and before creating a plan, writing code, or answering technical questions. This tool retrieves the full, authoritative content of a HubSpot Developer Documentation page from its URL, ensuring responses are accurate, up-to-date, and grounded in the official docs.',
+            description: 'Always use this immediately after `search-docs` and before creating a plan, writing code, or answering technical questions. This tool retrieves the full, authoritative content of a HubSpot Developer Documentation page from its URL, ensuring responses are accurate, up-to-date, and grounded in the official docs.',
             inputSchema,
         }, this.handler);
     }

package/mcp-server/tools/project/DocsSearchTool.js

@@ -13,7 +13,7 @@ const inputSchema = {
 const inputSchemaZodObject = z.object({
     ...inputSchema,
 });
-const toolName = 'search-hubspot-docs';
+const toolName = 'search-docs';
 export class DocsSearchTool extends Tool {
     constructor(mcpServer) {
         super(mcpServer);
@@ -55,7 +55,7 @@ export class DocsSearchTool extends Tool {
     register() {
         return this.mcpServer.registerTool(toolName, {
             title: 'Search HubSpot Developer Documentation',
-            description: 'Use this first whenever you need details about HubSpot APIs, SDKs, integrations, or developer platform features. This searches the official HubSpot Developer Documentation and returns the most relevant pages, each with a URL for use in `fetch-hubspot-doc`. Always follow this with a fetch to get the full, authoritative content before making plans or writing answers.',
+            description: 'Use this first whenever you need details about HubSpot APIs, SDKs, integrations, or developer platform features. This searches the official HubSpot Developer Documentation and returns the most relevant pages, each with a URL for use in `fetch-doc`. Always follow this with a fetch to get the full, authoritative content before making plans or writing answers.',
             inputSchema,
         }, this.handler);
     }

package/mcp-server/tools/project/GetConfigValuesTool.js

@@ -3,7 +3,7 @@ import { z } from 'zod';
 import { formatTextContents } from '../../utils/content.js';
 import { getIntermediateRepresentationSchema, mapToInternalType, } from '@hubspot/project-parsing-lib';
 import { getAccountId, getConfigPath, loadConfig, } from '@hubspot/local-dev-lib/config';
-import { useV3Api } from '../../../lib/projects/buildAndDeploy.js';
+import { useV3Api } from '../../../lib/projects/platformVersion.js';
 const inputSchema = {
     platformVersion: z
         .string()
@@ -16,7 +16,7 @@ const inputSchema = {
 const inputSchemaZodObject = z.object({
     ...inputSchema,
 });
-const toolName = 'get-hubspot-feature-config-schema';
+const toolName = 'get-feature-config-schema';
 export class GetConfigValuesTool extends Tool {
     constructor(mcpServer) {
         super(mcpServer);
@@ -43,8 +43,8 @@ export class GetConfigValuesTool extends Tool {
     register() {
         return this.mcpServer.registerTool(toolName, {
             title: 'Fetch the JSON Schema for component',
-            description: `Fetches and returns the JSON schema for the provided feature 'type' found in -hsmeta.json file. 
-        This should be called before editing a '-hsmeta.json' file to get the list of possible values and restrictions on those values.    
+            description: `Fetches and returns the JSON schema for the provided feature 'type' found in -hsmeta.json file.
+        This should be called before editing a '-hsmeta.json' file to get the list of possible values and restrictions on those values.
         This will only work for projects with platformVersion 2025.2 and beyond`,
             inputSchema,
         }, this.handler);

package/mcp-server/tools/project/GuidedWalkthroughTool.js

@@ -24,7 +24,7 @@ const inputSchema = {
 const inputSchemaZodObject = z.object({
     ...inputSchema,
 });
-const toolName = 'guided-walkthrough-hubspot-cli';
+const toolName = 'guided-walkthrough-cli';
 export class GuidedWalkthroughTool extends Tool {
     constructor(mcpServer) {
         super(mcpServer);

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

@@ -11,7 +11,7 @@ const inputSchema = {
 const inputSchemaZodObject = z.object({
     ...inputSchema,
 });
-const toolName = 'upload-hubspot-project';
+const toolName = 'upload-project';
 export class UploadProjectTools extends Tool {
     constructor(mcpServer) {
         super(mcpServer);
@@ -24,7 +24,7 @@ export class UploadProjectTools extends Tool {
     register() {
         return this.mcpServer.registerTool(toolName, {
             title: 'Upload HubSpot Project',
-            description: 'Uploads the HubSpot project in current working directory.  If the project does not exist, it will be created. MUST be ran from within the project directory. DO NOT run this tool unless the user specifies they would like to upload the project, it is potentially destructive',
+            description: 'DO NOT run this tool unless the user specifies they would like to upload the project, it is potentially destructive. Uploads the HubSpot project in current working directory.  If the project does not exist, it will be created. MUST be ran from within the project directory.',
             inputSchema,
         }, this.handler);
     }

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

@@ -9,7 +9,7 @@ const inputSchema = {
 };
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const inputSchemaZodObject = z.object({ ...inputSchema });
-const toolName = 'validate-hubspot-project';
+const toolName = 'validate-project';
 export class ValidateProjectTool extends Tool {
     constructor(mcpServer) {
         super(mcpServer);

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

@@ -28,7 +28,7 @@ describe('mcp-server/tools/project/AddFeatureToProject', () => {
     describe('register', () => {
         it('should register tool with correct parameters', () => {
             const result = tool.register();
-            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('add-feature-to-hubspot-project', expect.objectContaining({
+            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('add-feature-to-project', expect.objectContaining({
                 title: 'Add feature to HubSpot Project',
                 description: expect.stringContaining('Adds a feature to an existing HubSpot project'),
                 inputSchema: expect.any(Object),

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

@@ -29,7 +29,7 @@ describe('mcp-server/tools/project/CreateProjectTool', () => {
     describe('register', () => {
         it('should register tool with correct parameters', () => {
             const result = tool.register();
-            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('create-hubspot-project', {
+            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('create-project', {
                 title: 'Create HubSpot Project',
                 description: 'Creates a HubSpot project with the provided name and outputs it in the provided destination',
                 inputSchema: expect.any(Object),

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

@@ -26,7 +26,7 @@ describe('mcp-server/tools/project/DeployProject', () => {
     describe('register', () => {
         it('should register tool with correct parameters', () => {
             const result = tool.register();
-            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('deploy-hubspot-project', {
+            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('deploy-project', {
                 title: 'Deploy a build of HubSpot Project',
                 description: expect.stringContaining('Takes a build number and a project name and deploys that build of the project'),
                 inputSchema: expect.any(Object),

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

@@ -24,9 +24,9 @@ describe('mcp-server/tools/project/DocFetchTool', () => {
     describe('register', () => {
         it('should register tool with correct parameters', () => {
             const result = tool.register();
-            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('fetch-hubspot-doc', {
+            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('fetch-doc', {
                 title: 'Fetch HubSpot Developer Documentation (single file)',
-                description: 'Always use this immediately after `search-hubspot-docs` and before creating a plan, writing code, or answering technical questions. This tool retrieves the full, authoritative content of a HubSpot Developer Documentation page from its URL, ensuring responses are accurate, up-to-date, and grounded in the official docs.',
+                description: 'Always use this immediately after `search-docs` and before creating a plan, writing code, or answering technical questions. This tool retrieves the full, authoritative content of a HubSpot Developer Documentation page from its URL, ensuring responses are accurate, up-to-date, and grounded in the official docs.',
                 inputSchema: expect.any(Object),
             }, tool.handler);
             expect(result).toBe(mockRegisteredTool);

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

@@ -27,9 +27,9 @@ describe('mcp-server/tools/project/DocsSearchTool', () => {
     describe('register', () => {
         it('should register tool with correct parameters', () => {
             const result = tool.register();
-            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('search-hubspot-docs', {
+            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('search-docs', {
                 title: 'Search HubSpot Developer Documentation',
-                description: 'Use this first whenever you need details about HubSpot APIs, SDKs, integrations, or developer platform features. This searches the official HubSpot Developer Documentation and returns the most relevant pages, each with a URL for use in `fetch-hubspot-doc`. Always follow this with a fetch to get the full, authoritative content before making plans or writing answers.',
+                description: 'Use this first whenever you need details about HubSpot APIs, SDKs, integrations, or developer platform features. This searches the official HubSpot Developer Documentation and returns the most relevant pages, each with a URL for use in `fetch-doc`. Always follow this with a fetch to get the full, authoritative content before making plans or writing answers.',
                 inputSchema: expect.any(Object),
             }, tool.handler);
             expect(result).toBe(mockRegisteredTool);

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

@@ -25,7 +25,7 @@ describe('mcp-server/tools/project/GetConfigValuesTool', () => {
     describe('register', () => {
         it('should register tool with correct parameters', () => {
             const result = tool.register();
-            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('get-hubspot-feature-config-schema', {
+            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('get-feature-config-schema', {
                 title: 'Fetch the JSON Schema for component',
                 description: expect.stringContaining('Fetches and returns the JSON schema for the provided feature'),
                 inputSchema: expect.objectContaining({

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

@@ -21,7 +21,7 @@ describe('mcp-server/tools/project/GuidedWalkthroughTool', () => {
     describe('register', () => {
         it('should register tool with correct parameters', () => {
             const result = tool.register();
-            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('guided-walkthrough-hubspot-cli', {
+            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('guided-walkthrough-cli', {
                 title: 'Guided walkthrough of the CLI',
                 description: 'Give the user a guided walkthrough of the HubSpot CLI.',
                 inputSchema: expect.any(Object),

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

@@ -21,7 +21,7 @@ describe('mcp-server/tools/project/UploadProjectTools', () => {
     describe('register', () => {
         it('should register tool with correct parameters', () => {
             const result = tool.register();
-            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('upload-hubspot-project', {
+            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('upload-project', {
                 title: 'Upload HubSpot Project',
                 description: expect.stringContaining('Uploads the HubSpot project in current working directory.'),
                 inputSchema: expect.any(Object),

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

@@ -21,7 +21,7 @@ describe('mcp-server/tools/project/ValidateProjectTool', () => {
     describe('register', () => {
         it('should register tool with correct parameters', () => {
             const result = tool.register();
-            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('validate-hubspot-project', {
+            expect(mockMcpServer.registerTool).toHaveBeenCalledWith('validate-project', {
                 title: expect.stringContaining('Validate HubSpot Project'),
                 description: expect.stringContaining('Validates the HubSpot project and its configuration files.'),
                 inputSchema: expect.any(Object),

package/mcp-server/tools/project/constants.d.ts

@@ -1,6 +1,6 @@
 import z from 'zod';
 export declare const absoluteProjectPath: z.ZodString;
 export declare const absoluteCurrentWorkingDirectory: z.ZodString;
-export declare const features: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodLiteral<"card">, z.ZodLiteral<"settings">, z.ZodLiteral<"app-function">, z.ZodLiteral<"webhooks">, z.ZodLiteral<"workflow-action">]>, "many">>;
+export declare const features: z.ZodOptional<z.ZodArray<z.ZodUnion<[z.ZodLiteral<"card">, z.ZodLiteral<"settings">, z.ZodLiteral<"app-function">, z.ZodLiteral<"webhooks">, z.ZodLiteral<"workflow-action">, z.ZodLiteral<"workflow-action-tool">, z.ZodLiteral<"app-object">, z.ZodLiteral<"app-event">, z.ZodLiteral<"scim">, z.ZodLiteral<"page">]>, "many">>;
 export declare const docsSearchQuery: z.ZodString;
 export declare const docUrl: z.ZodString;

package/mcp-server/tools/project/constants.js

@@ -6,15 +6,23 @@ export const absoluteCurrentWorkingDirectory = z
     .string()
     .describe('The absolute path to the current working directory.');
 export const features = z
-    .array(z
-    .union([
+    .array(z.union([
     z.literal('card'),
     z.literal('settings'),
-    z.literal('app-function'),
+    z
+        .literal('app-function')
+        .describe('Also known as a public serverless function'),
     z.literal('webhooks'),
-    z.literal('workflow-action'),
-])
-    .describe('The features to include in the project, multiple options can be selected'))
+    z
+        .literal('workflow-action')
+        .describe('Also known as a custom workflow action.'),
+    z.literal('workflow-action-tool').describe('Also known as agent tools.'),
+    z.literal('app-object'),
+    z.literal('app-event'),
+    z.literal('scim'),
+    z.literal('page'),
+]))
+    .describe('The features to include in the project, multiple options can be selected')
     .optional();
 export const docsSearchQuery = z
     .string()

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@hubspot/cli",
-    "version": "7.6.0-beta.11",
+    "version": "7.6.0-beta.12",
     "description": "The official CLI for developing on HubSpot",
     "license": "Apache-2.0",
     "repository": "https://github.com/HubSpot/hubspot-cli",
     "type": "module",
     "dependencies": {
-        "@hubspot/local-dev-lib": "3.17.0",
-        "@hubspot/project-parsing-lib": "0.8.0",
+        "@hubspot/local-dev-lib": "3.18.0",
+        "@hubspot/project-parsing-lib": "0.8.3",
         "@hubspot/serverless-dev-runtime": "7.0.6",
         "@hubspot/theme-preview-dev-server": "0.0.10",
         "@hubspot/ui-extensions-dev-server": "0.9.8",
@@ -84,6 +84,7 @@
         "mcp-local": "yarn tsx ./scripts/mcp-local.ts",
         "prettier:write": "prettier --write './**/*.{ts,js,json}'",
         "release": "yarn tsx ./scripts/release.ts release",
+        "view-ui": "yarn build && yarn tsx ./scripts/view-ui.ts",
         "test": "vitest run",
         "test-dev": "vitest",
         "test-cli": "yarn build && yarn --cwd 'acceptance-tests' test-ci",

package/types/LocalDev.d.ts

@@ -1,4 +1,4 @@
-import { IntermediateRepresentationNodeLocalDev } from '@hubspot/project-parsing-lib/src/lib/types.js';
+import { HSProfileVariables, IntermediateRepresentationNodeLocalDev } from '@hubspot/project-parsing-lib/src/lib/types.js';
 import { Environment } from '@hubspot/local-dev-lib/types/Config';
 import { ValueOf } from '@hubspot/local-dev-lib/types/Utils';
 import { ProjectConfig } from './Projects.js';
@@ -16,6 +16,7 @@ export type LocalDevStateConstructorOptions = {
     initialProjectNodes: {
         [key: string]: IntermediateRepresentationNodeLocalDev;
     };
+    initialProjectProfileData: HSProfileVariables;
     env: Environment;
 };
 export type LocalDevWebsocketMessage = {

package/types/Projects.d.ts

@@ -10,6 +10,7 @@ export type ComponentTemplate = {
     path: string;
     label: string;
     type: string;
+    cliSelector?: string;
     parentComponent?: string;
     supportedAuthTypes?: string[];
     supportedDistributions?: string[];

package/ui/components/BoxWithTitle.d.ts

@@ -0,0 +1,8 @@
+export interface BoxWithTitleProps {
+    title: string;
+    message: string;
+    titleBackgroundColor?: string;
+    borderColor?: string;
+}
+export declare function getBoxWithTitle(props: BoxWithTitleProps): React.ReactNode;
+export declare function BoxWithTitle({ title, message, titleBackgroundColor, borderColor, }: BoxWithTitleProps): React.ReactNode;

package/ui/components/BoxWithTitle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { CONTAINER_STYLES } from '../styles.js';
+export function getBoxWithTitle(props) {
+    return _jsx(BoxWithTitle, { ...props });
+}
+export function BoxWithTitle({ title, message, titleBackgroundColor, borderColor, }) {
+    return (_jsxs(Box, { ...CONTAINER_STYLES, 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} ` }) }), _jsx(Box, { justifyContent: "center", alignItems: "center", children: _jsx(Text, { children: message }) })] }));
+}

package/ui/components/HorizontalSelectPrompt.d.ts

@@ -0,0 +1,8 @@
+export interface HorizontalSelectPromptProps {
+    defaultOption?: string;
+    options: string[];
+    onSelect: (value: string) => void;
+    prompt?: string;
+}
+export declare function getHorizontalSelectPrompt(props: HorizontalSelectPromptProps): React.ReactNode;
+export declare function HorizontalSelectPrompt({ defaultOption, options, onSelect, prompt, }: HorizontalSelectPromptProps): React.ReactNode;

package/ui/components/HorizontalSelectPrompt.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+import { CONTAINER_STYLES, INK_COLORS } from '../styles.js';
+export function getHorizontalSelectPrompt(props) {
+    return _jsx(HorizontalSelectPrompt, { ...props });
+}
+export function HorizontalSelectPrompt({ defaultOption, options, onSelect, prompt, }) {
+    const [selectedIndex, setSelectedIndex] = useState(defaultOption && options.indexOf(defaultOption) !== -1
+        ? options.indexOf(defaultOption)
+        : 0);
+    const moveRight = () => {
+        setSelectedIndex(prev => (prev < options.length - 1 ? prev + 1 : 0));
+    };
+    const moveLeft = () => {
+        setSelectedIndex(prev => (prev > 0 ? prev - 1 : options.length - 1));
+    };
+    useInput((_, key) => {
+        if (key.leftArrow) {
+            moveLeft();
+        }
+        else if (key.rightArrow) {
+            moveRight();
+        }
+        else if (key.return) {
+            onSelect(options[selectedIndex]);
+        }
+    });
+    return (_jsxs(Box, { ...CONTAINER_STYLES, flexDirection: "column", marginTop: 1, width: "100%", alignSelf: "center", justifyContent: "center", children: [prompt && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { children: prompt }) })), _jsx(Box, { flexDirection: "row", justifyContent: "center", flexWrap: "wrap", width: "100%", gap: 1, children: options.map((option, index) => (_jsx(Box, { children: _jsx(Text, { backgroundColor: index === selectedIndex ? INK_COLORS.INFO_BLUE : undefined, bold: index === selectedIndex, children: ` ${option} ` }) }, index))) }), _jsx(Box, { marginTop: 1, alignSelf: "center", justifyContent: "center", children: _jsx(Text, { dimColor: true, children: "Use arrow keys to navigate, Enter to select" }) })] }));
+}

package/ui/components/StatusMessageBoxes.d.ts

@@ -0,0 +1,12 @@
+export interface StatusMessageBoxProps {
+    title: string;
+    message: string;
+}
+export declare function getWarningBox(props: StatusMessageBoxProps): React.ReactNode;
+export declare function WarningBox({ title, message, }: StatusMessageBoxProps): React.ReactNode;
+export declare function getAlertBox(props: StatusMessageBoxProps): React.ReactNode;
+export declare function AlertBox({ title, message, }: StatusMessageBoxProps): React.ReactNode;
+export declare function getSuccessBox(props: StatusMessageBoxProps): React.ReactNode;
+export declare function SuccessBox({ title, message, }: StatusMessageBoxProps): React.ReactNode;
+export declare function getInfoBox(props: StatusMessageBoxProps): React.ReactNode;
+export declare function InfoBox({ title, message, }: StatusMessageBoxProps): React.ReactNode;

package/ui/components/StatusMessageBoxes.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { INK_COLORS } from '../styles.js';
+import { BoxWithTitle } from './BoxWithTitle.js';
+export function getWarningBox(props) {
+    return _jsx(WarningBox, { ...props });
+}
+export function WarningBox({ title, message, }) {
+    const color = INK_COLORS.WARNING_YELLOW;
+    return (_jsx(BoxWithTitle, { title: title, message: message, titleBackgroundColor: color, borderColor: color }));
+}
+export function getAlertBox(props) {
+    return _jsx(AlertBox, { ...props });
+}
+export function AlertBox({ title, message, }) {
+    const color = INK_COLORS.ALERT_RED;
+    return (_jsx(BoxWithTitle, { title: title, message: message, titleBackgroundColor: color, borderColor: color }));
+}
+export function getSuccessBox(props) {
+    return _jsx(SuccessBox, { ...props });
+}
+export function SuccessBox({ title, message, }) {
+    const color = INK_COLORS.SUCCESS_GREEN;
+    return (_jsx(BoxWithTitle, { title: title, message: message, titleBackgroundColor: color, borderColor: color }));
+}
+export function getInfoBox(props) {
+    return _jsx(InfoBox, { ...props });
+}
+export function InfoBox({ title, message, }) {
+    const color = INK_COLORS.INFO_BLUE;
+    return (_jsx(BoxWithTitle, { title: title, message: message, titleBackgroundColor: color, borderColor: color }));
+}

package/ui/lib/ui-testing-utils.d.ts

@@ -0,0 +1,9 @@
+export type ComponentPropPair = {
+    component: React.ReactNode;
+    signature: string;
+};
+/**
+ * These components will be used by the sandbox ui. Please add any new components here.
+ */
+export declare const populatedComponents: Record<string, ComponentPropPair>;
+export declare function getComponentOptions(): string[];

package/ui/lib/ui-testing-utils.js

@@ -0,0 +1,47 @@
+import { getSuccessBox, getInfoBox, getWarningBox, getAlertBox, } from '../components/StatusMessageBoxes.js';
+import { getBoxWithTitle } from '../components/BoxWithTitle.js';
+import { SuccessBox, InfoBox, WarningBox, AlertBox, } from '../components/StatusMessageBoxes.js';
+import { BoxWithTitle } from '../components/BoxWithTitle.js';
+/**
+ * These components will be used by the sandbox ui. Please add any new components here.
+ */
+export const populatedComponents = {
+    SuccessBox: {
+        component: getSuccessBox({
+            title: 'Success',
+            message: 'This is a success message',
+        }),
+        signature: SuccessBox.toString(),
+    },
+    InfoBox: {
+        component: getInfoBox({
+            title: 'Info',
+            message: 'This is an info message',
+        }),
+        signature: InfoBox.toString(),
+    },
+    WarningBox: {
+        component: getWarningBox({
+            title: 'Warning',
+            message: 'This is a warning message',
+        }),
+        signature: WarningBox.toString(),
+    },
+    AlertBox: {
+        component: getAlertBox({
+            title: 'Alert',
+            message: 'This is an alert message',
+        }),
+        signature: AlertBox.toString(),
+    },
+    BoxWithTitle: {
+        component: getBoxWithTitle({
+            title: 'Title',
+            message: 'This is a box with a title',
+        }),
+        signature: BoxWithTitle.toString(),
+    },
+};
+export function getComponentOptions() {
+    return Object.keys(populatedComponents);
+}

package/ui/lib/useTerminalSize.d.ts

@@ -0,0 +1,13 @@
+/**
+ * This hook is used to get the current terminal size.
+ * It will return the current terminal size, and if a component is using this hook to set height/width,
+ * it will re-render when the terminal size changes.
+ * ONLY USE THIS HOOK WITH SCREENS. THIS HOOK WILL DESTROY ANY PRIOR LOG OUTPUT IF USED TO SET HEIGHT/WIDTH.
+ * @param minHeight - The minimum height of the terminal.
+ * @param minWidth - The minimum width of the terminal.
+ * @returns The current terminal size.
+ */
+export declare function useTerminalSize(minHeight?: number, minWidth?: number): {
+    columns: number;
+    rows: number;
+};

package/ui/lib/useTerminalSize.js

@@ -0,0 +1,31 @@
+import { useStdout } from 'ink';
+import { useEffect, useState } from 'react';
+/**
+ * This hook is used to get the current terminal size.
+ * It will return the current terminal size, and if a component is using this hook to set height/width,
+ * it will re-render when the terminal size changes.
+ * ONLY USE THIS HOOK WITH SCREENS. THIS HOOK WILL DESTROY ANY PRIOR LOG OUTPUT IF USED TO SET HEIGHT/WIDTH.
+ * @param minHeight - The minimum height of the terminal.
+ * @param minWidth - The minimum width of the terminal.
+ * @returns The current terminal size.
+ */
+export function useTerminalSize(minHeight, minWidth) {
+    const { stdout } = useStdout();
+    const [size, setSize] = useState({
+        columns: Math.max(stdout.columns, minWidth ?? 0),
+        rows: Math.max(stdout.rows, minHeight ?? 0),
+    });
+    useEffect(() => {
+        const handleResize = () => {
+            setSize({
+                columns: Math.max(stdout.columns, minWidth ?? 0),
+                rows: Math.max(stdout.rows, minHeight ?? 0),
+            });
+        };
+        stdout.on('resize', handleResize);
+        return () => {
+            stdout.off('resize', handleResize);
+        };
+    }, [stdout]);
+    return size;
+}

package/ui/styles.d.ts

@@ -0,0 +1,18 @@
+export declare const CONTAINER_STYLES: {
+    readonly padding: 1;
+    readonly marginY: 0.5;
+    readonly flexDirection: "column";
+    readonly flexWrap: "wrap";
+};
+/**
+ * Any color that can be used well in both WHITE and BLACK terminals.
+ * This is a best effort to ensure that the color is good looking in both
+ * light and dark modes.
+ */
+export declare const INK_COLORS: {
+    ALERT_RED: string;
+    SUCCESS_GREEN: string;
+    INFO_BLUE: string;
+    WARNING_YELLOW: string;
+    WHITE: string;
+};

package/ui/styles.js

@@ -0,0 +1,18 @@
+export const CONTAINER_STYLES = {
+    padding: 1,
+    marginY: 0.5,
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+};
+/**
+ * Any color that can be used well in both WHITE and BLACK terminals.
+ * This is a best effort to ensure that the color is good looking in both
+ * light and dark modes.
+ */
+export const INK_COLORS = {
+    ALERT_RED: '#fc7272',
+    SUCCESS_GREEN: '#4deb7a',
+    INFO_BLUE: '#4dcbeb',
+    WARNING_YELLOW: '#EEB117',
+    WHITE: 'white',
+};

package/ui/views/UiSandbox.d.ts

@@ -0,0 +1,5 @@
+export type UiSandboxProps = {
+    componentName: string | undefined;
+};
+export declare function getUiSandbox(props: UiSandboxProps): React.ReactNode;
+export declare function UiSandbox({ componentName }: UiSandboxProps): React.ReactNode;