@doppelgangerdev/doppelganger 0.2.2

package/src/components/settings/AgentAiPanel.tsx

@@ -0,0 +1,105 @@
+import { useState, useEffect } from 'react';
+import { Bot, Save, Eye, EyeOff } from 'lucide-react';
+
+interface AgentAiPanelProps {
+    apiKey: string | null;
+    model: string;
+    enabled: boolean;
+    loading: boolean;
+    saving: boolean;
+    onSave: (next: { apiKey: string; model: string; enabled: boolean }) => void;
+}
+
+const AgentAiPanel: React.FC<AgentAiPanelProps> = ({ apiKey, model, enabled, loading, saving, onSave }) => {
+    const [localKey, setLocalKey] = useState(apiKey || '');
+    const [localModel, setLocalModel] = useState(model || 'gpt-5-nano');
+    const [visible, setVisible] = useState(false);
+    const [localEnabled, setLocalEnabled] = useState(enabled);
+
+    useEffect(() => {
+        setLocalKey(apiKey || '');
+    }, [apiKey]);
+
+    useEffect(() => {
+        setLocalModel(model || 'gpt-5-nano');
+    }, [model]);
+
+    useEffect(() => {
+        setLocalEnabled(enabled);
+    }, [enabled]);
+
+    const submit = () => {
+        onSave({
+            apiKey: localKey.trim(),
+            model: localModel.trim() || 'gpt-5-nano',
+            enabled: localEnabled
+        });
+    };
+
+    return (
+        <div className="glass-card p-8 rounded-[40px] space-y-6">
+            <div className="flex items-center gap-4 mb-2">
+                <div className="w-10 h-10 rounded-2xl bg-white/5 flex items-center justify-center text-gray-400"><Bot className="w-5 h-5" /></div>
+                <div>
+                    <h3 className="text-sm font-bold text-white uppercase tracking-widest">Agent AI</h3>
+                    <p className="text-[10px] text-gray-500 uppercase tracking-widest mt-1">Bring your own OpenAI key</p>
+                </div>
+            </div>
+
+            <div className="space-y-4">
+                <label className="text-[9px] font-bold text-gray-400 uppercase tracking-[0.2em]">OpenAI API Key</label>
+                <div className="flex items-center gap-3 rounded-2xl bg-black/40 border border-white/10 px-4 py-2">
+                    <input
+                        type={visible ? 'text' : 'password'}
+                        value={loading ? 'Loading...' : localKey}
+                        onChange={(e) => setLocalKey(e.target.value)}
+                        disabled={loading}
+                        placeholder="sk-..."
+                        className="flex-1 bg-transparent text-[10px] text-blue-200/80 font-mono focus:outline-none"
+                    />
+                    <button
+                        onClick={() => setVisible((prev) => !prev)}
+                        className="p-2 rounded-xl border border-white/10 text-white/70 hover:text-white hover:bg-white/5 transition-all"
+                        title={visible ? 'Hide key' : 'Show key'}
+                        aria-label={visible ? 'Hide key' : 'Show key'}
+                        type="button"
+                    >
+                        {visible ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                </div>
+                <label className="text-[9px] font-bold text-gray-400 uppercase tracking-[0.2em]">Model</label>
+                <input
+                    type="text"
+                    value={localModel}
+                    onChange={(e) => setLocalModel(e.target.value)}
+                    placeholder="gpt-5-nano"
+                    className="w-full bg-white/[0.05] border border-white/10 rounded-2xl px-4 py-2 text-[10px] text-white font-mono focus:outline-none focus:border-white/30 transition-all"
+                />
+                <label className="flex items-center gap-3 p-3 rounded-2xl bg-white/[0.02] border border-white/5 hover:bg-white/[0.05] transition-all cursor-pointer group">
+                    <input
+                        type="checkbox"
+                        checked={localEnabled}
+                        onChange={(e) => setLocalEnabled(e.target.checked)}
+                        className="w-4 h-4 rounded border-white/20 bg-transparent"
+                    />
+                    <span className="text-[9px] font-bold text-gray-500 uppercase tracking-widest group-hover:text-white">Enable AI workflow generation</span>
+                </label>
+                <div className="flex gap-3">
+                    <button
+                        onClick={submit}
+                        disabled={saving || loading}
+                        className="flex-1 px-6 py-3 rounded-2xl text-[9px] font-bold uppercase tracking-widest bg-white text-black hover:scale-105 transition-all disabled:opacity-60 disabled:hover:scale-100 inline-flex items-center justify-center gap-2"
+                    >
+                        <Save className="w-4 h-4" />
+                        Save AI Settings
+                    </button>
+                </div>
+                <p className="text-[9px] text-gray-600 uppercase tracking-widest">
+                    Used by Agent Tasks to generate workflow blocks from steps.
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default AgentAiPanel;

package/src/components/settings/ApiKeyPanel.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { Copy, Database, Eye, EyeOff } from 'lucide-react';
+
+interface ApiKeyPanelProps {
+    apiKey: string | null;
+    loading: boolean;
+    saving: boolean;
+    onRegenerate: () => void;
+    onCopy: () => void;
+}
+
+const ApiKeyPanel: React.FC<ApiKeyPanelProps> = ({ apiKey, loading, saving, onRegenerate, onCopy }) => {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div className="glass-card p-8 rounded-[40px] space-y-6">
+            <div className="flex items-center gap-4 mb-2">
+                <div className="w-10 h-10 rounded-2xl bg-white/5 flex items-center justify-center text-gray-400"><Database className="w-5 h-5" /></div>
+                <div>
+                    <h3 className="text-sm font-bold text-white uppercase tracking-widest">API Key</h3>
+                    <p className="text-[10px] text-gray-500 uppercase tracking-widest mt-1">Manage task API access</p>
+                </div>
+            </div>
+            <div className="flex flex-col gap-4">
+                <div className="rounded-2xl bg-black/40 border border-white/10 px-4 py-3 font-mono text-[10px] text-blue-200/80 break-all min-h-[44px] flex items-center justify-between gap-3">
+                    <span className={apiKey && !visible ? 'text-[14px] leading-none' : undefined}>
+                        {loading
+                            ? 'Loading...'
+                            : (apiKey
+                                ? (visible ? apiKey : '••••••••••••••••••••••••••••••••••••••••')
+                                : 'No API key set')}
+                    </span>
+                    <button
+                        onClick={() => setVisible((prev) => !prev)}
+                        disabled={!apiKey}
+                        className="p-2 rounded-xl border border-white/10 text-white/70 hover:text-white hover:bg-white/5 transition-all disabled:opacity-50"
+                        title={visible ? 'Hide key' : 'Show key'}
+                        aria-label={visible ? 'Hide key' : 'Show key'}
+                    >
+                        {visible ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                </div>
+                <div className="flex gap-3">
+                    <button
+                        onClick={onRegenerate}
+                        disabled={saving}
+                        className="flex-1 px-6 py-3 rounded-2xl text-[9px] font-bold uppercase tracking-widest bg-white text-black hover:scale-105 transition-all disabled:opacity-60 disabled:hover:scale-100"
+                    >
+                        {apiKey ? 'Rotate Key' : 'Generate Key'}
+                    </button>
+                    <button
+                        onClick={onCopy}
+                        disabled={!apiKey}
+                        className="flex-1 px-6 py-3 rounded-2xl text-[9px] font-bold uppercase tracking-widest border border-white/10 text-white hover:bg-white/5 transition-all disabled:opacity-50 inline-flex items-center justify-center gap-2"
+                    >
+                        <Copy className="w-4 h-4" />
+                        Copy Key
+                    </button>
+                </div>
+                <p className="text-[9px] text-gray-600 uppercase tracking-widest">
+                    Use this key in `key`, `x-api-key`, or `Authorization: Bearer` headers.
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default ApiKeyPanel;

package/src/components/settings/CookiesPanel.tsx

@@ -0,0 +1,154 @@
+import { useState } from 'react';
+import { Database } from 'lucide-react';
+
+interface CookieEntry {
+    name: string;
+    value: string;
+    domain?: string;
+    path?: string;
+    expires?: number;
+}
+
+interface CookiesPanelProps {
+    cookies: CookieEntry[];
+    originsCount: number;
+    loading: boolean;
+    onClear: () => void;
+    onDelete: (cookie: { name: string; domain?: string; path?: string }) => void;
+}
+
+const CookiesPanel: React.FC<CookiesPanelProps> = ({ cookies, originsCount, loading, onClear, onDelete }) => {
+    const [expandedCookies, setExpandedCookies] = useState<Record<string, boolean>>({});
+    const [decodedCookies, setDecodedCookies] = useState<Record<string, boolean>>({});
+
+    const cookieKey = (cookie: CookieEntry) => {
+        return `${cookie.name}|${cookie.domain || ''}|${cookie.path || ''}|${cookie.expires || ''}`;
+    };
+
+    const isMostlyPrintable = (value: string) => {
+        if (!value) return false;
+        let printable = 0;
+        for (let i = 0; i < value.length; i += 1) {
+            const code = value.charCodeAt(i);
+            if (code === 9 || code === 10 || code === 13 || (code >= 32 && code <= 126)) {
+                printable += 1;
+            }
+        }
+        return printable / value.length >= 0.85;
+    };
+
+    const decodeCookieValue = (value: string) => {
+        if (!value) return null;
+        if (/%[0-9A-Fa-f]{2}/.test(value)) {
+            try {
+                const decoded = decodeURIComponent(value);
+                if (decoded !== value && isMostlyPrintable(decoded)) {
+                    return { value: decoded, kind: 'URL' as const };
+                }
+            } catch {
+                // Ignore invalid URI sequences
+            }
+        }
+        if (/^[A-Za-z0-9+/=]+$/.test(value) && value.length >= 12 && value.length % 4 === 0) {
+            try {
+                const decoded = atob(value);
+                if (decoded && isMostlyPrintable(decoded)) {
+                    return { value: decoded, kind: 'Base64' as const };
+                }
+            } catch {
+                // Ignore invalid base64
+            }
+        }
+        return null;
+    };
+
+    const toggleCookie = (cookie: CookieEntry) => {
+        const key = cookieKey(cookie);
+        setExpandedCookies((prev) => ({ ...prev, [key]: !prev[key] }));
+    };
+
+    const toggleDecodedCookie = (cookie: CookieEntry) => {
+        const key = cookieKey(cookie);
+        setDecodedCookies((prev) => ({ ...prev, [key]: !prev[key] }));
+    };
+
+    return (
+        <div className="glass-card p-8 rounded-[40px] space-y-6">
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                    <div className="w-10 h-10 rounded-2xl bg-white/5 flex items-center justify-center text-gray-400"><Database className="w-5 h-5" /></div>
+                    <div>
+                        <h3 className="text-sm font-bold text-white uppercase tracking-widest">Cookies</h3>
+                        <p className="text-[10px] text-gray-500 uppercase tracking-widest mt-1">Browser storage state</p>
+                    </div>
+                </div>
+                <button
+                    onClick={onClear}
+                    className="px-4 py-2 text-[9px] font-bold uppercase tracking-widest rounded-xl bg-yellow-500/5 border border-yellow-500/10 text-yellow-400 hover:bg-yellow-500/10 transition-all"
+                >
+                    Clear Cookies
+                </button>
+            </div>
+            {loading && <div className="text-[9px] text-gray-500 uppercase tracking-widest">Loading data...</div>}
+            {!loading && cookies.length === 0 && (
+                <div className="text-[9px] text-gray-600 uppercase tracking-widest">No cookies found.</div>
+            )}
+            <div className="space-y-3">
+                {cookies.map((cookie) => {
+                    const key = cookieKey(cookie);
+                    const isExpanded = !!expandedCookies[key];
+                    const value = cookie.value || '';
+                    const decodedCandidate = decodeCookieValue(value);
+                    const showDecoded = !!decodedCandidate && !!decodedCookies[key];
+                    const fullValue = showDecoded && decodedCandidate ? decodedCandidate.value : value;
+                    const displayValue = isExpanded || fullValue.length <= 120
+                        ? fullValue
+                        : `${fullValue.slice(0, 120)}...`;
+                    return (
+                        <div key={key} className="bg-white/5 border border-white/10 rounded-2xl p-4 space-y-3">
+                            <div className="flex items-center justify-between gap-4">
+                                <div className="min-w-0">
+                                    <div className="text-[10px] font-bold text-white uppercase tracking-widest truncate">{cookie.name}</div>
+                                    <div className="text-[8px] text-gray-500 uppercase tracking-[0.2em]">
+                                        {(cookie.domain || 'local')} | {(cookie.path || '/')}
+                                        {cookie.expires ? ` | ${new Date(cookie.expires * 1000).toLocaleString()}` : ''}
+                                    </div>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    {decodedCandidate && (
+                                        <button
+                                            onClick={() => toggleDecodedCookie(cookie)}
+                                            className="px-3 py-2 text-[9px] font-bold uppercase tracking-widest rounded-xl border border-white/10 text-white/70 hover:text-white hover:bg-white/5 transition-all"
+                                        >
+                                            {showDecoded ? 'Show Raw' : `Decode ${decodedCandidate.kind}`}
+                                        </button>
+                                    )}
+                                    <button
+                                        onClick={() => onDelete(cookie)}
+                                        className="px-3 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
+                                onClick={() => toggleCookie(cookie)}
+                                className="cursor-pointer rounded-xl bg-black/40 border border-white/10 px-3 py-2 font-mono text-[10px] text-blue-200/80 whitespace-pre-wrap break-words"
+                                title="Click to expand/collapse"
+                            >
+                                {displayValue || '(empty)'}
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+            {!loading && originsCount > 0 && (
+                <div className="pt-2 text-[8px] text-gray-600 uppercase tracking-widest">
+                    Origins stored: {originsCount}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CookiesPanel;

package/src/components/settings/LayoutPanel.tsx

@@ -0,0 +1,46 @@
+interface LayoutPanelProps {
+    splitPercent: number;
+    onChange: (value: number) => void;
+    onReset: () => void;
+}
+
+const LayoutPanel: React.FC<LayoutPanelProps> = ({ splitPercent, onChange, onReset }) => {
+    const safeSplit = Number.isFinite(splitPercent) ? Math.min(75, Math.max(25, splitPercent)) : 30;
+    return (
+        <div className="glass-card p-8 rounded-[40px] space-y-6">
+            <div className="flex items-center justify-between">
+                <div>
+                    <h3 className="text-sm font-bold text-white uppercase tracking-widest">Layout</h3>
+                    <p className="text-[10px] text-gray-500 uppercase tracking-widest mt-1">Default editor split</p>
+                </div>
+                <button
+                    onClick={onReset}
+                    className="px-4 py-2 border border-white/10 text-[9px] font-bold rounded-xl uppercase tracking-widest text-white/70 hover:text-white hover:bg-white/5 transition-all"
+                >
+                    Reset 30/70
+                </button>
+            </div>
+            <div className="space-y-3">
+                <div className="flex items-center justify-between text-[9px] font-bold uppercase tracking-widest text-gray-500">
+                    <span>Editor</span>
+                    <span>{safeSplit}%</span>
+                </div>
+                <input
+                    type="range"
+                    min={25}
+                    max={75}
+                    step={5}
+                    value={safeSplit}
+                    onChange={(e) => onChange(Math.min(75, Math.max(25, Number(e.target.value))))}
+                    className="w-full accent-white"
+                />
+                <div className="flex items-center justify-between text-[9px] font-bold uppercase tracking-widest text-gray-500">
+                    <span>Preview</span>
+                    <span>{100 - safeSplit}%</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default LayoutPanel;

package/src/components/settings/ScreenshotsPanel.tsx

@@ -0,0 +1,64 @@
+import { Image as ImageIcon } from 'lucide-react';
+
+interface ScreenshotEntry {
+    name: string;
+    url: string;
+    size: number;
+    modified: number;
+}
+
+interface ScreenshotsPanelProps {
+    screenshots: ScreenshotEntry[];
+    loading: boolean;
+    onRefresh: () => void;
+    onDelete: (name: string) => void;
+}
+
+const ScreenshotsPanel: React.FC<ScreenshotsPanelProps> = ({ screenshots, loading, onRefresh, onDelete }) => {
+    return (
+        <div className="glass-card p-8 rounded-[40px] space-y-6">
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                    <div className="w-10 h-10 rounded-2xl bg-white/5 flex items-center justify-center text-gray-400"><ImageIcon className="w-5 h-5" /></div>
+                    <div>
+                        <h3 className="text-sm font-bold text-white uppercase tracking-widest">Screenshots</h3>
+                        <p className="text-[10px] text-gray-500 uppercase tracking-widest mt-1">Stored captures</p>
+                    </div>
+                </div>
+                <button
+                    onClick={onRefresh}
+                    className="px-4 py-2 border border-white/10 text-[9px] font-bold rounded-xl uppercase tracking-widest text-white hover:bg-white/5 transition-all"
+                >
+                    Refresh
+                </button>
+            </div>
+            {loading && <div className="text-[9px] text-gray-500 uppercase tracking-widest">Loading data...</div>}
+            {!loading && screenshots.length === 0 && (
+                <div className="text-[9px] text-gray-600 uppercase tracking-widest">No screenshots found.</div>
+            )}
+            <div className="space-y-3">
+                {screenshots.map((shot) => (
+                    <div key={shot.name} className="bg-white/5 border border-white/10 rounded-2xl p-4 flex items-center gap-4">
+                        <div className="w-16 h-16 bg-black rounded-xl overflow-hidden shrink-0 border border-white/10">
+                            <img src={shot.url} className="w-full h-full object-cover" />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                            <div className="text-[10px] font-bold text-white uppercase tracking-widest truncate">{shot.name}</div>
+                            <div className="text-[8px] text-gray-500 uppercase tracking-[0.2em]">
+                                {new Date(shot.modified).toLocaleString()} | {(shot.size / 1024).toFixed(1)} KB
+                            </div>
+                        </div>
+                        <button
+                            onClick={() => onDelete(shot.name)}
+                            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>
+    );
+};
+
+export default ScreenshotsPanel;

package/src/components/settings/SettingsHeader.tsx

@@ -0,0 +1,28 @@
+interface SettingsHeaderProps {
+    tab: 'system' | 'data';
+    onTabChange: (tab: 'system' | 'data') => void;
+}
+
+const SettingsHeader: React.FC<SettingsHeaderProps> = ({ tab, onTabChange }) => {
+    return (
+        <div className="flex items-end justify-between mb-8">
+            <div className="space-y-2">
+                <p className="text-[10px] font-bold text-purple-500 uppercase tracking-[0.4em]">System</p>
+                <h2 className="text-4xl font-bold tracking-tighter text-white">Settings</h2>
+            </div>
+            <div className="flex bg-white/5 rounded-xl p-1 border border-white/5">
+                {(['system', 'data'] as const).map((t) => (
+                    <button
+                        key={t}
+                        onClick={() => onTabChange(t)}
+                        className={`px-4 py-2 text-[9px] font-bold uppercase tracking-widest rounded-lg transition-all ${tab === t ? 'bg-white text-black' : 'text-gray-500 hover:text-white'}`}
+                    >
+                        {t}
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default SettingsHeader;

package/src/components/settings/StoragePanel.tsx

@@ -0,0 +1,35 @@
+import { Trash2 } from 'lucide-react';
+
+interface StoragePanelProps {
+    onClearStorage: (type: 'screenshots' | 'cookies') => void;
+}
+
+const StoragePanel: React.FC<StoragePanelProps> = ({ onClearStorage }) => {
+    return (
+        <div className="glass-card p-8 rounded-[40px] space-y-6">
+            <div className="flex items-center gap-4 mb-2">
+                <div className="w-10 h-10 rounded-2xl bg-white/5 flex items-center justify-center text-gray-400"><Trash2 className="w-5 h-5" /></div>
+                <div>
+                    <h3 className="text-sm font-bold text-white uppercase tracking-widest">Storage</h3>
+                    <p className="text-[10px] text-gray-500 uppercase tracking-widest mt-1">Manage stored data</p>
+                </div>
+            </div>
+            <div className="flex gap-4">
+                <button
+                    onClick={() => onClearStorage('screenshots')}
+                    className="flex-1 px-6 py-4 bg-red-500/5 border border-red-500/10 text-red-400 rounded-2xl text-[9px] font-bold uppercase tracking-widest hover:bg-red-500/10 transition-all"
+                >
+                    Clear Screenshots
+                </button>
+                <button
+                    onClick={() => onClearStorage('cookies')}
+                    className="flex-1 px-6 py-4 bg-yellow-500/5 border border-yellow-500/10 text-yellow-400 rounded-2xl text-[9px] font-bold uppercase tracking-widest hover:bg-yellow-500/10 transition-all"
+                >
+                    Reset Cookies
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default StoragePanel;