@kirosnn/mosaic 0.71.0 → 0.73.0

package/src/utils/toolFormatting.ts

@@ -18,7 +18,25 @@ const TOOL_DISPLAY_NAMES: Record<string, string> = {
   plan: 'Plan',
 };
 
+function parseMcpSafeId(toolName: string): { serverId: string; tool: string } | null {
+  if (!toolName.startsWith('mcp__')) return null;
+  const parts = toolName.slice(5).split('__');
+  if (parts.length < 2) return null;
+  const tool = parts.pop()!;
+  const serverId = parts.join('__');
+  return { serverId, tool };
+}
+
+function getMcpToolDisplayName(tool: string): string {
+  const words = tool.replace(/[-_]+/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2');
+  return words.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+}
+
 function getToolDisplayName(toolName: string): string {
+  const mcp = parseMcpSafeId(toolName);
+  if (mcp) {
+    return getMcpToolDisplayName(mcp.tool);
+  }
   return TOOL_DISPLAY_NAMES[toolName] || toolName;
 }
 
@@ -43,6 +61,50 @@ export function formatToolResult(result: unknown): string {
   }
 }
 
+function getMcpHeaderInfo(_tool: string, args: Record<string, unknown>): string {
+  const query = args.query ?? args.search ?? args.prompt ?? args.input ?? args.text ?? args.q;
+  if (typeof query === 'string' && query.trim()) {
+    const clean = query.replace(/[\r\n]+/g, ' ').trim();
+    return clean.length > 50 ? clean.slice(0, 50) + '...' : clean;
+  }
+
+  const url = args.url ?? args.uri ?? args.href;
+  if (typeof url === 'string' && url.trim()) {
+    try {
+      const u = new URL(url);
+      return u.hostname + (u.pathname !== '/' ? u.pathname : '');
+    } catch {
+      return url.length > 50 ? url.slice(0, 50) + '...' : url;
+    }
+  }
+
+  const urls = args.urls;
+  if (Array.isArray(urls) && urls.length > 0) {
+    const first = typeof urls[0] === 'string' ? urls[0] : '';
+    if (urls.length === 1) {
+      try {
+        return new URL(first).hostname;
+      } catch {
+        return first.length > 40 ? first.slice(0, 40) + '...' : first;
+      }
+    }
+    return `${urls.length} URLs`;
+  }
+
+  const path = args.path ?? args.file ?? args.filename ?? args.filepath ?? args.name;
+  if (typeof path === 'string' && path.trim()) {
+    return path.length > 50 ? path.slice(0, 50) + '...' : path;
+  }
+
+  const command = args.command ?? args.cmd;
+  if (typeof command === 'string' && command.trim()) {
+    const clean = command.replace(/[\r\n]+/g, ' ').trim();
+    return clean.length > 50 ? clean.slice(0, 50) + '...' : clean;
+  }
+
+  return '';
+}
+
 function formatKnownToolArgs(toolName: string, args: Record<string, unknown>): string | null {
   switch (toolName) {
     case 'read':
@@ -67,6 +129,9 @@ function formatKnownToolArgs(toolName: string, args: Record<string, unknown>): s
     }
 
     default: {
+      if (toolName.startsWith('mcp__')) {
+        return null;
+      }
       const keys = Object.keys(args);
       if (keys.length === 0) return null;
       try {
@@ -143,8 +208,13 @@ function formatToolHeader(toolName: string, args: Record<string, unknown>): stri
     }
     case 'plan':
       return displayName;
-    default:
+    default: {
+      if (toolName.startsWith('mcp__')) {
+        const info = getMcpHeaderInfo('', args);
+        return info ? `${displayName} ("${info}")` : displayName;
+      }
       return displayName;
+    }
   }
 }
 
@@ -217,8 +287,13 @@ export function parseToolHeader(toolName: string, args: Record<string, unknown>)
     }
     case 'plan':
       return { name: displayName, info: null };
-    default:
+    default: {
+      if (toolName.startsWith('mcp__')) {
+        const info = getMcpHeaderInfo('', args);
+        return { name: displayName, info: info || null };
+      }
       return { name: displayName, info: null };
+    }
   }
 }
 
@@ -230,10 +305,25 @@ function getLineCount(text: string): number {
 function formatListTree(result: unknown): string[] {
   if (typeof result !== 'string') return [];
   try {
-    const parsed = JSON.parse(result) as Array<{ name?: string; path?: string; type?: string }>;
-    if (!Array.isArray(parsed)) return [];
+    const parsed = JSON.parse(result);
 
-    const entries = parsed
+    let items: Array<{ name?: string; path?: string; type?: string }>;
+    let errors: string[] = [];
+
+    if (Array.isArray(parsed)) {
+      items = parsed;
+    } else if (parsed && typeof parsed === 'object' && Array.isArray(parsed.files)) {
+      items = parsed.files;
+      if (Array.isArray(parsed.errors)) {
+        errors = parsed.errors
+          .map((e: unknown) => (typeof e === 'string' ? e : ''))
+          .filter((e: string) => e);
+      }
+    } else {
+      return [];
+    }
+
+    const entries = items
       .map((e) => ({
         name: typeof e.name === 'string' ? e.name : (typeof e.path === 'string' ? e.path : ''),
         type: typeof e.type === 'string' ? e.type : '',
@@ -250,7 +340,16 @@ function formatListTree(result: unknown): string[] {
       .map((e) => e.name)
       .sort((a, b) => a.localeCompare(b));
 
-    return [...dirs, ...files];
+    const lines = [...dirs, ...files];
+
+    if (errors.length > 0) {
+      lines.push('', `Errors (${errors.length}):`);
+      for (const err of errors) {
+        lines.push(`  ${err}`);
+      }
+    }
+
+    return lines;
   } catch {
     return [];
   }
@@ -285,6 +384,157 @@ function getToolErrorText(result: unknown): string | null {
   return typeof error === 'string' && error.trim() ? error.trim() : null;
 }
 
+function formatMcpResultBody(result: unknown): string[] {
+  if (typeof result !== 'string') {
+    if (result && typeof result === 'object') {
+      const obj = result as Record<string, unknown>;
+      if (typeof obj.error === 'string') {
+        return [`Error: ${obj.error}`];
+      }
+    }
+    return ['Completed'];
+  }
+
+  const text = result.trim();
+  if (!text) return ['(empty result)'];
+
+  try {
+    const parsed = JSON.parse(text);
+
+    if (Array.isArray(parsed)) {
+      return formatMcpArray(parsed);
+    }
+
+    if (typeof parsed === 'object' && parsed !== null) {
+      return formatMcpObject(parsed);
+    }
+
+    return [String(parsed)];
+  } catch {
+    const lines = text.split(/\r?\n/).filter(l => l.trim());
+    return lines.length > 0 ? lines : ['Completed'];
+  }
+}
+
+function formatMcpArray(arr: unknown[]): string[] {
+  if (arr.length === 0) return ['(no results)'];
+
+  const lines: string[] = [];
+
+  for (const item of arr) {
+    if (typeof item === 'string') {
+      lines.push(`  ${item}`);
+      continue;
+    }
+
+    if (item && typeof item === 'object') {
+      const obj = item as Record<string, unknown>;
+
+      if (typeof obj.error === 'string') {
+        const url = typeof obj.url === 'string' ? obj.url : '';
+        const detail = obj.details && typeof obj.details === 'object'
+          ? (obj.details as Record<string, unknown>).detail
+          : '';
+        const errMsg = typeof detail === 'string' && detail ? detail : obj.error;
+        lines.push(url ? `  ${url} - ${errMsg}` : `  Error: ${errMsg}`);
+        continue;
+      }
+
+      const title = obj.title ?? obj.name ?? obj.label;
+      const desc = obj.description ?? obj.summary ?? obj.snippet ?? obj.text ?? obj.content;
+      const url = obj.url ?? obj.link ?? obj.href;
+
+      if (typeof title === 'string' && title) {
+        let line = `  ${title}`;
+        if (typeof url === 'string' && url) {
+          try {
+            line += ` (${new URL(url).hostname})`;
+          } catch {
+            line += ` (${url.length > 40 ? url.slice(0, 40) + '...' : url})`;
+          }
+        }
+        lines.push(line);
+        if (typeof desc === 'string' && desc.trim()) {
+          const short = desc.trim().replace(/[\r\n]+/g, ' ');
+          lines.push(`    ${short.length > 80 ? short.slice(0, 80) + '...' : short}`);
+        }
+        continue;
+      }
+
+      if (typeof url === 'string' && url) {
+        let line = `  ${url}`;
+        if (typeof desc === 'string' && desc.trim()) {
+          const short = desc.trim().replace(/[\r\n]+/g, ' ');
+          line += ` - ${short.length > 60 ? short.slice(0, 60) + '...' : short}`;
+        }
+        lines.push(line);
+        continue;
+      }
+
+      const keys = Object.keys(obj);
+      const summary = keys.slice(0, 3).map(k => {
+        const v = obj[k];
+        const s = typeof v === 'string' ? v : JSON.stringify(v);
+        const short = s && s.length > 30 ? s.slice(0, 30) + '...' : s;
+        return `${k}: ${short}`;
+      }).join(', ');
+      lines.push(`  ${summary}`);
+    }
+  }
+
+  if (arr.length > 1) {
+    lines.unshift(`${arr.length} results:`);
+  }
+
+  return lines.length > 0 ? lines : ['Completed'];
+}
+
+function formatMcpObject(obj: Record<string, unknown>): string[] {
+  const lines: string[] = [];
+
+  if (typeof obj.error === 'string') {
+    const detail = obj.details && typeof obj.details === 'object'
+      ? (obj.details as Record<string, unknown>).detail
+      : '';
+    const errMsg = typeof detail === 'string' && detail ? detail : obj.error;
+    return [`Error: ${errMsg}`];
+  }
+
+  const status = obj.status ?? obj.statusCode ?? obj.code;
+  const message = obj.message ?? obj.result ?? obj.output ?? obj.text ?? obj.content ?? obj.data;
+
+  if (typeof status === 'number' || typeof status === 'string') {
+    lines.push(`Status: ${status}`);
+  }
+
+  if (typeof message === 'string' && message.trim()) {
+    const msgLines = message.trim().split(/\r?\n/);
+    lines.push(...msgLines);
+  } else if (message && typeof message === 'object') {
+    if (Array.isArray(message)) {
+      lines.push(...formatMcpArray(message));
+    } else {
+      const entries = Object.entries(message as Record<string, unknown>).slice(0, 5);
+      for (const [k, v] of entries) {
+        const s = typeof v === 'string' ? v : JSON.stringify(v);
+        const short = s && s.length > 60 ? s.slice(0, 60) + '...' : s;
+        lines.push(`  ${k}: ${short}`);
+      }
+    }
+  }
+
+  if (lines.length === 0) {
+    const entries = Object.entries(obj).slice(0, 5);
+    for (const [k, v] of entries) {
+      const s = typeof v === 'string' ? v : JSON.stringify(v);
+      const short = s && s.length > 60 ? s.slice(0, 60) + '...' : s;
+      lines.push(`  ${k}: ${short}`);
+    }
+  }
+
+  return lines.length > 0 ? lines : ['Completed'];
+}
+
 function formatToolBodyLines(toolName: string, args: Record<string, unknown>, result: unknown): string[] {
   const errorText = getToolErrorText(result);
   if (errorText) {
@@ -294,6 +544,14 @@ function formatToolBodyLines(toolName: string, args: Record<string, unknown>, re
         return [`${statusMatch[1]} - Failed to fetch`];
       }
     }
+    if (toolName.startsWith('mcp__')) {
+      const statusMatch = errorText.match(/status code (\d+)/i);
+      if (statusMatch) {
+        return [`Error ${statusMatch[1]}`];
+      }
+      const short = errorText.length > 80 ? errorText.slice(0, 80) + '...' : errorText;
+      return [`Error: ${short}`];
+    }
     return [`Tool error: ${errorText}`];
   }
 
@@ -437,6 +695,9 @@ function formatToolBodyLines(toolName: string, args: Record<string, unknown>, re
     }
 
     default: {
+      if (toolName.startsWith('mcp__')) {
+        return formatMcpResultBody(result);
+      }
       const toolResultText = formatToolResult(result);
       if (!toolResultText) return [];
       return toolResultText.split(/\r?\n/);
@@ -500,4 +761,4 @@ export function getToolWrapWidth(maxWidth: number, paragraphIndex: number): numb
 
 export function formatErrorMessage(errorType: 'API' | 'Mosaic' | 'Tool', errorMessage: string): string {
   return `${errorType} Error\n${errorMessage}`;
-}
+}

package/src/web/app.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource react */
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import ReactDOM from 'react-dom/client';
 import { HomePage } from './components/HomePage';
 import { ChatPage } from './components/ChatPage';
@@ -42,9 +42,9 @@ function App() {
     const [currentConversation, setCurrentConversation] = useState<Conversation | null>(null);
     const [conversations, setConversations] = useState<Conversation[]>([]);
     const [workspace, setWorkspace] = useState<string | null>(null);
-    const [questionRequest, setQuestionRequest] = useState<QuestionRequest | null>(null);
-    const [approvalRequest, setApprovalRequest] = useState<ApprovalRequest | null>(null);
-    const [requireApprovals, setRequireApprovals] = useState(true);
+    const [questionRequest, setQuestionRequest] = useState<QuestionRequest | null>(null);
+    const [approvalRequest, setApprovalRequest] = useState<ApprovalRequest | null>(null);
+    const [requireApprovals, setRequireApprovals] = useState(true);
 
     const refreshConversations = useCallback(() => {
         setConversations(getAllConversations());
@@ -79,27 +79,27 @@ function App() {
             .then(data => setWorkspace(data.workspace))
             .catch(() => { });
 
-        fetch('/api/tui-conversations')
-            .then(res => res.ok ? res.json() : [])
-            .then((data: Conversation[]) => {
+        fetch('/api/tui-conversations')
+            .then(res => res.ok ? res.json() : [])
+            .then((data: Conversation[]) => {
                 if (Array.isArray(data) && data.length > 0) {
                     const changed = mergeConversations(data);
                     if (changed) {
                         refreshConversations();
                     }
                 }
-            })
-            .catch(() => { });
-
-        fetch('/api/approvals')
-            .then(res => res.ok ? res.json() : null)
-            .then((data) => {
-                if (data && typeof data.requireApprovals === 'boolean') {
-                    setRequireApprovals(data.requireApprovals);
-                }
-            })
-            .catch(() => { });
-    }, [refreshConversations]);
+            })
+            .catch(() => { });
+
+        fetch('/api/approvals')
+            .then(res => res.ok ? res.json() : null)
+            .then((data) => {
+                if (data && typeof data.requireApprovals === 'boolean') {
+                    setRequireApprovals(data.requireApprovals);
+                }
+            })
+            .catch(() => { });
+    }, [refreshConversations]);
 
     useEffect(() => {
         if (route.page === 'chat' && route.conversationId) {
@@ -157,15 +157,15 @@ function App() {
         }
     }, [messages, currentTitle]);
 
-    const handleSendMessage = async (content: string, images: Message['images'] = []) => {
-        if ((!content.trim() && images.length === 0) || isProcessing) return;
+    const handleSendMessage = async (content: string, images: Message['images'] = []) => {
+        if ((!content.trim() && images.length === 0) || isProcessing) return;
 
-        const userMessage: Message = {
-            id: createId(),
-            role: 'user',
-            content: content,
-            images: images.length > 0 ? images : undefined,
-        };
+        const userMessage: Message = {
+            id: createId(),
+            role: 'user',
+            content: content,
+            images: images.length > 0 ? images : undefined,
+        };
 
         let conversation = currentConversation;
         if (!conversation) {
@@ -190,13 +190,13 @@ function App() {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
-                    message: userMessage.content,
-                    images: userMessage.images || [],
-                    history: messages
-                        .filter((m) => m.role === 'user' || m.role === 'assistant')
-                        .map((m) => ({ role: m.role, content: m.content, images: m.images || [] })),
-                }),
-            });
+                    message: userMessage.content,
+                    images: userMessage.images || [],
+                    history: messages
+                        .filter((m) => m.role === 'user' || m.role === 'assistant')
+                        .map((m) => ({ role: m.role, content: m.content, images: m.images || [] })),
+                }),
+            });
 
             if (!response.ok) {
                 throw new Error(`HTTP error! status: ${response.status}`);
@@ -509,7 +509,7 @@ function App() {
         }
     };
 
-    const handleRenameConversation = (conversationId: string, newTitle: string) => {
+    const handleRenameConversation = (conversationId: string, newTitle: string) => {
         const conversation = getConversation(conversationId);
         if (conversation) {
             const updated: Conversation = {
@@ -534,26 +534,26 @@ function App() {
                 }).catch(() => { });
             }
         }
-    };
-
-    const handleToggleApprovals = async () => {
-        try {
-            const next = !requireApprovals;
-            const res = await fetch('/api/approvals', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ requireApprovals: next }),
-            });
-            if (res.ok) {
-                setRequireApprovals(next);
-                if (!next) {
-                    setApprovalRequest(null);
-                }
-            }
-        } catch (error) {
-            console.error('Failed to toggle approvals:', error);
-        }
-    };
+    };
+
+    const handleToggleApprovals = async () => {
+        try {
+            const next = !requireApprovals;
+            const res = await fetch('/api/approvals', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ requireApprovals: next }),
+            });
+            if (res.ok) {
+                setRequireApprovals(next);
+                if (!next) {
+                    setApprovalRequest(null);
+                }
+            }
+        } catch (error) {
+            console.error('Failed to toggle approvals:', error);
+        }
+    };
 
     const handleNavigateHome = () => {
         navigateTo({ page: 'home' });
@@ -605,22 +605,22 @@ function App() {
                     sidebarProps={sidebarProps}
                 />
             ) : (
-                <ChatPage
-                    messages={messages}
-                    isProcessing={isProcessing}
-                    processingStartTime={processingStartTime}
-                    currentTokens={currentTokens}
-                    onSendMessage={handleSendMessage}
-                    onStopAgent={handleStopAgent}
-                    sidebarProps={sidebarProps}
-                    currentTitle={currentTitle}
-                    workspace={workspace}
-                    questionRequest={questionRequest}
-                    approvalRequest={approvalRequest}
-                    requireApprovals={requireApprovals}
-                    onToggleApprovals={handleToggleApprovals}
-                />
-            )}
+                <ChatPage
+                    messages={messages}
+                    isProcessing={isProcessing}
+                    processingStartTime={processingStartTime}
+                    currentTokens={currentTokens}
+                    onSendMessage={handleSendMessage}
+                    onStopAgent={handleStopAgent}
+                    sidebarProps={sidebarProps}
+                    currentTitle={currentTitle}
+                    workspace={workspace}
+                    questionRequest={questionRequest}
+                    approvalRequest={approvalRequest}
+                    requireApprovals={requireApprovals}
+                    onToggleApprovals={handleToggleApprovals}
+                />
+            )}
 
             <Modal
                 isOpen={activeModal === 'settings'}
@@ -663,4 +663,4 @@ function App() {
 
 
 const root = ReactDOM.createRoot(document.getElementById('root')!);
-root.render(<App />);
+root.render(<App />);

package/src/web/components/HomePage.tsx

@@ -11,11 +11,11 @@ interface RecentProject {
     lastOpened: number;
 }
 
-interface HomePageProps {
-    onStartChat: (message: string, images?: import("../../utils/images").ImageAttachment[]) => void;
-    onOpenProject: (path: string) => void;
-    sidebarProps: SidebarProps;
-}
+interface HomePageProps {
+    onStartChat: (message: string, images?: import("../../utils/images").ImageAttachment[]) => void;
+    onOpenProject: (path: string) => void;
+    sidebarProps: SidebarProps;
+}
 
 function formatRelativeTime(timestamp: number): string {
     const now = Date.now();
@@ -31,7 +31,7 @@ function formatRelativeTime(timestamp: number): string {
     return `${days} day${days !== 1 ? 's' : ''} ago`;
 }
 
-export function HomePage({ onStartChat, onOpenProject, sidebarProps }: HomePageProps) {
+export function HomePage({ onStartChat: _onStartChat, onOpenProject, sidebarProps }: HomePageProps) {
     const [recentProjects, setRecentProjects] = useState<RecentProject[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [showFileExplorer, setShowFileExplorer] = useState(false);
@@ -118,4 +118,4 @@ export function HomePage({ onStartChat, onOpenProject, sidebarProps }: HomePageP
             </Modal>
         </div>
     );
-}
+}

package/src/web/components/MessageItem.tsx

@@ -4,8 +4,8 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { Message } from '../types';
-import { toDataUrl } from '../../utils/images';
+import { Message } from '../types';
+import { toDataUrl } from '../../utils/images';
 import { parseDiffLine, getDiffLineColors } from '../utils';
 import '../assets/css/global.css'
 
@@ -57,7 +57,7 @@ function renderToolLine(line: string, index: number): React.ReactElement {
         return (
             <div key={index} className="tool-line plan-line">
                 <span className="plan-indent">{leading || ''}</span>
-                <span className="plan-prefix">></span>
+                <span className="plan-prefix">{'>'}</span>
                 <span> </span>
                 {bracket && <span className={`plan-bracket${isActive ? ' active' : ''}`}>{bracket}</span>}
                 {bracket && <span> </span>}
@@ -157,22 +157,22 @@ export function MessageItem({ message }: MessageItemProps) {
         );
     }
 
-    const hasImages = Array.isArray(message.images) && message.images.length > 0;
-
-    return (
-        <div className={`message ${message.role} ${message.isError ? 'error' : ''}`}>
-            <div className="message-content">
-                {hasImages && (
-                    <div className="message-images">
-                        {message.images!.map((img) => (
-                            <img key={img.id} src={toDataUrl(img)} alt={img.name} />
-                        ))}
-                    </div>
-                )}
-                <div className="message-text">
-                    {message.displayContent || message.content}
-                </div>
-            </div>
-        </div>
-    );
-}
+    const hasImages = Array.isArray(message.images) && message.images.length > 0;
+
+    return (
+        <div className={`message ${message.role} ${message.isError ? 'error' : ''}`}>
+            <div className="message-content">
+                {hasImages && (
+                    <div className="message-images">
+                        {message.images!.map((img) => (
+                            <img key={img.id} src={toDataUrl(img)} alt={img.name} />
+                        ))}
+                    </div>
+                )}
+                <div className="message-text">
+                    {message.displayContent || message.content}
+                </div>
+            </div>
+        </div>
+    );
+}