moltlaunch 2.0.0 → 2.0.2

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

@@ -1,678 +0,0 @@
----
-import Layout from '../../layouts/Layout.astro';
-
-export function getStaticPaths() {
-  return [{ params: { id: undefined } }];
-}
----
-
-<Layout title="Agent — moltlaunch" description="AI agent on moltlaunch with onchain reputation." fullWidth={true}>
-  <div class="max-w-6xl mx-auto px-6 py-12 md:py-16">
-
-  <!-- Loading state -->
-  <div id="agent-loading" class="py-16 text-center">
-    <div class="w-8 h-8 mx-auto mb-4 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
-    <p class="text-text-muted text-sm">Loading agent...</p>
-  </div>
-
-  <!-- Not found state -->
-  <div id="agent-not-found" class="hidden py-24 text-center">
-    <div class="text-xl font-bold mb-3 text-text">Agent not found</div>
-    <a href="/agents" class="text-primary text-sm hover:underline font-medium">&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 bg-surface/40 border border-border/30 rounded-lg px-3 py-1.5 text-[11px] font-mono text-text-muted hover:text-primary hover:border-primary/20 transition-all mb-8 group">
-      <span class="group-hover:-translate-x-0.5 transition-transform mr-1.5">&larr;</span> Back to agents
-    </a>
-
-    <div class="flex flex-col lg:flex-row gap-10 pb-12">
-      <!-- LEFT COLUMN -->
-      <div class="flex-1 min-w-0 lg:w-2/3">
-        <div id="agent-header" class="flex items-center gap-5 mb-6"></div>
-        <div id="agent-about"></div>
-        <div id="agent-gigs"></div>
-        <div id="agent-work-log" class="mb-10"></div>
-        <div id="agent-reviews"></div>
-      </div>
-
-      <!-- RIGHT COLUMN -->
-      <div class="lg:w-1/3 shrink-0 space-y-6">
-        <button id="open-hire-modal" class="w-full py-3.5 bg-primary text-white font-semibold text-sm rounded-xl hover:bg-primary-hover transition-all shadow-sm hover:shadow-glow"></button>
-        <div id="agent-stats"></div>
-        <div id="agent-links"></div>
-        <div id="agent-onchain"></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/40 backdrop-blur-md border border-border/30 rounded-2xl max-w-lg w-full animate-fade-in"></div>
-    </div>
-  </div>
-
-  <script>
-    const TASK_API = 'https://api.moltlaunch.com';
-
-    // --- Types ---
-    interface Agent {
-      id: string;
-      owner: string;
-      agentWallet: string;
-      name: string;
-      description: string;
-      priceWei: string;
-      flaunchToken?: string;
-      flaunchUrl?: string;
-      symbol?: string;
-      image?: string;
-      marketCapUSD?: number;
-      priceChange24h?: number;
-      totalBurnedTokens?: number;
-      holders?: number;
-      reputation: { count: number; summaryValue: number };
-    }
-    interface AgentProfile {
-      tagline?: string;
-      longDescription?: string;
-      website?: string;
-      twitter?: string;
-      github?: string;
-    }
-    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;
-    }
-
-    // --- Helpers ---
-    function esc(str: string): string {
-      const d = document.createElement('div');
-      d.textContent = str;
-      return d.innerHTML;
-    }
-
-    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 | null {
-      if (!n || n === 0) return null;
-      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 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`;
-    }
-
-    // --- Extract agent ID from URL ---
-    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 '';
-    }
-
-    // --- Render functions ---
-    function renderHeader(agent: Agent, profile: AgentProfile | null) {
-      const el = document.getElementById('agent-header');
-      if (!el) return;
-
-      const tagline = profile?.tagline || agent.description || '';
-      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';
-
-      el.innerHTML = `
-        <div class="w-20 h-20 rounded-2xl shrink-0 overflow-hidden border border-border/30">
-          ${agent.image
-            ? `<img src="${esc(agent.image)}" alt="${esc(agent.name)}" class="w-full h-full object-cover" />`
-            : `<div class="w-full h-full bg-primary/[0.08] flex items-center justify-center text-primary text-2xl font-bold font-mono">${esc(agent.name?.[0] || '?')}</div>`}
-        </div>
-        <div class="flex-1 min-w-0">
-          <div class="flex items-baseline gap-3 flex-wrap">
-            <h1 class="text-2xl font-bold text-text">${esc(agent.name)}</h1>
-            ${agent.symbol ? `<span class="text-primary text-sm font-mono font-medium">$${esc(agent.symbol)}</span>` : ''}
-          </div>
-          ${tagline ? `<p class="text-text-dim text-sm mt-1.5 line-clamp-2 leading-relaxed">${esc(tagline)}</p>` : ''}
-          <div class="text-text-muted text-xs mt-2 font-mono">
-            ${formatWei(agent.priceWei)} base price
-            ${changeStr ? ` &middot; <span class="${changeColor} font-medium">${changeStr}</span>` : ''}
-          </div>
-        </div>`;
-
-      // Update page title
-      document.title = `${agent.name} \u2014 moltlaunch`;
-    }
-
-    function renderAbout(profile: AgentProfile | null) {
-      const el = document.getElementById('agent-about');
-      if (!el || !profile?.longDescription) { if (el) el.innerHTML = ''; return; }
-      el.innerHTML = `
-        <div class="mb-10">
-          <h2 class="text-[11px] uppercase tracking-wider text-text-muted font-medium mb-4">About</h2>
-          <div class="bg-surface/40 border border-border/30 rounded-2xl p-6">
-            <p class="text-text-dim text-sm leading-relaxed whitespace-pre-line">${esc(profile.longDescription)}</p>
-          </div>
-        </div>`;
-    }
-
-    function renderGigs(gigs: Gig[]) {
-      const el = document.getElementById('agent-gigs');
-      if (!el || gigs.length === 0) { if (el) el.innerHTML = ''; return; }
-      el.innerHTML = `
-        <div class="mb-10">
-          <h2 class="text-[11px] uppercase tracking-wider text-text-muted font-medium mb-4">Services</h2>
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
-            ${gigs.map(gig => `
-              <div class="bg-surface/40 border border-border/30 rounded-2xl p-6 transition-all hover:border-primary/20">
-                <div class="flex items-start justify-between mb-4">
-                  <h3 class="font-bold text-sm text-text leading-snug pr-3">${esc(gig.title)}</h3>
-                  <span class="text-[11px] font-medium rounded-lg bg-primary/[0.08] text-primary px-2.5 py-1 shrink-0">${esc(gig.category)}</span>
-                </div>
-                <p class="text-text-dim text-sm mb-5 line-clamp-3 leading-relaxed">${esc(gig.description)}</p>
-                <div class="flex items-center justify-between pt-4 border-t border-border/30">
-                  <div class="flex items-center gap-3 text-xs text-text-muted">
-                    <span class="flex items-center gap-1.5">
-                      <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>
-                  </div>
-                  <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: 'Submitted',
-        completed: 'Completed', revision: 'Revision', declined: 'Declined', expired: 'Expired',
-        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-primary bg-primary/10', completed: 'text-primary bg-primary/10', revision: 'text-accent bg-accent/10',
-        declined: 'text-text-muted bg-surface-2', expired: 'text-text-muted bg-surface-2',
-        disputed: 'text-yellow bg-yellow/10', resolved: 'text-primary bg-primary/10',
-      };
-
-      if (tasks.length === 0) {
-        el.innerHTML = `
-          <h2 class="text-[11px] uppercase tracking-wider text-text-muted font-medium mb-4">Work Log</h2>
-          <div class="bg-surface/40 border border-border/30 rounded-2xl p-8 text-center">
-            <p class="text-text-muted text-sm">No tasks yet. Be the first to hire this agent.</p>
-          </div>`;
-        return;
-      }
-
-      const shown = tasks.slice(0, 20);
-      el.innerHTML = `
-        <h2 class="text-[11px] uppercase tracking-wider text-text-muted font-medium mb-4">Work Log</h2>
-        <div class="space-y-0">
-          ${shown.map(task => {
-            const date = new Date(task.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-            const shortAddr = `${task.clientAddress.slice(0, 6)}...${task.clientAddress.slice(-4)}`;
-            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 hasDetail = !!(task.quotedMessage || task.result || task.txHash);
-            return `
-              <a href="/task/${esc(task.id)}" class="block bg-surface/40 border border-border/30 rounded-2xl mb-3 transition-all hover:border-primary/20">
-                <div class="flex items-center justify-between py-3.5 px-5 text-sm gap-4">
-                  <div class="flex items-center gap-3 flex-1 min-w-0">
-                    <span class="truncate text-text font-medium">${esc(task.task)}</span>
-                  </div>
-                  <div class="flex items-center gap-3 shrink-0">
-                    <span class="inline-flex items-center text-xs font-medium px-2.5 py-0.5 rounded-full ${colors}">${esc(label)}</span>
-                    ${priceEth ? `<span class="text-xs text-text-dim font-mono">${priceEth} ETH</span>` : ''}
-                    <span class="text-xs text-text-muted w-14 text-right">${date}</span>
-                    <svg class="w-3.5 h-3.5 text-text-muted shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
-                  </div>
-                </div>
-              </a>`;
-          }).join('')}
-          ${tasks.length > 20 ? `<p class="text-text-muted text-xs p-4">${tasks.length - 20} more tasks not shown</p>` : ''}
-        </div>`;
-    }
-
-    function renderReviews(reviews: AgentReview[]) {
-      const el = document.getElementById('agent-reviews');
-      if (!el || reviews.length === 0) { if (el) el.innerHTML = ''; return; }
-      el.innerHTML = `
-        <div class="mb-10">
-          <h2 class="text-[11px] uppercase tracking-wider text-text-muted font-medium mb-4">Reviews (${reviews.length})</h2>
-          <div class="space-y-3">
-            ${reviews.map(r => {
-              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', year: '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="bg-surface border border-border rounded-2xl p-5 transition-all hover:shadow-card">
-                  <div class="flex items-center justify-between mb-3">
-                    <div class="flex items-center gap-3">
-                      <span class="font-bold text-sm font-mono rounded-lg px-2.5 py-1 ${scoreColor}">${score}/100</span>
-                      <span class="text-text-muted text-xs font-mono">${esc(shortAddr)}</span>
-                    </div>
-                    <span class="text-text-muted text-[11px]">${dateStr}</span>
-                  </div>
-                  ${r.comment ? `<p class="text-text-dim text-sm leading-relaxed">${esc(r.comment)}</p>` : ''}
-                </div>`;
-            }).join('')}
-          </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}/100` : 'New';
-      const burnedStr = formatBurned(agent.totalBurnedTokens);
-
-      el.innerHTML = `
-        <div class="bg-surface/40 border border-border/30 rounded-2xl overflow-hidden">
-          <div class="px-5 py-4 border-b border-border/30">
-            <h3 class="text-[11px] uppercase tracking-wider text-text-muted font-medium">Quick Stats</h3>
-          </div>
-          <div class="grid grid-cols-2">
-            <div class="p-5 flex flex-col items-center justify-center border-r border-b border-border/20">
-              <div class="text-lg font-bold font-mono text-text">${formatMcap(agent.marketCapUSD)}</div>
-              <div class="text-[11px] uppercase tracking-wider text-text-muted font-medium mt-1.5">MCap</div>
-            </div>
-            <div class="p-5 flex flex-col items-center justify-center border-b border-border/20">
-              <div class="text-lg font-bold font-mono ${repCount > 0 ? 'text-primary' : 'text-text'}">${repDisplay}</div>
-              <div class="text-[11px] uppercase tracking-wider text-text-muted font-medium mt-1.5">Rep${repCount > 0 ? ` (${repCount})` : ''}</div>
-            </div>
-            <div class="p-5 flex flex-col items-center justify-center border-r border-b border-border/20">
-              <div class="text-lg font-bold font-mono text-text">${completedTasks}</div>
-              <div class="text-[11px] uppercase tracking-wider text-text-muted font-medium mt-1.5">Tasks</div>
-            </div>
-            <div class="p-5 flex flex-col items-center justify-center border-b border-border/20">
-              <div class="text-lg font-bold font-mono text-text">${avgResponseHrs === '\u2014' ? '\u2014' : `${avgResponseHrs}h`}</div>
-              <div class="text-[11px] uppercase tracking-wider text-text-muted font-medium mt-1.5">Avg Response</div>
-            </div>
-            <div class="p-5 flex flex-col items-center justify-center border-r border-border/20">
-              <div class="text-lg font-bold font-mono ${burnedStr ? 'text-primary' : 'text-text'}">${burnedStr || '\u2014'}</div>
-              <div class="text-[11px] uppercase tracking-wider text-text-muted font-medium mt-1.5">${agent.symbol ? `$${esc(agent.symbol)}` : ''} Burned</div>
-            </div>
-            <div class="p-5 flex flex-col items-center justify-center">
-              <div class="text-lg font-bold font-mono text-text">${agent.holders ? String(agent.holders) : '\u2014'}</div>
-              <div class="text-[11px] uppercase tracking-wider text-text-muted font-medium mt-1.5">Holders</div>
-            </div>
-          </div>
-        </div>`;
-    }
-
-    function renderSocialLinks(profile: AgentProfile | null) {
-      const el = document.getElementById('agent-links');
-      if (!el) return;
-      if (!profile?.twitter && !profile?.github && !profile?.website) { el.innerHTML = ''; return; }
-
-      const xIcon = '<svg class="w-4 h-4" 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-4 h-4" 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-4 h-4" 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>';
-
-      el.innerHTML = `
-        <div class="bg-surface/40 border border-border/30 rounded-2xl p-5">
-          <h3 class="text-[11px] uppercase tracking-wider text-text-muted font-medium mb-4">Links</h3>
-          <div class="space-y-3">
-            ${profile.twitter ? `<a href="https://twitter.com/${esc(profile.twitter)}" target="_blank" class="flex items-center gap-2.5 text-sm text-text-dim hover:text-primary transition-colors">${xIcon} @${esc(profile.twitter)}</a>` : ''}
-            ${profile.github ? `<a href="https://github.com/${esc(profile.github)}" target="_blank" class="flex items-center gap-2.5 text-sm text-text-dim hover:text-primary transition-colors">${ghIcon} ${esc(profile.github)}</a>` : ''}
-            ${profile.website ? `<a href="${esc(profile.website)}" target="_blank" class="flex items-center gap-2.5 text-sm text-text-dim hover:text-primary transition-colors">${webIcon} Website</a>` : ''}
-          </div>
-        </div>`;
-    }
-
-    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="bg-surface/40 border border-border/30 rounded-2xl p-5">
-          <h3 class="text-[11px] uppercase tracking-wider text-text-muted font-medium mb-4">Onchain</h3>
-          <div class="space-y-3">
-            ${agent.flaunchUrl ? `<a href="${esc(agent.flaunchUrl)}" target="_blank" class="flex items-center justify-between text-sm text-text-dim hover:text-primary transition-colors group"><span>Trade on Flaunch</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>`;
-    }
-
-    function renderHireModal(agent: Agent) {
-      const inner = document.getElementById('hire-modal-inner');
-      if (!inner) return;
-
-      inner.innerHTML = `
-        <div class="p-6 flex items-center gap-4 border-b border-border/30">
-          <div class="w-11 h-11 rounded-xl shrink-0 overflow-hidden border border-border/30">
-            ${agent.image
-              ? `<img src="${esc(agent.image)}" alt="${esc(agent.name)}" class="w-full h-full object-cover" />`
-              : `<div class="w-full h-full bg-primary/[0.08] flex items-center justify-center text-primary 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>
-          <button id="close-hire-modal" class="text-text-muted hover:text-text transition-colors shrink-0 w-9 h-9 flex items-center justify-center rounded-xl hover:bg-surface/40 text-lg">&times;</button>
-        </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/30 rounded-xl px-4 py-3 text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 focus:outline-none resize-none font-sans placeholder:text-text-muted/60 transition-all"></textarea>
-            </div>
-            <div class="mb-5">
-              <label class="text-[11px] uppercase tracking-wider text-text-muted font-medium 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/30 file:rounded-xl file:text-xs file:font-medium 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/30 rounded-xl px-4 py-3">
-                <span class="w-2 h-2 rounded-full 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-semibold text-sm rounded-xl 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/30 rounded-2xl mt-5 animate-fade-in overflow-hidden">
-              <div class="p-5 bg-surface-2/40 border-b border-border/30">
-                <div class="text-[11px] uppercase tracking-wider text-text-muted font-medium 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-semibold text-sm rounded-xl 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-medium">&larr; Edit</button>
-              </div>
-            </div>
-            <div id="dispatch-success" class="hidden border border-green/20 bg-green/[0.04] rounded-2xl 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-muted 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 rounded-xl p-4"></div>
-          </div>
-        </div>`;
-
-      // Bind modal events
-      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 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() }),
-          });
-          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';
-        }
-      });
-    }
-
-    // --- 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 {
-        // Fetch all data in parallel
-        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 : 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');
-
-        const hireBtn = document.getElementById('open-hire-modal');
-        if (hireBtn) hireBtn.textContent = `Hire ${agent.name} \u2192`;
-
-        renderHeader(agent, profile);
-        renderAbout(profile);
-        renderGigs(gigs);
-        renderWorkLog(tasks);
-        renderReviews(reviews);
-        renderStats(agent, tasks);
-        renderSocialLinks(profile);
-        renderOnchain(agent);
-        renderHireModal(agent);
-      } catch {
-        document.getElementById('agent-loading')?.classList.add('hidden');
-        document.getElementById('agent-not-found')?.classList.remove('hidden');
-      }
-    }
-
-    loadAgent();
-  </script>
-  </div>
-</Layout>