@kirosnn/mosaic 0.0.9 → 0.71.0

package/src/web/assets/css/MessageItem.css

@@ -59,12 +59,31 @@
     background: var(--status-error-dark);
 }
 
-.message-content {
-    color: var(--text-primary);
-    white-space: pre-wrap;
-    word-break: break-word;
-    flex: 1;
-}
+.message-content {
+    color: var(--text-primary);
+    white-space: pre-wrap;
+    word-break: break-word;
+    flex: 1;
+}
+
+.message-images {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-bottom: 0.4rem;
+}
+
+.message-images img {
+    width: 140px;
+    height: auto;
+    border-radius: 8px;
+    border: 1px solid var(--border-code);
+    background: var(--bg-code);
+}
+
+.message-text {
+    white-space: pre-wrap;
+}
 
 .thinking-section {
     margin-bottom: 0.35rem;
@@ -95,7 +114,6 @@
     font-size: 0.8rem;
     color: var(--text-muted);
     overflow-x: auto;
-    line-height: 1.4;
 }
 
 .assistant-text {
@@ -136,25 +154,4 @@
     40% {
         transform: scale(1);
     }
-}
-
-.blend-indicator {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 1rem 1.5rem;
-    margin: 0.75rem 0;
-}
-
-.blend-icon {
-    width: 48px;
-    height: 48px;
-    fill: var(--text-muted);
-    flex-shrink: 0;
-}
-
-.blend-text {
-    font-size: 1.5rem;
-    color: var(--text-muted);
-    font-weight: 400;
-}
+}

package/src/web/assets/css/ThinkingIndicator.css

@@ -1,8 +1,14 @@
+.thinking-block {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+}
+
 .thinking-indicator {
     display: flex;
     align-items: center;
     gap: 0;
-    padding: 0.85rem 1.15rem;
+    padding: 0.65rem 1.15rem 0.35rem 1.15rem;
     font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
     font-size: 0.95rem;
 }
@@ -31,17 +37,49 @@
 .thinking-elapsed {
     color: var(--text-secondary);
     opacity: 0.7;
-    margin-left: 0.25rem;
 }
 
 .thinking-hint {
     color: var(--text-secondary);
-    opacity: 0.5;
-    margin-left: 0.25rem;
+    opacity: 0.55;
 }
 
 .thinking-tokens {
     color: var(--text-secondary);
     opacity: 0.7;
-    margin-left: 0.25rem;
-}
+}
+
+.thinking-plan {
+    color: var(--text-secondary);
+    opacity: 0.7;
+}
+
+.thinking-sep {
+    color: var(--text-secondary);
+    opacity: 0.6;
+}
+
+.thinking-next-line {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0 1.15rem 0.6rem 1.15rem;
+    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
+.thinking-next-icon {
+    color: #ffca38;
+    font-weight: 700;
+}
+
+.thinking-next-label {
+    font-weight: 700;
+    color: #ffca38;
+}
+
+.thinking-next-step {
+    color: var(--text-secondary);
+    opacity: 0.75;
+}

package/src/web/assets/css/ToolMessage.css

@@ -12,14 +12,24 @@
     border: 1px solid var(--border-tool-running);
 }
 
-.message.tool.error {
-    background: var(--bg-tool-error);
-    border: 1px solid var(--border-tool-error);
-}
-
-.message.tool.success .message-bar {
-    background: var(--status-success);
-}
+.message.tool.error {
+    background: var(--bg-tool-error);
+    border: 1px solid var(--border-tool-error);
+}
+
+.message.tool.plan-tool,
+.message.tool.plan-tool.running,
+.message.tool.plan-tool.error,
+.message.tool.plan-tool.success {
+    background: transparent;
+    border: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+
+.message.tool.success .message-bar {
+    background: var(--status-success);
+}
 
 .message.tool.running .message-bar {
     background: var(--status-running);
@@ -107,11 +117,23 @@
     line-height: 1.4;
 }
 
-.tool-line {
-    padding: 0.1rem 0.5rem;
-    white-space: pre-wrap;
-    word-break: break-all;
-}
+.tool-line {
+    padding: 0.1rem 0.5rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+.tool-line.plan-line {
+    padding-left: 0.9rem;
+}
+
+.plan-prefix {
+    color: #ffca38;
+}
+
+.plan-bracket.active {
+    color: #ffca38;
+}
 
 .tool-line.diff-line {
     display: flex;
@@ -145,4 +167,4 @@
 .diff-content {
     flex: 1;
     padding: 0.1rem 0.3rem;
-}
+}

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

@@ -11,11 +11,11 @@ interface RecentProject {
     lastOpened: number;
 }
 
-interface HomePageProps {
-    onStartChat: (message: string) => 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();
@@ -118,4 +118,4 @@ export function HomePage({ onStartChat, onOpenProject, sidebarProps }: HomePageP
             </Modal>
         </div>
     );
-}
+}