@kirosnn/mosaic 0.0.7

package/MOSAIC.md

@@ -0,0 +1,188 @@
+# MOSAIC.md - Mosaic CLI Context File
+
+This file provides contextual information about the Mosaic CLI project to help AI agents understand the codebase structure, patterns, and conventions.
+
+## Project Overview
+
+**Mosaic CLI** is an open-source AI-powered coding agent built with Bun and React. It provides a terminal-based interface using OpenTUI to render React components directly in the terminal, offering seamless interaction with AI coding assistants.
+
+**Key Features:**
+- Multi-provider AI support (OpenAI, Anthropic, Google, Mistral, XAI, Ollama)
+- Terminal-first UI with React components rendered via OpenTUI
+- Web interface option on http://127.0.0.1:8192
+- Built-in tools for file operations, code search, and terminal commands
+- Slash commands for quick operations
+- Workspace context via MOSAIC.md files
+
+## Architecture
+
+### Core Architecture Patterns
+
+1. **Modular Design**: The codebase is organized into clear modules:
+   - `src/agent/` - AI agent core logic and tools
+   - `src/components/` - React UI components
+   - `src/utils/` - Utility functions and helpers
+   - `src/web/` - Web interface components
+
+2. **Tool-Based System**: The AI agent uses a tool-based approach where each capability is implemented as a separate tool (read, write, edit, bash, grep, etc.)
+
+3. **Provider Abstraction**: AI providers are abstracted behind a common interface, allowing easy switching between different AI models
+
+4. **Event-Driven UI**: The terminal interface uses React with OpenTUI for rendering, creating a responsive terminal experience
+
+### Key Design Decisions
+
+- **Bun Runtime**: Uses Bun for fast execution and modern JavaScript features
+- **TypeScript**: Entire codebase is written in TypeScript for type safety
+- **Functional Components**: React components use functional style with hooks
+- **Tool Registry**: Tools are registered and managed through a central registry system
+- **Context Management**: MOSAIC.md files provide project-specific context to AI agents
+
+## Development Guidelines
+
+### Coding Standards
+
+- **TypeScript**: All code must be TypeScript with strict type checking
+- **React Functional Components**: Use functional components with hooks
+- **File Organization**: Group related files in subdirectories (e.g., agent tools, web components)
+- **Error Handling**: Comprehensive error handling with user-friendly messages
+- **Async/Await**: Use async/await for asynchronous operations
+
+### Naming Conventions
+
+- **Files**: PascalCase for components (App.tsx), camelCase for utilities (config.ts)
+- **Variables**: camelCase for variables and functions
+- **Constants**: UPPER_CASE for constants
+- **Types/Interfaces**: PascalCase for type names
+- **Components**: PascalCase component names (e.g., `<App />`)
+
+### Best Practices
+
+- **Tool Development**: New tools should follow the existing pattern in `src/agent/tools/`
+- **Provider Integration**: New AI providers should implement the standard interface
+- **Error Filtering**: Filter out common React/terminal errors in stderr/stdout
+- **Configuration**: Use the config system for persistent settings
+- **Undo/Redo**: Implement undo/redo functionality for file operations
+
+## Key Files & Directories
+
+### Root Files
+
+- `package.json` - Project configuration and dependencies
+- `tsconfig.json` - TypeScript configuration
+- `README.md` - User documentation
+- `MOSAIC.md` - This context file for AI agents
+
+### Source Structure
+
+#### `src/`
+- **index.tsx** - Main entry point and CLI parser
+- **components/` - React UI components for terminal interface
+- **agent/` - AI agent core functionality
+- **utils/` - Utility functions and helpers
+- **web/` - Web interface components and server
+
+#### `src/agent/`
+- **Agent.ts** - Main agent class
+- **context.ts** - Context management
+- **types.ts** - Type definitions
+- **prompts/` - Prompt templates
+- **provider/` - AI provider implementations
+- **tools/` - Tool implementations (file operations, bash, etc.)
+
+#### `src/components/`
+- **App.tsx** - Main application component
+- **Main.tsx** - Main UI container
+- **CustomInput.tsx** - Custom input component
+- **main/` - Main page components (ChatPage, HomePage, etc.)
+
+#### `src/utils/`
+- **config.ts** - Configuration management
+- **history.ts** - Chat history
+- **undoRedo.ts** - Undo/redo functionality
+- **commands/` - Slash command implementations
+
+#### `src/web/`
+- **app.tsx** - Web application entry point
+- **server.tsx** - Web server implementation
+- **components/` - Web UI components
+- **assets/` - Static assets (CSS, fonts, images)
+
+## Common Tasks
+
+### Adding a New Tool
+
+1. Create a new file in `src/agent/tools/` following the existing pattern
+2. Implement the tool function with proper TypeScript types
+3. Register the tool in the tool registry
+4. Add appropriate error handling and validation
+
+### Adding a New AI Provider
+
+1. Create a new provider file in `src/agent/provider/`
+2. Implement the standard provider interface
+3. Add provider-specific configuration options
+4. Update the provider selection logic
+
+### Creating a New Slash Command
+
+1. Create a new command file in `src/utils/commands/`
+2. Implement the command handler function
+3. Register the command in the command registry
+4. Add command documentation
+
+### Building the Web Interface
+
+1. Develop components in `src/web/components/`
+2. Add styles in `src/web/assets/css/`
+3. Update the web app entry point in `src/web/app.tsx`
+4. Ensure the server handles new routes in `src/web/server.tsx`
+
+### Running the Project
+
+```bash
+# Development mode with auto-reload
+bun run dev
+
+# Production mode
+bun run start
+
+# Web interface
+mosaic web
+```
+
+### Testing Tools
+
+The project includes various tools that can be tested:
+- File operations (read, write, edit)
+- Directory listing and filtering
+- Code search with grep
+- Terminal command execution
+- User interaction via questions
+
+## Technical Stack
+
+- **Runtime**: Bun
+- **Language**: TypeScript
+- **UI Framework**: React with OpenTUI
+- **AI Integration**: Vercel AI SDK
+- **Database**: Better SQLite 3
+- **Build System**: Bun
+
+## AI Provider Support
+
+Mosaic supports multiple AI providers:
+- OpenAI (GPT models)
+- Anthropic (Claude models)
+- Google (Gemini models)
+- Mistral (Mistral/Mixtral models)
+- XAI (Grok models)
+- Ollama (local/cloud models)
+
+## Important Notes
+
+- The project uses a custom error filtering system to suppress common React/terminal errors
+- Configuration is stored in `~/.mosaic/` directory
+- MOSAIC.md files are automatically created/updated in project directories
+- The system includes comprehensive undo/redo functionality for file operations
+- Web interface runs on port 8192 by default

package/README.md

@@ -0,0 +1,127 @@
+<p align="center">
+  <img src="docs/mosaic.png" width="200" />
+</p>
+
+# Mosaic CLI
+
+**Version 0.0.6.03**
+
+Mosaic is an open-source, AI-powered coding agent for the terminal. It combines a React-based TUI (OpenTUI) with a tool-driven agent architecture to deliver a fast, context-aware development workflow. A web UI is also available for those who prefer a browser experience.
+
+## Highlights
+
+- Multi-provider AI support (OpenAI, Anthropic, Google, Mistral, xAI, Ollama)
+- Terminal-first UI powered by React + OpenTUI
+- Optional web interface on http://127.0.0.1:8192
+- Built-in tools for file operations, search, and shell commands
+- Slash commands for quick actions
+- Project context via `MOSAIC.md` files
+
+## Requirements
+
+- [Bun](https://bun.sh)
+
+## Installation (from source)
+
+```bash
+git clone https://github.com/kirosnn/mosaic.git
+cd mosaic
+bun install
+bun link
+```
+
+After linking, run Mosaic from any directory:
+
+```bash
+mosaic
+```
+
+If you prefer not to link globally:
+
+```bash
+bun run mosaic
+```
+
+## Quick Start
+
+1. Run `mosaic` in a project directory.
+2. On first run, Mosaic creates `~/.mosaic/` and guides you through provider setup.
+3. Initialize project context with:
+
+```bash
+/init
+```
+
+This creates:
+- `MOSAIC.md` with project context and conventions
+- `.mosaic/` for project-specific settings
+
+## CLI Usage
+
+```bash
+mosaic                       # Start in current directory
+mosaic ./my-project          # Start in a specific directory
+mosaic run "fix the bug"     # Launch with a task
+mosaic --help                # Show help
+```
+
+## Web Interface
+
+```bash
+mosaic web
+```
+
+Open http://127.0.0.1:8192 in your browser.
+
+## Configuration
+
+Mosaic stores global settings in `~/.mosaic/`:
+- `mosaic.jsonc` includes first-run status and version metadata
+
+Project-specific settings live in `.mosaic/` at the repository root.
+
+## Project Structure
+
+- `src/index.tsx` - CLI entry point and routing
+- `src/agent/` - Agent core, tools, and providers
+- `src/components/` - TUI components
+- `src/web/` - Web UI and server
+- `src/utils/` - Helpers, config, and commands
+
+## How It Works
+
+Mosaic relies on a tool registry that exposes safe, focused capabilities to the agent:
+
+- File operations (read, write, edit)
+- Directory listing and navigation
+- Code search with regex
+- Terminal command execution
+- Interactive questions for clarification
+
+The `MOSAIC.md` file helps the agent adapt to each repository by describing conventions and structure.
+
+## AI Providers
+
+Mosaic uses the Vercel AI SDK and currently supports:
+
+- OpenAI (GPT family)
+- Anthropic (Claude family)
+- Google (Gemini family)
+- Mistral (Mistral, Mixtral)
+- xAI (Grok family)
+- Ollama (local or cloud models)
+
+## Development
+
+```bash
+bun run dev              # Watch mode
+bun run start            # Normal run
+```
+
+## Contributing
+
+Issues and pull requests are welcome. Please include clear reproduction steps and context for behavior changes.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@kirosnn/mosaic",
+  "module": "src/index.tsx",
+  "version": "0.0.7",
+  "description": "The open source coding agent.",
+  "type": "module",
+  "bin": {
+    "mosaic": "src/index.tsx"
+  },
+  "scripts": {
+    "dev": "bun run --watch src/index.tsx",
+    "mosaic": "bun run src/index.tsx",
+    "start": "bun run src/index.tsx"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.2.3"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@ai-sdk/anthropic": "^1.0.0",
+    "@ai-sdk/google": "^1.0.0",
+    "@ai-sdk/mistral": "^1.0.0",
+    "@ai-sdk/openai": "^1.0.0",
+    "@ai-sdk/xai": "^1.0.0",
+    "@opentui/core": "^0.1.69",
+    "@opentui/react": "^0.1.69",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "ai": "^4.0.0",
+    "better-sqlite3": "^12.6.0",
+    "ollama": "^0.5.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "remark-gfm": "^4.0.1",
+    "zod": "^3.23.8"
+  }
+}

package/src/agent/Agent.ts

@@ -0,0 +1,131 @@
+import { CoreMessage, CoreTool } from 'ai';
+import {
+  AgentEvent,
+  AgentMessage,
+  ProviderConfig,
+  Provider,
+  ProviderSendOptions,
+} from './types';
+import { readConfig } from '../utils/config';
+import { DEFAULT_SYSTEM_PROMPT, processSystemPrompt } from './prompts/systemPrompt';
+import { getTools } from './tools/definitions';
+import { AnthropicProvider } from './provider/anthropic';
+import { OpenAIProvider } from './provider/openai';
+import { GoogleProvider } from './provider/google';
+import { MistralProvider } from './provider/mistral';
+import { XaiProvider } from './provider/xai';
+import { OllamaProvider, checkAndStartOllama } from './provider/ollama';
+
+export class Agent {
+  private messageHistory: CoreMessage[] = [];
+  private provider: Provider;
+  private config: ProviderConfig;
+  private static ollamaChecked = false;
+
+  static async ensureProviderReady(): Promise<{ ready: boolean; started?: boolean; error?: string }> {
+    const userConfig = readConfig();
+
+    if (userConfig.provider === 'ollama') {
+      if (Agent.ollamaChecked) {
+        return { ready: true };
+      }
+
+      const result = await checkAndStartOllama();
+      Agent.ollamaChecked = true;
+
+      if (!result.running) {
+        return { ready: false, error: result.error };
+      }
+
+      return { ready: true, started: result.started };
+    }
+
+    return { ready: true };
+  }
+
+  constructor() {
+    const userConfig = readConfig();
+
+    if (!userConfig.provider || !userConfig.model) {
+      throw new Error('No provider or model configured. Please run setup first.');
+    }
+
+    const rawSystemPrompt = userConfig.systemPrompt || DEFAULT_SYSTEM_PROMPT;
+    const systemPrompt = processSystemPrompt(rawSystemPrompt, true);
+    const tools = getTools();
+
+    this.config = {
+      provider: userConfig.provider,
+      model: userConfig.model,
+      apiKey: userConfig.apiKey,
+      systemPrompt,
+      tools,
+      maxSteps: 60,
+    };
+
+    this.provider = this.createProvider(userConfig.provider);
+  }
+
+  private createProvider(providerName: string): Provider {
+    switch (providerName) {
+      case 'openai':
+        return new OpenAIProvider();
+      case 'anthropic':
+        return new AnthropicProvider();
+      case 'google':
+        return new GoogleProvider();
+      case 'mistral':
+        return new MistralProvider();
+      case 'xai':
+        return new XaiProvider();
+      case 'ollama':
+        return new OllamaProvider();
+      default:
+        throw new Error(`Unknown provider: ${providerName}`);
+    }
+  }
+
+  async *sendMessage(userMessage: string, options?: ProviderSendOptions): AsyncGenerator<AgentEvent> {
+    this.messageHistory.push({
+      role: 'user',
+      content: userMessage,
+    });
+
+    try {
+      yield* this.provider.sendMessage(this.messageHistory, this.config, options);
+    } catch (error) {
+      yield {
+        type: 'error',
+        error: error instanceof Error ? error.message : 'Unknown error occurred',
+      };
+    }
+  }
+
+  async *streamMessages(messages: AgentMessage[], options?: ProviderSendOptions): AsyncGenerator<AgentEvent> {
+    this.messageHistory = messages.map(msg => ({
+      role: msg.role,
+      content: msg.content,
+    }));
+
+    try {
+      yield* this.provider.sendMessage(this.messageHistory, this.config, options);
+    } catch (error) {
+      yield {
+        type: 'error',
+        error: error instanceof Error ? error.message : 'Unknown error occurred',
+      };
+    }
+  }
+
+  getHistory(): CoreMessage[] {
+    return [...this.messageHistory];
+  }
+
+  clearHistory(): void {
+    this.messageHistory = [];
+  }
+
+  updateConfig(updates: Partial<ProviderConfig>): void {
+    this.config = { ...this.config, ...updates };
+  }
+}

package/src/agent/context.ts

@@ -0,0 +1,96 @@
+import { CoreMessage, CoreTool } from 'ai';
+import { AgentConfig, AgentContext } from './types';
+
+export class AgentContextManager {
+  private messages: CoreMessage[] = [];
+  private systemPrompt: string;
+  private tools: Record<string, CoreTool>;
+  private config: AgentConfig;
+  private currentStep: number = 0;
+
+  constructor(
+    systemPrompt: string,
+    tools: Record<string, CoreTool>,
+    config: AgentConfig,
+    initialMessages: CoreMessage[] = []
+  ) {
+    this.systemPrompt = systemPrompt;
+    this.tools = tools;
+    this.config = config;
+    this.messages = [...initialMessages];
+  }
+
+  addMessage(message: CoreMessage): void {
+    this.messages.push(message);
+  }
+
+  addUserMessage(content: string): void {
+    this.messages.push({
+      role: 'user',
+      content,
+    });
+  }
+
+  addAssistantMessage(content: string): void {
+    this.messages.push({
+      role: 'assistant',
+      content,
+    });
+  }
+
+  addToolResult(toolCallId: string, toolName: string, result: unknown): void {
+    this.messages.push({
+      role: 'tool',
+      content: [
+        {
+          type: 'tool-result',
+          toolCallId,
+          toolName,
+          result,
+        },
+      ],
+    });
+  }
+
+  getMessages(): CoreMessage[] {
+    return [...this.messages];
+  }
+
+  getContext(): AgentContext {
+    return {
+      messages: this.getMessages(),
+      systemPrompt: this.systemPrompt,
+      tools: this.tools,
+      config: this.config,
+    };
+  }
+
+  incrementStep(): void {
+    this.currentStep++;
+  }
+
+  getCurrentStep(): number {
+    return this.currentStep;
+  }
+
+  getMaxSteps(): number {
+    return this.config.maxSteps || 10;
+  }
+
+  canContinue(): boolean {
+    return this.currentStep < this.getMaxSteps();
+  }
+
+  reset(): void {
+    this.messages = [];
+    this.currentStep = 0;
+  }
+
+  getLastMessage(): CoreMessage | undefined {
+    return this.messages[this.messages.length - 1];
+  }
+
+  getMessageCount(): number {
+    return this.messages.length;
+  }
+}

package/src/agent/index.ts

@@ -0,0 +1,2 @@
+export { Agent } from './Agent';
+export type { AgentMessage, AgentEvent, AgentEventType } from './types';