@kirosnn/mosaic 0.0.91 → 0.73.0

package/src/web/components/ChatPage.tsx

@@ -1,29 +1,33 @@
 /** @jsxImportSource react */
 import React, { useState, useEffect, useRef } from 'react';
-import { Message } from '../types';
-import { MessageItem } from './MessageItem';
-import { Sidebar, SidebarProps } from './Sidebar';
-import { QuestionRequest } from '../../utils/questionBridge';
-import { ApprovalRequest } from '../../utils/approvalBridge';
-import { QuestionPanel } from './QuestionPanel';
-import { ApprovalPanel } from './ApprovalPanel';
-import { ThinkingIndicator } from './ThinkingIndicator';
-import { findModelsDevModelById, modelAcceptsImages } from '../../utils/models';
-import '../assets/css/global.css'
-
-interface ChatPageProps {
-    messages: Message[];
-    isProcessing: boolean;
-    processingStartTime?: number;
-    currentTokens?: number;
-    onSendMessage: (message: string) => void;
-    onStopAgent?: () => void;
-    sidebarProps: SidebarProps;
-    currentTitle?: string | null;
-    workspace?: string | null;
-    questionRequest?: QuestionRequest | null;
-    approvalRequest?: ApprovalRequest | null;
-}
+import { Message } from '../types';
+import { MessageItem } from './MessageItem';
+import { Sidebar, SidebarProps } from './Sidebar';
+import { QuestionRequest } from '../../utils/questionBridge';
+import { ApprovalRequest } from '../../utils/approvalBridge';
+import { QuestionPanel } from './QuestionPanel';
+import { ApprovalPanel } from './ApprovalPanel';
+import { ThinkingIndicator } from './ThinkingIndicator';
+import { findModelsDevModelById, modelAcceptsImages } from '../../utils/models';
+import type { ImageAttachment } from '../../utils/images';
+import { guessImageMimeType, toDataUrl } from '../../utils/images';
+import '../assets/css/global.css'
+
+interface ChatPageProps {
+    messages: Message[];
+    isProcessing: boolean;
+    processingStartTime?: number;
+    currentTokens?: number;
+    onSendMessage: (message: string, images?: ImageAttachment[]) => void;
+    onStopAgent?: () => void;
+    sidebarProps: SidebarProps;
+    currentTitle?: string | null;
+    workspace?: string | null;
+    questionRequest?: QuestionRequest | null;
+    approvalRequest?: ApprovalRequest | null;
+    requireApprovals: boolean;
+    onToggleApprovals: () => void;
+}
 
 function formatWorkspace(path: string | null | undefined): string {
     if (!path) return '';
@@ -55,11 +59,54 @@ function formatWorkspace(path: string | null | undefined): string {
     return normalized;
 }
 
-export function ChatPage({ messages, isProcessing, processingStartTime, currentTokens, onSendMessage, onStopAgent, sidebarProps, currentTitle, workspace, questionRequest, approvalRequest }: ChatPageProps) {
-    const [inputValue, setInputValue] = useState('');
-    const [showAttachButton, setShowAttachButton] = useState(false);
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    const inputRef = useRef<HTMLTextAreaElement>(null);
+function getPlanProgress(messages: Message[]): { inProgressStep?: string; nextStep?: string } {
+    for (let i = messages.length - 1; i >= 0; i -= 1) {
+        const message = messages[i];
+        if (!message || message.role !== 'tool' || message.toolName !== 'plan') continue;
+        const result = message.toolResult;
+        if (!result || typeof result !== 'object') continue;
+        const obj = result as Record<string, unknown>;
+        const planItems = Array.isArray(obj.plan) ? obj.plan : [];
+        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.trim() : '';
+                const status = typeof entry.status === 'string' ? entry.status : 'pending';
+                if (!step) return null;
+                return { step, status };
+            })
+            .filter((item): item is { step: string; status: string } => !!item);
+
+        if (normalized.length === 0) return {};
+
+        const inProgressIndex = normalized.findIndex(item => item.status === 'in_progress');
+        const inProgressStep = inProgressIndex >= 0 ? normalized[inProgressIndex]?.step : undefined;
+        let nextStep: string | undefined;
+
+        if (inProgressIndex >= 0) {
+            const after = normalized.slice(inProgressIndex + 1).find(item => item.status === 'pending');
+            nextStep = after?.step;
+        }
+
+        if (!nextStep) {
+            nextStep = normalized.find(item => item.status === 'pending')?.step;
+        }
+
+        return { inProgressStep, nextStep };
+    }
+
+    return {};
+}
+
+export function ChatPage({ messages, isProcessing, processingStartTime, currentTokens, onSendMessage, onStopAgent, sidebarProps, currentTitle, workspace, questionRequest, approvalRequest, requireApprovals, onToggleApprovals }: ChatPageProps) {
+    const [inputValue, setInputValue] = useState('');
+    const [showAttachButton, setShowAttachButton] = useState(false);
+    const [pendingImages, setPendingImages] = useState<ImageAttachment[]>([]);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLTextAreaElement>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const planProgress = getPlanProgress(messages);
 
     useEffect(() => {
         if (messagesEndRef.current) {
@@ -77,17 +124,23 @@ export function ChatPage({ messages, isProcessing, processingStartTime, currentT
         if (inputRef.current) inputRef.current.focus();
     }, []);
 
-    useEffect(() => {
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'Escape' && isProcessing && onStopAgent) {
-                e.preventDefault();
-                onStopAgent();
-            }
-        };
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && isProcessing && onStopAgent) {
+                e.preventDefault();
+                onStopAgent();
+            }
+        };
 
         document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [isProcessing, onStopAgent]);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isProcessing, onStopAgent]);
+
+    useEffect(() => {
+        if (!showAttachButton) {
+            setPendingImages([]);
+        }
+    }, [showAttachButton]);
 
     useEffect(() => {
         const checkModelSupport = async () => {
@@ -98,44 +151,82 @@ export function ChatPage({ messages, isProcessing, processingStartTime, currentT
                 const { model } = await configRes.json();
 
                 if (model) {
-                    // Try to find the model using the enhanced fuzzy search
                     const result = await findModelsDevModelById(model);
 
-                    if (result && result.model) {
-                        setShowAttachButton(modelAcceptsImages(result.model));
-                    } else {
-                        // Very basic fallback if even fuzzy search fails
-                        const lowerId = model.toLowerCase();
-                        const likelySupportsImages =
-                            lowerId.includes('gpt-4') ||
-                            lowerId.includes('gpt-5') ||
-                            lowerId.includes('claude-3') ||
-                            lowerId.includes('gemini') ||
-                            lowerId.includes('vision');
-                        setShowAttachButton(likelySupportsImages);
-                    }
-                }
-            } catch (err) {
-                console.error('Failed to check model support:', err);
-            }
-        };
+                    if (result && result.model) {
+                        setShowAttachButton(modelAcceptsImages(result.model));
+                    } else {
+                        setShowAttachButton(false);
+                    }
+                }
+            } catch (err) {
+                console.error('Failed to check model support:', err);
+            }
+        };
 
         checkModelSupport();
     }, []);
 
-    const handleSubmit = (e?: React.FormEvent) => {
-        if (e) e.preventDefault();
-        if (!inputValue.trim() || isProcessing) return;
-        onSendMessage(inputValue);
-        setInputValue('');
-    };
+    const handleSubmit = (e?: React.FormEvent) => {
+        if (e) e.preventDefault();
+        if ((!inputValue.trim() && pendingImages.length === 0) || isProcessing) return;
+        onSendMessage(inputValue, showAttachButton ? pendingImages : []);
+        setInputValue('');
+        setPendingImages([]);
+    };
 
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            handleSubmit();
-        }
-    };
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+
+    const toBase64 = async (file: File): Promise<string> => {
+        const buffer = await file.arrayBuffer();
+        const bytes = new Uint8Array(buffer);
+        let binary = '';
+        const chunkSize = 0x8000;
+        for (let i = 0; i < bytes.length; i += chunkSize) {
+            const chunk = bytes.subarray(i, i + chunkSize);
+            binary += String.fromCharCode(...Array.from(chunk));
+        }
+        return btoa(binary);
+    };
+
+    const handleAttachClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const handleFilesSelected = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!showAttachButton) {
+            e.target.value = '';
+            return;
+        }
+        const files = Array.from(e.target.files || []);
+        if (files.length === 0) return;
+        const attachments: ImageAttachment[] = [];
+        for (const file of files) {
+            const mimeType = file.type || guessImageMimeType(file.name);
+            if (!mimeType.startsWith('image/')) continue;
+            const data = await toBase64(file);
+            attachments.push({
+                id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+                name: file.name,
+                mimeType,
+                data,
+                size: file.size
+            });
+        }
+        if (attachments.length > 0) {
+            setPendingImages((prev) => [...prev, ...attachments]);
+        }
+        e.target.value = '';
+    };
+
+    const handleRemovePendingImage = (id: string) => {
+        setPendingImages((prev) => prev.filter((img) => img.id !== id));
+    };
 
     const handleQuestionAnswer = async (index: number, customText?: string) => {
         try {
@@ -169,16 +260,24 @@ export function ChatPage({ messages, isProcessing, processingStartTime, currentT
 
             <div className="main-content" style={{ padding: 0 }}>
                 <div className="chat-page">
-                    {(currentTitle || workspace) && (
-                        <div className="chat-title-bar">
-                            <span className="chat-title">{currentTitle || ''}</span>
-                            {formattedWorkspace && (
-                                <span className="chat-workspace" title={workspace || ''}>
-                                    {formattedWorkspace}
-                                </span>
-                            )}
-                        </div>
-                    )}
+                    <div className="chat-title-bar">
+                        <span className="chat-title">{currentTitle || ''}</span>
+                        <div className="chat-title-actions">
+                            {formattedWorkspace && (
+                                <span className="chat-workspace" title={workspace || ''}>
+                                    {formattedWorkspace}
+                                </span>
+                            )}
+                            <button
+                                type="button"
+                                className={`approval-toggle ${requireApprovals ? '' : 'active'}`}
+                                onClick={onToggleApprovals}
+                                title={requireApprovals ? 'Enable auto-approve' : 'Disable auto-approve'}
+                            >
+                                {requireApprovals ? 'Approvals on' : 'Auto-approve'}
+                            </button>
+                        </div>
+                    </div>
                     <div className="chat-container">
                         <div className="messages">
                             {messages.map((msg) => (
@@ -187,7 +286,12 @@ export function ChatPage({ messages, isProcessing, processingStartTime, currentT
                             {isProcessing && !questionRequest && !approvalRequest && (
                                 <div className="message assistant">
                                     <div className="message-content">
-                                        <ThinkingIndicator startTime={processingStartTime} tokens={currentTokens} />
+                                        <ThinkingIndicator
+                                            startTime={processingStartTime}
+                                            tokens={currentTokens}
+                                            inProgressStep={planProgress.inProgressStep}
+                                            nextStep={planProgress.nextStep}
+                                        />
                                     </div>
                                 </div>
                             )}
@@ -217,25 +321,44 @@ export function ChatPage({ messages, isProcessing, processingStartTime, currentT
                             <div ref={messagesEndRef} />
                         </div>
 
-                        <form onSubmit={handleSubmit} className="input-area">
-                            <textarea
-                                ref={inputRef}
-                                value={inputValue}
-                                onChange={(e) => setInputValue(e.target.value)}
-                                onKeyDown={handleKeyDown}
-                                placeholder="Type your message..."
-                                rows={2}
-                                disabled={isProcessing || !!questionRequest || !!approvalRequest}
-                            />
-                            <div className="input-actions">
-                                <div className="input-actions-left">
-                                    {showAttachButton && (
-                                        <button type="button" className="send-btn" disabled={isProcessing} title="Attach file">
-                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transform: 'rotate(-45deg)' }}>
-                                                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
-                                            </svg>
-                                        </button>
-                                    )}
+                        <form onSubmit={handleSubmit} className="input-area">
+                            <input
+                                ref={fileInputRef}
+                                type="file"
+                                accept="image/*"
+                                multiple
+                                style={{ display: 'none' }}
+                                onChange={handleFilesSelected}
+                            />
+                            {pendingImages.length > 0 && (
+                                <div className="attachment-strip">
+                                    {pendingImages.map((img) => (
+                                        <div key={img.id} className="attachment-item">
+                                            <img src={toDataUrl(img)} alt={img.name} />
+                                            <button type="button" onClick={() => handleRemovePendingImage(img.id)} title="Remove">
+                                                x
+                                            </button>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                            <textarea
+                                ref={inputRef}
+                                value={inputValue}
+                                onChange={(e) => setInputValue(e.target.value)}
+                                onKeyDown={handleKeyDown}
+                                placeholder="Type your message..."
+                                rows={2}
+                            />
+                            <div className="input-actions">
+                                <div className="input-actions-left">
+                                    {showAttachButton && (
+                                        <button type="button" className="send-btn" title="Attach image" onClick={handleAttachClick}>
+                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ transform: 'rotate(-45deg)' }}>
+                                                <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
+                                            </svg>
+                                        </button>
+                                    )}
                                 </div>
                                 <div className="input-actions-right">
                                     {isProcessing ? (
@@ -250,12 +373,12 @@ export function ChatPage({ messages, isProcessing, processingStartTime, currentT
                                             </svg>
                                         </button>
                                     ) : (
-                                        <button
-                                            type="submit"
-                                            className="send-btn"
-                                            disabled={!inputValue.trim() || !!questionRequest || !!approvalRequest}
-                                            title="Send"
-                                        >
+                                        <button
+                                            type="submit"
+                                            className="send-btn"
+                                            disabled={(!inputValue.trim() && pendingImages.length === 0) || !!questionRequest || !!approvalRequest}
+                                            title="Send"
+                                        >
                                             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                                                 <line x1="12" y1="19" x2="12" y2="5"></line>
                                                 <polyline points="5 12 12 5 19 12"></polyline>

package/src/web/components/HomePage.tsx

@@ -12,7 +12,7 @@ interface RecentProject {
 }
 
 interface HomePageProps {
-    onStartChat: (message: string) => void;
+    onStartChat: (message: string, images?: import("../../utils/images").ImageAttachment[]) => void;
     onOpenProject: (path: string) => void;
     sidebarProps: SidebarProps;
 }
@@ -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

@@ -5,38 +5,10 @@ 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 { parseDiffLine, getDiffLineColors } from '../utils';
 import '../assets/css/global.css'
 
-function BlendIcon() {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="blend-icon">
-            <circle cx="12" cy="6.5" r="1.4" />
-            <circle cx="17.5" cy="12" r="1.4" />
-            <circle cx="12" cy="17.5" r="1.4" />
-            <circle cx="6.5" cy="12" r="1.4" />
-        </svg>
-    );
-}
-
-function formatBlendTime(ms: number): string {
-    const totalSeconds = Math.floor(ms / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-
-    if (minutes >= 60) {
-        const hours = Math.floor(minutes / 60);
-        const remainingMinutes = minutes % 60;
-        return `${hours}h ${remainingMinutes}m`;
-    }
-
-    if (minutes > 0) {
-        return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
-    }
-
-    return `${seconds}s`;
-}
-
 interface MessageItemProps {
     message: Message;
 }
@@ -72,6 +44,35 @@ function renderDiffLine(line: string, index: number): React.ReactElement {
     );
 }
 
+function renderToolLine(line: string, index: number): React.ReactElement {
+    const parsed = parseDiffLine(line);
+    if (parsed.isDiffLine) {
+        return renderDiffLine(line, index);
+    }
+
+    const planMatch = line.match(/^(\s*)>\s*(\[[~x ]\])?\s*(.*)$/);
+    if (planMatch) {
+        const [, leading, bracket, rest] = planMatch;
+        const isActive = bracket === '[~]';
+        return (
+            <div key={index} className="tool-line plan-line">
+                <span className="plan-indent">{leading || ''}</span>
+                <span className="plan-prefix">{'>'}</span>
+                <span> </span>
+                {bracket && <span className={`plan-bracket${isActive ? ' active' : ''}`}>{bracket}</span>}
+                {bracket && <span> </span>}
+                <span className="plan-step">{rest}</span>
+            </div>
+        );
+    }
+
+    return (
+        <div key={index} className="tool-line">
+            {line}
+        </div>
+    );
+}
+
 function parseToolHeader(content: string): { name: string; info: string | null; bodyLines: string[] } {
     const lines = content.split('\n');
     const firstLine = lines[0] || '';
@@ -88,11 +89,12 @@ function parseToolHeader(content: string): { name: string; info: string | null;
 export function MessageItem({ message }: MessageItemProps) {
     if (message.role === 'tool') {
         const statusClass = message.success === false ? 'error' : message.isRunning ? 'running' : 'success';
+        const planClass = message.toolName === 'plan' ? 'plan-tool' : '';
 
         const { name, info, bodyLines } = parseToolHeader(message.content);
 
         return (
-            <div className={`message tool ${statusClass}`}>
+            <div className={`message tool ${statusClass} ${planClass}`}>
                 <div className="message-content">
                     <div className="tool-header">
                         <span className={`tool-name ${message.toolName === 'stop' ? 'no-bold' : ''}`}>{name}</span>
@@ -105,7 +107,7 @@ export function MessageItem({ message }: MessageItemProps) {
                     </div>
                     {bodyLines.length > 0 && (
                         <div className="tool-output">
-                            {bodyLines.map((line, index) => renderDiffLine(line, index))}
+                            {bodyLines.map((line, index) => renderToolLine(line, index))}
                         </div>
                     )}
                 </div>
@@ -114,65 +116,62 @@ export function MessageItem({ message }: MessageItemProps) {
     }
 
     if (message.role === 'assistant') {
-        const showBlend = message.responseDuration && message.responseDuration > 60000;
-
         return (
-            <>
-                <div className="message assistant">
-                    <div className="message-content">
-                        {message.thinkingContent && (
-                            <details className="thinking-section">
-                                <summary>Thinking...</summary>
-                                <pre className="thinking-content">{message.thinkingContent}</pre>
-                            </details>
-                        )}
-                        <div className="markdown-content">
-                            <ReactMarkdown
-                                remarkPlugins={[remarkGfm]}
-                                components={{
-                                    code({ node, className, children, ...props }) {
-                                        const match = /language-(\w+)/.exec(className || '');
-                                        const { ref, ...rest } = props as any;
-                                        return match ? (
-                                            <SyntaxHighlighter
-                                                style={vscDarkPlus as any}
-                                                language={match[1]}
-                                                PreTag="div"
-                                                {...rest}
-                                            >
-                                                {String(children).replace(/\n$/, '')}
-                                            </SyntaxHighlighter>
-                                        ) : (
-                                            <code className={className} {...props}>
-                                                {children}
-                                            </code>
-                                        );
-                                    }
-                                }}
-                            >
-                                {message.content}
-                            </ReactMarkdown>
-                        </div>
+            <div className="message assistant">
+                <div className="message-content">
+                    {message.thinkingContent && (
+                        <details className="thinking-section">
+                            <summary>Thinking...</summary>
+                            <pre className="thinking-content">{message.thinkingContent}</pre>
+                        </details>
+                    )}
+                    <div className="markdown-content">
+                        <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            components={{
+                                code({ node, className, children, ...props }) {
+                                    const match = /language-(\w+)/.exec(className || '');
+                                    const { ref, ...rest } = props as any;
+                                    return match ? (
+                                        <SyntaxHighlighter
+                                            style={vscDarkPlus as any}
+                                            language={match[1]}
+                                            PreTag="div"
+                                            {...rest}
+                                        >
+                                            {String(children).replace(/\n$/, '')}
+                                        </SyntaxHighlighter>
+                                    ) : (
+                                        <code className={className} {...props}>
+                                            {children}
+                                        </code>
+                                    );
+                                }
+                            }}
+                        >
+                            {message.content}
+                        </ReactMarkdown>
                     </div>
                 </div>
-                {showBlend && (
-                    <div className="message assistant blend-message">
-                        <div className="message-content blend-indicator">
-                            <BlendIcon />
-                            <span className="blend-text">
-                                {message.blendWord || 'Blended'} for {formatBlendTime(message.responseDuration!)}
-                            </span>
-                        </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">
-                {message.displayContent || 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>
     );