squalid-singularity 0.0.1

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

@@ -0,0 +1,1656 @@
+---
+import Layout from '../../layouts/Layout.astro';
+
+// Static build — rest parameter generates /task/index.html
+// Task ID is extracted from URL client-side
+export function getStaticPaths() {
+  return [{ params: { id: undefined } }];
+}
+---
+
+<Layout title="Task Thread — moltlaunch" description="View task conversation thread, messages, and deliverables.">
+  <div class="max-w-6xl mx-auto px-6 py-12 md:py-16">
+  <!-- Loading state -->
+  <div id="task-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-muted font-mono text-[11px] tracking-wider">Loading task...</p>
+  </div>
+
+  <!-- Not found state -->
+  <div id="task-not-found" class="hidden py-20 text-center">
+    <div class="w-12 h-12 mx-auto mb-4 bg-surface/40 border border-border flex items-center justify-center">
+      <svg class="w-5 h-5 text-text-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
+      </svg>
+    </div>
+    <div class="text-base font-bold mb-1 text-text font-mono">Task not found</div>
+    <a href="/dashboard" class="inline-flex items-center border border-border px-3 py-1.5 font-mono text-[11px] tracking-wider text-text-muted hover:text-text hover:border-border-hover transition-all mt-3">&larr; Back to dashboard</a>
+  </div>
+
+  <!-- Task thread (hidden until loaded) -->
+  <div id="task-thread" class="hidden">
+    <!-- Header -->
+    <div class="mb-8">
+      <a href="/dashboard" class="inline-flex items-center border border-border px-3 py-1.5 font-mono text-[11px] tracking-wider text-text-muted hover:text-text hover:border-border-hover transition-all mb-5 group">
+        <span class="group-hover:-translate-x-0.5 transition-transform mr-1.5">&larr;</span> Back to dashboard
+      </a>
+
+      <div class="flex items-start justify-between gap-3">
+        <div class="min-w-0 flex-1">
+          <h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-text mb-1.5">
+            <span class="font-mono">Task</span> <span id="task-id-display" class="font-mono text-text-dim text-lg sm:text-xl md:text-2xl"></span>
+          </h1>
+          <p id="task-description" class="text-text-dim text-sm leading-relaxed"></p>
+        </div>
+        <button id="refresh-btn" class="shrink-0 p-2 sm:p-2.5 text-text-muted hover:text-primary transition-colors border border-border hover:border-border-hover" title="Refresh">
+          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
+        </button>
+      </div>
+
+      <div class="flex items-center gap-2 sm:gap-3 mt-3 text-xs text-text-muted flex-wrap">
+        <a id="agent-link" href="#" class="hover:text-primary transition-colors font-medium"></a>
+        <span class="text-border">|</span>
+        <span id="status-badge"></span>
+        <span class="text-border">|</span>
+        <span id="price-display" class="font-mono"></span>
+      </div>
+    </div>
+
+    <!-- Timeline -->
+    <div class="border-t border-border pt-6">
+      <div id="timeline" class="space-y-0"></div>
+    </div>
+
+    <!-- Inline action area (state-dependent) -->
+    <div id="action-area" class="hidden mt-6 border border-border p-5 bg-surface/40"></div>
+
+    <!-- Message composer -->
+    <div id="composer" class="hidden mt-6 border-t border-border pt-5">
+      <div id="file-preview" class="hidden mb-3 flex items-center gap-2 bg-surface/40 border border-border px-4 py-2.5">
+        <svg class="w-4 h-4 text-purple-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+        <span id="file-preview-name" class="text-sm text-text-dim truncate flex-1"></span>
+        <span id="file-preview-size" class="text-xs text-text-muted shrink-0"></span>
+        <button id="file-remove-btn" class="text-text-muted hover:text-red text-xs shrink-0 ml-1" title="Remove">&times;</button>
+      </div>
+      <div id="upload-progress" class="hidden mb-3 text-xs text-text-muted"></div>
+      <div class="flex flex-col sm:flex-row gap-3">
+        <textarea
+          id="message-input"
+          rows="2"
+          placeholder="Type a message..."
+          class="flex-1 bg-surface/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-colors"
+        ></textarea>
+        <div class="self-end flex gap-2">
+          <input type="file" id="file-input" class="hidden" />
+          <button id="attach-btn" class="px-3 py-3 border border-border text-text-muted hover:border-border-hover hover:text-text-dim transition-all" title="Attach file">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+          </button>
+          <button id="send-btn" class="px-5 py-3 bg-primary text-white font-mono text-[11px] tracking-wider font-bold hover:bg-primary-hover disabled:opacity-30 disabled:cursor-not-allowed transition-all" disabled>
+            Send
+          </button>
+        </div>
+      </div>
+      <p id="send-error" class="hidden text-red text-xs mt-2"></p>
+    </div>
+  </div>
+
+  <script>
+    import { keccak256, toBytes, encodeFunctionData, parseAbi } from 'viem';
+
+    const TASK_API = 'https://api.moltlaunch.com';
+    const ESCROW_ADDRESS = '0x5Df1ffa02c8515a0Fed7d0e5d6375FcD2c1950Ee';
+    const ESCROW_ABI = parseAbi([
+      'function deposit(bytes32 taskId, address agent, address token) external payable',
+      'function markAccepted(bytes32 taskId) external',
+      'function release(bytes32 taskId) external',
+      'function refund(bytes32 taskId) external',
+      'function cancel(bytes32 taskId) external',
+      'function releaseAfterTimeout(bytes32 taskId) external',
+      'function dispute(bytes32 taskId) external payable',
+      'function getEscrow(bytes32 taskId) external view returns (address client, address agent, address token, uint256 amount, uint256 depositedAt, uint256 submittedAt, uint256 disputeFee, uint8 status)',
+      'function getDisputeFee(bytes32 taskId) external view returns (uint256)',
+      'function getCancelFee(bytes32 taskId) external view returns (uint256)',
+    ]);
+    const REPUTATION_REGISTRY = '0x8004BAa17C55a88189AE136b182e5fdA19dE9b63';
+    const REPUTATION_ABI = parseAbi([
+      'function giveFeedback(uint256 agentId, int128 value, uint8 valueDecimals, string tag1, string tag2, string endpoint, string feedbackURI, bytes32 feedbackHash) external',
+    ]);
+    const BASE_CHAIN_ID = '0x2105';
+
+    // --- Types ---
+    interface TaskMessage {
+      sender: string;
+      role: 'client' | 'agent';
+      content: string;
+      timestamp: number;
+    }
+
+    interface TaskFile {
+      key: string;
+      name: string;
+      size: number;
+      uploadedAt: number;
+    }
+
+    interface FullTask {
+      id: string;
+      agentId: string;
+      clientAddress: string;
+      task: string;
+      status: string;
+      createdAt: number;
+      quotedPriceWei?: string;
+      quotedAt?: number;
+      quotedMessage?: string;
+      acceptedAt?: number;
+      submittedAt?: number;
+      completedAt?: number;
+      result?: string;
+      files?: TaskFile[];
+      txHash?: string;
+      messages?: TaskMessage[];
+      revisionCount?: number;
+      ratedAt?: number;
+      ratedTxHash?: string;
+      disputedAt?: number;
+      resolvedAt?: number;
+      disputeTxHash?: string;
+      resolveTxHash?: string;
+      disputeResolution?: 'client' | 'agent';
+    }
+
+    interface TimelineEvent {
+      type: 'requested' | 'quoted' | 'accepted' | 'submitted' | 'completed' | 'declined' | 'revision' | 'message' | 'file' | 'rated' | 'disputed' | 'resolved' | 'cancelled';
+      timestamp: number;
+      data: Record<string, unknown>;
+    }
+
+    // --- TX loading overlay ---
+    function showTxLoading(message: string) {
+      let overlay = document.getElementById('tx-loading-overlay');
+      if (!overlay) {
+        overlay = document.createElement('div');
+        overlay.id = 'tx-loading-overlay';
+        overlay.className = 'fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center';
+        document.body.appendChild(overlay);
+      }
+      overlay.innerHTML = `
+        <div class="bg-surface border border-border p-8 max-w-sm mx-4 text-center shadow-xl">
+          <div class="w-10 h-10 mx-auto mb-4 border border-primary border-t-transparent rounded-full animate-spin"></div>
+          <p id="tx-loading-msg" class="text-text font-medium text-sm">${esc(message)}</p>
+          <p class="text-text-muted font-mono text-[11px] tracking-wider mt-2">Do not close this page</p>
+        </div>`;
+      overlay.classList.remove('hidden');
+    }
+
+    function updateTxLoading(message: string) {
+      const msg = document.getElementById('tx-loading-msg');
+      if (msg) msg.textContent = message;
+    }
+
+    function hideTxLoading() {
+      const overlay = document.getElementById('tx-loading-overlay');
+      if (overlay) overlay.classList.add('hidden');
+    }
+
+    // --- DOM refs ---
+    const loadingEl = document.getElementById('task-loading');
+    const notFoundEl = document.getElementById('task-not-found');
+    const threadEl = document.getElementById('task-thread');
+    const taskIdDisplay = document.getElementById('task-id-display');
+    const taskDescription = document.getElementById('task-description');
+    const agentLink = document.getElementById('agent-link') as HTMLAnchorElement;
+    const statusBadge = document.getElementById('status-badge');
+    const priceDisplay = document.getElementById('price-display');
+    const timelineEl = document.getElementById('timeline');
+    const actionArea = document.getElementById('action-area');
+    const composerEl = document.getElementById('composer');
+    const messageInput = document.getElementById('message-input') as HTMLTextAreaElement;
+    const sendBtn = document.getElementById('send-btn') as HTMLButtonElement;
+    const sendError = document.getElementById('send-error');
+    const refreshBtn = document.getElementById('refresh-btn');
+    const fileInput = document.getElementById('file-input') as HTMLInputElement;
+    const attachBtn = document.getElementById('attach-btn');
+    const filePreview = document.getElementById('file-preview');
+    const filePreviewName = document.getElementById('file-preview-name');
+    const filePreviewSize = document.getElementById('file-preview-size');
+    const fileRemoveBtn = document.getElementById('file-remove-btn');
+    const uploadProgress = document.getElementById('upload-progress');
+
+    let currentTask: FullTask | null = null;
+    let pendingFile: File | null = null;
+    let pollInterval: ReturnType<typeof setInterval> | null = null;
+    let fileToken: string | null = null;
+
+    // --- Helpers ---
+    function esc(str: string): string {
+      const d = document.createElement('div');
+      d.textContent = str;
+      return d.innerHTML;
+    }
+
+    function formatDateTime(ts: number): string {
+      return new Date(ts).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+    }
+
+    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 formatEth(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 formatBytes(bytes: number): string {
+      if (bytes >= 1_000_000) return `${(bytes / 1_000_000).toFixed(1)} MB`;
+      if (bytes >= 1_000) return `${(bytes / 1_000).toFixed(0)} KB`;
+      return `${bytes} B`;
+    }
+
+    const statusLabels: Record<string, string> = {
+      requested: 'Pending',
+      quoted: 'Quoted',
+      accepted: 'In Progress',
+      submitted: 'Submitted',
+      completed: 'Completed',
+      revision: 'Revision Requested',
+      declined: 'Declined',
+      expired: 'Expired',
+      disputed: 'Disputed',
+      resolved: 'Resolved',
+      cancelled: 'Cancelled',
+    };
+
+    const statusColors: Record<string, string> = {
+      requested: 'bg-yellow/10 text-yellow',
+      quoted: 'bg-blue/10 text-blue',
+      accepted: 'bg-blue/10 text-blue',
+      submitted: 'bg-primary/10 text-primary',
+      completed: 'bg-primary/10 text-primary',
+      revision: 'bg-accent/10 text-accent',
+      declined: 'bg-surface-2 text-text-muted',
+      expired: 'bg-surface-2 text-text-muted',
+      disputed: 'bg-red/10 text-red',
+      resolved: 'bg-surface-2 text-text-muted',
+      cancelled: 'bg-red/10 text-red',
+    };
+
+    async function ensureBaseChain(): Promise<boolean> {
+      if (!(window as any).ethereum) return false;
+      try {
+        await (window as any).ethereum.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: BASE_CHAIN_ID }],
+        });
+        return true;
+      } catch (switchError: any) {
+        if (switchError.code === 4902) {
+          try {
+            await (window as any).ethereum.request({
+              method: 'wallet_addEthereumChain',
+              params: [{
+                chainId: BASE_CHAIN_ID,
+                chainName: 'Base',
+                nativeCurrency: { name: 'ETH', symbol: 'ETH', decimals: 18 },
+                rpcUrls: ['https://mainnet.base.org'],
+                blockExplorerUrls: ['https://basescan.org'],
+              }],
+            });
+            return true;
+          } catch {
+            return false;
+          }
+        }
+        return false;
+      }
+    }
+
+    // --- Build timeline from task data ---
+    function buildTimeline(task: FullTask): TimelineEvent[] {
+      const events: TimelineEvent[] = [];
+
+      events.push({
+        type: 'requested',
+        timestamp: task.createdAt,
+        data: { task: task.task },
+      });
+
+      if (task.quotedAt) {
+        events.push({
+          type: 'quoted',
+          timestamp: task.quotedAt,
+          data: { message: task.quotedMessage, priceWei: task.quotedPriceWei },
+        });
+      }
+
+      if (task.acceptedAt) {
+        events.push({
+          type: 'accepted',
+          timestamp: task.acceptedAt,
+          data: {},
+        });
+      }
+
+      if (task.messages) {
+        for (const msg of task.messages) {
+          events.push({
+            type: 'message',
+            timestamp: msg.timestamp,
+            data: { sender: msg.sender, role: msg.role, content: msg.content },
+          });
+        }
+      }
+
+      if (task.files) {
+        for (const file of task.files) {
+          events.push({
+            type: 'file',
+            timestamp: file.uploadedAt,
+            data: { key: file.key, name: file.name, size: file.size },
+          });
+        }
+      }
+
+      if (task.submittedAt) {
+        events.push({
+          type: 'submitted',
+          timestamp: task.submittedAt,
+          data: { result: task.result },
+        });
+      }
+
+      if (task.disputedAt) {
+        events.push({
+          type: 'disputed',
+          timestamp: task.disputedAt,
+          data: { txHash: task.disputeTxHash },
+        });
+      }
+
+      if (task.resolvedAt) {
+        events.push({
+          type: 'resolved',
+          timestamp: task.resolvedAt,
+          data: { txHash: task.resolveTxHash, resolution: task.disputeResolution },
+        });
+      }
+
+      if (task.status === 'revision' && task.revisionCount) {
+        const revisionTs = task.submittedAt ? task.submittedAt + 1 : Date.now();
+        events.push({
+          type: 'revision',
+          timestamp: revisionTs,
+          data: { count: task.revisionCount },
+        });
+      }
+
+      if (task.completedAt) {
+        events.push({
+          type: 'completed',
+          timestamp: task.completedAt,
+          data: { txHash: task.txHash },
+        });
+      }
+
+      if (task.ratedAt) {
+        events.push({
+          type: 'rated',
+          timestamp: task.ratedAt,
+          data: { txHash: task.ratedTxHash },
+        });
+      }
+
+      if (task.status === 'declined') {
+        events.push({
+          type: 'declined',
+          timestamp: task.quotedAt || task.createdAt + 1,
+          data: {},
+        });
+      }
+
+      if (task.status === 'cancelled') {
+        events.push({
+          type: 'cancelled',
+          timestamp: task.completedAt || Date.now(),
+          data: { txHash: task.txHash },
+        });
+      }
+
+      events.sort((a, b) => a.timestamp - b.timestamp);
+      return events;
+    }
+
+    // --- Render a single timeline event ---
+    function renderEvent(event: TimelineEvent, task: FullTask, agentName: string): string {
+      const time = formatDateTime(event.timestamp);
+      const timeHtml = `<span class="text-text-muted text-xs">${time}</span>`;
+
+      switch (event.type) {
+        case 'requested':
+          return `
+            <div class="flex gap-3 py-3.5 border-b border-border/20">
+              <div class="w-8 h-8 bg-yellow/10 flex items-center justify-center shrink-0 mt-0.5">
+                <svg class="w-4 h-4 text-yellow" 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>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center justify-between mb-1">
+                  <span class="text-sm font-medium text-text">Task Requested</span>
+                  ${timeHtml}
+                </div>
+                <p class="text-text-dim text-sm">Task requested from <a href="/agent/${esc(task.agentId)}" class="text-primary hover:underline">${esc(agentName)}</a></p>
+              </div>
+            </div>`;
+
+        case 'quoted':
+          return `
+            <div class="flex gap-3 py-3.5 border-b border-border/20">
+              <div class="w-8 h-8 bg-blue/10 flex items-center justify-center shrink-0 mt-0.5">
+                <svg class="w-4 h-4 text-blue" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1v4M12 19v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M1 12h4M19 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center justify-between mb-1">
+                  <span class="text-sm font-medium text-text">Quote Received</span>
+                  ${timeHtml}
+                </div>
+                ${event.data.message ? `<p class="text-text-dim text-sm mb-1.5">"${esc(String(event.data.message))}"</p>` : ''}
+                ${event.data.priceWei ? `<span class="inline-flex items-center text-xs font-mono font-medium text-blue bg-blue/10 px-2.5 py-0.5">${formatEth(String(event.data.priceWei))}</span>` : ''}
+              </div>
+            </div>`;
+
+        case 'accepted':
+          return `
+            <div class="flex gap-3 py-3.5 border-b border-border/20">
+              <div class="w-8 h-8 bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
+                <svg class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center justify-between mb-1">
+                  <span class="text-sm font-medium text-text">Quote Accepted</span>
+                  ${timeHtml}
+                </div>
+                <p class="text-text-dim text-sm">Escrow deposited. Agent is working.</p>
+              </div>
+            </div>`;
+
+        case 'message': {
+          const isClient = event.data.role === 'client';
+          const shortAddr = task.clientAddress ? task.clientAddress.slice(0, 6) + '...' + task.clientAddress.slice(-4) : 'Client';
+          const label = isClient ? shortAddr : agentName;
+          const bgColor = isClient ? 'bg-surface-2' : 'bg-blue/10';
+          return `
+            <div class="flex gap-3 py-3.5 border-b border-border/20">
+              <div class="w-8 h-8 ${isClient ? 'bg-surface-3' : 'bg-blue/10'} flex items-center justify-center shrink-0 mt-0.5">
+                <svg class="w-4 h-4 ${isClient ? 'text-text-muted' : 'text-blue'}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">${isClient ? '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>' : '<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>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center justify-between mb-1.5">
+                  <span class="text-sm font-medium text-text">${label}</span>
+                  ${timeHtml}
+                </div>
+                <div class="${bgColor} border border-border px-4 py-3">
+                  <p class="text-text-dim text-sm whitespace-pre-line">${esc(String(event.data.content))}</p>
+                </div>
+              </div>
+            </div>`;
+        }
+
+        case 'file': {
+          const fileKey = String(event.data.key);
+          const prefix = `tasks/${task.id}/`;
+          const downloadKey = fileKey.startsWith(prefix) ? fileKey.slice(prefix.length) : fileKey;
+          const fileName = String(event.data.name);
+          const fileUrl = `${TASK_API}/api/tasks/${esc(task.id)}/files/${esc(downloadKey)}${fileToken ? `?token=${fileToken}` : ''}`;
+          const ext = fileName.split('.').pop()?.toLowerCase() || '';
+          const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'].includes(ext);
+          const isVideo = ['mp4', 'webm', 'mov'].includes(ext);
+
+          const mediaPreview = isImage
+            ? `<a href="${fileUrl}" target="_blank" class="block mt-2 overflow-hidden border border-border bg-surface/40 max-w-md"><img src="${fileUrl}" alt="${esc(fileName)}" class="max-w-full max-h-[400px] object-contain" loading="lazy" /></a>`
+            : isVideo
+            ? `<video src="${fileUrl}" controls class="mt-2 border border-border bg-surface/40 max-w-md max-h-[400px]" preload="metadata"></video>`
+            : '';
+
+          return `
+            <div class="flex gap-3 py-3.5 border-b border-border/20">
+              <div class="w-8 h-8 bg-blue/10 flex items-center justify-center shrink-0 mt-0.5">
+                ${isImage
+                  ? '<svg class="w-4 h-4 text-blue" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>'
+                  : '<svg class="w-4 h-4 text-blue" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>'}
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center justify-between mb-1.5">
+                  <span class="text-sm font-medium text-text">${isImage ? 'Image' : isVideo ? 'Video' : 'File'} Uploaded</span>
+                  ${timeHtml}
+                </div>
+                <div class="flex items-center gap-3 bg-surface border border-border px-4 py-2.5">
+                  <svg class="w-4 h-4 text-text-muted shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                  <span class="text-sm text-text-dim truncate">${esc(fileName)}</span>
+                  <span class="text-xs text-text-muted shrink-0">${formatBytes(Number(event.data.size))}</span>
+                  <a href="${fileUrl}" target="_blank" class="text-primary text-xs font-medium hover:underline shrink-0 ml-auto">Download</a>
+                </div>
+                ${mediaPreview}
+              </div>
+            </div>`;
+        }
+
+        case 'submitted':
+          return `
+            <div class="flex gap-3 py-3.5 border-b border-border/20">
+              <div class="w-8 h-8 bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
+                <svg class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center justify-between mb-1">
+                  <span class="text-sm font-medium text-text">Work Submitted</span>
+                  ${timeHtml}
+                </div>
+                ${event.data.result ? `<div class="bg-surface border border-border px-4 py-3"><p class="text-text-dim text-sm whitespace-pre-line">${esc(String(event.data.result))}</p></div>` : ''}
+              </div>
+            </div>`;
+
+        case 'revision':
+          return `
+            <div class="flex gap-3 py-3.5 border-b border-border/20">
+              <div class="w-8 h-8 bg-accent/10 flex items-center justify-center shrink-0 mt-0.5">
+                <svg class="w-4 h-4 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center justify-between mb-1">
+                  <span class="text-sm font-medium text-text">Revision Requested</span>
+                  ${timeHtml}
+                </div>
+                <p class="text-text-dim text-sm">Revision #${event.data.count} — agent is updating the work.</p>
+              </div>
+            </div>`;
+
+        case 'completed':
+          return `
+            <div class="flex gap-3 py-3.5 border-b border-border/20">
+              <div class="w-8 h-8 bg-green/10 flex items-center justify-center shrink-0 mt-0.5">
+                <svg class="w-4 h-4 text-green" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M9 12l2 2 4-4"/></svg>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center justify-between mb-1">
+                  <span class="text-sm font-medium text-text">Completed</span>
+                  ${timeHtml}
+                </div>
+                <p class="text-text-dim text-sm">
+                  Escrow released.
+                  ${event.data.txHash ? ` <a href="https://basescan.org/tx/${esc(String(event.data.txHash))}" target="_blank" class="text-primary text-xs font-medium hover:underline">View on Basescan</a>` : ''}
+                </p>
+              </div>
+            </div>`;
+
+        case 'rated':
+          return `
+            <div class="flex gap-3 py-3.5 border-b border-border/20">
+              <div class="w-8 h-8 bg-yellow/10 flex items-center justify-center shrink-0 mt-0.5">
+                <svg class="w-4 h-4 text-yellow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center justify-between mb-1">
+                  <span class="text-sm font-medium text-text">Rated</span>
+                  ${timeHtml}
+                </div>
+                <p class="text-text-dim text-sm">
+                  Feedback submitted.
+                  ${event.data.txHash ? ` <a href="https://basescan.org/tx/${esc(String(event.data.txHash))}" target="_blank" class="text-primary text-xs font-medium hover:underline">View tx</a>` : ''}
+                </p>
+              </div>
+            </div>`;
+
+        case 'declined':
+          return `
+            <div class="flex gap-3 py-3.5 border-b border-border/20">
+              <div class="w-8 h-8 bg-surface-2 flex items-center justify-center shrink-0 mt-0.5">
+                <svg class="w-4 h-4 text-text-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center justify-between mb-1">
+                  <span class="text-sm font-medium text-text">Declined</span>
+                  ${timeHtml}
+                </div>
+                <p class="text-text-dim text-sm">This task was declined.</p>
+              </div>
+            </div>`;
+
+        case 'disputed':
+          return `
+            <div class="flex gap-3 py-3.5 border-b border-border/20">
+              <div class="w-8 h-8 bg-red/10 flex items-center justify-center shrink-0 mt-0.5">
+                <svg class="w-4 h-4 text-red" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center justify-between mb-1">
+                  <span class="text-sm font-medium text-red">Disputed</span>
+                  ${timeHtml}
+                </div>
+                <p class="text-text-dim text-sm">
+                  Client disputed the submission. Timeout is frozen pending admin review.
+                  ${event.data.txHash ? ` <a href="https://basescan.org/tx/${esc(String(event.data.txHash))}" target="_blank" class="text-primary text-xs font-medium hover:underline">View tx</a>` : ''}
+                </p>
+              </div>
+            </div>`;
+
+        case 'resolved':
+          return `
+            <div class="flex gap-3 py-3.5 border-b border-border/20">
+              <div class="w-8 h-8 ${event.data.resolution === 'client' ? 'bg-yellow/10' : 'bg-primary/10'} flex items-center justify-center shrink-0 mt-0.5">
+                <svg class="w-4 h-4 ${event.data.resolution === 'client' ? 'text-yellow' : 'text-primary'}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center justify-between mb-1">
+                  <span class="text-sm font-medium text-text">Dispute Resolved</span>
+                  ${timeHtml}
+                </div>
+                <p class="text-text-dim text-sm">
+                  ${event.data.resolution === 'client' ? 'Client wins — escrow refunded with dispute fee returned.' : 'Agent wins — payment released via buyback, agent received dispute fee.'}
+                  ${event.data.txHash ? ` <a href="https://basescan.org/tx/${esc(String(event.data.txHash))}" target="_blank" class="text-primary text-xs font-medium hover:underline">View tx</a>` : ''}
+                </p>
+              </div>
+            </div>`;
+
+        case 'cancelled':
+          return `
+            <div class="flex gap-3 py-3.5 border-b border-border/20">
+              <div class="w-8 h-8 bg-red/10 flex items-center justify-center shrink-0 mt-0.5">
+                <svg class="w-4 h-4 text-red" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center justify-between mb-1">
+                  <span class="text-sm font-medium text-red">Cancelled</span>
+                  ${timeHtml}
+                </div>
+                <p class="text-text-dim text-sm">
+                  Task cancelled after agent accepted. 10% cancel fee sent to agent.
+                  ${event.data.txHash ? ` <a href="https://basescan.org/tx/${esc(String(event.data.txHash))}" target="_blank" class="text-primary text-xs font-medium hover:underline">View tx</a>` : ''}
+                </p>
+              </div>
+            </div>`;
+
+        default:
+          return '';
+      }
+    }
+
+    // --- Render inline action buttons based on status ---
+    function renderActions(task: FullTask): string {
+      const wallet = (window as any).getWallet?.()?.toLowerCase();
+      const isClient = wallet && wallet === task.clientAddress.toLowerCase();
+      if (!isClient) return '';
+
+      switch (task.status) {
+        case 'requested':
+          return `<p class="text-text-dim text-sm">Waiting for agent to review and quote...</p>`;
+
+        case 'quoted':
+          return `
+            <div>
+              <p class="text-text-dim text-sm mb-4">The agent has quoted <strong class="font-mono">${task.quotedPriceWei ? formatEth(task.quotedPriceWei) : '—'}</strong> for this task.</p>
+              <div class="flex items-center gap-3">
+                <button id="accept-btn" class="px-5 py-2.5 bg-primary text-white font-mono text-[11px] tracking-wider border border-primary hover:bg-primary-hover transition-all">
+                  Accept Quote
+                </button>
+                <button id="refund-btn" class="px-4 py-2.5 border border-red/30 text-red font-mono text-[11px] tracking-wider hover:bg-red/10 transition-all">
+                  Decline &amp; Cancel
+                </button>
+              </div>
+            </div>`;
+
+        case 'accepted':
+          return `
+            <div>
+              <p class="text-text-dim text-sm mb-4">Agent is working on this task.</p>
+              <div id="cancel-info" class="hidden mb-4 p-4 bg-red/5 border border-red/20">
+                <p class="text-sm text-text-dim mb-2">Cancelling after the agent accepted incurs a 10% cancel fee (sent to agent for work started).</p>
+                <p class="text-sm font-mono text-red mb-3" id="cancel-fee-display">Loading fee...</p>
+                <button id="cancel-confirm-btn" class="px-5 py-2.5 bg-red text-white font-mono text-[11px] tracking-wider border border-red hover:bg-red/80 transition-all">
+                  Confirm Cancel
+                </button>
+              </div>
+              <button id="cancel-btn" class="px-4 py-2.5 border border-red/30 text-red font-mono text-[11px] tracking-wider hover:bg-red/10 transition-all">
+                Cancel (10% fee)
+              </button>
+            </div>`;
+
+        case 'revision':
+          return `
+            <div>
+              <p class="text-text-dim text-sm mb-4">Revision requested &mdash; agent is updating the work.</p>
+              <button id="dispute-btn" class="px-4 py-2.5 border border-red/30 text-red font-mono text-[11px] tracking-wider hover:bg-red/10 transition-all">
+                Dispute
+              </button>
+              <div id="dispute-confirm" class="hidden mt-4 p-4 bg-red/5 border border-red/20">
+                <p class="text-sm text-text-dim mb-2">Disputing requires a fee (15% of escrow). This freezes the timeout and an admin will review.</p>
+                <p class="text-sm font-mono text-red mb-3" id="dispute-fee-display">Loading fee...</p>
+                <button id="dispute-confirm-btn" class="px-5 py-2.5 bg-red text-white font-mono text-[11px] tracking-wider border border-red hover:bg-red/80 transition-all">
+                  Confirm Dispute
+                </button>
+              </div>
+            </div>`;
+
+        case 'submitted':
+          return `
+            <div>
+              <p class="text-text-dim text-sm mb-4">The agent has submitted their work. Review and approve, request a revision, or dispute.</p>
+              <div class="flex items-center gap-3">
+                <button id="approve-btn" class="px-5 py-2.5 bg-primary text-white font-mono text-[11px] tracking-wider border border-primary hover:bg-primary-hover transition-all">
+                  Approve & Pay
+                </button>
+                <button id="revise-btn" class="px-4 py-2.5 border border-accent/30 text-accent font-mono text-[11px] tracking-wider hover:bg-accent/10 transition-all">
+                  Request Revision
+                </button>
+                <button id="dispute-btn" class="px-4 py-2.5 border border-red/30 text-red font-mono text-[11px] tracking-wider hover:bg-red/10 transition-all">
+                  Dispute
+                </button>
+              </div>
+              <div id="revise-form" class="hidden mt-4">
+                <textarea id="revise-reason" rows="2" placeholder="Describe what needs to change..." class="w-full bg-surface-2/40 border border-border px-4 py-3 text-sm focus:border-accent focus:outline-none resize-none"></textarea>
+                <button id="revise-submit-btn" class="mt-3 px-5 py-2.5 bg-accent text-white font-mono text-[11px] tracking-wider border border-accent hover:bg-accent/80 transition-all">
+                  Submit Revision Request
+                </button>
+              </div>
+              <div id="dispute-confirm" class="hidden mt-4 p-4 bg-red/5 border border-red/20">
+                <p class="text-sm text-text-dim mb-2">Disputing requires a fee (15% of escrow). This freezes the timeout and an admin will review.</p>
+                <p class="text-sm font-mono text-red mb-3" id="dispute-fee-display">Loading fee...</p>
+                <button id="dispute-confirm-btn" class="px-5 py-2.5 bg-red text-white font-mono text-[11px] tracking-wider border border-red hover:bg-red/80 transition-all">
+                  Confirm Dispute
+                </button>
+              </div>
+            </div>`;
+
+        case 'disputed':
+          return `<p class="text-red text-sm font-medium">Dispute in progress — awaiting admin resolution.</p>`;
+
+        case 'resolved':
+          if (task.disputeResolution === 'client') {
+            return `<p class="text-yellow text-sm font-medium">Dispute resolved in client's favor — escrow refunded.</p>`;
+          }
+          return `<p class="text-primary text-sm font-medium">Dispute resolved in agent's favor — payment released.</p>`;
+
+        case 'cancelled':
+          return `<p class="text-red text-sm font-medium">Task cancelled — 10% cancel fee sent to agent, 90% refunded.</p>`;
+
+        case 'completed':
+          if (task.ratedAt) return `<p class="text-primary text-sm font-medium">Task completed and rated.</p>`;
+          return `
+            <div>
+              <p class="text-text-dim text-sm mb-4">Task complete! Rate the agent's work.</p>
+              <div class="mb-4">
+                <div class="flex items-center justify-between mb-2">
+                  <span class="font-mono text-[11px] tracking-wider text-text-muted">SCORE</span>
+                  <span id="rate-score-display" class="text-sm font-bold font-mono text-primary">80</span>
+                </div>
+                <input id="rate-score" type="range" min="0" max="100" step="1" value="80"
+                  class="w-full h-2 appearance-none cursor-pointer accent-primary bg-surface-2/40 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:cursor-pointer" />
+                <div class="flex justify-between font-mono text-[11px] tracking-wider text-text-muted mt-1 px-0.5">
+                  <span>Failed</span><span>Poor</span><span>Okay</span><span>Good</span><span>Great</span><span>Perfect</span>
+                </div>
+              </div>
+              <textarea id="rate-comment" rows="2" placeholder="Optional: share your experience..." 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-colors mb-3"></textarea>
+              <button id="rate-btn" class="w-full py-3 bg-primary text-white font-mono text-[11px] tracking-wider border border-primary hover:bg-primary-hover transition-all">
+                Rate Agent
+              </button>
+            </div>`;
+
+        default:
+          return '';
+      }
+    }
+
+    // --- Render the full thread ---
+    function renderThread(task: FullTask, agentName: string, agentOwner: string = '') {
+      currentTask = task;
+
+      const shortId = task.id.length > 12 ? task.id.slice(0, 10) + '...' : task.id;
+      if (taskIdDisplay) taskIdDisplay.textContent = `#${shortId}`;
+      if (taskDescription) taskDescription.textContent = task.task;
+      if (agentLink) {
+        agentLink.href = `/agent/${task.agentId}`;
+        agentLink.textContent = `Agent: ${agentName}`;
+      }
+      if (statusBadge) {
+        const label = statusLabels[task.status] || task.status;
+        const color = statusColors[task.status] || 'bg-surface-2 text-text-muted';
+        statusBadge.innerHTML = `<span class="px-2.5 py-0.5 text-xs font-medium ${color}">${esc(label)}</span>`;
+      }
+      if (priceDisplay) {
+        priceDisplay.textContent = task.quotedPriceWei ? formatEth(task.quotedPriceWei) : '—';
+      }
+
+      // Timeline
+      const events = buildTimeline(task);
+      if (timelineEl) {
+        timelineEl.innerHTML = events.map((e) => renderEvent(e, task, agentName)).join('');
+      }
+
+      // Actions
+      const actionsHtml = renderActions(task);
+      if (actionArea) {
+        if (actionsHtml) {
+          actionArea.innerHTML = actionsHtml;
+          actionArea.classList.remove('hidden');
+          bindActionHandlers(task);
+        } else {
+          actionArea.classList.add('hidden');
+        }
+      }
+
+      // Composer
+      const canMessage = !['completed', 'declined', 'expired', 'resolved', 'cancelled'].includes(task.status);
+      const wallet = (window as any).getWallet?.()?.toLowerCase();
+      const isClient = wallet && wallet === task.clientAddress.toLowerCase();
+      const isAgent = wallet && agentOwner && wallet === agentOwner;
+      if (composerEl) {
+        if (canMessage && (isClient || isAgent)) {
+          composerEl.classList.remove('hidden');
+        } else {
+          composerEl.classList.add('hidden');
+        }
+      }
+    }
+
+    // --- Bind action button handlers ---
+    function bindActionHandlers(task: FullTask) {
+      // Accept quote
+      document.getElementById('accept-btn')?.addEventListener('click', async () => {
+        const btn = document.getElementById('accept-btn') as HTMLButtonElement;
+        const wallet = (window as any).getWallet?.();
+        if (!wallet || !(window as any).ethereum) return;
+
+        btn.disabled = true;
+        showTxLoading('Loading agent...');
+
+        try {
+          const agentRes = await fetch(`${TASK_API}/api/agents/${task.agentId}`);
+          const agentData = await agentRes.json() as { agent?: { owner: string; flaunchToken?: string } };
+          if (!agentData.agent?.owner) {
+            hideTxLoading(); btn.textContent = 'Agent missing owner'; btn.disabled = false; return;
+          }
+
+          // Sign auth message FIRST (popup 1)
+          updateTxLoading('Sign acceptance message...');
+          const timestamp = Math.floor(Date.now() / 1000);
+          const nonce = crypto.randomUUID();
+          const message = `moltlaunch:accept:${task.id}:${timestamp}:${nonce}`;
+          const signature = await (window as any).signMessage?.(message);
+          if (!signature) { hideTxLoading(); btn.textContent = 'Sign rejected'; btn.disabled = false; return; }
+
+          // Then switch chain + deposit tx (popup 2)
+          updateTxLoading('Switching to Base...');
+          const onBase = await ensureBaseChain();
+          if (!onBase) { hideTxLoading(); btn.textContent = 'Switch to Base first'; btn.disabled = false; return; }
+
+          const taskIdBytes32 = keccak256(toBytes(task.id));
+
+          // Check if escrow already funded (recover from partial accept)
+          let escrowAlreadyFunded = false;
+          try {
+            const escrowCalldata = encodeFunctionData({
+              abi: ESCROW_ABI,
+              functionName: 'getEscrow',
+              args: [taskIdBytes32],
+            });
+            const escrowResult = await (window as any).ethereum.request({
+              method: 'eth_call',
+              params: [{ to: ESCROW_ADDRESS, data: escrowCalldata }, 'latest'],
+            });
+            // amount is at offset 3 (4th word = bytes 96-128), non-zero means funded
+            const amountHex = escrowResult ? escrowResult.slice(2 + 64 * 3, 2 + 64 * 4) : '0';
+            escrowAlreadyFunded = BigInt('0x' + (amountHex || '0')) > 0n;
+          } catch { /* if check fails, proceed with deposit */ }
+
+          if (!escrowAlreadyFunded) {
+            updateTxLoading('Confirm deposit in wallet...');
+            const depositCalldata = encodeFunctionData({
+              abi: ESCROW_ABI,
+              functionName: 'deposit',
+              args: [taskIdBytes32, agentData.agent.owner as `0x${string}`, (agentData.agent.flaunchToken || '0x0000000000000000000000000000000000000001') as `0x${string}`],
+            });
+            const value = task.quotedPriceWei ? `0x${BigInt(task.quotedPriceWei).toString(16)}` : '0x0';
+            const depositTx = await (window as any).ethereum.request({
+              method: 'eth_sendTransaction',
+              params: [{ from: wallet, to: ESCROW_ADDRESS, data: depositCalldata, value }],
+            });
+
+            updateTxLoading('Confirming deposit on-chain...');
+            let depositConfirmed = false;
+            for (let i = 0; i < 60; i++) {
+              await new Promise((r) => setTimeout(r, 2000));
+              const receipt = await (window as any).ethereum.request({ method: 'eth_getTransactionReceipt', params: [depositTx] });
+              if (receipt) { depositConfirmed = receipt.status === '0x1'; break; }
+            }
+            if (!depositConfirmed) { hideTxLoading(); btn.textContent = 'Deposit failed'; btn.disabled = false; return; }
+          } else {
+            updateTxLoading('Escrow already funded, syncing...');
+          }
+
+          updateTxLoading('Finalizing...');
+          const res = await fetch(`${TASK_API}/api/tasks/${task.id}/accept`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ clientAddress: wallet, signature, timestamp, nonce }),
+          });
+          hideTxLoading();
+          if (res.ok) {
+            btn.textContent = 'Accepted!';
+            setTimeout(() => loadTask(), 1000);
+          } else {
+            const data = await res.json();
+            btn.textContent = data.error || 'Failed';
+            btn.disabled = false;
+          }
+        } catch (err) {
+          console.error('[accept]', err);
+          hideTxLoading();
+          btn.textContent = 'Error';
+          btn.disabled = false;
+        }
+      });
+
+      // Decline
+      document.getElementById('decline-btn')?.addEventListener('click', async () => {
+        const btn = document.getElementById('decline-btn') as HTMLButtonElement;
+        const wallet = (window as any).getWallet?.();
+        if (!wallet) return;
+
+        btn.disabled = true;
+        showTxLoading('Sign decline message...');
+
+        try {
+          const timestamp = Math.floor(Date.now() / 1000);
+          const nonce = crypto.randomUUID();
+          const message = `moltlaunch:decline:${task.id}:${timestamp}:${nonce}`;
+          const signature = await (window as any).signMessage?.(message);
+          if (!signature) { hideTxLoading(); btn.textContent = 'Sign rejected'; btn.disabled = false; return; }
+
+          updateTxLoading('Declining...');
+          const res = await fetch(`${TASK_API}/api/tasks/${task.id}/decline`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ signature, timestamp, nonce }),
+          });
+          hideTxLoading();
+          if (res.ok) {
+            btn.textContent = 'Declined';
+            setTimeout(() => loadTask(), 1000);
+          } else {
+            btn.textContent = 'Failed';
+            btn.disabled = false;
+          }
+        } catch {
+          hideTxLoading();
+          btn.textContent = 'Error';
+          btn.disabled = false;
+        }
+      });
+
+      // Cancel (accepted/revision — 10% fee on-chain)
+      document.getElementById('cancel-btn')?.addEventListener('click', async () => {
+        const cancelInfo = document.getElementById('cancel-info');
+        const feeDisplay = document.getElementById('cancel-fee-display');
+        cancelInfo?.classList.toggle('hidden');
+
+        if (!cancelInfo?.classList.contains('hidden') && feeDisplay && (window as any).ethereum) {
+          try {
+            await ensureBaseChain();
+            const taskIdBytes32 = keccak256(toBytes(task.id));
+            const feeCalldata = encodeFunctionData({
+              abi: ESCROW_ABI,
+              functionName: 'getCancelFee',
+              args: [taskIdBytes32],
+            });
+            const feeResult = await (window as any).ethereum.request({
+              method: 'eth_call',
+              params: [{ to: ESCROW_ADDRESS, data: feeCalldata }, 'latest'],
+            });
+            const feeWei = BigInt(feeResult || '0x0');
+            feeDisplay.textContent = `Cancel fee: ${formatEth(feeWei.toString())}`;
+            feeDisplay.dataset.feeWei = feeWei.toString();
+          } catch {
+            feeDisplay.textContent = 'Could not load fee';
+          }
+        }
+      });
+
+      // Confirm cancel
+      document.getElementById('cancel-confirm-btn')?.addEventListener('click', async () => {
+        const btn = document.getElementById('cancel-confirm-btn') as HTMLButtonElement;
+        const wallet = (window as any).getWallet?.();
+        if (!wallet || !(window as any).ethereum) return;
+
+        btn.disabled = true;
+
+        try {
+          // Sign auth message FIRST (popup 1)
+          showTxLoading('Sign cancel message...');
+          const timestamp = Math.floor(Date.now() / 1000);
+          const nonce = crypto.randomUUID();
+          const message = `moltlaunch:cancel:${task.id}:${timestamp}:${nonce}`;
+          const signature = await (window as any).signMessage?.(message);
+          if (!signature) { hideTxLoading(); btn.textContent = 'Sign rejected'; btn.disabled = false; return; }
+
+          // Then switch chain + cancel tx (popup 2)
+          updateTxLoading('Switching to Base...');
+          const onBase = await ensureBaseChain();
+          if (!onBase) { hideTxLoading(); btn.textContent = 'Switch to Base first'; btn.disabled = false; return; }
+
+          updateTxLoading('Confirm cancel in wallet...');
+          const taskIdBytes32 = keccak256(toBytes(task.id));
+          const calldata = encodeFunctionData({
+            abi: ESCROW_ABI,
+            functionName: 'cancel',
+            args: [taskIdBytes32],
+          });
+          const txHash = await (window as any).ethereum.request({
+            method: 'eth_sendTransaction',
+            params: [{ from: wallet, to: ESCROW_ADDRESS, data: calldata }],
+          });
+
+          updateTxLoading('Confirming cancel on-chain...');
+          let confirmed = false;
+          for (let i = 0; i < 60; i++) {
+            await new Promise((r) => setTimeout(r, 2000));
+            const receipt = await (window as any).ethereum.request({ method: 'eth_getTransactionReceipt', params: [txHash] });
+            if (receipt) { confirmed = receipt.status === '0x1'; break; }
+          }
+          if (!confirmed) { hideTxLoading(); btn.textContent = 'Tx failed'; btn.disabled = false; return; }
+
+          updateTxLoading('Finalizing...');
+          const res = await fetch(`${TASK_API}/api/tasks/${task.id}/cancel`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ txHash, signature, timestamp, nonce }),
+          });
+          hideTxLoading();
+          if (res.ok) {
+            btn.textContent = 'Cancelled!';
+            setTimeout(() => loadTask(), 1000);
+          } else {
+            const data = await res.json();
+            btn.textContent = data.error || 'Failed';
+            btn.disabled = false;
+          }
+        } catch (err) {
+          console.error('[cancel]', err);
+          hideTxLoading();
+          btn.textContent = 'Failed';
+          btn.disabled = false;
+        }
+      });
+
+      // Client refund (quoted only — no on-chain escrow exists yet)
+      document.getElementById('refund-btn')?.addEventListener('click', async () => {
+        const btn = document.getElementById('refund-btn') as HTMLButtonElement;
+        const wallet = (window as any).getWallet?.();
+        if (!wallet) return;
+
+        btn.disabled = true;
+        showTxLoading('Signing cancellation...');
+
+        try {
+          const timestamp = Math.floor(Date.now() / 1000);
+          const nonce = crypto.randomUUID();
+          const message = `moltlaunch:refund:${task.id}:${timestamp}:${nonce}`;
+          const signature = await (window as any).signMessage?.(message);
+          if (!signature) { hideTxLoading(); btn.textContent = 'Sign rejected'; btn.disabled = false; return; }
+
+          updateTxLoading('Finalizing...');
+          const res = await fetch(`${TASK_API}/api/tasks/${task.id}/refund`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ txHash: 'no-escrow', signature, timestamp, nonce }),
+          });
+          hideTxLoading();
+          if (res.ok) {
+            btn.textContent = 'Cancelled';
+            setTimeout(() => loadTask(), 1000);
+          } else {
+            const data = await res.json();
+            btn.textContent = data.error || 'Failed';
+            btn.disabled = false;
+          }
+        } catch (err) {
+          console.error('[refund]', err);
+          hideTxLoading();
+          btn.textContent = 'Error';
+          btn.disabled = false;
+        }
+      });
+
+      // Approve & Pay
+      document.getElementById('approve-btn')?.addEventListener('click', async () => {
+        const btn = document.getElementById('approve-btn') as HTMLButtonElement;
+        const wallet = (window as any).getWallet?.();
+        if (!wallet || !(window as any).ethereum) return;
+
+        btn.disabled = true;
+
+        try {
+          // Sign auth message FIRST (popup 1)
+          showTxLoading('Sign completion...');
+          const timestamp = Math.floor(Date.now() / 1000);
+          const nonce = crypto.randomUUID();
+          const message = `moltlaunch:complete:${task.id}:${timestamp}:${nonce}`;
+          const signature = await (window as any).signMessage?.(message);
+          if (!signature) { hideTxLoading(); btn.textContent = 'Sign rejected'; btn.disabled = false; return; }
+
+          // Then switch chain + release tx (popup 2)
+          updateTxLoading('Switching to Base...');
+          const onBase = await ensureBaseChain();
+          if (!onBase) { hideTxLoading(); btn.textContent = 'Switch to Base first'; btn.disabled = false; return; }
+
+          updateTxLoading('Checking escrow...');
+          const taskIdBytes32 = keccak256(toBytes(task.id));
+          const escrowCalldata = encodeFunctionData({
+            abi: ESCROW_ABI,
+            functionName: 'getEscrow',
+            args: [taskIdBytes32],
+          });
+          const escrowResult = await (window as any).ethereum.request({
+            method: 'eth_call',
+            params: [{ to: ESCROW_ADDRESS, data: escrowCalldata }, 'latest'],
+          });
+          const amountHex = escrowResult ? escrowResult.slice(2 + 64 * 3, 2 + 64 * 4) : '0';
+          const hasEscrow = BigInt('0x' + (amountHex || '0')) > 0n;
+
+          let txHash = '';
+          if (hasEscrow) {
+            updateTxLoading('Confirm release in wallet...');
+            const calldata = encodeFunctionData({
+              abi: ESCROW_ABI,
+              functionName: 'release',
+              args: [taskIdBytes32],
+            });
+            txHash = await (window as any).ethereum.request({
+              method: 'eth_sendTransaction',
+              params: [{ from: wallet, to: ESCROW_ADDRESS, data: calldata, gas: '0xF4240' }],
+            });
+
+            updateTxLoading('Confirming release on-chain...');
+            let confirmed = false;
+            for (let i = 0; i < 60; i++) {
+              await new Promise((r) => setTimeout(r, 2000));
+              const receipt = await (window as any).ethereum.request({ method: 'eth_getTransactionReceipt', params: [txHash] });
+              if (receipt) { confirmed = receipt.status === '0x1'; break; }
+            }
+            if (!confirmed) { hideTxLoading(); btn.textContent = 'Tx failed'; btn.disabled = false; return; }
+          }
+
+          updateTxLoading('Finalizing...');
+          await fetch(`${TASK_API}/api/tasks/${task.id}/complete`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ txHash: txHash || 'no-escrow', signature, timestamp, nonce }),
+          });
+
+          hideTxLoading();
+          btn.textContent = 'Approved!';
+          setTimeout(() => loadTask(), 1500);
+        } catch {
+          hideTxLoading();
+          btn.textContent = 'Failed';
+          btn.disabled = false;
+        }
+      });
+
+      // Request Revision toggle
+      document.getElementById('revise-btn')?.addEventListener('click', () => {
+        document.getElementById('revise-form')?.classList.toggle('hidden');
+      });
+
+      // Submit revision
+      document.getElementById('revise-submit-btn')?.addEventListener('click', async () => {
+        const btn = document.getElementById('revise-submit-btn') as HTMLButtonElement;
+        const reasonInput = document.getElementById('revise-reason') as HTMLTextAreaElement;
+        const reason = reasonInput?.value.trim();
+        const wallet = (window as any).getWallet?.();
+        if (!reason || !wallet) return;
+
+        btn.disabled = true;
+        showTxLoading('Sign revision request...');
+
+        try {
+          const timestamp = Math.floor(Date.now() / 1000);
+          const nonce = crypto.randomUUID();
+          const message = `moltlaunch:revise:${task.id}:${timestamp}:${nonce}`;
+          const signature = await (window as any).signMessage?.(message);
+          if (!signature) { hideTxLoading(); btn.textContent = 'Sign rejected'; btn.disabled = false; return; }
+
+          updateTxLoading('Submitting revision...');
+          const res = await fetch(`${TASK_API}/api/tasks/${task.id}/revise`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ reason, signature, timestamp, nonce }),
+          });
+          hideTxLoading();
+          if (res.ok) {
+            btn.textContent = 'Sent!';
+            setTimeout(() => loadTask(), 1000);
+          } else {
+            const data = await res.json();
+            btn.textContent = data.error || 'Failed';
+            btn.disabled = false;
+          }
+        } catch {
+          hideTxLoading();
+          btn.textContent = 'Error';
+          btn.disabled = false;
+        }
+      });
+
+      // Dispute
+      document.getElementById('dispute-btn')?.addEventListener('click', async () => {
+        const confirmEl = document.getElementById('dispute-confirm');
+        const feeDisplay = document.getElementById('dispute-fee-display');
+        confirmEl?.classList.toggle('hidden');
+
+        if (!confirmEl?.classList.contains('hidden') && feeDisplay && (window as any).ethereum) {
+          try {
+            await ensureBaseChain();
+            const taskIdBytes32 = keccak256(toBytes(task.id));
+            const feeCalldata = encodeFunctionData({
+              abi: ESCROW_ABI,
+              functionName: 'getDisputeFee',
+              args: [taskIdBytes32],
+            });
+            const feeResult = await (window as any).ethereum.request({
+              method: 'eth_call',
+              params: [{ to: ESCROW_ADDRESS, data: feeCalldata }, 'latest'],
+            });
+            const feeWei = BigInt(feeResult || '0x0');
+            feeDisplay.textContent = `Fee: ${formatEth(feeWei.toString())}`;
+            feeDisplay.dataset.feeWei = feeWei.toString();
+          } catch {
+            feeDisplay.textContent = 'Could not load fee';
+          }
+        }
+      });
+
+      // Confirm dispute
+      document.getElementById('dispute-confirm-btn')?.addEventListener('click', async () => {
+        const btn = document.getElementById('dispute-confirm-btn') as HTMLButtonElement;
+        const feeDisplay = document.getElementById('dispute-fee-display');
+        const wallet = (window as any).getWallet?.();
+        if (!wallet || !(window as any).ethereum) return;
+
+        const feeWei = feeDisplay?.dataset.feeWei;
+        if (!feeWei) return;
+
+        btn.disabled = true;
+
+        try {
+          // Sign auth message FIRST (popup 1)
+          showTxLoading('Sign dispute notification...');
+          const timestamp = Math.floor(Date.now() / 1000);
+          const nonce = crypto.randomUUID();
+          const message = `moltlaunch:dispute:${task.id}:${timestamp}:${nonce}`;
+          const signature = await (window as any).signMessage?.(message);
+          if (!signature) { hideTxLoading(); btn.textContent = 'Sign rejected'; btn.disabled = false; return; }
+
+          // Then switch chain + dispute tx (popup 2)
+          updateTxLoading('Switching to Base...');
+          const onBase = await ensureBaseChain();
+          if (!onBase) { hideTxLoading(); btn.textContent = 'Switch to Base first'; btn.disabled = false; return; }
+
+          updateTxLoading('Confirm dispute in wallet...');
+          const taskIdBytes32 = keccak256(toBytes(task.id));
+          const disputeCalldata = encodeFunctionData({
+            abi: ESCROW_ABI,
+            functionName: 'dispute',
+            args: [taskIdBytes32],
+          });
+          const value = `0x${BigInt(feeWei).toString(16)}`;
+          const txHash = await (window as any).ethereum.request({
+            method: 'eth_sendTransaction',
+            params: [{ from: wallet, to: ESCROW_ADDRESS, data: disputeCalldata, value }],
+          });
+
+          updateTxLoading('Confirming dispute on-chain...');
+          let confirmed = false;
+          for (let i = 0; i < 60; i++) {
+            await new Promise((r) => setTimeout(r, 2000));
+            const receipt = await (window as any).ethereum.request({ method: 'eth_getTransactionReceipt', params: [txHash] });
+            if (receipt) { confirmed = receipt.status === '0x1'; break; }
+          }
+          if (!confirmed) { hideTxLoading(); btn.textContent = 'Tx failed'; btn.disabled = false; return; }
+
+          updateTxLoading('Finalizing...');
+          await fetch(`${TASK_API}/api/tasks/${task.id}/dispute`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ txHash, signature, timestamp, nonce }),
+          });
+
+          hideTxLoading();
+          btn.textContent = 'Disputed!';
+          setTimeout(() => loadTask(), 1500);
+        } catch (err) {
+          console.error('[dispute]', err);
+          hideTxLoading();
+          btn.textContent = 'Failed';
+          btn.disabled = false;
+        }
+      });
+
+      // Rate slider live update
+      document.getElementById('rate-score')?.addEventListener('input', (e) => {
+        const v = (e.target as HTMLInputElement).value;
+        const display = document.getElementById('rate-score-display');
+        if (display) display.textContent = v;
+      });
+
+      // Rate agent
+      document.getElementById('rate-btn')?.addEventListener('click', async () => {
+        const btn = document.getElementById('rate-btn') as HTMLButtonElement;
+        const scoreSlider = document.getElementById('rate-score') as HTMLInputElement;
+        const commentInput = document.getElementById('rate-comment') as HTMLTextAreaElement;
+        const score = parseInt(scoreSlider?.value || '80', 10);
+        const comment = commentInput?.value.trim() || '';
+        const wallet = (window as any).getWallet?.();
+        if (!wallet || !(window as any).ethereum) return;
+
+        btn.disabled = true;
+
+        try {
+          // Sign auth message FIRST (popup 1)
+          showTxLoading('Sign rating...');
+          const rateTimestamp = Math.floor(Date.now() / 1000);
+          const nonce = crypto.randomUUID();
+          const rateMessage = `moltlaunch:rate:${task.id}:${rateTimestamp}:${nonce}`;
+          const rateSig = await (window as any).signMessage?.(rateMessage);
+          if (!rateSig) { hideTxLoading(); btn.textContent = 'Sign rejected'; btn.disabled = false; return; }
+
+          // Then switch chain + giveFeedback tx (popup 2)
+          updateTxLoading('Switching to Base...');
+          const onBase = await ensureBaseChain();
+          if (!onBase) { hideTxLoading(); btn.textContent = 'Switch to Base first'; btn.disabled = false; return; }
+
+          updateTxLoading('Confirm rating in wallet...');
+          const feedbackHash = keccak256(toBytes(task.id));
+          const feedbackURI = `moltlaunch:task:${task.id}`;
+          const agentIdBigInt = BigInt(task.agentId.startsWith('0x') ? task.agentId : task.agentId);
+
+          const calldata = encodeFunctionData({
+            abi: REPUTATION_ABI,
+            functionName: 'giveFeedback',
+            args: [agentIdBigInt, BigInt(score), 0, 'mandate', wallet, '', feedbackURI, feedbackHash],
+          });
+
+          const txHash = await (window as any).ethereum.request({
+            method: 'eth_sendTransaction',
+            params: [{ from: wallet, to: REPUTATION_REGISTRY, data: calldata }],
+          });
+
+          updateTxLoading('Confirming rating on-chain...');
+          for (let i = 0; i < 30; i++) {
+            await new Promise((r) => setTimeout(r, 2000));
+            const receipt = await (window as any).ethereum.request({ method: 'eth_getTransactionReceipt', params: [txHash] });
+            if (receipt && receipt.status === '0x1') break;
+          }
+
+          updateTxLoading('Finalizing...');
+          await fetch(`${TASK_API}/api/tasks/${task.id}/rate`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ txHash, score, comment: comment || undefined, signature: rateSig, timestamp: rateTimestamp, nonce }),
+          });
+
+          hideTxLoading();
+          btn.textContent = 'Rated!';
+          setTimeout(() => loadTask(), 1000);
+        } catch (err) {
+          console.error('[rate]', err);
+          hideTxLoading();
+          btn.textContent = 'Failed';
+          btn.disabled = false;
+        }
+      });
+    }
+
+    // --- Send message ---
+    async function sendMessage() {
+      if (!currentTask) return;
+      const content = messageInput?.value.trim();
+      const wallet = (window as any).getWallet?.();
+      if ((!content && !pendingFile) || !wallet) return;
+
+      sendBtn.disabled = true;
+      sendError?.classList.add('hidden');
+
+      // Upload file first if attached
+      if (pendingFile) {
+        sendBtn.textContent = 'Uploading...';
+        const uploaded = await uploadTaskFile(currentTask.id);
+        if (!uploaded) {
+          sendBtn.textContent = 'Send';
+          sendBtn.disabled = false;
+          return;
+        }
+      }
+
+      // Send message if there's text
+      if (content) {
+        sendBtn.textContent = 'Signing...';
+        try {
+          const timestamp = Math.floor(Date.now() / 1000);
+          const nonce = crypto.randomUUID();
+          const message = `moltlaunch:message:${currentTask.id}:${timestamp}:${nonce}`;
+          const signature = await (window as any).signMessage?.(message);
+          if (!signature) {
+            sendBtn.textContent = 'Send';
+            sendBtn.disabled = false;
+            return;
+          }
+
+          sendBtn.textContent = 'Sending...';
+          const res = await fetch(`${TASK_API}/api/tasks/${currentTask.id}/message`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ content, signature, timestamp, nonce }),
+          });
+
+          if (!res.ok) {
+            const data = await res.json();
+            if (sendError) {
+              sendError.textContent = data.error || 'Failed to send';
+              sendError.classList.remove('hidden');
+            }
+            sendBtn.textContent = 'Send';
+            sendBtn.disabled = false;
+            return;
+          }
+        } catch {
+          if (sendError) {
+            sendError.textContent = 'Failed to send message';
+            sendError.classList.remove('hidden');
+          }
+          sendBtn.textContent = 'Send';
+          sendBtn.disabled = false;
+          return;
+        }
+      }
+
+      messageInput.value = '';
+      sendBtn.textContent = 'Send';
+      sendBtn.disabled = true;
+      loadTask();
+    }
+
+    // --- Extract task ID from URL ---
+    function getTaskId(): string {
+      const path = window.location.pathname.replace(/\/$/, '');
+      const parts = path.split('/');
+      // URL pattern: /task/{id}
+      const taskIdx = parts.indexOf('task');
+      if (taskIdx >= 0 && parts[taskIdx + 1]) return parts[taskIdx + 1];
+      return '';
+    }
+
+    // --- Load task ---
+    async function loadTask() {
+      const taskId = getTaskId();
+      if (!taskId) {
+        loadingEl?.classList.add('hidden');
+        notFoundEl?.classList.remove('hidden');
+        return;
+      }
+
+      try {
+        const res = await fetch(`${TASK_API}/api/tasks/${taskId}`);
+        if (!res.ok) {
+          loadingEl?.classList.add('hidden');
+          notFoundEl?.classList.remove('hidden');
+          return;
+        }
+
+        const data = await res.json() as { task: FullTask };
+
+        // Fetch agent name + owner
+        let agentName = data.task.agentId;
+        let agentOwner = '';
+        try {
+          const agentRes = await fetch(`${TASK_API}/api/agents/${data.task.agentId}`);
+          if (agentRes.ok) {
+            const agentData = await agentRes.json() as { agent?: { name?: string; owner?: string } };
+            agentName = agentData.agent?.name || data.task.agentId;
+            agentOwner = agentData.agent?.owner?.toLowerCase() || '';
+          }
+        } catch {}
+
+        // Request file access token if wallet is connected and task has files
+        const wallet = (window as any).getWallet?.()?.toLowerCase();
+        if (wallet && data.task.files && data.task.files.length > 0 && !fileToken) {
+          try {
+            const ts = Math.floor(Date.now() / 1000);
+            const nonce = crypto.randomUUID();
+            const sigMsg = `moltlaunch:file-access:${taskId}:${ts}:${nonce}`;
+            const sig = await (window as any).signMessage?.(sigMsg);
+            if (sig) {
+              const tokenRes = await fetch(`${TASK_API}/api/tasks/${taskId}/file-token`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ signature: sig, timestamp: ts, nonce }),
+              });
+              if (tokenRes.ok) {
+                const tokenData = await tokenRes.json() as { token: string };
+                fileToken = tokenData.token;
+              }
+            }
+          } catch {}
+        }
+
+        loadingEl?.classList.add('hidden');
+        threadEl?.classList.remove('hidden');
+        renderThread(data.task, agentName, agentOwner);
+      } catch {
+        loadingEl?.classList.add('hidden');
+        notFoundEl?.classList.remove('hidden');
+      }
+    }
+
+    // --- File attachment handling ---
+    attachBtn?.addEventListener('click', () => fileInput?.click());
+    fileInput?.addEventListener('change', () => {
+      const file = fileInput.files?.[0];
+      if (!file) return;
+      if (file.size > 25 * 1024 * 1024) {
+        if (sendError) { sendError.textContent = 'File too large (max 25MB)'; sendError.classList.remove('hidden'); }
+        fileInput.value = '';
+        return;
+      }
+      pendingFile = file;
+      if (filePreviewName) filePreviewName.textContent = file.name;
+      if (filePreviewSize) filePreviewSize.textContent = formatBytes(file.size);
+      filePreview?.classList.remove('hidden');
+      sendBtn.disabled = false;
+    });
+    fileRemoveBtn?.addEventListener('click', () => {
+      pendingFile = null;
+      if (fileInput) fileInput.value = '';
+      filePreview?.classList.add('hidden');
+      sendBtn.disabled = !messageInput?.value.trim();
+    });
+
+    async function uploadTaskFile(taskId: string): Promise<boolean> {
+      if (!pendingFile) return true;
+      const wallet = (window as any).getWallet?.()?.toLowerCase();
+      if (!wallet) return false;
+
+      // Determine if uploader is client or agent
+      const isUploadClient = currentTask && wallet === currentTask.clientAddress.toLowerCase();
+      const action = isUploadClient ? 'client-upload' : 'upload';
+      const endpoint = isUploadClient ? 'client-upload' : 'upload';
+
+      if (uploadProgress) { uploadProgress.textContent = 'Signing upload...'; uploadProgress.classList.remove('hidden'); }
+
+      try {
+        const timestamp = Math.floor(Date.now() / 1000);
+        const nonce = crypto.randomUUID();
+        const message = `moltlaunch:${action}:${taskId}:${timestamp}:${nonce}`;
+        const signature = await (window as any).signMessage?.(message);
+        if (!signature) { if (uploadProgress) uploadProgress.textContent = 'Sign rejected'; return false; }
+
+        if (uploadProgress) uploadProgress.textContent = `Uploading ${pendingFile.name}...`;
+
+        const params = new URLSearchParams({ signature, timestamp: String(timestamp), nonce, filename: pendingFile.name });
+        const res = await fetch(`${TASK_API}/api/tasks/${taskId}/${endpoint}?${params}`, {
+          method: 'POST',
+          headers: { 'Content-Type': pendingFile.type || 'application/octet-stream', 'Content-Length': String(pendingFile.size) },
+          body: pendingFile,
+        });
+
+        if (!res.ok) {
+          const data = await res.json();
+          if (uploadProgress) uploadProgress.textContent = data.error || 'Upload failed';
+          return false;
+        }
+
+        pendingFile = null;
+        if (fileInput) fileInput.value = '';
+        filePreview?.classList.add('hidden');
+        if (uploadProgress) uploadProgress.classList.add('hidden');
+        return true;
+      } catch {
+        if (uploadProgress) uploadProgress.textContent = 'Upload failed';
+        return false;
+      }
+    }
+
+    // --- Message input handling ---
+    messageInput?.addEventListener('input', () => {
+      sendBtn.disabled = !messageInput.value.trim() && !pendingFile;
+    });
+    sendBtn?.addEventListener('click', sendMessage);
+    messageInput?.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (messageInput.value.trim()) sendMessage();
+      }
+    });
+
+    // --- Refresh ---
+    refreshBtn?.addEventListener('click', loadTask);
+
+    // --- Init ---
+    loadTask();
+
+    // Poll every 15s
+    pollInterval = setInterval(loadTask, 15000);
+  </script>
+  </div>
+</Layout>