zevairouter 1.0.154 → 1.0.155

package/src/app/(dashboard)/dashboard/automation/page.js

@@ -1,774 +0,0 @@
-"use client";
-/* eslint-disable @next/next/no-img-element -- dynamic/blob/external image src with onError fallback; next/image requires static dims + domain allowlist */
-
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Badge, Button, BulkAccountAutomationModal, Card, CardSkeleton, CodeBuddyCnPhoneRegisterModal, KiroOAuthWrapper, OAuthModal } from "@/shared/components";
-import { FREE_PROVIDERS } from "@/shared/constants/providers";
-
-// Render the provider's real logo from /providers/<id>.png, falling back to
-// the Material Symbols icon when the image is missing or fails to load.
-function ProviderLogo({ id, icon, size = 22 }) {
-  const [imgError, setImgError] = useState(false);
-  if (imgError) {
-    return (
-      <span className="material-symbols-outlined text-primary" style={{ fontSize: size }}>
-        {icon}
-      </span>
-    );
-  }
-  return (
-    <img
-      src={`/providers/${id}.png`}
-      alt=""
-      width={size}
-      height={size}
-      className="rounded object-contain"
-      style={{ width: size, height: size }}
-      onError={() => setImgError(true)}
-    />
-  );
-}
-
-function getConnectionLabel(count) {
-  return `${count} connection${count === 1 ? "" : "s"}`;
-}
-
-function KiroAutomationPanel({ providerInfo, onRefresh }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [bulkJob, setBulkJob] = useState(null);
-  const [initialFlow, setInitialFlow] = useState(null);
-  const openFlow = (flow) => {
-    setInitialFlow({ ...flow, key: Date.now() });
-    setIsOpen(true);
-  };
-
-  const options = [
-    {
-      id: "bulk-account",
-      title: "Auto Login Bulk",
-      icon: "group_add",
-      description: "Run bulk gmail|password automation with worker progress and manual assist.",
-      action: () => openFlow({ method: "import", importMode: "bulk-account" }),
-    },
-    {
-      id: "bulk-token",
-      title: "Bulk Token",
-      icon: "playlist_add",
-      description: "Import many Kiro refresh tokens, one token per line.",
-      action: () => openFlow({ method: "import", importMode: "bulk-token" }),
-    },
-    {
-      id: "single-token",
-      title: "Single Token",
-      icon: "vpn_key",
-      description: "Auto-detect or paste one Kiro refresh token.",
-      action: () => openFlow({ method: "import", importMode: "single-token" }),
-    },
-    {
-      id: "builder-id",
-      title: "AWS Builder ID",
-      icon: "shield",
-      description: "Open the standard AWS Builder ID device login.",
-      action: () => openFlow({ method: "builder-id" }),
-    },
-    {
-      id: "idc",
-      title: "AWS IDC",
-      icon: "business",
-      description: "Enter an IAM Identity Center start URL and region.",
-      action: () => openFlow({ method: "idc" }),
-    },
-    {
-      id: "google",
-      title: "Google Login",
-      icon: "account_circle",
-      description: "Open Kiro social Google login with callback capture.",
-      action: () => openFlow({ method: "social", provider: "google" }),
-    },
-  ];
-
-  return (
-    <>
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-        {options.map((option) => (
-          <button
-            key={option.id}
-            type="button"
-            onClick={option.action}
-            className="flex min-h-[112px] min-w-0 flex-col gap-2 rounded-lg border border-border bg-surface px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5"
-          >
-            <span className="flex items-center gap-2 text-sm font-semibold text-text-main">
-              <span className="material-symbols-outlined text-[20px] text-primary">{option.icon}</span>
-              {option.title}
-            </span>
-            <span className="text-xs leading-relaxed text-text-muted">{option.description}</span>
-          </button>
-        ))}
-      </div>
-      <div className="flex flex-wrap items-center gap-2">
-        {bulkJob?.jobId && (
-          <Badge variant="default">
-            Bulk job: {bulkJob.status}
-          </Badge>
-        )}
-        {bulkJob?.jobId && (
-          <Button
-            size="sm"
-            variant="secondary"
-            icon="monitoring"
-            onClick={() => openFlow({ method: "import", importMode: "bulk-account" })}
-          >
-            Resume Bulk Progress
-          </Button>
-        )}
-      </div>
-      <KiroOAuthWrapper
-        isOpen={isOpen}
-        providerInfo={providerInfo}
-        onSuccess={onRefresh}
-        onRefresh={onRefresh}
-        initialBulkJobId={bulkJob?.jobId || null}
-        initialFlow={initialFlow}
-        onBulkJobChange={setBulkJob}
-        onClose={() => setIsOpen(false)}
-      />
-    </>
-  );
-}
-
-function CodeBuddyBulkTokenModal({ isOpen, onClose, onSuccess }) {
-  const [tokens, setTokens] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [result, setResult] = useState(null);
-
-  const handleImport = async () => {
-    if (!tokens.trim()) return;
-    setLoading(true);
-    setResult(null);
-    try {
-      const res = await fetch("/api/oauth/codebuddy/bulk-token", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ tokens }),
-      });
-      const data = await res.json();
-      setResult(data);
-      if (data.success) onSuccess?.();
-    } catch (error) {
-      setResult({ error: error.message });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (!isOpen) return null;
-
-  // Build detailed success message with format breakdown
-  let successMsg = null;
-  if (result?.success) {
-    const parts = [`Imported ${result.imported}/${result.total} tokens.`];
-    if (result.failed) parts.push(`${result.failed} failed.`);
-
-    // Show format breakdown if available
-    if (result.formatCounts) {
-      const { "access-only": ao, "with-refresh": wr, "with-api-key": wa } = result.formatCounts;
-      const breakdown = [];
-      if (wa) breakdown.push(`${wa} with API key`);
-      if (wr) breakdown.push(`${wr} with refresh token`);
-      if (ao) breakdown.push(`${ao} access-only`);
-      if (breakdown.length) parts.push(`(${breakdown.join(", ")})`);
-    }
-
-    successMsg = parts.join(" ");
-  }
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
-      <div className="w-full max-w-lg rounded-xl border border-border bg-surface p-6 shadow-xl" onClick={(e) => e.stopPropagation()}>
-        <h3 className="mb-4 text-lg font-semibold text-text-main">CodeBuddy OAuth Token Import</h3>
-        <p className="mb-2 text-xs text-text-muted">Paste CodeBuddy OAuth tokens, one per line. Supports three formats:</p>
-        <div className="mb-3 space-y-2 rounded-lg bg-background/50 p-3 text-xs text-text-muted">
-          <div className="flex items-center gap-2">
-            <span className="material-symbols-outlined text-[16px] text-primary leading-none">check_circle</span>
-            <span className="flex items-center gap-1.5"><code className="text-[10px] bg-border/50 px-1.5 py-0.5 rounded leading-none">accessToken</code><span>— access token only (24h expiry)</span></span>
-          </div>
-          <div className="flex items-center gap-2">
-            <span className="material-symbols-outlined text-[16px] text-primary leading-none">check_circle</span>
-            <span className="flex items-center gap-1.5"><code className="text-[10px] bg-border/50 px-1.5 py-0.5 rounded leading-none">accessToken:refreshToken</code><span>— enables auto-refresh</span></span>
-          </div>
-          <div className="flex items-center gap-2">
-            <span className="material-symbols-outlined text-[16px] text-primary leading-none">check_circle</span>
-            <span className="flex items-center gap-1.5"><code className="text-[10px] bg-border/50 px-1.5 py-0.5 rounded leading-none">accessToken:refreshToken:apiKey</code><span>— 365-day access</span></span>
-          </div>
-        </div>
-        <textarea
-          className="mb-3 w-full rounded-lg border border-border bg-background p-3 font-mono text-xs text-text-main placeholder:text-text-muted focus:border-primary focus:outline-none"
-          rows={8}
-          placeholder={
-            "eyJhbGciOiJSUzI1NiIs...\n" +
-            "eyJhbGciOiJSUzI1NiIs...:eyJhbGciOiJSUzI1NiIs...\n" +
-            "eyJhbGciOiJSUzI1NiIs...:eyJhbGciOiJSUzI1NiIs...:ak_abc123..."
-          }
-          value={tokens}
-          onChange={(e) => setTokens(e.target.value)}
-          disabled={loading}
-        />
-        {result && (
-          <div className={"mb-3 rounded-lg p-3 text-xs " + (result.success ? "bg-green-500/10 text-green-400" : "bg-red-500/10 text-red-400")}>
-            {successMsg || result.error || "Import failed"}
-          </div>
-        )}
-        <div className="flex justify-end gap-2">
-          <button type="button" onClick={onClose} className="rounded-lg px-4 py-2 text-sm text-text-muted hover:bg-border/50">Close</button>
-          <button
-            type="button"
-            onClick={handleImport}
-            disabled={loading || !tokens.trim()}
-            className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90 disabled:opacity-50"
-          >
-            {loading ? "Importing..." : "Import Tokens"}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function CodeBuddyAutomationPanel({ providerInfo, onRefresh }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isBulkOpen, setIsBulkOpen] = useState(false);
-  const [isBulkTokenOpen, setIsBulkTokenOpen] = useState(false);
-
-  return (
-    <>
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-        <button
-          type="button"
-          onClick={() => setIsBulkOpen(true)}
-          className="flex min-h-[112px] min-w-0 flex-col gap-2 rounded-lg border border-border bg-surface px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5"
-        >
-          <span className="flex items-center gap-2 text-sm font-semibold text-text-main">
-            <span className="material-symbols-outlined text-[20px] text-primary">group_add</span>
-            Auto Login + Generate Key
-          </span>
-          <span className="text-xs leading-relaxed text-text-muted">
-            Run bulk GSuite gmail|password login, create a CodeBuddy Access Key, and save it for model calls.
-          </span>
-        </button>
-        <button
-          type="button"
-          onClick={() => setIsBulkTokenOpen(true)}
-          className="flex min-h-[112px] min-w-0 flex-col gap-2 rounded-lg border border-border bg-surface px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5"
-        >
-          <span className="flex items-center gap-2 text-sm font-semibold text-text-main">
-            <span className="material-symbols-outlined text-[20px] text-primary">playlist_add</span>
-            OAuth Token Import
-          </span>
-          <span className="text-xs leading-relaxed text-text-muted">
-            Paste OAuth tokens with optional refresh tokens and API keys for extended access.
-          </span>
-        </button>
-        <button
-          type="button"
-          onClick={() => setIsOpen(true)}
-          className="flex min-h-[112px] min-w-0 flex-col gap-2 rounded-lg border border-border bg-surface px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5"
-        >
-          <span className="flex items-center gap-2 text-sm font-semibold text-text-main">
-            <span className="material-symbols-outlined text-[20px] text-primary">login</span>
-            Device OAuth Login
-          </span>
-          <span className="text-xs leading-relaxed text-text-muted">
-            Open CodeBuddy browser login and poll until the OAuth token is saved.
-          </span>
-        </button>
-      </div>
-      <CodeBuddyBulkTokenModal
-        isOpen={isBulkTokenOpen}
-        onClose={() => setIsBulkTokenOpen(false)}
-        onSuccess={onRefresh}
-      />
-      <BulkAccountAutomationModal
-        isOpen={isBulkOpen}
-        provider="codebuddy"
-        title="CodeBuddy Bulk GSuite Login + Access Key"
-        serviceName="CodeBuddy"
-        onSuccess={onRefresh}
-        onClose={() => setIsBulkOpen(false)}
-      />
-      <OAuthModal
-        isOpen={isOpen}
-        provider="codebuddy"
-        providerInfo={providerInfo}
-        onSuccess={() => {
-          onRefresh?.();
-          setIsOpen(false);
-        }}
-        onClose={() => setIsOpen(false)}
-      />
-    </>
-  );
-}
-
-function CodeBuddyCnBulkTokenModal({ isOpen, onClose, onSuccess }) {
-  const [tokens, setTokens] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [result, setResult] = useState(null);
-
-  const handleImport = async () => {
-    if (!tokens.trim()) return;
-    setLoading(true);
-    setResult(null);
-    try {
-      const res = await fetch("/api/oauth/codebuddy-cn/bulk-token", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ tokens }),
-      });
-      const data = await res.json();
-      setResult(data);
-      if (data.success) onSuccess?.();
-    } catch (error) {
-      setResult({ error: error.message });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (!isOpen) return null;
-
-  let successMsg = null;
-  if (result?.success) {
-    const parts = [`Imported ${result.imported}/${result.total} tokens.`];
-    if (result.failed) parts.push(`${result.failed} failed.`);
-    successMsg = parts.join(" ");
-  }
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
-      <div className="w-full max-w-lg rounded-xl border border-border bg-surface p-6 shadow-xl" onClick={(e) => e.stopPropagation()}>
-        <h3 className="mb-4 text-lg font-semibold text-text-main">CodeBuddy CN OAuth Token Import</h3>
-        <p className="mb-2 text-xs text-text-muted">Paste CodeBuddy CN OAuth tokens, one per line. Supports:</p>
-        <div className="mb-3 space-y-1 rounded-lg bg-background/50 p-3 text-xs text-text-muted">
-          <div><code className="text-[10px] bg-border/50 px-1.5 py-0.5 rounded">accessToken</code> — access token only</div>
-          <div><code className="text-[10px] bg-border/50 px-1.5 py-0.5 rounded">accessToken:refreshToken</code> — enables auto-refresh</div>
-        </div>
-        <textarea
-          className="mb-3 w-full rounded-lg border border-border bg-background p-3 font-mono text-xs text-text-main placeholder:text-text-muted focus:border-primary focus:outline-none"
-          rows={8}
-          placeholder={"eyJhbGciOiJSUzI1NiIs...\neyJhbGciOiJSUzI1NiIs...:eyJhbGciOiJSUzI1NiIs..."}
-          value={tokens}
-          onChange={(e) => setTokens(e.target.value)}
-          disabled={loading}
-        />
-        {result && (
-          <div className={"mb-3 rounded-lg p-3 text-xs " + (result.success ? "bg-green-500/10 text-green-400" : "bg-red-500/10 text-red-400")}>
-            {successMsg || result.error || "Import failed"}
-          </div>
-        )}
-        <div className="flex justify-end gap-2">
-          <button type="button" onClick={onClose} className="rounded-lg px-4 py-2 text-sm text-text-muted hover:bg-border/50">Close</button>
-          <button
-            type="button"
-            onClick={handleImport}
-            disabled={loading || !tokens.trim()}
-            className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90 disabled:opacity-50"
-          >
-            {loading ? "Importing..." : "Import Tokens"}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function CodeBuddyCnAutomationPanel({ providerInfo, onRefresh }) {
-  const [isPhoneOpen, setIsPhoneOpen] = useState(false);
-  const [isBulkTokenOpen, setIsBulkTokenOpen] = useState(false);
-  const [isOAuthOpen, setIsOAuthOpen] = useState(false);
-
-  return (
-    <>
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-        <button
-          type="button"
-          onClick={() => setIsPhoneOpen(true)}
-          className="flex min-h-[112px] min-w-0 flex-col gap-2 rounded-lg border border-border bg-surface px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5"
-        >
-          <span className="flex items-center gap-2 text-sm font-semibold text-text-main">
-            <span className="material-symbols-outlined text-[20px] text-primary">smartphone</span>
-            Auto Register (Phone)
-          </span>
-          <span className="text-xs leading-relaxed text-text-muted">
-            Bulk auto-register CodeBuddy CN accounts using 5sim virtual phone numbers (HK/China). Includes device-code token capture.
-          </span>
-        </button>
-        <button
-          type="button"
-          onClick={() => setIsBulkTokenOpen(true)}
-          className="flex min-h-[112px] min-w-0 flex-col gap-2 rounded-lg border border-border bg-surface px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5"
-        >
-          <span className="flex items-center gap-2 text-sm font-semibold text-text-main">
-            <span className="material-symbols-outlined text-[20px] text-primary">playlist_add</span>
-            OAuth Token Import
-          </span>
-          <span className="text-xs leading-relaxed text-text-muted">
-            Paste pre-obtained CodeBuddy CN OAuth tokens with optional refresh tokens.
-          </span>
-        </button>
-        <button
-          type="button"
-          onClick={() => setIsOAuthOpen(true)}
-          className="flex min-h-[112px] min-w-0 flex-col gap-2 rounded-lg border border-border bg-surface px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5"
-        >
-          <span className="flex items-center gap-2 text-sm font-semibold text-text-main">
-            <span className="material-symbols-outlined text-[20px] text-primary">login</span>
-            Device OAuth Login
-          </span>
-          <span className="text-xs leading-relaxed text-text-muted">
-            Open CodeBuddy CN browser login and poll until the OAuth token is saved.
-          </span>
-        </button>
-      </div>
-      <CodeBuddyCnPhoneRegisterModal
-        isOpen={isPhoneOpen}
-        onClose={() => setIsPhoneOpen(false)}
-        onSuccess={onRefresh}
-      />
-      <CodeBuddyCnBulkTokenModal
-        isOpen={isBulkTokenOpen}
-        onClose={() => setIsBulkTokenOpen(false)}
-        onSuccess={onRefresh}
-      />
-      <OAuthModal
-        isOpen={isOAuthOpen}
-        provider="codebuddy-cn"
-        providerInfo={providerInfo}
-        onSuccess={() => {
-          onRefresh?.();
-          setIsOAuthOpen(false);
-        }}
-        onClose={() => setIsOAuthOpen(false)}
-      />
-    </>
-  );
-}
-
-function QoderAutomationPanel({ providerInfo, onRefresh }) {
-  const [isBulkOpen, setIsBulkOpen] = useState(false);
-  const [isOAuthOpen, setIsOAuthOpen] = useState(false);
-
-  return (
-    <>
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-        <button
-          type="button"
-          onClick={() => setIsBulkOpen(true)}
-          className="flex min-h-[112px] min-w-0 flex-col gap-2 rounded-lg border border-border bg-surface px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5"
-        >
-          <span className="flex items-center gap-2 text-sm font-semibold text-text-main">
-            <span className="material-symbols-outlined text-[20px] text-primary">group_add</span>
-            Auto Login Bulk
-          </span>
-          <span className="text-xs leading-relaxed text-text-muted">
-            Run bulk gmail:password or gmail|password automation via Google SSO with Qoder device flow.
-          </span>
-        </button>
-        <button
-          type="button"
-          onClick={() => setIsOAuthOpen(true)}
-          className="flex min-h-[112px] min-w-0 flex-col gap-2 rounded-lg border border-border bg-surface px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5"
-        >
-          <span className="flex items-center gap-2 text-sm font-semibold text-text-main">
-            <span className="material-symbols-outlined text-[20px] text-primary">login</span>
-            Device OAuth Login
-          </span>
-          <span className="text-xs leading-relaxed text-text-muted">
-            Open Qoder device login in browser and poll until the token is saved.
-          </span>
-        </button>
-      </div>
-      <BulkAccountAutomationModal
-        isOpen={isBulkOpen}
-        provider="qoder"
-        title="Qoder Bulk GSuite Auto Login"
-        serviceName="Qoder"
-        onSuccess={onRefresh}
-        onClose={() => setIsBulkOpen(false)}
-      />
-      <OAuthModal
-        isOpen={isOAuthOpen}
-        provider="qoder"
-        providerInfo={providerInfo}
-        onSuccess={() => {
-          onRefresh?.();
-          setIsOAuthOpen(false);
-        }}
-        onClose={() => setIsOAuthOpen(false)}
-      />
-    </>
-  );
-}
-
-function AntigravityAutomationPanel({ providerInfo, onRefresh }) {
-  const [isBulkOpen, setIsBulkOpen] = useState(false);
-  const [isOAuthOpen, setIsOAuthOpen] = useState(false);
-
-  return (
-    <>
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-        <button
-          type="button"
-          onClick={() => setIsBulkOpen(true)}
-          className="flex min-h-[112px] min-w-0 flex-col gap-2 rounded-lg border border-border bg-surface px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5"
-        >
-          <span className="flex items-center gap-2 text-sm font-semibold text-text-main">
-            <span className="material-symbols-outlined text-[20px] text-primary">group_add</span>
-            Auto Login Bulk
-          </span>
-          <span className="text-xs leading-relaxed text-text-muted">
-            Run bulk gmail:password or gmail|password automation via Google OAuth (authorization code) for Antigravity.
-          </span>
-        </button>
-        <button
-          type="button"
-          onClick={() => setIsOAuthOpen(true)}
-          className="flex min-h-[112px] min-w-0 flex-col gap-2 rounded-lg border border-border bg-surface px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5"
-        >
-          <span className="flex items-center gap-2 text-sm font-semibold text-text-main">
-            <span className="material-symbols-outlined text-[20px] text-primary">login</span>
-            OAuth Login
-          </span>
-          <span className="text-xs leading-relaxed text-text-muted">
-            Open Antigravity Google OAuth in browser and finish the consent manually.
-          </span>
-        </button>
-      </div>
-      <BulkAccountAutomationModal
-        isOpen={isBulkOpen}
-        provider="antigravity"
-        title="Antigravity Bulk GSuite Auto Login"
-        serviceName="Antigravity"
-        onSuccess={onRefresh}
-        onClose={() => setIsBulkOpen(false)}
-      />
-      <OAuthModal
-        isOpen={isOAuthOpen}
-        provider="antigravity"
-        providerInfo={providerInfo}
-        onSuccess={() => {
-          onRefresh?.();
-          setIsOAuthOpen(false);
-        }}
-        onClose={() => setIsOAuthOpen(false)}
-      />
-    </>
-  );
-}
-
-function CloudflareAiAutomationPanel({ onRefresh }) {
-  const [isBulkOpen, setIsBulkOpen] = useState(false);
-
-  return (
-    <>
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-        <button
-          type="button"
-          onClick={() => setIsBulkOpen(true)}
-          className="flex min-h-[112px] min-w-0 flex-col gap-2 rounded-lg border border-border bg-surface px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-primary/5"
-        >
-          <span className="flex items-center gap-2 text-sm font-semibold text-text-main">
-            <span className="material-symbols-outlined text-[20px] text-primary">cloud</span>
-            Bulk Workers AI Tokens
-          </span>
-          <span className="text-xs leading-relaxed text-text-muted">
-            Google login to Cloudflare dashboard → create Workers AI API token → save as{" "}
-            <code className="text-[11px]">cloudflare-ai</code> (accountId + token). Paste{" "}
-            <code className="text-[11px]">email:password</code> or <code className="text-[11px]">email|password</code>.
-            Uses headed <strong>CloakBrowser</strong> (sole automation engine) + residential proxy recommended.
-          </span>
-        </button>
-      </div>
-      <BulkAccountAutomationModal
-        isOpen={isBulkOpen}
-        provider="cloudflare-ai"
-        title="Cloudflare Workers AI Bulk Token Harvest"
-        serviceName="Cloudflare Workers AI"
-        accountsPlaceholder={"user@gmail.com:password\nuser2@gmail.com|password"}
-        onSuccess={onRefresh}
-        onClose={() => setIsBulkOpen(false)}
-      />
-    </>
-  );
-}
-
-const AUTOMATION_MODE_LABELS = {
-  "single-token": "Token import",
-  "bulk-token": "Bulk token import",
-  "bulk-account": "Bulk accounts",
-  "device-oauth": "Device login",
-  social: "Social login",
-  oauth: "OAuth login",
-};
-
-const AUTOMATION_PROVIDERS = [
-  {
-    id: "kiro",
-    label: "Kiro AI",
-    icon: "psychology_alt",
-    description: "Token import, bulk import, and social login automation.",
-    supportedModes: ["single-token", "bulk-token", "bulk-account", "social"],
-    component: KiroAutomationPanel,
-  },
-  {
-    id: "codebuddy",
-    label: "CodeBuddy",
-    icon: "smart_toy",
-    description: "Bulk GSuite automation and browser OAuth polling login.",
-    supportedModes: ["bulk-account", "device-oauth"],
-    component: CodeBuddyAutomationPanel,
-  },
-  {
-    id: "codebuddy-cn",
-    label: "CodeBuddy CN",
-    icon: "smart_toy",
-    description: "Phone-number auto-registration via 5sim SMS, token import, and device OAuth.",
-    supportedModes: ["bulk-account", "device-oauth"],
-    component: CodeBuddyCnAutomationPanel,
-  },
-  {
-    id: "qoder",
-    label: "Qoder",
-    icon: "code",
-    description: "Bulk GSuite auto login via Google SSO and device flow.",
-    supportedModes: ["bulk-account", "device-oauth"],
-    component: QoderAutomationPanel,
-  },
-  {
-    id: "antigravity",
-    label: "Antigravity",
-    icon: "rocket_launch",
-    description: "Bulk GSuite auto login via Google OAuth (authorization code).",
-    supportedModes: ["bulk-account", "oauth"],
-    component: AntigravityAutomationPanel,
-  },
-  {
-    id: "cloudflare-ai",
-    label: "Cloudflare Workers AI",
-    icon: "cloud",
-    description: "Bulk Google login → Workers AI API token harvest for free-tier CF AI.",
-    supportedModes: ["bulk-account"],
-    component: CloudflareAiAutomationPanel,
-  },
-];
-
-export default function AutomationPage() {
-  const [connections, setConnections] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [activeProviderId, setActiveProviderId] = useState(AUTOMATION_PROVIDERS[0].id);
-
-  const fetchConnections = useCallback(async () => {
-    try {
-      const res = await fetch("/api/providers", { cache: "no-store" });
-      const data = await res.json();
-      if (res.ok) setConnections(data.connections || []);
-    } catch (error) {
-      console.log("Error fetching automation connections:", error);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- mount data fetch; fetchConnections sets state only after await, which the rule flags conservatively
-    fetchConnections();
-  }, [fetchConnections]);
-
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const requestedProvider = new URLSearchParams(window.location.search).get("provider");
-    if (AUTOMATION_PROVIDERS.some((provider) => provider.id === requestedProvider)) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- one-time mount initialization from URL query param (external source, client-only)
-      setActiveProviderId(requestedProvider);
-    }
-  }, []);
-
-  const activeProvider = AUTOMATION_PROVIDERS.find((provider) => provider.id === activeProviderId) || AUTOMATION_PROVIDERS[0];
-  const providerInfo = FREE_PROVIDERS[activeProvider.id] || { id: activeProvider.id, name: activeProvider.label };
-  const ProviderPanel = activeProvider.component;
-  const providerCounts = useMemo(() => {
-    const counts = {};
-    for (const provider of AUTOMATION_PROVIDERS) {
-      counts[provider.id] = connections.filter((connection) => connection.provider === provider.id).length;
-    }
-    return counts;
-  }, [connections]);
-
-  if (loading) {
-    return (
-      <div className="flex flex-col gap-6">
-        <CardSkeleton />
-        <CardSkeleton />
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0">
-      <div className="flex flex-col gap-1">
-        <h1 className="text-2xl font-semibold">Automation</h1>
-      </div>
-
-      <div className="grid gap-3 sm:grid-cols-2">
-        {AUTOMATION_PROVIDERS.map((provider) => {
-          const selected = provider.id === activeProviderId;
-          return (
-            <button
-              key={provider.id}
-              type="button"
-              onClick={() => setActiveProviderId(provider.id)}
-              className={`flex min-w-0 items-center gap-3 rounded-lg border px-4 py-3 text-left transition-colors ${
-                selected
-                  ? "border-primary/50 bg-primary/10 text-primary"
-                  : "border-border bg-surface text-text-main hover:border-primary/30 hover:bg-primary/5"
-              }`}
-            >
-              <ProviderLogo id={provider.id} icon={provider.icon} size={22} />
-              <span className="min-w-0 flex-1">
-                <span className="block truncate text-sm font-semibold">{provider.label}</span>
-                <span className="mt-0.5 block text-xs text-text-muted">
-                  {getConnectionLabel(providerCounts[provider.id] || 0)}
-                </span>
-              </span>
-            </button>
-          );
-        })}
-      </div>
-
-      <Card>
-        <div className="flex min-w-0 flex-col gap-4">
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-            <div className="min-w-0">
-              <div className="flex items-center gap-2">
-                <ProviderLogo id={activeProvider.id} icon={activeProvider.icon} size={22} />
-                <h2 className="text-lg font-semibold">{activeProvider.label}</h2>
-              </div>
-              <span className="mt-1 block text-xs leading-relaxed text-text-muted">
-                {activeProvider.description}
-              </span>
-              <div className="mt-2 flex flex-wrap gap-1.5">
-                {activeProvider.supportedModes.map((mode) => (
-                  <Badge key={mode} variant="default" size="sm">
-                    {AUTOMATION_MODE_LABELS[mode]}
-                  </Badge>
-                ))}
-              </div>
-            </div>
-            <Badge variant="success">{getConnectionLabel(providerCounts[activeProvider.id] || 0)}</Badge>
-          </div>
-
-          <ProviderPanel providerInfo={providerInfo} onRefresh={fetchConnections} />
-        </div>
-      </Card>
-    </div>
-  );
-}