@kirosnn/mosaic 0.0.9 → 0.71.0

package/src/utils/toolFormatting.ts

@@ -9,12 +9,13 @@ const TOOL_DISPLAY_NAMES: Record<string, string> = {
   write: 'Write',
   edit: 'Edit',
   list: 'List',
-  create_directory: 'Mkdir',
   glob: 'Glob',
   grep: 'Grep',
   bash: 'Command',
   question: 'Question',
   explore: 'Explore',
+  fetch: 'Fetch',
+  plan: 'Plan',
 };
 
 function getToolDisplayName(toolName: string): string {
@@ -48,11 +49,15 @@ function formatKnownToolArgs(toolName: string, args: Record<string, unknown>): s
     case 'write':
     case 'edit':
     case 'list':
-    case 'create_directory':
     case 'glob':
     case 'grep':
     case 'bash':
-    case 'explore': {
+    case 'explore':
+    case 'fetch': {
+      return null;
+    }
+
+    case 'plan': {
       return null;
     }
 
@@ -89,37 +94,83 @@ export function isToolSuccess(result: unknown): boolean {
 
 function formatToolHeader(toolName: string, args: Record<string, unknown>): string {
   const displayName = getToolDisplayName(toolName);
-  const path = typeof args.path === 'string' ? args.path : '';
 
   switch (toolName) {
     case 'read':
+      const readPath = typeof args.path === 'string' ? args.path : '';
+      return readPath ? `${displayName} (${readPath})` : displayName;
     case 'write':
+      const writePath = typeof args.path === 'string' ? args.path : '';
+      return writePath ? `${displayName} (${writePath})` : displayName;
     case 'edit':
+      const editPath = typeof args.path === 'string' ? args.path : '';
+      return editPath ? `${displayName} (${editPath})` : displayName;
     case 'list':
-    case 'create_directory':
-      return path ? `${displayName} (${path})` : displayName;
+      const listPath = typeof args.path === 'string' ? args.path : '';
+      return listPath ? `${displayName} (${listPath})` : displayName;
     case 'glob': {
       const pattern = typeof args.pattern === 'string' ? args.pattern : '';
       return pattern ? `${displayName} (${pattern})` : displayName;
     }
     case 'grep': {
-      const pattern = typeof args.file_pattern === 'string' ? args.file_pattern : '';
-      return pattern ? `${displayName} (pattern: ${pattern})` : displayName;
+      const query = typeof args.query === 'string' ? args.query : '';
+      const fileType = typeof args.file_type === 'string' ? args.file_type : '';
+      const pattern = typeof args.pattern === 'string' ? args.pattern : '';
+      const info = fileType ? `*.${fileType}` : pattern;
+      const cleanQuery = query.replace(/[\r\n]+/g, ' ').trim();
+      const queryShort = cleanQuery.length > 30 ? cleanQuery.slice(0, 30) + '...' : cleanQuery;
+      return info ? `${displayName} ("${queryShort}" in ${info})` : `${displayName} ("${queryShort}")`;
     }
     case 'bash': {
       const command = typeof args.command === 'string' ? args.command : '';
-      const cleanCommand = command.replace(/\s+--timeout\s+\d+$/, '');
+      const cleanCommand = command.replace(/[\r\n]+/g, ' ').trim().replace(/\s+--timeout\s+\d+$/, '');
       return cleanCommand ? `${displayName} (${cleanCommand})` : displayName;
     }
     case 'explore': {
       const purpose = typeof args.purpose === 'string' ? args.purpose : '';
-      return purpose ? `${displayName} (${purpose})` : displayName;
+      const cleanPurpose = purpose.replace(/[\r\n]+/g, ' ').trim();
+      return cleanPurpose ? `${displayName} (${cleanPurpose})` : displayName;
     }
+    case 'fetch': {
+      const url = typeof args.url === 'string' ? args.url : '';
+      try {
+        const urlObj = new URL(url);
+        const shortUrl = urlObj.hostname + (urlObj.pathname !== '/' ? urlObj.pathname : '');
+        return shortUrl ? `${displayName} (${shortUrl})` : displayName;
+      } catch {
+        return url ? `${displayName} (${url})` : displayName;
+      }
+    }
+    case 'plan':
+      return displayName;
     default:
       return displayName;
   }
 }
 
+function formatPlanHeader(result: unknown): string {
+  const displayName = getToolDisplayName('plan');
+  if (!result || typeof result !== 'object') return displayName;
+  const obj = result as Record<string, unknown>;
+  const planItems = Array.isArray(obj.plan) ? obj.plan : [];
+  const total = planItems.length;
+  if (total === 0) return displayName;
+
+  let completed = 0;
+  let inProgress = 0;
+
+  for (const item of planItems) {
+    if (!item || typeof item !== 'object') continue;
+    const status = typeof (item as Record<string, unknown>).status === 'string'
+      ? (item as Record<string, unknown>).status
+      : 'pending';
+    if (status === 'completed') completed += 1;
+    if (status === 'in_progress') inProgress += 1;
+  }
+
+  return `${displayName} (${completed}/${total} done, ${inProgress} in progress)`;
+}
+
 export function parseToolHeader(toolName: string, args: Record<string, unknown>): { name: string; info: string | null } {
   const displayName = getToolDisplayName(toolName);
   const path = typeof args.path === 'string' ? args.path : '';
@@ -136,18 +187,36 @@ export function parseToolHeader(toolName: string, args: Record<string, unknown>)
       return { name: displayName, info: pattern || null };
     }
     case 'grep': {
-      const pattern = typeof args.file_pattern === 'string' ? args.file_pattern : '';
-      return { name: displayName, info: pattern ? `pattern: ${pattern}` : null };
+      const query = typeof args.query === 'string' ? args.query : '';
+      const fileType = typeof args.file_type === 'string' ? args.file_type : '';
+      const pattern = typeof args.pattern === 'string' ? args.pattern : '';
+      const fileInfo = fileType ? `*.${fileType}` : pattern;
+      const cleanQuery = query.replace(/[\r\n]+/g, ' ').trim();
+      const queryShort = cleanQuery.length > 30 ? cleanQuery.slice(0, 30) + '...' : cleanQuery;
+      const info = fileInfo ? `"${queryShort}" in ${fileInfo}` : `"${queryShort}"`;
+      return { name: displayName, info };
     }
     case 'bash': {
       const command = typeof args.command === 'string' ? args.command : '';
-      const cleanCommand = command.replace(/\s+--timeout\s+\d+$/, '');
+      const cleanCommand = command.replace(/[\r\n]+/g, ' ').trim().replace(/\s+--timeout\s+\d+$/, '');
       return { name: displayName, info: cleanCommand || null };
     }
     case 'explore': {
       const purpose = typeof args.purpose === 'string' ? args.purpose : '';
       return { name: displayName, info: purpose || null };
     }
+    case 'fetch': {
+      const url = typeof args.url === 'string' ? args.url : '';
+      try {
+        const urlObj = new URL(url);
+        const shortUrl = urlObj.hostname + (urlObj.pathname !== '/' ? urlObj.pathname : '');
+        return { name: displayName, info: shortUrl || null };
+      } catch {
+        return { name: displayName, info: url || null };
+      }
+    }
+    case 'plan':
+      return { name: displayName, info: null };
     default:
       return { name: displayName, info: null };
   }
@@ -188,38 +257,18 @@ function formatListTree(result: unknown): string[] {
 }
 
 function formatGrepResult(result: unknown): string[] {
-  if (typeof result !== 'string') return [];
+  if (typeof result !== 'string') return ['No results returned'];
+
   try {
     const parsed = JSON.parse(result);
 
-    if (Array.isArray(parsed)) {
-      if (parsed.length === 0) return ['No results'];
-
-      if (typeof parsed[0] === 'string') {
-        return parsed.map(file => `  ${file}`);
-      }
-
-      if (typeof parsed[0] === 'object' && parsed[0] !== null) {
-        const lines: string[] = [];
-        for (const item of parsed) {
-          if (item.file) {
-            lines.push(`${item.file}:`);
-            if (Array.isArray(item.matches)) {
-              for (const match of item.matches) {
-                if (match.line && match.content) {
-                  lines.push(`  ${match.line}: ${match.content.trim()}`);
-                }
-              }
-            }
-          }
-        }
-        return lines.length > 0 ? lines : ['No matches'];
-      }
+    if (typeof parsed.total_matches === 'number' && typeof parsed.files_with_matches === 'number') {
+      return [`${parsed.total_matches} matches in ${parsed.files_with_matches} files`];
     }
 
-    return [result];
+    return ['No results returned'];
   } catch {
-    return typeof result === 'string' ? [result] : [];
+    return ['No results returned'];
   }
 }
 
@@ -238,7 +287,15 @@ function getToolErrorText(result: unknown): string | null {
 
 function formatToolBodyLines(toolName: string, args: Record<string, unknown>, result: unknown): string[] {
   const errorText = getToolErrorText(result);
-  if (errorText) return [`Tool error: ${errorText}`];
+  if (errorText) {
+    if (toolName === 'fetch') {
+      const statusMatch = errorText.match(/HTTP (\d+(?: [a-zA-Z ]+)?)/);
+      if (statusMatch) {
+        return [`${statusMatch[1]} - Failed to fetch`];
+      }
+    }
+    return [`Tool error: ${errorText}`];
+  }
 
   switch (toolName) {
     case 'read': {
@@ -318,6 +375,67 @@ function formatToolBodyLines(toolName: string, args: Record<string, unknown>, re
       return ['Exploration completed'];
     }
 
+    case 'fetch': {
+      if (typeof result === 'string') {
+        const url = typeof args.url === 'string' ? args.url : 'URL';
+        const statusMatch = result.match(/\*\*Status:\*\* (\d+(?: [a-zA-Z ]+)?)/);
+        if (statusMatch) {
+          return [`${statusMatch[1]} - Fetched ${url}`];
+        }
+        return [`Fetched ${url}`];
+      }
+      return ['Fetch completed'];
+    }
+
+    case 'plan': {
+      if (result && typeof result === 'object') {
+        const obj = result as Record<string, unknown>;
+        const explanation = typeof obj.explanation === 'string' ? obj.explanation.trim() : '';
+        const planItems = Array.isArray(obj.plan) ? obj.plan : [];
+        const lines: string[] = [];
+
+        if (explanation) {
+          lines.push(explanation);
+        }
+
+        const normalized = planItems
+          .map((item) => {
+            if (!item || typeof item !== 'object') return null;
+            const entry = item as Record<string, unknown>;
+            const step = typeof entry.step === 'string' ? entry.step : '';
+            const status = typeof entry.status === 'string' ? entry.status : 'pending';
+            if (!step.trim()) return null;
+            return { step: step.trim(), status };
+          })
+          .filter((item): item is { step: string; status: string } => !!item);
+
+        const inProgressItems = normalized.filter(item => item.status === 'in_progress');
+        const pendingItems = normalized.filter(item => item.status === 'pending');
+        const completedItems = normalized.filter(item => item.status === 'completed');
+
+        const sectionPrefix = '  ';
+        const itemPrefix = '      ';
+        const arrowPrefix = '> ';
+
+        const addSection = (label: string, items: Array<{ step: string; status: string }>, activeStep: string | null, marker: string) => {
+          if (items.length === 0) return;
+          lines.push(`${sectionPrefix}${label} (${items.length})`);
+          for (const item of items) {
+            const isActive = activeStep !== null && item.step === activeStep;
+            const prefix = isActive ? arrowPrefix : arrowPrefix;
+            lines.push(`${itemPrefix}${prefix}${marker} ${item.step}`);
+          }
+        };
+
+        addSection('In progress', inProgressItems, inProgressItems[0]?.step ?? null, '[~]');
+        addSection('Todo', pendingItems, null, '[ ]');
+        addSection('Completed', completedItems, null, '[✓]');
+
+        return lines.length > 0 ? lines : ['(no steps)'];
+      }
+      return ['(no steps)'];
+    }
+
     default: {
       const toolResultText = formatToolResult(result);
       if (!toolResultText) return [];
@@ -334,7 +452,8 @@ export function formatToolContent(
     maxLines?: number;
   }
 ): string {
-  const lines: string[] = [formatToolHeader(toolName, args)];
+  const header = toolName === 'plan' ? formatPlanHeader(result) : formatToolHeader(toolName, args);
+  const lines: string[] = [header];
 
   const argsLine = formatKnownToolArgs(toolName, args);
   if (argsLine) lines.push(argsLine);
@@ -342,7 +461,7 @@ export function formatToolContent(
   const bodyLines = formatToolBodyLines(toolName, args, result);
   for (const line of bodyLines) lines.push(line);
 
-  const skipTruncate = toolName === 'write' || toolName === 'edit';
+  const skipTruncate = toolName === 'write' || toolName === 'edit' || toolName === 'plan';
   if (skipTruncate) {
     return lines.join('\n');
   }
@@ -381,4 +500,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

@@ -5,7 +5,7 @@ import { HomePage } from './components/HomePage';
 import { ChatPage } from './components/ChatPage';
 import { Message } from './types';
 import { createId, extractTitle, setDocumentTitle, formatToolMessage, parseToolHeader, formatErrorMessage, DEFAULT_MAX_TOOL_LINES, getRandomBlendWord } from './utils';
-import { Conversation, getAllConversations, getConversation, saveConversation, deleteConversation, createNewConversation } from './storage';
+import { Conversation, getAllConversations, getConversation, saveConversation, deleteConversation, createNewConversation, mergeConversations } from './storage';
 import { QuestionRequest } from '../utils/questionBridge';
 import { ApprovalRequest } from '../utils/approvalBridge';
 import { parseRoute, navigateTo, replaceTo, Route } from './router';
@@ -42,8 +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 [questionRequest, setQuestionRequest] = useState<QuestionRequest | null>(null);
+    const [approvalRequest, setApprovalRequest] = useState<ApprovalRequest | null>(null);
+    const [requireApprovals, setRequireApprovals] = useState(true);
 
     const refreshConversations = useCallback(() => {
         setConversations(getAllConversations());
@@ -77,7 +78,28 @@ function App() {
             .then(res => res.json())
             .then(data => setWorkspace(data.workspace))
             .catch(() => { });
-    }, [refreshConversations]);
+
+        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]);
 
     useEffect(() => {
         if (route.page === 'chat' && route.conversationId) {
@@ -135,14 +157,15 @@ function App() {
         }
     }, [messages, currentTitle]);
 
-    const handleSendMessage = async (content: string) => {
-        if (!content.trim() || 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,
-        };
+        const userMessage: Message = {
+            id: createId(),
+            role: 'user',
+            content: content,
+            images: images.length > 0 ? images : undefined,
+        };
 
         let conversation = currentConversation;
         if (!conversation) {
@@ -167,12 +190,13 @@ function App() {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
-                    message: userMessage.content,
-                    history: messages
-                        .filter((m) => m.role === 'user' || m.role === 'assistant')
-                        .map((m) => ({ role: m.role, content: m.content })),
-                }),
-            });
+                    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}`);
@@ -470,6 +494,13 @@ function App() {
     };
 
     const handleDeleteConversation = (conversationId: string) => {
+        if (conversationId.startsWith('tui_')) {
+            fetch('/api/tui-conversation/delete', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ id: conversationId }),
+            }).catch(() => { });
+        }
         deleteConversation(conversationId);
         refreshConversations();
 
@@ -478,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 = {
@@ -494,8 +525,35 @@ function App() {
                 setCurrentTitle(newTitle);
                 setDocumentTitle(newTitle);
             }
+
+            if (conversationId.startsWith('tui_')) {
+                fetch('/api/tui-conversation/rename', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ id: conversationId, title: newTitle }),
+                }).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 handleNavigateHome = () => {
         navigateTo({ page: 'home' });
@@ -547,20 +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}
-                />
-            )}
+                <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'}
@@ -603,4 +663,4 @@ function App() {
 
 
 const root = ReactDOM.createRoot(document.getElementById('root')!);
-root.render(<App />);
+root.render(<App />);

package/src/web/assets/css/ChatPage.css

@@ -7,17 +7,18 @@
     overflow: hidden;
 }
 
-.chat-title-bar {
-    display: flex;
-    align-items: center;
-    padding: 0.75rem 1.5rem;
-    flex-shrink: 0;
-    width: 100%;
-    left: 0;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-}
+.chat-title-bar {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    flex-shrink: 0;
+    width: 100%;
+    left: 0;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    gap: 0.75rem;
+}
 
 .chat-title {
     font-size: 0.9rem;
@@ -27,13 +28,42 @@
     cursor: default;
 }
 
-.chat-workspace {
-    margin-left: auto;
-    font-size: 0.9rem;
-    font-family: 'Geist Medium Monospace', monospace;
-    color: var(--text-secondary);
-    cursor: default;
-}
+.chat-workspace {
+    font-size: 0.9rem;
+    font-family: 'Geist Medium Monospace', monospace;
+    color: var(--text-secondary);
+    cursor: default;
+}
+
+.chat-title-actions {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.approval-toggle {
+    border: 1px solid var(--border-subtle);
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    padding: 0.35rem 0.65rem;
+    border-radius: 999px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.approval-toggle:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    border-color: var(--text-muted);
+}
+
+.approval-toggle.active {
+    background: var(--accent-color);
+    border-color: var(--accent-color);
+    color: white;
+}
 
 .chat-container {
     display: flex;
@@ -73,11 +103,11 @@
     gap: 0;
 }
 
-.input-area textarea {
-    width: 100%;
-    background: transparent;
-    border: none;
-    color: var(--text-primary);
+.input-area textarea {
+    width: 100%;
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
     font-size: 1rem;
     font-family: inherit;
     resize: none;
@@ -85,12 +115,54 @@
     min-height: 60px;
     max-height: 200px;
     padding: 0;
-    line-height: 1.5;
-}
-
-.input-area textarea::placeholder {
-    color: var(--text-muted);
-}
+    line-height: 1.5;
+}
+
+.input-area textarea::placeholder {
+    color: var(--text-muted);
+}
+
+.attachment-strip {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    padding-bottom: 0.5rem;
+}
+
+.attachment-item {
+    position: relative;
+    width: 64px;
+    height: 64px;
+    border-radius: 10px;
+    overflow: hidden;
+    border: 1px solid var(--border-code);
+    background: var(--bg-code);
+}
+
+.attachment-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.attachment-item button {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.attachment-item button:hover {
+    background: rgba(0, 0, 0, 0.8);
+}
 
 .input-area textarea:disabled {
     opacity: 0.5;
@@ -209,4 +281,4 @@
 
 .send-btn.stop:hover {
     background: #ff3333;
-}
+}