Add mouse support

[gonzaloriestra]

WHY are these changes introduced?

HackDays project: https://vault.shopify.io/hackdays/154/projects/24279-Shopify-CLI-UX-improvements

Shopify CLI prompts and app dev tabs are keyboard-only, making common interactions less direct.

WHAT is this pull request doing?

Adds shared mouse handling for prompts and app dev tabs, including terminal scrolling support and shopify config mouse on|off controls.

demo.mp4

How to test your changes?

• pnpm i -g @shopify/cli@0.0.0-snapshot-20260811121607
• shopify app init
• shopify app dev

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've considered possible documentation changes
• I've considered analytics changes to measure impact
• The change is user-facing — I've identified the correct bump type (patch for bug fixes · minor for new features · major for breaking changes) and added a changeset with pnpm changeset add

[gonzaloriestra]

/snapit

[github-actions]

🫰✨ Thanks @gonzaloriestra! Your snapshot has been published to npm.

Test the snapshot by installing your package globally:

pnpm i -g --@shopify:registry=https://registry.npmjs.org @shopify/cli@0.0.0-snapshot-20260720151107

Caution

After installing, validate the version by running shopify version in your terminal.
If the versions don't match, you might have multiple global instances installed.
Use which shopify to find out which one you are running and uninstall it.

[gonzaloriestra]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• New app dev layout with filters #8137
• Add mouse support #8131 👈 (View in Graphite)
• New loading indicator #8136
• Send analytics in background #7615
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Differences in type declarations

We detected differences in the type declarations generated by Typescript for this branch compared to the baseline ('main' branch). Please, review them to ensure they are backward-compatible. Here are some important things to keep in mind:

• Some seemingly private modules might be re-exported through public modules.
• If the branch is behind main you might see odd diffs, rebase main into this branch.

New type declarations

packages/cli-kit/dist/public/node/mouse.d.ts

import { getMouseEnabled, setMouseEnabled } from '../../private/node/conf-store.js';
export { getMouseEnabled, setMouseEnabled };

packages/cli-kit/dist/private/node/ui/components/LoadingIndicator.d.ts

import React from 'react';
interface LoadingIndicatorProps {
    title: string;
    noColor?: boolean;
}
declare const LoadingIndicator: ({ title, noColor }: LoadingIndicatorProps) => React.JSX.Element;
export { LoadingIndicator };

packages/cli-kit/dist/private/node/ui/components/Mouse.d.ts

import React from 'react';
import { type ClickHandler, type ElementRef, type MouseEnterHandler } from '@ink-tools/ink-mouse';
interface MouseProviderProps extends React.PropsWithChildren {
    allowTerminalScrolling?: boolean;
    trackMouseMovement?: boolean;
}
export declare function removeTerminalInputResponses(input: string): string;
export declare function MouseProvider({ children, ...mouseProviderProps }: MouseProviderProps): React.ReactElement;
export declare function useOnClick(ref: ElementRef, handler: ClickHandler | null | undefined): void;
export declare function useOnMouseEnter(ref: ElementRef, handler: MouseEnterHandler | null | undefined): void;
export {};

Existing type declarations

packages/cli-kit/dist/private/node/conf-store.d.ts

@@ -25,6 +25,7 @@ export interface ConfSchema {
     currentDevSessionId?: string;
     cache?: Cache;
     autoUpgradeEnabled?: boolean;
+    mouseEnabled?: boolean;
 }
 /**
  * Get session.
@@ -139,6 +140,19 @@ export declare function getAutoUpgradeEnabled(config?: LocalStorage<ConfSchema>)
  * @param enabled - Whether auto-upgrade should be enabled.
  */
 export declare function setAutoUpgradeEnabled(enabled: boolean, config?: LocalStorage<ConfSchema>): void;
+/**
+ * Get mouse interaction preference.
+ * Defaults to true if the preference has never been explicitly set.
+ *
+ * @returns Whether mouse interactions are enabled.
+ */
+export declare function getMouseEnabled(config?: LocalStorage<ConfSchema>): boolean;
+/**
+ * Set mouse interaction preference.
+ *
+ * @param enabled - Whether mouse interactions should be enabled.
+ */
+export declare function setMouseEnabled(enabled: boolean, config?: LocalStorage<ConfSchema>): void;
 export declare function getConfigStoreForPartnerStatus(): LocalStorage<Record<string, {
     status: true;
     checkedAt: string;

packages/cli-kit/dist/private/node/ui.d.ts

@@ -28,6 +28,7 @@ export declare class Stdout extends EventEmitter {
     columns: number;
     rows: number;
     readonly frames: string[];
+    readonly controlSequences: string[];
     private _lastFrame?;
     constructor(options: {
         columns?: number;

packages/cli-kit/dist/public/node/ink.d.ts

@@ -1 +1,3 @@
-export { Box, Text, Static, useInput, useStdin, useStdout, measureElement } from 'ink';
\ No newline at end of file
+export { Box, Text, Static, useInput, useStdin, useStdout, measureElement } from 'ink';
+export type { DOMElement } from 'ink';
+export { MouseProvider, useOnClick, useOnMouseEnter } from '../../private/node/ui/components/Mouse.js';
\ No newline at end of file

packages/cli-kit/dist/public/node/ui.d.ts

@@ -220,7 +220,8 @@ export interface RenderSelectPromptOptions<T> extends Omit<SelectPromptProps<T>,
  *       seventh
  *       tenth
  *
- *    Press ↑↓ arrows to select, enter to confirm.
+ *    Press ↑↓ arrows to select, enter to confirm, or click an
+ *    option.
  *
  */
 export declare function renderSelectPrompt<T>({ renderOptions, isConfirmationPrompt, ...props }: RenderSelectPromptOptions<T>, uiDebugOptions?: UIDebugOptions): Promise<T>;
@@ -245,8 +246,8 @@ export interface RenderConfirmationPromptOptions extends Pick<SelectPromptProps<
  * >  (y) Yes, confirm changes
  *    (n) Cancel
  *
- *    Press ↑↓ arrows to select, enter or a shortcut to
- *    confirm.
+ *    Use ↑↓ to select; press enter, use a shortcut, or click
+ *    an option.
  *
  */
 export declare function renderConfirmationPrompt({ message, infoTable, confirmationMessage, cancellationMessage, renderOptions, defaultValue, abortSignal, infoMessage, }: RenderConfirmationPromptOptions): Promise<boolean>;
@@ -288,7 +289,8 @@ export interface RenderAutocompleteOptions<T> extends PartialBy<Omit<Autocomplet
  *    twenty-fourth
  *    twenty-fifth
  *
- *    Press ↑↓ arrows to select, enter to confirm.
+ *    Press ↑↓ arrows to select, enter to confirm, or click an
+ *    option.
  *
  */
 export declare function renderAutocompletePrompt<T>({ renderOptions, ...props }: RenderAutocompleteOptions<T>, uiDebugOptions?: UIDebugOptions): Promise<T>;
@@ -322,9 +324,9 @@ export interface RenderSingleTaskOptions<T> {
     renderOptions?: RenderOptions;
 }
 /**
- * Awaits a single task and displays a loading bar while it's in progress. The task's result is returned.
+ * Awaits a single task and displays a loading indicator while it's in progress. The task's result is returned.
  * @param options - Configuration object
- * @param options.title - The initial title to display with the loading bar
+ * @param options.title - The initial title to display with the loading indicator
  * @param options.task - The async task to execute. Receives an updateStatus callback to change the displayed title.
  * @param options.renderOptions - Optional render configuration
  * @returns The result of the task

packages/cli-kit/dist/private/node/testing/ui.d.ts

@@ -9,13 +9,16 @@ declare class Stderr extends EventEmitter {
 }
 export declare class Stdin extends EventEmitter {
     isTTY: boolean;
+    isRaw: boolean;
     data: string | null;
     constructor(options?: {
         isTTY?: boolean;
     });
     write: (data: string) => void;
     setEncoding(): void;
-    setRawMode(): void;
+    setRawMode(isRaw: boolean): void;
+    pause(): void;
+    resume(): void;
     ref(): void;
     unref(): void;
     read: () => string | null;
@@ -35,6 +38,7 @@ interface RenderOptions {
     stdout?: EventEmitter;
     stderr?: EventEmitter;
     stdin?: EventEmitter;
+    stdoutIsTTY?: boolean;
 }
 export declare const render: (tree: ReactElement, options?: RenderOptions) => Instance;
 /**

packages/cli-kit/dist/public/node/ui/components.d.ts

@@ -1,4 +1,5 @@
 export { ConcurrentOutput, ConcurrentOutputContext, useConcurrentOutputContext, } from '../../../private/node/ui/components/ConcurrentOutput.js';
 export { Alert } from '../../../private/node/ui/components/Alert.js';
 export { Link } from '../../../private/node/ui/components/Link.js';
+export { LoadingIndicator } from '../../../private/node/ui/components/LoadingIndicator.js';
 export { TabularData } from '../../../private/node/ui/components/TabularData.js';
\ No newline at end of file