@kirosnn/mosaic 0.0.91 → 0.73.0

package/src/components/main/HomePage.tsx

@@ -17,28 +17,43 @@ const TIPS = [
   "Use /clear to reset the current chat session.",
   "Use Tab to autocomplete commands and arguments.",
   "Use Ctrl + K to clear the current input line.",
+  "Use Ctrl + G to edit the current input in your system editor.",
   "Use /help to display the list of available commands.",
+  "Select text with the mouse to copy it automatically.",
+  "Attach an image with /image <path>.",
+  "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);
     }
@@ -69,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>
@@ -80,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>
@@ -108,4 +127,4 @@ export function HomePage({ onSubmit, pasteRequestId, shortcutsOpen }: HomePagePr
       </box>
     </box>
   );
-}
+}

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,8 @@ interface ThinkingIndicatorProps {
     hasQuestion: boolean;
     startTime?: number | null;
     tokens?: number;
+    inProgressStep?: string;
+    nextStep?: string;
 }
 
 export function getInputBarBaseLines(): number {
@@ -22,7 +24,8 @@ export function shouldShowThinkingIndicator({ isProcessing, hasQuestion }: Think
 }
 
 export function getBottomReservedLinesForInputBar(props: ThinkingIndicatorProps): number {
-    return getInputBarBaseLines() + (shouldShowThinkingIndicator(props) ? 2 : 0) + 2;
+    const indicatorLines = shouldShowThinkingIndicator(props) ? (props.nextStep ? 3 : 2) : 0;
+    return getInputBarBaseLines() + indicatorLines + 2;
 }
 
 export function formatElapsedTime(ms: number | null | undefined, fromStartTime: boolean = true): string {
@@ -93,6 +96,14 @@ export function ThinkingIndicatorBlock(props: ThinkingIndicatorProps) {
     return (
         <box flexDirection="column" width="100%">
             <ThinkingIndicator {...props} />
+            {props.nextStep ? (
+                <box flexDirection="row" width="100%" paddingLeft={2}>
+                    <text fg="#ffca38" attributes={TextAttributes.BOLD}>⎿ </text>
+                    <text fg="#ffca38" attributes={TextAttributes.BOLD}>Next:</text>
+                    <text> </text>
+                    <text fg="white" attributes={TextAttributes.DIM}>{props.nextStep}</text>
+                </box>
+            ) : null}
             <box flexDirection="row" width="100%">
                 <text> </text>
             </box>

package/src/components/main/types.ts

@@ -26,15 +26,16 @@ export const THINKING_WORDS = [
     "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;
+export interface Message {
+  id: string;
+  role: "user" | "assistant" | "tool" | "slash";
+  displayRole?: "user" | "assistant" | "tool" | "slash";
+  displayContent?: string;
+  content: string;
+  images?: import("../../utils/images").ImageAttachment[];
+  toolName?: string;
+  toolArgs?: Record<string, unknown>;
+  toolResult?: unknown;
   success?: boolean;
   isError?: boolean;
   responseDuration?: number;
@@ -52,4 +53,4 @@ export interface MainProps {
   shortcutsOpen?: boolean;
   commandsOpen?: boolean;
   initialMessage?: string;
-}
+}

package/src/index.tsx

@@ -37,6 +37,8 @@ interface ParsedArgs {
   uninstall?: boolean;
   forceUninstall?: boolean;
   webServer?: boolean;
+  mcpCommand?: boolean;
+  mcpArgs?: string[];
 }
 
 class CLI {
@@ -54,8 +56,9 @@ class CLI {
         parsed.directory = args[i + 1];
         i += 2;
       } else if (arg === 'run') {
-        parsed.initialMessage = args[i + 1];
-        i += 2;
+        const message = args.slice(i + 1).join(' ');
+        if (message) parsed.initialMessage = message;
+        i = args.length;
       } else if (arg === 'uninstall') {
         parsed.uninstall = true;
         if (args[i + 1] === '--force') {
@@ -64,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++;
@@ -80,31 +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(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)
+${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
 `);
   }
 
@@ -128,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');
@@ -189,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');
+}