@kirosnn/mosaic 0.0.7

package/src/components/main/QuestionPanel.tsx

@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react';
+import { TextAttributes } from '@opentui/core';
+import { useKeyboard } from '@opentui/react';
+import { CustomInput } from '../CustomInput';
+import type { QuestionRequest } from '../../utils/questionBridge';
+
+interface QuestionPanelProps {
+  request: QuestionRequest;
+  disabled?: boolean;
+  onAnswer: (index: number, customText?: string) => void;
+}
+
+export function QuestionPanel({ request, disabled = false, onAnswer }: QuestionPanelProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [request.id]);
+
+  useKeyboard((key) => {
+    if (disabled) return;
+
+    if (key.name === 'up' || key.name === 'k') {
+      setSelectedIndex(prev => (prev === 0 ? request.options.length - 1 : prev - 1));
+      return;
+    }
+
+    if (key.name === 'down' || key.name === 'j') {
+      setSelectedIndex(prev => (prev === request.options.length - 1 ? 0 : prev + 1));
+      return;
+    }
+
+    if (key.name === 'return') {
+      onAnswer(selectedIndex);
+      return;
+    }
+
+    if (key.name && /^[1-9]$/.test(key.name)) {
+      const idx = Number(key.name) - 1;
+      if (idx >= 0 && idx < request.options.length) {
+        onAnswer(idx);
+      }
+    }
+  });
+
+  const handleCustomSubmit = (text: string) => {
+    if (!text || !text.trim()) {
+      return;
+    }
+    onAnswer(0, text);
+  };
+
+  return (
+    <box flexDirection="column" width="100%" backgroundColor="#1a1a1a" paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
+      <box flexDirection="row" marginBottom={1}>
+        <text fg="#ffca38" attributes={TextAttributes.BOLD}>Question</text>
+      </box>
+
+      <box flexDirection="column" marginBottom={1}>
+        {request.prompt.split('\n').map((line, index) => (
+          <text key={`prompt-line-${index}`} attributes={TextAttributes.BOLD}>{line || ' '}</text>
+        ))}
+      </box>
+
+      <box flexDirection="column" marginBottom={1}>
+        {request.options.map((option, index) => {
+          const selected = index === selectedIndex;
+          const prefix = selected ? '> ' : '  ';
+          const number = index <= 8 ? `${index + 1}. ` : '   ';
+          return (
+            <box key={`${request.id}-${index}`} flexDirection="row" backgroundColor={selected ? '#2a2a2a' : 'transparent'} paddingLeft={1} paddingRight={1}>
+              <text fg={selected ? '#ffca38' : 'white'} attributes={selected ? TextAttributes.BOLD : TextAttributes.NONE}>
+                {prefix}{number}{option.label}
+              </text>
+            </box>
+          );
+        })}
+      </box>
+
+      <box flexDirection="row">
+        <CustomInput onSubmit={handleCustomSubmit} placeholder="Tell Mosaic what it should do and press Enter" focused={!disabled} disableHistory={true} />
+      </box>
+    </box>
+  );
+}

package/src/components/main/ThinkingIndicator.tsx

@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from "react";
+import { TextAttributes } from "@opentui/core";
+import { THINKING_WORDS } from "./types";
+
+interface ThinkingIndicatorProps {
+    isProcessing: boolean;
+    hasQuestion: boolean;
+    startTime?: number | null;
+    tokens?: number;
+}
+
+export function getInputBarBaseLines(): number {
+    return 3;
+}
+
+export function getInputAreaTotalLines(): number {
+    return getInputBarBaseLines() + 1;
+}
+
+export function shouldShowThinkingIndicator({ isProcessing, hasQuestion }: ThinkingIndicatorProps): boolean {
+    return isProcessing && !hasQuestion;
+}
+
+export function getBottomReservedLinesForInputBar(props: ThinkingIndicatorProps): number {
+    return getInputBarBaseLines() + (shouldShowThinkingIndicator(props) ? 2 : 0) + 2;
+}
+
+export function formatElapsedTime(ms: number | null | undefined, fromStartTime: boolean = true): string {
+    if (!ms) return "";
+    const elapsed = fromStartTime ? Math.floor((Date.now() - ms) / 1000) : Math.floor(ms / 1000);
+    const hours = Math.floor(elapsed / 3600);
+    const minutes = Math.floor((elapsed % 3600) / 60);
+    const seconds = elapsed % 60;
+    if (hours > 0) {
+        return `${hours}h ${minutes}m ${seconds}s`;
+    }
+    if (minutes > 0) {
+        return `${minutes}m ${seconds}s`;
+    }
+    return `${seconds}s`;
+}
+
+export function ThinkingIndicator(props: ThinkingIndicatorProps) {
+    const [shimmerPos, setShimmerPos] = useState(-2);
+    const [, setTick] = useState(0);
+    const [thinkingWord] = useState(() => THINKING_WORDS[Math.floor(Math.random() * THINKING_WORDS.length)]);
+    const text = `${thinkingWord}...`;
+
+    useEffect(() => {
+        if (!shouldShowThinkingIndicator(props)) {
+            return;
+        }
+
+        const interval = setInterval(() => {
+            setShimmerPos((prev) => {
+                const limit = text.length + 20;
+                return prev >= limit ? -2 : prev + 1;
+            });
+            setTick((prev) => prev + 1);
+        }, 50);
+
+        return () => clearInterval(interval);
+    }, [props, text.length]);
+
+    if (!shouldShowThinkingIndicator(props)) return null;
+
+    const elapsedStr = formatElapsedTime(props.startTime, true);
+
+    return (
+        <box flexDirection="row" width="100%">
+            <text fg="#ffca38" attributes={TextAttributes.BOLD}>⁘ </text>
+            {text.split("").map((char, index) => {
+                const inShimmer = index === shimmerPos || index === shimmerPos - 1;
+                return (
+                    <text
+                        key={index}
+                        attributes={inShimmer ? TextAttributes.BOLD : TextAttributes.DIM}
+                    >
+                        {char}
+                    </text>
+                );
+            })}
+            {elapsedStr && <text attributes={TextAttributes.DIM}> — {elapsedStr}</text>}
+            <text attributes={TextAttributes.DIM}> — esc to cancel</text>
+            {props.tokens !== undefined && props.tokens > 0 && <text attributes={TextAttributes.DIM}> — {props.tokens.toLocaleString()} tokens</text>}
+        </box>
+    );
+}
+
+export function ThinkingIndicatorBlock(props: ThinkingIndicatorProps) {
+    if (!shouldShowThinkingIndicator(props)) return null;
+
+    return (
+        <box flexDirection="column" width="100%">
+            <ThinkingIndicator {...props} />
+            <box flexDirection="row" width="100%">
+                <text> </text>
+            </box>
+        </box>
+    );
+}

package/src/components/main/types.ts

@@ -0,0 +1,55 @@
+export const BLEND_WORDS = [
+  "Blended",
+  "Crafted",
+  "Brewed",
+  "Cooked",
+  "Forged",
+  "Woven",
+  "Composed",
+  "Rendered",
+  "Conjured",
+  "Distilled",
+  "Worked"
+];
+
+export const THINKING_WORDS = [
+    "Thinking",
+    "Processing",
+    "Analyzing",
+    "Reasoning",
+    "Computing",
+    "Pondering",
+    "Crafting",
+    "Working",
+    "Brewing",
+    "Weaving",
+    "Revolutionizing"
+];
+
+export interface Message {
+  id: string;
+  role: "user" | "assistant" | "tool" | "slash";
+  displayRole?: "user" | "assistant" | "tool" | "slash";
+  displayContent?: string;
+  content: string;
+  toolName?: string;
+  toolArgs?: Record<string, unknown>;
+  toolResult?: unknown;
+  success?: boolean;
+  isError?: boolean;
+  responseDuration?: number;
+  blendWord?: string;
+  thinkingContent?: string;
+  isRunning?: boolean;
+  runningStartTime?: number;
+  timestamp?: number;
+}
+
+export interface MainProps {
+  pasteRequestId?: number;
+  copyRequestId?: number;
+  onCopy?: (text: string) => void;
+  shortcutsOpen?: boolean;
+  commandsOpen?: boolean;
+  initialMessage?: string;
+}

package/src/components/main/wrapText.ts

@@ -0,0 +1,41 @@
+export const wrapText = (text: string, maxWidth: number): string[] => {
+  if (!text) return [''];
+  if (maxWidth <= 0) return [text];
+  if (text.length <= maxWidth) return [text];
+
+  const lines: string[] = [];
+  let currentLine = '';
+  let i = 0;
+
+  while (i < text.length) {
+    const char = text[i];
+
+    if (char === ' ' && currentLine.length === maxWidth) {
+      lines.push(currentLine);
+      currentLine = '';
+      i++;
+      continue;
+    }
+
+    if (currentLine.length + 1 > maxWidth) {
+      const lastSpaceIndex = currentLine.lastIndexOf(' ');
+      if (lastSpaceIndex > 0) {
+        lines.push(currentLine.slice(0, lastSpaceIndex));
+        currentLine = currentLine.slice(lastSpaceIndex + 1) + char;
+      } else {
+        lines.push(currentLine);
+        currentLine = char || '';
+      }
+    } else {
+      currentLine += char;
+    }
+
+    i++;
+  }
+
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+
+  return lines.length > 0 ? lines : [''];
+};

package/src/index.tsx

@@ -0,0 +1,212 @@
+#!/usr/bin/env bun
+
+const originalStderrWrite = process.stderr.write.bind(process.stderr);
+const originalStdoutWrite = process.stdout.write.bind(process.stdout);
+
+process.stderr.write = ((chunk: any, ...args: any[]) => {
+  const str = chunk.toString();
+  if (str.includes('Cannot add child') ||
+    str.includes('Aborted()') ||
+    str.includes('Nodes with measure functions') ||
+    str.includes('Maximum update depth')) {
+    return true;
+  }
+  return originalStderrWrite(chunk, ...args);
+}) as typeof process.stderr.write;
+
+process.stdout.write = ((chunk: any, ...args: any[]) => {
+  const str = chunk.toString();
+  if (str.includes('Cannot add child') ||
+    str.includes('Aborted()') ||
+    str.includes('Nodes with measure functions')) {
+    return true;
+  }
+  return originalStdoutWrite(chunk, ...args);
+}) as typeof process.stdout.write;
+
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import { App } from "./components/App";
+import { existsSync, statSync } from 'fs';
+import { resolve } from 'path';
+
+interface ParsedArgs {
+  directory?: string;
+  help?: boolean;
+  initialMessage?: string;
+  uninstall?: boolean;
+  forceUninstall?: boolean;
+  webServer?: boolean;
+}
+
+class CLI {
+  parseArgs(args: string[]): ParsedArgs {
+    const parsed: ParsedArgs = {};
+    let i = 0;
+
+    while (i < args.length) {
+      const arg = args[i]!;
+
+      if (arg === '--help' || arg === '-h') {
+        parsed.help = true;
+        i++;
+      } else if (arg === '--directory' || arg === '-d') {
+        parsed.directory = args[i + 1];
+        i += 2;
+      } else if (arg === 'run') {
+        parsed.initialMessage = args[i + 1];
+        i += 2;
+      } else if (arg === 'uninstall') {
+        parsed.uninstall = true;
+        if (args[i + 1] === '--force') {
+          parsed.forceUninstall = true;
+          i += 2;
+        } else {
+          i++;
+        }
+      } else if (arg === 'web') {
+        parsed.webServer = true;
+        i++;
+      } else if (!arg.startsWith('-')) {
+        parsed.directory = arg;
+        i++;
+      } else {
+        i++;
+      }
+    }
+
+    return parsed;
+  }
+
+  showHelp(): void {
+    const gold = (text: string) => `\x1b[38;2;255;202;56m${text}\x1b[0m`;
+
+    console.log('');
+    console.log(gold('███╗   ███╗'));
+    console.log(gold('████╗ ████║'));
+    console.log(gold('███╔████╔███║'));
+    console.log(`
+Mosaic - AI-powered coding agent
+
+Usage:
+  mosaic [options] [directory]
+
+Options:
+  -h, --help              Show this help message
+  -d, --directory <path>  Open in specific directory
+  run "<message>"         Launch with a message to execute
+  web                     Start the web interface server
+  uninstall [--force]     Uninstall Mosaic
+
+Examples:
+  mosaic                              Start in current directory
+  mosaic ./my-project                 Start in specific directory
+  mosaic run "fix the bug"            Launch with a task
+  mosaic web                          Start web server on http://127.0.0.1:8192
+  mosaic uninstall                    Interactive uninstall
+  mosaic uninstall --force            Force uninstall (removes all data)
+`);
+  }
+
+  async uninstall(force: boolean = false): Promise<void> {
+    const { uninstallMosaic } = await import('./utils/uninstall');
+    await uninstallMosaic(force);
+  }
+}
+
+const cli = new CLI();
+const args = process.argv.slice(2);
+const parsed = cli.parseArgs(args);
+
+if (parsed.help) {
+  cli.showHelp();
+  process.exit(0);
+}
+
+if (parsed.uninstall) {
+  await cli.uninstall(parsed.forceUninstall);
+  process.exit(0);
+}
+
+if (parsed.webServer) {
+  const { spawn } = await import('child_process');
+  const path = await import('path');
+  const { fileURLToPath } = await import('url');
+  const { dirname } = await import('path');
+
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  const serverPath = path.join(__dirname, 'web', 'server.tsx');
+
+  if (!existsSync(serverPath)) {
+    console.error(`Error: Web server file not found at: ${serverPath}`);
+    process.exit(1);
+  }
+
+  const serverProcess = spawn('bun', ['run', serverPath], {
+    detached: false,
+    stdio: 'inherit',
+    env: {
+      ...process.env,
+      MOSAIC_PROJECT_PATH: process.cwd()
+    }
+  });
+
+  serverProcess.on('error', (error) => {
+    console.error(`Failed to start web server: ${error.message}`);
+    process.exit(1);
+  });
+
+  process.on('SIGINT', () => {
+    serverProcess.kill();
+    process.exit(0);
+  });
+
+  process.on('SIGTERM', () => {
+    serverProcess.kill();
+    process.exit(0);
+  });
+
+  await new Promise(() => { });
+}
+
+if (parsed.directory) {
+  const resolvedPath = resolve(parsed.directory);
+
+  if (!existsSync(resolvedPath)) {
+    console.error(`Error: Directory "${parsed.directory}" does not exist.`);
+    process.exit(1);
+  }
+
+  if (!statSync(resolvedPath).isDirectory()) {
+    console.error(`Error: "${parsed.directory}" is not a directory.`);
+    process.exit(1);
+  }
+
+  process.chdir(resolvedPath);
+}
+
+import { addRecentProject } from './utils/config';
+addRecentProject(process.cwd());
+
+process.title = '⁘ Mosaic';
+
+const cleanup = (code = 0) => {
+  process.stdout.write('\x1b[?25h');
+  process.exit(code);
+};
+
+process.on('SIGINT', () => cleanup(0));
+process.on('SIGTERM', () => cleanup(0));
+process.on('uncaughtException', () => cleanup(1));
+process.on('unhandledRejection', () => cleanup(1));
+
+await new Promise(resolve => setTimeout(resolve, 100));
+
+try {
+  const renderer = await createCliRenderer();
+  createRoot(renderer).render(<App initialMessage={parsed.initialMessage} />);
+} catch (error) {
+  console.error(error);
+  cleanup(1);
+}

package/src/utils/approvalBridge.ts

@@ -0,0 +1,129 @@
+export interface ApprovalRequest {
+  id: string;
+  toolName: 'write' | 'edit' | 'bash';
+  preview: {
+    title: string;
+    content: string;
+    details?: string[];
+  };
+  args: Record<string, unknown>;
+}
+
+export interface ApprovalResponse {
+  id: string;
+  approved: boolean;
+  customResponse?: string;
+}
+
+export interface ApprovalAccepted {
+  toolName: 'write' | 'edit' | 'bash';
+  args: Record<string, unknown>;
+}
+
+type ApprovalListener = (request: ApprovalRequest | null) => void;
+type ApprovalAcceptedListener = (accepted: ApprovalAccepted) => void;
+
+let currentRequest: ApprovalRequest | null = null;
+let listeners = new Set<ApprovalListener>();
+let acceptedListeners = new Set<ApprovalAcceptedListener>();
+let pendingResolve: ((response: ApprovalResponse) => void) | null = null;
+let pendingReject: ((reason?: any) => void) | null = null;
+
+function notify(): void {
+  for (const listener of listeners) {
+    listener(currentRequest);
+  }
+}
+
+function createId(): string {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+export function subscribeApproval(listener: ApprovalListener): () => void {
+  listeners.add(listener);
+  listener(currentRequest);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function subscribeApprovalAccepted(listener: ApprovalAcceptedListener): () => void {
+  acceptedListeners.add(listener);
+  return () => {
+    acceptedListeners.delete(listener);
+  };
+}
+
+function notifyApprovalAccepted(toolName: 'write' | 'edit' | 'bash', args: Record<string, unknown>): void {
+  for (const listener of acceptedListeners) {
+    listener({ toolName, args });
+  }
+}
+
+export function getCurrentApproval(): ApprovalRequest | null {
+  return currentRequest;
+}
+
+export async function requestApproval(
+  toolName: 'write' | 'edit' | 'bash',
+  args: Record<string, unknown>,
+  preview: { title: string; content: string; details?: string[] }
+): Promise<{ approved: boolean; customResponse?: string }> {
+  if (pendingResolve) {
+    throw new Error('An approval request is already pending');
+  }
+
+  const request: ApprovalRequest = {
+    id: createId(),
+    toolName,
+    preview,
+    args,
+  };
+
+  currentRequest = request;
+  notify();
+
+  const response = await new Promise<ApprovalResponse>((resolve, reject) => {
+    pendingResolve = resolve;
+    pendingReject = reject;
+  });
+
+  return { approved: response.approved, customResponse: response.customResponse };
+}
+
+export function respondApproval(approved: boolean, customResponse?: string): void {
+  if (!currentRequest || !pendingResolve) return;
+
+  const response: ApprovalResponse = {
+    id: currentRequest.id,
+    approved,
+    customResponse,
+  };
+
+  const resolve = pendingResolve;
+  const toolName = currentRequest.toolName;
+  const args = currentRequest.args;
+
+  pendingResolve = null;
+  pendingReject = null;
+  currentRequest = null;
+  notify();
+
+  if (approved) {
+    notifyApprovalAccepted(toolName, args);
+  }
+
+  resolve(response);
+}
+
+export function cancelApproval(): void {
+  if (!currentRequest || !pendingReject) return;
+
+  const reject = pendingReject;
+  pendingResolve = null;
+  pendingReject = null;
+  currentRequest = null;
+  notify();
+
+  reject(new Error('Interrupted by user'));
+}

package/src/utils/commands/echo.ts

@@ -0,0 +1,22 @@
+import type { Command } from './types';
+
+export const echoCommand: Command = {
+  name: 'echo',
+  description: 'Echo the provided text back to the user',
+  usage: '/echo <text>',
+  aliases: ['e'],
+  execute: (args: string[], fullCommand: string): { success: boolean; content: string } => {
+    if (args.length === 0) {
+      return {
+        success: false,
+        content: 'Error: /echo requires text to echo. Usage: /echo <text>'
+      };
+    }
+
+    const text = args.join(' ');
+    return {
+      success: true,
+      content: text
+    };
+  }
+};

package/src/utils/commands/help.ts

@@ -0,0 +1,25 @@
+import type { Command } from './types';
+import { commandRegistry } from './registry';
+
+export const helpCommand: Command = {
+  name: 'help',
+  description: 'Show available commands',
+  usage: '/help',
+  aliases: ['h'],
+  execute: (): { success: boolean; content: string } => {
+    const commands = commandRegistry.getAll();
+    const commandList = Array.from(commands.entries())
+      .filter(([name, cmd]) => name === cmd.name)
+      .map(([name, cmd]) => {
+        const usage = cmd.usage ? ` - ${cmd.usage}` : '';
+        const aliases = cmd.aliases && cmd.aliases.length > 0 ? ` (aliases: ${cmd.aliases.join(', ')})` : '';
+        return `/${name}${usage}${aliases}\n  ${cmd.description}`;
+      })
+      .join('\n\n');
+
+    return {
+      success: true,
+      content: `Available commands:\n\n${commandList}`
+    };
+  }
+};