@kirosnn/mosaic 0.0.7

package/src/web/assets/css/global.css

@@ -0,0 +1,226 @@
+@import "ChatPage.css";
+@import "HomePage.css";
+@import "Sidebar.css";
+@import "SidebarModal.css";
+@import "MessageItem.css";
+@import "ToolMessage.css";
+@import "Markdown.css";
+
+:root {
+    --bg-app: #171717;
+    --bg-panel: #1a1a1a;
+    --bg-code: #0d0d0d;
+    --bg-panel-transparent: rgba(26, 26, 26, 0.5);
+
+    --text-primary: #ffffff;
+    --text-secondary: #aaaaaa;
+    --text-muted: #666666;
+
+    --accent-color: #ffca38;
+    --accent-hover: #ffd966;
+
+    --border-subtle: #333333;
+    --border-code: #2a2a2a;
+    --code-text: #e0e0e0;
+
+    --bg-tool: rgba(26, 42, 26, 0.2);
+    --border-tool: #1a2a1a;
+
+    --bg-tool-running: rgba(26, 26, 42, 0.2);
+    --border-tool-running: #1a1a2a;
+
+    --bg-tool-error: rgba(42, 26, 26, 0.2);
+    --border-tool-error: #2a1a1a;
+
+    --bg-error: #3a1a1a;
+
+    --status-success: #44aa88;
+    --status-running: #4488aa;
+    --status-error: #ff4444;
+    --status-error-dark: #ff3838;
+
+    --overlay-light: rgba(255, 255, 255, 0.05);
+    --overlay-medium: rgba(255, 255, 255, 0.08);
+    --overlay-strong: rgba(255, 255, 255, 0.12);
+    --border-overlay-light: rgba(255, 255, 255, 0.1);
+    --border-overlay-strong: rgba(255, 255, 255, 0.2);
+
+    --shadow-light: rgba(0, 0, 0, 0.1);
+    --shadow-medium: rgba(0, 0, 0, 0.15);
+
+    --gradient-hover: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.02), transparent);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --bg-app: #ffffff;
+        --bg-panel: #f5f5f5;
+        --bg-code: #f8f8f8;
+
+        --text-primary: #1a1a1a;
+        --text-secondary: #555555;
+        --text-muted: #888888;
+
+        --accent-color: #d9a510;
+        --accent-hover: #b88a0e;
+
+        --border-subtle: #dddddd;
+        --border-code: #e0e0e0;
+        --code-text: #333333;
+
+        --bg-tool: rgba(240, 253, 244, 0.2);
+        --border-tool: #f0fdf4;
+
+        --bg-tool-running: rgba(239, 246, 255, 0.2);
+        --border-tool-running: #eff6ff;
+
+        --bg-tool-error: rgba(254, 242, 242, 0.2);
+        --border-tool-error: #fef2f2;
+
+        --bg-error: #fff1f2;
+
+        --status-success: #059669;
+        --status-running: #0284c7;
+        --status-error: #dc2626;
+        --status-error-dark: #ef4444;
+
+        --overlay-light: rgba(0, 0, 0, 0.03);
+        --overlay-medium: rgba(0, 0, 0, 0.05);
+        --overlay-strong: rgba(0, 0, 0, 0.08);
+        --border-overlay-light: rgba(0, 0, 0, 0.1);
+        --border-overlay-strong: rgba(0, 0, 0, 0.15);
+
+        --shadow-light: rgba(0, 0, 0, 0.06);
+        --shadow-medium: rgba(0, 0, 0, 0.1);
+
+        --gradient-hover: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.02), transparent);
+    }
+}
+
+@font-face {
+    font-family: "Geist";
+    src: url("../fonts/Geist[wght].woff2") format("woff2");
+    font-style: normal;
+    font-display: swap
+}
+
+@font-face {
+    font-family: "Geist Medium Monospace";
+    src: url("../fonts/GeistMono-Medium.woff2") format("woff2");
+    font-style: normal;
+    font-display: swap
+}
+
+@font-face {
+    font-family: "Blauer Nue Regular";
+    src: url("../fonts/blauer-nue-regular.woff2") format("woff2");
+    font-style: normal;
+    font-display: swap
+}
+
+@font-face {
+    font-family: "Neue Montreal Regular";
+    src: url("../fonts/neue-montreal-regular.woff2") format("woff2");
+    font-style: normal;
+    font-display: swap
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+    background: var(--bg-app);
+    color: var(--text-primary);
+    height: 100vh;
+    overflow: hidden;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+#root {
+    width: 100%;
+    height: 100%;
+}
+
+
+::-webkit-scrollbar {
+    display: none;
+}
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    backdrop-filter: blur(4px);
+}
+
+.modal-content {
+    background: var(--bg-panel);
+    border: 1px solid var(--border-subtle);
+    border-radius: 16px;
+    width: 90%;
+    max-width: 500px;
+    overflow: hidden;
+    animation: modal-slide-up 0.3s ease-out;
+}
+
+@keyframes modal-slide-up {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.modal-header h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.close-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.25rem;
+    border-radius: 4px;
+    transition: color 0.2s, background 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.close-btn:hover {
+    color: var(--text-primary);
+    background: var(--overlay-light);
+}
+
+.modal-body {
+    padding: 1.5rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}

package/src/web/assets/images/favicon-v2.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" ?> 
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 100 100"> 
+  <rect width="100" height="100" fill="black"/>
+  <path d="M10 40 C 20 20, 40 20, 50 40 S 80 60, 90 40" fill="white"/> 
+  <path d="M10 60 C 20 40, 40 40, 50 60 S 80 80, 90 60" fill="white"/> 
+</svg>

package/src/web/assets/images/foruse.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" ?> 
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400" viewBox="0 0 100 100"> 
+  <path d="M10 40 C 20 20, 40 20, 50 40 S 80 60, 90 40" fill="white"/> 
+  <path d="M10 60 C 20 40, 40 40, 50 60 S 80 80, 90 60" fill="white"/> 
+</svg>

package/src/web/assets/images/logo_black.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" ?> 
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 100 100"> 
+  <path d="M10 40 C 20 20, 40 20, 50 40 S 80 60, 90 40" fill="black"/> 
+  <path d="M10 60 C 20 40, 40 40, 50 60 S 80 80, 90 60" fill="black"/> 
+</svg>

package/src/web/assets/images/logo_white.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" ?> 
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 100 100"> 
+  <path d="M10 40 C 20 20, 40 20, 50 40 S 80 60, 90 40" fill="white"/> 
+  <path d="M10 60 C 20 40, 40 40, 50 60 S 80 80, 90 60" fill="white"/> 
+</svg>

package/src/web/build.ts

@@ -0,0 +1,23 @@
+import { build } from 'bun';
+import { join } from 'path';
+
+const result = await build({
+    entrypoints: [join(__dirname, 'app.tsx')],
+    outdir: join(__dirname, 'dist'),
+    target: 'browser',
+    format: 'esm',
+    minify: false,
+    splitting: false,
+    sourcemap: 'none',
+    naming: {
+        entry: 'app.js',
+    },
+    external: [],
+});
+
+if (!result.success) {
+    console.error('Build failed');
+    process.exit(1);
+}
+
+console.log('Build completed successfully');

package/src/web/components/ApprovalPanel.tsx

@@ -0,0 +1,191 @@
+/** @jsxImportSource react */
+import React, { useState, useEffect, useRef } from 'react';
+import { ApprovalRequest } from '../../utils/approvalBridge';
+
+interface ApprovalPanelProps {
+    request: ApprovalRequest;
+    onRespond: (approved: boolean, customResponse?: string) => void;
+}
+
+export function ApprovalPanel({ request, onRespond }: ApprovalPanelProps) {
+    const [customText, setCustomText] = useState('');
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    const titleMatch = request.preview.title.match(/^(.+?)\s*\((.+)\)$/);
+    const toolName = titleMatch ? titleMatch[1] : request.preview.title;
+    const toolInfo = titleMatch ? titleMatch[2] : null;
+
+    useEffect(() => {
+        setCustomText('');
+        setSelectedIndex(0);
+        if (inputRef.current) inputRef.current.focus();
+    }, [request.id]);
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setSelectedIndex(prev => (prev === 0 ? 1 : 0));
+        } else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setSelectedIndex(prev => (prev === 1 ? 0 : 1));
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            if (customText.trim()) {
+                onRespond(false, customText);
+            } else {
+                if (selectedIndex === 0) onRespond(true);
+                else onRespond(false);
+            }
+        }
+    };
+
+    const handleSubmitCustom = (e: React.FormEvent) => {
+        e.preventDefault();
+        onRespond(false, customText);
+    };
+
+    const renderDiffLine = (line: string, index: number) => {
+        const match = line.match(/^([+-])\s*(\d+)\s*\|?\s*(.*)$/);
+        if (match) {
+            const [, prefix, lineNum, content] = match;
+            const isAdded = prefix === '+';
+            const isRemoved = prefix === '-';
+            const bgClass = isAdded ? 'diff-added' : isRemoved ? 'diff-removed' : '';
+
+            return (
+                <div key={index} className={`diff-line ${bgClass}`}>
+                    <span className="diff-linenum">{prefix}{lineNum}</span>
+                    <span className="diff-content">{content}</span>
+                </div>
+            );
+        }
+        return <div key={index} className="diff-line">{line}</div>;
+    };
+
+    return (
+        <div className="panel approval-panel">
+            <div className="panel-header">
+                <strong>{toolName}</strong>
+                {toolInfo && <span className="text-muted"> ({toolInfo})</span>}
+            </div>
+            <div className="panel-content">
+                <div className="diff-preview">
+                    {request.preview.content.split('\n').map((line, i) => renderDiffLine(line, i))}
+                </div>
+
+                <div className="approval-options">
+                    <div
+                        className={`approval-option ${selectedIndex === 0 ? 'selected' : ''}`}
+                        onClick={() => onRespond(true)}
+                    >
+                        Yes
+                    </div>
+                    <div
+                        className={`approval-option ${selectedIndex === 1 ? 'selected' : ''}`}
+                        onClick={() => onRespond(false)}
+                    >
+                        No
+                    </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 to do instead..."
+                            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(--text-primary);
+                }
+                .text-muted {
+                   color: var(--text-muted);
+                }
+                .diff-preview {
+                    font-family: 'Geist Mono', monospace;
+                    font-size: 0.9em;
+                    background: var(--bg-code);
+                    border-radius: 4px;
+                    padding: 0.5rem;
+                    margin-bottom: 1rem;
+                    overflow-x: auto;
+                    white-space: pre;
+                    max-height: 300px;
+                    overflow-y: auto;
+                }
+                .diff-line {
+                    display: flex;
+                    min-width: fit-content;
+                }
+                .diff-added {
+                    background: rgba(5, 150, 105, 0.1); 
+                }
+                .diff-removed {
+                    background: rgba(220, 38, 38, 0.1); 
+                }
+                .diff-linenum {
+                    width: 3.5rem;
+                    color: var(--text-muted);
+                    flex-shrink: 0;
+                    user-select: none;
+                }
+                .diff-content {
+                    color: var(--text-primary);
+                }
+                .approval-options {
+                    display: flex;
+                    gap: 1rem;
+                    margin-bottom: 1rem;
+                }
+                .approval-option {
+                    padding: 0.5rem 1rem;
+                    border: 1px solid var(--border-subtle);
+                    border-radius: 4px;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                    min-width: 60px;
+                    text-align: center;
+                }
+                .approval-option:hover {
+                    background: var(--overlay-light);
+                }
+                .approval-option.selected {
+                    background: var(--overlay-medium);
+                    border-color: var(--accent-color);
+                    color: var(--accent-color);
+                }
+
+                .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>
+    );
+}