fix(tui): Space to proceed, Enter to toggle options

.claude/skills/ink-tui/references/PRIMITIVES.md

@@ -39,13 +39,13 @@ Tabs array can be built conditionally — see `RunScreen.tsx` for an example of
 
 Single and multi select. Fully custom renderers — does NOT use `@inkjs/ui` Select/MultiSelect.
 
-- **Single select**: `▸` triangle cursor on focused item, enter selects
-- **Multi select** (`mode="multi"`): `◻`/`◼` toggles with space, enter submits
+- **Single select**: `▸` triangle cursor on focused item, space selects
+- **Multi select** (`mode="multi"`): `◻`/`◼` toggles with enter, space submits
 
 ### ConfirmationInput
 `src/ui/tui/primitives/ConfirmationInput.tsx`
 
-Continue/cancel prompt with two bordered button boxes. Left/right arrows switch focus, enter activates focused, escape always cancels.
+Continue/cancel prompt with two bordered button boxes. Left/right arrows or enter switch focus, space activates focused, escape always cancels.
 
 ### DissolveTransition
 `src/ui/tui/primitives/DissolveTransition.tsx`

e2e-tests/utils/framework-test-utils.ts

@@ -5,15 +5,15 @@ export const DEFAULT_WIZARD_STEPS: WizardStep[] = [
   // {
   //   name: 'uncommitted',
   //   waitFor: 'You have uncommitted or untracked files in your repo:',
-  //   response: [KEYS.DOWN, KEYS.ENTER],
+  //   response: [KEYS.DOWN, KEYS.SPACE],
   //   timeout: 2000,
   //   optional: true,
   // },
   {
     name: 'mcp',
     waitFor:
       'Would you like to install the PostHog MCP server to use PostHog in your editor?',
-    response: [KEYS.DOWN, KEYS.ENTER],
+    response: [KEYS.DOWN, KEYS.SPACE],
     responseWaitFor: 'No',
   },
   {

src/ui/tui/playground/demos/HealthCheckDemo.tsx

@@ -77,7 +77,7 @@ export const HealthCheckDemo = () => {
       footer={
         <Box marginLeft={2}>
           <Text dimColor>
-            Continue [Enter] / Exit [Esc] (disabled in playground)
+            Continue [Space] / Exit [Esc] (disabled in playground)
           </Text>
         </Box>
       }

src/ui/tui/playground/demos/ModalDemo.tsx

@@ -31,7 +31,7 @@ export const ModalDemo = () => {
         footer={
           <Box marginLeft={2}>
             <Text dimColor>
-              Continue [Enter] / Exit [Esc] (disabled in playground)
+              Continue [Space] / Exit [Esc] (disabled in playground)
             </Text>
           </Box>
         }

src/ui/tui/playground/demos/WelcomeDemo.tsx

@@ -1,5 +1,5 @@
 /**
- * WelcomeDemo — Splash screen. Press enter to push the tabbed view.
+ * WelcomeDemo — Splash screen. Press space to push the tabbed view.
  */
 
 import { Box, Text, useInput } from 'ink';
@@ -11,8 +11,8 @@
 }
 
 export const WelcomeDemo = ({ store }: WelcomeDemoProps) => {
   useInput((_input, key) => {
-    if (key.return) {
+    if (_input === ' ') {
       store.completeSetup();
     }
   });
@@ -34,7 +34,7 @@
       </Text>
       <Box height={1} />
       <Text color={Colors.primary}>
-        Press enter to continue {Icons.triangleRight}
+        Press space to continue {Icons.triangleRight}
       </Text>
     </Box>
   );

src/ui/tui/primitives/ConfirmationInput.tsx

@@ -1,6 +1,6 @@
 /**
  * ConfirmationInput — Continue/cancel prompt.
- * Enter confirms, escape cancels. Arrow keys toggle focus.
+ * Space confirms the focused action, Enter or arrow keys move focus. Escape cancels.
  */
 
 import { Box, Text, useInput } from 'ink';
@@ -25,18 +25,18 @@ export const ConfirmationInput = ({
   message,
   onConfirm,
   onCancel,
-  confirmLabel = 'Continue [Enter]',
+  confirmLabel = 'Continue [Space]',
   cancelLabel = 'Cancel [Esc]',
 }: ConfirmationInputProps) => {
   const [focused, setFocused] = useState<FocusTarget>(FocusTarget.Continue);
 
   useInput((_input, key) => {
-    if (key.leftArrow || key.rightArrow) {
+    if (key.leftArrow || key.rightArrow || key.return) {
       setFocused((f) =>
         f === FocusTarget.Continue ? FocusTarget.Cancel : FocusTarget.Continue,
       );
     }
-    if (key.return) {
+    if (_input === ' ') {
       if (focused === FocusTarget.Continue) {
         onConfirm();
       } else {

src/ui/tui/primitives/GroupedPickerMenu.tsx

@@ -3,7 +3,7 @@
  *
  * Renders groups of options with bold category labels.
  * Arrow keys navigate selectable items (headers are skipped),
- * space toggles, "a" toggles all, enter submits.
+ * enter toggles, "a" toggles all, space submits.
  *
  * When content exceeds available terminal height, the list scrolls
  * to keep the focused item visible with ↑/↓ indicators.
@@ -185,7 +185,7 @@ export const GroupedPickerMenu = ({
       }
     }
 
-    if (input === ' ') {
+    if (key.return) {
       const targetRowIdx = selectableIndices[newFocused] ?? 0;
       const row = rows[targetRowIdx];
       if (row?.kind === 'option') {
@@ -208,7 +208,7 @@ export const GroupedPickerMenu = ({
         return new Set(allValues);
       });
     }
-    if (key.return) {
+    if (input === ' ') {
       onSelect([...selected]);
     }
   });
@@ -231,7 +231,7 @@ export const GroupedPickerMenu = ({
       <PromptLabel message={message} />
       <Text dimColor>
         {' '}
-        (space to toggle, a to toggle all, enter to confirm)
+        (enter to toggle, a to toggle all, space to confirm)
       </Text>
       <Box flexDirection="column" marginTop={1} marginLeft={2}>
         {needsScroll && (

src/ui/tui/primitives/PickerMenu.tsx

@@ -1,7 +1,7 @@
 /**
  * PickerMenu — Single and multi select.
  * Single mode: custom renderer with small triangle indicator.
- * Multi mode: checkbox glyphs with space to toggle.
+ * Multi mode: checkbox glyphs with Enter to toggle, Space to confirm.
  */
 
 import { Box, Text, useInput } from 'ink';
@@ -99,7 +99,7 @@ const SinglePickerMenu = <T,>({
       const nextCol = col < columns - 1 ? col + 1 : 0;
       setFocused(Math.min(nextCol * rows + row, options.length - 1));
     }
-    if (key.return) {
+    if (_input === ' ') {
       const selected = options[focused];
       if (selected) {
         onSelect(selected.value);
@@ -195,7 +195,7 @@ const MultiPickerMenu = <T,>({
       const nextCol = col < columns - 1 ? col + 1 : 0;
       setFocused(Math.min(nextCol * rows + row, options.length - 1));
     }
-    if (_input === ' ') {
+    if (key.return) {
       setSelected((prev) => {
         const next = new Set(prev);
         if (next.has(focused)) {
@@ -206,7 +206,7 @@ const MultiPickerMenu = <T,>({
         return next;
       });
     }
-    if (key.return) {
+    if (_input === ' ') {
       if (selected.size === 0) {
         // Nothing toggled, select hovered
         const hovered = options[focused];
@@ -228,7 +228,7 @@ const MultiPickerMenu = <T,>({
   return (
     <Box flexDirection="column" alignItems={centered ? 'center' : undefined}>
       <PromptLabel message={message} />
-      <Text dimColor> (space to multi-select, enter to confirm)</Text>
+      <Text dimColor> (enter to multi-select, space to confirm)</Text>
       <Box
         flexDirection="row"
         gap={4}

src/ui/tui/screens/PortConflictScreen.tsx

@@ -35,7 +35,7 @@ export const PortConflictScreen = ({ store }: PortConflictScreenProps) => {
       footer={
         <ConfirmationInput
           message="Kill process and continue?"
-          confirmLabel="Kill & continue [Enter]"
+          confirmLabel="Kill & continue [Space]"
           cancelLabel="Exit [Esc]"
           onConfirm={() => {
             try {

src/ui/tui/screens/SettingsOverrideScreen.tsx

@@ -44,7 +44,7 @@ export const SettingsOverrideScreen = ({
       footer={
         <ConfirmationInput
           message="Back up to .wizard-backup and continue?"
-          confirmLabel="Backup & continue [Enter]"
+          confirmLabel="Backup & continue [Space]"
           cancelLabel="Exit [Esc]"
           onConfirm={() => {
             const ok = store.backupAndFixSettingsOverride();

src/ui/tui/screens/SkillsScreen.tsx

@@ -124,7 +124,7 @@ export const SkillsScreen = ({ store }: SkillsScreenProps) => {
             <Box marginTop={1}>
               <ConfirmationInput
                 message="Keep the installed skills?"
-                confirmLabel="Keep [Enter]"
+                confirmLabel="Keep [Space]"
                 cancelLabel="Remove [Esc]"
                 onConfirm={handleKeep}
                 onCancel={() => void handleRemove()}

src/ui/tui/screens/health/HealthCheckScreen.tsx

@@ -154,7 +154,7 @@ export const HealthCheckScreen = ({ store }: HealthCheckScreenProps) => {
         ) : (
           <ConfirmationInput
             message="Continue anyway?"
-            confirmLabel="Continue [Enter]"
+            confirmLabel="Continue [Space]"
             cancelLabel={cancelLabel}
             onConfirm={() => store.dismissOutage()}
             onCancel={handleCancel}