@kirosnn/mosaic 0.71.0 → 0.73.0

package/src/components/main/HomePage.tsx

@@ -24,25 +24,36 @@ const TIPS = [
   "Paste an image with Ctrl/Alt + V (or Cmd + V on macOS).",
 ];
 
-export function HomePage({ onSubmit, pasteRequestId, shortcutsOpen }: HomePageProps) {
-  const [currentTipIndex, setCurrentTipIndex] = useState(0);
-  const [displayedText, setDisplayedText] = useState("");
-  const [isDeleting, setIsDeleting] = useState(false);
-  const [isWaiting, setIsWaiting] = useState(false);
-  const [cursorVisible, setCursorVisible] = useState(true);
+export function HomePage({ onSubmit, pasteRequestId, shortcutsOpen }: HomePageProps) {
+  const [terminalWidth, setTerminalWidth] = useState(process.stdout.columns || 80);
+  const [currentTipIndex, setCurrentTipIndex] = useState(0);
+  const [displayedText, setDisplayedText] = useState("");
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isWaiting, setIsWaiting] = useState(false);
+  const [cursorVisible, setCursorVisible] = useState(true);
 
-  useEffect(() => {
-    const cursorInterval = setInterval(() => {
-      setCursorVisible((v) => !v);
-    }, 500);
-    return () => clearInterval(cursorInterval);
-  }, []);
-
-  useEffect(() => {
-    if (isWaiting) {
-      const timeout = setTimeout(() => {
-        setIsWaiting(false);
-        setIsDeleting(true);
+  useEffect(() => {
+    const cursorInterval = setInterval(() => {
+      setCursorVisible((v) => !v);
+    }, 500);
+    return () => clearInterval(cursorInterval);
+  }, []);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setTerminalWidth(process.stdout.columns || 80);
+    };
+    process.stdout.on('resize', handleResize);
+    return () => {
+      process.stdout.off('resize', handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isWaiting) {
+      const timeout = setTimeout(() => {
+        setIsWaiting(false);
+        setIsDeleting(true);
       }, 5000);
       return () => clearTimeout(timeout);
     }
@@ -73,10 +84,13 @@ export function HomePage({ onSubmit, pasteRequestId, shortcutsOpen }: HomePagePr
         return () => clearTimeout(timeout);
       }
     }
-  }, [displayedText, isDeleting, isWaiting, currentTipIndex]);
-
-  return (
-    <box flexDirection="column" width="100%" height="100%" justifyContent="center" alignItems="center">
+  }, [displayedText, isDeleting, isWaiting, currentTipIndex]);
+
+  const containerWidth = Math.min(80, Math.floor(terminalWidth * 0.8));
+  const inputWidth = Math.max(10, containerWidth - 4);
+
+  return (
+    <box flexDirection="column" width="100%" height="100%" justifyContent="center" alignItems="center">
       <box flexDirection="column" alignItems="center" marginBottom={2}>
         <text fg="#ffca38" attributes={TextAttributes.BOLD}>███╗   ███╗</text>
         <text fg="#ffca38" attributes={TextAttributes.BOLD}>████╗ ████║</text>
@@ -84,22 +98,23 @@ export function HomePage({ onSubmit, pasteRequestId, shortcutsOpen }: HomePagePr
       </box>
 
       <box width="80%" maxWidth={80}>
-        <box
-          flexDirection="row"
-          backgroundColor="#1a1a1a"
-          paddingLeft={2}
-          paddingRight={2}
-          paddingTop={1}
-          paddingBottom={1}
-        >
-          <CustomInput
-            onSubmit={onSubmit}
-            placeholder="Ask anything..."
-            focused={!shortcutsOpen}
-            pasteRequestId={shortcutsOpen ? 0 : pasteRequestId}
-          />
-        </box>
-      </box>
+        <box
+          flexDirection="row"
+          backgroundColor="#1a1a1a"
+          paddingLeft={2}
+          paddingRight={2}
+          paddingTop={1}
+          paddingBottom={1}
+        >
+          <CustomInput
+            onSubmit={onSubmit}
+            placeholder="Ask anything..."
+            focused={!shortcutsOpen}
+            pasteRequestId={shortcutsOpen ? 0 : pasteRequestId}
+            maxWidth={inputWidth}
+          />
+        </box>
+      </box>
 
       <box width="80%" maxWidth={80} marginTop={3} flexDirection="row" justifyContent="center">
         <text fg="#ffca38" attributes={TextAttributes.BOLD}>ⓘ TIPS: </text>

package/src/components/main/QuestionPanel.tsx

@@ -8,15 +8,28 @@ interface QuestionPanelProps {
   request: QuestionRequest;
   disabled?: boolean;
   onAnswer: (index: number, customText?: string) => void;
+  maxWidth?: number;
 }
 
-export function QuestionPanel({ request, disabled = false, onAnswer }: QuestionPanelProps) {
+export function QuestionPanel({ request, disabled = false, onAnswer, maxWidth }: QuestionPanelProps) {
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [remaining, setRemaining] = useState<number | null>(request.timeout ?? null);
+  const [validationError, setValidationError] = useState<string | null>(null);
 
   useEffect(() => {
     setSelectedIndex(0);
+    setValidationError(null);
+    setRemaining(request.timeout ?? null);
   }, [request.id]);
 
+  useEffect(() => {
+    if (remaining === null || remaining <= 0) return;
+    const id = setInterval(() => {
+      setRemaining(prev => (prev !== null && prev > 0 ? prev - 1 : prev));
+    }, 1000);
+    return () => clearInterval(id);
+  }, [remaining !== null]);
+
   useKeyboard((key) => {
     if (disabled) return;
 
@@ -47,13 +60,30 @@ export function QuestionPanel({ request, disabled = false, onAnswer }: QuestionP
     if (!text || !text.trim()) {
       return;
     }
+    if (request.validation) {
+      try {
+        if (!new RegExp(request.validation.pattern).test(text)) {
+          setValidationError(request.validation.message || `Input must match: ${request.validation.pattern}`);
+          return;
+        }
+      } catch {
+        setValidationError('Invalid validation pattern');
+        return;
+      }
+    }
+    setValidationError(null);
     onAnswer(0, text);
   };
 
+  let lastGroup: string | undefined;
+
   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>
+        {remaining !== null && (
+          <text fg={remaining <= 5 ? '#ff4444' : '#888888'}> Timeout: {remaining}s</text>
+        )}
       </box>
 
       <box flexDirection="column" marginBottom={1}>
@@ -67,19 +97,34 @@ export function QuestionPanel({ request, disabled = false, onAnswer }: QuestionP
           const selected = index === selectedIndex;
           const prefix = selected ? '> ' : '  ';
           const number = index <= 8 ? `${index + 1}. ` : '   ';
+          const showGroupHeader = option.group && option.group !== lastGroup;
+          lastGroup = option.group;
           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 key={`${request.id}-${index}`} flexDirection="column">
+              {showGroupHeader && (
+                <box paddingLeft={1} marginTop={index > 0 ? 1 : 0}>
+                  <text fg="#888888" attributes={TextAttributes.BOLD}>{option.group}</text>
+                </box>
+              )}
+              <box 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>
 
+      {validationError && (
+        <box marginBottom={1} paddingLeft={1}>
+          <text fg="#ff4444">{validationError}</text>
+        </box>
+      )}
+
       <box flexDirection="row">
-        <CustomInput onSubmit={handleCustomSubmit} placeholder="Tell Mosaic what it should do and press Enter" focused={!disabled} disableHistory={true} />
+        <CustomInput onSubmit={handleCustomSubmit} placeholder="Tell Mosaic what it should do and press Enter" focused={!disabled} disableHistory={true} maxWidth={maxWidth} />
       </box>
     </box>
   );
-}
+}

package/src/components/main/ThinkingIndicator.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { TextAttributes } from "@opentui/core";
 import { THINKING_WORDS } from "./types";
 
@@ -7,6 +7,7 @@ interface ThinkingIndicatorProps {
     hasQuestion: boolean;
     startTime?: number | null;
     tokens?: number;
+    inProgressStep?: string;
     nextStep?: string;
 }
 

package/src/index.tsx

@@ -37,6 +37,8 @@ interface ParsedArgs {
   uninstall?: boolean;
   forceUninstall?: boolean;
   webServer?: boolean;
+  mcpCommand?: boolean;
+  mcpArgs?: string[];
 }
 
 class CLI {
@@ -65,6 +67,10 @@ class CLI {
         } else {
           i++;
         }
+      } else if (arg === 'mcp') {
+        parsed.mcpCommand = true;
+        parsed.mcpArgs = args.slice(i + 1);
+        i = args.length;
       } else if (arg === 'web') {
         parsed.webServer = true;
         i++;
@@ -81,28 +87,39 @@ class CLI {
 
   showHelp(): void {
     const gold = (text: string) => `\x1b[38;2;255;202;56m${text}\x1b[0m`;
+    const gray = (text: string) => `\x1b[90m${text}\x1b[0m`;
 
     console.log('');
     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)
+${gold('Mosaic')}
+
+${gold('Usage')}
+  $ mosaic [options] [path]
+  $ mosaic <command> [options]
+
+${gold('Options')}
+  -h, --help                ${gray('Show this help message')}
+  -d, --directory <path>    ${gray('Open Mosaic in a specific directory (default: current)')}
+
+${gold('Commands')}
+  run "<message>"           ${gray('Launch Mosaic with an initial prompt to execute immediately')}
+  web                       ${gray('Start the Mosaic web interface server (default: http://127.0.0.1:8192)')}
+  mcp <subcommand>          ${gray('Manage Model Context Protocol (MCP) servers')}
+  uninstall [--force]       ${gray('Uninstall Mosaic from your system')}
+
+${gold('MCP Subcommands')}
+  mosaic mcp list           ${gray('List configured MCP servers')}
+  mosaic mcp add [name]     ${gray('Add a new MCP server')}
+  mosaic mcp doctor         ${gray('Run diagnostics')}
+  mosaic mcp help           ${gray('View full list of MCP commands')}
+
+${gold('Examples')}
+  ${gray('mosaic')}                              # Start in current directory
+  ${gray('mosaic ./my-project')}                 # Start in specific directory
+  ${gray('mosaic run "Fix the bug in main.ts"')} # Launch with a specific task
+  ${gray('mosaic web')}                          # Start the web UI
+  ${gray('mosaic mcp list')}                     # Check connected tools
+  ${gray('mosaic uninstall --force')}            # Completely remove Mosaic
 `);
   }
 
@@ -126,6 +143,12 @@ if (parsed.uninstall) {
   process.exit(0);
 }
 
+if (parsed.mcpCommand) {
+  const { runMcpCli } = await import('./mcp/cli/index');
+  await runMcpCli(parsed.mcpArgs ?? []);
+  process.exit(0);
+}
+
 if (parsed.webServer) {
   const { spawn } = await import('child_process');
   const path = await import('path');
@@ -187,9 +210,16 @@ if (parsed.directory) {
 import { addRecentProject } from './utils/config';
 addRecentProject(process.cwd());
 
+const { initializeMcp } = await import('./mcp/index');
+await initializeMcp().catch(() => { });
+
 process.title = '⁘ Mosaic';
 
-const cleanup = (code = 0) => {
+const cleanup = async (code = 0) => {
+  try {
+    const { shutdownMcp } = await import('./mcp/index');
+    await shutdownMcp();
+  } catch { }
   process.stdout.write('\x1b[?25h');
   process.exit(code);
 };

package/src/mcp/approvalPolicy.ts

@@ -0,0 +1,148 @@
+import { createHash } from 'crypto';
+import { requestApproval } from '../utils/approvalBridge';
+import type { McpApprovalCacheEntry, McpRiskHint, McpServerConfig } from './types';
+
+const READ_KEYWORDS = ['read', 'get', 'list', 'search', 'find', 'show', 'describe', 'query', 'fetch', 'inspect', 'view', 'ls', 'cat'];
+const WRITE_KEYWORDS = ['write', 'set', 'create', 'update', 'put', 'save', 'modify', 'patch', 'upsert', 'insert', 'append'];
+const EXEC_KEYWORDS = ['exec', 'run', 'execute', 'spawn', 'shell', 'eval', 'invoke', 'call', 'process'];
+const DELETE_KEYWORDS = ['delete', 'remove', 'destroy', 'drop', 'purge', 'clean', 'wipe', 'rm', 'unlink'];
+const NET_KEYWORDS = ['http', 'request', 'download', 'upload', 'send', 'post', 'api', 'webhook', 'socket', 'connect'];
+
+export class McpApprovalPolicy {
+  private cache = new Map<string, McpApprovalCacheEntry>();
+
+  inferRiskHint(toolName: string, _args: Record<string, unknown>): McpRiskHint {
+    const lower = toolName.toLowerCase();
+
+    for (const kw of DELETE_KEYWORDS) {
+      if (lower.includes(kw)) return 'execute';
+    }
+    for (const kw of EXEC_KEYWORDS) {
+      if (lower.includes(kw)) return 'execute';
+    }
+    for (const kw of WRITE_KEYWORDS) {
+      if (lower.includes(kw)) return 'write';
+    }
+    for (const kw of NET_KEYWORDS) {
+      if (lower.includes(kw)) return 'network';
+    }
+    for (const kw of READ_KEYWORDS) {
+      if (lower.includes(kw)) return 'read';
+    }
+
+    return 'unknown';
+  }
+
+  async requestMcpApproval(request: {
+    serverId: string;
+    serverName: string;
+    toolName: string;
+    canonicalId: string;
+    args: Record<string, unknown>;
+    approvalMode: McpServerConfig['approval'];
+  }): Promise<{ approved: boolean; customResponse?: string }> {
+    if (request.approvalMode === 'never') {
+      return { approved: true };
+    }
+
+    const riskHint = this.inferRiskHint(request.toolName, request.args);
+
+    if (this.checkCache(request.serverId, request.toolName, request.args)) {
+      return { approved: true };
+    }
+
+    const argsStr = formatArgs(request.args);
+    const payloadSize = JSON.stringify(request.args).length;
+
+    const preview = {
+      title: `MCP: ${request.serverName} / ${request.toolName}`,
+      content: argsStr,
+      details: [
+        `Server: ${request.serverName} (${request.serverId})`,
+        `Tool: ${request.toolName}`,
+        `Risk: ${riskHint}`,
+        `Payload: ${payloadSize} bytes`,
+      ],
+    };
+
+    const mcpMeta = {
+      serverId: request.serverId,
+      serverName: request.serverName,
+      canonicalId: request.canonicalId,
+      riskHint,
+      payloadSize,
+    };
+
+    const result = await requestApproval(
+      request.canonicalId,
+      { ...request.args, __mcpMeta: mcpMeta },
+      preview
+    );
+
+    if (result.approved && request.approvalMode !== 'always') {
+      this.addToCache(request.serverId, request.toolName, request.args, request.approvalMode);
+    }
+
+    return result;
+  }
+
+  private checkCache(serverId: string, toolName: string, args: Record<string, unknown>): boolean {
+    const now = Date.now();
+
+    const serverKey = `server:${serverId}`;
+    const serverEntry = this.cache.get(serverKey);
+    if (serverEntry && serverEntry.expiresAt > now) return true;
+
+    const toolKey = `tool:${serverId}:${toolName}`;
+    const toolEntry = this.cache.get(toolKey);
+    if (toolEntry && toolEntry.expiresAt > now) return true;
+
+    const argsHash = hashArgs(args);
+    const argsKey = `toolArgs:${serverId}:${toolName}:${argsHash}`;
+    const argsEntry = this.cache.get(argsKey);
+    if (argsEntry && argsEntry.expiresAt > now) return true;
+
+    return false;
+  }
+
+  private addToCache(serverId: string, toolName: string, _args: Record<string, unknown>, mode: McpServerConfig['approval']): void {
+    const ttl = 300000;
+    const expiresAt = Date.now() + ttl;
+
+    switch (mode) {
+      case 'once-per-server': {
+        const key = `server:${serverId}`;
+        this.cache.set(key, { scope: 'server', key, expiresAt });
+        break;
+      }
+      case 'once-per-tool': {
+        const key = `tool:${serverId}:${toolName}`;
+        this.cache.set(key, { scope: 'tool', key, expiresAt });
+        break;
+      }
+    }
+  }
+
+  clearCache(): void {
+    this.cache.clear();
+  }
+}
+
+function hashArgs(args: Record<string, unknown>): string {
+  const str = JSON.stringify(args, Object.keys(args).sort());
+  return createHash('sha256').update(str).digest('hex').slice(0, 12);
+}
+
+function formatArgs(args: Record<string, unknown>): string {
+  const entries = Object.entries(args);
+  if (entries.length === 0) return '(no arguments)';
+
+  const lines: string[] = [];
+  for (const [key, value] of entries) {
+    const strValue = typeof value === 'string'
+      ? (value.length > 100 ? value.slice(0, 100) + '...' : value)
+      : JSON.stringify(value);
+    lines.push(`  ${key}: ${strValue}`);
+  }
+  return lines.join('\n');
+}

package/src/mcp/cli/add.ts

@@ -0,0 +1,185 @@
+import { createInterface } from 'readline';
+import { saveServerConfig, loadMcpConfig } from '../config';
+import { MCP_REGISTRY, findRegistryEntry, type McpRegistryEntry } from '../registry';
+import type { McpServerConfig } from '../types';
+
+function ask(rl: ReturnType<typeof createInterface>, question: string, defaultValue?: string): Promise<string> {
+  const suffix = defaultValue ? ` [${defaultValue}]` : '';
+  return new Promise(resolve => {
+    rl.question(`${question}${suffix}: `, (answer: string) => {
+      resolve(answer.trim() || defaultValue || '');
+    });
+  });
+}
+
+export async function mcpAdd(nameArg?: string): Promise<void> {
+  const existing = loadMcpConfig();
+  const existingIds = new Set(existing.map(c => c.id));
+
+  if (nameArg) {
+    const entry = findRegistryEntry(nameArg);
+    if (entry) {
+      if (existingIds.has(entry.id)) {
+        console.log(`Server "${entry.id}" is already configured.`);
+        return;
+      }
+      await addFromRegistry(entry);
+      return;
+    }
+    console.log(`"${nameArg}" not found in the registry.\n`);
+  }
+
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+
+  try {
+    console.log('Available MCP servers:\n');
+
+    for (let i = 0; i < MCP_REGISTRY.length; i++) {
+      const entry = MCP_REGISTRY[i]!;
+      const installed = existingIds.has(entry.id) ? ' (installed)' : '';
+      console.log(`  ${String(i + 1).padStart(2)}. ${entry.name.padEnd(22)} ${entry.description}${installed}`);
+    }
+
+    console.log(`\n   0. Custom server`);
+
+    const choice = await ask(rl, '\nChoose a server (number or name)', '');
+    rl.close();
+
+    if (!choice) return;
+
+    if (choice === '0' || choice.toLowerCase() === 'custom') {
+      await addCustom();
+      return;
+    }
+
+    const num = parseInt(choice, 10);
+    let entry: McpRegistryEntry | null = null;
+
+    if (!isNaN(num) && num >= 1 && num <= MCP_REGISTRY.length) {
+      entry = MCP_REGISTRY[num - 1]!;
+    } else {
+      entry = findRegistryEntry(choice);
+    }
+
+    if (!entry) {
+      console.log(`"${choice}" not found.`);
+      return;
+    }
+
+    if (existingIds.has(entry.id)) {
+      console.log(`Server "${entry.id}" is already configured.`);
+      return;
+    }
+
+    await addFromRegistry(entry);
+  } catch (error) {
+    if ((error as any)?.code === 'ERR_USE_AFTER_CLOSE') return;
+    throw error;
+  } finally {
+    try { rl.close(); } catch {}
+  }
+}
+
+async function addFromRegistry(entry: McpRegistryEntry): Promise<void> {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+
+  try {
+    console.log(`\nAdding ${entry.name}: ${entry.description}\n`);
+
+    const args = [...entry.args];
+    const env: Record<string, string> = {};
+
+    if (entry.prompts) {
+      for (const prompt of entry.prompts) {
+        const value = await ask(rl, prompt.question);
+        if (!value) {
+          console.log('Cancelled.');
+          return;
+        }
+        if (prompt.argIndex !== undefined) {
+          args[prompt.argIndex] = value;
+        }
+      }
+    }
+
+    if (entry.env) {
+      for (const [key, meta] of Object.entries(entry.env)) {
+        const existing = process.env[key];
+        if (existing) {
+          console.log(`  ${key}: using value from environment`);
+          env[key] = existing;
+          continue;
+        }
+
+        const suffix = meta.required ? '' : ' (optional, press Enter to skip)';
+        const value = await ask(rl, `${meta.description}${suffix}`);
+
+        if (!value && meta.required) {
+          console.log(`${key} is required. Cancelled.`);
+          return;
+        }
+
+        if (value) {
+          env[key] = value;
+        }
+      }
+    }
+
+    const config: Partial<McpServerConfig> = {
+      id: entry.id,
+      name: entry.name,
+      command: entry.command,
+      args,
+      enabled: true,
+      autostart: 'startup',
+      approval: 'always',
+      ...(Object.keys(env).length > 0 && { env }),
+    };
+
+    saveServerConfig(config);
+    console.log(`\n"${entry.id}" added successfully.`);
+    console.log(`Run "mosaic mcp doctor" to test connectivity.`);
+  } finally {
+    rl.close();
+  }
+}
+
+async function addCustom(): Promise<void> {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+
+  try {
+    console.log('\nCustom MCP server\n');
+
+    const id = await ask(rl, 'Server ID');
+    if (!id || !/^[a-zA-Z0-9_-]+$/.test(id)) {
+      console.log('Invalid server ID.');
+      return;
+    }
+
+    const name = await ask(rl, 'Display name', id);
+    const command = await ask(rl, 'Command (e.g., npx, node, python)');
+    if (!command) {
+      console.log('Command is required.');
+      return;
+    }
+
+    const argsStr = await ask(rl, 'Arguments (space-separated)', '');
+    const args = argsStr ? argsStr.split(/\s+/) : [];
+
+    const config: Partial<McpServerConfig> = {
+      id,
+      name,
+      command,
+      args,
+      enabled: true,
+      autostart: 'startup',
+      approval: 'always',
+    };
+
+    saveServerConfig(config);
+    console.log(`\n"${id}" added successfully.`);
+    console.log(`Run "mosaic mcp doctor" to test connectivity.`);
+  } finally {
+    rl.close();
+  }
+}