@kirosnn/mosaic 0.0.7

package/src/web/components/ChatPage.tsx

@@ -0,0 +1,273 @@
+/** @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;
+}
+
+function formatWorkspace(path: string | null | undefined): string {
+    if (!path) return '';
+
+    let normalized = path.replace(/\\/g, '/');
+
+    const homePatterns = [
+        /^\/Users\/[^/]+/,
+        /^\/home\/[^/]+/,
+        /^[A-Z]:\/Users\/[^/]+/i,
+    ];
+
+    for (const pattern of homePatterns) {
+        if (pattern.test(normalized)) {
+            normalized = normalized.replace(pattern, '~');
+            break;
+        }
+    }
+
+    const parts = normalized.split('/').filter(Boolean);
+    const maxLength = 35;
+
+    if (normalized.length > maxLength && parts.length > 3) {
+        const isHome = normalized.startsWith('~');
+        const lastParts = parts.slice(-2).join('/');
+        return isHome ? `~/.../` + lastParts : '.../' + lastParts;
+    }
+
+    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);
+
+    useEffect(() => {
+        if (messagesEndRef.current) {
+            messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [messages, questionRequest, approvalRequest]);
+
+    useEffect(() => {
+        if (inputRef.current && !isProcessing && !questionRequest && !approvalRequest) {
+            inputRef.current.focus();
+        }
+    }, [isProcessing, questionRequest, approvalRequest]);
+
+    useEffect(() => {
+        if (inputRef.current) inputRef.current.focus();
+    }, []);
+
+    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]);
+
+    useEffect(() => {
+        const checkModelSupport = async () => {
+            try {
+                const configRes = await fetch('/api/config');
+                if (!configRes.ok) return;
+
+                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);
+            }
+        };
+
+        checkModelSupport();
+    }, []);
+
+    const handleSubmit = (e?: React.FormEvent) => {
+        if (e) e.preventDefault();
+        if (!inputValue.trim() || isProcessing) return;
+        onSendMessage(inputValue);
+        setInputValue('');
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    };
+
+    const handleQuestionAnswer = async (index: number, customText?: string) => {
+        try {
+            await fetch('/api/question/answer', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ index, customText })
+            });
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    const handleApprovalResponse = async (approved: boolean, customResponse?: string) => {
+        try {
+            await fetch('/api/approval/respond', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ approved, customResponse })
+            });
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    const formattedWorkspace = formatWorkspace(workspace);
+
+    return (
+        <div className="home-page">
+            <Sidebar {...sidebarProps} />
+
+            <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-container">
+                        <div className="messages">
+                            {messages.map((msg) => (
+                                <MessageItem key={msg.id} message={msg} />
+                            ))}
+                            {isProcessing && !questionRequest && !approvalRequest && (
+                                <div className="message assistant">
+                                    <div className="message-content">
+                                        <ThinkingIndicator startTime={processingStartTime} tokens={currentTokens} />
+                                    </div>
+                                </div>
+                            )}
+
+                            {questionRequest && (
+                                <div className="message assistant">
+                                    <div className="message-content" style={{ width: '100%', maxWidth: '100%' }}>
+                                        <QuestionPanel
+                                            request={questionRequest}
+                                            onAnswer={handleQuestionAnswer}
+                                        />
+                                    </div>
+                                </div>
+                            )}
+
+                            {approvalRequest && (
+                                <div className="message assistant">
+                                    <div className="message-content" style={{ width: '100%', maxWidth: '100%' }}>
+                                        <ApprovalPanel
+                                            request={approvalRequest}
+                                            onRespond={handleApprovalResponse}
+                                        />
+                                    </div>
+                                </div>
+                            )}
+
+                            <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>
+                                    )}
+                                </div>
+                                <div className="input-actions-right">
+                                    {isProcessing ? (
+                                        <button
+                                            type="button"
+                                            className="send-btn stop"
+                                            onClick={onStopAgent}
+                                            title="Stop (Esc)"
+                                        >
+                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                                <rect x="6" y="6" width="12" height="12" rx="1" />
+                                            </svg>
+                                        </button>
+                                    ) : (
+                                        <button
+                                            type="submit"
+                                            className="send-btn"
+                                            disabled={!inputValue.trim() || !!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>
+                                            </svg>
+                                        </button>
+                                    )}
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/web/components/FileExplorer.tsx

@@ -0,0 +1,162 @@
+/** @jsxImportSource react */
+import { useState, useEffect } from 'react';
+import '../assets/css/FileExplorer.css';
+
+interface FileInfo {
+    name: string;
+    isDirectory: boolean;
+    path: string;
+}
+
+interface FileExplorerProps {
+    onSelect: (path: string) => void;
+    onCancel: () => void;
+    initialPath?: string;
+}
+
+export function FileExplorer({ onSelect, onCancel, initialPath }: FileExplorerProps) {
+    const [currentPath, setCurrentPath] = useState<string>(initialPath || '');
+    const [files, setFiles] = useState<FileInfo[]>([]);
+    const [selectedFile, setSelectedFile] = useState<FileInfo | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        if (!currentPath) {
+            fetch('/api/workspace')
+                .then(res => res.json())
+                .then(data => setCurrentPath(data.workspace))
+                .catch(() => { });
+        }
+    }, [initialPath]);
+
+    useEffect(() => {
+        if (!currentPath) return;
+
+        async function fetchFiles() {
+            setIsLoading(true);
+            try {
+                const encodedPath = encodeURIComponent(currentPath);
+                const response = await fetch(`/api/files?path=${encodedPath}`);
+                if (response.ok) {
+                    const data = await response.json();
+                    setFiles(data.files);
+                    if (data.path) setCurrentPath(data.path);
+                }
+            } catch (error) {
+                console.error("Failed to load files", error);
+            } finally {
+                setIsLoading(false);
+            }
+        }
+
+        fetchFiles();
+        fetchFiles();
+    }, [currentPath]);
+
+    useEffect(() => {
+        setSelectedFile(null);
+    }, [currentPath]);
+
+    const handleNavigate = (path: string) => {
+        setCurrentPath(path);
+    };
+
+    const handleFileClick = (file: FileInfo) => {
+        setSelectedFile(file);
+    };
+
+    const handleFileDoubleClick = (file: FileInfo) => {
+        if (file.isDirectory) {
+            handleNavigate(file.path);
+        }
+    };
+
+    const handleConfirm = () => {
+        if (selectedFile && selectedFile.isDirectory) {
+            onSelect(selectedFile.path);
+        } else {
+            onSelect(currentPath);
+        }
+    };
+
+    const handleUp = () => {
+        const separator = currentPath.includes('\\') ? '\\' : '/';
+        let cleanPath = currentPath;
+        if (cleanPath.endsWith(separator) && cleanPath.length > 1) {
+            cleanPath = cleanPath.slice(0, -1);
+        }
+
+        const lastIndex = cleanPath.lastIndexOf(separator);
+        if (lastIndex > 0) {
+            setCurrentPath(cleanPath.substring(0, lastIndex));
+        } else if (lastIndex === 0) {
+            setCurrentPath(separator);
+        } else if (lastIndex === -1 && separator === '\\' && cleanPath.length > 2) {
+            // C: case? simplified
+        }
+    };
+
+    const FolderIcon = () => (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="file-icon">
+            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+        </svg>
+    );
+
+    const FileIcon = () => (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="file-icon">
+            <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
+            <polyline points="13 2 13 9 20 9"></polyline>
+        </svg>
+    );
+
+    const UpIcon = () => (
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="18 15 12 9 6 15"></polyline>
+        </svg>
+    );
+
+    return (
+        <div className="file-explorer-container">
+            <div className="file-explorer-header">
+                <button className="explorer-btn cancel" onClick={handleUp} title="Go Up">
+                    <UpIcon />
+                </button>
+                <div className="file-explorer-path" title={currentPath}>
+                    {currentPath}
+                </div>
+            </div>
+
+            <div className="file-list">
+                {isLoading ? (
+                    <div className="loading-indicator">Loading...</div>
+                ) : files.length === 0 ? (
+                    <div className="empty-message">Empty directory</div>
+                ) : (
+                    files.map((file, i) => (
+                        <div
+                            key={i}
+                            className={`file-item ${file.isDirectory ? 'is-directory' : ''} ${selectedFile?.path === file.path ? 'selected' : ''}`}
+                            onClick={() => handleFileClick(file)}
+                            onDoubleClick={() => handleFileDoubleClick(file)}
+                        >
+                            {file.isDirectory ? <FolderIcon /> : <FileIcon />}
+                            <span className="file-name">{file.name}</span>
+                        </div>
+                    ))
+                )}
+            </div>
+
+            <div className="file-explorer-footer">
+                <div className="selected-path-display">
+                    {selectedFile ? selectedFile.name : ''}
+                </div>
+                <div className="footer-actions">
+                    <button className="explorer-btn cancel" onClick={onCancel}>Cancel</button>
+                    <button className="explorer-btn confirm" onClick={handleConfirm}>
+                        {selectedFile?.isDirectory ? 'Open Selected' : 'Open Current Folder'}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/web/components/HomePage.tsx

@@ -0,0 +1,121 @@
+/** @jsxImportSource react */
+import { useState, useEffect } from 'react';
+import { Sidebar, SidebarProps } from './Sidebar';
+import { Modal } from './Modal';
+import { FileExplorer } from './FileExplorer';
+import '../assets/css/global.css'
+import '../assets/css/HomePage.css'
+
+interface RecentProject {
+    path: string;
+    lastOpened: number;
+}
+
+interface HomePageProps {
+    onStartChat: (message: string) => void;
+    onOpenProject: (path: string) => void;
+    sidebarProps: SidebarProps;
+}
+
+function formatRelativeTime(timestamp: number): string {
+    const now = Date.now();
+    const diff = now - timestamp;
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    if (seconds < 60) return `${seconds} second${seconds !== 1 ? 's' : ''} ago`;
+    if (minutes < 60) return `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
+    if (hours < 24) return `${hours} hour${hours !== 1 ? 's' : ''} ago`;
+    return `${days} day${days !== 1 ? 's' : ''} ago`;
+}
+
+export function HomePage({ onStartChat, onOpenProject, sidebarProps }: HomePageProps) {
+    const [recentProjects, setRecentProjects] = useState<RecentProject[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [showFileExplorer, setShowFileExplorer] = useState(false);
+
+    useEffect(() => {
+        async function fetchRecentProjects() {
+            try {
+                const response = await fetch('/api/recent-projects');
+                if (response.ok) {
+                    const projects = await response.json();
+                    setRecentProjects(projects.slice(0, 3));
+                }
+            } catch (error) {
+                console.error('Failed to fetch recent projects:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        }
+        fetchRecentProjects();
+
+        const interval = setInterval(fetchRecentProjects, 5000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const handleProjectClick = async (path: string) => {
+        onOpenProject(path);
+    };
+    return (
+        <div className="home-page">
+            <Sidebar {...sidebarProps} />
+
+            <div className="main-content">
+                <div className="branding">
+                    <picture className="logo-container">
+                        <source srcSet="/logo_black.svg" media="(prefers-color-scheme: light)" />
+                        <img src="/logo_white.svg" alt="Mosaic Logo" className="logo-img" />
+                    </picture>
+                </div>
+
+                <div className="projects-section">
+                    <div className="section-header">
+                        <h2>Recents projects</h2>
+                        <button className="open-project-btn" onClick={() => setShowFileExplorer(true)}>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: '8px' }}><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+                            Open project
+                        </button>
+                    </div>
+
+                    <div className="project-list">
+                        {isLoading ? (
+                            <div className="project-item">
+                                <span className="project-path">Loading...</span>
+                            </div>
+                        ) : recentProjects.length === 0 ? (
+                            <div className="project-item">
+                                <span className="project-path" style={{ color: 'var(--text-secondary)' }}>No recent projects</span>
+                            </div>
+                        ) : (
+                            recentProjects.map((proj, i) => (
+                                <div key={i} className="project-item" onClick={() => handleProjectClick(proj.path)}>
+                                    <span className="project-path">{proj.path}</span>
+                                    <span className="project-time">{formatRelativeTime(proj.lastOpened)}</span>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                </div>
+            </div>
+
+
+            <Modal
+                isOpen={showFileExplorer}
+                onClose={() => setShowFileExplorer(false)}
+                title="Open project"
+                className="file-explorer-modal"
+            >
+                <FileExplorer
+                    onSelect={(path) => {
+                        setShowFileExplorer(false);
+                        onOpenProject(path);
+                    }}
+                    onCancel={() => setShowFileExplorer(false)}
+                />
+            </Modal>
+        </div>
+    );
+}