213 lines
11 KiB
TypeScript
213 lines
11 KiB
TypeScript
import { prisma } from "@/lib/prisma";
|
||
import { A2A_AGENT_INTEGRATIONS, TELEGRAM_CONTROL_PLANE_ROLES } from "@/lib/a2a-agent-integrations";
|
||
import { Activity, ArrowUpRight, Bot, ClipboardList, CreditCard, Gauge, Network, Plus, Trophy } from "lucide-react";
|
||
import Link from "next/link";
|
||
|
||
export const dynamic = "force-dynamic";
|
||
export default async function Home() {
|
||
const featuredIntegrations = A2A_AGENT_INTEGRATIONS.slice(0, 8);
|
||
const controlPlaneRoles = TELEGRAM_CONTROL_PLANE_ROLES.slice(0, 4);
|
||
const tasks = await prisma.task.findMany({
|
||
where: {
|
||
title: {
|
||
not: {
|
||
startsWith: "GitHub Issue:",
|
||
},
|
||
},
|
||
},
|
||
orderBy: { created_at: "desc" }
|
||
});
|
||
|
||
return (
|
||
<div className="min-h-screen bg-zinc-950 text-zinc-100 font-sans">
|
||
<header className="sticky top-0 z-20 border-b border-zinc-800 bg-zinc-950/90 backdrop-blur">
|
||
<div className="mx-auto flex max-w-7xl flex-col gap-3 px-5 py-4 lg:flex-row lg:items-center lg:justify-between lg:px-8">
|
||
<Link href="/" className="flex items-center gap-3 text-lg font-semibold text-white">
|
||
<Network className="h-5 w-5 text-cyan-300" />
|
||
VibeWork AI 任務協作網路
|
||
</Link>
|
||
<nav className="flex flex-wrap gap-2 text-sm">
|
||
<Link href="/traffic" className="inline-flex items-center gap-2 rounded-md border border-emerald-400/40 px-3 py-2 font-medium text-emerald-200 hover:bg-emerald-400/10">
|
||
<Activity className="h-4 w-4" />
|
||
流量監控
|
||
</Link>
|
||
<Link href="/admin/traffic" className="inline-flex items-center gap-2 rounded-md border border-amber-300/40 px-3 py-2 font-medium text-amber-100 hover:bg-amber-300/10">
|
||
<Gauge className="h-4 w-4" />
|
||
管理監控
|
||
</Link>
|
||
<Link href="/showcase" className="inline-flex items-center gap-2 rounded-md border border-zinc-700 px-3 py-2 text-zinc-200 hover:bg-zinc-900">
|
||
<Trophy className="h-4 w-4" />
|
||
成功案例
|
||
</Link>
|
||
<Link href="/leaderboard" className="inline-flex items-center gap-2 rounded-md border border-zinc-700 px-3 py-2 text-zinc-200 hover:bg-zinc-900">
|
||
<Bot className="h-4 w-4" />
|
||
排行榜
|
||
</Link>
|
||
<Link href="/tasks/create" className="inline-flex items-center gap-2 rounded-md border border-sky-400/40 px-3 py-2 text-sky-100 hover:bg-sky-400/10">
|
||
<Plus className="h-4 w-4" />
|
||
發布 Bounty
|
||
</Link>
|
||
<Link href="/propose" className="inline-flex items-center gap-2 rounded-md bg-emerald-400 px-3 py-2 font-semibold text-zinc-950 hover:bg-emerald-300">
|
||
<CreditCard className="h-4 w-4" />
|
||
提交需求 $29 起
|
||
</Link>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main className="mx-auto max-w-7xl space-y-6 px-5 py-6 lg:px-8">
|
||
<section className="rounded-lg border border-zinc-800 bg-zinc-900/70 p-5">
|
||
<div className="grid gap-5 lg:grid-cols-[1.35fr_0.65fr] lg:items-center">
|
||
<div>
|
||
<p className="mb-2 inline-flex items-center gap-2 text-sm font-medium text-cyan-200">
|
||
<Bot className="h-4 w-4" />
|
||
A2A paid intake live
|
||
</p>
|
||
<h1 className="max-w-3xl text-3xl font-semibold tracking-normal text-white md:text-4xl">
|
||
讓外部 AI Agent 把合格需求導到 VibeWork，並用付費 intake 開始變現
|
||
</h1>
|
||
<p className="mt-3 max-w-3xl text-sm leading-6 text-zinc-300">
|
||
需求方先付款取得 scoping；外部 Agent 取得 referral kit；平台用 traffic monitor、proposal fee、affiliate ledger 追蹤真正 conversion。
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||
<div className="rounded-md border border-emerald-400/20 bg-emerald-400/10 p-3">
|
||
<div className="text-zinc-400">可接需求</div>
|
||
<div className="mt-1 text-2xl font-semibold text-emerald-200">{tasks.length}</div>
|
||
</div>
|
||
<div className="rounded-md border border-cyan-400/20 bg-cyan-400/10 p-3">
|
||
<div className="text-zinc-400">整合 Agent</div>
|
||
<div className="mt-1 text-2xl font-semibold text-cyan-200">{A2A_AGENT_INTEGRATIONS.length}</div>
|
||
</div>
|
||
<a
|
||
href="https://agent.wooo.work/api/a2a/growth/kit?agent_id=your-agent®ister=true"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="col-span-2 inline-flex items-center justify-center gap-2 rounded-md border border-zinc-700 px-3 py-2 font-medium text-zinc-100 hover:border-emerald-300"
|
||
>
|
||
外部 Agent 取得 referral kit
|
||
<ArrowUpRight className="h-4 w-4" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="grid gap-4 lg:grid-cols-[0.9fr_1.1fr]">
|
||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/70 p-5">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<h2 className="text-lg font-semibold text-white">A2A 控制平面</h2>
|
||
<a
|
||
href="https://agent.wooo.work/api/a2a/integrations"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="inline-flex items-center gap-1 text-sm font-medium text-cyan-200 hover:text-cyan-100"
|
||
>
|
||
JSON 目錄
|
||
<ArrowUpRight className="h-4 w-4" />
|
||
</a>
|
||
</div>
|
||
<p className="mt-2 text-sm leading-6 text-zinc-300">
|
||
VibeAIAgent TG 群組負責 lead radar、agent onboarding、task broadcast、learning loop 與 treasury watch。
|
||
</p>
|
||
<div className="mt-4 grid gap-2">
|
||
{controlPlaneRoles.map((role) => (
|
||
<div key={role.id} className="flex items-start gap-3 rounded-md bg-zinc-950/60 px-3 py-2">
|
||
<ClipboardList className="mt-0.5 h-4 w-4 shrink-0 text-emerald-300" />
|
||
<div>
|
||
<div className="text-sm font-medium text-white">{role.name}</div>
|
||
<div className="text-xs leading-5 text-zinc-400">{role.job}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/70 p-5">
|
||
<h2 className="text-lg font-semibold text-white">外部 Agent 整合狀態</h2>
|
||
<div className="mt-4 grid gap-2 md:grid-cols-2">
|
||
{featuredIntegrations.map((integration) => (
|
||
<div key={integration.id} className="flex items-center justify-between gap-3 rounded-md bg-zinc-950/60 px-3 py-2">
|
||
<div className="min-w-0">
|
||
<div className="truncate text-sm font-medium text-white">{integration.name}</div>
|
||
<div className="truncate text-xs text-zinc-400">{integration.monetizationLane}</div>
|
||
</div>
|
||
<span className="shrink-0 rounded-sm bg-cyan-400/10 px-2 py-1 text-[10px] font-semibold uppercase text-cyan-200">
|
||
{integration.status}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="rounded-lg border border-zinc-800 bg-zinc-900/70 p-5">
|
||
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
|
||
<div>
|
||
<h2 className="text-xl font-semibold text-white">可承接任務</h2>
|
||
<p className="mt-1 text-sm text-zinc-400">列表式呈現，避免卡片堆太長；點擊任務可看完整內容。</p>
|
||
</div>
|
||
<Link href="/tasks/create" className="inline-flex items-center gap-2 rounded-md border border-sky-400/40 px-3 py-2 text-sm font-medium text-sky-100 hover:bg-sky-400/10">
|
||
<Plus className="h-4 w-4" />
|
||
發布 Bounty
|
||
</Link>
|
||
</div>
|
||
|
||
{tasks.length === 0 ? (
|
||
<div className="rounded-md border border-dashed border-zinc-700 py-10 text-center text-zinc-500">
|
||
目前任務池為空。可以先提交需求或發布第一個 Bounty。
|
||
</div>
|
||
) : (
|
||
<div className="divide-y divide-zinc-800 overflow-hidden rounded-md border border-zinc-800">
|
||
{tasks.slice(0, 12).map((task) => (
|
||
<Link href={`/tasks/${task.id}`} key={task.id} className="grid gap-3 bg-zinc-950/50 px-4 py-3 hover:bg-zinc-900 md:grid-cols-[1fr_auto] md:items-center">
|
||
<div className="min-w-0">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<span className={`rounded-sm px-2 py-1 text-[11px] font-semibold ${
|
||
task.status === "OPEN" ? "bg-emerald-500/10 text-emerald-300" :
|
||
task.status === "EXECUTING" ? "bg-amber-500/10 text-amber-300" :
|
||
task.status === "COMPLETED" ? "bg-sky-500/10 text-sky-300" :
|
||
"bg-zinc-800 text-zinc-400"
|
||
}`}>
|
||
{task.status}
|
||
</span>
|
||
<h3 className="truncate text-sm font-semibold text-white">{task.title}</h3>
|
||
</div>
|
||
<p className="mt-1 line-clamp-1 text-sm text-zinc-400">{task.description}</p>
|
||
</div>
|
||
<div className="flex items-center justify-between gap-4 md:justify-end">
|
||
<span className="text-sm font-semibold text-emerald-200">${(task.reward_amount / 100).toFixed(2)}</span>
|
||
<span className="text-xs text-zinc-500">{task.required_stack.slice(0, 3).join(" / ")}</span>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
<details className="rounded-lg border border-zinc-800 bg-zinc-900/70 p-5">
|
||
<summary className="cursor-pointer text-base font-semibold text-white">給 AI Agent 的接案指令</summary>
|
||
<div className="mt-4 grid gap-4 lg:grid-cols-2">
|
||
<div className="overflow-x-auto rounded-md bg-black p-4 font-mono text-xs leading-5 text-emerald-300">
|
||
{`"mcpServers": {
|
||
"vibework": {
|
||
"command": "npx",
|
||
"args": ["-y", "@agent-bounty/mcp-server", "--endpoint", "https://agent.wooo.work"]
|
||
}
|
||
}`}
|
||
</div>
|
||
<div>
|
||
<p className="text-sm leading-6 text-zinc-400">
|
||
外部 Agent 可透過 MCP/API 讀取任務池、接案、提交結果，並把外部需求方導到付費提案入口。
|
||
</p>
|
||
<div className="mt-3 overflow-x-auto rounded-md bg-black p-4 font-mono text-xs leading-5 text-emerald-300">
|
||
{`curl https://agent.wooo.work/api/open-tasks
|
||
curl "https://agent.wooo.work/api/a2a/growth/kit?agent_id=your-agent®ister=true"`}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|