Fix cli-kit SelectInput/MultiSelectInput viewport and state management

package.json

@@ -98,7 +98,20 @@
     "printWidth": 120
   },
   "version": "0.0.0",
+  "packageExtensionsNotes": {
+    "@json-render/ink@0.19.0": "The published manifest omits its zod runtime dependency; pinning zod 4 prevents Ink from resolving zod 3 while core uses zod 4."
+  },
   "pnpm": {
+    "overrides": {
+      "@types/react": "18.3.12"
+    },
+    "packageExtensions": {
+      "@json-render/ink@0.19.0": {
+        "dependencies": {
+          "zod": "^4.3.6"
+        }
+      }
+    },
     "peerDependencyRules": {
       "allowedVersions": {
         "@shopify/cli-hydrogen>@graphql-codegen/cli": "6.0.1",

packages/cli-kit/src/private/node/ui/components/DescriptionPanel.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import {Box, Text} from 'ink'
+
+// Minimum readable width (in columns) for the description panel when placed beside the list.
+// Below this the panel is stacked under the list instead. Shared by SelectInput and
+// MultiSelectInput so both make the same responsive decision.
+export const MIN_SIDE_PANEL_WIDTH = 24
+
+export interface DescriptionPanelProps {
+  /**
+   * Optional bold heading shown above the description (typically the highlighted item's label).
+   */
+  title?: string
+  /**
+   * The description text to show. Wrapped within the panel width and clipped to `maxLines`.
+   */
+  description?: string
+  /**
+   * Width of the panel in columns. Includes the panel's left padding.
+   */
+  width: number
+  /**
+   * Maximum number of physical lines the panel may occupy. The panel always reserves this
+   * height so the surrounding layout stays stable while the highlighted item changes, and any
+   * overflow is clipped to keep the total render height within the viewport.
+   */
+  maxLines: number
+}
+
+/**
+ * A responsive, height-bounded panel that shows the description of the currently highlighted
+ * item beside or below a `SelectInput`/`MultiSelectInput` list. Kept intentionally small and
+ * self-contained so both selection components can share it.
+ */
+export function DescriptionPanel({title, description, width, maxLines}: DescriptionPanelProps): React.ReactElement {
+  return (
+    <Box flexDirection="column" width={width} height={maxLines} overflowY="hidden" paddingLeft={2}>
+      {title ? (
+        <Text bold wrap="truncate-end">
+          {title}
+        </Text>
+      ) : null}
+      {description ? <Text wrap="wrap">{description}</Text> : null}
+    </Box>
+  )
+}