fix issue with building for bun and npm (#87)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe-kit/grok-cli",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "description": "An open-source AI agent that brings the power of Grok directly into your terminal.",
   "type": "module",
   "main": "dist/index.js",

src/agent/grok-agent.ts

@@ -1,12 +1,12 @@
-import { GrokClient, GrokMessage, GrokToolCall } from "../grok/client";
+import { GrokClient, GrokMessage, GrokToolCall } from "../grok/client.js";
 import {
   GROK_TOOLS,
   addMCPToolsToGrokTools,
   getAllGrokTools,
   getMCPManager,
   initializeMCPServers,
-} from "../grok/tools";
-import { loadMCPConfig } from "../mcp/config";
+} from "../grok/tools.js";
+import { loadMCPConfig } from "../mcp/config.js";
 import {
   TextEditorTool,
   MorphEditorTool,
@@ -14,12 +14,12 @@ import {
   TodoTool,
   ConfirmationTool,
   SearchTool,
-} from "../tools";
-import { ToolResult } from "../types";
+} from "../tools/index.js";
+import { ToolResult } from "../types/index.js";
 import { EventEmitter } from "events";
-import { createTokenCounter, TokenCounter } from "../utils/token-counter";
-import { loadCustomInstructions } from "../utils/custom-instructions";
-import { getSettingsManager } from "../utils/settings-manager";
+import { createTokenCounter, TokenCounter } from "../utils/token-counter.js";
+import { loadCustomInstructions } from "../utils/custom-instructions.js";
+import { getSettingsManager } from "../utils/settings-manager.js";
 
 export interface ChatEntry {
   type: "user" | "assistant" | "tool_result" | "tool_call";

src/agent/index.ts

@@ -1,5 +1,5 @@
-import { TextEditorTool, BashTool } from '../tools';
-import { ToolResult, AgentState } from '../types';
+import { TextEditorTool, BashTool } from '../tools/index.js';
+import { ToolResult, AgentState } from '../types/index.js';
 
 export class Agent {
   private textEditor: TextEditorTool;

src/commands/mcp.ts

@@ -1,7 +1,7 @@
 import { Command } from 'commander';
-import { addMCPServer, removeMCPServer, loadMCPConfig, PREDEFINED_SERVERS } from '../mcp/config';
-import { getMCPManager } from '../grok/tools';
-import { MCPServerConfig } from '../mcp/client';
+import { addMCPServer, removeMCPServer, loadMCPConfig, PREDEFINED_SERVERS } from '../mcp/config.js';
+import { getMCPManager } from '../grok/tools.js';
+import { MCPServerConfig } from '../mcp/client.js';
 import chalk from 'chalk';
 
 export function createMCPCommand(): Command {

src/grok/tools.ts

@@ -1,6 +1,6 @@
-import { GrokTool } from "./client";
-import { MCPManager, MCPTool } from "../mcp/client";
-import { loadMCPConfig } from "../mcp/config";
+import { GrokTool } from "./client.js";
+import { MCPManager, MCPTool } from "../mcp/client.js";
+import { loadMCPConfig } from "../mcp/config.js";
 
 const BASE_GROK_TOOLS: GrokTool[] = [
   {

src/hooks/use-enhanced-input.ts

@@ -9,8 +9,8 @@ import {
   moveToLineEnd,
   moveToPreviousWord,
   moveToNextWord,
-} from "../utils/text-utils";
-import { useInputHistory } from "./use-input-history";
+} from "../utils/text-utils.js";
+import { useInputHistory } from "./use-input-history.js";
 
 export interface Key {
   name?: string;

src/hooks/use-input-handler.ts

@@ -1,11 +1,11 @@
 import { useState, useMemo, useEffect } from "react";
 import { useInput } from "ink";
-import { GrokAgent, ChatEntry } from "../agent/grok-agent";
-import { ConfirmationService } from "../utils/confirmation-service";
-import { useEnhancedInput, Key } from "./use-enhanced-input";
+import { GrokAgent, ChatEntry } from "../agent/grok-agent.js";
+import { ConfirmationService } from "../utils/confirmation-service.js";
+import { useEnhancedInput, Key } from "./use-enhanced-input.js";
 
-import { filterCommandSuggestions } from "../ui/components/command-suggestions";
-import { loadModelConfig, updateCurrentModel } from "../utils/model-config";
+import { filterCommandSuggestions } from "../ui/components/command-suggestions.js";
+import { loadModelConfig, updateCurrentModel } from "../utils/model-config.js";
 
 interface UseInputHandlerProps {
   agent: GrokAgent;

src/index.ts

@@ -4,11 +4,11 @@ import React from "react";
 import { render } from "ink";
 import { program } from "commander";
 import * as dotenv from "dotenv";
-import { GrokAgent } from "./agent/grok-agent";
-import ChatInterface from "./ui/components/chat-interface";
-import { getSettingsManager } from "./utils/settings-manager";
-import { ConfirmationService } from "./utils/confirmation-service";
-import { createMCPCommand } from "./commands/mcp";
+import { GrokAgent } from "./agent/grok-agent.js";
+import ChatInterface from "./ui/components/chat-interface.js";
+import { getSettingsManager } from "./utils/settings-manager.js";
+import { ConfirmationService } from "./utils/confirmation-service.js";
+import { createMCPCommand } from "./commands/mcp.js";
 import type { ChatCompletionMessageParam } from "openai/resources/chat";
 
 // Load environment variables

src/mcp/config.ts

@@ -1,5 +1,5 @@
-import { getSettingsManager } from "../utils/settings-manager";
-import { MCPServerConfig } from "./client";
+import { getSettingsManager } from "../utils/settings-manager.js";
+import { MCPServerConfig } from "./client.js";
 
 export interface MCPConfig {
   servers: MCPServerConfig[];

src/tools/bash.ts

@@ -1,7 +1,7 @@
 import { exec } from 'child_process';
 import { promisify } from 'util';
-import { ToolResult } from '../types';
-import { ConfirmationService } from '../utils/confirmation-service';
+import { ToolResult } from '../types/index.js';
+import { ConfirmationService } from '../utils/confirmation-service.js';
 
 const execAsync = promisify(exec);
 

src/tools/confirmation-tool.ts

@@ -1,5 +1,5 @@
-import { ToolResult } from '../types';
-import { ConfirmationService, ConfirmationOptions } from '../utils/confirmation-service';
+import { ToolResult } from '../types/index.js';
+import { ConfirmationService, ConfirmationOptions } from '../utils/confirmation-service.js';
 
 export interface ConfirmationRequest {
   operation: string;

src/tools/index.ts

@@ -1,6 +1,6 @@
-export { BashTool } from "./bash";
-export { TextEditorTool } from "./text-editor";
-export { MorphEditorTool } from "./morph-editor";
-export { TodoTool } from "./todo-tool";
-export { ConfirmationTool } from "./confirmation-tool";
-export { SearchTool } from "./search";
+export { BashTool } from "./bash.js";
+export { TextEditorTool } from "./text-editor.js";
+export { MorphEditorTool } from "./morph-editor.js";
+export { TodoTool } from "./todo-tool.js";
+export { ConfirmationTool } from "./confirmation-tool.js";
+export { SearchTool } from "./search.js";

src/tools/morph-editor.ts

@@ -1,8 +1,8 @@
 import * as fs from "fs-extra";
 import * as path from "path";
 import axios from "axios";
-import { ToolResult } from "../types";
-import { ConfirmationService } from "../utils/confirmation-service";
+import { ToolResult } from "../types/index.js";
+import { ConfirmationService } from "../utils/confirmation-service.js";
 
 export class MorphEditorTool {
   private confirmationService = ConfirmationService.getInstance();

src/tools/search.ts

@@ -1,6 +1,6 @@
 import { spawn } from "child_process";
-import { ToolResult } from "../types";
-import { ConfirmationService } from "../utils/confirmation-service";
+import { ToolResult } from "../types/index.js";
+import { ConfirmationService } from "../utils/confirmation-service.js";
 import * as fs from "fs-extra";
 import * as path from "path";
 

src/tools/text-editor.ts

@@ -1,7 +1,7 @@
 import * as fs from "fs-extra";
 import * as path from "path";
-import { ToolResult, EditorCommand } from "../types";
-import { ConfirmationService } from "../utils/confirmation-service";
+import { ToolResult, EditorCommand } from "../types/index.js";
+import { ConfirmationService } from "../utils/confirmation-service.js";
 
 export class TextEditorTool {
   private editHistory: EditorCommand[] = [];

src/tools/todo-tool.ts

@@ -1,4 +1,4 @@
-import { ToolResult } from '../types';
+import { ToolResult } from '../types/index.js';
 
 interface TodoItem {
   id: string;

src/ui/app.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { Box, Text, useInput } from 'ink';
-import { Agent } from '../agent';
-import { ToolResult } from '../types';
-import { ConfirmationService, ConfirmationOptions } from '../utils/confirmation-service';
-import ConfirmationDialog from './components/confirmation-dialog';
+import { Agent } from '../agent/index.js';
+import { ToolResult } from '../types/index.js';
+import { ConfirmationService, ConfirmationOptions } from '../utils/confirmation-service.js';
+import ConfirmationDialog from './components/confirmation-dialog.js';
 import chalk from 'chalk';
 
 interface Props {

src/ui/components/api-key-input.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Box, Text, useInput, useApp } from "ink";
-import { GrokAgent } from "../../agent/grok-agent";
-import { getSettingsManager } from "../../utils/settings-manager";
+import { GrokAgent } from "../../agent/grok-agent.js";
+import { getSettingsManager } from "../../utils/settings-manager.js";
 
 interface ApiKeyInputProps {
   onApiKeySet: (agent: GrokAgent) => void;

src/ui/components/chat-history.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { ChatEntry } from "../../agent/grok-agent";
-import { DiffRenderer } from "./diff-renderer";
-import { MarkdownRenderer } from "../utils/markdown-renderer";
+import { ChatEntry } from "../../agent/grok-agent.js";
+import { DiffRenderer } from "./diff-renderer.js";
+import { MarkdownRenderer } from "../utils/markdown-renderer.js";
 
 interface ChatHistoryProps {
   entries: ChatEntry[];

src/ui/components/chat-interface.tsx

@@ -1,19 +1,19 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Box, Text } from "ink";
-import { GrokAgent, ChatEntry } from "../../agent/grok-agent";
-import { useInputHandler } from "../../hooks/use-input-handler";
-import { LoadingSpinner } from "./loading-spinner";
-import { CommandSuggestions } from "./command-suggestions";
-import { ModelSelection } from "./model-selection";
-import { ChatHistory } from "./chat-history";
-import { ChatInput } from "./chat-input";
-import { MCPStatus } from "./mcp-status";
-import ConfirmationDialog from "./confirmation-dialog";
+import { GrokAgent, ChatEntry } from "../../agent/grok-agent.js";
+import { useInputHandler } from "../../hooks/use-input-handler.js";
+import { LoadingSpinner } from "./loading-spinner.js";
+import { CommandSuggestions } from "./command-suggestions.js";
+import { ModelSelection } from "./model-selection.js";
+import { ChatHistory } from "./chat-history.js";
+import { ChatInput } from "./chat-input.js";
+import { MCPStatus } from "./mcp-status.js";
+import ConfirmationDialog from "./confirmation-dialog.js";
 import {
   ConfirmationService,
   ConfirmationOptions,
-} from "../../utils/confirmation-service";
-import ApiKeyInput from "./api-key-input";
+} from "../../utils/confirmation-service.js";
+import ApiKeyInput from "./api-key-input.js";
 import cfonts from "cfonts";
 
 interface ChatInterfaceProps {

src/ui/components/confirmation-dialog.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Box, Text, useInput } from "ink";
-import { DiffRenderer } from "./diff-renderer";
+import { DiffRenderer } from "./diff-renderer.js";
 
 interface ConfirmationDialogProps {
   operation: string;

src/ui/components/diff-renderer.tsx

@@ -4,10 +4,10 @@
 
 import React from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../utils/colors';
+import { Colors } from '../utils/colors.js';
 import crypto from 'crypto';
-import { colorizeCode } from '../utils/code-colorizer';
-import { MaxSizedBox } from '../shared/max-sized-box';
+import { colorizeCode } from '../utils/code-colorizer.js';
+import { MaxSizedBox } from '../shared/max-sized-box.js';
 
 interface DiffLine {
   type: 'add' | 'del' | 'context' | 'hunk' | 'other';

src/ui/components/loading-spinner.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Box, Text } from "ink";
-import { formatTokenCount } from "../../utils/token-counter";
+import { formatTokenCount } from "../../utils/token-counter.js";
 
 interface LoadingSpinnerProps {
   isActive: boolean;

src/ui/components/mcp-status.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Box, Text } from "ink";
-import { getMCPManager } from "../../grok/tools";
-import { MCPTool } from "../../mcp/client";
+import { getMCPManager } from "../../grok/tools.js";
+import { MCPTool } from "../../mcp/client.js";
 
 interface MCPStatusProps {}
 

src/utils/model-config.ts

@@ -1,4 +1,4 @@
-import { getSettingsManager, UserSettings, ProjectSettings } from './settings-manager';
+import { getSettingsManager, UserSettings, ProjectSettings } from './settings-manager.js';
 
 export interface ModelOption {
   model: string;

src/utils/settings.ts

@@ -1,4 +1,4 @@
 // This file is kept for potential future convenience functions
-// All settings management should use getSettingsManager() from './settings-manager'
+// All settings management should use getSettingsManager() from './settings-manager.js'
 
-export { getSettingsManager, UserSettings, ProjectSettings } from './settings-manager';
+export { getSettingsManager, UserSettings, ProjectSettings } from './settings-manager.js';