@kirosnn/mosaic 0.0.91 → 0.73.0

package/src/web/app.tsx

@@ -1,11 +1,11 @@
 /** @jsxImportSource react */
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import ReactDOM from 'react-dom/client';
 import { HomePage } from './components/HomePage';
 import { ChatPage } from './components/ChatPage';
 import { Message } from './types';
 import { createId, extractTitle, setDocumentTitle, formatToolMessage, parseToolHeader, formatErrorMessage, DEFAULT_MAX_TOOL_LINES, getRandomBlendWord } from './utils';
-import { Conversation, getAllConversations, getConversation, saveConversation, deleteConversation, createNewConversation } from './storage';
+import { Conversation, getAllConversations, getConversation, saveConversation, deleteConversation, createNewConversation, mergeConversations } from './storage';
 import { QuestionRequest } from '../utils/questionBridge';
 import { ApprovalRequest } from '../utils/approvalBridge';
 import { parseRoute, navigateTo, replaceTo, Route } from './router';
@@ -44,6 +44,7 @@ function App() {
     const [workspace, setWorkspace] = useState<string | null>(null);
     const [questionRequest, setQuestionRequest] = useState<QuestionRequest | null>(null);
     const [approvalRequest, setApprovalRequest] = useState<ApprovalRequest | null>(null);
+    const [requireApprovals, setRequireApprovals] = useState(true);
 
     const refreshConversations = useCallback(() => {
         setConversations(getAllConversations());
@@ -77,6 +78,27 @@ function App() {
             .then(res => res.json())
             .then(data => setWorkspace(data.workspace))
             .catch(() => { });
+
+        fetch('/api/tui-conversations')
+            .then(res => res.ok ? res.json() : [])
+            .then((data: Conversation[]) => {
+                if (Array.isArray(data) && data.length > 0) {
+                    const changed = mergeConversations(data);
+                    if (changed) {
+                        refreshConversations();
+                    }
+                }
+            })
+            .catch(() => { });
+
+        fetch('/api/approvals')
+            .then(res => res.ok ? res.json() : null)
+            .then((data) => {
+                if (data && typeof data.requireApprovals === 'boolean') {
+                    setRequireApprovals(data.requireApprovals);
+                }
+            })
+            .catch(() => { });
     }, [refreshConversations]);
 
     useEffect(() => {
@@ -135,13 +157,14 @@ function App() {
         }
     }, [messages, currentTitle]);
 
-    const handleSendMessage = async (content: string) => {
-        if (!content.trim() || isProcessing) return;
+    const handleSendMessage = async (content: string, images: Message['images'] = []) => {
+        if ((!content.trim() && images.length === 0) || isProcessing) return;
 
         const userMessage: Message = {
             id: createId(),
             role: 'user',
             content: content,
+            images: images.length > 0 ? images : undefined,
         };
 
         let conversation = currentConversation;
@@ -168,9 +191,10 @@ function App() {
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
                     message: userMessage.content,
+                    images: userMessage.images || [],
                     history: messages
                         .filter((m) => m.role === 'user' || m.role === 'assistant')
-                        .map((m) => ({ role: m.role, content: m.content })),
+                        .map((m) => ({ role: m.role, content: m.content, images: m.images || [] })),
                 }),
             });
 
@@ -470,6 +494,13 @@ function App() {
     };
 
     const handleDeleteConversation = (conversationId: string) => {
+        if (conversationId.startsWith('tui_')) {
+            fetch('/api/tui-conversation/delete', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ id: conversationId }),
+            }).catch(() => { });
+        }
         deleteConversation(conversationId);
         refreshConversations();
 
@@ -494,6 +525,33 @@ function App() {
                 setCurrentTitle(newTitle);
                 setDocumentTitle(newTitle);
             }
+
+            if (conversationId.startsWith('tui_')) {
+                fetch('/api/tui-conversation/rename', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ id: conversationId, title: newTitle }),
+                }).catch(() => { });
+            }
+        }
+    };
+
+    const handleToggleApprovals = async () => {
+        try {
+            const next = !requireApprovals;
+            const res = await fetch('/api/approvals', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ requireApprovals: next }),
+            });
+            if (res.ok) {
+                setRequireApprovals(next);
+                if (!next) {
+                    setApprovalRequest(null);
+                }
+            }
+        } catch (error) {
+            console.error('Failed to toggle approvals:', error);
         }
     };
 
@@ -559,6 +617,8 @@ function App() {
                     workspace={workspace}
                     questionRequest={questionRequest}
                     approvalRequest={approvalRequest}
+                    requireApprovals={requireApprovals}
+                    onToggleApprovals={handleToggleApprovals}
                 />
             )}
 

package/src/web/assets/css/ChatPage.css

@@ -7,17 +7,18 @@
     overflow: hidden;
 }
 
-.chat-title-bar {
-    display: flex;
-    align-items: center;
-    padding: 0.75rem 1.5rem;
-    flex-shrink: 0;
-    width: 100%;
-    left: 0;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-}
+.chat-title-bar {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    flex-shrink: 0;
+    width: 100%;
+    left: 0;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    gap: 0.75rem;
+}
 
 .chat-title {
     font-size: 0.9rem;
@@ -27,13 +28,42 @@
     cursor: default;
 }
 
-.chat-workspace {
-    margin-left: auto;
-    font-size: 0.9rem;
-    font-family: 'Geist Medium Monospace', monospace;
-    color: var(--text-secondary);
-    cursor: default;
-}
+.chat-workspace {
+    font-size: 0.9rem;
+    font-family: 'Geist Medium Monospace', monospace;
+    color: var(--text-secondary);
+    cursor: default;
+}
+
+.chat-title-actions {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.approval-toggle {
+    border: 1px solid var(--border-subtle);
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    padding: 0.35rem 0.65rem;
+    border-radius: 999px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.approval-toggle:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    border-color: var(--text-muted);
+}
+
+.approval-toggle.active {
+    background: var(--accent-color);
+    border-color: var(--accent-color);
+    color: white;
+}
 
 .chat-container {
     display: flex;
@@ -73,11 +103,11 @@
     gap: 0;
 }
 
-.input-area textarea {
-    width: 100%;
-    background: transparent;
-    border: none;
-    color: var(--text-primary);
+.input-area textarea {
+    width: 100%;
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
     font-size: 1rem;
     font-family: inherit;
     resize: none;
@@ -85,12 +115,54 @@
     min-height: 60px;
     max-height: 200px;
     padding: 0;
-    line-height: 1.5;
-}
-
-.input-area textarea::placeholder {
-    color: var(--text-muted);
-}
+    line-height: 1.5;
+}
+
+.input-area textarea::placeholder {
+    color: var(--text-muted);
+}
+
+.attachment-strip {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    padding-bottom: 0.5rem;
+}
+
+.attachment-item {
+    position: relative;
+    width: 64px;
+    height: 64px;
+    border-radius: 10px;
+    overflow: hidden;
+    border: 1px solid var(--border-code);
+    background: var(--bg-code);
+}
+
+.attachment-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.attachment-item button {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.attachment-item button:hover {
+    background: rgba(0, 0, 0, 0.8);
+}
 
 .input-area textarea:disabled {
     opacity: 0.5;
@@ -209,4 +281,4 @@
 
 .send-btn.stop:hover {
     background: #ff3333;
-}
+}

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;
-}
+}