@doppelgangerdev/doppelganger 0.2.2

package/src/components/ExecutionDetailScreen.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Execution, Results, ConfirmRequest } from '../types';
+import ResultsPane from './editor/ResultsPane';
+
+interface ExecutionDetailScreenProps {
+    onConfirm: (request: string | ConfirmRequest) => Promise<boolean>;
+    onNotify: (message: string, tone?: 'success' | 'error') => void;
+}
+
+const toResults = (exec: Execution): Results | null => {
+    if (!exec.result) return null;
+    const result = exec.result || {};
+    return {
+        url: exec.url || result.url || '',
+        finalUrl: result.final_url || result.finalUrl,
+        html: result.html,
+        data: result.data ?? result.html ?? '',
+        screenshotUrl: result.screenshot_url || result.screenshotUrl,
+        logs: result.logs || [],
+        timestamp: new Date(exec.timestamp).toLocaleTimeString()
+    };
+};
+
+const ExecutionDetailScreen: React.FC<ExecutionDetailScreenProps> = ({ onConfirm, onNotify }) => {
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [execution, setExecution] = useState<Execution | null>(null);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        const loadExecution = async () => {
+            if (!id) return;
+            setLoading(true);
+            try {
+                const res = await fetch(`/api/executions/${id}`);
+                if (!res.ok) throw new Error('Failed to load execution');
+                const data = await res.json();
+                setExecution(data.execution || null);
+            } catch {
+                setExecution(null);
+            } finally {
+                setLoading(false);
+            }
+        };
+        loadExecution();
+    }, [id]);
+
+    if (loading) {
+        return (
+            <main className="flex-1 p-12 overflow-y-auto custom-scrollbar animate-in fade-in duration-500">
+                <div className="max-w-6xl mx-auto text-[9px] text-gray-500 uppercase tracking-widest">Loading execution...</div>
+            </main>
+        );
+    }
+
+    if (!execution) {
+        return (
+            <main className="flex-1 p-12 overflow-y-auto custom-scrollbar animate-in fade-in duration-500">
+                <div className="max-w-6xl mx-auto space-y-6">
+                    <button
+                        onClick={() => navigate('/executions')}
+                        className="px-4 py-2 text-[9px] font-bold uppercase tracking-widest rounded-xl bg-white/5 border border-white/10 text-white hover:bg-white/10 transition-all"
+                    >
+                        Back
+                    </button>
+                    <div className="text-[9px] text-gray-600 uppercase tracking-widest">Execution not found.</div>
+                </div>
+            </main>
+        );
+    }
+
+    const results = toResults(execution);
+
+    return (
+        <main className="flex-1 p-12 overflow-y-auto custom-scrollbar animate-in fade-in duration-500">
+            <div className="max-w-6xl mx-auto space-y-8">
+                <div className="flex items-end justify-between">
+                    <div className="space-y-2">
+                        <p className="text-[10px] font-bold text-blue-400 uppercase tracking-[0.4em]">Execution</p>
+                        <h2 className="text-3xl font-bold tracking-tighter text-white">{execution.taskName || execution.mode}</h2>
+                        <div className="text-[8px] text-gray-500 uppercase tracking-[0.2em]">
+                            {new Date(execution.timestamp).toLocaleString()} | {execution.source} | {execution.mode} | {execution.status} | {execution.durationMs}ms
+                        </div>
+                    </div>
+                    <button
+                        onClick={() => navigate('/executions')}
+                        className="px-4 py-2 text-[9px] font-bold uppercase tracking-widest rounded-xl bg-white/5 border border-white/10 text-white hover:bg-white/10 transition-all"
+                    >
+                        Back
+                    </button>
+                </div>
+
+                <div className="glass-card rounded-[32px] p-8 flex flex-col min-h-[420px]">
+                        <div className="flex items-center justify-between border-b border-white/5 pb-4 mb-6">
+                            <span className="text-[8px] font-bold text-gray-500 uppercase tracking-widest">Output</span>
+                        </div>
+                        {results ? (
+                            <ResultsPane
+                                results={results}
+                                isExecuting={false}
+                                onConfirm={onConfirm}
+                                onNotify={onNotify}
+                                fullWidth
+                            />
+                        ) : (
+                            <div className="text-[9px] text-gray-500 uppercase tracking-widest">No output captured.</div>
+                        )}
+                </div>
+            </div>
+        </main>
+    );
+};
+
+export default ExecutionDetailScreen;

package/src/components/ExecutionsScreen.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { RefreshCw, Trash2, Monitor, Cloud } from 'lucide-react';
+import { Execution, ConfirmRequest } from '../types';
+
+interface ExecutionsScreenProps {
+    onConfirm: (request: string | ConfirmRequest) => Promise<boolean>;
+    onNotify: (message: string, tone?: 'success' | 'error') => void;
+}
+
+const ExecutionsScreen: React.FC<ExecutionsScreenProps> = ({ onConfirm, onNotify }) => {
+    const navigate = useNavigate();
+    const [executions, setExecutions] = useState<Execution[]>([]);
+    const [filter, setFilter] = useState<'all' | 'editor' | 'api'>('all');
+    const [loading, setLoading] = useState(false);
+
+    const loadExecutions = async () => {
+        setLoading(true);
+        try {
+            const res = await fetch('/api/executions');
+            if (!res.ok) throw new Error('Failed to load');
+            const data = await res.json();
+            setExecutions(Array.isArray(data.executions) ? data.executions : []);
+        } catch {
+            setExecutions([]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const clearExecutions = async () => {
+        const confirmed = await onConfirm('Clear all executions?');
+        if (!confirmed) return;
+        const res = await fetch('/api/executions/clear', { method: 'POST' });
+        if (res.ok) {
+            onNotify('Executions cleared.', 'success');
+            loadExecutions();
+        } else {
+            onNotify('Clear failed.', 'error');
+        }
+    };
+
+    const deleteExecution = async (id: string) => {
+        const confirmed = await onConfirm('Delete this execution?');
+        if (!confirmed) return;
+        const res = await fetch(`/api/executions/${id}`, { method: 'DELETE' });
+        if (res.ok) {
+            onNotify('Execution deleted.', 'success');
+            setExecutions((prev) => prev.filter((e) => e.id !== id));
+        } else {
+            onNotify('Delete failed.', 'error');
+        }
+    };
+
+    useEffect(() => {
+        loadExecutions();
+    }, []);
+
+    const filtered = executions.filter((exec) => {
+        if (filter === 'all') return true;
+        return exec.source === filter;
+    });
+
+    return (
+        <main className="flex-1 p-12 overflow-y-auto custom-scrollbar animate-in fade-in duration-500">
+            <div className="max-w-6xl mx-auto space-y-8">
+                <div className="flex items-end justify-between">
+                    <div className="space-y-2">
+                        <p className="text-[10px] font-bold text-blue-400 uppercase tracking-[0.4em]">Executions</p>
+                        <h2 className="text-4xl font-bold tracking-tighter text-white">Run History</h2>
+                    </div>
+                    <div className="flex items-center gap-3">
+                        <div className="flex bg-white/5 rounded-xl p-1 border border-white/5">
+                            {(['all', 'editor', 'api'] as const).map((mode) => (
+                                <button
+                                    key={mode}
+                                    onClick={() => setFilter(mode)}
+                                    className={`px-4 py-2 text-[9px] font-bold uppercase tracking-widest rounded-lg transition-all ${filter === mode ? 'bg-white text-black' : 'text-gray-500 hover:text-white'}`}
+                                >
+                                    {mode}
+                                </button>
+                            ))}
+                        </div>
+                        <button
+                            onClick={loadExecutions}
+                            className="w-10 h-10 rounded-2xl border border-white/10 text-gray-400 hover:text-white hover:bg-white/5 transition-all flex items-center justify-center"
+                            title="Refresh"
+                        >
+                            <RefreshCw className="w-4 h-4" />
+                        </button>
+                        <button
+                            onClick={clearExecutions}
+                            className="w-10 h-10 rounded-2xl border border-red-500/20 text-red-400 hover:bg-red-500/10 transition-all flex items-center justify-center"
+                            title="Clear all"
+                        >
+                            <Trash2 className="w-4 h-4" />
+                        </button>
+                    </div>
+                </div>
+
+                {loading && (
+                    <div className="text-[9px] text-gray-500 uppercase tracking-widest">Loading executions...</div>
+                )}
+                {!loading && filtered.length === 0 && (
+                    <div className="text-[9px] text-gray-600 uppercase tracking-widest">No executions found.</div>
+                )}
+
+                <div className="space-y-3">
+                    {filtered.map((exec) => (
+                        <div
+                            key={exec.id}
+                            onClick={() => navigate(`/executions/${exec.id}`)}
+                            onKeyDown={(event) => {
+                                if (event.key === 'Enter' || event.key === ' ') {
+                                    event.preventDefault();
+                                    navigate(`/executions/${exec.id}`);
+                                }
+                            }}
+                            role="button"
+                            tabIndex={0}
+                            className="glass-card w-full rounded-2xl p-5 flex items-center gap-4 text-left hover:bg-white/[0.06] transition-all cursor-pointer"
+                        >
+                            <div className="w-10 h-10 rounded-2xl bg-white/5 flex items-center justify-center text-gray-400">
+                                {exec.source === 'api' ? <Cloud className="w-5 h-5" /> : <Monitor className="w-5 h-5" />}
+                            </div>
+                            <div className="flex-1 min-w-0 space-y-1">
+                                <div className="text-[10px] font-bold text-white uppercase tracking-widest truncate">
+                                    {exec.taskName || exec.mode}
+                                </div>
+                                <div className="text-[8px] text-gray-500 uppercase tracking-[0.2em]">
+                                    {new Date(exec.timestamp).toLocaleString()} | {exec.source} | {exec.mode} | {exec.status} | {exec.durationMs}ms
+                                </div>
+                                {exec.url && (
+                                    <div className="text-[9px] text-white/50 truncate font-mono">
+                                        {exec.url}
+                                    </div>
+                                )}
+                            </div>
+                            <button
+                                onClick={(event) => {
+                                    event.stopPropagation();
+                                    deleteExecution(exec.id);
+                                }}
+                                className="px-4 py-2 text-[9px] font-bold uppercase tracking-widest rounded-xl bg-red-500/5 border border-red-500/10 text-red-400 hover:bg-red-500/10 transition-all"
+                            >
+                                Delete
+                            </button>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </main>
+    );
+};
+
+export default ExecutionsScreen;

package/src/components/LoadingScreen.tsx

@@ -0,0 +1,26 @@
+interface LoadingScreenProps {
+    title?: string;
+    subtitle?: string;
+}
+
+const LoadingScreen: React.FC<LoadingScreenProps> = ({ title = 'Loading', subtitle }) => {
+    return (
+        <div className="fixed inset-0 z-[80] bg-[#020202] flex items-center justify-center">
+            <div className="absolute inset-0 opacity-[0.03] pointer-events-none"
+                style={{ backgroundImage: 'radial-gradient(#fff 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
+            <div className="glass-card p-10 rounded-[40px] text-center space-y-4">
+                <div className="w-12 h-12 mx-auto rounded-full border border-white/10 flex items-center justify-center">
+                    <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" />
+                </div>
+                <div className="space-y-2">
+                    <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-gray-500">{title}</p>
+                    {subtitle && (
+                        <p className="text-xs font-mono text-white/80">{subtitle}</p>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default LoadingScreen;

package/src/components/NotFoundScreen.tsx

@@ -0,0 +1,34 @@
+import { MoveLeft } from 'lucide-react';
+
+interface NotFoundScreenProps {
+    title?: string;
+    subtitle?: string;
+    onBack?: () => void;
+}
+
+const NotFoundScreen: React.FC<NotFoundScreenProps> = ({
+    title = 'Not Found',
+    subtitle = 'The page you requested does not exist.',
+    onBack
+}) => {
+    return (
+        <div className="h-full flex items-center justify-center px-10">
+            <div className="glass-card w-full max-w-2xl rounded-[40px] border border-white/10 p-10 text-center space-y-6">
+                <div className="text-[10px] font-bold uppercase tracking-[0.4em] text-gray-500">404</div>
+                <h2 className="text-3xl font-bold tracking-tighter text-white">{title}</h2>
+                <p className="text-[10px] font-bold uppercase tracking-[0.25em] text-gray-500">{subtitle}</p>
+                {onBack && (
+                    <button
+                        onClick={onBack}
+                        className="mt-2 inline-flex items-center gap-2 px-6 py-3 rounded-2xl bg-white text-black text-[9px] font-bold uppercase tracking-[0.3em] hover:scale-105 transition-all"
+                    >
+                        <MoveLeft className="w-4 h-4" />
+                        Back
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default NotFoundScreen;

package/src/components/RichInput.tsx

@@ -0,0 +1,68 @@
+import { useRef, useEffect } from 'react';
+import { Variable } from '../types';
+import { highlightCode, SyntaxLanguage } from '../utils/syntaxHighlight';
+
+interface RichInputProps {
+    value: string;
+    onChange: (val: string) => void;
+    placeholder?: string;
+    variables: Record<string, Variable>;
+    className?: string;
+    syntax?: SyntaxLanguage;
+}
+
+const RichInput: React.FC<RichInputProps> = ({ value, onChange, placeholder, variables, className, syntax = 'plain' }) => {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            const currentHtml = ref.current.innerHTML;
+            const targetHtml = highlightCode(value, syntax, variables);
+            if (currentHtml !== targetHtml) {
+                const selection = window.getSelection();
+                let offset = 0;
+                if (selection && selection.rangeCount > 0) {
+                    const range = selection.getRangeAt(0);
+                    const preRange = range.cloneRange();
+                    preRange.selectNodeContents(ref.current);
+                    preRange.setEnd(range.endContainer, range.endOffset);
+                    offset = preRange.toString().length;
+                }
+
+                ref.current.innerHTML = targetHtml;
+
+                if (offset > 0) {
+                    const walker = document.createTreeWalker(ref.current, NodeFilter.SHOW_TEXT);
+                    let charCount = 0;
+                    let node = walker.nextNode();
+                    while (node) {
+                        const length = node.textContent?.length || 0;
+                        if (charCount + length >= offset) {
+                            const range = document.createRange();
+                            range.setStart(node, offset - charCount);
+                            range.collapse(true);
+                            selection?.removeAllRanges();
+                            selection?.addRange(range);
+                            break;
+                        }
+                        charCount += length;
+                        node = walker.nextNode();
+                    }
+                }
+            }
+        }
+    }, [value, variables]);
+
+    return (
+        <div
+            ref={ref}
+            contentEditable
+            className={`rich-input-content w-full bg-transparent focus:outline-none text-white min-h-[1.5rem] ${className}`}
+            data-placeholder={placeholder}
+            onInput={(e) => onChange(e.currentTarget.textContent || '')}
+            onBlur={(e) => onChange(e.currentTarget.textContent || '')}
+        />
+    );
+};
+
+export default RichInput;

package/src/components/SettingsScreen.tsx

@@ -0,0 +1,228 @@
+import { useState, useEffect } from 'react';
+import { ConfirmRequest } from '../types';
+import ApiKeyPanel from './settings/ApiKeyPanel';
+import StoragePanel from './settings/StoragePanel';
+import ScreenshotsPanel from './settings/ScreenshotsPanel';
+import CookiesPanel from './settings/CookiesPanel';
+import SettingsHeader from './settings/SettingsHeader';
+import LayoutPanel from './settings/LayoutPanel';
+
+interface SettingsScreenProps {
+    onClearStorage: (type: 'screenshots' | 'cookies') => void;
+    onConfirm: (request: string | ConfirmRequest) => Promise<boolean>;
+    onNotify: (message: string, tone?: 'success' | 'error') => void;
+}
+
+const SettingsScreen: React.FC<SettingsScreenProps> = ({
+    onClearStorage,
+    onConfirm,
+    onNotify
+}) => {
+    const [tab, setTab] = useState<'system' | 'data'>('system');
+    const [screenshots, setScreenshots] = useState<{ name: string; url: string; size: number; modified: number }[]>([]);
+    const [cookies, setCookies] = useState<{ name: string; value: string; domain?: string; path?: string; expires?: number }[]>([]);
+    const [cookieOrigins, setCookieOrigins] = useState<any[]>([]);
+    const [dataLoading, setDataLoading] = useState(false);
+    const [apiKey, setApiKey] = useState<string | null>(null);
+    const [apiKeyLoading, setApiKeyLoading] = useState(false);
+    const [apiKeySaving, setApiKeySaving] = useState(false);
+    const [layoutSplitPercent, setLayoutSplitPercent] = useState(30);
+
+    const layoutStorageKey = 'doppelganger.layout.leftWidthPct';
+
+    useEffect(() => {
+        try {
+            const stored = localStorage.getItem(layoutStorageKey);
+            if (stored) {
+                const value = Math.min(75, Math.max(25, Math.round(parseFloat(stored) * 100)));
+                if (!Number.isNaN(value)) setLayoutSplitPercent(value);
+            }
+        } catch {
+            // ignore
+        }
+    }, []);
+
+    const loadData = async () => {
+        setDataLoading(true);
+        try {
+            const [shotsRes, cookiesRes] = await Promise.all([
+                fetch('/api/data/screenshots'),
+                fetch('/api/data/cookies')
+            ]);
+            const shotsData = shotsRes.ok ? await shotsRes.json() : { screenshots: [] };
+            const cookiesData = cookiesRes.ok ? await cookiesRes.json() : { cookies: [], origins: [] };
+            setScreenshots(Array.isArray(shotsData.screenshots) ? shotsData.screenshots : []);
+            setCookies(Array.isArray(cookiesData.cookies) ? cookiesData.cookies : []);
+            setCookieOrigins(Array.isArray(cookiesData.origins) ? cookiesData.origins : []);
+        } catch {
+            setScreenshots([]);
+            setCookies([]);
+            setCookieOrigins([]);
+        } finally {
+            setDataLoading(false);
+        }
+    };
+
+    const deleteScreenshot = async (name: string) => {
+        const confirmed = await onConfirm(`Delete screenshot ${name}?`);
+        if (!confirmed) return;
+        const res = await fetch(`/api/data/screenshots/${encodeURIComponent(name)}`, { method: 'DELETE' });
+        if (res.ok) {
+            onNotify('Screenshot deleted.', 'success');
+            loadData();
+        } else {
+            onNotify('Delete failed.', 'error');
+        }
+    };
+
+    const deleteCookie = async (cookie: { name: string; domain?: string; path?: string }) => {
+        const confirmed = await onConfirm(`Delete cookie ${cookie.name}?`);
+        if (!confirmed) return;
+        const res = await fetch('/api/data/cookies/delete', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name: cookie.name, domain: cookie.domain, path: cookie.path })
+        });
+        if (res.ok) {
+            onNotify('Cookie deleted.', 'success');
+            loadData();
+        } else {
+            onNotify('Delete failed.', 'error');
+        }
+    };
+
+    const loadApiKey = async () => {
+        setApiKeyLoading(true);
+        try {
+            const res = await fetch('/api/settings/api-key', { credentials: 'include' });
+            if (!res.ok) {
+                if (res.status === 401) {
+                    onNotify('Session expired. Please log in again.', 'error');
+                }
+                setApiKey(null);
+                return;
+            }
+            const data = await res.json();
+            setApiKey(data.apiKey || null);
+        } catch {
+            setApiKey(null);
+        } finally {
+            setApiKeyLoading(false);
+        }
+    };
+
+    const regenerateApiKey = async () => {
+        setApiKeySaving(true);
+        try {
+            const res = await fetch('/api/settings/api-key', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include'
+            });
+            if (!res.ok) {
+                let detail = '';
+                try {
+                    const data = await res.json();
+                    detail = data?.error || data?.message || '';
+                } catch {
+                    detail = '';
+                }
+                if (res.status === 401) {
+                    onNotify('Session expired. Please log in again.', 'error');
+                } else {
+                    onNotify(`Failed to generate API key${detail ? `: ${detail}` : ''}.`, 'error');
+                }
+                return;
+            }
+            const data = await res.json();
+            setApiKey(data.apiKey || null);
+            onNotify('API key generated.', 'success');
+        } catch {
+            onNotify('Failed to generate API key.', 'error');
+        } finally {
+            setApiKeySaving(false);
+        }
+    };
+
+    const copyApiKey = async () => {
+        if (!apiKey) return;
+        try {
+            if (navigator.clipboard && window.isSecureContext) {
+                await navigator.clipboard.writeText(apiKey);
+            } else {
+                const textarea = document.createElement('textarea');
+                textarea.value = apiKey;
+                textarea.style.position = 'fixed';
+                textarea.style.opacity = '0';
+                document.body.appendChild(textarea);
+                textarea.select();
+                const ok = document.execCommand('copy');
+                document.body.removeChild(textarea);
+                if (!ok) throw new Error('Copy failed');
+            }
+            onNotify('API key copied.', 'success');
+        } catch {
+            onNotify('Copy failed.', 'error');
+        }
+    };
+
+    useEffect(() => {
+        if (tab === 'data') loadData();
+        if (tab === 'system') loadApiKey();
+    }, [tab]);
+
+    useEffect(() => {
+        try {
+            localStorage.setItem(layoutStorageKey, String(layoutSplitPercent / 100));
+        } catch {
+            // ignore
+        }
+    }, [layoutSplitPercent]);
+
+    return (
+        <main className="flex-1 p-12 overflow-y-auto custom-scrollbar animate-in fade-in duration-500">
+            <div className="max-w-3xl mx-auto space-y-8">
+                <SettingsHeader tab={tab} onTabChange={setTab} />
+
+                {tab === 'system' && (
+                    <>
+                        <ApiKeyPanel
+                            apiKey={apiKey}
+                            loading={apiKeyLoading}
+                            saving={apiKeySaving}
+                            onRegenerate={regenerateApiKey}
+                            onCopy={copyApiKey}
+                        />
+                        <LayoutPanel
+                            splitPercent={layoutSplitPercent}
+                            onChange={setLayoutSplitPercent}
+                            onReset={() => setLayoutSplitPercent(30)}
+                        />
+                        <StoragePanel onClearStorage={onClearStorage} />
+                    </>
+                )}
+
+                {tab === 'data' && (
+                    <>
+                        <ScreenshotsPanel
+                            screenshots={screenshots}
+                            loading={dataLoading}
+                            onRefresh={loadData}
+                            onDelete={deleteScreenshot}
+                        />
+
+                        <CookiesPanel
+                            cookies={cookies}
+                            originsCount={cookieOrigins.length}
+                            loading={dataLoading}
+                            onClear={() => onClearStorage('cookies')}
+                            onDelete={deleteCookie}
+                        />
+                    </>
+                )}
+            </div>
+        </main>
+    );
+};
+
+export default SettingsScreen;