init
This commit is contained in:
richarjiang
111
app/api/v1/heartbeat/route.ts
Normal file
111
app/api/v1/heartbeat/route.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { eq } from "drizzle-orm";
|
||||
import { db } from "@/lib/db";
|
||||
import { lobsters, heartbeats } from "@/lib/db/schema";
|
||||
import {
|
||||
setLobsterOnline,
|
||||
updateActiveLobsters,
|
||||
incrementHourlyActivity,
|
||||
publishEvent,
|
||||
} from "@/lib/redis";
|
||||
import { validateApiKey } from "@/lib/auth/api-key";
|
||||
import { getGeoLocation } from "@/lib/geo/ip-location";
|
||||
import { heartbeatSchema } from "@/lib/validators/schemas";
|
||||
|
||||
function getClientIp(req: NextRequest): string {
|
||||
const forwarded = req.headers.get("x-forwarded-for");
|
||||
if (forwarded) return forwarded.split(",")[0].trim();
|
||||
const realIp = req.headers.get("x-real-ip");
|
||||
if (realIp) return realIp.trim();
|
||||
return "127.0.0.1";
|
||||
}
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
try {
|
||||
const authHeader = req.headers.get("authorization");
|
||||
if (!authHeader?.startsWith("Bearer ")) {
|
||||
return NextResponse.json(
|
||||
{ error: "Missing or invalid authorization header" },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
const apiKey = authHeader.slice(7);
|
||||
const lobster = await validateApiKey(apiKey);
|
||||
if (!lobster) {
|
||||
return NextResponse.json({ error: "Invalid API key" }, { status: 401 });
|
||||
}
|
||||
|
||||
let bodyData = {};
|
||||
try {
|
||||
const rawBody = await req.text();
|
||||
if (rawBody) bodyData = JSON.parse(rawBody);
|
||||
} catch {
|
||||
// Empty body is fine for heartbeat
|
||||
}
|
||||
|
||||
const parsed = heartbeatSchema.safeParse(bodyData);
|
||||
if (!parsed.success) {
|
||||
return NextResponse.json(
|
||||
{ error: "Validation failed", details: parsed.error.flatten() },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const clientIp = getClientIp(req);
|
||||
const now = new Date();
|
||||
|
||||
const updateFields: Record<string, unknown> = {
|
||||
lastHeartbeat: now,
|
||||
ip: clientIp,
|
||||
updatedAt: now,
|
||||
};
|
||||
|
||||
if (clientIp !== lobster.ip) {
|
||||
const geo = await getGeoLocation(clientIp);
|
||||
if (geo) {
|
||||
updateFields.latitude = String(geo.latitude);
|
||||
updateFields.longitude = String(geo.longitude);
|
||||
updateFields.city = geo.city;
|
||||
updateFields.country = geo.country;
|
||||
updateFields.countryCode = geo.countryCode;
|
||||
updateFields.region = geo.region;
|
||||
}
|
||||
}
|
||||
|
||||
if (parsed.data.name) updateFields.name = parsed.data.name;
|
||||
if (parsed.data.model) updateFields.model = parsed.data.model;
|
||||
if (parsed.data.platform) updateFields.platform = parsed.data.platform;
|
||||
|
||||
await setLobsterOnline(lobster.id, clientIp);
|
||||
await updateActiveLobsters(lobster.id);
|
||||
await incrementHourlyActivity();
|
||||
|
||||
await db
|
||||
.update(lobsters)
|
||||
.set(updateFields)
|
||||
.where(eq(lobsters.id, lobster.id));
|
||||
|
||||
// Insert heartbeat record asynchronously
|
||||
db.insert(heartbeats)
|
||||
.values({ lobsterId: lobster.id, ip: clientIp, timestamp: now })
|
||||
.then(() => {})
|
||||
.catch((err: unknown) => console.error("Failed to insert heartbeat:", err));
|
||||
|
||||
await publishEvent({
|
||||
type: "heartbeat",
|
||||
lobsterId: lobster.id,
|
||||
lobsterName: (updateFields.name as string) ?? lobster.name,
|
||||
city: (updateFields.city as string) ?? lobster.city,
|
||||
country: (updateFields.country as string) ?? lobster.country,
|
||||
});
|
||||
|
||||
return NextResponse.json({ ok: true, nextIn: 180 });
|
||||
} catch (error) {
|
||||
console.error("Heartbeat error:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Internal server error" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
61
app/api/v1/heatmap/route.ts
Normal file
61
app/api/v1/heatmap/route.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { gte, and, isNotNull, sql } from "drizzle-orm";
|
||||
import { db } from "@/lib/db";
|
||||
import { lobsters } from "@/lib/db/schema";
|
||||
import { getCacheHeatmap, setCacheHeatmap } from "@/lib/redis";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const cached = await getCacheHeatmap();
|
||||
if (cached) {
|
||||
return NextResponse.json(JSON.parse(cached));
|
||||
}
|
||||
|
||||
const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
|
||||
|
||||
const activeLobsters = await db
|
||||
.select({
|
||||
city: lobsters.city,
|
||||
country: lobsters.country,
|
||||
latitude: lobsters.latitude,
|
||||
longitude: lobsters.longitude,
|
||||
count: sql<number>`count(*)`,
|
||||
})
|
||||
.from(lobsters)
|
||||
.where(
|
||||
and(
|
||||
gte(lobsters.lastHeartbeat, fiveMinutesAgo),
|
||||
isNotNull(lobsters.latitude),
|
||||
isNotNull(lobsters.longitude)
|
||||
)
|
||||
)
|
||||
.groupBy(
|
||||
lobsters.city,
|
||||
lobsters.country,
|
||||
lobsters.latitude,
|
||||
lobsters.longitude
|
||||
);
|
||||
|
||||
const points = activeLobsters.map((row) => ({
|
||||
lat: Number(row.latitude),
|
||||
lng: Number(row.longitude),
|
||||
weight: row.count,
|
||||
lobsterCount: row.count,
|
||||
city: row.city,
|
||||
country: row.country,
|
||||
}));
|
||||
|
||||
const lastUpdated = new Date().toISOString();
|
||||
const responseData = { points, lastUpdated };
|
||||
|
||||
await setCacheHeatmap(JSON.stringify(responseData));
|
||||
|
||||
return NextResponse.json(responseData);
|
||||
} catch (error) {
|
||||
console.error("Heatmap error:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Internal server error" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
73
app/api/v1/lobsters/route.ts
Normal file
73
app/api/v1/lobsters/route.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { eq, desc, sql, and } from "drizzle-orm";
|
||||
import { db } from "@/lib/db";
|
||||
import { lobsters, tasks } from "@/lib/db/schema";
|
||||
import { getActiveLobsterIds } from "@/lib/redis";
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(req.url);
|
||||
const limitParam = parseInt(searchParams.get("limit") ?? "50", 10);
|
||||
const limit = Math.min(Math.max(1, limitParam), 200);
|
||||
const region = searchParams.get("region");
|
||||
|
||||
const conditions = [];
|
||||
if (region) {
|
||||
conditions.push(eq(lobsters.region, region));
|
||||
}
|
||||
|
||||
const whereClause = conditions.length > 0 ? and(...conditions) : undefined;
|
||||
|
||||
const lobsterRows = await db
|
||||
.select()
|
||||
.from(lobsters)
|
||||
.where(whereClause)
|
||||
.orderBy(desc(lobsters.lastHeartbeat))
|
||||
.limit(limit);
|
||||
|
||||
const totalResult = await db
|
||||
.select({ count: sql<number>`count(*)` })
|
||||
.from(lobsters)
|
||||
.where(whereClause);
|
||||
const total = totalResult[0]?.count ?? 0;
|
||||
|
||||
const activeLobsterIds = await getActiveLobsterIds();
|
||||
const activeSet = new Set(activeLobsterIds);
|
||||
|
||||
const lobsterList = await Promise.all(
|
||||
lobsterRows.map(async (lobster) => {
|
||||
const latestTaskRows = await db
|
||||
.select({
|
||||
summary: tasks.summary,
|
||||
timestamp: tasks.timestamp,
|
||||
durationMs: tasks.durationMs,
|
||||
})
|
||||
.from(tasks)
|
||||
.where(eq(tasks.lobsterId, lobster.id))
|
||||
.orderBy(desc(tasks.timestamp))
|
||||
.limit(1);
|
||||
|
||||
const lastTask = latestTaskRows[0] ?? null;
|
||||
|
||||
return {
|
||||
id: lobster.id,
|
||||
name: lobster.name,
|
||||
model: lobster.model,
|
||||
platform: lobster.platform,
|
||||
city: lobster.city,
|
||||
country: lobster.country,
|
||||
isOnline: activeSet.has(lobster.id),
|
||||
lastTask,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
return NextResponse.json({ lobsters: lobsterList, total });
|
||||
} catch (error) {
|
||||
console.error("Lobsters error:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Internal server error" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
89
app/api/v1/register/route.ts
Normal file
89
app/api/v1/register/route.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { nanoid } from "nanoid";
|
||||
import { db } from "@/lib/db";
|
||||
import { lobsters } from "@/lib/db/schema";
|
||||
import {
|
||||
setLobsterOnline,
|
||||
updateActiveLobsters,
|
||||
incrementGlobalStat,
|
||||
incrementRegionCount,
|
||||
publishEvent,
|
||||
} from "@/lib/redis";
|
||||
import { generateApiKey } from "@/lib/auth/api-key";
|
||||
import { getGeoLocation } from "@/lib/geo/ip-location";
|
||||
import { registerSchema } from "@/lib/validators/schemas";
|
||||
|
||||
function getClientIp(req: NextRequest): string {
|
||||
const forwarded = req.headers.get("x-forwarded-for");
|
||||
if (forwarded) return forwarded.split(",")[0].trim();
|
||||
const realIp = req.headers.get("x-real-ip");
|
||||
if (realIp) return realIp.trim();
|
||||
return "127.0.0.1";
|
||||
}
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
try {
|
||||
const body = await req.json();
|
||||
const parsed = registerSchema.safeParse(body);
|
||||
if (!parsed.success) {
|
||||
return NextResponse.json(
|
||||
{ error: "Validation failed", details: parsed.error.flatten() },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const { name, model, platform } = parsed.data;
|
||||
const lobsterId = nanoid(21);
|
||||
const apiKey = generateApiKey();
|
||||
const clientIp = getClientIp(req);
|
||||
const geo = await getGeoLocation(clientIp);
|
||||
const now = new Date();
|
||||
|
||||
await db.insert(lobsters).values({
|
||||
id: lobsterId,
|
||||
apiKey,
|
||||
name,
|
||||
model: model ?? null,
|
||||
platform: platform ?? null,
|
||||
ip: clientIp,
|
||||
latitude: geo ? String(geo.latitude) : null,
|
||||
longitude: geo ? String(geo.longitude) : null,
|
||||
city: geo?.city ?? null,
|
||||
country: geo?.country ?? null,
|
||||
countryCode: geo?.countryCode ?? null,
|
||||
region: geo?.region ?? null,
|
||||
lastHeartbeat: now,
|
||||
totalTasks: 0,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
});
|
||||
|
||||
await setLobsterOnline(lobsterId, clientIp);
|
||||
await updateActiveLobsters(lobsterId);
|
||||
await incrementGlobalStat("total_lobsters");
|
||||
|
||||
if (geo?.region) {
|
||||
await incrementRegionCount(geo.region);
|
||||
}
|
||||
|
||||
await publishEvent({
|
||||
type: "online",
|
||||
lobsterId,
|
||||
lobsterName: name,
|
||||
city: geo?.city ?? null,
|
||||
country: geo?.country ?? null,
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
lobsterId,
|
||||
apiKey,
|
||||
endpoint: `${process.env.NEXT_PUBLIC_APP_URL}/api/v1`,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Register error:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Internal server error" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
76
app/api/v1/stats/route.ts
Normal file
76
app/api/v1/stats/route.ts
Normal file
@@ -0,0 +1,76 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { gte, sql } from "drizzle-orm";
|
||||
import { db } from "@/lib/db";
|
||||
import { lobsters, tasks } from "@/lib/db/schema";
|
||||
import {
|
||||
redis,
|
||||
getGlobalStats,
|
||||
getRegionStats,
|
||||
getHourlyActivity,
|
||||
} from "@/lib/redis";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const globalStats = await getGlobalStats();
|
||||
const regionStats = await getRegionStats();
|
||||
const hourlyRaw = await getHourlyActivity();
|
||||
|
||||
// Convert hourly data to array format
|
||||
const hourlyActivity = Object.entries(hourlyRaw).map(([hour, count]) => ({
|
||||
hour: hour.split("T")[1] + ":00",
|
||||
count,
|
||||
}));
|
||||
|
||||
const now = Date.now();
|
||||
const fiveMinutesAgo = now - 300_000;
|
||||
const activeLobsters = await redis.zcount(
|
||||
"active:lobsters",
|
||||
fiveMinutesAgo,
|
||||
"+inf"
|
||||
);
|
||||
|
||||
const totalLobstersResult = await db
|
||||
.select({ count: sql<number>`count(*)` })
|
||||
.from(lobsters);
|
||||
const totalLobsters = totalLobstersResult[0]?.count ?? 0;
|
||||
|
||||
const todayStart = new Date();
|
||||
todayStart.setHours(0, 0, 0, 0);
|
||||
|
||||
const tasksTodayResult = await db
|
||||
.select({ count: sql<number>`count(*)` })
|
||||
.from(tasks)
|
||||
.where(gte(tasks.timestamp, todayStart));
|
||||
const tasksToday = tasksTodayResult[0]?.count ?? 0;
|
||||
|
||||
const avgDurationResult = await db
|
||||
.select({ avg: sql<number>`AVG(${tasks.durationMs})` })
|
||||
.from(tasks)
|
||||
.where(gte(tasks.timestamp, todayStart));
|
||||
const avgTaskDuration = avgDurationResult[0]?.avg
|
||||
? Math.round(avgDurationResult[0].avg)
|
||||
: 0;
|
||||
|
||||
// Convert region stats from string values to numbers
|
||||
const regionBreakdown: Record<string, number> = {};
|
||||
for (const [key, val] of Object.entries(regionStats)) {
|
||||
regionBreakdown[key] = parseInt(val, 10) || 0;
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
totalLobsters,
|
||||
activeLobsters,
|
||||
tasksToday,
|
||||
tasksTotal: parseInt(globalStats.total_tasks ?? "0", 10),
|
||||
avgTaskDuration,
|
||||
regionBreakdown,
|
||||
hourlyActivity,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Stats error:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Internal server error" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
60
app/api/v1/stream/route.ts
Normal file
60
app/api/v1/stream/route.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import { NextRequest } from "next/server";
|
||||
import Redis from "ioredis";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const runtime = "nodejs";
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
const encoder = new TextEncoder();
|
||||
|
||||
const stream = new ReadableStream({
|
||||
start(controller) {
|
||||
const subscriber = new Redis(process.env.REDIS_URL!);
|
||||
|
||||
subscriber.subscribe("channel:realtime");
|
||||
|
||||
subscriber.on("message", (_channel: string, message: string) => {
|
||||
try {
|
||||
const data = JSON.parse(message);
|
||||
controller.enqueue(
|
||||
encoder.encode(
|
||||
`event: ${data.type}\ndata: ${JSON.stringify(data)}\n\n`
|
||||
)
|
||||
);
|
||||
} catch {
|
||||
// skip malformed messages
|
||||
}
|
||||
});
|
||||
|
||||
// Send keepalive every 30 seconds
|
||||
const keepalive = setInterval(() => {
|
||||
try {
|
||||
controller.enqueue(encoder.encode(": keepalive\n\n"));
|
||||
} catch {
|
||||
clearInterval(keepalive);
|
||||
}
|
||||
}, 30000);
|
||||
|
||||
// Send initial connection event
|
||||
controller.enqueue(
|
||||
encoder.encode(`event: connected\ndata: {"status":"connected"}\n\n`)
|
||||
);
|
||||
|
||||
// Cleanup on close
|
||||
req.signal.addEventListener("abort", () => {
|
||||
clearInterval(keepalive);
|
||||
subscriber.unsubscribe("channel:realtime");
|
||||
subscriber.quit();
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return new Response(stream, {
|
||||
headers: {
|
||||
"Content-Type": "text/event-stream",
|
||||
"Cache-Control": "no-cache, no-transform",
|
||||
Connection: "keep-alive",
|
||||
"X-Accel-Buffering": "no",
|
||||
},
|
||||
});
|
||||
}
|
||||
80
app/api/v1/task/route.ts
Normal file
80
app/api/v1/task/route.ts
Normal file
@@ -0,0 +1,80 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { eq, sql } from "drizzle-orm";
|
||||
import { db } from "@/lib/db";
|
||||
import { lobsters, tasks } from "@/lib/db/schema";
|
||||
import {
|
||||
incrementGlobalStat,
|
||||
incrementHourlyActivity,
|
||||
publishEvent,
|
||||
} from "@/lib/redis";
|
||||
import { validateApiKey } from "@/lib/auth/api-key";
|
||||
import { taskSchema } from "@/lib/validators/schemas";
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
try {
|
||||
const authHeader = req.headers.get("authorization");
|
||||
if (!authHeader?.startsWith("Bearer ")) {
|
||||
return NextResponse.json(
|
||||
{ error: "Missing or invalid authorization header" },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
const apiKey = authHeader.slice(7);
|
||||
const lobster = await validateApiKey(apiKey);
|
||||
if (!lobster) {
|
||||
return NextResponse.json({ error: "Invalid API key" }, { status: 401 });
|
||||
}
|
||||
|
||||
const body = await req.json();
|
||||
const parsed = taskSchema.safeParse(body);
|
||||
if (!parsed.success) {
|
||||
return NextResponse.json(
|
||||
{ error: "Validation failed", details: parsed.error.flatten() },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const { summary, durationMs, model, toolsUsed } = parsed.data;
|
||||
const now = new Date();
|
||||
|
||||
const insertResult = await db.insert(tasks).values({
|
||||
lobsterId: lobster.id,
|
||||
summary,
|
||||
durationMs,
|
||||
model: model ?? null,
|
||||
toolsUsed: toolsUsed ?? null,
|
||||
timestamp: now,
|
||||
});
|
||||
|
||||
await db
|
||||
.update(lobsters)
|
||||
.set({ totalTasks: sql`${lobsters.totalTasks} + 1`, updatedAt: now })
|
||||
.where(eq(lobsters.id, lobster.id));
|
||||
|
||||
await incrementGlobalStat("total_tasks");
|
||||
await incrementGlobalStat("tasks_today");
|
||||
await incrementHourlyActivity();
|
||||
|
||||
await publishEvent({
|
||||
type: "task",
|
||||
lobsterId: lobster.id,
|
||||
lobsterName: lobster.name,
|
||||
city: lobster.city,
|
||||
country: lobster.country,
|
||||
summary,
|
||||
durationMs,
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
ok: true,
|
||||
taskId: insertResult[0].insertId,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Task error:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Internal server error" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
26
app/apple-icon.tsx
Normal file
26
app/apple-icon.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { ImageResponse } from "next/og";
|
||||
|
||||
export const size = { width: 180, height: 180 };
|
||||
export const contentType = "image/png";
|
||||
|
||||
export default function AppleIcon() {
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: "linear-gradient(135deg, #0a0e1a 0%, #111827 100%)",
|
||||
borderRadius: "40px",
|
||||
fontSize: 120,
|
||||
}}
|
||||
>
|
||||
🦞
|
||||
</div>
|
||||
),
|
||||
{ ...size }
|
||||
);
|
||||
}
|
||||
61
app/continent/[slug]/page.tsx
Normal file
61
app/continent/[slug]/page.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
import { use } from "react";
|
||||
import { Navbar } from "@/components/layout/navbar";
|
||||
import { ParticleBg } from "@/components/layout/particle-bg";
|
||||
import { ViewSwitcher } from "@/components/layout/view-switcher";
|
||||
import { ContinentMap } from "@/components/map/continent-map";
|
||||
import { StatsPanel } from "@/components/dashboard/stats-panel";
|
||||
import { LobsterFeed } from "@/components/dashboard/lobster-feed";
|
||||
|
||||
const continentNames: Record<string, string> = {
|
||||
asia: "Asia",
|
||||
europe: "Europe",
|
||||
americas: "Americas",
|
||||
africa: "Africa",
|
||||
oceania: "Oceania",
|
||||
};
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ slug: string }>;
|
||||
}
|
||||
|
||||
export default function ContinentPage({ params }: PageProps) {
|
||||
const { slug } = use(params);
|
||||
const name = continentNames[slug] ?? "Unknown";
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen">
|
||||
<ParticleBg />
|
||||
<Navbar activeView="map" />
|
||||
|
||||
<main className="relative z-10 mx-auto max-w-[1800px] px-4 pt-20 pb-8">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h1
|
||||
className="font-mono text-2xl font-bold"
|
||||
style={{
|
||||
color: "var(--accent-cyan)",
|
||||
textShadow: "var(--glow-cyan)",
|
||||
}}
|
||||
>
|
||||
{name} Region
|
||||
</h1>
|
||||
<ViewSwitcher activeContinent={slug} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-[1fr_300px]">
|
||||
{/* Map */}
|
||||
<div>
|
||||
<ContinentMap slug={slug} />
|
||||
</div>
|
||||
|
||||
{/* Side Panel */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<StatsPanel />
|
||||
<LobsterFeed />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
155
app/globals.css
Normal file
155
app/globals.css
Normal file
@@ -0,0 +1,155 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* === Cyberpunk Theme Variables === */
|
||||
:root {
|
||||
--bg-primary: #0a0e1a;
|
||||
--bg-secondary: #111827;
|
||||
--bg-card: #1a1f2e;
|
||||
--bg-card-hover: #242a3d;
|
||||
--border-glow: #00f0ff;
|
||||
--accent-cyan: #00f0ff;
|
||||
--accent-purple: #8b5cf6;
|
||||
--accent-pink: #ec4899;
|
||||
--accent-green: #10b981;
|
||||
--accent-orange: #f59e0b;
|
||||
--text-primary: #e2e8f0;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-muted: #64748b;
|
||||
--glow-cyan: 0 0 20px rgba(0, 240, 255, 0.3);
|
||||
--glow-purple: 0 0 20px rgba(139, 92, 246, 0.3);
|
||||
--glow-strong: 0 0 30px rgba(0, 240, 255, 0.5), 0 0 60px rgba(0, 240, 255, 0.2);
|
||||
}
|
||||
|
||||
/* === shadcn/ui CSS Variable Overrides === */
|
||||
:root {
|
||||
--background: 222.2 47.4% 6.2%;
|
||||
--foreground: 210 40% 92%;
|
||||
--card: 222.2 47.4% 9.2%;
|
||||
--card-foreground: 210 40% 92%;
|
||||
--popover: 222.2 47.4% 9.2%;
|
||||
--popover-foreground: 210 40% 92%;
|
||||
--primary: 187 100% 50%;
|
||||
--primary-foreground: 222.2 47.4% 6.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 92%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 55.1%;
|
||||
--accent: 263 70% 60%;
|
||||
--accent-foreground: 210 40% 92%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 92%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 187 100% 50%;
|
||||
--radius: 0.75rem;
|
||||
}
|
||||
|
||||
/* === Base Styles === */
|
||||
body {
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-inter, "Inter", ui-sans-serif, system-ui, sans-serif);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* === Utility Classes === */
|
||||
|
||||
/* Glowing cyan text */
|
||||
.glow-text {
|
||||
text-shadow:
|
||||
0 0 10px rgba(0, 240, 255, 0.5),
|
||||
0 0 20px rgba(0, 240, 255, 0.3),
|
||||
0 0 40px rgba(0, 240, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Glowing cyan border */
|
||||
.glow-border {
|
||||
box-shadow:
|
||||
0 0 10px rgba(0, 240, 255, 0.2),
|
||||
0 0 20px rgba(0, 240, 255, 0.1),
|
||||
inset 0 0 10px rgba(0, 240, 255, 0.05);
|
||||
border: 1px solid rgba(0, 240, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Card with subtle glow and hover effect */
|
||||
.glow-card {
|
||||
background-color: var(--bg-card);
|
||||
border: 1px solid rgba(0, 240, 255, 0.1);
|
||||
box-shadow: 0 0 10px rgba(0, 240, 255, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glow-card:hover {
|
||||
background-color: var(--bg-card-hover);
|
||||
border-color: rgba(0, 240, 255, 0.3);
|
||||
box-shadow:
|
||||
0 0 15px rgba(0, 240, 255, 0.15),
|
||||
0 0 30px rgba(0, 240, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Subtle repeating grid overlay */
|
||||
.cyber-grid {
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 240, 255, 0.03) 0px,
|
||||
rgba(0, 240, 255, 0.03) 1px,
|
||||
transparent 1px,
|
||||
transparent 40px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 240, 255, 0.03) 0px,
|
||||
rgba(0, 240, 255, 0.03) 1px,
|
||||
transparent 1px,
|
||||
transparent 40px
|
||||
);
|
||||
}
|
||||
|
||||
/* Animated gradient neon line separator */
|
||||
.neon-line {
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--accent-cyan),
|
||||
var(--accent-purple),
|
||||
var(--accent-cyan),
|
||||
transparent
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: neon-sweep 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes neon-sweep {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Custom Scrollbar === */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(0, 240, 255, 0.2) transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 240, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(0, 240, 255, 0.4);
|
||||
}
|
||||
26
app/icon.tsx
Normal file
26
app/icon.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { ImageResponse } from "next/og";
|
||||
|
||||
export const size = { width: 64, height: 64 };
|
||||
export const contentType = "image/png";
|
||||
|
||||
export default function Icon() {
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: "#0a0e1a",
|
||||
borderRadius: "14px",
|
||||
fontSize: 44,
|
||||
}}
|
||||
>
|
||||
🦞
|
||||
</div>
|
||||
),
|
||||
{ ...size }
|
||||
);
|
||||
}
|
||||
35
app/layout.tsx
Normal file
35
app/layout.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter, JetBrains_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter",
|
||||
});
|
||||
|
||||
const jetbrainsMono = JetBrains_Mono({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-mono",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "OpenClaw Market - Global Lobster Activity",
|
||||
description: "Real-time visualization of AI agent activity worldwide",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" className="dark">
|
||||
<body
|
||||
className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}
|
||||
style={{ backgroundColor: "var(--bg-primary)", color: "var(--text-primary)" }}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
45
app/page.tsx
Normal file
45
app/page.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { Navbar } from "@/components/layout/navbar";
|
||||
import { InstallBanner } from "@/components/layout/install-banner";
|
||||
import { ParticleBg } from "@/components/layout/particle-bg";
|
||||
import { GlobeView } from "@/components/globe/globe-view";
|
||||
import { StatsPanel } from "@/components/dashboard/stats-panel";
|
||||
import { ActivityTimeline } from "@/components/dashboard/activity-timeline";
|
||||
import { LobsterFeed } from "@/components/dashboard/lobster-feed";
|
||||
import { RegionRanking } from "@/components/dashboard/region-ranking";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="relative min-h-screen">
|
||||
<ParticleBg />
|
||||
<Navbar activeView="globe" />
|
||||
|
||||
<main className="relative z-10 mx-auto max-w-[1800px] px-4 pt-20 pb-8">
|
||||
<div className="mb-4">
|
||||
<InstallBanner />
|
||||
</div>
|
||||
<div className="grid gap-4 lg:grid-cols-[280px_1fr_280px]">
|
||||
{/* Left Panel */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<StatsPanel />
|
||||
<RegionRanking />
|
||||
</div>
|
||||
|
||||
{/* Center - Globe + Timeline */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="h-[500px] lg:h-[600px]">
|
||||
<GlobeView />
|
||||
</div>
|
||||
<ActivityTimeline />
|
||||
</div>
|
||||
|
||||
{/* Right Panel */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<LobsterFeed />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user