fix(ui): prevent chat from aggressively scrolling to bottom on slash command

Resolves #581.

Previously, rendering the slash command completions menu outside of the main
bordered input <Box> altered the height of the live viewport area. This height
change triggered Ink.js to recalculate flexbox layouts, forcing the chat history
to unexpectedly snap to the bottom in smaller terminal windows.

This commit moves the rendering of both command completions and file suggestions
inside the bounded layout. The container expands naturally without disrupting
the overall window height calculation, keeping the user's scroll position intact.

Additionally:
- Adds structural layout tests verifying completions render inside the container.
- Fixes test timing flakes where simulated stdin input was occasionally ignored.

Author: Dhirenderchoudhary

source/components/user-input.spec.tsx

@@ -3,7 +3,7 @@ import {render} from 'ink-testing-library';
 import React from 'react';
 import {themes} from '../config/themes';
 import {ThemeContext} from '../hooks/useTheme';
-import {UIStateProvider} from '../hooks/useUIState';
+import {UIStateProvider, useUIStateContext} from '../hooks/useUIState';
 import UserInput from './user-input';
 
 console.log(`\nuser-input.spec.tsx – ${React.version}`);
@@ -393,6 +393,7 @@ test('UserInput does not show ctrl-o hint when onToggleCompactDisplay is not pro
 	unmount();
 });
 
+<<<<<<< HEAD
 // ============================================================================
 // Command Completion Navigation Tests
 // ============================================================================
@@ -484,3 +485,91 @@ test('completion menu dismissal/reset after selection or escape', async t => {
 
 	unmount();
 });
+=======
+test('UserInput renders completions text when typing /', async t => {
+	const {stdin, lastFrame, unmount} = render(
+		<TestWrapper>
+			<UserInput customCommands={['help', 'model']} />
+		</TestWrapper>
+	);
+
+	await new Promise(resolve => setTimeout(resolve, 50));
+	stdin.write('/');
+	await new Promise(resolve => setTimeout(resolve, 150));
+
+	const output = lastFrame()!;
+	t.truthy(output);
+	t.regex(output, /Available commands:/);
+	unmount();
+});
+
+test('UserInput renders completions BEFORE the mode indicator (inside the input box)', async t => {
+	const {stdin, lastFrame, unmount} = render(
+		<TestWrapper>
+			<UserInput developmentMode="normal" customCommands={['help', 'model']} />
+		</TestWrapper>
+	);
+
+	await new Promise(resolve => setTimeout(resolve, 50));
+	stdin.write('/');
+	await new Promise(resolve => setTimeout(resolve, 150));
+
+	const output = lastFrame()!;
+	t.truthy(output);
+
+	const completionsIdx = output.indexOf('Available commands:');
+	const modeIdx = output.indexOf('normal mode');
+	t.true(completionsIdx > -1, 'Completions text should be present');
+	t.true(modeIdx > -1, 'Mode indicator should be present');
+	t.true(
+		completionsIdx < modeIdx,
+		'Completions must render before the mode indicator (inside the bordered input box)',
+	);
+	unmount();
+});
+
+test('UserInput completions appear on a line above the mode indicator', async t => {
+	const {stdin, lastFrame, unmount} = render(
+		<TestWrapper>
+			<UserInput developmentMode="normal" customCommands={['help', 'model']} />
+		</TestWrapper>
+	);
+
+	await new Promise(resolve => setTimeout(resolve, 50));
+	stdin.write('/');
+	await new Promise(resolve => setTimeout(resolve, 150));
+
+	const output = lastFrame()!;
+	const lines = output.split('\n');
+
+	let completionLine = -1;
+	let modeLine = -1;
+	for (let i = 0; i < lines.length; i++) {
+		if (lines[i].includes('Available commands:')) completionLine = i;
+		if (lines[i].includes('normal mode')) modeLine = i;
+	}
+
+	t.true(completionLine > -1, 'Should find completions line');
+	t.true(modeLine > -1, 'Should find mode indicator line');
+	t.true(
+		completionLine < modeLine,
+		`Completions (line ${completionLine}) must be above mode indicator (line ${modeLine})`,
+	);
+	unmount();
+});
+
+test('UserInput does not show completions when input is empty', t => {
+	const {lastFrame, unmount} = render(
+		<TestWrapper>
+			<UserInput />
+		</TestWrapper>
+	);
+
+	const output = lastFrame()!;
+	t.truthy(output);
+	t.notRegex(output, /Available commands:/);
+	unmount();
+});
+
+
+>>>>>>> 9d48b592 (fix(ui): prevent chat from aggressively scrolling to bottom on slash command)

source/components/user-input.tsx

@@ -591,46 +591,6 @@ export default function UserInput({
 				</Text>
 			)}
 
-			{showCompletions && completions.length > 0 && (
-				<Box flexDirection="column" marginTop={1}>
-					<Text color={colors.secondary}>Available commands:</Text>
-					{completions.map((completion, index) => {
-						const isSelected = index === selectedCompletionIndex;
-						return (
-							<Text
-								key={index}
-								color={
-									isSelected
-										? colors.info
-										: completion.isCustom
-											? colors.info
-											: colors.primary
-								}
-								bold={isSelected}
-							>
-								{isSelected ? '▸ ' : '  '}/{completion.name}
-							</Text>
-						);
-					})}
-				</Box>
-			)}
-			{isFileAutocompleteMode && fileCompletions.length > 0 && (
-				<Box flexDirection="column" marginTop={1}>
-					<Text color={colors.secondary}>
-						File suggestions (↑/↓ to navigate, Tab to select):
-					</Text>
-					{fileCompletions.slice(0, 5).map((file, index) => (
-						<Text
-							key={index}
-							color={index === selectedFileIndex ? colors.info : colors.primary}
-							bold={index === selectedFileIndex}
-						>
-							{index === selectedFileIndex ? '▸ ' : '  '}
-							{file.path}
-						</Text>
-					))}
-				</Box>
-			)}
 
 			<Box
 				flexDirection="column"
@@ -666,8 +626,50 @@ export default function UserInput({
 				{showClearMessage && (
 					<Text color={colors.secondary}>Press escape again to clear</Text>
 				)}
-			</Box>
 
+				{showCompletions && completions.length > 0 && (
+					<Box flexDirection="column" marginTop={1}>
+						<Text color={colors.secondary}>Available commands:</Text>
+						{completions.map((completion, index) => {
+							const isSelected = index === selectedCompletionIndex;
+							return (
+								<Text
+									key={index}
+									color={
+										isSelected
+											? colors.info
+											: completion.isCustom
+												? colors.info
+												: colors.primary
+									}
+									bold={isSelected}
+								>
+									{isSelected ? '▸ ' : '  '}/{completion.name}
+								</Text>
+							);
+						})}
+					</Box>
+				)}
+				{isFileAutocompleteMode && fileCompletions.length > 0 && (
+					<Box flexDirection="column" marginTop={1}>
+						<Text color={colors.secondary}>
+							File suggestions (↑/↓ to navigate, Tab to select):
+						</Text>
+						{fileCompletions.slice(0, 5).map((file, index) => (
+							<Text
+								key={index}
+								color={
+									index === selectedFileIndex ? colors.info : colors.primary
+								}
+								bold={index === selectedFileIndex}
+							>
+								{index === selectedFileIndex ? '▸ ' : '  '}
+								{file.path}
+							</Text>
+						))}
+					</Box>
+				)}
+			</Box>
 			{/* Development mode indicator - always visible */}
 			<DevelopmentModeIndicator
 				developmentMode={developmentMode}