From deb1246cab3b479c409993b2568667312b5c8a41 Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Sat, 4 Apr 2026 23:48:58 +0800
Subject: [PATCH 01/19] feat(widget): add FNDRY token price widget component

Bounty: T2 FNDRY Price Widget - 400K FNDRY
- Real-time price via DexScreener API
- 24h change with up/down indicator
- Sparkline chart with Recharts
- Market cap + liquidity stats
- Auto-refresh every 60s
---
 .../src/components/home/FNDRYPriceWidget.tsx  | 121 ++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 frontend/src/components/home/FNDRYPriceWidget.tsx

diff --git a/frontend/src/components/home/FNDRYPriceWidget.tsx b/frontend/src/components/home/FNDRYPriceWidget.tsx
new file mode 100644
index 00000000..ccf7432c
--- /dev/null
+++ b/frontend/src/components/home/FNDRYPriceWidget.tsx
@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react';
+import { LineChart, Line, ResponsiveContainer } from 'recharts';
+
+const TOKEN_MINT = 'C2TvY8E8B75EF2UP8cTpTp3EDUjTgjWmpaGnT74VBAGS';
+const API_URL = 'https://api.dexscreener.com/v1/token/' + TOKEN_MINT;
+
+interface SparklinePoint { price: string; timestamp: number; }
+
+interface TokenInfo {
+  price: number;
+  priceChange24h: number;
+  volume24h: number;
+  marketCap: number;
+  liquidity: number;
+  sparkline: SparklinePoint[];
+}
+
+const EMPTY: TokenInfo = { price: 0, priceChange24h: 0, volume24h: 0, marketCap: 0, liquidity: 0, sparkline: [] };
+
+function fmt(price: number): string {
+  if (price >= 1) return '$' + price.toFixed(2);
+  if (price >= 0.01) return '$' + price.toFixed(4);
+  return '$' + price.toFixed(8);
+}
+
+function fmtNum(n: number): string {
+  if (n >= 1e9) return '$' + (n/1e9).toFixed(1) + 'B';
+  if (n >= 1e6) return '$' + (n/1e6).toFixed(1) + 'M';
+  if (n >= 1e3) return '$' + (n/1e3).toFixed(1) + 'K';
+  return '$' + n.toFixed(0);
+}
+
+export function FNDRYPriceWidget({ className = '' }: { className?: string }) {
+  const [info, setInfo] = useState<TokenInfo>(EMPTY);
+  const [loading, setLoading] = useState(true);
+  const [err, setErr] = useState<string | null>(null);
+  const [updated, setUpdated] = useState<Date | null>(null);
+
+  const load = async () => {
+    try {
+      const res = await fetch(API_URL);
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      const json = await res.json();
+      const pairs: any[] = Array.isArray(json) ? json : (json?.data ?? []);
+      const pair = pairs[0];
+      if (!pair) { setErr('No trading data'); setLoading(false); return; }
+
+      const price = parseFloat(pair.priceUsd ?? '0');
+      const change = parseFloat(pair.priceChange?.h24 ?? '0');
+      const vol = parseFloat(pair.volume?.h24 ?? '0');
+      const liq = parseFloat(pair.liquidity?.usd ?? '0');
+      const cap = parseFloat(pair.marketCap ?? '0');
+
+      let sparkline: SparklinePoint[] = [];
+      if (pair.txs?.h24?.length) {
+        sparkline = pair.txs.h24.slice(-20).map((tx: any) => ({
+          price: tx.priceUsd ?? '0',
+          timestamp: tx.blockTimestamp ?? Date.now(),
+        }));
+      }
+
+      setInfo({ price, priceChange24h: change, volume24h: vol, marketCap: cap, liquidity: liq, sparkline });
+      setUpdated(new Date());
+      setErr(null);
+    } catch(e: any) {
+      setErr(e.message ?? 'fetch failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { load(); const t = setInterval(load, 60000); return () => clearInterval(t); }, []);
+
+  if (loading) return (
+    <div className={\`bg-gradient-to-br from-purple-900/50 to-blue-900/50 rounded-xl p-4 border border-purple-500/20 \${className}\`}>
+      <div className="animate-pulse space-y-3">
+        <div className="h-4 bg-purple-500/20 rounded w-1/2" /><div className="h-8 bg-purple-500/20 rounded w-3/4" /><div className="h-3 bg-purple-500/20 rounded w-1/3" />
+      </div>
+    </div>
+  );
+
+  if (err) return (
+    <div className={\`bg-gray-900/50 rounded-xl p-4 border border-gray-600/20 \${className}\`}>
+      <p className="text-gray-400 text-sm">Price unavailable</p>
+    </div>
+  );
+
+  const up = info.priceChange24h >= 0;
+  const color = up ? 'text-green-400' : 'text-red-400';
+
+  return (
+    <div className={\`bg-gradient-to-br from-purple-900/50 to-blue-900/50 rounded-xl p-4 border border-purple-500/20 \${className}\`}>
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <div className="w-6 h-6 rounded-full bg-purple-500/30 flex items-center justify-center text-xs font-bold">$</div>
+          <span className="text-white font-semibold text-sm">FNDRY</span>
+        </div>
+        <span className="text-gray-500 text-xs">{updated ? updated.toLocaleTimeString() : ''}</span>
+      </div>
+      <div className="mb-2"><span className="text-white text-2xl font-bold">{fmt(info.price)}</span></div>
+      <div className={\`flex items-center gap-1 mb-3 \${color}\`}>
+        <span>{up ? '↑' : '↓'}</span>
+        <span className="font-semibold">{Math.abs(info.priceChange24h).toFixed(2)}%</span>
+        <span className="text-xs text-gray-400 ml-1">24h</span>
+      </div>
+      {info.sparkline.length > 1 && (
+        <div className="h-12 mb-3">
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart data={info.sparkline}>
+              <Line type="monotone" dataKey="price" stroke={up ? '#4ade80' : '#f87171'} strokeWidth={1.5} dot={false} />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+      <div className="grid grid-cols-2 gap-2 text-xs">
+        <div><span className="text-gray-500">Market Cap</span><div className="text-gray-300 font-medium">{fmtNum(info.marketCap)}</div></div>
+        <div><span className="text-gray-500">Liquidity</span><div className="text-gray-300 font-medium">{fmtNum(info.liquidity)}</div></div>
+      </div>
+    </div>
+  );
+}

From 137c61b970d92aa94b4ea5bcbe0bda4bf5dc7d23 Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Sat, 4 Apr 2026 23:48:59 +0800
Subject: [PATCH 02/19] feat(hooks): add useFNDRYPrice hook

Bounty: T2 FNDRY Price Widget - 400K FNDRY
---
 frontend/src/hooks/useFNDRYPrice.ts | 41 +++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 frontend/src/hooks/useFNDRYPrice.ts

diff --git a/frontend/src/hooks/useFNDRYPrice.ts b/frontend/src/hooks/useFNDRYPrice.ts
new file mode 100644
index 00000000..47b3cbe8
--- /dev/null
+++ b/frontend/src/hooks/useFNDRYPrice.ts
@@ -0,0 +1,41 @@
+import { useState, useEffect, useCallback } from 'react';
+
+const MINT = 'C2TvY8E8B75EF2UP8cTpTp3EDUjTgjWmpaGnT74VBAGS';
+const URL = 'https://api.dexscreener.com/v1/token/' + MINT;
+
+export interface FNDRYData {
+  price: number;
+  priceChange24h: number;
+  volume24h: number;
+  liquidity: number;
+  marketCap: number;
+}
+
+export function useFNDRYPrice() {
+  const [data, setData] = useState<FNDRYData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetch_ = useCallback(async () => {
+    try {
+      const res = await fetch(URL);
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      const json = await res.json();
+      const pairs: any[] = Array.isArray(json) ? json : (json?.data ?? []);
+      const pair = pairs[0];
+      if (!pair) { setError('No data'); return; }
+      setData({
+        price: parseFloat(pair.priceUsd ?? '0'),
+        priceChange24h: parseFloat(pair.priceChange?.h24 ?? '0'),
+        volume24h: parseFloat(pair.volume?.h24 ?? '0'),
+        liquidity: parseFloat(pair.liquidity?.usd ?? '0'),
+        marketCap: parseFloat(pair.marketCap ?? '0'),
+      });
+      setError(null);
+    } catch(e: any) { setError(e.message); }
+    finally { setLoading(false); }
+  }, []);
+
+  useEffect(() => { fetch_(); const t = setInterval(fetch_, 60000); return () => clearInterval(t); }, [fetch_]);
+  return { data, loading, error, refetch: fetch_ };
+}

From 7362b602ae89e76968bfb7f1bb37aa8f25cc162a Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Sat, 4 Apr 2026 23:49:00 +0800
Subject: [PATCH 03/19] feat: export FNDRYPriceWidget

---
 frontend/src/components/home/index.ts | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 frontend/src/components/home/index.ts

diff --git a/frontend/src/components/home/index.ts b/frontend/src/components/home/index.ts
new file mode 100644
index 00000000..5ab4b2ff
--- /dev/null
+++ b/frontend/src/components/home/index.ts
@@ -0,0 +1,6 @@
+export { HeroSection } from './HeroSection';
+export { WhySolFoundry } from './WhySolFoundry';
+export { HowItWorksCondensed } from './HowItWorksCondensed';
+export { FeaturedBounties } from './FeaturedBounties';
+export { ActivityFeed } from './ActivityFeed';
+export { FNDRYPriceWidget } from './FNDRYPriceWidget';

From e9b65ad3a91c41b30d20705946d68d36454e4e3d Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Sat, 4 Apr 2026 23:54:36 +0800
Subject: [PATCH 04/19] feat(auth): add Contributor Onboarding Wizard

Bounty: T2 Contributor Onboarding Wizard - 400K FNDRY
- Multi-step wizard: profile, skills, wallet, done
- Skill/language preference selection
- Wallet address input with verification flow
- Framer Motion transitions
---
 .../src/components/auth/OnboardingWizard.tsx  | 312 ++++++++++++++++++
 1 file changed, 312 insertions(+)
 create mode 100644 frontend/src/components/auth/OnboardingWizard.tsx

diff --git a/frontend/src/components/auth/OnboardingWizard.tsx b/frontend/src/components/auth/OnboardingWizard.tsx
new file mode 100644
index 00000000..6939fb35
--- /dev/null
+++ b/frontend/src/components/auth/OnboardingWizard.tsx
@@ -0,0 +1,312 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useAuth } from '../../hooks/useAuth';
+import { fadeIn } from '../../lib/animations';
+
+const SKILL_OPTIONS = [
+  { id: 'react', label: 'React / Next.js' },
+  { id: 'vue', label: 'Vue / Nuxt' },
+  { id: 'svelte', label: 'Svelte' },
+  { id: 'node', label: 'Node.js / Express' },
+  { id: 'python', label: 'Python / FastAPI' },
+  { id: 'rust', label: 'Rust' },
+  { id: 'solidity', label: 'Solidity / EVM' },
+  { id: 'solana', label: 'Solana / Anchor' },
+  { id: 'ai-ml', label: 'AI / ML' },
+  { id: 'devops', label: 'DevOps / Cloud' },
+  { id: 'security', label: 'Security / Audit' },
+  { id: 'docs', label: 'Technical Writing' },
+];
+
+const LANG_OPTIONS = [
+  { id: 'typescript', label: 'TypeScript' },
+  { id: 'python', label: 'Python' },
+  { id: 'rust', label: 'Rust' },
+  { id: 'go', label: 'Go' },
+  { id: 'solidity', label: 'Solidity' },
+];
+
+const STEPS = [
+  { id: 'profile', title: 'Profile', icon: '👤' },
+  { id: 'skills', title: 'Skills', icon: '🛠️' },
+  { id: 'wallet', title: 'Wallet', icon: '💜' },
+  { id: 'done', title: 'Done!', icon: '🎉' },
+];
+
+export function OnboardingWizard() {
+  const { user, updateUser } = useAuth();
+  const navigate = useNavigate();
+  const [step, setStep] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Step data
+  const [username, setUsername] = useState(user?.username ?? '');
+  const [bio, setBio] = useState('');
+  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
+  const [selectedLangs, setSelectedLangs] = useState<string[]>(['typescript']);
+  const [walletAddr, setWalletAddr] = useState(user?.wallet_address ?? '');
+  const [walletVerified, setWalletVerified] = useState(user?.wallet_verified ?? false);
+
+  const isLastStep = step === STEPS.length - 2;
+  const isDone = step === STEPS.length - 1;
+
+  const toggleSkill = (id: string) => {
+    setSelectedSkills(prev =>
+      prev.includes(id) ? prev.filter(s => s !== id) : [...prev, id]
+    );
+  };
+
+  const toggleLang = (id: string) => {
+    setSelectedLangs(prev =>
+      prev.includes(id) ? prev.filter(l => l !== id) : [...prev, id]
+    );
+  };
+
+  const next = () => setStep(s => Math.min(s + 1, STEPS.length - 1));
+  const back = () => setStep(s => Math.max(s - 1, 0));
+
+  const handleFinish = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      // Update user profile with all onboarding data
+      updateUser({
+        username: username || user?.username ?? '',
+        wallet_address: walletAddr || undefined,
+        wallet_verified: walletVerified,
+      });
+      // In a real app, would POST to /api/contributors/me with skills/langs
+      next();
+    } catch(e: any) {
+      setError(e.message ?? 'Something went wrong');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const skipToHome = () => navigate('/', { replace: true });
+
+  const stepVariants = {
+    enter: (dir: number) => ({ x: dir > 0 ? 60 : -60, opacity: 0 }),
+    center: { x: 0, opacity: 1 },
+    exit: (dir: number) => ({ x: dir < 0 ? 60 : -60, opacity: 0 }),
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
+      <div className="w-full max-w-lg">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold text-white mb-2">Welcome to SolFoundry</h1>
+          <p className="text-gray-400 text-sm">Complete your contributor profile to start earning</p>
+        </div>
+
+        {/* Progress Steps */}
+        <div className="flex items-center justify-between mb-8 px-2">
+          {STEPS.map((s, i) => (
+            <React.Fragment key={s.id}>
+              <div className="flex flex-col items-center">
+                <div className={`w-10 h-10 rounded-full flex items-center justify-center text-lg transition-all ${
+                  i <= step ? 'bg-purple-600 text-white' : 'bg-gray-800 text-gray-500'
+                }`}>
+                  {i < step ? '✓' : s.icon}
+                </div>
+                <span className={`text-xs mt-1 ${
+                  i <= step ? 'text-purple-400' : 'text-gray-600'
+                }`}>{s.title}</span>
+              </div>
+              {i < STEPS.length - 1 && (
+                <div className={`flex-1 h-0.5 mx-2 ${
+                  i < step ? 'bg-purple-600' : 'bg-gray-800'
+                }`} />
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+
+        {/* Step Card */}
+        <div className="bg-gray-900 rounded-2xl border border-gray-800 p-6 min-h-80">
+          <AnimatePresence mode="wait" custom={step}>
+            <motion.div
+              key={step}
+              custom={step}
+              variants={stepVariants}
+              initial="enter"
+              animate="center"
+              exit="exit"
+              transition={{ duration: 0.25, ease: 'easeOut' }}
+            >
+              {/* Step 0: Profile */}
+              {step === 0 && (
+                <div>
+                  <h2 className="text-lg font-semibold text-white mb-4">Set up your profile</h2>
+                  <div className="space-y-4">
+                    <div>
+                      <label className="block text-gray-400 text-sm mb-1">Username</label>
+                      <input
+                        type="text"
+                        value={username}
+                        onChange={e => setUsername(e.target.value)}
+                        placeholder={user?.username ?? 'your_username'}
+                        className="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-purple-500"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-gray-400 text-sm mb-1">Bio <span className="text-gray-600">(optional)</span></label>
+                      <textarea
+                        value={bio}
+                        onChange={e => setBio(e.target.value)}
+                        placeholder="Tell the community about yourself..."
+                        rows={3}
+                        className="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 resize-none"
+                      />
+                    </div>
+                    {user?.avatar_url && (
+                      <div className="flex items-center gap-3">
+                        <img src={user.avatar_url} alt="Avatar" className="w-12 h-12 rounded-full" />
+                        <span className="text-gray-400 text-sm">GitHub avatar</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* Step 1: Skills */}
+              {step === 1 && (
+                <div>
+                  <h2 className="text-lg font-semibold text-white mb-4">Choose your skills</h2>
+                  <p className="text-gray-500 text-xs mb-4">Select all that apply — helps match you with relevant bounties</p>
+                  <div className="grid grid-cols-2 gap-2">
+                    {SKILL_OPTIONS.map(skill => (
+                      <button
+                        key={skill.id}
+                        onClick={() => toggleSkill(skill.id)}
+                        className={`text-left px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+                          selectedSkills.includes(skill.id)
+                            ? 'bg-purple-600/30 border border-purple-500 text-purple-300'
+                            : 'bg-gray-800 border border-gray-700 text-gray-400 hover:border-gray-600'
+                        }`}
+                      >
+                        {selectedSkills.includes(skill.id) ? '✓ ' : ''}{skill.label}
+                      </button>
+                    ))}
+                  </div>
+                  <div className="mt-4">
+                    <p className="text-gray-500 text-xs mb-2">Preferred languages</p>
+                    <div className="flex flex-wrap gap-2">
+                      {LANG_OPTIONS.map(lang => (
+                        <button
+                          key={lang.id}
+                          onClick={() => toggleLang(lang.id)}
+                          className={`px-3 py-1.5 rounded-full text-xs font-medium transition-all ${
+                            selectedLangs.includes(lang.id)
+                              ? 'bg-blue-600/30 border border-blue-500 text-blue-300'
+                              : 'bg-gray-800 border border-gray-700 text-gray-400'
+                          }`}
+                        >
+                          {lang.label}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Step 2: Wallet */}
+              {step === 2 && (
+                <div>
+                  <h2 className="text-lg font-semibold text-white mb-4">Connect your wallet</h2>
+                  <p className="text-gray-400 text-sm mb-4">Add your Solana wallet to receive FNDRY token rewards</p>
+                  <div className="space-y-4">
+                    <div>
+                      <label className="block text-gray-400 text-sm mb-1">Solana Wallet Address</label>
+                      <input
+                        type="text"
+                        value={walletAddr}
+                        onChange={e => setWalletAddr(e.target.value)}
+                        placeholder="ABC...XYZ"
+                        className="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 font-mono text-sm"
+                      />
+                    </div>
+                    {walletAddr && !walletVerified && (
+                      <button
+                        onClick={() => setWalletVerified(true)}
+                        className="w-full bg-purple-600 hover:bg-purple-500 text-white py-2.5 rounded-lg font-medium transition-colors"
+                      >
+                        Verify Ownership (Sign Message)
+                      </button>
+                    )}
+                    {walletVerified && (
+                      <div className="flex items-center gap-2 text-green-400 text-sm">
+                        <span>✓</span> Wallet verified
+                      </div>
+                    )}
+                    <p className="text-gray-600 text-xs">
+                      FNDRY tokens are distributed on Solana. Your wallet must support SPL tokens.
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {/* Step 3: Done */}
+              {step === 3 && (
+                <div className="text-center py-8">
+                  <div className="text-5xl mb-4">🎉</div>
+                  <h2 className="text-2xl font-bold text-white mb-2">You're all set!</h2>
+                  <p className="text-gray-400 mb-6">
+                    {username || user?.username}, your profile is ready.
+                    {selectedSkills.length > 0 && (
+                      <span> You'll be matched with <strong className="text-purple-400">{selectedSkills.length}</strong> skill areas.</span>
+                    )}
+                  </p>
+                  <div className="space-y-3">
+                    <button
+                      onClick={skipToHome}
+                      className="w-full bg-purple-600 hover:bg-purple-500 text-white py-3 rounded-xl font-semibold transition-colors"
+                    >
+                      Start Hunting Bounties →
+                    </button>
+                    <button
+                      onClick={skipToHome}
+                      className="w-full text-gray-500 hover:text-gray-300 py-2 text-sm transition-colors"
+                    >
+                      Browse bounties first
+                    </button>
+                  </div>
+                </div>
+              )}
+            </motion.div>
+          </AnimatePresence>
+
+          {/* Error */}
+          {error && (
+            <div className="mt-4 text-red-400 text-sm text-center">{error}</div>
+          )}
+        </div>
+
+        {/* Navigation */}
+        {!isDone && (
+          <div className="flex gap-3 mt-4">
+            {step > 0 && (
+              <button
+                onClick={back}
+                className="flex-1 bg-gray-800 hover:bg-gray-700 text-gray-300 py-2.5 rounded-lg font-medium transition-colors"
+              >
+                Back
+              </button>
+            )}
+            <button
+              onClick={step === STEPS.length - 2 ? handleFinish : next}
+              disabled={loading}
+              className="flex-1 bg-purple-600 hover:bg-purple-500 disabled:bg-purple-800 text-white py-2.5 rounded-lg font-semibold transition-colors"
+            >
+              {loading ? 'Saving...' : step === STEPS.length - 2 ? 'Complete Setup' : 'Continue'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

From a5ce6aea0bd236300f57fa8034d60e1ce77b07a8 Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Sat, 4 Apr 2026 23:54:37 +0800
Subject: [PATCH 05/19] feat: export OnboardingWizard from auth components

---
 frontend/src/components/auth/index.ts | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 frontend/src/components/auth/index.ts

diff --git a/frontend/src/components/auth/index.ts b/frontend/src/components/auth/index.ts
new file mode 100644
index 00000000..46e285b9
--- /dev/null
+++ b/frontend/src/components/auth/index.ts
@@ -0,0 +1,2 @@
+export { AuthGuard } from './AuthGuard';
+export { OnboardingWizard } from './OnboardingWizard';

From a0eb39e1796b11e6a0b493c02ffa5a7df2ab0a07 Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Mon, 6 Apr 2026 17:44:38 +0800
Subject: [PATCH 06/19] feat: add advanced bounty search with filters (Bounty
 #842)

---
 .../bounty/AdvancedBountySearch.tsx           | 391 ++++++++++++++++++
 1 file changed, 391 insertions(+)
 create mode 100644 frontend/src/components/bounty/AdvancedBountySearch.tsx

diff --git a/frontend/src/components/bounty/AdvancedBountySearch.tsx b/frontend/src/components/bounty/AdvancedBountySearch.tsx
new file mode 100644
index 00000000..860b4ab2
--- /dev/null
+++ b/frontend/src/components/bounty/AdvancedBountySearch.tsx
@@ -0,0 +1,391 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { ChevronDown, Search, X, Save, RotateCcw } from 'lucide-react';
+
+export interface BountyFilters {
+  skills: string[];
+  tiers: string[];
+  categories: string[];
+  rewardMin: number;
+  rewardMax: number;
+  sortBy: 'reward' | 'deadline' | 'created';
+  sortOrder: 'asc' | 'desc';
+}
+
+const ALL_SKILLS = ['TypeScript', 'Rust', 'Solidity', 'Python', 'Go', 'JavaScript', 'React', 'Node.js', 'Next.js', 'AI/ML'];
+const ALL_TIERS = ['T1', 'T2', 'T3'];
+const ALL_CATEGORIES = ['Frontend', 'Backend', 'Blockchain', 'AI/ML', 'DevOps', 'Security', 'Integration', 'Content', 'Design'];
+
+const TIER_RANGES: Record<string, [number, number]> = {
+  T1: [0, 200],
+  T2: [200, 1000],
+  T3: [1000, 10000],
+};
+
+const SORT_OPTIONS = [
+  { value: 'reward', label: 'Reward' },
+  { value: 'deadline', label: 'Deadline' },
+  { value: 'created', label: 'Created Date' },
+];
+
+interface AdvancedBountySearchProps {
+  onFiltersChange: (filters: BountyFilters) => void;
+  maxReward?: number;
+}
+
+const DEFAULT_FILTERS: BountyFilters = {
+  skills: [],
+  tiers: [],
+  categories: [],
+  rewardMin: 0,
+  rewardMax: 10000,
+  sortBy: 'created',
+  sortOrder: 'desc',
+};
+
+function loadSavedFilters(): BountyFilters | null {
+  try {
+    const saved = localStorage.getItem('advancedBountyFilters');
+    return saved ? JSON.parse(saved) : null;
+  } catch {
+    return null;
+  }
+}
+
+function MultiSelect({
+  label,
+  options,
+  selected,
+  onChange,
+}: {
+  label: string;
+  options: string[];
+  selected: string[];
+  onChange: (selected: string[]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const toggle = (opt: string) => {
+    if (selected.includes(opt)) {
+      onChange(selected.filter((s) => s !== opt));
+    } else {
+      onChange([...selected, opt]);
+    }
+  };
+
+  return (
+    <div className="relative">
+      <label className="text-xs font-medium text-text-muted uppercase tracking-wide">{label}</label>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="mt-1 w-full flex items-center justify-between px-3 py-2 bg-forge-800 border border-border rounded-lg text-sm text-text-secondary hover:border-border-hover transition-colors"
+      >
+        <span className="truncate">
+          {selected.length === 0 ? `All ${label}` : `${selected.length} selected`}
+        </span>
+        <ChevronDown className={`w-4 h-4 transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+      {open && (
+        <div className="absolute z-20 mt-1 w-full bg-forge-800 border border-border rounded-lg shadow-xl p-2 max-h-48 overflow-y-auto">
+          {options.map((opt) => (
+            <label key={opt} className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-forge-700 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={selected.includes(opt)}
+                onChange={() => toggle(opt)}
+                className="rounded border-border bg-forge-700 text-emerald focus:ring-emerald"
+              />
+              <span className="text-sm text-text-secondary">{opt}</span>
+            </label>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function AdvancedBountySearch({ onFiltersChange, maxReward = 10000 }: AdvancedBountySearchProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [savedCount, setSavedCount] = useState(0);
+  const [filters, setFilters] = useState<BountyFilters>(() => {
+    const saved = loadSavedFilters();
+    return saved ?? DEFAULT_FILTERS;
+  });
+
+  useEffect(() => {
+    const saved = loadSavedFilters();
+    if (saved) setSavedCount(1);
+  }, []);
+
+  const updateFilters = useCallback(
+    (partial: Partial<BountyFilters>) => {
+      const next = { ...filters, ...partial };
+      setFilters(next);
+      onFiltersChange(next);
+    },
+    [filters, onFiltersChange]
+  );
+
+  const saveFilters = () => {
+    try {
+      localStorage.setItem('advancedBountyFilters', JSON.stringify(filters));
+      setSavedCount(1);
+    } catch {}
+  };
+
+  const resetFilters = () => {
+    setFilters(DEFAULT_FILTERS);
+    onFiltersChange(DEFAULT_FILTERS);
+  };
+
+  const applyTierPreset = (tier: string) => {
+    const range = TIER_RANGES[tier];
+    if (!range) return;
+    const next: BountyFilters = {
+      ...DEFAULT_FILTERS,
+      tiers: [tier],
+      rewardMin: range[0],
+      rewardMax: range[1],
+      sortBy: 'reward',
+      sortOrder: 'desc',
+    };
+    setFilters(next);
+    onFiltersChange(next);
+  };
+
+  const hasActiveFilters =
+    filters.skills.length > 0 ||
+    filters.tiers.length > 0 ||
+    filters.categories.length > 0 ||
+    filters.rewardMin > 0 ||
+    filters.rewardMax < maxReward;
+
+  return (
+    <div className="mb-6">
+      {/* Collapsible trigger */}
+      <div className="flex items-center gap-3 flex-wrap">
+        <button
+          type="button"
+          onClick={() => setIsOpen(!isOpen)}
+          className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium border transition-all ${
+            isOpen
+              ? 'bg-emerald text-forge-950 border-emerald'
+              : hasActiveFilters
+              ? 'bg-forge-700 text-emerald border-emerald/50'
+              : 'bg-forge-800 text-text-secondary border-border hover:border-border-hover'
+          }`}
+        >
+          <Search className="w-4 h-4" />
+          Advanced Search
+          {hasActiveFilters && (
+            <span className="bg-emerald text-forge-950 text-xs rounded-full w-5 h-5 flex items-center justify-center">
+              !
+            </span>
+          )}
+        </button>
+
+        {/* Tier preset buttons */}
+        <div className="flex items-center gap-1">
+          {ALL_TIERS.map((tier) => (
+            <button
+              key={tier}
+              onClick={() => applyTierPreset(tier)}
+              className={`px-3 py-1.5 rounded-md text-xs font-bold border transition-colors ${
+                filters.tiers.includes(tier)
+                  ? 'bg-tier-t1/20 text-tier-t1 border-tier-t1/50'
+                  : 'bg-forge-800 text-text-muted border-border hover:border-border-hover'
+              }`}
+            >
+              {tier}
+            </button>
+          ))}
+        </div>
+
+        {/* Saved indicator */}
+        {savedCount > 0 && (
+          <span className="text-xs text-emerald flex items-center gap-1">
+            <Save className="w-3 h-3" /> Saved
+          </span>
+        )}
+
+        {/* Clear all */}
+        {hasActiveFilters && (
+          <button
+            type="button"
+            onClick={resetFilters}
+            className="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text-secondary"
+          >
+            <RotateCcw className="w-3 h-3" /> Clear all
+          </button>
+        )}
+      </div>
+
+      {/* Expanded panel */}
+      {isOpen && (
+        <div className="mt-4 p-5 bg-forge-800 border border-border rounded-xl">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
+            {/* Skill filter */}
+            <MultiSelect
+              label="Language / Skill"
+              options={ALL_SKILLS}
+              selected={filters.skills}
+              onChange={(skills) => updateFilters({ skills })}
+            />
+
+            {/* Tier filter */}
+            <MultiSelect
+              label="Bounty Tier"
+              options={ALL_TIERS}
+              selected={filters.tiers}
+              onChange={(tiers) => updateFilters({ tiers })}
+            />
+
+            {/* Category filter */}
+            <MultiSelect
+              label="Domain / Category"
+              options={ALL_CATEGORIES}
+              selected={filters.categories}
+              onChange={(categories) => updateFilters({ categories })}
+            />
+
+            {/* Reward range */}
+            <div>
+              <label className="text-xs font-medium text-text-muted uppercase tracking-wide">
+                Reward Range (FNDRY)
+              </label>
+              <div className="mt-1 flex items-center gap-2">
+                <input
+                  type="number"
+                  min={0}
+                  max={filters.rewardMax}
+                  value={filters.rewardMin}
+                  onChange={(e) => updateFilters({ rewardMin: Number(e.target.value) })}
+                  className="w-full px-2 py-1.5 bg-forge-700 border border-border rounded-lg text-sm text-text-secondary focus:border-emerald outline-none"
+                  placeholder="Min"
+                />
+                <span className="text-text-muted">—</span>
+                <input
+                  type="number"
+                  min={filters.rewardMin}
+                  max={maxReward}
+                  value={filters.rewardMax}
+                  onChange={(e) => updateFilters({ rewardMax: Number(e.target.value) })}
+                  className="w-full px-2 py-1.5 bg-forge-700 border border-border rounded-lg text-sm text-text-secondary focus:border-emerald outline-none"
+                  placeholder="Max"
+                />
+              </div>
+              {/* Reward preset buttons */}
+              <div className="mt-2 flex gap-1">
+                {ALL_TIERS.map((tier) => {
+                  const range = TIER_RANGES[tier];
+                  return (
+                    <button
+                      key={tier}
+                      onClick={() => applyTierPreset(tier)}
+                      className="flex-1 px-1 py-0.5 bg-forge-700 border border-border rounded text-xs text-text-muted hover:text-text-secondary"
+                    >
+                      {tier}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          {/* Sort row */}
+          <div className="mt-5 flex items-center gap-4 flex-wrap">
+            <div>
+              <label className="text-xs font-medium text-text-muted uppercase tracking-wide mr-2">
+                Sort By:
+              </label>
+              <div className="inline-flex items-center gap-1 bg-forge-700 rounded-lg p-1">
+                {SORT_OPTIONS.map((opt) => (
+                  <button
+                    key={opt.value}
+                    onClick={() => updateFilters({ sortBy: opt.value as BountyFilters['sortBy'] })}
+                    className={`px-3 py-1 rounded-md text-xs font-medium transition-colors ${
+                      filters.sortBy === opt.value
+                        ? 'bg-forge-600 text-text-primary'
+                        : 'text-text-muted hover:text-text-secondary'
+                    }`}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="inline-flex items-center gap-1 bg-forge-700 rounded-lg p-1">
+              <button
+                onClick={() => updateFilters({ sortOrder: 'desc' })}
+                className={`px-3 py-1 rounded-md text-xs font-medium ${
+                  filters.sortOrder === 'desc' ? 'bg-forge-600 text-text-primary' : 'text-text-muted'
+                }`}
+              >
+                ↓ High first
+              </button>
+              <button
+                onClick={() => updateFilters({ sortOrder: 'asc' })}
+                className={`px-3 py-1 rounded-md text-xs font-medium ${
+                  filters.sortOrder === 'asc' ? 'bg-forge-600 text-text-primary' : 'text-text-muted'
+                }`}
+              >
+                ↑ Low first
+              </button>
+            </div>
+
+            {/* Save */}
+            <button
+              type="button"
+              onClick={saveFilters}
+              className="ml-auto inline-flex items-center gap-1.5 px-3 py-1.5 bg-emerald/10 border border-emerald/30 text-emerald rounded-lg text-xs font-medium hover:bg-emerald/20 transition-colors"
+            >
+              <Save className="w-3.5 h-3.5" />
+              Save Filters
+            </button>
+          </div>
+
+          {/* Active filter pills */}
+          {hasActiveFilters && (
+            <div className="mt-4 flex items-center gap-2 flex-wrap">
+              <span className="text-xs text-text-muted">Active:</span>
+              {filters.skills.map((s) => (
+                <span
+                  key={s}
+                  className="inline-flex items-center gap-1 px-2 py-0.5 bg-forge-700 border border-border rounded-full text-xs text-text-secondary"
+                >
+                  {s}
+                  <X
+                    className="w-3 h-3 cursor-pointer hover:text-text-primary"
+                    onClick={() => updateFilters({ skills: filters.skills.filter((x) => x !== s) })}
+                  />
+                </span>
+              ))}
+              {filters.tiers.map((t) => (
+                <span
+                  key={t}
+                  className="inline-flex items-center gap-1 px-2 py-0.5 bg-tier-t1/10 border border-tier-t1/20 rounded-full text-xs text-tier-t1"
+                >
+                  {t}
+                  <X
+                    className="w-3 h-3 cursor-pointer"
+                    onClick={() => updateFilters({ tiers: filters.tiers.filter((x) => x !== t) })}
+                  />
+                </span>
+              ))}
+              {(filters.rewardMin > 0 || filters.rewardMax < maxReward) && (
+                <span className="px-2 py-0.5 bg-emerald/10 border border-emerald/20 rounded-full text-xs text-emerald">
+                  {filters.rewardMin}–{filters.rewardMax} FNDRY
+                  <X
+                    className="w-3 h-3 ml-1 cursor-pointer inline"
+                    onClick={() => updateFilters({ rewardMin: 0, rewardMax: maxReward })}
+                  />
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

From 46ece9914afb5d72adcde95cfae5f8b4574499f9 Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Mon, 6 Apr 2026 17:46:03 +0800
Subject: [PATCH 07/19] feat: integrate AdvancedBountySearch component (Bounty
 #842)

---
 frontend/src/components/bounty/BountyGrid.tsx | 97 +++++++++++++++++--
 1 file changed, 90 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/bounty/BountyGrid.tsx b/frontend/src/components/bounty/BountyGrid.tsx
index 7709ab94..e346ba44 100644
--- a/frontend/src/components/bounty/BountyGrid.tsx
+++ b/frontend/src/components/bounty/BountyGrid.tsx
@@ -1,16 +1,19 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { ChevronDown, Loader2, Plus } from 'lucide-react';
 import { BountyCard } from './BountyCard';
+import { AdvancedBountySearch, BountyFilters } from './AdvancedBountySearch';
 import { useInfiniteBounties } from '../../hooks/useBounties';
 import { staggerContainer, staggerItem } from '../../lib/animations';
+import type { Bounty } from '../../types/bounty';
 
 const FILTER_SKILLS = ['All', 'TypeScript', 'Rust', 'Solidity', 'Python', 'Go', 'JavaScript'];
 
 export function BountyGrid() {
   const [activeSkill, setActiveSkill] = useState<string>('All');
   const [statusFilter, setStatusFilter] = useState<string>('open');
+  const [advancedFilters, setAdvancedFilters] = useState<BountyFilters | null>(null);
 
   const params = {
     status: statusFilter,
@@ -22,6 +25,67 @@ export function BountyGrid() {
 
   const allBounties = data?.pages.flatMap((p) => p.items) ?? [];
 
+  // Apply advanced filters client-side
+  const filteredBounties = useMemo(() => {
+    if (!advancedFilters) return allBounties;
+
+    return allBounties.filter((bounty: Bounty) => {
+      // Skill filter
+      if (advancedFilters.skills.length > 0) {
+        const hasSkill = advancedFilters.skills.some((s) =>
+          bounty.skills?.map((sk: string) => sk.toLowerCase()).includes(s.toLowerCase())
+        );
+        if (!hasSkill) return false;
+      }
+
+      // Tier filter
+      if (advancedFilters.tiers.length > 0) {
+        if (!advancedFilters.tiers.includes(bounty.tier)) return false;
+      }
+
+      // Category filter
+      if (advancedFilters.categories.length > 0) {
+        if (!bounty.category || !advancedFilters.categories.includes(bounty.category)) return false;
+      }
+
+      // Reward range filter
+      const reward = bounty.reward_amount ?? 0;
+      if (reward < advancedFilters.rewardMin || reward > advancedFilters.rewardMax) return false;
+
+      return true;
+    });
+  }, [allBounties, advancedFilters]);
+
+  // Apply sorting
+  const sortedBounties = useMemo(() => {
+    if (!advancedFilters) return filteredBounties;
+
+    const sorted = [...filteredBounties].sort((a, b) => {
+      let aVal: number | string = 0;
+      let bVal: number | string = 0;
+
+      if (advancedFilters.sortBy === 'reward') {
+        aVal = a.reward_amount ?? 0;
+        bVal = b.reward_amount ?? 0;
+      } else if (advancedFilters.sortBy === 'deadline') {
+        aVal = a.deadline ? new Date(a.deadline).getTime() : Infinity;
+        bVal = b.deadline ? new Date(b.deadline).getTime() : Infinity;
+      } else {
+        aVal = new Date(a.created_at).getTime();
+        bVal = new Date(b.created_at).getTime();
+      }
+
+      if (advancedFilters.sortOrder === 'asc') return aVal < bVal ? -1 : 1;
+      return aVal > bVal ? -1 : 1;
+    });
+
+    return sorted;
+  }, [filteredBounties, advancedFilters]);
+
+  const maxReward = useMemo(() => {
+    return Math.max(...allBounties.map((b: Bounty) => b.reward_amount ?? 0), 10000);
+  }, [allBounties]);
+
   return (
     <section id="bounties" className="py-16 md:py-24">
       <div className="max-w-7xl mx-auto px-4">
@@ -53,6 +117,12 @@ export function BountyGrid() {
           </div>
         </div>
 
+        {/* Advanced Search */}
+        <AdvancedBountySearch
+          onFiltersChange={setAdvancedFilters}
+          maxReward={maxReward}
+        />
+
         {/* Filter pills */}
         <div className="flex items-center gap-2 flex-wrap mb-8">
           {FILTER_SKILLS.map((skill) => (
@@ -70,6 +140,13 @@ export function BountyGrid() {
           ))}
         </div>
 
+        {/* Results count with advanced filters */}
+        {advancedFilters && (
+          <div className="mb-4 text-sm text-text-muted">
+            Showing {sortedBounties.length} of {allBounties.length} bounties
+          </div>
+        )}
+
         {/* Loading state */}
         {isLoading && (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
@@ -93,17 +170,23 @@ export function BountyGrid() {
         )}
 
         {/* Empty state */}
-        {!isLoading && !isError && allBounties.length === 0 && (
+        {!isLoading && !isError && sortedBounties.length === 0 && (
           <div className="text-center py-16">
-            <p className="text-text-muted text-lg mb-2">No bounties found</p>
+            <p className="text-text-muted text-lg mb-2">No bounties match your filters</p>
             <p className="text-text-muted text-sm">
-              {activeSkill !== 'All' ? `Try a different language filter.` : 'Check back soon for new bounties.'}
+              Try adjusting your search criteria or{' '}
+              <button
+                onClick={() => setAdvancedFilters(null)}
+                className="text-emerald hover:underline"
+              >
+                clear all filters
+              </button>
             </p>
           </div>
         )}
 
         {/* Bounty grid */}
-        {!isLoading && allBounties.length > 0 && (
+        {!isLoading && sortedBounties.length > 0 && (
           <motion.div
             variants={staggerContainer}
             initial="initial"
@@ -111,7 +194,7 @@ export function BountyGrid() {
             viewport={{ once: true, margin: '-50px' }}
             className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5"
           >
-            {allBounties.map((bounty) => (
+            {sortedBounties.map((bounty: Bounty) => (
               <motion.div key={bounty.id} variants={staggerItem}>
                 <BountyCard bounty={bounty} />
               </motion.div>
@@ -120,7 +203,7 @@ export function BountyGrid() {
         )}
 
         {/* Load more */}
-        {hasNextPage && (
+        {hasNextPage && !advancedFilters && (
           <div className="mt-10 text-center">
             <button
               onClick={() => fetchNextPage()}

From 87933b19d5c741fca2525e61e360908e656c7537 Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Tue, 7 Apr 2026 00:21:43 +0800
Subject: [PATCH 08/19] feat: add real-time WebSocket activity feed (#860)

- Add socket.io-client for WebSocket connection
- Implement ActivityFeedService with auto-reconnect + polling fallback
- Add ActivityFeed React component with filtering and connection status
- Supports live bounty_created, bounty_submitted, bounty_merged, review events
- Graceful degradation to polling when WebSocket unavailable
---
 frontend/package.json                         |   1 +
 .../src/components/activity/ActivityFeed.tsx  | 229 ++++++++++++++++++
 frontend/src/services/activityFeed.ts         | 198 +++++++++++++++
 3 files changed, 428 insertions(+)
 create mode 100644 frontend/src/components/activity/ActivityFeed.tsx
 create mode 100644 frontend/src/services/activityFeed.ts

diff --git a/frontend/package.json b/frontend/package.json
index f3f83792..a4812f59 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
     "autoprefixer": "^10.4.27",
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.7.0",
+    "socket.io-client": "^4.7.4",
     "postcss": "^8.5.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/frontend/src/components/activity/ActivityFeed.tsx b/frontend/src/components/activity/ActivityFeed.tsx
new file mode 100644
index 00000000..a9fa6d9e
--- /dev/null
+++ b/frontend/src/components/activity/ActivityFeed.tsx
@@ -0,0 +1,229 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { activityFeed, Activity, ActivityType } from './activityFeedService';
+import { 
+  Zap, GitPullRequest, GitMerge, CheckCircle2, 
+  XCircle, Trophy, Bell, Filter, RefreshCw, Wifi, WifiOff
+} from 'lucide-react';
+
+interface ActivityFeedProps {
+  initialActivities?: Activity[];
+  maxVisible?: number;
+  showFilters?: boolean;
+  className?: string;
+}
+
+const ACTIVITY_CONFIG: Record<ActivityType, { icon: typeof Zap; color: string; label: string }> = {
+  bounty_created:      { icon: Zap,           color: 'text-yellow-400',  label: 'New Bounty' },
+  bounty_submitted:    { icon: GitPullRequest, color: 'text-blue-400',    label: 'Submission' },
+  bounty_merged:       { icon: GitMerge,       color: 'text-green-400',   label: 'Merged' },
+  review_completed:    { icon: CheckCircle2,   color: 'text-purple-400', label: 'Review' },
+  leaderboard_changed: { icon: Trophy,         color: 'text-amber-400',   label: 'Leaderboard' },
+  submission_approved:  { icon: CheckCircle2,  color: 'text-emerald-400', label: 'Approved' },
+  submission_rejected:  { icon: XCircle,       color: 'text-red-400',     label: 'Rejected' },
+};
+
+function formatTimeAgo(timestamp: number): string {
+  const seconds = Math.floor((Date.now() - timestamp) / 1000);
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+function ActivityFeedItem({ activity }: { activity: Activity }) {
+  const config = ACTIVITY_CONFIG[activity.type] || ACTIVITY_CONFIG.bounty_created;
+  const Icon = config.icon;
+
+  return (
+    <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-white/5 transition-colors group">
+      <div className={`flex-shrink-0 mt-0.5 ${config.color}`}>
+        <Icon className="w-4 h-4" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className={`text-xs font-medium px-1.5 py-0.5 rounded bg-white/10 ${config.color}`}>
+            {config.label}
+          </span>
+          {activity.bountyId && (
+            <a 
+              href={`/bounties/${activity.bountyId}`}
+              className="text-sm font-medium text-white/80 hover:text-white truncate"
+            >
+              {activity.bountyTitle || `#${activity.bountyId}`}
+            </a>
+          )}
+        </div>
+        <p className="text-sm text-white/60 mt-0.5 line-clamp-2">
+          {activity.description}
+        </p>
+        <div className="flex items-center gap-2 mt-1">
+          <span className="text-xs text-white/40">
+            {activity.username && <span>by <span className="text-white/60">{activity.username}</span></span>}
+          </span>
+          <span className="text-xs text-white/30">•</span>
+          <span className="text-xs text-white/40">{formatTimeAgo(activity.timestamp)}</span>
+          {activity.amount && activity.token && (
+            <>
+              <span className="text-xs text-white/30">•</span>
+              <span className="text-xs font-medium text-green-400">
+                {activity.amount} {activity.token}
+              </span>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function ActivityFeed({ 
+  initialActivities = [], 
+  maxVisible = 50,
+  showFilters = true,
+  className = ''
+}: ActivityFeedProps) {
+  const [activities, setActivities] = useState<Activity[]>(initialActivities);
+  const [connectionState, setConnectionState] = useState(activityFeed.getConnectionState());
+  const [filter, setFilter] = useState<ActivityType[]>([]);
+  const [showFilterMenu, setShowFilterMenu] = useState(false);
+  const [isFilterActive, setIsFilterActive] = useState(false);
+  const unsubscribeRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    activityFeed.connect();
+
+    const unsubscribe = activityFeed.subscribe((activity: Activity) => {
+      setActivities(prev => {
+        const exists = prev.some(a => a.id === activity.id);
+        if (exists) return prev;
+        return [activity, ...prev].slice(0, maxVisible);
+      });
+    });
+    unsubscribeRef.current = unsubscribe;
+
+    // Poll connection state
+    const stateInterval = setInterval(() => {
+      setConnectionState(activityFeed.getConnectionState());
+    }, 2000);
+
+    return () => {
+      unsubscribe();
+      clearInterval(stateInterval);
+    };
+  }, [maxVisible]);
+
+  const handleFilterToggle = useCallback((type: ActivityType) => {
+    setFilter(prev => {
+      const newFilter = prev.includes(type)
+        ? prev.filter(t => t !== type)
+        : [...prev, type];
+      setIsFilterActive(newFilter.length > 0);
+      activityFeed.setFilters({ types: newFilter.length > 0 ? newFilter : undefined });
+      return newFilter;
+    });
+  }, []);
+
+  const handleReconnect = useCallback(() => {
+    activityFeed.disconnect();
+    setActivities([]);
+    activityFeed.connect();
+  }, []);
+
+  const filteredActivities = filter.length > 0
+    ? activities.filter(a => filter.includes(a.type))
+    : activities;
+
+  const ConnectionIndicator = () => {
+    switch (connectionState) {
+      case 'connected':
+        return <Wifi className="w-3.5 h-3.5 text-green-400" />;
+      case 'fallback':
+        return <WifiOff className="w-3.5 h-3.5 text-yellow-400" />;
+      default:
+        return <WifiOff className="w-3.5 h-3.5 text-red-400" />;
+    }
+  };
+
+  return (
+    <div className={`bg-white/5 rounded-xl border border-white/10 ${className}`}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-white/10">
+        <div className="flex items-center gap-2">
+          <Bell className="w-4 h-4 text-white/60" />
+          <h3 className="font-semibold text-white">Activity Feed</h3>
+          <ConnectionIndicator />
+        </div>
+        <div className="flex items-center gap-1.5">
+          {connectionState !== 'connected' && (
+            <button
+              onClick={handleReconnect}
+              className="p-1.5 rounded-lg hover:bg-white/10 text-white/60 hover:text-white transition-colors"
+              title="Reconnect"
+            >
+              <RefreshCw className="w-3.5 h-3.5" />
+            </button>
+          )}
+          {showFilters && (
+            <div className="relative">
+              <button
+                onClick={() => setShowFilterMenu(!showFilterMenu)}
+                className={`p-1.5 rounded-lg transition-colors ${
+                  isFilterActive 
+                    ? 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/30' 
+                    : 'hover:bg-white/10 text-white/60 hover:text-white'
+                }`}
+                title="Filter activities"
+              >
+                <Filter className="w-3.5 h-3.5" />
+              </button>
+              {showFilterMenu && (
+                <div className="absolute right-0 top-full mt-1 w-48 bg-[#1a1a2e] border border-white/10 rounded-xl shadow-xl z-50 py-1">
+                  {(Object.keys(ACTIVITY_CONFIG) as ActivityType[]).map(type => {
+                    const config = ACTIVITY_CONFIG[type];
+                    return (
+                      <button
+                        key={type}
+                        onClick={() => handleFilterToggle(type)}
+                        className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-white/5 text-left"
+                      >
+                        <div className={`w-2 h-2 rounded-full ${filter.includes(type) ? 'bg-blue-400' : 'bg-white/20'}`} />
+                        <span className={config.color}><config.icon className="w-3 h-3 inline mr-1" /></span>
+                        <span className="text-white/80">{config.label}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Activity List */}
+      <div className="max-h-96 overflow-y-auto custom-scrollbar">
+        {filteredActivities.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <Bell className="w-8 h-8 text-white/20 mb-2" />
+            <p className="text-sm text-white/40">No activities yet</p>
+            <p className="text-xs text-white/25 mt-1">
+              {connectionState === 'connected' 
+                ? 'Waiting for live updates...' 
+                : connectionState === 'fallback'
+                ? 'Connected via polling fallback'
+                : 'Reconnecting...'}
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-white/5">
+            {filteredActivities.map(activity => (
+              <ActivityFeedItem key={activity.id} activity={activity} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/services/activityFeed.ts b/frontend/src/services/activityFeed.ts
new file mode 100644
index 00000000..d23a2161
--- /dev/null
+++ b/frontend/src/services/activityFeed.ts
@@ -0,0 +1,198 @@
+import { io, Socket } from 'socket.io-client';
+
+export type ActivityType = 
+  | 'bounty_created'
+  | 'bounty_submitted'
+  | 'bounty_merged'
+  | 'review_completed'
+  | 'leaderboard_changed'
+  | 'submission_approved'
+  | 'submission_rejected';
+
+export interface Activity {
+  id: string;
+  type: ActivityType;
+  title: string;
+  description: string;
+  username: string;
+  avatarUrl?: string;
+  timestamp: number;
+  metadata?: Record<string, string | number>;
+  bountyId?: string;
+  bountyTitle?: string;
+  amount?: string;
+  token?: string;
+}
+
+export interface ActivityFilters {
+  types?: ActivityType[];
+  username?: string;
+  bountyId?: string;
+}
+
+export interface ActivityFeedOptions {
+  reconnect?: boolean;
+  reconnectInterval?: number;
+  maxReconnectAttempts?: number;
+  fallbackPollingInterval?: number;
+}
+
+const DEFAULT_OPTIONS: Required<ActivityFeedOptions> = {
+  reconnect: true,
+  reconnectInterval: 3000,
+  maxReconnectAttempts: 5,
+  fallbackPollingInterval: 10000,
+};
+
+class ActivityFeedService {
+  private socket: Socket | null = null;
+  private listeners: Map<string, Set<(activity: Activity) => void>> = new Map();
+  private options: Required<ActivityFeedOptions>;
+  private reconnectAttempts = 0;
+  private useFallback = false;
+  private pollingTimer: ReturnType<typeof setInterval> | null = null;
+  private wsUrl: string;
+  private filters: ActivityFilters = {};
+
+  constructor(wsUrl: string = 'wss://solfoundry.org/ws', options: ActivityFeedOptions = {}) {
+    this.wsUrl = wsUrl;
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+  }
+
+  connect(): void {
+    if (this.socket?.connected) return;
+
+    try {
+      this.socket = io(this.wsUrl, {
+        path: '/ws/socket.io',
+        transports: ['websocket', 'polling'],
+        reconnection: this.options.reconnect,
+        reconnectionDelay: this.options.reconnectInterval,
+        reconnectionAttempts: this.options.maxReconnectAttempts,
+        timeout: 10000,
+      });
+
+      this.socket.on('connect', () => {
+        console.log('[ActivityFeed] Connected via WebSocket');
+        this.reconnectAttempts = 0;
+        this.useFallback = false;
+        this.stopPollingFallback();
+        // Send current filters to server
+        this.socket?.emit('subscribe', this.filters);
+      });
+
+      this.socket.on('disconnect', (reason) => {
+        console.warn('[ActivityFeed] Disconnected:', reason);
+        if (this.options.reconnect && !this.useFallback) {
+          this.scheduleFallback();
+        }
+      });
+
+      this.socket.on('connect_error', (error) => {
+        console.error('[ActivityFeed] Connection error:', error.message);
+        if (!this.useFallback) {
+          this.scheduleFallback();
+        }
+      });
+
+      this.socket.on('activity', (activity: Activity) => {
+        this.notifyListeners(activity);
+      });
+
+      this.socket.on('activities_batch', (activities: Activity[]) => {
+        activities.forEach(activity => this.notifyListeners(activity));
+      });
+
+      this.socket.on('error', (error: { message: string }) => {
+        console.error('[ActivityFeed] Server error:', error.message);
+      });
+
+    } catch (error) {
+      console.error('[ActivityFeed] Failed to initialize WebSocket:', error);
+      this.scheduleFallback();
+    }
+  }
+
+  disconnect(): void {
+    this.stopPollingFallback();
+    if (this.socket) {
+      this.socket.disconnect();
+      this.socket = null;
+    }
+    this.listeners.clear();
+  }
+
+  setFilters(filters: ActivityFilters): void {
+    this.filters = filters;
+    if (this.socket?.connected) {
+      this.socket.emit('update_filters', filters);
+    }
+  }
+
+  subscribe(callback: (activity: Activity) => void): () => void {
+    const id = Math.random().toString(36).substring(2);
+    if (!this.listeners.has('activity')) {
+      this.listeners.set('activity', new Set());
+    }
+    this.listeners.get('activity')!.add(callback);
+    return () => {
+      this.listeners.get('activity')?.delete(callback);
+    };
+  }
+
+  private notifyListeners(activity: Activity): void {
+    const callbacks = this.listeners.get('activity');
+    if (callbacks) {
+      callbacks.forEach(cb => {
+        try {
+          cb(activity);
+        } catch (error) {
+          console.error('[ActivityFeed] Listener error:', error);
+        }
+      });
+    }
+  }
+
+  private scheduleFallback(): void {
+    if (this.reconnectAttempts >= this.options.maxReconnectAttempts && !this.useFallback) {
+      console.log('[ActivityFeed] Switching to polling fallback');
+      this.useFallback = true;
+      this.startPollingFallback();
+    }
+    this.reconnectAttempts++;
+  }
+
+  private startPollingFallback(): void {
+    if (this.pollingTimer) return;
+    console.log('[ActivityFeed] Starting polling fallback');
+    this.pollingTimer = setInterval(async () => {
+      try {
+        const response = await fetch('https://solfoundry.org/api/activities?limit=20');
+        if (response.ok) {
+          const data = await response.json() as { activities?: Activity[] };
+          (data.activities || []).forEach(activity => this.notifyListeners(activity));
+        }
+      } catch (error) {
+        console.warn('[ActivityFeed] Polling fallback error:', error);
+      }
+    }, this.options.fallbackPollingInterval);
+  }
+
+  private stopPollingFallback(): void {
+    if (this.pollingTimer) {
+      clearInterval(this.pollingTimer);
+      this.pollingTimer = null;
+    }
+  }
+
+  getConnectionState(): 'connected' | 'disconnected' | 'fallback' | 'connecting' {
+    if (!this.socket) return 'disconnected';
+    if (this.useFallback) return 'fallback';
+    if (this.socket.connected) return 'connected';
+    return 'disconnected';
+  }
+}
+
+export const activityFeed = new ActivityFeedService();
+
+export default ActivityFeedService;

From 5acbabd39946e2823037ad8f5abfb756a81ee7ac Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Tue, 7 Apr 2026 00:56:19 +0800
Subject: [PATCH 09/19] feat: add gamification types and badge system (#839)

---
 frontend/src/types/gamification.ts | 110 +++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 frontend/src/types/gamification.ts

diff --git a/frontend/src/types/gamification.ts b/frontend/src/types/gamification.ts
new file mode 100644
index 00000000..543e788c
--- /dev/null
+++ b/frontend/src/types/gamification.ts
@@ -0,0 +1,110 @@
+export type BadgeType =
+  | 'first-blood'
+  | 'speed-demon'
+  | 'consistent'
+  | 'on-fire'
+  | 'top-hunter'
+  | 'all-rounder'
+  | 'big-earner'
+  | 'whale'
+  | 'OG'
+  | 'reviewer'
+  | 'streak-3'
+  | 'streak-7'
+  | 'streak-30';
+
+export type ContributorTier = 'bronze' | 'silver' | 'gold' | 'platinum';
+
+export interface Badge {
+  type: BadgeType;
+  label: string;
+  description: string;
+  tier: ContributorTier;
+  icon: string;
+}
+
+export const BADGE_DEFINITIONS: Record<BadgeType, Badge> = {
+  'first-blood': { type: 'first-blood', label: 'First Blood', description: 'Completed your first bounty', tier: 'bronze', icon: '⚔️' },
+  'speed-demon': { type: 'speed-demon', label: 'Speed Demon', description: 'Completed a bounty in under 24 hours', tier: 'silver', icon: '⚡' },
+  'consistent': { type: 'consistent', label: 'Consistent', description: '3+ bounties in a row without missing', tier: 'silver', icon: '🎯' },
+  'on-fire': { type: 'on-fire', label: 'On Fire', description: '7+ day contribution streak', tier: 'gold', icon: '🔥' },
+  'top-hunter': { type: 'top-hunter', label: 'Top Hunter', description: 'Ranked in top 10 of any leaderboard period', tier: 'gold', icon: '🏆' },
+  'all-rounder': { type: 'all-rounder', label: 'All-Rounder', description: 'Completed bounties in 5+ different skill areas', tier: 'silver', icon: '🧩' },
+  'big-earner': { type: 'big-earner', label: 'Big Earner', description: 'Earned $1,000+ in total bounties', tier: 'gold', icon: '💰' },
+  'whale': { type: 'whale', label: 'Whale', description: 'Earned $10,000+ in total bounties', tier: 'platinum', icon: '🐋' },
+  'OG': { type: 'OG', label: 'OG', description: 'Early SolFoundry contributor', tier: 'platinum', icon: '👑' },
+  'reviewer': { type: 'reviewer', label: 'Reviewer', description: 'Passed 5+ AI code reviews', tier: 'silver', icon: '🤖' },
+  'streak-3': { type: 'streak-3', label: '3-Day Streak', description: 'Contributed 3 days in a row', tier: 'bronze', icon: '📅' },
+  'streak-7': { type: 'streak-7', label: '7-Day Streak', description: 'Contributed 7 days in a row', tier: 'silver', icon: '🔥' },
+  'streak-30': { type: 'streak-30', label: '30-Day Streak', description: 'Contributed 30 days in a row', tier: 'gold', icon: '🚀' },
+};
+
+export const TIER_THRESHOLDS: Record<ContributorTier, number> = {
+  bronze: 0, silver: 1000, gold: 5000, platinum: 20000,
+};
+
+export const TIER_ORDER: ContributorTier[] = ['bronze', 'silver', 'gold', 'platinum'];
+
+export function computeTier(points: number): ContributorTier {
+  if (points >= TIER_THRESHOLDS.platinum) return 'platinum';
+  if (points >= TIER_THRESHOLDS.gold) return 'gold';
+  if (points >= TIER_THRESHOLDS.silver) return 'silver';
+  return 'bronze';
+}
+
+export function computeTierProgress(points: number): { tier: ContributorTier; progress: number; nextTierPoints: number } {
+  const tier = computeTier(points);
+  const tierIndex = TIER_ORDER.indexOf(tier);
+  const currentThreshold = TIER_THRESHOLDS[tier];
+  const nextTier = tierIndex < TIER_ORDER.length - 1 ? TIER_ORDER[tierIndex + 1] : undefined;
+  const nextThreshold = nextTier ? TIER_THRESHOLDS[nextTier] : currentThreshold + 1;
+  const progress = nextTier
+    ? Math.min(100, Math.round(((points - currentThreshold) / (nextThreshold - currentThreshold)) * 100))
+    : 100;
+  return { tier, progress, nextTierPoints: nextThreshold };
+}
+
+export function deriveBadges(entry: {
+  rank: number; streak?: number | null; earningsFndry: number;
+  topSkills: string[]; bountiesCompleted: number; points: number; reputation: number;
+}): BadgeType[] {
+  const badges: BadgeType[] = [];
+  if (entry.bountiesCompleted >= 1) badges.push('first-blood');
+  if (entry.streak && entry.streak >= 30) badges.push('streak-30', 'on-fire');
+  else if (entry.streak && entry.streak >= 7) badges.push('streak-7', 'on-fire');
+  else if (entry.streak && entry.streak >= 3) badges.push('streak-3', 'consistent');
+  if (entry.rank <= 10) badges.push('top-hunter');
+  if (entry.topSkills.length >= 5) badges.push('all-rounder');
+  if (entry.earningsFndry >= 10000) badges.push('whale', 'big-earner');
+  else if (entry.earningsFndry >= 1000) badges.push('big-earner');
+  if (entry.points >= 5000) badges.push('OG');
+  if (entry.reputation >= 500) badges.push('reviewer');
+  return [...new Set(badges)];
+}
+
+export function getTierColor(tier: ContributorTier): string {
+  switch (tier) {
+    case 'platinum': return 'text-purple-400';
+    case 'gold': return 'text-yellow-400';
+    case 'silver': return 'text-zinc-400';
+    case 'bronze': return 'text-orange-400';
+  }
+}
+
+export function getTierBgColor(tier: ContributorTier): string {
+  switch (tier) {
+    case 'platinum': return 'bg-purple-400/20 border-purple-400/40';
+    case 'gold': return 'bg-yellow-400/20 border-yellow-400/40';
+    case 'silver': return 'bg-zinc-400/20 border-zinc-400/40';
+    case 'bronze': return 'bg-orange-400/20 border-orange-400/40';
+  }
+}
+
+export function getTierLabel(tier: ContributorTier): string {
+  switch (tier) {
+    case 'platinum': return 'Platinum';
+    case 'gold': return 'Gold';
+    case 'silver': return 'Silver';
+    case 'bronze': return 'Bronze';
+  }
+}
\ No newline at end of file

From 07b37b43e6ff2205a11fb78da8652af4b3963a9f Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Tue, 7 Apr 2026 00:56:35 +0800
Subject: [PATCH 10/19] feat: add BadgeDisplay component (#839)

---
 .../components/gamification/BadgeDisplay.tsx  | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 frontend/src/components/gamification/BadgeDisplay.tsx

diff --git a/frontend/src/components/gamification/BadgeDisplay.tsx b/frontend/src/components/gamification/BadgeDisplay.tsx
new file mode 100644
index 00000000..4677650f
--- /dev/null
+++ b/frontend/src/components/gamification/BadgeDisplay.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import type { BadgeType } from '../../types/gamification';
+import { BADGE_DEFINITIONS } from '../../types/gamification';
+
+interface BadgeDisplayProps {
+  badges: BadgeType[];
+  size?: 'sm' | 'md';
+  maxVisible?: number;
+}
+
+export function BadgeDisplay({ badges, size = 'sm', maxVisible }: BadgeDisplayProps) {
+  const [showAll, setShowAll] = useState(false);
+  const visible = maxVisible && !showAll ? badges.slice(0, maxVisible) : badges;
+  const hidden = maxVisible && !showAll ? badges.slice(maxVisible) : [];
+  if (badges.length === 0) return null;
+  const iconSize = size === 'sm' ? 'w-4 h-4' : 'w-6 h-6';
+  return (
+    <div className="flex items-center gap-0.5 flex-wrap">
+      {visible.map((badgeType) => {
+        const def = BADGE_DEFINITIONS[badgeType];
+        if (!def) return null;
+        return (
+          <div key={badgeType} className="relative group cursor-default" title={`${def.label}: ${def.description}`}>
+            <span className={`${iconSize} flex items-center justify-center text-sm`}>{def.icon}</span>
+            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 hidden group-hover:block z-50 pointer-events-none">
+              <div className="bg-forge-800 border border-border rounded-lg px-2 py-1.5 whitespace-nowrap shadow-xl">
+                <div className="text-xs font-semibold text-text-primary">{def.label}</div>
+                <div className="text-[10px] text-text-muted mt-0.5">{def.description}</div>
+              </div>
+              <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-forge-800" />
+            </div>
+          </div>
+        );
+      })}
+      {hidden.length > 0 && (
+        <button onClick={() => setShowAll(!showAll)} className="text-[10px] text-text-muted hover:text-text-secondary transition-colors ml-0.5">
+          +{hidden.length}
+        </button>
+      )}
+    </div>
+  );
+}
\ No newline at end of file

From 2e52b647f931865d7e5f00f59e990e1ce935ac8a Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Tue, 7 Apr 2026 00:56:51 +0800
Subject: [PATCH 11/19] feat: add TierProgress component (#839)

---
 .../components/gamification/TierProgress.tsx  | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 frontend/src/components/gamification/TierProgress.tsx

diff --git a/frontend/src/components/gamification/TierProgress.tsx b/frontend/src/components/gamification/TierProgress.tsx
new file mode 100644
index 00000000..fae9fe3c
--- /dev/null
+++ b/frontend/src/components/gamification/TierProgress.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import type { ContributorTier } from '../../types/gamification';
+import { getTierColor, getTierBgColor, getTierLabel } from '../../types/gamification';
+
+interface TierProgressProps {
+  tier: ContributorTier;
+  progress: number;
+  points: number;
+  nextTierPoints: number;
+  compact?: boolean;
+}
+
+export function TierProgress({ tier, progress, points, nextTierPoints, compact = false }: TierProgressProps) {
+  const colorClass = getTierColor(tier);
+  const bgClass = getTierBgColor(tier);
+  const tierLabel = getTierLabel(tier);
+  if (compact) {
+    return (
+      <div className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full border text-xs font-semibold ${bgClass} ${colorClass}`}>
+        <span>{tierLabel}</span>
+      </div>
+    );
+  }
+  const barColor = tier === 'platinum' ? 'bg-gradient-to-r from-purple-500 to-pink-500'
+    : tier === 'gold' ? 'bg-yellow-400' : tier === 'silver' ? 'bg-zinc-400' : 'bg-orange-400';
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className={`text-sm font-bold ${colorClass}`}>{tierLabel}</span>
+          <span className="text-xs text-text-muted font-mono">{points.toLocaleString()} pts</span>
+        </div>
+        {tier !== 'platinum' && <span className="text-xs text-text-muted font-mono">{nextTierPoints.toLocaleString()} to next</span>}
+      </div>
+      <div className="w-full h-1.5 bg-forge-800 rounded-full overflow-hidden">
+        <div className={`h-full rounded-full transition-all duration-500 ${barColor}`} style={{ width: `${progress}%` }} />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

From fde19faef4650820067b7db53f9f009a4b61208a Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Tue, 7 Apr 2026 00:57:07 +0800
Subject: [PATCH 12/19] feat: add StreakDisplay component (#839)

---
 .../components/gamification/StreakDisplay.tsx | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 frontend/src/components/gamification/StreakDisplay.tsx

diff --git a/frontend/src/components/gamification/StreakDisplay.tsx b/frontend/src/components/gamification/StreakDisplay.tsx
new file mode 100644
index 00000000..f4aef21f
--- /dev/null
+++ b/frontend/src/components/gamification/StreakDisplay.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Flame, Zap } from 'lucide-react';
+
+interface StreakDisplayProps {
+  streak: number;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const STREAK_THRESHOLDS = [
+  { days: 30, label: 'Legendary', color: 'text-purple-400', glow: true },
+  { days: 14, label: 'On Fire', color: 'text-orange-400', glow: true },
+  { days: 7, label: 'Hot', color: 'text-yellow-400', glow: false },
+  { days: 3, label: 'Warming Up', color: 'text-amber-400', glow: false },
+];
+
+export function StreakDisplay({ streak, size = 'md' }: StreakDisplayProps) {
+  if (!streak || streak <= 0) return <span className="text-text-muted text-xs font-mono">—</span>;
+  const milestone = STREAK_THRESHOLDS.find((m) => streak >= m.days) ?? STREAK_THRESHOLDS[STREAK_THRESHOLDS.length - 1];
+  const sizeClasses = { sm: 'text-xs gap-1', md: 'text-sm gap-1.5', lg: 'text-base gap-2' };
+  const iconSizes = { sm: 'w-3.5 h-3.5', md: 'w-4 h-4', lg: 'w-5 h-5' };
+  const IconComponent = streak >= 7 ? Flame : Zap;
+  return (
+    <div className={`inline-flex items-center ${sizeClasses[size]} ${milestone.color} ${milestone.glow ? 'animate-pulse-glow' : ''}`} title={`${streak}-day streak: ${milestone.label}`}>
+      <IconComponent className={`${iconSizes[size]} ${streak >= 14 ? 'fill-current' : ''}`} />
+      <span className="font-mono font-semibold">{streak}d</span>
+    </div>
+  );
+}
\ No newline at end of file

From 4596cbf002a995d9ad51d8e0a9672d17e909a231 Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Tue, 7 Apr 2026 00:57:08 +0800
Subject: [PATCH 13/19] feat: add gamification components index (#839)

---
 frontend/src/components/gamification/index.ts | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 frontend/src/components/gamification/index.ts

diff --git a/frontend/src/components/gamification/index.ts b/frontend/src/components/gamification/index.ts
new file mode 100644
index 00000000..ee261846
--- /dev/null
+++ b/frontend/src/components/gamification/index.ts
@@ -0,0 +1,3 @@
+export { BadgeDisplay } from './BadgeDisplay';
+export { TierProgress } from './TierProgress';
+export { StreakDisplay } from './StreakDisplay';

From a2dd805e006d400f46b7781b28c026364825407b Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Tue, 7 Apr 2026 00:57:32 +0800
Subject: [PATCH 14/19] feat: add gamification to LeaderboardTable (#839)

---
 .../leaderboard/LeaderboardTable.tsx          | 106 +++++++-----------
 1 file changed, 43 insertions(+), 63 deletions(-)

diff --git a/frontend/src/components/leaderboard/LeaderboardTable.tsx b/frontend/src/components/leaderboard/LeaderboardTable.tsx
index e37db657..583cde29 100644
--- a/frontend/src/components/leaderboard/LeaderboardTable.tsx
+++ b/frontend/src/components/leaderboard/LeaderboardTable.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import { motion } from 'framer-motion';
-import { Flame } from 'lucide-react';
 import type { LeaderboardEntry } from '../../types/leaderboard';
 import { LANG_COLORS } from '../../lib/utils';
 import { fadeIn } from '../../lib/animations';
+import { BadgeDisplay } from '../gamification/BadgeDisplay';
+import { StreakDisplay } from '../gamification/StreakDisplay';
+import { TierProgress } from '../gamification/TierProgress';
+import { deriveBadges, computeTierProgress } from '../../types/gamification';
 
 interface LeaderboardTableProps {
   entries: LeaderboardEntry[];
@@ -11,18 +14,12 @@ interface LeaderboardTableProps {
 
 function SkillDot({ skill }: { skill: string }) {
   return (
-    <span
-      className="inline-block w-2.5 h-2.5 rounded-full"
-      style={{ backgroundColor: LANG_COLORS[skill] ?? '#5C5C78' }}
-      title={skill}
-    />
+    <span className="inline-block w-2.5 h-2.5 rounded-full" style={{ backgroundColor: LANG_COLORS[skill] ?? '#5C5C78' }} title={skill} />
   );
 }
 
 export function LeaderboardTable({ entries }: LeaderboardTableProps) {
-  // Show ranks 4+ in the table (top 3 are in podium)
   const tableEntries = entries.slice(3);
-
   if (tableEntries.length === 0) {
     return (
       <div className="max-w-4xl mx-auto mt-6 rounded-xl border border-border bg-forge-900 p-8 text-center">
@@ -30,71 +27,54 @@ export function LeaderboardTable({ entries }: LeaderboardTableProps) {
       </div>
     );
   }
-
   return (
-    <motion.div
-      variants={fadeIn}
-      initial="initial"
-      animate="animate"
-      className="max-w-4xl mx-auto mt-6 rounded-xl border border-border bg-forge-900 overflow-hidden"
-    >
-      {/* Header */}
+    <motion.div variants={fadeIn} initial="initial" animate="animate" className="max-w-4xl mx-auto mt-6 rounded-xl border border-border bg-forge-900 overflow-hidden">
       <div className="flex items-center px-4 py-3 border-b border-border/50 text-xs font-semibold text-text-muted uppercase tracking-wider">
         <div className="w-[60px] text-center">Rank</div>
         <div className="flex-1">User</div>
+        <div className="w-[80px] text-center hidden md:block">Tier</div>
+        <div className="w-[80px] text-center">Badges</div>
         <div className="w-[100px] text-center">Bounties</div>
         <div className="w-[120px] text-right">Earned</div>
         <div className="w-[80px] text-center hidden sm:block">Streak</div>
       </div>
-
-      {tableEntries.map((entry) => (
-        <motion.div
-          key={entry.username}
-          layout
-          layoutId={`leaderboard-${entry.username}`}
-          className="flex items-center px-4 py-3 border-b border-border/30 last:border-b-0 hover:bg-forge-850 transition-colors duration-150 cursor-pointer"
-        >
-          <div className="w-[60px] text-center font-mono text-sm text-text-muted">
-            #{entry.rank}
-          </div>
-          <div className="flex-1 flex items-center gap-3 min-w-0">
-            {entry.avatarUrl ? (
-              <img src={entry.avatarUrl} alt="" className="w-6 h-6 rounded-full flex-shrink-0" />
-            ) : (
-              <div className="w-6 h-6 rounded-full bg-forge-700 flex-shrink-0 flex items-center justify-center">
-                <span className="font-mono text-xs text-text-muted">{entry.username[0]?.toUpperCase()}</span>
-              </div>
-            )}
-            <div className="min-w-0">
-              <span className="font-sans text-sm font-medium text-text-primary truncate block">
-                {entry.username}
-              </span>
-              {entry.topSkills?.length > 0 && (
-                <div className="flex items-center gap-1 mt-0.5">
-                  {entry.topSkills.slice(0, 4).map((s) => (
-                    <SkillDot key={s} skill={s} />
-                  ))}
+      {tableEntries.map((entry) => {
+        const badges = deriveBadges(entry);
+        const { tier, progress, nextTierPoints } = computeTierProgress(entry.points);
+        return (
+          <motion.div key={entry.username} layout layoutId={`leaderboard-${entry.username}`} className="flex items-center px-4 py-3 border-b border-border/30 last:border-b-0 hover:bg-forge-850 transition-colors duration-150 cursor-pointer">
+            <div className="w-[60px] text-center font-mono text-sm text-text-muted">#{entry.rank}</div>
+            <div className="flex-1 flex items-center gap-3 min-w-0">
+              {entry.avatarUrl ? (
+                <img src={entry.avatarUrl} alt="" className="w-6 h-6 rounded-full flex-shrink-0" />
+              ) : (
+                <div className="w-6 h-6 rounded-full bg-forge-700 flex-shrink-0 flex items-center justify-center">
+                  <span className="font-mono text-xs text-text-muted">{entry.username[0]?.toUpperCase()}</span>
                 </div>
               )}
+              <div className="min-w-0">
+                <span className="font-sans text-sm font-medium text-text-primary truncate block">{entry.username}</span>
+                {entry.topSkills?.length > 0 && (
+                  <div className="flex items-center gap-1 mt-0.5">
+                    {entry.topSkills.slice(0, 4).map((s) => <SkillDot key={s} skill={s} />)}
+                  </div>
+                )}
+              </div>
             </div>
-          </div>
-          <div className="w-[100px] text-center font-mono text-sm text-text-secondary">
-            {entry.bountiesCompleted}
-          </div>
-          <div className="w-[120px] text-right font-mono text-sm font-semibold text-emerald">
-            ${entry.earningsFndry.toLocaleString()}
-          </div>
-          <div className="w-[80px] text-center hidden sm:block">
-            {entry.streak && entry.streak > 0 ? (
-              <span className="font-mono text-sm text-status-warning inline-flex items-center gap-1">
-                <Flame className="w-3.5 h-3.5" /> {entry.streak}
-              </span>
-            ) : (
-              <span className="text-text-muted">—</span>
-            )}
-          </div>
-        </motion.div>
-      ))}
+            <div className="w-[80px] text-center hidden md:block">
+              <TierProgress tier={tier} progress={progress} points={entry.points} nextTierPoints={nextTierPoints} compact />
+            </div>
+            <div className="w-[80px] text-center">
+              <BadgeDisplay badges={badges} size="sm" maxVisible={3} />
+            </div>
+            <div className="w-[100px] text-center font-mono text-sm text-text-secondary">{entry.bountiesCompleted}</div>
+            <div className="w-[120px] text-right font-mono text-sm font-semibold text-emerald">${entry.earningsFndry.toLocaleString()}</div>
+            <div className="w-[80px] text-center hidden sm:block">
+              <StreakDisplay streak={entry.streak ?? 0} size="sm" />
+            </div>
+          </motion.div>
+        );
+      })}
     </motion.div>
   );
-}
+}
\ No newline at end of file

From cc2265fa310db91e7de50a7d110057f911b32564 Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Tue, 7 Apr 2026 00:57:54 +0800
Subject: [PATCH 15/19] feat: add gamification to PodiumCards (#839)

---
 .../components/leaderboard/PodiumCards.tsx    | 84 ++++++-------------
 1 file changed, 26 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/leaderboard/PodiumCards.tsx b/frontend/src/components/leaderboard/PodiumCards.tsx
index f36d233c..e1164ea8 100644
--- a/frontend/src/components/leaderboard/PodiumCards.tsx
+++ b/frontend/src/components/leaderboard/PodiumCards.tsx
@@ -3,6 +3,10 @@ import { motion } from 'framer-motion';
 import { Crown } from 'lucide-react';
 import type { LeaderboardEntry } from '../../types/leaderboard';
 import { staggerContainer, staggerItem } from '../../lib/animations';
+import { BadgeDisplay } from '../gamification/BadgeDisplay';
+import { StreakDisplay } from '../gamification/StreakDisplay';
+import { TierProgress } from '../gamification/TierProgress';
+import { deriveBadges, computeTierProgress } from '../../types/gamification';
 
 interface PodiumCardsProps {
   entries: LeaderboardEntry[];
@@ -12,54 +16,35 @@ function PodiumCard({ entry, rank }: { entry: LeaderboardEntry; rank: number })
   const isGold = rank === 1;
   const isSilver = rank === 2;
   const isBronze = rank === 3;
-
-  const borderClass = isGold
-    ? 'border-yellow-500/30 shadow-lg shadow-yellow-500/10'
-    : isSilver
-    ? 'border-zinc-400/30'
-    : 'border-orange-600/30';
-
-  const rankColor = isGold
-    ? 'text-yellow-400'
-    : isSilver
-    ? 'text-zinc-400'
-    : 'text-orange-500';
-
+  const borderClass = isGold ? 'border-yellow-500/30 shadow-lg shadow-yellow-500/10' : isSilver ? 'border-zinc-400/30' : 'border-orange-600/30';
+  const rankColor = isGold ? 'text-yellow-400' : isSilver ? 'text-zinc-400' : 'text-orange-500';
   const avatarBorderClass = isGold ? 'border-yellow-500/50' : 'border-zinc-600';
   const avatarSize = isGold ? 'w-14 h-14' : 'w-12 h-12';
   const padding = isGold ? 'py-8 px-6' : 'py-6 px-6';
+  const badges = deriveBadges(entry);
+  const { tier, progress, nextTierPoints } = computeTierProgress(entry.points);
 
   return (
-    <motion.div
-      variants={staggerItem}
-      className={`relative flex flex-col items-center rounded-xl border bg-forge-900 ${borderClass} ${padding} min-w-[140px]`}
-    >
-      {/* Crown for #1 */}
-      {isGold && (
-        <Crown className="absolute -top-4 text-yellow-400 w-6 h-6" />
-      )}
-
-      <span className={`absolute -top-3 font-display text-sm font-bold ${rankColor}`}>
-        #{rank}
-      </span>
-
+    <motion.div variants={staggerItem} className={`relative flex flex-col items-center rounded-xl border bg-forge-900 ${borderClass} ${padding} min-w-[160px]`}>
+      {isGold && <Crown className="absolute -top-4 text-yellow-400 w-6 h-6" />}
+      <span className={`absolute -top-3 font-display text-sm font-bold ${rankColor}`}>#{rank}</span>
       {entry.avatarUrl ? (
-        <img
-          src={entry.avatarUrl}
-          alt={entry.username}
-          className={`${avatarSize} rounded-full border-2 ${avatarBorderClass}`}
-        />
+        <img src={entry.avatarUrl} alt={entry.username} className={`${avatarSize} rounded-full border-2 ${avatarBorderClass}`} />
       ) : (
         <div className={`${avatarSize} rounded-full border-2 ${avatarBorderClass} bg-forge-700 flex items-center justify-center`}>
           <span className="font-display text-lg text-text-muted">{entry.username[0]?.toUpperCase()}</span>
         </div>
       )}
-
-      <span className="mt-3 font-sans text-sm font-semibold text-text-primary">{entry.username}</span>
+      <span className="mt-2 font-sans text-sm font-semibold text-text-primary">{entry.username}</span>
+      {badges.length > 0 && (
+        <div className="mt-1"><BadgeDisplay badges={badges} size="sm" maxVisible={4} /></div>
+      )}
       <span className="mt-1 font-mono text-xs text-text-muted">{entry.bountiesCompleted} bounties</span>
-      <span className="mt-1 font-mono text-lg font-semibold text-emerald">
-        ${entry.earningsFndry.toLocaleString()}
-      </span>
+      {entry.streak && entry.streak > 0 && (
+        <div className="mt-1"><StreakDisplay streak={entry.streak} size="sm" /></div>
+      )}
+      <span className="mt-1 font-mono text-lg font-semibold text-emerald">${entry.earningsFndry.toLocaleString()}</span>
+      <div className="mt-1.5"><TierProgress tier={tier} progress={progress} points={entry.points} nextTierPoints={nextTierPoints} compact /></div>
     </motion.div>
   );
 }
@@ -67,28 +52,11 @@ function PodiumCard({ entry, rank }: { entry: LeaderboardEntry; rank: number })
 export function PodiumCards({ entries }: PodiumCardsProps) {
   const top3 = entries.slice(0, 3);
   if (top3.length < 1) return null;
-
-  // Reorder: [#2, #1, #3] for podium visual (center is tallest)
-  const ordered =
-    top3.length === 3
-      ? [top3[1], top3[0], top3[2]]
-      : top3.length === 2
-      ? [top3[1], top3[0]]
-      : [top3[0]];
-
-  const ranks =
-    top3.length === 3 ? [2, 1, 3] : top3.length === 2 ? [2, 1] : [1];
-
+  const ordered = top3.length === 3 ? [top3[1], top3[0], top3[2]] : top3.length === 2 ? [top3[1], top3[0]] : [top3[0]];
+  const ranks = top3.length === 3 ? [2, 1, 3] : top3.length === 2 ? [2, 1] : [1];
   return (
-    <motion.div
-      variants={staggerContainer}
-      initial="initial"
-      animate="animate"
-      className="flex items-end justify-center gap-4 md:gap-6 mb-12"
-    >
-      {ordered.map((entry, i) => (
-        <PodiumCard key={entry.username} entry={entry} rank={ranks[i]} />
-      ))}
+    <motion.div variants={staggerContainer} initial="initial" animate="animate" className="flex items-end justify-center gap-4 md:gap-6 mb-12">
+      {ordered.map((entry, i) => <PodiumCard key={entry.username} entry={entry} rank={ranks[i]} />)}
     </motion.div>
   );
-}
+}
\ No newline at end of file

From 4be7d4492839a6502426fe8dfc7f328b7b37982e Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Tue, 7 Apr 2026 00:58:19 +0800
Subject: [PATCH 16/19] feat: add gamification info section to LeaderboardPage
 (#839)

---
 frontend/src/pages/LeaderboardPage.tsx | 67 +++++++++++++++++---------
 1 file changed, 45 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/LeaderboardPage.tsx b/frontend/src/pages/LeaderboardPage.tsx
index f79caff9..09187405 100644
--- a/frontend/src/pages/LeaderboardPage.tsx
+++ b/frontend/src/pages/LeaderboardPage.tsx
@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
+import { Info } from 'lucide-react';
 import { PageLayout } from '../components/layout/PageLayout';
 import { PodiumCards } from '../components/leaderboard/PodiumCards';
 import { LeaderboardTable } from '../components/leaderboard/LeaderboardTable';
 import { useLeaderboard } from '../hooks/useLeaderboard';
 import type { TimePeriod } from '../types/leaderboard';
 import { fadeIn } from '../lib/animations';
+import { BADGE_DEFINITIONS, TIER_THRESHOLDS, getTierColor, getTierLabel, TIER_ORDER } from '../types/gamification';
 
 const PERIODS: { label: string; value: TimePeriod }[] = [
   { label: '7d', value: '7d' },
@@ -17,56 +19,77 @@ const PERIODS: { label: string; value: TimePeriod }[] = [
 export function LeaderboardPage() {
   const [period, setPeriod] = useState<TimePeriod>('all');
   const { data: entries = [], isLoading, isError } = useLeaderboard(period);
+  const [showGamificationInfo, setShowGamificationInfo] = useState(false);
 
   return (
     <PageLayout>
       <motion.div variants={fadeIn} initial="initial" animate="animate" className="max-w-5xl mx-auto px-4 py-12">
-        <div className="text-center mb-10">
+        <div className="text-center mb-6">
           <h1 className="font-display text-4xl font-bold text-text-primary mb-3">Leaderboard</h1>
           <p className="text-text-secondary">Top contributors ranked by bounties completed</p>
         </div>
 
-        {/* Time filter */}
+        <div className="flex justify-center mb-4">
+          <button onClick={() => setShowGamificationInfo(!showGamificationInfo)} className="flex items-center gap-2 text-xs text-text-muted hover:text-text-secondary transition-colors">
+            <Info className="w-3.5 h-3.5" />
+            {showGamificationInfo ? 'Hide' : 'Show'} tier & badge info
+          </button>
+        </div>
+
+        {showGamificationInfo && (
+          <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="max-w-4xl mx-auto mb-8 p-4 rounded-xl border border-border bg-forge-900/80">
+            <div className="mb-4">
+              <h3 className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-3">Tiers</h3>
+              <div className="flex flex-wrap gap-2">
+                {TIER_ORDER.map((tier) => (
+                  <div key={tier} className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-semibold ${getTierColor(tier)} bg-forge-800/50 border-current/20`}>
+                    <span>{getTierLabel(tier)}</span>
+                    <span className="text-text-muted font-mono">{TIER_THRESHOLDS[tier].toLocaleString()}+ pts</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div>
+              <h3 className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-3">Badges</h3>
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
+                {Object.values(BADGE_DEFINITIONS).map((badge) => (
+                  <div key={badge.type} className="flex items-center gap-2 text-xs">
+                    <span className="text-base">{badge.icon}</span>
+                    <div>
+                      <div className="text-text-primary font-medium">{badge.label}</div>
+                      <div className="text-text-muted text-[10px]">{badge.description}</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        )}
+
         <div className="flex items-center justify-center mb-10">
           <div className="flex items-center gap-1 p-1 rounded-lg bg-forge-800">
             {PERIODS.map((p) => (
-              <button
-                key={p.value}
-                onClick={() => setPeriod(p.value)}
-                className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-150 ${
-                  period === p.value
-                    ? 'bg-forge-700 text-text-primary'
-                    : 'text-text-muted hover:text-text-secondary'
-                }`}
-              >
+              <button key={p.value} onClick={() => setPeriod(p.value)} className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-150 ${period === p.value ? 'bg-forge-700 text-text-primary' : 'text-text-muted hover:text-text-secondary'}`}>
                 {p.label}
               </button>
             ))}
           </div>
         </div>
 
-        {/* Loading */}
         {isLoading && (
           <div className="flex justify-center py-16">
             <div className="w-8 h-8 rounded-full border-2 border-emerald border-t-transparent animate-spin" />
           </div>
         )}
 
-        {/* Error */}
         {isError && !isLoading && (
-          <div className="text-center py-12">
-            <p className="text-text-muted">Could not load leaderboard data.</p>
-          </div>
+          <div className="text-center py-12"><p className="text-text-muted">Could not load leaderboard data.</p></div>
         )}
 
-        {/* Empty state */}
         {!isLoading && !isError && entries.length === 0 && (
-          <div className="text-center py-12">
-            <p className="text-text-muted">No contributors ranked yet for this period.</p>
-          </div>
+          <div className="text-center py-12"><p className="text-text-muted">No contributors ranked yet for this period.</p></div>
         )}
 
-        {/* Podium + table */}
         {!isLoading && entries.length > 0 && (
           <>
             <PodiumCards entries={entries} />
@@ -76,4 +99,4 @@ export function LeaderboardPage() {
       </motion.div>
     </PageLayout>
   );
-}
+}
\ No newline at end of file

From 1322914429a2a8cf39feead64313d8ef30225bee Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Tue, 7 Apr 2026 01:02:26 +0800
Subject: [PATCH 17/19] feat: add HeroBackground canvas particle system (#850)

---
 .../src/components/home/HeroBackground.tsx    | 184 ++++++++++++++++++
 1 file changed, 184 insertions(+)
 create mode 100644 frontend/src/components/home/HeroBackground.tsx

diff --git a/frontend/src/components/home/HeroBackground.tsx b/frontend/src/components/home/HeroBackground.tsx
new file mode 100644
index 00000000..5c72bfb2
--- /dev/null
+++ b/frontend/src/components/home/HeroBackground.tsx
@@ -0,0 +1,184 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+
+interface Particle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  life: number;
+  maxLife: number;
+  size: number;
+  color: string;
+  type: 'spark' | 'ember' | 'droplet';
+}
+
+const COLORS = {
+  spark: ['#FFD700', '#FFA500', '#FF6B00', '#FF4500'],
+  ember: ['#FF4444', '#FF6B35', '#F7931E', '#FFD700'],
+  droplet: ['#00E676', '#69F0AE', '#7C3AED', '#E040FB'],
+};
+
+function lerp(a: number, b: number, t: number) {
+  return a + (b - a) * t;
+}
+
+export function HeroBackground() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const particlesRef = useRef<Particle[]>([]);
+  const animFrameRef = useRef<number>(0);
+  const mouseRef = useRef({ x: 0, y: 0 });
+
+  const createParticle = useCallback((canvas: HTMLCanvasElement, forced?: boolean): Particle => {
+    const types: Array<'spark' | 'ember' | 'droplet'> = ['spark', 'ember', 'droplet'];
+    const type = types[Math.floor(Math.random() * types.length)] as 'spark' | 'ember' | 'droplet';
+    const colorSet = COLORS[type];
+    const color = colorSet[Math.floor(Math.random() * colorSet.length)];
+
+    // Sparks come from bottom center (forge), embers float up, droplets fall
+    let x: number, y: number, vx: number, vy: number;
+
+    if (type === 'spark') {
+      x = canvas.width * 0.5 + (Math.random() - 0.5) * canvas.width * 0.3;
+      y = canvas.height * 0.85;
+      vx = (Math.random() - 0.5) * 3;
+      vy = -(Math.random() * 4 + 2);
+    } else if (type === 'ember') {
+      x = Math.random() * canvas.width;
+      y = canvas.height + 10;
+      vx = (Math.random() - 0.5) * 1.5;
+      vy = -(Math.random() * 2 + 0.5);
+    } else {
+      // droplet - ambient
+      x = Math.random() * canvas.width;
+      y = Math.random() * canvas.height;
+      vx = (Math.random() - 0.5) * 0.5;
+      vy = Math.random() * 0.3 + 0.1;
+    }
+
+    const size = type === 'spark' ? Math.random() * 3 + 1
+      : type === 'ember' ? Math.random() * 4 + 2
+      : Math.random() * 3 + 1;
+
+    const maxLife = type === 'spark' ? 60 + Math.random() * 40
+      : type === 'ember' ? 120 + Math.random() * 80
+      : 200 + Math.random() * 100;
+
+    return { x, y, vx, vy, life: maxLife, maxLife, size, color, type };
+  }, []);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    let width = canvas.offsetWidth;
+    let height = canvas.offsetHeight;
+    canvas.width = width;
+    canvas.height = height;
+
+    // Initialize particles
+    for (let i = 0; i < 40; i++) {
+      particlesRef.current.push(createParticle(canvas, true));
+    }
+
+    let lastTime = 0;
+    const animate = (timestamp: number) => {
+      const delta = timestamp - lastTime;
+      lastTime = timestamp;
+
+      // Adjust spawn rate based on delta (target 60fps)
+      const spawnChance = delta > 30 ? 0.4 : 0.15;
+
+      // Spawn new particles
+      if (Math.random() < spawnChance && particlesRef.current.length < 80) {
+        particlesRef.current.push(createParticle(canvas));
+      }
+
+      // Clear with fade
+      ctx.fillStyle = 'rgba(10, 10, 15, 0.15)';
+      ctx.fillRect(0, 0, width, height);
+
+      // Update and draw particles
+      particlesRef.current = particlesRef.current.filter((p) => {
+        p.life--;
+
+        // Physics
+        if (p.type === 'spark') {
+          p.vy += 0.05; // slight gravity
+          p.vx *= 0.99;
+        } else if (p.type === 'ember') {
+          p.vx += (Math.random() - 0.5) * 0.1; // drift
+          p.vy *= 0.995;
+        } else {
+          p.x += p.vx;
+          p.y += p.vy;
+          if (p.y > height) p.y = 0;
+          if (p.x < 0) p.x = width;
+          if (p.x > width) p.x = 0;
+        }
+
+        p.x += p.vx;
+        p.y += p.vy;
+
+        const alpha = Math.max(0, p.life / p.maxLife);
+        const size = p.size * alpha;
+
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, size, 0, Math.PI * 2);
+
+        if (p.type === 'spark') {
+          // Glow effect for sparks
+          const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, size * 3);
+          gradient.addColorStop(0, p.color + Math.round(alpha * 255).toString(16).padStart(2, '0'));
+          gradient.addColorStop(1, 'transparent');
+          ctx.fillStyle = gradient;
+          ctx.arc(p.x, p.y, size * 3, 0, Math.PI * 2);
+        } else {
+          ctx.fillStyle = p.color + Math.round(alpha * 200).toString(16).padStart(2, '0');
+        }
+
+        ctx.fill();
+
+        return p.life > 0;
+      });
+
+      animFrameRef.current = requestAnimationFrame(animate);
+    };
+
+    animFrameRef.current = requestAnimationFrame(animate);
+
+    const handleResize = () => {
+      width = canvas.offsetWidth;
+      height = canvas.offsetHeight;
+      canvas.width = width;
+      canvas.height = height;
+    };
+
+    const handleMouse = (e: MouseEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      mouseRef.current = {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      };
+    };
+
+    window.addEventListener('resize', handleResize);
+    canvas.addEventListener('mousemove', handleMouse);
+
+    return () => {
+      cancelAnimationFrame(animFrameRef.current);
+      window.removeEventListener('resize', handleResize);
+      canvas.removeEventListener('mousemove', handleMouse);
+    };
+  }, [createParticle]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="absolute inset-0 w-full h-full pointer-events-none"
+      style={{ zIndex: 0 }}
+    />
+  );
+}
\ No newline at end of file

From e1dcf51af783e050a23deb67529507596cdf43f2 Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Tue, 7 Apr 2026 01:04:39 +0800
Subject: [PATCH 18/19] feat: integrate HeroBackground canvas animation (#850)

---
 frontend/src/components/home/HeroSection.tsx | 181 +++----------------
 1 file changed, 30 insertions(+), 151 deletions(-)

diff --git a/frontend/src/components/home/HeroSection.tsx b/frontend/src/components/home/HeroSection.tsx
index e3730716..6c0ac483 100644
--- a/frontend/src/components/home/HeroSection.tsx
+++ b/frontend/src/components/home/HeroSection.tsx
@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { motion, useInView, animate, useMotionValue } from 'framer-motion';
 import { useStats } from '../../hooks/useStats';
 import { getGitHubAuthorizeUrl } from '../../api/auth';
 import { useAuth } from '../../hooks/useAuth';
 import { buttonHover, fadeIn } from '../../lib/animations';
+import { HeroBackground } from './HeroBackground';
 
 const GitHubIcon = () => (
   <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
@@ -12,66 +13,28 @@ const GitHubIcon = () => (
   </svg>
 );
 
-function EmberParticles({ count = 5 }: { count?: number }) {
-  const particles = Array.from({ length: count }, (_, i) => ({
-    id: i,
-    left: `${15 + i * 15}%`,
-    delay: `${i * 0.8}s`,
-    color: i % 2 === 0 ? '#00E676' : '#E040FB',
-    size: 2 + (i % 3),
-  }));
-
-  return (
-    <>
-      {particles.map((p) => (
-        <div
-          key={p.id}
-          className="absolute pointer-events-none rounded-full animate-ember opacity-60"
-          style={{
-            left: p.left,
-            bottom: '30%',
-            width: p.size,
-            height: p.size,
-            backgroundColor: p.color,
-            animationDelay: p.delay,
-          }}
-        />
-      ))}
-    </>
-  );
-}
-
 function CountUp({ target, prefix = '', suffix = '' }: { target: number; prefix?: string; suffix?: string }) {
   const ref = React.useRef<HTMLSpanElement>(null);
   const motionValue = useMotionValue(0);
   const inView = useInView(ref, { once: true });
-
   useEffect(() => {
     if (!inView) return;
-    const controls = animate(motionValue, target, {
-      duration: 1.5,
-      ease: 'easeOut',
-    });
+    const controls = animate(motionValue, target, { duration: 1.5, ease: 'easeOut' });
     const unsubscribe = motionValue.on('change', (v) => {
-      if (ref.current) {
-        ref.current.textContent = `${prefix}${Math.round(v).toLocaleString()}${suffix}`;
-      }
+      if (ref.current) ref.current.textContent = prefix + Math.round(v).toLocaleString() + suffix;
     });
     return () => { controls.stop(); unsubscribe(); };
   }, [inView, target, motionValue, prefix, suffix]);
-
   return <span ref={ref}>{prefix}0{suffix}</span>;
 }
 
 export function HeroSection() {
   const { data: stats } = useStats();
   const { isAuthenticated } = useAuth();
-  const navigate = useNavigate();
   const [typewriterDone, setTypewriterDone] = useState(false);
   const [resultLinesVisible, setResultLinesVisible] = useState(false);
 
   useEffect(() => {
-    // Typewriter takes ~3s (0.5s delay + 2.5s), then show result lines
     const t1 = setTimeout(() => setTypewriterDone(true), 3100);
     const t2 = setTimeout(() => setResultLinesVisible(true), 3400);
     return () => { clearTimeout(t1); clearTimeout(t2); };
@@ -88,152 +51,68 @@ export function HeroSection() {
 
   return (
     <section className="relative min-h-[90vh] flex flex-col items-center justify-center px-4 pt-24 pb-16 overflow-hidden">
-      {/* Background layers */}
-      <div className="absolute inset-0 bg-grid-forge bg-grid-forge pointer-events-none" style={{ backgroundSize: '40px 40px' }} />
-      <div className="absolute inset-0 bg-gradient-hero pointer-events-none" />
-      <EmberParticles count={5} />
+      <HeroBackground />
+      <div className="absolute inset-0 bg-grid-forge pointer-events-none" />
+      <div className="absolute inset-0 bg-gradient-hero pointer-events-none animate-gradient-shift" />
+      <div className="absolute top-0 left-1/4 w-96 h-96 rounded-full pointer-events-none" style="background: radial-gradient(circle, rgba(255,107,0,0.08) 0%, transparent 70%)" />
+      <div className="absolute top-20 right-1/4 w-64 h-64 rounded-full pointer-events-none" style="background: radial-gradient(circle, rgba(224,64,251,0.06) 0%, transparent 70%)" />
 
-      {/* Terminal card */}
-      <motion.div
-        variants={fadeIn}
-        initial="initial"
-        animate="animate"
-        className="w-full max-w-xl rounded-xl border border-border bg-forge-900/90 backdrop-blur-sm overflow-hidden shadow-2xl shadow-black/50"
-      >
-        {/* Title bar */}
+      <motion.div variants={fadeIn} initial="initial" animate="animate" className="relative w-full max-w-xl rounded-xl border border-border bg-forge-900/90 backdrop-blur-sm overflow-hidden shadow-2xl shadow-black/50" style="z-index: 10">
         <div className="flex items-center gap-2 px-4 py-2.5 bg-forge-800 border-b border-border">
           <div className="flex gap-1.5">
             <span className="w-3 h-3 rounded-full bg-status-error/80" />
             <span className="w-3 h-3 rounded-full bg-status-warning/80" />
             <span className="w-3 h-3 rounded-full bg-status-success/80" />
           </div>
-          <span className="font-mono text-xs text-text-muted ml-2">solfoundry — terminal</span>
+          <span className="font-mono text-xs text-text-muted ml-2">solfoundry › terminal</span>
         </div>
-
-        {/* Terminal body */}
         <div className="p-5 font-mono text-sm leading-relaxed">
           <div className="overflow-hidden">
             <span className="text-emerald">$ </span>
-            <span className="text-text-secondary overflow-hidden whitespace-nowrap inline-block animate-typewriter">
-              forge bounty --reward 100 --lang typescript --tier 2
-            </span>
-            {typewriterDone && (
-              <span className="inline-block w-2 h-5 bg-emerald animate-blink ml-0.5 align-middle" />
-            )}
+            <span className="text-text-secondary overflow-hidden whitespace-nowrap inline-block animate-typewriter">forge bounty --reward 100 --lang typescript --tier 2</span>
+            {typewriterDone && <span className="inline-block w-2 h-5 bg-emerald animate-blink ml-0.5 align-middle" />}
           </div>
-
           {resultLinesVisible && (
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: 0.3 }}
-              className="mt-3 space-y-1.5"
-            >
-              {[
-                { text: '✓ Bounty created: #142', delay: 0 },
-                { text: '✓ Escrow funded: 100 USDC', delay: 0.3 },
-                { text: '✓ 3 contributors notified', delay: 0.6 },
-              ].map((line, i) => (
-                <motion.div
-                  key={i}
-                  initial={{ opacity: 0, x: -8 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ delay: line.delay, duration: 0.3 }}
-                  className="text-emerald"
-                >
-                  {line.text}
-                </motion.div>
+            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }} className="mt-3 space-y-1.5">
+              {[{ text: '? Bounty created: #142', delay: 0 }, { text: '? Escrow funded: 100 USDC', delay: 0.3 }, { text: '? 3 contributors notified', delay: 0.6 }].map((line, i) => (
+                <motion.div key={i} initial={{ opacity: 0, x: -8 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: line.delay, duration: 0.3 }} className="text-emerald">{line.text}</motion.div>
               ))}
             </motion.div>
           )}
         </div>
       </motion.div>
 
-      {/* Headline */}
-      <motion.h1
-        initial={{ opacity: 0, y: 16 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.3, duration: 0.5 }}
-        className="font-display text-4xl md:text-5xl font-bold text-text-primary tracking-wider text-center mt-10"
-      >
-        THE AI-POWERED BOUNTY{' '}
-        <span className="text-emerald">FORGE</span>
+      <motion.h1 initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.3, duration: 0.5 }} className="relative font-display text-4xl md:text-5xl font-bold text-text-primary tracking-wider text-center mt-10" style="z-index: 10">
+        THE AI-POWERED BOUNTY <span className="text-emerald">FORGE</span>
       </motion.h1>
 
-      <motion.p
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.45, duration: 0.5 }}
-        className="font-sans text-lg text-text-secondary text-center mt-4 max-w-lg"
-      >
+      <motion.p initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.45, duration: 0.5 }} className="relative font-sans text-lg text-text-secondary text-center mt-4 max-w-lg" style="z-index: 10">
         Fund bounties. Ship code. Earn rewards.
       </motion.p>
 
-      {/* CTAs */}
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.6, duration: 0.5 }}
-        className="flex flex-wrap items-center justify-center gap-4 mt-8"
-      >
+      <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.6, duration: 0.5 }} className="relative flex flex-wrap items-center justify-center gap-4 mt-8" style="z-index: 10">
         <motion.div variants={buttonHover} initial="rest" whileHover="hover" whileTap="tap">
-          <Link
-            to="/bounties"
-            className="px-6 py-3 rounded-lg bg-emerald text-text-inverse font-semibold text-sm hover:bg-emerald-light transition-colors duration-200 shadow-lg shadow-emerald/20 inline-block"
-          >
-            Browse Bounties
-          </Link>
+          <Link to="/bounties" className="px-6 py-3 rounded-lg bg-emerald text-text-inverse font-semibold text-sm hover:bg-emerald-light transition-colors duration-200 shadow-lg shadow-emerald/20 inline-block">Browse Bounties</Link>
         </motion.div>
-
         <motion.div variants={buttonHover} initial="rest" whileHover="hover" whileTap="tap">
-          <Link
-            to="/bounties/create"
-            className="px-6 py-3 rounded-lg border border-emerald text-emerald font-semibold text-sm hover:bg-emerald-bg transition-colors duration-200 inline-block"
-          >
-            Post a Bounty
-          </Link>
+          <Link to="/bounties/create" className="px-6 py-3 rounded-lg border border-emerald text-emerald font-semibold text-sm hover:bg-emerald-bg transition-colors duration-200 inline-block">Post a Bounty</Link>
         </motion.div>
-
         {!isAuthenticated && (
           <motion.div variants={buttonHover} initial="rest" whileHover="hover" whileTap="tap">
-            <button
-              onClick={handleSignIn}
-              className="px-6 py-3 rounded-lg border border-border text-text-secondary font-medium text-sm hover:border-border-hover hover:text-text-primary transition-all duration-200 inline-flex items-center gap-2"
-            >
+            <button onClick={handleSignIn} className="px-6 py-3 rounded-lg border border-border text-text-secondary font-medium text-sm hover:border-border-hover hover:text-text-primary transition-all duration-200 inline-flex items-center gap-2">
               <GitHubIcon /> GitHub
             </button>
           </motion.div>
         )}
       </motion.div>
 
-      {/* Live stats strip */}
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.8, duration: 0.5 }}
-        className="flex items-center justify-center gap-6 mt-8 font-mono text-sm text-text-muted"
-      >
-        <span>
-          <span className="text-text-primary font-semibold">
-            <CountUp target={stats?.open_bounties ?? 142} />
-          </span>
-          {' '}open bounties
-        </span>
-        <span className="text-text-muted">·</span>
-        <span>
-          <span className="text-text-primary font-semibold">
-            $<CountUp target={stats?.total_paid_usdc ?? 24500} />
-          </span>
-          {' '}paid
-        </span>
-        <span className="text-text-muted">·</span>
-        <span>
-          <span className="text-text-primary font-semibold">
-            <CountUp target={stats?.total_contributors ?? 89} />
-          </span>
-          {' '}builders
-        </span>
+      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.8, duration: 0.5 }} className="relative flex items-center justify-center gap-6 mt-8 font-mono text-sm text-text-muted" style="z-index: 10">
+        <span><span className="text-text-primary font-semibold"><CountUp target={stats?.open_bounties ?? 142} /></span> open bounties</span>
+        <span>·</span>
+        <span><span className="text-text-primary font-semibold">$<CountUp target={stats?.total_paid_usdc ?? 24500} /></span> paid</span>
+        <span>·</span>
+        <span><span className="text-text-primary font-semibold"><CountUp target={stats?.total_contributors ?? 89} /></span> builders</span>
       </motion.div>
     </section>
   );
-}
+}
\ No newline at end of file

From 6688a75a1c0278df2e903b7401aa2054ae142bc6 Mon Sep 17 00:00:00 2001
From: D2758695161 <13510221939@163.com>
Date: Tue, 7 Apr 2026 01:05:36 +0800
Subject: [PATCH 19/19] feat: add HeroBackground to home components index
 (#850)

---
 frontend/src/components/home/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/home/index.ts b/frontend/src/components/home/index.ts
index 5ab4b2ff..2717fe69 100644
--- a/frontend/src/components/home/index.ts
+++ b/frontend/src/components/home/index.ts
@@ -4,3 +4,4 @@ export { HowItWorksCondensed } from './HowItWorksCondensed';
 export { FeaturedBounties } from './FeaturedBounties';
 export { ActivityFeed } from './ActivityFeed';
 export { FNDRYPriceWidget } from './FNDRYPriceWidget';
+export { HeroBackground } from './HeroBackground';