@kirosnn/mosaic 0.73.0 → 0.74.0

package/src/utils/markdown.tsx

@@ -1,10 +1,22 @@
 import { TextAttributes } from "@opentui/core";
 
-export interface MarkdownSegment {
-  type: 'text' | 'bold' | 'italic' | 'code' | 'heading' | 'listitem';
-  content: string;
-  level?: number;
-}
+export interface MarkdownSegment {
+  type: 'text' | 'bold' | 'italic' | 'code' | 'heading' | 'listitem' | 'link';
+  content: string;
+  level?: number;
+  href?: string;
+}
+
+const linkSchemePattern = /^[a-zA-Z][a-zA-Z0-9+.-]*:/;
+
+function normalizeLinkUri(href: string) {
+  const trimmed = href.trim();
+  if (!trimmed) return trimmed;
+  if (linkSchemePattern.test(trimmed)) return trimmed;
+  if (trimmed.startsWith('//')) return `https:${trimmed}`;
+  if (trimmed.startsWith('/') || trimmed.startsWith('#') || trimmed.startsWith('.') || trimmed.startsWith('?')) return trimmed;
+  return `https://${trimmed}`;
+}
 
 function parseInline(text: string): MarkdownSegment[] {
   const segments: MarkdownSegment[] = [];
@@ -30,21 +42,36 @@ function parseInline(text: string): MarkdownSegment[] {
       }
     }
 
-    if (text.substring(i, i + 2) === '**') {
-      const j = text.indexOf('**', i + 2);
-      if (j !== -1) {
-        flushText();
-        segments.push({ type: 'bold', content: text.substring(i + 2, j) });
-        i = j + 2;
-        continue;
-      }
-    }
-
-    if (text[i] === '*' && text.substring(i, i + 2) !== '**') {
-      const j = text.indexOf('*', i + 1);
-      if (j !== -1) {
-        flushText();
-        segments.push({ type: 'italic', content: text.substring(i + 1, j) });
+    if (text.substring(i, i + 2) === '**') {
+      const j = text.indexOf('**', i + 2);
+      if (j !== -1) {
+        flushText();
+        segments.push({ type: 'bold', content: text.substring(i + 2, j) });
+        i = j + 2;
+        continue;
+      }
+    }
+
+    if (text[i] === '[') {
+      const labelEnd = text.indexOf(']', i + 1);
+      if (labelEnd !== -1 && text[labelEnd + 1] === '(') {
+        const urlEnd = text.indexOf(')', labelEnd + 2);
+        if (urlEnd !== -1) {
+          const label = text.substring(i + 1, labelEnd);
+          const href = text.substring(labelEnd + 2, urlEnd).trim();
+          flushText();
+          segments.push({ type: 'link', content: label, href });
+          i = urlEnd + 1;
+          continue;
+        }
+      }
+    }
+
+    if (text[i] === '*' && text.substring(i, i + 2) !== '**') {
+      const j = text.indexOf('*', i + 1);
+      if (j !== -1) {
+        flushText();
+        segments.push({ type: 'italic', content: text.substring(i + 1, j) });
         i = j + 1;
         continue;
       }
@@ -82,12 +109,19 @@ export function renderMarkdownSegment(segment: MarkdownSegment, key: number) {
     case 'italic':
       return <text key={key} fg="white" attributes={TextAttributes.DIM}>{segment.content}</text>;
 
-    case 'code':
-      return <text key={key} fg="#ffdd80">{`${segment.content}`}</text>;
-
-    case 'heading':
-      return <text key={key} fg="#ffca38" attributes={TextAttributes.BOLD}>{segment.content}</text>;
-
+    case 'code':
+      return <text key={key} fg="#ffdd80">{`${segment.content}`}</text>;
+
+    case 'heading':
+      return <text key={key} fg="#ffca38" attributes={TextAttributes.BOLD}>{segment.content}</text>;
+
+    case 'link':
+      return (
+        <text key={key} fg="#7fbfff" attributes={TextAttributes.UNDERLINE}>
+          <a href={normalizeLinkUri(segment.href || '')}>{segment.content}</a>
+        </text>
+      );
+
     case 'listitem':
       return (
         <box key={key} flexDirection="row">

package/src/utils/toolFormatting.ts

@@ -1,4 +1,5 @@
 import { formatWriteToolResult, formatEditToolResult } from './diff';
+import { isNativeMcpTool, getNativeMcpToolName } from '../mcp/types';
 
 const TOOL_BODY_INDENT = 2;
 
@@ -32,7 +33,21 @@ function getMcpToolDisplayName(tool: string): string {
   return words.split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
 }
 
+function getNativeToolDisplayName(safeId: string): string | null {
+  const toolName = getNativeMcpToolName(safeId);
+  if (!toolName) return null;
+  const mcp = parseMcpSafeId(safeId);
+  if (!mcp) return null;
+  const serverPrefix = mcp.serverId + '_';
+  const stripped = toolName.startsWith(serverPrefix) ? toolName.slice(serverPrefix.length) : toolName;
+  return getMcpToolDisplayName(stripped);
+}
+
 function getToolDisplayName(toolName: string): string {
+  if (isNativeMcpTool(toolName)) {
+    const nativeName = getNativeToolDisplayName(toolName);
+    if (nativeName) return nativeName;
+  }
   const mcp = parseMcpSafeId(toolName);
   if (mcp) {
     return getMcpToolDisplayName(mcp.tool);
@@ -143,6 +158,15 @@ function formatKnownToolArgs(toolName: string, args: Record<string, unknown>): s
   }
 }
 
+function formatNativeMcpError(errorText: string): string[] {
+  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}`];
+}
+
 export function isToolSuccess(result: unknown): boolean {
   if (result === null || result === undefined) return false;
 
@@ -211,6 +235,9 @@ function formatToolHeader(toolName: string, args: Record<string, unknown>): stri
     default: {
       if (toolName.startsWith('mcp__')) {
         const info = getMcpHeaderInfo('', args);
+        if (isNativeMcpTool(toolName)) {
+          return info ? `${displayName} (${info})` : displayName;
+        }
         return info ? `${displayName} ("${info}")` : displayName;
       }
       return displayName;
@@ -297,6 +324,10 @@ export function parseToolHeader(toolName: string, args: Record<string, unknown>)
   }
 }
 
+export function isNativeMcpToolName(toolName: string): boolean {
+  return isNativeMcpTool(toolName);
+}
+
 function getLineCount(text: string): number {
   if (!text) return 0;
   return text.split(/\r?\n/).length;
@@ -384,6 +415,24 @@ function getToolErrorText(result: unknown): string | null {
   return typeof error === 'string' && error.trim() ? error.trim() : null;
 }
 
+function formatSearchResultBody(result: unknown): string[] {
+  if (typeof result !== 'string') return [];
+  try {
+    const parsed = JSON.parse(result);
+    if (typeof parsed !== 'object' || parsed === null) return [];
+
+    if (typeof parsed.error === 'string') {
+      return [`Error: ${parsed.error}`];
+    }
+
+    const count = typeof parsed.resultCount === 'number' ? parsed.resultCount : 0;
+    if (count === 0) return ['No results'];
+    return [`${count} results`];
+  } catch {
+    return [];
+  }
+}
+
 function formatMcpResultBody(result: unknown): string[] {
   if (typeof result !== 'string') {
     if (result && typeof result === 'object') {
@@ -545,12 +594,7 @@ function formatToolBodyLines(toolName: string, args: Record<string, unknown>, re
       }
     }
     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 formatNativeMcpError(errorText);
     }
     return [`Tool error: ${errorText}`];
   }
@@ -696,6 +740,11 @@ function formatToolBodyLines(toolName: string, args: Record<string, unknown>, re
 
     default: {
       if (toolName.startsWith('mcp__')) {
+        const nativeName = getNativeMcpToolName(toolName);
+        if (nativeName === 'navigation_search') {
+          const searchLines = formatSearchResultBody(result);
+          if (searchLines.length > 0) return searchLines;
+        }
         return formatMcpResultBody(result);
       }
       const toolResultText = formatToolResult(result);

package/src/web/components/MessageItem.tsx

@@ -6,15 +6,33 @@ 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 { parseDiffLine, getDiffLineColors } from '../utils';
-import '../assets/css/global.css'
-
-interface MessageItemProps {
-    message: Message;
-}
-
-function renderDiffLine(line: string, index: number): React.ReactElement {
-    const parsed = parseDiffLine(line);
+import { parseDiffLine, getDiffLineColors } from '../utils';
+import '../assets/css/global.css'
+
+interface MessageItemProps {
+    message: Message;
+}
+
+const linkSchemePattern = /^[a-zA-Z][a-zA-Z0-9+.-]*:/;
+
+function normalizeLinkUri(href: string) {
+    const trimmed = href.trim();
+    if (!trimmed) return trimmed;
+    if (linkSchemePattern.test(trimmed)) return trimmed;
+    if (trimmed.startsWith('//')) return `https:${trimmed}`;
+    if (trimmed.startsWith('/') || trimmed.startsWith('#') || trimmed.startsWith('.') || trimmed.startsWith('?')) return trimmed;
+    return `https://${trimmed}`;
+}
+
+function handleMarkdownLinkClick(event: React.MouseEvent<HTMLAnchorElement>, href?: string | null) {
+    if (!href) return;
+    if (!event.ctrlKey && !event.metaKey) return;
+    event.preventDefault();
+    window.open(href, "_blank", "noopener,noreferrer");
+}
+
+function renderDiffLine(line: string, index: number): React.ReactElement {
+    const parsed = parseDiffLine(line);
 
     if (!parsed.isDiffLine) {
         return (
@@ -126,10 +144,23 @@ export function MessageItem({ message }: MessageItemProps) {
                         </details>
                     )}
                     <div className="markdown-content">
-                        <ReactMarkdown
-                            remarkPlugins={[remarkGfm]}
-                            components={{
-                                code({ node, className, children, ...props }) {
+                        <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            transformLinkUri={normalizeLinkUri}
+                            components={{
+                                a({ href, children, ...props }) {
+                                    const normalized = normalizeLinkUri(href || '');
+                                    return (
+                                        <a
+                                            href={normalized}
+                                            onClick={(event) => handleMarkdownLinkClick(event, normalized)}
+                                            {...props}
+                                        >
+                                            {children}
+                                        </a>
+                                    );
+                                },
+                                code({ node, className, children, ...props }) {
                                     const match = /language-(\w+)/.exec(className || '');
                                     const { ref, ...rest } = props as any;
                                     return match ? (