@kirosnn/mosaic 0.0.9 → 0.71.0

package/src/web/components/MessageItem.tsx

@@ -4,39 +4,11 @@ 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 { 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,66 +116,63 @@ 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>
         );
     }
 
-    return (
-        <div className={`message ${message.role} ${message.isError ? 'error' : ''}`}>
-            <div className="message-content">
-                {message.displayContent || message.content}
-            </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">
+                {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>
+    );
+}

package/src/web/components/Setup.tsx

@@ -208,4 +208,4 @@ export function Setup({ onComplete }: SetupProps) {
             </div>
         </div>
     );
-}
+}

package/src/web/components/Sidebar.tsx

@@ -289,4 +289,4 @@ export function Sidebar({
             )}
         </>
     );
-}
+}

package/src/web/components/ThinkingIndicator.tsx

@@ -19,6 +19,7 @@ const THINKING_WORDS = [
 interface ThinkingIndicatorProps {
     startTime?: number;
     tokens?: number;
+    nextStep?: string;
 }
 
 function formatElapsedTime(startTime: number | undefined): string {
@@ -36,7 +37,7 @@ function formatElapsedTime(startTime: number | undefined): string {
     return `${seconds}s`;
 }
 
-export function ThinkingIndicator({ startTime, tokens }: ThinkingIndicatorProps) {
+export function ThinkingIndicator({ startTime, tokens, nextStep }: ThinkingIndicatorProps) {
     const [shimmerPos, setShimmerPos] = useState(-2);
     const [, setTick] = useState(0);
     const thinkingWord = useMemo(
@@ -60,26 +61,44 @@ export function ThinkingIndicator({ startTime, tokens }: ThinkingIndicatorProps)
     const elapsedStr = formatElapsedTime(startTime);
 
     return (
-        <div className="thinking-indicator">
-            <span className="thinking-icon">&#x2058;</span>
-            <span className="thinking-text">
-                {text.split("").map((char, index) => {
-                    const inShimmer = index === shimmerPos || index === shimmerPos - 1;
-                    return (
-                        <span
-                            key={index}
-                            className={inShimmer ? "shimmer-active" : "shimmer-dim"}
-                        >
-                            {char}
-                        </span>
-                    );
-                })}
-            </span>
-            {elapsedStr && <span className="thinking-elapsed"> - {elapsedStr}</span>}
-            <span className="thinking-hint"> - esc to cancel</span>
-            {tokens !== undefined && tokens > 0 && (
-                <span className="thinking-tokens"> - {tokens.toLocaleString()} tokens</span>
+        <div className="thinking-block">
+            <div className="thinking-indicator">
+                <span className="thinking-icon">&#x2058;</span>
+                <span className="thinking-text">
+                    {text.split("").map((char, index) => {
+                        const inShimmer = index === shimmerPos || index === shimmerPos - 1;
+                        return (
+                            <span
+                                key={index}
+                                className={inShimmer ? "shimmer-active" : "shimmer-dim"}
+                            >
+                                {char}
+                            </span>
+                        );
+                    })}
+                </span>
+                {elapsedStr && (
+                    <>
+                        <span className="thinking-sep"> — </span>
+                        <span className="thinking-elapsed">{elapsedStr}</span>
+                    </>
+                )}
+                <span className="thinking-sep"> — </span>
+                <span className="thinking-hint">esc to cancel</span>
+                {tokens !== undefined && tokens > 0 && (
+                    <>
+                        <span className="thinking-sep"> — </span>
+                        <span className="thinking-tokens">{tokens.toLocaleString()} tokens</span>
+                    </>
+                )}
+            </div>
+            {nextStep && (
+                <div className="thinking-next-line">
+                    <span className="thinking-next-icon">⎿ </span>
+                    <span className="thinking-next-label">Next:</span>
+                    <span className="thinking-next-step">{nextStep}</span>
+                </div>
             )}
         </div>
     );
-}
+}

package/src/web/router.ts

@@ -43,4 +43,4 @@ export function navigateTo(route: Route): void {
 export function replaceTo(route: Route): void {
     const path = buildPath(route);
     window.history.replaceState(null, '', path);
-}
+}

package/src/web/server.tsx

@@ -2,16 +2,18 @@ import { serve } from "bun";
 import { join } from "path";
 import { existsSync, readdirSync, statSync } from "fs";
 import { build } from "bun";
-import { createCliRenderer, TextAttributes } from "@opentui/core";
-import { createRoot } from "@opentui/react";
-import React from "react";
-import { exec } from "child_process";
+import { createCliRenderer, TextAttributes } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import React from "react";
+import { exec } from "child_process";
+import type { ImagePart, TextPart, UserContent } from "ai";
+import type { ImageAttachment } from "../utils/images";
 
 const PORT = 8192;
 const HOST = "127.0.0.1";
 
 import { subscribeQuestion, answerQuestion } from "../utils/questionBridge";
-import { subscribeApproval, respondApproval } from "../utils/approvalBridge";
+import { subscribeApproval, respondApproval, getCurrentApproval } from "../utils/approvalBridge";
 
 let currentAbortController: AbortController | null = null;
 
@@ -107,10 +109,35 @@ function installExternalLogCapture() {
     }
 }
 
-installExternalLogCapture();
-
-let appJsContent: string | null = null;
-let appCssContent: string | null = null;
+installExternalLogCapture();
+
+let appJsContent: string | null = null;
+let appCssContent: string | null = null;
+
+function buildUserContent(text: string, images?: ImageAttachment[]): UserContent {
+    if (!images || images.length === 0) return text;
+    const parts: Array<TextPart | ImagePart> = [];
+    parts.push({ type: "text", text });
+    for (const img of images) {
+        parts.push({ type: "image", image: img.data, mimeType: img.mimeType });
+    }
+    return parts;
+}
+
+function buildConversationHistory(
+    history: Array<{ role: string; content: string; images?: ImageAttachment[] }>,
+    allowImages: boolean
+) {
+    return history
+        .filter((m) => m.role === "user" || m.role === "assistant")
+        .map((m) => {
+            if (m.role === "user") {
+                const content = allowImages ? buildUserContent(m.content, m.images) : m.content;
+                return { role: "user" as const, content };
+            }
+            return { role: "assistant" as const, content: m.content };
+        });
+}
 
 async function buildApp() {
     const appPath = join(__dirname, "app.tsx");
@@ -335,13 +362,108 @@ async function startServer(port: number, maxRetries = 10) {
                         });
                     }
 
-                    if (url.pathname === "/api/config" && request.method === "GET") {
-                        const { readConfig } = await import("../utils/config");
-                        const config = readConfig();
-                        return new Response(JSON.stringify({
-                            provider: config.provider,
-                            model: config.model
-                        }), {
+                    if (url.pathname === "/api/config" && request.method === "GET") {
+                        const { readConfig } = await import("../utils/config");
+                        const config = readConfig();
+                        return new Response(JSON.stringify({
+                            provider: config.provider,
+                            model: config.model,
+                            requireApprovals: config.requireApprovals !== false
+                        }), {
+                            headers: { "Content-Type": "application/json" },
+                        });
+                    }
+
+                    if (url.pathname === "/api/approvals" && request.method === "GET") {
+                        const { readConfig } = await import("../utils/config");
+                        const config = readConfig();
+                        return new Response(JSON.stringify({
+                            requireApprovals: config.requireApprovals !== false
+                        }), {
+                            headers: { "Content-Type": "application/json" },
+                        });
+                    }
+
+                    if (url.pathname === "/api/approvals" && request.method === "POST") {
+                        const body = (await request.json()) as { requireApprovals?: boolean };
+                        if (typeof body.requireApprovals !== "boolean") {
+                            return new Response(JSON.stringify({ error: "Invalid requireApprovals value" }), {
+                                status: 400,
+                                headers: { "Content-Type": "application/json" },
+                            });
+                        }
+                        const { setRequireApprovals } = await import("../utils/config");
+                        setRequireApprovals(body.requireApprovals);
+                        if (!body.requireApprovals && getCurrentApproval()) {
+                            respondApproval(true);
+                        }
+                        return new Response(JSON.stringify({ success: true, requireApprovals: body.requireApprovals }), {
+                            headers: { "Content-Type": "application/json" },
+                        });
+                    }
+
+                    if (url.pathname === "/api/tui-conversations" && request.method === "GET") {
+                        const { loadConversations } = await import("../utils/history");
+                        const historyConversations = loadConversations();
+                        const mapped = historyConversations.map((conv) => {
+                            const steps = Array.isArray(conv.steps) ? conv.steps : [];
+                            const baseTimestamp = typeof conv.timestamp === "number" ? conv.timestamp : Date.now();
+                            const messages = steps.map((step, index) => ({
+                                id: `${conv.id}_${index}`,
+                                role: step.type === "tool" ? "tool" : step.type,
+                                content: step.content,
+                                images: step.images,
+                                toolName: step.toolName,
+                                toolArgs: step.toolArgs,
+                                toolResult: step.toolResult,
+                                timestamp: step.timestamp,
+                                responseDuration: step.responseDuration,
+                                blendWord: step.blendWord
+                            }));
+
+                            return {
+                                id: `tui_${conv.id}`,
+                                title: conv.title ?? null,
+                                messages,
+                                workspace: conv.workspace ?? null,
+                                createdAt: baseTimestamp,
+                                updatedAt: baseTimestamp
+                            };
+                        });
+
+                        return new Response(JSON.stringify(mapped), {
+                            headers: { "Content-Type": "application/json" },
+                        });
+                    }
+
+                    if (url.pathname === "/api/tui-conversation/rename" && request.method === "POST") {
+                        const body = (await request.json()) as { id: string; title: string | null };
+                        if (!body?.id || typeof body.id !== "string") {
+                            return new Response(JSON.stringify({ error: "Invalid id" }), {
+                                status: 400,
+                                headers: { "Content-Type": "application/json" },
+                            });
+                        }
+                        const historyId = body.id.startsWith("tui_") ? body.id.slice(4) : body.id;
+                        const { updateConversationTitle } = await import("../utils/history");
+                        const success = updateConversationTitle(historyId, body.title ?? null);
+                        return new Response(JSON.stringify({ success }), {
+                            headers: { "Content-Type": "application/json" },
+                        });
+                    }
+
+                    if (url.pathname === "/api/tui-conversation/delete" && request.method === "POST") {
+                        const body = (await request.json()) as { id: string };
+                        if (!body?.id || typeof body.id !== "string") {
+                            return new Response(JSON.stringify({ error: "Invalid id" }), {
+                                status: 400,
+                                headers: { "Content-Type": "application/json" },
+                            });
+                        }
+                        const historyId = body.id.startsWith("tui_") ? body.id.slice(4) : body.id;
+                        const { deleteConversation } = await import("../utils/history");
+                        const success = deleteConversation(historyId);
+                        return new Response(JSON.stringify({ success }), {
                             headers: { "Content-Type": "application/json" },
                         });
                     }
@@ -392,22 +514,33 @@ async function startServer(port: number, maxRetries = 10) {
                         });
                     }
 
-                    if (url.pathname === "/api/message" && request.method === "POST") {
-                        const body = (await request.json()) as {
-                            message: string;
-                            history: Array<{ role: string; content: string }>;
-                        };
-
-                        if (!body.message || typeof body.message !== "string") {
-                            addLog("Invalid message format");
-                            return new Response(JSON.stringify({ error: "Invalid message format" }), {
-                                status: 400,
-                                headers: { "Content-Type": "application/json" },
-                            });
-
-                        }
-
-                        addLog("Message received");
+                    if (url.pathname === "/api/message" && request.method === "POST") {
+                        const body = (await request.json()) as {
+                            message?: string;
+                            images?: ImageAttachment[];
+                            history?: Array<{ role: string; content: string; images?: ImageAttachment[] }>;
+                        };
+
+                        if (typeof body.message !== "string") {
+                            addLog("Invalid message format");
+                            return new Response(JSON.stringify({ error: "Invalid message format" }), {
+                                status: 400,
+                                headers: { "Content-Type": "application/json" },
+                            });
+                        }
+
+                        const messageText = body.message ?? "";
+                        const images = Array.isArray(body.images) ? body.images : [];
+
+                        if (!messageText.trim() && images.length === 0) {
+                            addLog("Empty message");
+                            return new Response(JSON.stringify({ error: "Empty message" }), {
+                                status: 400,
+                                headers: { "Content-Type": "application/json" },
+                            });
+                        }
+
+                        addLog("Message received");
 
                         currentAbortController = new AbortController();
                         const abortSignal = currentAbortController.signal;
@@ -485,12 +618,27 @@ async function startServer(port: number, maxRetries = 10) {
                                         return;
                                     }
 
-                                    const agent = new Agent();
-                                    const conversationHistory = body.history || [];
-                                    conversationHistory.push({ role: "user", content: body.message });
-
-
-                                    for await (const event of agent.streamMessages(conversationHistory as any, {})) {
+                                    const agent = new Agent();
+                                    let allowImages = false;
+                                    try {
+                                        const { readConfig } = await import("../utils/config");
+                                        const config = readConfig();
+                                        if (config.model) {
+                                            const { findModelsDevModelById, modelAcceptsImages } = await import("../utils/models");
+                                            const result = await findModelsDevModelById(config.model);
+                                            allowImages = Boolean(result && result.model && modelAcceptsImages(result.model));
+                                        }
+                                    } catch { }
+
+                                    const conversationHistory = buildConversationHistory(body.history || [], allowImages);
+                                    const userImages = allowImages ? images : [];
+                                    conversationHistory.push({
+                                        role: "user",
+                                        content: allowImages ? buildUserContent(messageText, userImages) : messageText
+                                    });
+
+
+                                    for await (const event of agent.streamMessages(conversationHistory as any, {})) {
                                         if (aborted) break;
                                         if (!safeEnqueue(JSON.stringify(event) + "\n")) break;
                                     }
@@ -659,4 +807,4 @@ function ServerStatus() {
 }
 
 const renderer = await createCliRenderer();
-createRoot(renderer).render(<ServerStatus />);
+createRoot(renderer).render(<ServerStatus />);

package/src/web/storage.ts

@@ -26,6 +26,28 @@ export function getAllConversations(): Conversation[] {
     }
 }
 
+export function mergeConversations(incoming: Conversation[]): boolean {
+    if (!incoming.length) return false;
+
+    const existing = getAllConversations();
+    const byId = new Map(existing.map((conv) => [conv.id, conv]));
+    let changed = false;
+
+    for (const conv of incoming) {
+        const current = byId.get(conv.id);
+        if (!current || conv.updatedAt > current.updatedAt) {
+            byId.set(conv.id, conv);
+            changed = true;
+        }
+    }
+
+    if (changed) {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(Array.from(byId.values())));
+    }
+
+    return changed;
+}
+
 export function getConversation(id: string): Conversation | null {
     const conversations = getAllConversations();
     return conversations.find(c => c.id === id) || null;
@@ -89,4 +111,4 @@ export function formatWorkspace(path: string | null | undefined): string {
     }
 
     return normalized;
-}
+}

package/src/web/types.ts

@@ -1,8 +1,9 @@
-export interface Message {
-    id: string;
-    role: 'user' | 'assistant' | 'tool';
-    content: string;
-    displayContent?: string;
+export interface Message {
+    id: string;
+    role: 'user' | 'assistant' | 'tool';
+    content: string;
+    images?: import("../utils/images").ImageAttachment[];
+    displayContent?: string;
     isError?: boolean;
     toolName?: string;
     toolArgs?: Record<string, unknown>;
@@ -14,4 +15,4 @@ export interface Message {
     runningStartTime?: number;
     responseDuration?: number;
     blendWord?: string;
-}
+}