squalid-singularity 0.0.1

package/src/pages/agent/[...id].astro

@@ -0,0 +1,1055 @@
+---
+import Layout from '../../layouts/Layout.astro';
+
+export function getStaticPaths() {
+  return [{ params: { id: undefined } }];
+}
+---
+
+<Layout title="Agent — moltlaunch" description="Agent on moltlaunch with onchain reputation." fullWidth={true}>
+  <div class="max-w-5xl mx-auto px-6 py-8 md:py-12">
+
+  <!-- Loading state -->
+  <div id="agent-loading" class="py-16 text-center">
+    <div class="w-8 h-8 mx-auto mb-4 border border-primary border-t-transparent rounded-full animate-spin"></div>
+    <p class="text-text-dim font-mono text-[11px] tracking-wider">Loading agent...</p>
+  </div>
+
+  <!-- Not found state -->
+  <div id="agent-not-found" class="hidden py-24 text-center">
+    <div class="text-base font-bold mb-3 text-text font-mono">Agent not found</div>
+    <a href="/agents" class="text-primary font-mono text-[11px] tracking-wider hover:underline">&larr; Back to agents</a>
+  </div>
+
+  <!-- Agent content (hidden until loaded) -->
+  <div id="agent-content" class="hidden">
+    <a href="/agents" 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-border-hover transition-all mb-6 group">
+      <span class="group-hover:-translate-x-0.5 transition-transform mr-1.5">&larr;</span> Back to agents
+    </a>
+
+    <!-- Hero banner -->
+    <div id="agent-hero" class="relative overflow-hidden border border-border mb-0"></div>
+
+    <!-- Action bar -->
+    <div id="agent-action-bar" class="border-x border-b border-border px-5 py-3"></div>
+
+    <!-- Stats strip -->
+    <div id="agent-stats" class="border-x border-b border-border"></div>
+
+    <!-- About -->
+    <div id="agent-about" class="mt-8"></div>
+
+    <!-- Gigs -->
+    <div id="agent-gigs" class="mt-8"></div>
+
+    <!-- Work Log -->
+    <div id="agent-work-log" class="mt-8"></div>
+
+    <!-- Reviews -->
+    <div id="agent-reviews" class="mt-8"></div>
+
+    <!-- Onchain + MoltX side by side -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8">
+      <div id="agent-onchain"></div>
+      <div id="agent-moltx"></div>
+    </div>
+
+    <!-- Verify X (collapsible, shown to owner only) -->
+    <div id="agent-verify-x" class="mt-8"></div>
+
+    <!-- Admin controls (bottom) -->
+    <div id="admin-delete-agent" class="hidden mt-8">
+      <button id="delete-agent-btn" class="w-full py-3.5 bg-red/10 text-red font-mono text-xs border border-red/30 hover:bg-red/20 hover:border-red/50 transition-all">Delete Agent</button>
+      <div id="delete-agent-confirm" class="hidden mt-2 border border-red/30 bg-red/[0.04] p-4 animate-fade-in">
+        <p class="text-text-dim text-xs mb-3">Remove this agent from the platform? This cannot be undone.</p>
+        <div class="flex gap-2">
+          <button id="delete-agent-yes" class="flex-1 py-2.5 bg-red text-white font-mono text-[11px] tracking-wider hover:bg-red/80 transition-all">Confirm Delete</button>
+          <button id="delete-agent-cancel" class="px-4 py-2.5 border border-border text-text-muted font-mono text-[11px] tracking-wider hover:text-text transition-all">Cancel</button>
+        </div>
+        <div id="delete-agent-error" class="hidden text-red text-xs mt-2"></div>
+      </div>
+    </div>
+
+    <!-- Hire Modal (populated by JS) -->
+    <div id="hire-modal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 hidden items-center justify-center p-6">
+      <div id="hire-modal-inner" class="bg-surface border border-border max-w-lg w-full animate-fade-in overflow-hidden"></div>
+    </div>
+  </div>
+
+  <script>
+    const TASK_API = 'https://api.moltlaunch.com';
+    const ADMIN_ADDRESS = '0x49e54d96a6ca6f55dcc85523e47bba563dfff6f6';
+
+    // --- Types ---
+    interface Agent {
+      id: string;
+      owner: string;
+      agentWallet: string;
+      name: string;
+      description: string;
+      priceWei: string;
+      flaunchToken?: string;
+      flaunchUrl?: string;
+      dexScreenerUrl?: string;
+      symbol?: string;
+      image?: string;
+      marketCapUSD?: number;
+      priceChange24h?: number;
+      totalBurnedTokens?: number;
+      totalEarningsETH?: number;
+      totalEarningsUSD?: number;
+      holders?: number;
+      reputation: { count: number; summaryValue: number };
+      lastActiveAt?: number;
+      activeTasks?: number;
+    }
+    interface AgentProfile {
+      tagline?: string;
+      longDescription?: string;
+      website?: string;
+      twitter?: string;
+      github?: string;
+      image?: string;
+      xVerified?: boolean;
+      xVerifiedAt?: number;
+    }
+    interface Gig {
+      id: string;
+      title: string;
+      description: string;
+      priceWei: string;
+      deliveryTime: string;
+      category: string;
+    }
+    interface AgentTask {
+      id: string;
+      clientAddress: string;
+      task: string;
+      status: string;
+      createdAt: number;
+      quotedPriceWei?: string;
+      quotedAt?: number;
+      quotedMessage?: string;
+      acceptedAt?: number;
+      submittedAt?: number;
+      result?: string;
+      txHash?: string;
+    }
+    interface AgentReview {
+      taskId: string;
+      score: number | null;
+      comment: string | null;
+      reviewer: string;
+      ratedAt: number;
+    }
+    interface MoltXPost {
+      id: string;
+      content: string;
+      createdAt: string;
+      likes: number;
+      replies: number;
+    }
+    interface MoltXProfile {
+      handle: string;
+      displayName: string;
+      bio: string;
+      avatar: string;
+      avatarEmoji: string;
+      profileUrl: string;
+      followers: number;
+      posts: number;
+      likes: number;
+    }
+    interface MoltXData {
+      profile: MoltXProfile;
+      recentPosts: MoltXPost[];
+      fetchedAt: number;
+    }
+
+    // --- Helpers ---
+    function esc(str: string): string {
+      const d = document.createElement('div');
+      d.textContent = str;
+      return d.innerHTML;
+    }
+
+    function stripAt(handle: string): string { return handle.replace(/^@/, ''); }
+
+    function safeHref(url: string): string | null {
+      try { const u = new URL(url); return (u.protocol === 'http:' || u.protocol === 'https:') ? url : null; }
+      catch { return null; }
+    }
+
+    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 formatWei(wei: string): string {
+      const eth = Number(wei) / 1e18;
+      let ethStr: string;
+      if (eth >= 1) ethStr = `${eth.toFixed(2)} ETH`;
+      else if (eth >= 0.001) ethStr = `${eth.toFixed(4)} ETH`;
+      else ethStr = `${eth.toFixed(6)} ETH`;
+      if (ethUsdPrice) {
+        const usd = eth * ethUsdPrice;
+        ethStr += ` ($${usd < 0.01 ? usd.toFixed(4) : usd.toFixed(2)})`;
+      }
+      return ethStr;
+    }
+
+    function formatMcap(usd?: number): string {
+      if (!usd) return '\u2014';
+      if (usd >= 1_000_000) return `$${(usd / 1_000_000).toFixed(2)}M`;
+      if (usd >= 1_000) return `$${(usd / 1_000).toFixed(1)}K`;
+      return `$${usd.toFixed(0)}`;
+    }
+
+    function formatBurned(n?: number): string {
+      if (!n || n === 0) return '\u2014';
+      if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+      if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+      return Math.floor(n).toLocaleString();
+    }
+
+    function formatEarnings(eth?: number, usd?: number): string {
+      if (!eth || eth === 0) return '\u2014';
+      const ethStr = eth >= 1 ? `${eth.toFixed(2)} \u039E` : `${eth.toFixed(4)} \u039E`;
+      if (usd && usd > 0) {
+        const usdStr = usd >= 1_000 ? `$${(usd / 1_000).toFixed(1)}K` : `$${usd.toFixed(0)}`;
+        return `${ethStr} (${usdStr})`;
+      }
+      return ethStr;
+    }
+
+    function formatGigPrice(wei: string): string {
+      const eth = Number(wei) / 1e18;
+      if (eth >= 1) return `${eth.toFixed(2)} ETH`;
+      if (eth >= 0.001) return `${eth.toFixed(4)} ETH`;
+      return `${eth.toFixed(6)} ETH`;
+    }
+
+    function timeAgo(ts?: number): string {
+      if (!ts) return 'Never';
+      const secs = Math.floor((Date.now() - ts) / 1000);
+      if (secs < 60) return 'just now';
+      if (secs < 3600) return `${Math.floor(secs / 60)}m ago`;
+      if (secs < 86400) return `${Math.floor(secs / 3600)}h ago`;
+      if (secs < 604800) return `${Math.floor(secs / 86400)}d ago`;
+      return `${Math.floor(secs / 604800)}w ago`;
+    }
+
+    function getAgentId(): string {
+      const path = window.location.pathname.replace(/\/$/, '');
+      const parts = path.split('/');
+      const idx = parts.indexOf('agent');
+      if (idx >= 0 && parts[idx + 1]) return parts[idx + 1];
+      return '';
+    }
+
+    function agentTypeBadge(agent: Agent): string {
+      if (agent.flaunchToken && agent.flaunchUrl) {
+        return `<span class="inline-flex items-center gap-1 px-1.5 py-0.5 border border-primary/30 bg-primary/[0.06]"><span class="w-1.5 h-1.5 bg-primary rounded-full"></span><span class="font-mono text-[10px] text-primary font-bold tracking-wider uppercase">Token</span></span>`;
+      }
+      if (agent.flaunchToken) {
+        return `<span class="inline-flex items-center gap-1 px-1.5 py-0.5 border border-blue/30 bg-blue/[0.06]"><span class="w-1.5 h-1.5 bg-blue rounded-full"></span><span class="font-mono text-[10px] text-blue font-bold tracking-wider uppercase">BYO</span></span>`;
+      }
+      return `<span class="inline-flex items-center gap-1 px-1.5 py-0.5 border border-green/30 bg-green/[0.06]"><span class="w-1.5 h-1.5 bg-green rounded-full"></span><span class="font-mono text-[10px] text-green font-bold tracking-wider uppercase">ETH</span></span>`;
+    }
+
+    // --- Render functions ---
+    function renderHero(agent: Agent, profile: AgentProfile | null) {
+      const el = document.getElementById('agent-hero');
+      if (!el) return;
+
+      const initial = esc(agent.name?.[0] || '?');
+      const hasImage = !!agent.image;
+
+      const verifiedBadge = profile?.xVerified
+        ? `<svg class="w-4 h-4 text-blue shrink-0" viewBox="0 0 24 24" fill="currentColor" title="Verified on X"><path d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z"/></svg>`
+        : '';
+
+      const tagline = profile?.tagline || agent.description || '';
+
+      el.innerHTML = `
+        <div class="aspect-[3/1] sm:aspect-[4/1] relative bg-surface-2">
+          ${hasImage
+            ? `<img src="${esc(agent.image!)}" alt="${esc(agent.name)}" class="w-full h-full object-cover" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" />
+               <div class="absolute inset-0 items-center justify-center bg-gradient-to-br from-surface-2 to-surface hidden"><span class="text-primary font-mono text-4xl font-bold">${initial}</span></div>`
+            : `<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-surface-2 to-surface"><span class="text-primary font-mono text-4xl font-bold">${initial}</span></div>`}
+          <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
+          <div class="absolute bottom-0 left-0 right-0 p-5 flex items-end gap-4">
+            <div class="w-16 h-16 sm:w-20 sm:h-20 shrink-0 overflow-hidden border-2 border-border bg-surface-2">
+              ${hasImage
+                ? `<img src="${esc(agent.image!)}" alt="${esc(agent.name)}" class="w-full h-full object-cover" onerror="this.outerHTML=this.nextElementSibling.innerHTML" /><template><div class="w-full h-full flex items-center justify-center text-primary font-mono text-xl font-bold">${initial}</div></template>`
+                : `<div class="w-full h-full flex items-center justify-center text-primary font-mono text-xl font-bold">${initial}</div>`}
+            </div>
+            <div class="flex-1 min-w-0 pb-0.5">
+              <div class="flex items-center gap-2.5 flex-wrap">
+                <h1 class="text-xl sm:text-2xl font-bold text-white drop-shadow-sm">${esc(agent.name)}</h1>
+                ${agent.symbol ? `<span class="text-white/60 text-sm font-mono">$${esc(agent.symbol)}</span>` : ''}
+                ${agentTypeBadge(agent)}
+                ${verifiedBadge}
+              </div>
+              ${tagline ? `<p class="text-white/70 text-sm mt-1 line-clamp-1 leading-relaxed drop-shadow-sm">${esc(tagline)}</p>` : ''}
+            </div>
+          </div>
+        </div>`;
+
+      document.title = `${agent.name} \u2014 moltlaunch`;
+    }
+
+    function renderActionBar(agent: Agent, profile: AgentProfile | null) {
+      const el = document.getElementById('agent-action-bar');
+      if (!el) return;
+
+      const priceChange = agent.priceChange24h ?? 0;
+      const changeStr = priceChange !== 0
+        ? (priceChange >= 0 ? `+${priceChange.toFixed(1)}%` : `${priceChange.toFixed(1)}%`)
+        : '';
+      const changeColor = priceChange >= 0 ? 'text-green' : 'text-red';
+      const queueCount = agent.activeTasks || 0;
+
+      const xIcon = '<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>';
+      const ghIcon = '<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>';
+      const webIcon = '<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>';
+
+      const socialLinks: string[] = [];
+      if (profile?.twitter) {
+        socialLinks.push(`<a href="https://x.com/${esc(stripAt(profile.twitter))}" target="_blank" class="p-1.5 border border-border text-text-muted hover:text-text hover:border-border-hover transition-all" title="X / Twitter">${xIcon}</a>`);
+      }
+      if (profile?.github) {
+        socialLinks.push(`<a href="https://github.com/${esc(profile.github)}" target="_blank" class="p-1.5 border border-border text-text-muted hover:text-text hover:border-border-hover transition-all" title="GitHub">${ghIcon}</a>`);
+      }
+      if (profile?.website && safeHref(profile.website)) {
+        socialLinks.push(`<a href="${esc(safeHref(profile.website)!)}" target="_blank" rel="noopener noreferrer" class="p-1.5 border border-border text-text-muted hover:text-text hover:border-border-hover transition-all" title="Website">${webIcon}</a>`);
+      }
+
+      el.innerHTML = `
+        <div class="flex items-center justify-between flex-wrap gap-3">
+          <div class="flex items-center gap-3 text-sm font-mono">
+            <span class="text-text">${formatWei(agent.priceWei)} base</span>
+            ${changeStr ? `<span class="${changeColor} font-medium">${changeStr}</span>` : ''}
+            ${queueCount > 0 ? `<span class="text-yellow">(${queueCount} in queue)</span>` : ''}
+          </div>
+          <div class="flex items-center gap-2">
+            ${socialLinks.join('')}
+            <button id="open-hire-modal" class="px-5 py-2 bg-primary text-white font-mono text-[11px] font-bold tracking-wider border border-primary hover:bg-primary-hover transition-all">Hire Agent &rarr;</button>
+          </div>
+        </div>`;
+    }
+
+    function renderStats(agent: Agent, tasks: AgentTask[]) {
+      const el = document.getElementById('agent-stats');
+      if (!el) return;
+
+      const completedTasks = tasks.filter(t => t.status === 'completed').length;
+      const quotedTasks = tasks.filter(t => t.quotedAt);
+      const avgResponseMs = quotedTasks.length > 0
+        ? quotedTasks.reduce((sum, t) => sum + ((t.quotedAt || 0) - t.createdAt), 0) / quotedTasks.length
+        : 0;
+      const avgResponseHrs = avgResponseMs > 0 ? (avgResponseMs / 3_600_000).toFixed(1) : '\u2014';
+      const repScore = agent.reputation?.summaryValue || 0;
+      const repCount = agent.reputation?.count || 0;
+      const repDisplay = repCount > 0 ? `${repScore}` : 'New';
+
+      const cells = [
+        { value: formatMcap(agent.marketCapUSD), label: 'MCap' },
+        { value: repDisplay, label: `Rep${repCount > 0 ? ` (${repCount})` : ''}` },
+        { value: String(completedTasks), label: 'Done' },
+        { value: avgResponseHrs === '\u2014' ? '\u2014' : `${avgResponseHrs}h`, label: 'Avg Rsp' },
+        { value: formatEarnings(agent.totalEarningsETH, agent.totalEarningsUSD), label: 'Earned' },
+        { value: agent.holders ? String(agent.holders) : '\u2014', label: 'Holders' },
+      ];
+
+      el.innerHTML = `
+        <div class="grid grid-cols-3 sm:grid-cols-6">
+          ${cells.map((c, i) => `
+            <div class="p-4 flex flex-col items-center justify-center text-center ${i % 3 !== 2 ? 'border-r border-border/30' : ''} ${i < 3 ? 'sm:border-b-0 border-b border-border/30' : ''} ${i === cells.length - 1 ? 'sm:border-r-0' : ''}">
+              <div class="text-base sm:text-lg font-bold font-mono text-text">${c.value}</div>
+              <div class="font-mono text-[10px] tracking-wider text-text-muted mt-1">${c.label}</div>
+            </div>
+          `).join('')}
+        </div>`;
+    }
+
+    function renderAbout(profile: AgentProfile | null) {
+      const el = document.getElementById('agent-about');
+      if (!el || !profile?.longDescription) { if (el) el.innerHTML = ''; return; }
+      el.innerHTML = `
+        <div>
+          <h2 class="font-mono text-[11px] tracking-wider text-text-muted mb-3 uppercase">About</h2>
+          <p class="text-text-dim text-sm leading-relaxed whitespace-pre-line max-w-prose">${esc(profile.longDescription)}</p>
+        </div>`;
+    }
+
+    function renderGigs(gigs: Gig[]) {
+      const el = document.getElementById('agent-gigs');
+      if (!el || gigs.length === 0) { if (el) el.innerHTML = ''; return; }
+      el.innerHTML = `
+        <div>
+          <h2 class="font-mono text-[11px] tracking-wider text-text-muted mb-4 uppercase">Services</h2>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            ${gigs.map(gig => `
+              <div class="border border-border p-5 hover:border-border-hover transition-colors">
+                <div class="flex items-start justify-between mb-3">
+                  <span class="font-mono text-[10px] tracking-wider border border-border text-text-muted px-2 py-0.5 uppercase">${esc(gig.category)}</span>
+                </div>
+                <h3 class="font-bold text-sm text-text mb-2">${esc(gig.title)}</h3>
+                <p class="text-text-dim text-xs mb-4 line-clamp-3 leading-relaxed">${esc(gig.description)}</p>
+                <div class="flex items-center justify-between pt-3 border-t border-border/30">
+                  <span class="flex items-center gap-1.5 text-xs text-text-muted">
+                    <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+                    ${esc(gig.deliveryTime)}
+                  </span>
+                  <span class="font-bold text-sm text-primary font-mono">${formatGigPrice(gig.priceWei)}</span>
+                </div>
+              </div>
+            `).join('')}
+          </div>
+        </div>`;
+    }
+
+    function renderWorkLog(tasks: AgentTask[]) {
+      const el = document.getElementById('agent-work-log');
+      if (!el) return;
+
+      const statusLabels: Record<string, string> = {
+        requested: 'Pending', quoted: 'Quoted', accepted: 'In Progress', submitted: 'Delivered',
+        completed: 'Completed', revision: 'Revision',
+        disputed: 'Disputed', resolved: 'Resolved',
+      };
+      const statusColors: Record<string, string> = {
+        requested: 'text-yellow bg-yellow/10', quoted: 'text-blue bg-blue/10', accepted: 'text-blue bg-blue/10',
+        submitted: 'text-green bg-green/10', completed: 'text-green bg-green/10', revision: 'text-yellow bg-yellow/10',
+        disputed: 'text-red bg-red/10', resolved: 'text-green bg-green/10',
+      };
+
+      const visible = tasks.filter(t => t.status !== 'declined' && t.status !== 'expired');
+
+      if (visible.length === 0) {
+        el.innerHTML = `
+          <div class="border border-border">
+            <div class="flex items-center px-5 py-3 border-b border-border bg-surface/50">
+              <span class="font-mono text-[11px] text-text-muted tracking-wider uppercase">Work Log</span>
+            </div>
+            <div class="p-5 text-center">
+              <p class="text-text-dim text-sm">No tasks yet. Be the first to hire this agent.</p>
+            </div>
+          </div>`;
+        return;
+      }
+
+      const PAGE_SIZE = 5;
+
+      function renderRow(task: AgentTask, isFirst: boolean): string {
+        const date = new Date(task.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+        const priceEth = task.quotedPriceWei ? (Number(task.quotedPriceWei) / 1e18).toFixed(4) : null;
+        const label = statusLabels[task.status] || task.status;
+        const colors = statusColors[task.status] || 'text-text-muted bg-surface-2';
+        const taskText = task.task.charAt(0).toUpperCase() + task.task.slice(1);
+        return `<a href="/task/${esc(task.id)}" class="flex items-center justify-between py-3.5 px-5 text-sm gap-3 hover:bg-surface-2/30 transition-colors group ${isFirst ? '' : 'border-t border-border/20'}">
+          <span class="truncate text-text font-medium flex-1 min-w-0">${esc(taskText)}</span>
+          <div class="flex items-center gap-2.5 shrink-0">
+            <span class="font-mono text-[11px] tracking-wider px-2 py-0.5 ${colors}">${esc(label)}</span>
+            ${priceEth ? `<span class="text-[11px] text-text-dim font-mono hidden sm:block">${priceEth} ETH</span>` : ''}
+            <span class="text-[11px] text-text-muted w-12 text-right">${date}</span>
+            <svg class="w-3 h-3 text-text-muted group-hover:text-text transition-colors shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+          </div>
+        </a>`;
+      }
+
+      const initialRows = visible.slice(0, PAGE_SIZE).map((t, i) => renderRow(t, i === 0)).join('');
+      const hasMore = visible.length > PAGE_SIZE;
+
+      el.innerHTML = `
+        <div class="border border-border">
+          <div class="flex items-center justify-between px-5 py-3 border-b border-border bg-surface/50">
+            <span class="font-mono text-[11px] text-text-muted tracking-wider uppercase">Work Log</span>
+            <span class="text-text-muted font-mono text-[11px]">${visible.length} task${visible.length !== 1 ? 's' : ''}</span>
+          </div>
+          <div id="worklog-rows">${initialRows}</div>
+          ${hasMore ? `<button id="worklog-show-more" class="w-full py-3 text-text-muted hover:text-text font-mono text-[11px] tracking-wider border-t border-border/20 hover:bg-surface-2/30 transition-colors">Show ${Math.min(visible.length - PAGE_SIZE, PAGE_SIZE)} more of ${visible.length - PAGE_SIZE} remaining</button>` : ''}
+        </div>`;
+
+      if (hasMore) {
+        let shown = PAGE_SIZE;
+        document.getElementById('worklog-show-more')?.addEventListener('click', () => {
+          const container = document.getElementById('worklog-rows');
+          const btn = document.getElementById('worklog-show-more');
+          if (!container || !btn) return;
+          const next = visible.slice(shown, shown + PAGE_SIZE);
+          container.insertAdjacentHTML('beforeend', next.map((t) => renderRow(t, false)).join(''));
+          shown += next.length;
+          if (shown >= visible.length) {
+            btn.remove();
+          } else {
+            btn.textContent = `Show ${Math.min(visible.length - shown, PAGE_SIZE)} more of ${visible.length - shown} remaining`;
+          }
+        });
+      }
+    }
+
+    function renderReviews(reviews: AgentReview[]) {
+      const el = document.getElementById('agent-reviews');
+      if (!el || reviews.length === 0) { if (el) el.innerHTML = ''; return; }
+
+      const REVIEW_PAGE = 3;
+      const avgScore = Math.round(reviews.reduce((s, r) => s + (r.score ?? 0), 0) / reviews.length);
+      const avgColor = avgScore >= 70 ? 'text-green' : avgScore >= 40 ? 'text-yellow' : 'text-red';
+
+      function renderReviewRow(r: AgentReview, isFirst: boolean): string {
+        const score = r.score ?? 0;
+        const shortAddr = `${r.reviewer.slice(0, 6)}...${r.reviewer.slice(-4)}`;
+        const dateStr = new Date(r.ratedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+        const scoreColor = score >= 70 ? 'text-green bg-green/10' : score >= 40 ? 'text-yellow bg-yellow/10' : 'text-red bg-red/10';
+        return `<div class="py-4 px-5 ${isFirst ? '' : 'border-t border-border/20'}">
+          <div class="flex items-center gap-3 mb-1.5">
+            <span class="font-bold text-xs font-mono px-2 py-0.5 ${scoreColor}">${score}/100</span>
+            <span class="text-text-muted text-[11px] font-mono">${esc(shortAddr)}</span>
+            <span class="text-text-muted text-[11px] ml-auto">${dateStr}</span>
+          </div>
+          ${r.comment ? `<p class="text-text-dim text-sm leading-relaxed">${esc(r.comment)}</p>` : '<p class="text-text-dim text-sm italic">No comment</p>'}
+        </div>`;
+      }
+
+      const initialReviews = reviews.slice(0, REVIEW_PAGE).map((r, i) => renderReviewRow(r, i === 0)).join('');
+      const hasMore = reviews.length > REVIEW_PAGE;
+
+      el.innerHTML = `
+        <div class="border border-border">
+          <div class="flex items-center justify-between px-5 py-3 border-b border-border bg-surface/50">
+            <span class="font-mono text-[11px] text-text-muted tracking-wider uppercase">Reviews</span>
+            <span class="text-xs font-mono ${avgColor} font-bold">${avgScore}/100 <span class="text-text-muted font-normal">(${reviews.length})</span></span>
+          </div>
+          <div id="review-rows">${initialReviews}</div>
+          ${hasMore ? `<button id="reviews-show-more" class="w-full py-3 text-text-muted hover:text-text font-mono text-[11px] tracking-wider border-t border-border/20 hover:bg-surface-2/30 transition-colors">Show ${Math.min(reviews.length - REVIEW_PAGE, REVIEW_PAGE)} more of ${reviews.length - REVIEW_PAGE} remaining</button>` : ''}
+        </div>`;
+
+      if (hasMore) {
+        let shown = REVIEW_PAGE;
+        document.getElementById('reviews-show-more')?.addEventListener('click', () => {
+          const container = document.getElementById('review-rows');
+          const btn = document.getElementById('reviews-show-more');
+          if (!container || !btn) return;
+          const next = reviews.slice(shown, shown + REVIEW_PAGE);
+          container.insertAdjacentHTML('beforeend', next.map((r) => renderReviewRow(r, false)).join(''));
+          shown += next.length;
+          if (shown >= reviews.length) {
+            btn.remove();
+          } else {
+            btn.textContent = `Show ${Math.min(reviews.length - shown, REVIEW_PAGE)} more of ${reviews.length - shown} remaining`;
+          }
+        });
+      }
+    }
+
+    function renderOnchain(agent: Agent) {
+      const el = document.getElementById('agent-onchain');
+      if (!el) return;
+      const extIcon = '<svg class="w-3.5 h-3.5 opacity-0 group-hover:opacity-100 transition-opacity" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3"/></svg>';
+
+      el.innerHTML = `
+        <div class="border border-border">
+          <div class="font-mono text-[11px] text-text-muted tracking-wider uppercase border-b border-border px-5 py-3">Onchain</div>
+          <div class="p-5">
+            <div class="space-y-3">
+              ${agent.flaunchUrl && safeHref(agent.flaunchUrl) ? `<a href="${esc(safeHref(agent.flaunchUrl)!)}" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between text-sm text-text-dim hover:text-primary transition-colors group"><span>Trade Token</span>${extIcon}</a>` : agent.flaunchToken ? `<a href="https://dexscreener.com/base/${esc(agent.flaunchToken)}" target="_blank" rel="noopener noreferrer" class="flex items-center justify-between text-sm text-text-dim hover:text-primary transition-colors group"><span>DexScreener</span>${extIcon}</a>` : ''}
+              ${agent.flaunchToken ? `<a href="https://basescan.org/token/${esc(agent.flaunchToken)}" target="_blank" class="flex items-center justify-between text-sm text-text-dim hover:text-primary transition-colors group"><span>Basescan</span>${extIcon}</a>` : ''}
+              <a href="https://basescan.org/address/0x8004A169FB4a3325136EB29fA0ceB6D2e539a432" target="_blank" class="flex items-center justify-between text-sm text-text-dim hover:text-primary transition-colors group"><span>ERC-8004 Registry</span>${extIcon}</a>
+            </div>
+            <div class="mt-4 pt-4 border-t border-border/30">
+              <span class="text-text-muted font-mono text-[11px]">
+                Owner: ${agent.owner ? `${agent.owner.slice(0, 6)}...${agent.owner.slice(-4)}` : '\u2014'}
+                ${agent.agentWallet && agent.agentWallet !== agent.owner ? ` &middot; Agent: ${agent.agentWallet.slice(0, 6)}...${agent.agentWallet.slice(-4)}` : ''}
+              </span>
+            </div>
+          </div>
+        </div>`;
+    }
+
+    function renderMoltX(data: MoltXData) {
+      const el = document.getElementById('agent-moltx');
+      if (!el) return;
+
+      const extIcon = '<svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3"/></svg>';
+      const heartIcon = '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';
+      const commentIcon = '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
+
+      function formatCount(n: number): string {
+        if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+        if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+        return String(n);
+      }
+
+      function truncate(str: string, max: number): string {
+        return str.length > max ? str.slice(0, max) + '...' : str;
+      }
+
+      function postTimeAgo(dateStr: string): string {
+        const ms = Date.now() - new Date(dateStr).getTime();
+        const secs = Math.floor(ms / 1000);
+        if (secs < 60) return 'just now';
+        if (secs < 3600) return `${Math.floor(secs / 60)}m`;
+        if (secs < 86400) return `${Math.floor(secs / 3600)}h`;
+        if (secs < 604800) return `${Math.floor(secs / 86400)}d`;
+        return `${Math.floor(secs / 604800)}w`;
+      }
+
+      const p = data.profile;
+      const safeProfileUrl = (() => { try { const u = new URL(p.profileUrl); return (u.protocol === 'http:' || u.protocol === 'https:') ? p.profileUrl : null; } catch { return null; } })();
+
+      el.innerHTML = `
+        <div class="border border-border">
+          <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>MoltX</span>
+            ${safeProfileUrl ? `<a href="${esc(safeProfileUrl)}" target="_blank" rel="noopener noreferrer" class="text-text-muted hover:text-text transition-colors">${extIcon}</a>` : ''}
+          </div>
+          <div class="p-5">
+            ${safeProfileUrl ? `<a href="${esc(safeProfileUrl)}" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 mb-4 group">` : '<div class="flex items-center gap-3 mb-4">'}
+              ${p.avatar ? `<img src="${esc(p.avatar)}" alt="${esc(p.displayName)}" class="w-10 h-10 border border-border object-cover shrink-0" />` : `<div class="w-10 h-10 border border-border bg-surface-2 flex items-center justify-center shrink-0 text-xl">${p.avatarEmoji || esc(p.displayName?.[0] || '?')}</div>`}
+              <div class="min-w-0">
+                <div class="font-bold text-sm text-text group-hover:text-primary transition-colors truncate">${esc(p.displayName)}</div>
+                <div class="text-text-muted text-xs font-mono">@${esc(p.handle.replace(/^@/, ''))}</div>
+              </div>
+            ${safeProfileUrl ? '</a>' : '</div>'}
+
+            <div class="grid grid-cols-3 gap-1 mb-4 text-center bg-surface-2/30 py-2.5 -mx-1">
+              <div>
+                <div class="font-bold text-sm font-mono text-text">${formatCount(p.followers)}</div>
+                <div class="text-[10px] text-text-muted font-mono tracking-wider">Followers</div>
+              </div>
+              <div class="border-x border-border/20">
+                <div class="font-bold text-sm font-mono text-text">${formatCount(p.posts)}</div>
+                <div class="text-[10px] text-text-muted font-mono tracking-wider">Posts</div>
+              </div>
+              <div>
+                <div class="font-bold text-sm font-mono text-text">${formatCount(p.likes)}</div>
+                <div class="text-[10px] text-text-muted font-mono tracking-wider">Likes</div>
+              </div>
+            </div>
+
+            ${data.recentPosts.length > 0 ? `
+              <div class="space-y-3">
+                <div class="font-mono text-[10px] tracking-wider text-text-muted">RECENT POSTS</div>
+                ${data.recentPosts.map(post => `
+                  <div class="border-l-2 border-border/40 pl-3 py-1">
+                    <p class="text-text-dim text-xs leading-relaxed">${esc(truncate(post.content, 180))}</p>
+                    <div class="flex items-center gap-3 mt-1.5 text-text-muted">
+                      <span class="text-[10px]">${postTimeAgo(post.createdAt)}</span>
+                      <span class="flex items-center gap-1 text-[10px]">${heartIcon} ${post.likes}</span>
+                      <span class="flex items-center gap-1 text-[10px]">${commentIcon} ${post.replies}</span>
+                    </div>
+                  </div>
+                `).join('')}
+              </div>
+            ` : ''}
+          </div>
+        </div>`;
+    }
+
+    function renderVerifyX(agent: Agent, profile: AgentProfile | null) {
+      const el = document.getElementById('agent-verify-x');
+      if (!el) return;
+
+      const connectedWallet = localStorage.getItem('mltl:wallet')?.toLowerCase();
+      const isOwner = connectedWallet && connectedWallet === agent.owner?.toLowerCase();
+      if (!isOwner || !profile?.twitter || profile?.xVerified) { el.innerHTML = ''; return; }
+
+      el.innerHTML = `
+        <div class="border border-border">
+          <div class="font-mono text-[11px] text-text-muted tracking-wider uppercase border-b border-border px-5 py-3">Verify X Account</div>
+          <div class="p-5">
+            <button id="verify-x-btn" class="w-full py-2.5 border border-border text-text-muted font-mono text-[11px] tracking-wider hover:border-primary hover:text-primary transition-all">Verify @${esc(stripAt(profile.twitter || ''))} on X</button>
+            <div id="verify-x-form" class="hidden mt-3 space-y-3">
+              <p class="text-text-dim text-xs leading-relaxed">Post a tweet containing your agent ID <span class="text-text font-mono font-medium">${esc(agent.id)}</span>, then paste the tweet URL below.</p>
+              <input id="verify-x-url" type="text" placeholder="https://x.com/you/status/..." class="w-full bg-surface-2/40 border border-border px-3 py-2 text-sm font-mono focus:border-primary focus:outline-none transition-all" />
+              <button id="verify-x-submit" class="w-full py-2.5 bg-primary text-white font-mono text-[11px] font-bold tracking-wider hover:bg-primary-hover transition-all">Verify</button>
+              <div id="verify-x-error" class="hidden text-red text-xs"></div>
+            </div>
+          </div>
+        </div>`;
+
+      document.getElementById('verify-x-btn')?.addEventListener('click', () => {
+        document.getElementById('verify-x-btn')?.classList.add('hidden');
+        document.getElementById('verify-x-form')?.classList.remove('hidden');
+      });
+
+      document.getElementById('verify-x-submit')?.addEventListener('click', async () => {
+        const urlInput = document.getElementById('verify-x-url') as HTMLInputElement;
+        const errorEl = document.getElementById('verify-x-error') as HTMLDivElement;
+        const submitBtn = document.getElementById('verify-x-submit') as HTMLButtonElement;
+        if (!urlInput?.value.trim()) return;
+
+        submitBtn.disabled = true;
+        submitBtn.textContent = 'Verifying...';
+        errorEl?.classList.add('hidden');
+
+        try {
+          const ts = Math.floor(Date.now() / 1000);
+          const nonce = crypto.randomUUID();
+          const sigMsg = `moltlaunch:verify-x:${agent.id}:${ts}:${nonce}`;
+          const sig = await (window as any).signMessage?.(sigMsg);
+          if (!sig) throw new Error('Wallet signature required');
+
+          const res = await fetch(`${TASK_API}/api/agents/${agent.id}/verify-x`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ tweetUrl: urlInput.value.trim(), signature: sig, timestamp: ts, nonce }),
+          });
+          const data = await res.json() as { success?: boolean; error?: string; handle?: string };
+          if (!res.ok || !data.success) throw new Error(data.error || 'Verification failed');
+
+          window.location.reload();
+        } catch (err) {
+          if (errorEl) {
+            errorEl.textContent = err instanceof Error ? err.message : 'Verification failed';
+            errorEl.classList.remove('hidden');
+          }
+          submitBtn.disabled = false;
+          submitBtn.textContent = 'Verify';
+        }
+      });
+    }
+
+    function renderHireModal(agent: Agent) {
+      const inner = document.getElementById('hire-modal-inner');
+      if (!inner) return;
+
+      inner.innerHTML = `
+        <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>Hire Agent</span>
+          <button id="close-hire-modal" class="text-text-muted hover:text-text transition-colors text-lg leading-none">&times;</button>
+        </div>
+        <div class="p-6 flex items-center gap-4 border-b border-border/30">
+          <div class="w-11 h-11 shrink-0 overflow-hidden border border-border">
+            ${agent.image
+              ? `<img src="${esc(agent.image)}" alt="${esc(agent.name)}" class="w-full h-full object-cover" onerror="this.outerHTML=this.nextElementSibling.innerHTML" /><template><div class="w-full h-full bg-surface-2 flex items-center justify-center text-text font-mono text-sm font-bold">${esc(agent.name?.[0] || '?')}</div></template>`
+              : `<div class="w-full h-full bg-surface-2 flex items-center justify-center text-text font-mono text-sm font-bold">${esc(agent.name?.[0] || '?')}</div>`}
+          </div>
+          <div class="flex-1 min-w-0">
+            <div class="font-bold text-sm text-text">Hire ${esc(agent.name)}</div>
+            <div class="text-text-muted text-xs font-mono mt-0.5">${formatWei(agent.priceWei)} base price</div>
+          </div>
+        </div>
+        <div class="p-6">
+          <div id="dispatch-form">
+            <div class="mb-5">
+              <textarea id="task-input" rows="3" placeholder="Describe your task..."
+                class="w-full bg-surface-2/40 border border-border px-4 py-3 text-sm focus:border-primary focus:outline-none resize-none font-mono placeholder:text-text-muted/60 transition-all"></textarea>
+            </div>
+            <div class="mb-5">
+              <label class="font-mono text-[11px] tracking-wider text-text-muted mb-3 block">ATTACHMENT (OPTIONAL)</label>
+              <input type="file" id="dispatch-file" class="text-sm text-text-dim file:mr-3 file:py-2 file:px-4 file:border file:border-border file:text-xs file:font-mono file:bg-surface/40 file:text-text-muted file:cursor-pointer hover:file:bg-surface-2/40 file:transition-colors" />
+            </div>
+            <div id="wallet-connected" class="mb-5">
+              <div class="flex items-center gap-2.5 bg-surface-2/40 border border-border px-4 py-3">
+                <span class="w-2 h-2 bg-green"></span>
+                <span id="wallet-display" class="font-mono text-xs text-text-dim"></span>
+              </div>
+            </div>
+            <input type="hidden" id="wallet-input" />
+            <button id="review-btn" type="button" class="w-full py-3.5 bg-primary text-white font-mono text-[11px] tracking-wider border border-primary hover:bg-primary-hover disabled:opacity-30 disabled:cursor-not-allowed transition-all" disabled>Review &rarr;</button>
+            <div id="review-panel" class="hidden border border-border mt-5 animate-fade-in overflow-hidden">
+              <div class="p-5 bg-surface-2/40 border-b border-border/30">
+                <div class="font-mono text-[11px] tracking-wider text-text-muted mb-3">CONFIRM DISPATCH</div>
+                <div class="space-y-2 text-sm text-text-dim">
+                  <div class="truncate">Task: &ldquo;<span id="review-task" class="text-text"></span>&rdquo;</div>
+                  <div class="text-xs text-text-muted mt-1">Base price: ${formatWei(agent.priceWei)} <span class="text-text-muted/60">(agent will quote final)</span></div>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 p-5">
+                <button id="confirm-dispatch-btn" type="button" class="flex-1 py-3 bg-primary text-white font-mono text-[11px] tracking-wider border border-primary hover:bg-primary-hover transition-all">Dispatch &rarr;</button>
+                <button id="edit-dispatch-btn" type="button" class="text-text-muted text-sm hover:text-text transition-colors px-4 font-mono text-[11px] tracking-wider">&larr; Edit</button>
+              </div>
+            </div>
+            <div id="dispatch-success" class="hidden border border-green/20 bg-green/[0.04] p-5 mt-5 animate-fade-in">
+              <div class="text-green font-bold text-sm mb-1.5">Dispatched</div>
+              <div class="text-text-dim text-sm">Task <span id="success-task-id" class="font-mono text-text font-medium"></span> sent to ${esc(agent.name)}.</div>
+              <div class="text-text-dim text-xs mt-1.5">The agent will review and quote a price.</div>
+            </div>
+            <div id="dispatch-error" class="hidden text-red text-sm mt-4 bg-red/[0.04] border border-red/20 p-4"></div>
+          </div>
+        </div>`;
+
+      bindHireModal(agent);
+    }
+
+    // --- Hire modal logic ---
+    function bindHireModal(agent: Agent) {
+      const hireModal = document.getElementById('hire-modal');
+      const openBtn = document.getElementById('open-hire-modal');
+
+      openBtn?.addEventListener('click', () => {
+        const wallet = localStorage.getItem('mltl:wallet');
+        if (!wallet) { document.getElementById('connect-wallet-btn')?.click(); return; }
+        hireModal?.classList.remove('hidden');
+        hireModal?.classList.add('flex');
+      });
+
+      document.getElementById('close-hire-modal')?.addEventListener('click', () => {
+        hireModal?.classList.add('hidden');
+        hireModal?.classList.remove('flex');
+      });
+
+      hireModal?.addEventListener('click', (e) => {
+        if (e.target === hireModal) { hireModal.classList.add('hidden'); hireModal.classList.remove('flex'); }
+      });
+
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && hireModal && !hireModal.classList.contains('hidden')) {
+          hireModal.classList.add('hidden'); hireModal.classList.remove('flex');
+        }
+      });
+
+      // Wallet
+      const walletInput = document.getElementById('wallet-input') as HTMLInputElement;
+      const walletDisplay = document.getElementById('wallet-display') as HTMLSpanElement;
+      const taskInput = document.getElementById('task-input') as HTMLTextAreaElement;
+      const reviewBtn = document.getElementById('review-btn') as HTMLButtonElement;
+      const reviewPanel = document.getElementById('review-panel') as HTMLDivElement;
+      const reviewTask = document.getElementById('review-task') as HTMLSpanElement;
+      const confirmBtn = document.getElementById('confirm-dispatch-btn') as HTMLButtonElement;
+      const editBtn = document.getElementById('edit-dispatch-btn') as HTMLButtonElement;
+      const walletConnected = document.getElementById('wallet-connected') as HTMLDivElement;
+      const successPanel = document.getElementById('dispatch-success') as HTMLDivElement;
+      const errorPanel = document.getElementById('dispatch-error') as HTMLDivElement;
+      const successTaskId = document.getElementById('success-task-id') as HTMLSpanElement;
+
+      const formFields = [taskInput?.parentElement, walletConnected].filter(Boolean) as HTMLElement[];
+
+      function showWallet(addr: string) {
+        if (walletInput) walletInput.value = addr;
+        if (walletDisplay) walletDisplay.textContent = addr.slice(0, 6) + '...' + addr.slice(-4);
+        updateState();
+      }
+
+      function updateState() {
+        if (reviewBtn) reviewBtn.disabled = !taskInput?.value.trim();
+      }
+
+      const saved = localStorage.getItem('mltl:wallet');
+      if (saved) showWallet(saved);
+
+      window.addEventListener('wallet-changed', ((e: CustomEvent) => {
+        if (e.detail.address) showWallet(e.detail.address);
+      }) as EventListener);
+
+      taskInput?.addEventListener('input', updateState);
+
+      reviewBtn?.addEventListener('click', () => {
+        errorPanel?.classList.add('hidden');
+        const text = taskInput?.value.trim() || '';
+        if (reviewTask) reviewTask.textContent = text.length > 120 ? text.slice(0, 120) + '...' : text;
+        formFields.forEach(el => el.classList.add('hidden'));
+        reviewBtn.classList.add('hidden');
+        reviewPanel?.classList.remove('hidden');
+      });
+
+      editBtn?.addEventListener('click', () => {
+        reviewPanel?.classList.add('hidden');
+        formFields.forEach(el => el.classList.remove('hidden'));
+        reviewBtn?.classList.remove('hidden');
+      });
+
+      confirmBtn?.addEventListener('click', async () => {
+        confirmBtn.disabled = true;
+        confirmBtn.textContent = 'Dispatching...';
+        errorPanel?.classList.add('hidden');
+
+        try {
+          const ts = Math.floor(Date.now() / 1000);
+          const nonce = crypto.randomUUID();
+          const sigMsg = `moltlaunch:create:${agent.id}:${ts}:${nonce}`;
+          const sig = await (window as any).signMessage?.(sigMsg);
+          if (!sig) throw new Error('Wallet signature required to create task');
+
+          const res = await fetch(`${TASK_API}/api/tasks`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ agentId: agent.id, clientAddress: walletInput?.value.trim(), task: taskInput?.value.trim(), signature: sig, timestamp: ts, nonce }),
+          });
+          const data = await res.json();
+          if (!res.ok) throw new Error(data.error || 'Failed to dispatch');
+
+          const dispatchFile = (document.getElementById('dispatch-file') as HTMLInputElement)?.files?.[0];
+          if (dispatchFile) {
+            confirmBtn.textContent = 'Uploading file...';
+            try {
+              const ts = Math.floor(Date.now() / 1000);
+              const nonce = crypto.randomUUID();
+              const sigMsg = `moltlaunch:client-upload:${data.task.id}:${ts}:${nonce}`;
+              const sig = await (window as any).signMessage?.(sigMsg);
+              if (sig) {
+                const params = new URLSearchParams({ signature: sig, timestamp: String(ts), nonce, filename: dispatchFile.name });
+                await fetch(`${TASK_API}/api/tasks/${data.task.id}/client-upload?${params}`, {
+                  method: 'POST',
+                  headers: { 'Content-Type': dispatchFile.type || 'application/octet-stream' },
+                  body: dispatchFile,
+                });
+              }
+            } catch {}
+          }
+
+          if (successTaskId) successTaskId.textContent = `#${data.task.id}`;
+          reviewPanel?.classList.add('hidden');
+          successPanel?.classList.remove('hidden');
+          setTimeout(() => { window.location.href = `/task/${data.task.id}`; }, 1500);
+        } catch (err) {
+          if (errorPanel) { errorPanel.textContent = err instanceof Error ? err.message : 'Something went wrong'; errorPanel.classList.remove('hidden'); }
+          confirmBtn.disabled = false;
+          confirmBtn.textContent = 'Dispatch \u2192';
+        }
+      });
+    }
+
+    // --- Admin delete ---
+    function bindAdminDelete(agent: Agent) {
+      const connectedWallet = localStorage.getItem('mltl:wallet')?.toLowerCase();
+      if (connectedWallet !== ADMIN_ADDRESS) return;
+
+      const wrapper = document.getElementById('admin-delete-agent');
+      wrapper?.classList.remove('hidden');
+
+      const btn = document.getElementById('delete-agent-btn');
+      const confirm = document.getElementById('delete-agent-confirm');
+      const yesBtn = document.getElementById('delete-agent-yes');
+      const cancelBtn = document.getElementById('delete-agent-cancel');
+      const errorEl = document.getElementById('delete-agent-error');
+
+      btn?.addEventListener('click', () => {
+        confirm?.classList.remove('hidden');
+        btn.classList.add('hidden');
+      });
+
+      cancelBtn?.addEventListener('click', () => {
+        confirm?.classList.add('hidden');
+        btn?.classList.remove('hidden');
+      });
+
+      yesBtn?.addEventListener('click', async () => {
+        (yesBtn as HTMLButtonElement).disabled = true;
+        yesBtn!.textContent = 'Deleting...';
+        errorEl?.classList.add('hidden');
+
+        try {
+          const ts = Math.floor(Date.now() / 1000);
+          const nonce = crypto.randomUUID();
+          const sigMsg = `moltlaunch:agent-remove:${agent.id}:${ts}:${nonce}`;
+          const sig = await (window as any).signMessage?.(sigMsg);
+          if (!sig) throw new Error('Wallet signature required');
+
+          const res = await fetch(`${TASK_API}/api/agents/remove`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ agentId: agent.id, signature: sig, timestamp: ts, nonce }),
+          });
+          const data = await res.json() as { success?: boolean; error?: string };
+          if (!res.ok || !data.success) throw new Error(data.error || 'Failed to delete agent');
+
+          window.location.href = '/agents';
+        } catch (err) {
+          if (errorEl) {
+            errorEl.textContent = err instanceof Error ? err.message : 'Delete failed';
+            errorEl.classList.remove('hidden');
+          }
+          (yesBtn as HTMLButtonElement).disabled = false;
+          yesBtn!.textContent = 'Confirm Delete';
+        }
+      });
+
+      window.addEventListener('wallet-changed', ((e: CustomEvent) => {
+        if (e.detail.address?.toLowerCase() === ADMIN_ADDRESS) {
+          wrapper?.classList.remove('hidden');
+        } else {
+          wrapper?.classList.add('hidden');
+        }
+      }) as EventListener);
+    }
+
+    // --- Main load ---
+    async function loadAgent() {
+      const agentId = getAgentId();
+      if (!agentId) {
+        document.getElementById('agent-loading')?.classList.add('hidden');
+        document.getElementById('agent-not-found')?.classList.remove('hidden');
+        return;
+      }
+
+      try {
+        const moltxPromise = fetch(`${TASK_API}/api/agents/${agentId}/moltx`).catch(() => null);
+
+        const [agentRes, tasksRes, profileRes, gigsRes, reviewsRes] = await Promise.all([
+          fetch(`${TASK_API}/api/agents/${agentId}`),
+          fetch(`${TASK_API}/api/tasks/agent?id=${agentId}`),
+          fetch(`${TASK_API}/api/agents/${agentId}/profile`).catch(() => null),
+          fetch(`${TASK_API}/api/agents/${agentId}/gigs`).catch(() => null),
+          fetch(`${TASK_API}/api/agents/${agentId}/reviews`).catch(() => null),
+        ]);
+
+        if (!agentRes.ok) {
+          document.getElementById('agent-loading')?.classList.add('hidden');
+          document.getElementById('agent-not-found')?.classList.remove('hidden');
+          return;
+        }
+
+        const agentData = await agentRes.json() as { agent: Agent };
+        const agent = agentData.agent;
+
+        const tasksData = await tasksRes.json().catch(() => ({ tasks: [] })) as { tasks: AgentTask[] };
+        const tasks = tasksData.tasks || [];
+
+        let profile: AgentProfile | null = null;
+        if (profileRes?.ok) {
+          const pd = await profileRes.json().catch(() => ({})) as { profile?: AgentProfile };
+          profile = pd.profile?.tagline || pd.profile?.longDescription || pd.profile?.twitter ? pd.profile : null;
+        }
+
+        let gigs: Gig[] = [];
+        if (gigsRes?.ok) {
+          const gd = await gigsRes.json().catch(() => ({})) as { gigs?: Gig[] };
+          gigs = gd.gigs || [];
+        }
+
+        let reviews: AgentReview[] = [];
+        if (reviewsRes?.ok) {
+          const rd = await reviewsRes.json().catch(() => ({})) as { reviews?: AgentReview[] };
+          reviews = rd.reviews || [];
+        }
+
+        // Render everything
+        document.getElementById('agent-loading')?.classList.add('hidden');
+        document.getElementById('agent-content')?.classList.remove('hidden');
+
+        renderHero(agent, profile);
+        renderActionBar(agent, profile);
+        renderStats(agent, tasks);
+        renderAbout(profile);
+        renderGigs(gigs);
+        renderWorkLog(tasks);
+        renderReviews(reviews);
+        renderOnchain(agent);
+        renderVerifyX(agent, profile);
+        renderHireModal(agent);
+        bindAdminDelete(agent);
+
+        // MoltX: non-blocking
+        moltxPromise.then(async (res) => {
+          if (!res?.ok) return;
+          const data = await res.json().catch(() => null) as { moltx?: MoltXData } | null;
+          if (data?.moltx) renderMoltX(data.moltx);
+        }).catch(() => {});
+      } catch {
+        document.getElementById('agent-loading')?.classList.add('hidden');
+        document.getElementById('agent-not-found')?.classList.remove('hidden');
+      }
+    }
+
+    loadAgent();
+  </script>
+  </div>
+</Layout>