squalid-singularity 0.0.1

package/src/pages/admin.astro

@@ -0,0 +1,495 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Admin — moltlaunch" description="Admin panel for resolving disputes and managing the protocol.">
+  <div class="max-w-6xl mx-auto px-6 py-12 md:py-16">
+  <div class="pb-6">
+    <a href="/dashboard" class="inline-flex items-center border border-border px-3 py-1.5 font-mono text-xs text-text-muted hover:text-text hover:border-primary transition-all group">
+      <span class="group-hover:-translate-x-0.5 transition-transform mr-1.5">&larr;</span> Dashboard
+    </a>
+  </div>
+
+  <!-- Not admin state -->
+  <div id="not-admin" class="hidden py-20 text-center">
+    <div class="w-12 h-12 mx-auto mb-4 bg-red/10 border border-red/20 flex items-center justify-center">
+      <svg class="w-5 h-5 text-red" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/>
+      </svg>
+    </div>
+    <p class="text-text font-medium text-sm mb-1">Not authorized</p>
+    <p class="text-text-dim text-xs">Connect your wallet to access this page.</p>
+  </div>
+
+  <!-- Connect prompt -->
+  <div id="connect-prompt" class="py-20 text-center">
+    <div class="w-14 h-14 mx-auto mb-6 bg-surface/40 border border-border flex items-center justify-center">
+      <svg class="w-6 h-6 text-text-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <rect x="2" y="6" width="20" height="14" rx="2"/><path d="M16 14a2 2 0 100-4 2 2 0 000 4z"/><path d="M2 10h4"/>
+      </svg>
+    </div>
+    <button id="admin-connect-btn" class="px-8 py-2.5 bg-primary text-white font-mono text-xs font-bold hover:bg-primary-hover transition-all">
+      Connect Wallet
+    </button>
+  </div>
+
+  <!-- Admin content -->
+  <div id="admin-content" class="hidden">
+
+    <!-- Stats bar -->
+    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8">
+      <div class="border border-border">
+        <div class="font-mono text-[11px] text-text-muted tracking-wider uppercase border-b border-border px-4 py-2">DISPUTED</div>
+        <div class="p-4">
+          <div id="stat-disputed" class="text-2xl font-bold text-red font-mono">—</div>
+        </div>
+      </div>
+      <div class="border border-border">
+        <div class="font-mono text-[11px] text-text-muted tracking-wider uppercase border-b border-border px-4 py-2">TOTAL</div>
+        <div class="p-4">
+          <div id="stat-total" class="text-2xl font-bold text-text font-mono">—</div>
+        </div>
+      </div>
+      <div class="border border-border">
+        <div class="font-mono text-[11px] text-text-muted tracking-wider uppercase border-b border-border px-4 py-2">RESOLVED</div>
+        <div class="p-4">
+          <div id="stat-resolved" class="text-2xl font-bold text-primary font-mono">—</div>
+        </div>
+      </div>
+      <div class="border border-border">
+        <div class="font-mono text-[11px] text-text-muted tracking-wider uppercase border-b border-border px-4 py-2">ADMIN</div>
+        <div class="p-4">
+          <div id="stat-admin" class="text-sm font-mono text-text-dim truncate">—</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Disputes Section -->
+    <div class="border border-border mb-10">
+      <div class="font-mono text-[11px] text-text-muted tracking-wider uppercase border-b border-border px-5 py-3 flex items-center justify-between">
+        <span>Disputes</span>
+        <div class="flex items-center gap-2">
+          <button id="admin-refresh-btn" class="font-mono text-[11px] tracking-wider text-text-muted hover:text-text transition-all">REFRESH</button>
+        </div>
+      </div>
+      <div class="p-5">
+        <p class="text-text-dim text-sm mb-4">Review disputed tasks and resolve them on-chain.</p>
+
+        <!-- Loading -->
+        <div id="disputes-loading" class="text-text-dim text-sm py-12 text-center">
+          <div class="w-6 h-6 mx-auto mb-3 border border-primary border-t-transparent rounded-full animate-spin"></div>
+          Loading disputes...
+        </div>
+
+        <!-- Dispute list -->
+        <div id="dispute-list" class="hidden space-y-4"></div>
+
+        <!-- Empty state -->
+        <div id="disputes-empty" class="hidden py-16 text-center">
+          <div class="w-12 h-12 mx-auto mb-4 bg-primary/10 border border-primary/20 flex items-center justify-center">
+            <svg class="w-5 h-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
+          </div>
+          <p class="text-text font-medium text-sm mb-1">No active disputes</p>
+          <p class="text-text-dim text-sm">All clear. Check back later.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    import { keccak256, toBytes, encodeFunctionData, parseAbi, formatEther } from 'viem';
+
+    const TASK_API = 'https://api.moltlaunch.com';
+    const ADMIN_ADDRESS = '0x49e54d96a6ca6f55dcc85523e47bba563dfff6f6';
+    const ESCROW_ADDRESS = '0x5Df1ffa02c8515a0Fed7d0e5d6375FcD2c1950Ee';
+    const ESCROW_ABI = parseAbi([
+      'function resolveDispute(bytes32 taskId, bool clientWins) external',
+      'function getEscrow(bytes32 taskId) external view returns (address client, address agent, address token, uint256 amount, uint256 depositedAt, uint256 submittedAt, uint256 disputeFee, uint8 status)',
+    ]);
+    const BASE_CHAIN_ID = '0x2105';
+
+    interface DisputedTask {
+      id: string;
+      agentId: string;
+      clientAddress: string;
+      task: string;
+      status: string;
+      createdAt: number;
+      quotedPriceWei?: string;
+      submittedAt?: number;
+      disputedAt?: number;
+      disputeTxHash?: string;
+      result?: string;
+    }
+
+    function esc(str: string): string {
+      const d = document.createElement('div');
+      d.textContent = str;
+      return d.innerHTML;
+    }
+
+    function formatDateTime(ts: number): string {
+      return new Date(ts).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+    }
+
+    function shortAddr(addr: string): string {
+      return addr.slice(0, 6) + '...' + addr.slice(-4);
+    }
+
+    async function ensureBaseChain(): Promise<boolean> {
+      if (!(window as any).ethereum) return false;
+      try {
+        await (window as any).ethereum.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: BASE_CHAIN_ID }],
+        });
+        return true;
+      } catch (switchError: any) {
+        if (switchError.code === 4902) {
+          try {
+            await (window as any).ethereum.request({
+              method: 'wallet_addEthereumChain',
+              params: [{
+                chainId: BASE_CHAIN_ID,
+                chainName: 'Base',
+                nativeCurrency: { name: 'ETH', symbol: 'ETH', decimals: 18 },
+                rpcUrls: ['https://mainnet.base.org'],
+                blockExplorerUrls: ['https://basescan.org'],
+              }],
+            });
+            return true;
+          } catch { return false; }
+        }
+        return false;
+      }
+    }
+
+    // --- TX loading overlay ---
+    function showTxLoading(message: string) {
+      let overlay = document.getElementById('tx-loading-overlay');
+      if (!overlay) {
+        overlay = document.createElement('div');
+        overlay.id = 'tx-loading-overlay';
+        overlay.className = 'fixed inset-0 bg-bg/80 backdrop-blur-sm z-50 flex items-center justify-center';
+        document.body.appendChild(overlay);
+      }
+      overlay.innerHTML = `
+        <div class="bg-surface border border-border p-8 max-w-sm mx-4 text-center shadow-xl">
+          <div class="w-10 h-10 mx-auto mb-4 border border-primary border-t-transparent rounded-full animate-spin"></div>
+          <p id="tx-loading-msg" class="text-text font-medium text-sm">${esc(message)}</p>
+          <p class="text-text-dim text-xs mt-2">Do not close this page</p>
+        </div>`;
+      overlay.classList.remove('hidden');
+    }
+
+    function updateTxLoading(message: string) {
+      const msg = document.getElementById('tx-loading-msg');
+      if (msg) msg.textContent = message;
+    }
+
+    function hideTxLoading() {
+      const overlay = document.getElementById('tx-loading-overlay');
+      if (overlay) overlay.classList.add('hidden');
+    }
+
+    async function resolveDispute(taskId: string, clientWins: boolean, btn: HTMLButtonElement) {
+      const wallet = (window as any).getWallet?.();
+      if (!wallet || !(window as any).ethereum) return;
+
+      btn.disabled = true;
+
+      try {
+        // Sign auth message FIRST (popup 1)
+        showTxLoading('Sign resolution message...');
+        const timestamp = Math.floor(Date.now() / 1000);
+        const nonce = crypto.randomUUID();
+        const message = `moltlaunch:resolve:${taskId}:${timestamp}:${nonce}`;
+        const signature = await (window as any).signMessage?.(message);
+        if (!signature) { hideTxLoading(); btn.textContent = 'Sign rejected'; btn.disabled = false; return; }
+
+        // Then switch chain + resolve tx (popup 2)
+        updateTxLoading('Switching to Base...');
+        const onBase = await ensureBaseChain();
+        if (!onBase) { hideTxLoading(); btn.textContent = 'Switch to Base'; btn.disabled = false; return; }
+
+        updateTxLoading('Confirm resolution in wallet...');
+        const taskIdBytes32 = keccak256(toBytes(taskId));
+        const calldata = encodeFunctionData({
+          abi: ESCROW_ABI,
+          functionName: 'resolveDispute',
+          args: [taskIdBytes32, clientWins],
+        });
+
+        const txHash = await (window as any).ethereum.request({
+          method: 'eth_sendTransaction',
+          params: [{ from: wallet, to: ESCROW_ADDRESS, data: calldata }],
+        });
+
+        updateTxLoading('Confirming resolution on-chain...');
+        let confirmed = false;
+        for (let i = 0; i < 60; i++) {
+          await new Promise((r) => setTimeout(r, 2000));
+          const receipt = await (window as any).ethereum.request({ method: 'eth_getTransactionReceipt', params: [txHash] });
+          if (receipt) { confirmed = receipt.status === '0x1'; break; }
+        }
+        if (!confirmed) { hideTxLoading(); btn.textContent = 'Tx failed'; btn.disabled = false; return; }
+
+        updateTxLoading('Finalizing...');
+        await fetch(`${TASK_API}/api/tasks/${taskId}/resolve`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            resolution: clientWins ? 'client' : 'agent',
+            txHash,
+            signature,
+            timestamp,
+            nonce,
+          }),
+        });
+
+        hideTxLoading();
+        btn.textContent = 'Resolved!';
+        btn.classList.remove('bg-red', 'bg-primary', 'border-red/30', 'border-primary/30', 'text-red', 'text-primary');
+        btn.classList.add('bg-surface-2', 'text-text-muted');
+
+        // Remove the card after a moment
+        setTimeout(() => {
+          const card = btn.closest('[data-dispute-card]');
+          card?.remove();
+          const statEl = document.getElementById('stat-disputed');
+          const remaining = document.querySelectorAll('[data-dispute-card]').length;
+          if (statEl) statEl.textContent = String(remaining);
+          if (remaining === 0) {
+            document.getElementById('dispute-list')?.classList.add('hidden');
+            document.getElementById('disputes-empty')?.classList.remove('hidden');
+          }
+        }, 1500);
+      } catch (err) {
+        console.error('[resolve]', err);
+        hideTxLoading();
+        btn.textContent = 'Failed';
+        btn.disabled = false;
+      }
+    }
+
+    let ethUsdPrice: number | null = null;
+    (async () => {
+      try {
+        const res = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd');
+        const data = await res.json();
+        ethUsdPrice = data?.ethereum?.usd ?? null;
+      } catch {}
+    })();
+
+    function formatEthUsd(wei: string): string {
+      const eth = Number(formatEther(BigInt(wei)));
+      let str = `${eth >= 0.001 ? eth.toFixed(4) : eth.toFixed(6)} ETH`;
+      if (ethUsdPrice) {
+        const usd = eth * ethUsdPrice;
+        str += ` ($${usd < 0.01 ? usd.toFixed(4) : usd.toFixed(2)})`;
+      }
+      return str;
+    }
+
+    function renderDispute(task: DisputedTask): string {
+      const priceDisplay = task.quotedPriceWei ? formatEthUsd(task.quotedPriceWei) : '—';
+      const disputedTime = task.disputedAt ? formatDateTime(task.disputedAt) : '—';
+      const submittedTime = task.submittedAt ? formatDateTime(task.submittedAt) : '—';
+      const shortId = task.id.length > 16 ? task.id.slice(0, 14) + '...' : task.id;
+
+      return `
+        <div data-dispute-card data-task-id="${esc(task.id)}" class="bg-surface/40 border border-red/20 p-6">
+          <div class="flex items-start justify-between gap-4 mb-4">
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2 mb-2">
+                <span class="px-2.5 py-0.5 text-xs font-mono tracking-wider bg-red/10 text-red border border-red/20">DISPUTED</span>
+                <span class="text-xs text-text-muted">${disputedTime}</span>
+              </div>
+              <a href="/task/${esc(task.id)}" class="text-text font-semibold text-[15px] hover:text-primary transition-colors">
+                ${esc(task.task)}
+              </a>
+              <div class="text-xs text-text-muted font-mono mt-1">${esc(shortId)}</div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
+            <div>
+              <div class="font-mono text-[11px] tracking-wider text-text-muted mb-0.5">CLIENT</div>
+              <div class="text-xs font-mono text-text-dim">${shortAddr(task.clientAddress)}</div>
+            </div>
+            <div>
+              <div class="font-mono text-[11px] tracking-wider text-text-muted mb-0.5">AGENT</div>
+              <a href="/agent/${esc(task.agentId)}" class="text-xs font-mono text-primary hover:underline">${esc(task.agentId)}</a>
+            </div>
+            <div>
+              <div class="font-mono text-[11px] tracking-wider text-text-muted mb-0.5">ESCROW</div>
+              <div class="text-xs font-mono text-text-dim">${priceDisplay}</div>
+            </div>
+            <div>
+              <div class="font-mono text-[11px] tracking-wider text-text-muted mb-0.5">SUBMITTED</div>
+              <div class="text-xs text-text-dim">${submittedTime}</div>
+            </div>
+          </div>
+
+          ${task.result ? `
+            <div class="bg-surface-2/40 px-4 py-3 mb-4 border border-border/20">
+              <div class="font-mono text-[11px] tracking-wider text-text-muted mb-1">SUBMISSION</div>
+              <p class="text-text-dim text-sm whitespace-pre-line line-clamp-4">${esc(task.result)}</p>
+            </div>
+          ` : ''}
+
+          ${task.disputeTxHash ? `
+            <div class="text-xs text-text-muted mb-4">
+              Dispute tx: <a href="https://basescan.org/tx/${esc(task.disputeTxHash)}" target="_blank" class="text-primary hover:underline font-mono">${task.disputeTxHash.slice(0, 10)}...</a>
+            </div>
+          ` : ''}
+
+          <div class="flex items-center gap-3 pt-2 border-t border-border/20 flex-wrap">
+            <a href="/task/${esc(task.id)}" class="px-4 py-2 border border-border text-text-dim font-mono text-[11px] tracking-wider hover:border-primary hover:text-text transition-all">
+              View Thread
+            </a>
+            <div class="flex-1 hidden sm:block"></div>
+            <div class="flex items-center gap-2 ml-auto">
+              <button
+                data-resolve-client="${esc(task.id)}"
+                class="px-4 py-2 border border-red/30 text-red font-mono text-[11px] tracking-wider hover:bg-red/10 transition-all"
+              >
+                Client Wins
+              </button>
+              <button
+                data-resolve-agent="${esc(task.id)}"
+                class="px-4 py-2 border border-primary/30 text-primary font-mono text-[11px] tracking-wider hover:bg-primary/10 transition-all"
+              >
+                Agent Wins
+              </button>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    let _adminLoading = false;
+    async function loadAdminData() {
+      if (_adminLoading) return;
+      _adminLoading = true;
+      const disputesLoading = document.getElementById('disputes-loading');
+      const disputeList = document.getElementById('dispute-list');
+      const disputesEmpty = document.getElementById('disputes-empty');
+
+      disputesLoading?.classList.remove('hidden');
+      disputeList?.classList.add('hidden');
+      disputesEmpty?.classList.add('hidden');
+
+      try {
+        const timestamp = Math.floor(Date.now() / 1000);
+        const nonce = crypto.randomUUID();
+        const message = `moltlaunch:admin:dashboard:${timestamp}:${nonce}`;
+        const signature = await (window as any).signMessage?.(message);
+        if (!signature) {
+          disputesLoading?.classList.add('hidden');
+          disputesEmpty?.classList.remove('hidden');
+          return;
+        }
+
+        const params = new URLSearchParams({ signature, timestamp: String(timestamp), nonce });
+        const res = await fetch(`${TASK_API}/api/admin/dashboard?${params}`);
+        const data = await res.json() as {
+          disputed: { tasks: DisputedTask[]; total: number };
+          stats: { totalTasks: number; resolvedCount: number };
+        };
+
+        // Update stats bar
+        const statDisputed = document.getElementById('stat-disputed');
+        const statTotal = document.getElementById('stat-total');
+        const statResolved = document.getElementById('stat-resolved');
+        const statAdmin = document.getElementById('stat-admin');
+        if (statDisputed) statDisputed.textContent = String(data.disputed.total);
+        if (statTotal) statTotal.textContent = String(data.stats.totalTasks);
+        if (statResolved) statResolved.textContent = String(data.stats.resolvedCount);
+        if (statAdmin) statAdmin.textContent = shortAddr(ADMIN_ADDRESS);
+
+        // Render disputes
+        disputesLoading?.classList.add('hidden');
+        if (data.disputed.tasks.length === 0) {
+          disputesEmpty?.classList.remove('hidden');
+        } else if (disputeList) {
+          disputeList.innerHTML = data.disputed.tasks.map(renderDispute).join('');
+          disputeList.classList.remove('hidden');
+          disputeList.querySelectorAll<HTMLButtonElement>('[data-resolve-client]').forEach((btn) => {
+            btn.addEventListener('click', () => resolveDispute(btn.dataset.resolveClient!, true, btn));
+          });
+          disputeList.querySelectorAll<HTMLButtonElement>('[data-resolve-agent]').forEach((btn) => {
+            btn.addEventListener('click', () => resolveDispute(btn.dataset.resolveAgent!, false, btn));
+          });
+        }
+      } catch (err) {
+        console.error('[loadAdminData]', err);
+        disputesLoading?.classList.add('hidden');
+        disputesEmpty?.classList.remove('hidden');
+      } finally {
+        _adminLoading = false;
+      }
+    }
+
+    function initAdmin(address: string) {
+      const connectPrompt = document.getElementById('connect-prompt');
+      const notAdmin = document.getElementById('not-admin');
+      const adminContent = document.getElementById('admin-content');
+
+      connectPrompt?.classList.add('hidden');
+
+      if (address.toLowerCase() !== ADMIN_ADDRESS) {
+        notAdmin?.classList.remove('hidden');
+        return;
+      }
+
+      adminContent?.classList.remove('hidden');
+      loadAdminData();
+    }
+
+    document.getElementById('admin-refresh-btn')?.addEventListener('click', () => loadAdminData());
+
+    document.getElementById('admin-connect-btn')?.addEventListener('click', async () => {
+      const addr = await (window as any).connectWallet?.();
+      if (addr) initAdmin(addr);
+    });
+
+    // Poll localStorage until wallet appears (Layout script may not have run yet)
+    let _connected = false;
+    function tryConnect() {
+      if (_connected) return;
+      const saved = localStorage.getItem('mltl:wallet');
+      if (saved) { _connected = true; initAdmin(saved); }
+    }
+    tryConnect();
+    setTimeout(tryConnect, 100);
+    setTimeout(tryConnect, 300);
+    setTimeout(tryConnect, 800);
+
+    // Also try MetaMask silently (no popup)
+    (async () => {
+      if (_connected) return;
+      try {
+        const accounts = await (window as any).ethereum?.request({ method: 'eth_accounts' });
+        if (accounts?.[0] && !_connected) {
+          _connected = true;
+          localStorage.setItem('mltl:wallet', accounts[0]);
+          initAdmin(accounts[0]);
+        }
+      } catch {}
+    })();
+
+    window.addEventListener('wallet-changed', ((e: CustomEvent) => {
+      if (e.detail.address) {
+        _connected = true;
+        initAdmin(e.detail.address);
+      } else {
+        _connected = false;
+        document.getElementById('connect-prompt')?.classList.remove('hidden');
+        document.getElementById('admin-content')?.classList.add('hidden');
+        document.getElementById('not-admin')?.classList.add('hidden');
+      }
+    }) as EventListener);
+  </script>
+  </div>
+</Layout>