@doppelgangerdev/doppelganger 0.2.2

package/src/components/Sidebar.tsx

@@ -0,0 +1,61 @@
+import { Plus, Home, Settings as SettingsIcon, LogOut, List } from 'lucide-react';
+
+interface SidebarProps {
+    onNavigate: (screen: 'dashboard' | 'editor' | 'settings' | 'executions') => void;
+    onNewTask: () => void;
+    onLogout: () => void;
+    currentScreen: 'dashboard' | 'editor' | 'settings' | 'executions';
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ onNavigate, onNewTask, onLogout, currentScreen }) => {
+    return (
+        <aside className="w-20 h-full border-r border-white/10 glass flex flex-col items-center py-8 shrink-0 z-50">
+            <button onClick={() => onNavigate('dashboard')} className="mb-12 hover:opacity-80 transition-opacity">
+                <img src="/icon.png" alt="Logo" className="w-9 h-9" onError={(e) => { e.currentTarget.src = '/icon.png' }} />
+            </button>
+
+            <div className="flex-1 flex flex-col gap-6">
+                <button
+                    onClick={onNewTask}
+                    className="w-12 h-12 rounded-2xl flex items-center justify-center text-white bg-white/5 hover:bg-white/10 transition-all"
+                    title="New Task"
+                >
+                    <Plus className="w-6 h-6" />
+                </button>
+
+                <button
+                    onClick={() => onNavigate('dashboard')}
+                    className={`w-12 h-12 rounded-2xl flex items-center justify-center transition-all ${currentScreen === 'dashboard' ? 'bg-white/10 text-white' : 'text-gray-500 hover:bg-white/5 hover:text-white'}`}
+                    title="Dashboard"
+                >
+                    <Home className="w-6 h-6" />
+                </button>
+
+                <button
+                    onClick={() => onNavigate('settings')}
+                    className={`w-12 h-12 rounded-2xl flex items-center justify-center transition-all ${currentScreen === 'settings' ? 'bg-white/10 text-white' : 'text-gray-500 hover:bg-white/5 hover:text-white'}`}
+                    title="Settings"
+                >
+                    <SettingsIcon className="w-6 h-6" />
+                </button>
+                <button
+                    onClick={() => onNavigate('executions')}
+                    className={`w-12 h-12 rounded-2xl flex items-center justify-center transition-all ${currentScreen === 'executions' ? 'bg-white/10 text-white' : 'text-gray-500 hover:bg-white/5 hover:text-white'}`}
+                    title="Executions"
+                >
+                    <List className="w-6 h-6" />
+                </button>
+            </div>
+
+            <button
+                onClick={onLogout}
+                className="w-12 h-12 rounded-2xl flex items-center justify-center text-gray-500 hover:bg-red-500/10 hover:text-red-500 transition-all"
+                title="Logout"
+            >
+                <LogOut className="w-6 h-6" />
+            </button>
+        </aside>
+    );
+};
+
+export default Sidebar;

package/src/components/app/CenterAlert.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+
+interface CenterAlertProps {
+    message: string;
+    tone?: 'success' | 'error';
+    onClose: () => void;
+}
+
+const CenterAlert: React.FC<CenterAlertProps> = ({ message, tone, onClose }) => {
+    const [closing, setClosing] = useState(false);
+
+    useEffect(() => {
+        const autoTimer = setTimeout(() => {
+            setClosing(true);
+        }, 2500);
+        return () => clearTimeout(autoTimer);
+    }, []);
+
+    useEffect(() => {
+        if (!closing) return;
+        const closeTimer = setTimeout(() => onClose(), 240);
+        return () => clearTimeout(closeTimer);
+    }, [closing, onClose]);
+
+    return (
+        <div className={`fixed bottom-6 right-6 z-[220] max-w-sm w-full ${closing ? 'animate-out fade-out slide-out-to-bottom-3 duration-200' : 'animate-in fade-in slide-in-from-bottom-3 duration-300'}`}>
+            <div className={`glass-card rounded-2xl border border-white/10 p-4 shadow-2xl flex items-start gap-3 ${closing ? 'animate-out fade-out zoom-out-95 duration-200' : 'animate-in fade-in zoom-in-95 duration-300'}`}>
+                <div className={`mt-1 h-2.5 w-2.5 rounded-full ${tone === 'error' ? 'bg-red-400' : 'bg-emerald-400'}`} />
+                <div className="flex-1">
+                    <p className="text-[8px] font-bold uppercase tracking-[0.35em] text-gray-500">Notification</p>
+                    <p className="mt-2 font-mono text-[11px] text-white leading-relaxed">{message}</p>
+                </div>
+                <button
+                    onClick={() => setClosing(true)}
+                    className="px-2 py-1 text-[8px] font-bold uppercase tracking-[0.2em] text-white/60 hover:text-white"
+                >
+                    Close
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default CenterAlert;

package/src/components/app/CenterConfirm.tsx

@@ -0,0 +1,33 @@
+import { ConfirmRequest } from '../../types';
+
+interface CenterConfirmProps {
+    request: ConfirmRequest;
+    onResolve: (result: boolean) => void;
+}
+
+const CenterConfirm: React.FC<CenterConfirmProps> = ({ request, onResolve }) => {
+    return (
+        <div className="fixed inset-0 z-[201] flex items-center justify-center bg-black/70 backdrop-blur-sm px-6">
+            <div className="glass-card w-full max-w-md rounded-[32px] border border-white/10 p-8 text-center shadow-2xl">
+                <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-gray-500">{request.title ?? 'Confirm'}</p>
+                <p className="mt-4 font-mono text-sm text-white">{request.message}</p>
+                <div className="mt-6 flex gap-4">
+                    <button
+                        onClick={() => onResolve(false)}
+                        className="w-full rounded-2xl px-6 py-3 text-[9px] font-bold uppercase tracking-[0.3em] transition-all bg-white/5 border border-white/10 text-gray-300 hover:bg-white/10"
+                    >
+                        {request.cancelLabel ?? 'Cancel'}
+                    </button>
+                    <button
+                        onClick={() => onResolve(true)}
+                        className="w-full rounded-2xl px-6 py-3 text-[9px] font-bold uppercase tracking-[0.3em] transition-all bg-white text-black hover:scale-105 shadow-xl shadow-white/10"
+                    >
+                        {request.confirmLabel ?? 'Confirm'}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CenterConfirm;

package/src/components/app/EditorLoader.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Task } from '../../types';
+import LoadingScreen from '../LoadingScreen';
+import NotFoundScreen from '../NotFoundScreen';
+import EditorScreen from '../EditorScreen';
+
+interface EditorLoaderProps {
+    tasks: Task[];
+    loadTasks: () => Promise<Task[]>;
+    touchTask: (id: string) => void;
+    currentTask: Task | null;
+    setCurrentTask: (task: Task) => void;
+    editorView: any;
+    setEditorView: any;
+    isExecuting: boolean;
+    onSave: () => void;
+    onRun: () => void;
+    onRunSnapshot?: (task: Task) => void;
+    results: any;
+    pinnedResults?: any;
+    onPinResults?: any;
+    onUnpinResults?: any;
+    saveMsg: string;
+    onConfirm: any;
+    onNotify: any;
+    runId?: string | null;
+    onStop?: () => void;
+}
+
+const EditorLoader: React.FC<EditorLoaderProps> = ({ tasks, loadTasks, touchTask, currentTask, setCurrentTask, ...props }) => {
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(false);
+    const [notFound, setNotFound] = useState(false);
+
+    useEffect(() => {
+        const init = async () => {
+            if (currentTask?.id === id) return;
+
+            setLoading(true);
+            setNotFound(false);
+            let targetTasks = tasks;
+            if (tasks.length === 0) {
+                targetTasks = await loadTasks();
+            }
+
+            const task = targetTasks.find((t: any) => String(t.id) === String(id));
+            if (task) {
+                const migrated = { ...task };
+                if (!migrated.variables || Array.isArray(migrated.variables)) migrated.variables = {};
+                if (!migrated.stealth) {
+                    migrated.stealth = { allowTypos: false, idleMovements: false, overscroll: false, deadClicks: false, fatigue: false, naturalTyping: false };
+                }
+                if (Array.isArray(migrated.actions)) {
+                    migrated.actions = migrated.actions.map((action, index) => {
+                        if (action && action.id) return action;
+                        return { ...action, id: `act_${Date.now()}_${index}_${Math.floor(Math.random() * 1000)}` };
+                    });
+                }
+                if (migrated.includeShadowDom === undefined) migrated.includeShadowDom = true;
+                setCurrentTask(migrated);
+                if (id) touchTask(id);
+            } else {
+                setNotFound(true);
+            }
+            setLoading(false);
+        };
+        init();
+    }, [id, tasks]);
+
+    if (notFound) {
+        return (
+            <NotFoundScreen
+                title="Task Not Found"
+                subtitle="This task does not exist or was deleted."
+                onBack={() => navigate('/dashboard')}
+            />
+        );
+    }
+
+    if (loading || !currentTask || String(currentTask.id) !== String(id)) {
+        return <LoadingScreen title="Loading Mission Data" subtitle="Syncing task payload" />;
+    }
+
+    return <EditorScreen currentTask={currentTask} setCurrentTask={setCurrentTask} {...props} />;
+};
+
+export default EditorLoader;

package/src/components/editor/ActionPalette.tsx

@@ -0,0 +1,79 @@
+import { X } from 'lucide-react';
+import { useMemo, useRef } from 'react';
+import { Action } from '../../types';
+import { ACTION_CATALOG } from './actionCatalog';
+
+interface ActionPaletteProps {
+    open: boolean;
+    query: string;
+    onQueryChange: (value: string) => void;
+    onClose: () => void;
+    onSelect: (type: Action['type']) => void;
+}
+
+const ActionPalette: React.FC<ActionPaletteProps> = ({ open, query, onQueryChange, onClose, onSelect }) => {
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q) return ACTION_CATALOG;
+        return ACTION_CATALOG.filter((item) =>
+            item.label.toLowerCase().includes(q) || item.description.toLowerCase().includes(q)
+        );
+    }, [query]);
+
+    if (!open) return null;
+
+    return (
+        <div
+            className="fixed inset-0 z-[190] flex items-center justify-center bg-black/70 backdrop-blur-sm px-6"
+            onClick={onClose}
+        >
+            <div
+                className="glass-card w-full max-w-xl rounded-[28px] border border-white/10 p-6 shadow-2xl"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <div className="flex items-center justify-between mb-4">
+                    <div>
+                        <p className="text-[9px] font-bold uppercase tracking-[0.4em] text-gray-500">Add Block</p>
+                        <p className="text-xs text-gray-400 mt-1">Search actions and control flow blocks.</p>
+                    </div>
+                    <button
+                        onClick={onClose}
+                        className="p-2 rounded-xl border border-white/10 text-white/70 hover:text-white hover:bg-white/5 transition-all"
+                        aria-label="Close"
+                    >
+                        <X className="w-4 h-4" />
+                    </button>
+                </div>
+                <input
+                    ref={(node) => {
+                        inputRef.current = node;
+                        if (node) node.focus();
+                    }}
+                    value={query}
+                    onChange={(e) => onQueryChange(e.target.value)}
+                    placeholder="Type to filter (e.g., if, click, loop)"
+                    className="w-full rounded-xl bg-black/40 border border-white/10 px-4 py-3 text-sm text-white placeholder:text-gray-600 focus:outline-none focus:border-white/30"
+                />
+                <div className="mt-4 max-h-[320px] overflow-y-auto custom-scrollbar space-y-2">
+                    {filtered.map((item) => (
+                        <button
+                            key={item.type}
+                            onClick={() => onSelect(item.type)}
+                            className="w-full text-left px-4 py-3 rounded-xl border border-white/5 bg-white/[0.02] hover:bg-white/[0.06] transition-all"
+                        >
+                            <div className="text-[10px] font-bold uppercase tracking-widest text-white">{item.label}</div>
+                            <div className="text-[9px] text-gray-500 mt-1">{item.description}</div>
+                        </button>
+                    ))}
+                    {filtered.length === 0 && (
+                        <div className="text-[9px] text-gray-600 uppercase tracking-widest">No matches.</div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ActionPalette;

package/src/components/editor/JsonEditorPane.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { Task } from '../../types';
+import CodeEditor from '../CodeEditor';
+
+interface JsonEditorPaneProps {
+    task: Task;
+    onChange: (task: Task) => void;
+    onCopy: (text: string, id: string) => void;
+    copiedId: string | null;
+}
+
+const JsonEditorPane: React.FC<JsonEditorPaneProps> = ({ task, onChange, onCopy, copiedId }) => {
+    const [draft, setDraft] = useState(() => JSON.stringify(task, null, 2));
+    const [dirty, setDirty] = useState(false);
+
+    const normalizeTask = (raw: any): Task => {
+        const base = task;
+        const merged: Task = { ...base, ...(raw && typeof raw === 'object' ? raw : {}) } as Task;
+        if (!merged.name || typeof merged.name !== 'string') merged.name = base.name || 'Task';
+        if (!merged.mode || !['scrape', 'agent', 'headful'].includes(merged.mode)) merged.mode = base.mode || 'agent';
+        if (typeof merged.wait !== 'number') merged.wait = typeof base.wait === 'number' ? base.wait : 3;
+        if (!merged.stealth) merged.stealth = base.stealth;
+        if (!merged.variables || Array.isArray(merged.variables)) merged.variables = base.variables || {};
+        if (!Array.isArray(merged.actions)) merged.actions = base.actions || [];
+        if (!merged.extractionFormat) merged.extractionFormat = base.extractionFormat || 'json';
+        if (merged.includeShadowDom === undefined) merged.includeShadowDom = base.includeShadowDom ?? true;
+        if (base.id && merged.id !== base.id) merged.id = base.id;
+        delete (merged as any).versions;
+        delete (merged as any).last_opened;
+        return merged;
+    };
+
+    useEffect(() => {
+        if (dirty) return;
+        setDraft(JSON.stringify(task, null, 2));
+    }, [task, dirty]);
+
+    return (
+        <div className="h-full flex flex-col min-h-0">
+            <div className="flex items-center justify-between mb-3">
+                <span className="text-[9px] font-bold text-gray-400 uppercase tracking-widest">Protocol JSON</span>
+                <button
+                    onClick={() => { onCopy(JSON.stringify(task, null, 2), 'json'); }}
+                    className={`px-4 py-2 border text-[9px] font-bold rounded-xl uppercase transition-all flex items-center gap-2 ${copiedId === 'json' ? 'bg-green-500/10 border-green-500/20 text-green-400' : 'bg-white/5 border-white/10 text-white hover:bg-white/10'}`}
+                >
+                    {copiedId === 'json' ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+                    {copiedId === 'json' ? 'Copied' : 'Copy'}
+                </button>
+            </div>
+            <CodeEditor
+                value={draft}
+                onChange={(val) => {
+                    setDraft(val);
+                    try {
+                        const parsed = JSON.parse(val);
+                        const normalized = normalizeTask(parsed);
+                        onChange(normalized);
+                        setDirty(false);
+                    } catch (err) {
+                        setDirty(true);
+                    }
+                }}
+                language="json"
+                className="flex-1 min-h-0"
+            />
+        </div>
+    );
+};
+
+export default JsonEditorPane;