@kirosnn/mosaic 0.0.7

package/src/web/components/MessageItem.tsx

@@ -0,0 +1,178 @@
+/** @jsxImportSource react */
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+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 { 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;
+}
+
+function renderDiffLine(line: string, index: number): React.ReactElement {
+    const parsed = parseDiffLine(line);
+
+    if (!parsed.isDiffLine) {
+        return (
+            <div key={index} className="tool-line">
+                {line}
+            </div>
+        );
+    }
+
+    const colors = getDiffLineColors(parsed);
+
+    return (
+        <div
+            key={index}
+            className={`tool-line diff-line ${parsed.isAdded ? 'added' : ''} ${parsed.isRemoved ? 'removed' : ''}`}
+            style={{ backgroundColor: colors.contentBackground }}
+        >
+            <span
+                className="diff-label"
+                style={{ backgroundColor: colors.labelBackground }}
+            >
+                {parsed.prefix}{parsed.lineNumber?.padStart(4, ' ')}
+            </span>
+            <span className="diff-separator">|</span>
+            <span className="diff-content">{parsed.content}</span>
+        </div>
+    );
+}
+
+function parseToolHeader(content: string): { name: string; info: string | null; bodyLines: string[] } {
+    const lines = content.split('\n');
+    const firstLine = lines[0] || '';
+    const bodyLines = lines.slice(1);
+
+    const match = firstLine.match(/^(.+?)\s*\((.+)\)$/);
+    if (match) {
+        return { name: match[1]!, info: match[2]!, bodyLines };
+    }
+
+    return { name: firstLine, info: null, bodyLines };
+}
+
+export function MessageItem({ message }: MessageItemProps) {
+    if (message.role === 'tool') {
+        const statusClass = message.success === false ? 'error' : message.isRunning ? 'running' : 'success';
+
+        const { name, info, bodyLines } = parseToolHeader(message.content);
+
+        return (
+            <div className={`message tool ${statusClass}`}>
+                <div className="message-content">
+                    <div className="tool-header">
+                        <span className={`tool-name ${message.toolName === 'stop' ? 'no-bold' : ''}`}>{name}</span>
+                        {info && <span className="tool-info">({info})</span>}
+                        {message.isRunning && message.runningStartTime && (
+                            <span className="tool-timer">
+                                {Math.floor((Date.now() - (message.runningStartTime || 0)) / 1000)}s
+                            </span>
+                        )}
+                    </div>
+                    {bodyLines.length > 0 && (
+                        <div className="tool-output">
+                            {bodyLines.map((line, index) => renderDiffLine(line, index))}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    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 || '');
+                                        return match ? (
+                                            <SyntaxHighlighter
+                                                style={vscDarkPlus}
+                                                language={match[1]}
+                                                PreTag="div"
+                                                {...props}
+                                            >
+                                                {String(children).replace(/\n$/, '')}
+                                            </SyntaxHighlighter>
+                                        ) : (
+                                            <code className={className} {...props}>
+                                                {children}
+                                            </code>
+                                        );
+                                    }
+                                }}
+                            >
+                                {message.content}
+                            </ReactMarkdown>
+                        </div>
+                    </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>
+                )}
+            </>
+        );
+    }
+
+    return (
+        <div className={`message ${message.role} ${message.isError ? 'error' : ''}`}>
+            <div className="message-content">
+                {message.displayContent || message.content}
+            </div>
+        </div>
+    );
+}

package/src/web/components/Modal.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import '../assets/css/global.css';
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function Modal({ isOpen, onClose, title, children, className = '' }: ModalProps) {
+    if (!isOpen) return null;
+
+    return (
+        <div className="modal-overlay" onClick={onClose}>
+            <div className={`modal-content ${className}`} onClick={(e) => e.stopPropagation()}>
+                <div className="modal-header">
+                    <h2>{title}</h2>
+                    <button className="close-btn" onClick={onClose}>
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                    </button>
+                </div>
+                <div className="modal-body">
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/web/components/QuestionPanel.tsx

@@ -0,0 +1,149 @@
+/** @jsxImportSource react */
+import React, { useState, useEffect, useRef } from 'react';
+import { QuestionRequest } from '../../utils/questionBridge';
+
+interface QuestionPanelProps {
+    request: QuestionRequest;
+    onAnswer: (index: number, customText?: string) => void;
+}
+
+export function QuestionPanel({ request, onAnswer }: QuestionPanelProps) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [customText, setCustomText] = useState('');
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        setSelectedIndex(0);
+        setCustomText('');
+        if (inputRef.current) inputRef.current.focus();
+    }, [request.id]);
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setSelectedIndex(prev => (prev === 0 ? request.options.length - 1 : prev - 1));
+        } else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setSelectedIndex(prev => (prev === request.options.length - 1 ? 0 : prev + 1));
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            if (customText.trim()) {
+                onAnswer(0, customText);
+            } else {
+                onAnswer(selectedIndex);
+            }
+        } else if (e.key >= '1' && e.key <= '9') {
+            const idx = Number(e.key) - 1;
+            if (idx >= 0 && idx < request.options.length) {
+                onAnswer(idx);
+            }
+        }
+    };
+
+    const handleOptionClick = (index: number) => {
+        onAnswer(index);
+    };
+
+    const handleSubmitCustom = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (customText.trim()) {
+            onAnswer(0, customText);
+        }
+    };
+
+    return (
+        <div className="panel question-panel">
+            <div className="panel-header">
+                <strong>Question</strong>
+            </div>
+            <div className="panel-content">
+                <div className="question-prompt">
+                    {request.prompt.split('\n').map((line, i) => (
+                        <div key={i}>{line}</div>
+                    ))}
+                </div>
+                <div className="question-options">
+                    {request.options.map((option, index) => (
+                        <div
+                            key={index}
+                            className={`question-option ${index === selectedIndex ? 'selected' : ''}`}
+                            onClick={() => handleOptionClick(index)}
+                        >
+                            <span className="option-key">{index + 1}.</span>
+                            <span className="option-label">{option.label}</span>
+                        </div>
+                    ))}
+                </div>
+                <div className="custom-input-container">
+                    <form onSubmit={handleSubmitCustom}>
+                        <input
+                            ref={inputRef}
+                            type="text"
+                            value={customText}
+                            onChange={(e) => setCustomText(e.target.value)}
+                            onKeyDown={handleKeyDown}
+                            placeholder="Tell Mosaic what it should do..."
+                            className="panel-input"
+                        />
+                    </form>
+                </div>
+            </div>
+            <style>{`
+                .panel {
+                   background: var(--bg-panel);
+                   border: 1px solid var(--border-subtle);
+                   border-radius: 8px;
+                   margin: 1rem 0;
+                   padding: 1rem;
+                }
+                .panel-header {
+                   margin-bottom: 1rem;
+                   color: var(--accent-color);
+                }
+                .question-prompt {
+                   margin-bottom: 1rem;
+                   font-weight: 500;
+                   line-height: 1.5;
+                }
+                .question-options {
+                   display: flex;
+                   flex-direction: column;
+                   gap: 0.5rem;
+                   margin-bottom: 1rem;
+                }
+                .question-option {
+                   padding: 0.5rem;
+                   border-radius: 4px;
+                   cursor: pointer;
+                   display: flex;
+                   gap: 0.5rem;
+                   transition: background 0.1s;
+                }
+                .question-option:hover {
+                    background: var(--overlay-light);
+                }
+                .question-option.selected {
+                    background: var(--overlay-medium);
+                    border: 1px solid var(--border-subtle);
+                }
+                .option-key {
+                   color: var(--text-muted);
+                   width: 1.5rem;
+                }
+                .panel-input {
+                    width: 100%;
+                    padding: 0.75rem;
+                    background: var(--bg-app);
+                    border: 1px solid var(--border-subtle);
+                    color: var(--text-primary);
+                    border-radius: 6px;
+                    font-family: inherit;
+                }
+                .panel-input:focus {
+                    outline: none;
+                    border-color: var(--accent-color);
+                }
+            `}</style>
+        </div>
+    );
+}

package/src/web/components/Setup.tsx

@@ -0,0 +1,211 @@
+/** @jsxImportSource react */
+import React, { useState, useEffect, useRef } from 'react';
+import '../assets/css/Setup.css';
+
+interface TriggerConfig {
+    provider: string;
+    model: string;
+    apiKey?: string;
+}
+
+interface SetupProps {
+    onComplete: (config: TriggerConfig) => void;
+}
+
+interface Provider {
+    id: string;
+    name: string;
+    description: string;
+    requiresApiKey: boolean;
+    models: Model[];
+    isCustom?: boolean;
+}
+
+interface Model {
+    id: string;
+    name: string;
+    description: string;
+    requiresApiKey?: boolean;
+}
+
+type Step = 'provider' | 'model' | 'apikey' | 'confirm';
+
+export function Setup({ onComplete }: SetupProps) {
+    const [step, setStep] = useState<Step>('provider');
+    const [providers, setProviders] = useState<Provider[]>([]);
+    const [selectedProviderId, setSelectedProviderId] = useState<string>('');
+    const [selectedModelId, setSelectedModelId] = useState<string>('');
+    const [apiKey, setApiKey] = useState<string>('');
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    useEffect(() => {
+        fetch('/api/config/providers')
+            .then(res => res.json())
+            .then(data => setProviders(data))
+            .catch(err => console.error("Failed to load providers", err));
+    }, []);
+
+    useEffect(() => {
+        setSelectedIndex(0);
+    }, [step]);
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (step === 'provider') {
+            const options = providers;
+            if (e.key === 'ArrowDown') {
+                setSelectedIndex(prev => (prev + 1) % options.length);
+            } else if (e.key === 'ArrowUp') {
+                setSelectedIndex(prev => (prev - 1 + options.length) % options.length);
+            } else if (e.key === 'Enter') {
+                const provider = options[selectedIndex];
+                if (provider) {
+                    setSelectedProviderId(provider.id);
+                    setStep('model');
+                }
+            }
+        } else if (step === 'model') {
+            const provider = providers.find(p => p.id === selectedProviderId);
+            const options = provider?.models || [];
+            if (e.key === 'ArrowDown') {
+                setSelectedIndex(prev => (prev + 1) % options.length);
+            } else if (e.key === 'ArrowUp') {
+                setSelectedIndex(prev => (prev - 1 + options.length) % options.length);
+            } else if (e.key === 'Enter') {
+                const model = options[selectedIndex];
+                if (model) {
+                    setSelectedModelId(model.id);
+                    const requiresKey = (provider?.requiresApiKey || model.requiresApiKey);
+                    if (requiresKey && provider?.id !== 'ollama') {
+                        setStep('apikey');
+                    } else if (requiresKey && provider?.id === 'ollama' && (model.id.includes(':cloud') || model.id.includes('-cloud'))) {
+                        setStep('apikey');
+                    } else {
+                        setStep('confirm');
+                    }
+                }
+            } else if (e.key === 'Escape') {
+                setStep('provider');
+            }
+        } else if (step === 'apikey') {
+            if (e.key === 'Enter') {
+                setStep('confirm');
+            } else if (e.key === 'Escape') {
+                setStep('model');
+            }
+        } else if (step === 'confirm') {
+            if (e.key === 'Enter') {
+                onComplete({
+                    provider: selectedProviderId,
+                    model: selectedModelId,
+                    apiKey: apiKey || undefined
+                });
+            } else if (e.key === 'Escape') {
+                const provider = providers.find(p => p.id === selectedProviderId);
+                const model = provider?.models.find(m => m.id === selectedModelId);
+
+                if (provider && model) {
+                    const requiresKey = (provider.requiresApiKey || model.requiresApiKey);
+                    if (requiresKey) setStep('apikey');
+                    else setStep('model');
+                } else {
+                    setStep('model');
+                }
+            }
+        }
+    };
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+        containerRef.current?.focus();
+    }, [step]);
+
+
+    const renderProviderStep = () => {
+        return (
+            <div className="step-container">
+                <div className="step-header">Select your AI provider (↑/↓ to navigate, Enter to select):</div>
+                <div className="select-list">
+                    {providers.map((p, idx) => (
+                        <div key={p.id} className={`select-item ${idx === selectedIndex ? 'selected' : ''}`}
+                            onClick={() => { setSelectedIndex(idx); }}>
+                            <span className="item-name">{p.name}</span>
+                            {idx === selectedIndex && <span className="item-desc"> - {p.description}</span>}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    };
+
+    const renderModelStep = () => {
+        const provider = providers.find(p => p.id === selectedProviderId);
+        const models = provider?.models || [];
+        return (
+            <div className="step-container">
+                <div className="step-header">Select the AI model (↑/↓ to navigate, Enter to select):</div>
+                <div className="select-list">
+                    {models.map((m, idx) => (
+                        <div key={m.id} className={`select-item ${idx === selectedIndex ? 'selected' : ''}`}
+                            onClick={() => { setSelectedIndex(idx); }}>
+                            <span className="item-name">{m.name}</span>
+                            {idx === selectedIndex && <span className="item-desc"> - {m.description}</span>}
+                        </div>
+                    ))}
+                </div>
+                <div className="step-footer">Escape to go back</div>
+            </div>
+        );
+    };
+
+    const renderApiKeyStep = () => {
+        const provider = providers.find(p => p.id === selectedProviderId);
+        return (
+            <div className="step-container">
+                <div className="step-header">Enter your {provider?.name} API key:</div>
+                <input
+                    type="password"
+                    className="custom-input"
+                    value={apiKey}
+                    onChange={(e) => setApiKey(e.target.value)}
+                    autoFocus
+                    placeholder="sk-..."
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') setStep('confirm');
+                        if (e.key === 'Escape') setStep('model');
+                    }}
+                />
+                <div className="step-footer">Press Enter when done, Escape to go back</div>
+            </div>
+        );
+    };
+
+    const renderConfirmStep = () => {
+        const provider = providers.find(p => p.id === selectedProviderId);
+        const model = provider?.models.find(m => m.id === selectedModelId);
+
+        return (
+            <div className="step-container center-content">
+                <div className="bold-text">Configuration Complete!</div>
+                <div className="summary-box">
+                    <div>Provider: {provider?.name}</div>
+                    <div>Model: {model?.name}</div>
+                    {apiKey && <div>API Key: ********************</div>}
+                </div>
+                <div className="step-footer">Press Enter to continue, Escape to go back</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="setup-screen" tabIndex={0} onKeyDown={handleKeyDown} ref={containerRef}>
+            <div className="setup-content">
+                <div className="main-title">Ready to innovate ?</div>
+
+                {step === 'provider' && renderProviderStep()}
+                {step === 'model' && renderModelStep()}
+                {step === 'apikey' && renderApiKeyStep()}
+                {step === 'confirm' && renderConfirmStep()}
+            </div>
+        </div>
+    );
+}