Merge pull request #3 from ivanleomk/feat/add-grep-glob

Adding Agentic Search

Author: ivanleomk

agent.ts

@@ -9,15 +9,20 @@
 	},
 	"scripts": {
 		"build": "tsc",
+		"release": "tsc --outDir stable",
 		"dev": "tsc --watch",
 		"test": "prettier --check . && xo && ava",
-		"start": "tsc && node ./dist/cli.js"
+		"start": "bun run ./source/cli.tsx"
 	},
 	"files": [
 		"dist"
 	],
 	"dependencies": {
 		"@anthropic-ai/sdk": "^0.56.0",
+		"@ast-grep/cli": "^0.39.6",
+		"exa-js": "^1.10.2",
+		"execa": "^9.6.0",
+		"globby": "^13.0.0",
 		"ink": "^4.1.0",
 		"ink-text-input": "^6.0.0",
 		"meow": "^11.0.0",
@@ -27,6 +32,7 @@
 	},
 	"devDependencies": {
 		"@sindresorhus/tsconfig": "^3.0.1",
+		"@types/bun": "^1.3.0",
 		"@types/react": "^18.0.32",
 		"@vdemedes/prettier-config": "^2.0.1",
 		"ava": "^5.2.0",

bun.lockb

@@ -1,8 +1,10 @@
 import React, {useState, useMemo} from 'react';
 import {Text, Box, useInput, useApp} from 'ink';
-import TextInput from 'ink-text-input';
+
 import {useAgent} from './hooks/useAgent.js';
 import Message from './components/Message.js';
+import Autocomplete from './components/Autocomplete.js';
+import TextInput from './components/TextInput.js';
 // import {XAIProvider} from './provider/xai.js';
 // import {AnthropicProvider} from './provider/anthropic.js';
 import {XAIProvider} from './provider/xai.js';
@@ -26,9 +28,13 @@ export default function App() {
 
 	const {conversation, complete} = useAgent(provider);
 	const [input, setInput] = useState('');
+	const [cursorOffset, setCursorOffset] = useState(0);
 	const [showShutdown, setShowShutdown] = useState(false);
 	const {exit} = useApp();
 
+	const lastTerm = input.split(' ').at(-1) || '';
+	const showAutocomplete = lastTerm.includes('@');
+
 	const sendMessage = async () => {
 		if (input.trim().length === 0) {
 			return;
@@ -55,13 +61,45 @@ export default function App() {
 				))}
 				{conversation.length > 0 && <Box flexGrow={1} />}
 			</Box>
-			<Box width="100%">
-				<Text color="blue">$ </Text>
-				<TextInput
-					value={input}
-					onChange={setInput}
-					placeholder="Type a command..."
-				/>
+			<Box>
+				{showAutocomplete ? (
+					<Autocomplete
+						searchTerm={lastTerm}
+						updateUserInput={newTerm => {
+							const prevParts = input.split(/\s+/);
+							prevParts[prevParts.length - 1] = newTerm;
+							const newInput = prevParts.join(' ') + ' ';
+							setInput(newInput);
+							setCursorOffset(newInput.length);
+						}}
+					/>
+				) : null}
+			</Box>
+			<Box
+				flexDirection="column"
+				width="100%"
+				borderStyle="round"
+				borderColor="gray"
+				paddingX={1}
+				paddingTop={0.5}
+				paddingBottom={1}
+			>
+				<Box flexDirection="column">
+					<Box paddingBottom={0.5}>
+						<Text color="green">Current Directory: </Text>
+						<Text color="cyan">{process.cwd()}</Text>
+					</Box>
+					<Box>
+						<Text color="green">&gt; </Text>
+						<TextInput
+							value={input}
+							onChange={setInput}
+							cursorOffset={cursorOffset}
+							onCursorOffsetChange={setCursorOffset}
+							placeholder="Type a command..."
+						/>
+					</Box>
+				</Box>
 			</Box>
 			{showShutdown && (
 				<Box>

package.json

@@ -0,0 +1,67 @@
+import React, {useState} from 'react';
+import {Text, Box, useInput} from 'ink';
+import {execSync} from 'child_process';
+
+interface AutocompleteProps {
+	searchTerm: string;
+	updateUserInput: (newInput: string) => void;
+}
+
+const generateSuggestions = (input: string): string[] => {
+	const lastWord = input.split(' ').at(-1);
+	if (!lastWord?.includes('@')) {
+		return [];
+	}
+
+	const searchTerm = lastWord.split('@')[1] || '';
+	if (!searchTerm) {
+		return [];
+	}
+
+	try {
+		const result = execSync(`rg --files | rg -i "${searchTerm}"`, {
+			encoding: 'utf-8',
+			cwd: process.cwd(),
+			stdio: ['pipe', 'pipe', 'ignore'],
+		});
+		return result.trim().split('\n').filter(Boolean).slice(0, 5);
+	} catch (error) {
+		return [];
+	}
+};
+
+export default function Autocomplete({
+	searchTerm,
+	updateUserInput,
+}: AutocompleteProps) {
+	const suggestions = generateSuggestions(searchTerm);
+	const [selectedIndex, setSelectedIndex] = useState(0);
+
+	useInput((_, key) => {
+		if (key.upArrow) {
+			setSelectedIndex(prev => (prev > 0 ? prev - 1 : suggestions.length - 1));
+		}
+		if (key.downArrow) {
+			setSelectedIndex(prev => (prev < suggestions.length - 1 ? prev + 1 : 0));
+		}
+		if ((key.tab || key.return) && suggestions[selectedIndex]) {
+			const inputParts = searchTerm.split(' ');
+			inputParts[inputParts.length - 1] = `@${suggestions[selectedIndex]}`;
+			updateUserInput(inputParts.join(' '));
+		}
+	});
+
+	return (
+		<Box flexDirection="column" borderStyle="round" borderColor="cyan">
+			{suggestions.map((suggestion, index) => {
+				const isSelected = index === selectedIndex;
+				return (
+					<Box key={index}>
+						<Text>{isSelected ? '> ' : '  '}</Text>
+						<Text bold={isSelected}>{suggestion}</Text>
+					</Box>
+				);
+			})}
+		</Box>
+	);
+}

source/app.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {Box, Text} from 'ink';
+import type {Tool} from '../lib/types.js';
+
+interface BashDisplayProps {
+	toolCall: Tool & {name: 'bash'};
+}
+
+export default function BashDisplay({toolCall}: BashDisplayProps) {
+	const textOutputs = toolCall.output.filter(item => item.type === 'text');
+	const args = toolCall.args as {
+		command: string;
+		cwd?: string;
+	};
+
+	return (
+		<Box flexDirection="column" marginLeft={2} gap={1}>
+			{textOutputs.map((output, index) => {
+				if (output.type !== 'text') return null;
+
+				const lines = output.text
+					.split('\n')
+					.map(line => line.trimEnd());
+
+				return (
+					<Box key={index} flexDirection="column">
+						<Box
+							borderStyle="round"
+							borderColor="green"
+							padding={1}
+							flexDirection="column"
+						>
+							<Text color="green">$ {args.command}</Text>
+							{args.cwd && <Text color="gray" dimColor>cwd: {args.cwd}</Text>}
+							<Text>{'\n'}</Text>
+							<Text color="white">{lines.join('\n')}</Text>
+						</Box>
+					</Box>
+				);
+			})}
+		</Box>
+	);
+}

source/components/Autocomplete.tsx

@@ -1,14 +1,52 @@
 import React from 'react';
 import {Box, Text} from 'ink';
+import {highlight} from 'cli-highlight';
 import type {Tool} from '../lib/types.js';
 
+const languageMap: Record<string, string> = {
+	'.ts': 'typescript',
+	'.tsx': 'typescript',
+	'.js': 'javascript',
+	'.jsx': 'javascript',
+	'.py': 'python',
+	'.rb': 'ruby',
+	'.java': 'java',
+	'.cpp': 'cpp',
+	'.c': 'c',
+	'.php': 'php',
+	'.go': 'go',
+	'.rs': 'rust',
+	'.sh': 'bash',
+	'.json': 'json',
+	'.xml': 'xml',
+	'.html': 'html',
+	'.css': 'css',
+	'.sql': 'sql',
+	'.md': 'markdown',
+	'.yaml': 'yaml',
+	'.yml': 'yaml',
+};
+
+function getLanguageFromPath(filePath: string): string | undefined {
+	const ext = filePath.substring(filePath.lastIndexOf('.'));
+	return languageMap[ext];
+}
+
 interface CreateFileDisplayProps {
 	toolCall: Tool & {name: 'create_file'};
 }
 
 export default function CreateFileDisplay({toolCall}: CreateFileDisplayProps) {
 	const args = toolCall.args as {filePath: string; content: string};
-	const lines = args.content.split('\n');
+	const processedContent = args.content
+		.split('\n')
+		.map(line => line.replace(/\t/g, ' ').trimEnd())
+		.join('\n');
+	const language = getLanguageFromPath(args.filePath);
+	const highlightedContent = language
+		? highlight(processedContent, {language, ignoreIllegals: true})
+		: processedContent;
+	const lines = highlightedContent.split('\n');
 	const maxLines = 25;
 	const displayLines = lines.slice(0, maxLines);
 	const hasMore = lines.length > maxLines;
@@ -24,6 +62,7 @@ export default function CreateFileDisplay({toolCall}: CreateFileDisplayProps) {
 			>
 				<Text color="gray">create_file </Text>
 				<Text color="white">[{args.filePath}]</Text>
+				{language && <Text color="cyan"> ({language})</Text>}
 			</Box>
 			<Box
 				borderStyle="round"

source/components/BashDisplay.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {Box, Text} from 'ink';
+import type {Tool} from '../lib/types.js';
+
+interface GlobDisplayProps {
+	toolCall: Tool & {name: 'glob'};
+}
+
+export default function GlobDisplay({toolCall}: GlobDisplayProps) {
+	const textOutput = toolCall.output.find(item => item.type === 'text');
+	const args = toolCall.args as {
+		pattern: string;
+		directory: string;
+		limit?: number;
+		offset?: number;
+	};
+
+	if (!textOutput || textOutput.type !== 'text') {
+		return null;
+	}
+
+	const lines = textOutput.text.split('\n').filter(Boolean);
+	const maxLines = 25;
+	const displayLines = lines.slice(0, maxLines);
+	const hasMore = lines.length > maxLines;
+
+	return (
+		<Box flexDirection="column" marginY={0} width="90%" alignSelf="center">
+			<Box
+				borderStyle="round"
+				borderColor="gray"
+				borderBottom={false}
+				paddingLeft={1}
+				paddingRight={1}
+			>
+				<Text color="gray">glob </Text>
+				<Text color="white">
+					{' '}
+					[{args.pattern}] in [{args.directory}]
+				</Text>
+			</Box>
+			<Box
+				borderStyle="round"
+				borderColor="gray"
+				borderTop={false}
+				padding={1}
+				flexDirection="column"
+			>
+				<Text color="white" wrap="wrap">
+					{displayLines.join('\n')}
+				</Text>
+				{hasMore && (
+					<Text color="dim">... found a total of ({lines.length}) files</Text>
+				)}
+			</Box>
+		</Box>
+	);
+}