@doppelgangerdev/doppelganger 0.2.2

package/src/index.css

@@ -0,0 +1,287 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    color-scheme: dark;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    min-width: 320px;
+    min-height: 100vh;
+    background-color: #020202;
+}
+
+#root {
+    width: 100%;
+}
+
+.glass {
+    background: rgba(10, 10, 10, 0.9);
+    backdrop-filter: blur(64px);
+    -webkit-backdrop-filter: blur(64px);
+}
+
+.glass-card {
+    background: rgba(255, 255, 255, 0.015);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glass-card:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.shine-effect {
+    position: relative;
+    overflow: hidden;
+}
+
+.shine-effect::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -100%;
+    width: 33.333333%;
+    height: 200%;
+    background: rgba(255, 255, 255, 0.2);
+    transform: rotate(25deg);
+    pointer-events: none;
+    transition: none;
+}
+
+.shine-effect:hover::after {
+    left: 150%;
+    transition: left 0.7s ease-in-out;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 9999px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.custom-select,
+select {
+    appearance: none !important;
+    background-color: #000000 !important;
+    color: #ffffff !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 12px !important;
+    padding: 0.4rem 2rem 0.4rem 0.75rem !important;
+    cursor: pointer !important;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
+    background-repeat: no-repeat !important;
+    background-position: right 0.6rem center !important;
+    background-size: 10px !important;
+    transition: all 0.2s ease !important;
+}
+
+.custom-select:hover,
+select:hover {
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.custom-select option,
+select option {
+    background: #000000;
+    color: #ffffff;
+    padding: 10px;
+}
+
+.action-type-select {
+    min-width: 96px !important;
+    box-sizing: border-box !important;
+    border-radius: 10px !important;
+    border-color: rgba(255, 255, 255, 0.15) !important;
+    background-color: rgba(0, 0, 0, 0.6) !important;
+    padding: 0.3rem 2.2rem 0.3rem 0.65rem !important;
+    position: relative !important;
+    z-index: 9999 !important;
+    background-clip: padding-box !important;
+}
+
+.action-type-select:focus {
+    border-color: rgba(255, 255, 255, 0.35) !important;
+}
+
+.action-card-item.dragging {
+    opacity: 0.5;
+}
+
+.action-card-item.drag-over-top {
+    border-top: 2px solid rgba(59, 130, 246, 0.5);
+}
+
+.action-card-item.drag-over-bottom {
+    border-bottom: 2px solid rgba(59, 130, 246, 0.5);
+}
+
+/* Variable syntax highlighting */
+.var-highlight {
+    background: rgba(59, 130, 246, 0.2);
+    color: #60a5fa;
+    font-family: 'JetBrains Mono', monospace;
+    padding: 0 2px;
+    border-radius: 3px;
+    font-weight: 500;
+}
+
+.var-highlight-undefined {
+    background: rgba(239, 68, 68, 0.2);
+    color: #f87171;
+    font-family: 'JetBrains Mono', monospace;
+    padding: 0 2px;
+    border-radius: 3px;
+    font-weight: 500;
+}
+
+.var-highlight-default {
+    background: rgba(34, 197, 94, 0.2);
+    color: #4ade80;
+    font-family: 'JetBrains Mono', monospace;
+    padding: 0 2px;
+    border-radius: 3px;
+    font-weight: 500;
+}
+
+.rich-input-content {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.rich-input-content:empty:before {
+    content: attr(data-placeholder);
+    color: rgba(107, 114, 128, 0.6);
+    pointer-events: none;
+}
+
+.rich-input-content:focus {
+    outline: none;
+}
+
+.code-editor {
+    position: relative;
+    width: 100%;
+    min-height: 120px;
+    background: #050505;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 14px;
+    overflow: hidden;
+}
+
+.code-editor-pre {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    padding: 1rem;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    line-height: 1.6;
+    font-variant-ligatures: none;
+    tab-size: 4;
+    color: rgba(147, 197, 253, 0.7);
+    white-space: pre;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+.code-editor-textarea {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    resize: none;
+    background: transparent;
+    color: transparent;
+    caret-color: #ffffff;
+    border: none;
+    padding: 1rem;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    line-height: 1.6;
+    font-variant-ligatures: none;
+    tab-size: 4;
+    outline: none;
+    overflow-x: auto;
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.code-editor-textarea::-webkit-scrollbar {
+    display: none;
+}
+
+.code-editor-textarea-readonly {
+    pointer-events: none;
+}
+
+.code-editor-placeholder {
+    color: rgba(107, 114, 128, 0.6);
+}
+
+.code-token-keyword {
+    color: #93c5fd;
+}
+
+.code-token-string {
+    color: #86efac;
+}
+
+.code-token-number {
+    color: #fbbf24;
+}
+
+.code-token-comment {
+    color: #6b7280;
+    font-style: italic;
+}
+
+.code-token-boolean,
+.code-token-null {
+    color: #fca5a5;
+}
+
+.code-token-identifier {
+    color: #e5e7eb;
+}
+
+.code-token-key {
+    color: #67e8f9;
+}
+
+.code-token-tag {
+    color: #60a5fa;
+}
+
+.code-token-attr {
+    color: #fcd34d;
+}
+
+.code-token-punct {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.text-vertical {
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    transform: rotate(180deg);
+}

package/src/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
+    </React.StrictMode>,
+)

package/src/types.ts

@@ -0,0 +1,114 @@
+export type TaskMode = 'scrape' | 'agent' | 'headful';
+export type ViewMode = 'visual' | 'json' | 'api' | 'history';
+export type VarType = 'string' | 'number' | 'boolean';
+
+export interface Variable {
+    type: VarType;
+    value: any;
+}
+
+export interface StealthConfig {
+    allowTypos: boolean;
+    idleMovements: boolean;
+    overscroll: boolean;
+    deadClicks: boolean;
+    fatigue: boolean;
+    naturalTyping: boolean;
+}
+
+export interface Action {
+    id: string;
+    type:
+        | 'click'
+        | 'type'
+        | 'wait'
+        | 'press'
+        | 'scroll'
+        | 'javascript'
+        | 'csv'
+        | 'hover'
+        | 'merge'
+        | 'if'
+        | 'else'
+        | 'end'
+        | 'while'
+        | 'repeat'
+        | 'foreach'
+        | 'stop'
+        | 'set'
+        | 'on_error'
+        | 'start';
+    selector?: string;
+    value?: string;
+    key?: string;
+    disabled?: boolean;
+    varName?: string;
+    conditionVar?: string;
+    conditionVarType?: VarType;
+    conditionOp?: string;
+    conditionValue?: string;
+}
+
+export interface Task {
+    id?: string;
+    name: string;
+    url: string;
+    mode: TaskMode;
+    wait: number;
+    selector?: string;
+    rotateUserAgents: boolean;
+    humanTyping: boolean;
+    stealth: StealthConfig;
+    actions: Action[];
+    variables: Record<string, Variable>;
+    last_opened?: number;
+    extractionScript?: string;
+    extractionFormat?: 'json' | 'csv';
+    includeShadowDom?: boolean;
+    versions?: TaskVersion[];
+}
+
+export interface TaskVersion {
+    id: string;
+    timestamp: number;
+    snapshot: Task;
+}
+
+export interface Results {
+    url: string;
+    finalUrl?: string;
+    html?: string;
+    data?: any;
+    screenshotUrl?: string;
+    logs: string[];
+    timestamp: string;
+}
+
+export interface Execution {
+    id: string;
+    timestamp: number;
+    method: string;
+    path: string;
+    status: number;
+    durationMs: number;
+    source: string;
+    mode: string;
+    taskId?: string | null;
+    taskName?: string | null;
+    url?: string | null;
+    taskSnapshot?: Task | null;
+    result?: any;
+}
+
+export interface User {
+    id: number;
+    name: string;
+    email: string;
+}
+
+export interface ConfirmRequest {
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    title?: string;
+}

package/src/utils/syntaxHighlight.ts

@@ -0,0 +1,140 @@
+export type SyntaxLanguage = 'plain' | 'javascript' | 'json' | 'html';
+
+const escapeHtml = (text: string) => {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+};
+
+const jsKeywords = new Set([
+    'const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'do',
+    'switch', 'case', 'break', 'continue', 'try', 'catch', 'finally', 'throw', 'new',
+    'class', 'extends', 'super', 'import', 'from', 'export', 'default', 'await', 'async',
+    'typeof', 'instanceof', 'in', 'of', 'this'
+]);
+
+const highlightVariables = (text: string, variables?: Record<string, any>) => {
+    const regex = /\{\$(\w+)\}/g;
+    let html = '';
+    let lastIndex = 0;
+    let match;
+
+    const varExists = (name: string) => !!variables && ((name in variables) || name === 'now');
+    const hasValue = (name: string) => {
+        if (name === 'now') return true;
+        const v = variables ? variables[name] : undefined;
+        return v && (v.value !== '' && v.value !== undefined && v.value !== null);
+    };
+
+    while ((match = regex.exec(text)) !== null) {
+        if (match.index > lastIndex) {
+            html += escapeHtml(text.substring(lastIndex, match.index));
+        }
+        const varName = match[1];
+        const exists = varExists(varName);
+        const isSet = hasValue(varName);
+
+        const className = exists
+            ? (isSet ? 'var-highlight-default' : 'var-highlight')
+            : 'var-highlight-undefined';
+
+        html += `<span class="${className}">${escapeHtml(match[0])}</span>`;
+        lastIndex = regex.lastIndex;
+    }
+    html += escapeHtml(text.substring(lastIndex));
+    return html;
+};
+
+const highlightJson = (text: string) => {
+    const tokenRegex = /("(?:\\.|[^"\\])*")|(-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|\b(true|false|null)\b/g;
+    let html = '';
+    let lastIndex = 0;
+    let match;
+
+    while ((match = tokenRegex.exec(text)) !== null) {
+        if (match.index > lastIndex) {
+            html += escapeHtml(text.substring(lastIndex, match.index));
+        }
+        const token = match[0];
+        if (match[1]) {
+            let isKey = false;
+            let j = match.index + token.length;
+            while (j < text.length && /\s/.test(text[j])) j += 1;
+            if (text[j] === ':') isKey = true;
+            const cls = isKey ? 'code-token-key' : 'code-token-string';
+            html += `<span class="${cls}">${escapeHtml(token)}</span>`;
+        } else if (match[2]) {
+            html += `<span class="code-token-number">${escapeHtml(token)}</span>`;
+        } else {
+            html += `<span class="code-token-boolean">${escapeHtml(token)}</span>`;
+        }
+        lastIndex = tokenRegex.lastIndex;
+    }
+    html += escapeHtml(text.substring(lastIndex));
+    return html;
+};
+
+const highlightJavascript = (text: string, variables?: Record<string, any>) => {
+    const tokenRegex = /(\{\$\w+\})|(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`)|(\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|(\b[A-Za-z_]\w*\b)/g;
+    let html = '';
+    let lastIndex = 0;
+    let match;
+
+    while ((match = tokenRegex.exec(text)) !== null) {
+        if (match.index > lastIndex) {
+            html += escapeHtml(text.substring(lastIndex, match.index));
+        }
+        const token = match[0];
+        if (match[1]) {
+            html += highlightVariables(token, variables);
+        } else if (match[2]) {
+            html += `<span class="code-token-comment">${escapeHtml(token)}</span>`;
+        } else if (match[3]) {
+            html += `<span class="code-token-string">${escapeHtml(token)}</span>`;
+        } else if (match[4]) {
+            html += `<span class="code-token-number">${escapeHtml(token)}</span>`;
+        } else if (match[5]) {
+            html += `<span class="code-token-boolean">${escapeHtml(token)}</span>`;
+        } else if (match[6]) {
+            const cls = jsKeywords.has(token) ? 'code-token-keyword' : 'code-token-identifier';
+            html += `<span class="${cls}">${escapeHtml(token)}</span>`;
+        } else {
+            html += escapeHtml(token);
+        }
+        lastIndex = tokenRegex.lastIndex;
+    }
+    html += escapeHtml(text.substring(lastIndex));
+    return html;
+};
+
+const highlightHtml = (text: string) => {
+    const tagRegex = /<\/?[^>]+>/g;
+    let html = '';
+    let lastIndex = 0;
+    let match;
+
+    while ((match = tagRegex.exec(text)) !== null) {
+        if (match.index > lastIndex) {
+            html += escapeHtml(text.substring(lastIndex, match.index));
+        }
+        const rawTag = match[0];
+        let escaped = escapeHtml(rawTag);
+        escaped = escaped.replace(/^(&lt;\/?)([A-Za-z0-9-]+)/, '$1<span class="code-token-tag">$2</span>');
+        escaped = escaped.replace(/(\s)([A-Za-z0-9-:]+)(=)/g, '$1<span class="code-token-attr">$2</span>$3');
+        escaped = escaped.replace(/(&quot;.*?&quot;|&#39;.*?&#39;)/g, '<span class="code-token-string">$1</span>');
+        html += `<span class="code-token-punct">${escaped}</span>`;
+        lastIndex = tagRegex.lastIndex;
+    }
+    html += escapeHtml(text.substring(lastIndex));
+    return html;
+};
+
+export const highlightCode = (text: string, language: SyntaxLanguage, variables?: Record<string, any>) => {
+    if (language === 'javascript') return highlightJavascript(text, variables);
+    if (language === 'json') return highlightJson(text);
+    if (language === 'html') return highlightHtml(text);
+    return highlightVariables(text, variables);
+};

package/start-vnc.sh

@@ -0,0 +1,52 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+export DISPLAY="${DISPLAY:-:99}"
+
+mkdir -p /app/data
+
+echo "[vnc] Starting Xvfb on $DISPLAY"
+Xvfb "$DISPLAY" -screen 0 1280x720x24 -nolisten tcp -ac &
+
+echo "[vnc] Starting x11vnc on :5900"
+X11VNC_OPTS="-display $DISPLAY -forever -shared -nopw -rfbport 5900 -wait 5"
+x11vnc $X11VNC_OPTS >> /app/data/x11vnc.log 2>&1 &
+
+NOVNC_DIR="/opt/novnc"
+if [ ! -d "$NOVNC_DIR" ]; then
+  echo "[vnc] noVNC not found, downloading..."
+  mkdir -p /opt/novnc
+  if curl -fsSL https://github.com/novnc/noVNC/archive/refs/tags/v1.4.0.tar.gz \
+    | tar -xz --strip-components=1 -C /opt/novnc; then
+    NOVNC_DIR="/opt/novnc"
+  elif [ -d "/usr/share/novnc" ]; then
+    NOVNC_DIR="/usr/share/novnc"
+  fi
+fi
+
+echo "[vnc] Serving noVNC on 0.0.0.0:54311"
+pkill -f websockify >/dev/null 2>&1 || true
+pkill -f novnc_proxy >/dev/null 2>&1 || true
+NOVNC_PROXY="$NOVNC_DIR/utils/novnc_proxy"
+if [ -x "$NOVNC_PROXY" ]; then
+  "$NOVNC_PROXY" --web "$NOVNC_DIR" --listen 54311 --vnc localhost:5900 --heartbeat 30 --idle-timeout 0 >> /app/data/novnc.log 2>&1 &
+elif command -v websockify >/dev/null 2>&1; then
+  for _ in {1..50}; do
+    if bash -c "echo > /dev/tcp/127.0.0.1/5900" >/dev/null 2>&1; then
+      break
+    fi
+    sleep 0.1
+  done
+
+  (
+    while true; do
+      websockify --web "$NOVNC_DIR" 0.0.0.0:54311 localhost:5900 >> /app/data/novnc.log 2>&1
+      sleep 1
+    done
+  ) &
+else
+  echo "[vnc] websockify not found" >> /app/data/novnc.log
+fi
+
+echo "[vnc] Starting server"
+exec node /app/server.js

package/tailwind.config.js

@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {
+            colors: {
+                bg: '#020202',
+                panel: 'rgba(10, 10, 10, 0.85)',
+                border: 'rgba(255, 255, 255, 0.08)',
+                accent: '#ffffff',
+            },
+            fontFamily: {
+                sans: ['Inter', 'sans-serif'],
+                mono: ['JetBrains Mono', 'monospace'],
+            },
+        },
+    },
+    plugins: [],
+}

package/tsconfig.json

@@ -0,0 +1,39 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ]
+        }
+    },
+    "include": [
+        "src"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}

package/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "vite.config.mts"
+    ]
+}