New app dev layout with filters

[gonzaloriestra]

WHY are these changes introduced?

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

Busy app dev sessions mix output from multiple processes, making relevant logs hard to follow.

WHAT is this pull request doing?

Introduces a full-screen app dev layout with a scrollable log pane and persistent controls, plus keyboard and mouse filtering by process while preserving the final session view on exit.

demo.mp4

How to test your changes?

• pnpm i -g @shopify/cli@0.0.0-snapshot-20260724084707
• 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]

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 👈 (View in Graphite)
• New loading indicator #8136
• Add mouse support #8131
• Send analytics in background #7615
• main

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

[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-20260724084707

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.

[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, type WheelHandler } from '@ink-tools/ink-mouse';
interface MouseProviderProps extends React.PropsWithChildren {
    allowTerminalScrolling?: boolean;
    isActive?: boolean;
    trackMouseMovement?: boolean;
}
export declare function removeTerminalInputResponses(input: string): string;
export declare function MouseProvider({ children, isActive, ...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 declare function useOnWheel(ref: ElementRef, handler: WheelHandler | 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/public/node/analytics.d.ts

@@ -6,6 +6,7 @@ interface ReportAnalyticsEventOptions {
     errorMessage?: string;
     exitMode: CommandExitMode;
 }
+export declare function sendAnalyticsEventFromFile(payloadFile: string): Promise<void>;
 /**
  * Report an analytics event, sending it off to Monorail -- Shopify's internal analytics service.
  *

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, useOnWheel } 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>;
@@ -312,7 +314,7 @@ interface RenderTasksOptions {
 /**
  * Runs async tasks and displays their progress to the console.
  * @example
- * Installing dependencies ...
+ * Installing dependencies...
  */
 export declare function renderTasks<TContext>(tasks: Task<TContext>[], { renderOptions, noProgressBar }?: RenderTasksOptions): Promise<TContext>;
 export interface RenderSingleTaskOptions<T> {
@@ -322,14 +324,14 @@ 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
  * @example
- * Loading app ...
+ * Loading app...
  */
 export declare function renderSingleTask<T>({ title, task, onAbort, renderOptions, }: RenderSingleTaskOptions<T>): Promise<T>;
 export interface RenderTextPromptOptions extends Omit<TextPromptProps, 'onSubmit'> {

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

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

@@ -8,6 +8,12 @@ export interface ConcurrentOutputProps {
     showTimestamps?: boolean;
     keepRunningAfterProcessesResolve?: boolean;
     useAlternativeColorPalette?: boolean;
+    /** Renders output in a bounded viewport with keyboard and mouse-wheel scrolling. */
+    scrollable?: boolean;
+    /** Filters both existing and future output by its displayed prefix. */
+    outputFilter?: (prefix: string) => boolean;
+    /** Called when output is received, including output with a contextual prefix. */
+    onOutputPrefix?: (prefix: string) => void;
 }
 interface ConcurrentOutputContext {
     outputPrefix?: string;