@swarmclawai/swarmclaw 1.4.0 → 1.4.3

package/src/cli/spec.js

@@ -215,6 +215,7 @@ const COMMAND_GROUPS = {
     commands: {
       list: { description: 'Fetch logs (supports --query lines=200,level=INFO)', method: 'GET', path: '/logs' },
       clear: { description: 'Clear log file', method: 'DELETE', path: '/logs' },
+      report: { description: 'Write a client/browser error entry to the application log', method: 'POST', path: '/logs' },
     },
   },
 

package/src/components/agents/agent-sheet.tsx

@@ -29,6 +29,7 @@ import { getDefaultAgentToolIds } from '@/lib/agent-default-tools'
 import { getEnabledExtensionIds, getEnabledToolIds } from '@/lib/capability-selection'
 import { buildAgentSelectableProviders, resolveAgentSelectableProviderCredentials } from '@/lib/agent-provider-options'
 import { AgentSocialSettings } from '@/features/swarmfeed/agent-social-settings'
+import { AgentMarketplaceSettings } from '@/features/swarmdock/agent-marketplace-settings'
 
 const HB_PRESETS = [1800, 3600, 7200, 21600, 43200] as const
 const FALLBACK_ELEVENLABS_VOICE_ID = 'JBFqnCBsd6RMkjVDRZzb'
@@ -1983,6 +1984,15 @@ export function AgentSheet() {
         </SectionCard>
       )}
 
+      {editing && (
+        <SectionCard
+          title="Marketplace"
+          description="SwarmDock integration — list this agent on the AI marketplace to accept tasks and earn USDC."
+        >
+          <AgentMarketplaceSettings agent={editing} />
+        </SectionCard>
+      )}
+
       {!WORKER_ONLY_PROVIDER_IDS.has(provider) && (
       <AdvancedSettingsSection
         open={showAdvancedSettings}

package/src/components/layout/error-boundary.tsx

@@ -3,6 +3,9 @@
 import { Component } from 'react'
 import type { ReactNode, ErrorInfo } from 'react'
 
+import { reportClientError } from '@/lib/app/report-client-error'
+import { ErrorFallback } from '@/components/layout/error-fallback'
+
 export class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
   constructor(props: { children: ReactNode }) {
     super(props)
@@ -15,41 +18,20 @@ export class ErrorBoundary extends Component<{ children: ReactNode }, { hasError
   }
 
   componentDidCatch(error: Error, info: ErrorInfo) {
-    console.error('ErrorBoundary caught:', error, info)
+    reportClientError({
+      source: 'error-boundary',
+      error,
+      componentStack: info.componentStack,
+    })
   }
 
   render() {
     if (this.state.hasError) {
       return (
-        <div className="flex-1 flex flex-col items-center justify-center px-8 bg-bg">
-          <div className="text-center max-w-[400px]">
-            <div className="w-14 h-14 rounded-[16px] bg-red-500/10 border border-red-500/20 flex items-center justify-center mx-auto mb-5">
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-red-400">
-                <circle cx="12" cy="12" r="10" />
-                <line x1="12" y1="8" x2="12" y2="12" />
-                <line x1="12" y1="16" x2="12.01" y2="16" />
-              </svg>
-            </div>
-            <h2 className="font-display text-[22px] font-700 text-text mb-2 tracking-[-0.02em]">
-              Something went wrong
-            </h2>
-            <p className="text-[14px] text-text-3 mb-6">
-              An unexpected error occurred. Try reloading the page.
-            </p>
-            <button
-              onClick={() => window.location.reload()}
-              className="inline-flex items-center gap-2 px-6 py-3 rounded-[12px] border-none bg-accent-bright text-white text-[14px] font-600 cursor-pointer
-                hover:brightness-110 active:scale-[0.97] transition-all shadow-[0_4px_16px_rgba(99,102,241,0.2)]"
-              style={{ fontFamily: 'inherit' }}
-            >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
-                <polyline points="23 4 23 10 17 10" />
-                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
-              </svg>
-              Reload
-            </button>
-          </div>
-        </div>
+        <ErrorFallback
+          message="An unexpected dashboard error occurred. Reload the page to recover."
+          onPrimaryAction={() => window.location.reload()}
+        />
       )
     }
 

package/src/components/layout/error-fallback.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+type ErrorFallbackProps = {
+  title?: string
+  message?: string
+  primaryLabel?: string
+  onPrimaryAction?: () => void
+  secondaryLabel?: string
+  onSecondaryAction?: () => void
+}
+
+export function ErrorFallback({
+  title = 'Something went wrong',
+  message = 'An unexpected error occurred. Try again or reload the page.',
+  primaryLabel = 'Reload',
+  onPrimaryAction,
+  secondaryLabel,
+  onSecondaryAction,
+}: ErrorFallbackProps) {
+  return (
+    <div className="flex min-h-[50vh] flex-1 flex-col items-center justify-center bg-bg px-8">
+      <div className="max-w-[420px] text-center">
+        <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-[16px] border border-red-500/20 bg-red-500/10">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-red-400">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+        </div>
+        <h2 className="mb-2 font-display text-[22px] font-700 tracking-[-0.02em] text-text">
+          {title}
+        </h2>
+        <p className="mb-6 text-[14px] text-text-3">
+          {message}
+        </p>
+        <div className="flex flex-wrap items-center justify-center gap-3">
+          <button
+            onClick={onPrimaryAction}
+            className="inline-flex cursor-pointer items-center gap-2 rounded-[12px] border-none bg-accent-bright px-6 py-3 text-[14px] font-600 text-white shadow-[0_4px_16px_rgba(99,102,241,0.2)] transition-all hover:brightness-110 active:scale-[0.97]"
+            style={{ fontFamily: 'inherit' }}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+              <polyline points="23 4 23 10 17 10" />
+              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+            </svg>
+            {primaryLabel}
+          </button>
+          {secondaryLabel && onSecondaryAction ? (
+            <button
+              onClick={onSecondaryAction}
+              className="inline-flex cursor-pointer items-center rounded-[12px] border border-border bg-transparent px-5 py-3 text-[14px] font-600 text-text transition-colors hover:bg-panel/60"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {secondaryLabel}
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/layout/sidebar-rail.tsx

@@ -267,6 +267,11 @@ export function SidebarRail({
                 <path d="M4 11a9 9 0 0 1 9 9" /><path d="M4 4a16 16 0 0 1 16 16" /><circle cx="5" cy="19" r="1" />
               </svg>
             </NavItem>
+            <NavItem view="marketplace" label="Marketplace" expanded={railExpanded} isActive={isNavActive('marketplace')} onClick={() => handleNavClick('marketplace')}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" /><line x1="3" x2="21" y1="6" y2="6" /><path d="M16 10a4 4 0 0 1-8 0" />
+              </svg>
+            </NavItem>
           </div>
 
           <div className={`flex flex-col gap-0.5 ${railExpanded ? '' : 'items-center'}`}>

package/src/features/swarmdock/agent-marketplace-settings.tsx

@@ -0,0 +1,303 @@
+'use client'
+
+import { useState, useCallback, useEffect, useMemo } from 'react'
+import { updateAgent } from '@/lib/agents'
+import { toast } from 'sonner'
+import { HintTip } from '@/components/shared/hint-tip'
+import { AdvancedSettingsSection } from '@/components/shared/advanced-settings-section'
+import { useAppStore } from '@/stores/use-app-store'
+import type { Agent, SwarmDockMarketplaceConfig } from '@/types'
+
+const DEFAULT_MARKETPLACE: SwarmDockMarketplaceConfig = {
+  enabled: false,
+  autoDiscover: false,
+  maxBudgetUsdc: '5000000',
+  autoBid: false,
+  autoBidMaxPrice: '1000000',
+  taskNotifications: true,
+  preferredCategories: [],
+}
+
+export function AgentMarketplaceSettings({ agent, onUpdate }: {
+  agent: Agent
+  onUpdate?: (agent: Agent) => void
+}) {
+  const [enabled, setEnabled] = useState(agent.swarmdockEnabled || false)
+  const [description, setDescription] = useState(agent.swarmdockDescription || '')
+  const [skills, setSkills] = useState<string[]>(agent.swarmdockSkills || [])
+  const [walletId, setWalletId] = useState<string | null>(agent.swarmdockWalletId || null)
+  const [marketplace, setMarketplace] = useState<SwarmDockMarketplaceConfig>(agent.swarmdockMarketplace || DEFAULT_MARKETPLACE)
+  const [showAdvanced, setShowAdvanced] = useState(false)
+  const [skillInput, setSkillInput] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  const wallets = useAppStore((s) => s.wallets)
+  const loadWallets = useAppStore((s) => s.loadWallets)
+
+  useEffect(() => {
+    loadWallets()
+  }, [loadWallets])
+
+  const agentWallets = useMemo(() =>
+    Object.values(wallets).filter((w) => w.agentId === agent.id),
+  [wallets, agent.id])
+
+  const handleSave = useCallback(async () => {
+    setSaving(true)
+    try {
+      const updated = await updateAgent(agent.id, {
+        swarmdockEnabled: enabled,
+        swarmdockDescription: description.trim() || null,
+        swarmdockSkills: skills,
+        swarmdockWalletId: walletId,
+        swarmdockListedAt: enabled && !agent.swarmdockListedAt ? Date.now() : agent.swarmdockListedAt,
+        swarmdockMarketplace: marketplace.enabled ? marketplace : null,
+      })
+      toast.success('Marketplace settings saved')
+      onUpdate?.(updated)
+    } catch {
+      toast.error('Failed to save marketplace settings')
+    } finally {
+      setSaving(false)
+    }
+  }, [agent.id, agent.swarmdockListedAt, enabled, description, skills, walletId, marketplace, onUpdate])
+
+  const addSkill = useCallback(() => {
+    const trimmed = skillInput.trim().toLowerCase().replace(/\s+/g, '-')
+    if (trimmed && !skills.includes(trimmed)) {
+      setSkills((prev) => [...prev, trimmed])
+    }
+    setSkillInput('')
+  }, [skillInput, skills])
+
+  const removeSkill = useCallback((skill: string) => {
+    setSkills((prev) => prev.filter((s) => s !== skill))
+  }, [])
+
+  const truncateAddr = (addr: string) =>
+    addr.length > 12 ? `${addr.slice(0, 6)}...${addr.slice(-4)}` : addr
+
+  return (
+    <div className="space-y-5">
+      {/* Enable/Disable toggle */}
+      <div className="flex items-center justify-between gap-4 rounded-[14px] border border-white/[0.06] bg-white/[0.02] px-4 py-4">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <p className="text-[14px] font-600 text-text">SwarmDock</p>
+            <HintTip text="Enable this agent to list on the SwarmDock AI marketplace" />
+          </div>
+          <p className="mt-1 text-[12px] leading-[1.6] text-text-3/75">
+            List this agent on the marketplace to accept tasks and earn USDC.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setEnabled((c) => !c)}
+          className={`relative h-6 w-11 shrink-0 rounded-full border-none transition-colors duration-200 ${enabled ? 'bg-accent-bright' : 'bg-white/[0.12]'}`}
+          aria-pressed={enabled}
+        >
+          <span className={`absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200 ${enabled ? 'translate-x-5' : 'translate-x-0'}`} />
+        </button>
+      </div>
+
+      {enabled && (
+        <>
+          {/* Description */}
+          <div>
+            <label className="flex items-center gap-2 text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+              Marketplace Description <HintTip text="A short description shown on the agent's marketplace profile" />
+            </label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Describe what this agent specializes in..."
+              className="w-full min-h-[80px] px-4 py-3 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[14px] outline-none transition-all placeholder:text-text-3/50 focus-glow resize-y"
+              style={{ fontFamily: 'inherit' }}
+              maxLength={500}
+            />
+          </div>
+
+          {/* Skills */}
+          <div>
+            <label className="flex items-center gap-2 text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+              Skills <HintTip text="Skill tags for task matching on the marketplace" />
+            </label>
+            {skills.length > 0 && (
+              <div className="flex flex-wrap gap-2 mb-2">
+                {skills.map((skill) => (
+                  <button
+                    key={skill}
+                    onClick={() => removeSkill(skill)}
+                    className="px-3 py-1.5 rounded-[10px] border border-accent-bright/40 bg-accent-bright/10 text-accent-bright text-[12px] font-500 transition-all cursor-pointer bg-transparent hover:bg-red-500/10 hover:border-red-500/40 hover:text-red-400"
+                  >
+                    {skill} &times;
+                  </button>
+                ))}
+              </div>
+            )}
+            <div className="flex gap-2">
+              <input
+                value={skillInput}
+                onChange={(e) => setSkillInput(e.target.value)}
+                onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addSkill() } }}
+                placeholder="e.g. data-analysis, web-design"
+                className="flex-1 px-4 py-2.5 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[14px] outline-none transition-all placeholder:text-text-3/50 focus-glow"
+                style={{ fontFamily: 'inherit' }}
+              />
+              <button
+                type="button"
+                onClick={addSkill}
+                disabled={!skillInput.trim()}
+                className="px-4 py-2.5 rounded-[12px] border border-white/[0.08] bg-white/[0.04] text-text-2 text-[13px] font-500 transition-all hover:bg-white/[0.08] disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer"
+              >
+                Add
+              </button>
+            </div>
+          </div>
+
+          {/* Wallet picker */}
+          <div>
+            <label className="flex items-center gap-2 text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+              Payout Wallet <HintTip text="Base L2 wallet for receiving USDC payments" />
+            </label>
+            {agentWallets.length > 0 ? (
+              <select
+                value={walletId || ''}
+                onChange={(e) => setWalletId(e.target.value || null)}
+                className="w-full px-4 py-3 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[14px] outline-none cursor-pointer"
+                style={{ fontFamily: 'inherit' }}
+              >
+                <option value="">No wallet selected</option>
+                {agentWallets.map((w) => (
+                  <option key={w.id} value={w.id}>
+                    {w.label ? `${w.label} (${truncateAddr(w.walletAddress)})` : truncateAddr(w.walletAddress)}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <p className="text-[13px] text-text-3/75">
+                No wallets linked to this agent. Add a wallet in the Wallets section first.
+              </p>
+            )}
+          </div>
+
+          {/* Advanced: Marketplace config */}
+          <AdvancedSettingsSection
+            open={showAdvanced}
+            onToggle={() => setShowAdvanced((c) => !c)}
+            summary={marketplace.enabled ? 'Active' : undefined}
+            badges={marketplace.enabled ? [
+              ...(marketplace.autoDiscover ? ['auto-discover'] : []),
+              ...(marketplace.autoBid ? ['auto-bid'] : []),
+            ] : []}
+          >
+            <div className="space-y-4">
+              <div className="flex items-center justify-between gap-4">
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2">
+                    <p className="text-[13px] font-600 text-text">Marketplace Automation</p>
+                    <HintTip text="Enable automated task discovery and bidding on the marketplace" />
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setMarketplace((m) => ({ ...m, enabled: !m.enabled }))}
+                  className={`relative h-6 w-11 shrink-0 rounded-full border-none transition-colors duration-200 ${marketplace.enabled ? 'bg-accent-bright' : 'bg-white/[0.12]'}`}
+                  aria-pressed={marketplace.enabled}
+                >
+                  <span className={`absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200 ${marketplace.enabled ? 'translate-x-5' : 'translate-x-0'}`} />
+                </button>
+              </div>
+
+              {marketplace.enabled && (
+                <>
+                  <label className="flex items-center gap-3 cursor-pointer">
+                    <div
+                      onClick={() => setMarketplace((m) => ({ ...m, autoDiscover: !m.autoDiscover }))}
+                      className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0 ${marketplace.autoDiscover ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
+                    >
+                      <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200 ${marketplace.autoDiscover ? 'left-[22px]' : 'left-0.5'}`} />
+                    </div>
+                    <span className="flex items-center gap-2 text-[13px] text-text-2">
+                      Auto-discover <HintTip text="Automatically scan for matching tasks" />
+                    </span>
+                  </label>
+
+                  <label className="flex items-center gap-3 cursor-pointer">
+                    <div
+                      onClick={() => setMarketplace((m) => ({ ...m, autoBid: !m.autoBid }))}
+                      className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0 ${marketplace.autoBid ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
+                    >
+                      <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200 ${marketplace.autoBid ? 'left-[22px]' : 'left-0.5'}`} />
+                    </div>
+                    <span className="flex items-center gap-2 text-[13px] text-text-2">
+                      Auto-bid <HintTip text="Automatically bid on matching tasks" />
+                    </span>
+                  </label>
+
+                  <label className="flex items-center gap-3 cursor-pointer">
+                    <div
+                      onClick={() => setMarketplace((m) => ({ ...m, taskNotifications: !m.taskNotifications }))}
+                      className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0 ${marketplace.taskNotifications ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
+                    >
+                      <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200 ${marketplace.taskNotifications ? 'left-[22px]' : 'left-0.5'}`} />
+                    </div>
+                    <span className="flex items-center gap-2 text-[13px] text-text-2">
+                      Task notifications <HintTip text="Show notifications for new matching tasks" />
+                    </span>
+                  </label>
+
+                  <div>
+                    <label className="flex items-center gap-2 text-[12px] font-600 text-text-2 mb-1.5">
+                      Max budget (USDC) <HintTip text="Maximum budget cap per task. 1000000 = $1.00" />
+                    </label>
+                    <input
+                      value={marketplace.maxBudgetUsdc}
+                      onChange={(e) => setMarketplace((m) => ({ ...m, maxBudgetUsdc: e.target.value.replace(/[^0-9]/g, '') }))}
+                      placeholder="5000000"
+                      className="w-full px-4 py-3 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[14px] outline-none transition-all placeholder:text-text-3/50 focus-glow"
+                      style={{ fontFamily: 'inherit' }}
+                    />
+                    <p className="mt-1 text-[11px] text-text-3/60">
+                      = ${(parseInt(marketplace.maxBudgetUsdc || '0', 10) / 1_000_000).toFixed(2)} USDC
+                    </p>
+                  </div>
+
+                  {marketplace.autoBid && (
+                    <div>
+                      <label className="flex items-center gap-2 text-[12px] font-600 text-text-2 mb-1.5">
+                        Auto-bid max price (USDC) <HintTip text="Maximum amount to auto-bid per task. 1000000 = $1.00" />
+                      </label>
+                      <input
+                        value={marketplace.autoBidMaxPrice}
+                        onChange={(e) => setMarketplace((m) => ({ ...m, autoBidMaxPrice: e.target.value.replace(/[^0-9]/g, '') }))}
+                        placeholder="1000000"
+                        className="w-full px-4 py-3 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[14px] outline-none transition-all placeholder:text-text-3/50 focus-glow"
+                        style={{ fontFamily: 'inherit' }}
+                      />
+                      <p className="mt-1 text-[11px] text-text-3/60">
+                        = ${(parseInt(marketplace.autoBidMaxPrice || '0', 10) / 1_000_000).toFixed(2)} USDC
+                      </p>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </AdvancedSettingsSection>
+        </>
+      )}
+
+      {/* Save button */}
+      <div className="flex justify-end pt-2">
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="px-6 py-2.5 rounded-[12px] bg-accent-bright text-white text-[14px] font-600 transition-all
+            hover:bg-accent-bright/90 disabled:opacity-40 disabled:cursor-not-allowed border-none cursor-pointer"
+        >
+          {saving ? 'Saving...' : 'Save Marketplace Settings'}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/features/swarmdock/marketplace-page.tsx

@@ -0,0 +1,189 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { MainContent } from '@/components/layout/main-content'
+import { PageLoader } from '@/components/ui/page-loader'
+
+interface MarketplaceTask {
+  id: string
+  title: string
+  description: string
+  status: string
+  budgetMin: string
+  budgetMax: string
+  skillRequirements: string[]
+  bidCount: number
+  createdAt: string
+}
+
+interface MarketplaceAgent {
+  id: string
+  displayName: string
+  description: string | null
+  framework: string | null
+  trustLevel: number
+  status: string
+  createdAt: string
+}
+
+type Tab = 'tasks' | 'agents'
+
+// Proxy through SwarmClaw API to avoid CORS
+const API_PREFIX = '/api/swarmdock'
+
+function formatUsdc(microUnits: string): string {
+  const dollars = Number(microUnits) / 1_000_000
+  return `$${dollars.toFixed(2)}`
+}
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime()
+  const mins = Math.floor(diff / 60000)
+  if (mins < 60) return `${mins}m ago`
+  const hrs = Math.floor(mins / 60)
+  if (hrs < 24) return `${hrs}h ago`
+  const days = Math.floor(hrs / 24)
+  return `${days}d ago`
+}
+
+export function MarketplacePage() {
+  const [tab, setTab] = useState<Tab>('tasks')
+  const [tasks, setTasks] = useState<MarketplaceTask[]>([])
+  const [agents, setAgents] = useState<MarketplaceAgent[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const loadData = useCallback(async (activeTab: Tab) => {
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await fetch(`${API_PREFIX}?type=${activeTab}&limit=50`)
+      if (!res.ok) throw new Error(`API error ${res.status}`)
+      const data = await res.json()
+      if (activeTab === 'tasks') {
+        setTasks(data.tasks || data)
+      } else {
+        setAgents(data.agents || data)
+      }
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    void loadData(tab)
+  }, [tab, loadData])
+
+  return (
+    <MainContent>
+      <div className="flex-1 overflow-y-auto overscroll-contain">
+        <div className="mx-auto max-w-4xl px-4 sm:px-6 py-8">
+          <div className="mb-6">
+            <h1 className="font-display text-[22px] font-700 tracking-[-0.02em] text-text">Marketplace</h1>
+            <p className="mt-1 text-[13px] text-text-3/75">Browse the SwarmDock agent marketplace</p>
+          </div>
+
+          {/* Tab bar */}
+          <div className="flex gap-1 mb-6 rounded-[14px] border border-white/[0.06] bg-surface/50 p-1">
+            {(['tasks', 'agents'] as Tab[]).map((t) => (
+              <button
+                key={t}
+                onClick={() => setTab(t)}
+                className={`flex-1 px-4 py-2.5 rounded-[10px] text-[13px] font-600 transition-all border-none cursor-pointer
+                  ${tab === t
+                    ? 'bg-accent-bright/15 text-accent-bright'
+                    : 'bg-transparent text-text-3 hover:text-text hover:bg-white/[0.04]'
+                  }`}
+              >
+                {t === 'tasks' ? 'Tasks' : 'Agents'}
+              </button>
+            ))}
+          </div>
+
+          {/* Content */}
+          {loading ? (
+            <PageLoader />
+          ) : error ? (
+            <div className="rounded-[14px] border border-white/[0.06] bg-surface/50 p-8 text-center">
+              <p className="text-[14px] text-text-3/75 mb-3">{error}</p>
+              <button
+                onClick={() => loadData(tab)}
+                className="px-4 py-2 rounded-[10px] border border-white/[0.08] bg-white/[0.04] text-text-2 text-[13px] font-500 cursor-pointer hover:bg-white/[0.08] transition-all"
+              >
+                Retry
+              </button>
+            </div>
+          ) : tab === 'tasks' ? (
+            <div className="space-y-3">
+              {tasks.length === 0 ? (
+                <div className="rounded-[14px] border border-white/[0.06] bg-surface/50 p-8 text-center">
+                  <p className="text-[14px] font-600 text-text mb-1">No tasks yet</p>
+                  <p className="text-[13px] text-text-3/75">Tasks will appear here when posted on SwarmDock.</p>
+                </div>
+              ) : (
+                tasks.map((task) => (
+                  <div key={task.id} className="rounded-[14px] border border-white/[0.06] bg-surface/50 p-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <h3 className="text-[14px] font-600 text-text truncate">{task.title}</h3>
+                          <span className={`px-2 py-0.5 rounded-full text-[11px] font-600 shrink-0
+                            ${task.status === 'open' ? 'bg-green-500/15 text-green-400' :
+                              task.status === 'bidding' ? 'bg-amber-500/15 text-amber-400' :
+                              task.status === 'completed' ? 'bg-white/[0.08] text-text-3' :
+                              'bg-accent-bright/15 text-accent-bright'}`}>
+                            {task.status}
+                          </span>
+                        </div>
+                        <p className="text-[12px] text-text-3/75 line-clamp-2 mb-2">{task.description}</p>
+                        <div className="flex items-center gap-3 text-[11px] text-text-3/60">
+                          <span>{formatUsdc(task.budgetMin)}–{formatUsdc(task.budgetMax)}</span>
+                          <span>{task.bidCount} bid{task.bidCount !== 1 ? 's' : ''}</span>
+                          <span>{task.skillRequirements.join(', ')}</span>
+                          <span>{timeAgo(task.createdAt)}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {agents.length === 0 ? (
+                <div className="rounded-[14px] border border-white/[0.06] bg-surface/50 p-8 text-center">
+                  <p className="text-[14px] font-600 text-text mb-1">No agents registered</p>
+                  <p className="text-[13px] text-text-3/75">Agents will appear here when registered on SwarmDock.</p>
+                </div>
+              ) : (
+                agents.map((agent) => (
+                  <div key={agent.id} className="rounded-[14px] border border-white/[0.06] bg-surface/50 p-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <h3 className="text-[14px] font-600 text-text">{agent.displayName}</h3>
+                          {agent.framework && (
+                            <span className="px-2 py-0.5 rounded-full text-[11px] font-500 bg-white/[0.06] text-text-3">
+                              {agent.framework}
+                            </span>
+                          )}
+                          <span className="px-2 py-0.5 rounded-full text-[11px] font-600 bg-accent-bright/15 text-accent-bright">
+                            L{agent.trustLevel}
+                          </span>
+                        </div>
+                        <p className="text-[12px] text-text-3/75">{agent.description || 'No description'}</p>
+                        <p className="text-[11px] text-text-3/50 mt-1">{timeAgo(agent.createdAt)}</p>
+                      </div>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </MainContent>
+  )
+}