[taskboard] migrate fleet console to nextjs

app/agents/page.tsx

@@ -0,0 +1,9 @@
+import { AgentsClient } from "@/components/agents-client";
+import { listFleetAgents } from "@/lib/agents";
+
+export const dynamic = "force-dynamic";
+
+export default async function AgentsPage() {
+  const agents = await listFleetAgents();
+  return <AgentsClient agents={agents} />;
+}

app/api/agents/[slug]/assign/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server";
+
+import { listFleetAgents } from "@/lib/agents";
+import { findTask, updateTask } from "@/lib/tasks";
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ slug: string }> },
+) {
+  const { slug } = await params;
+  const payload = (await request.json()) as { taskId?: number };
+  if (!payload.taskId) {
+    return NextResponse.json({ error: "taskId_is_required" }, { status: 400 });
+  }
+
+  const agents = await listFleetAgents();
+  const agent = agents.find((entry) => entry.slug === slug);
+  if (!agent) {
+    return NextResponse.json({ error: "agent_not_found" }, { status: 404 });
+  }
+
+  const existing = await findTask(payload.taskId);
+  if (!existing) {
+    return NextResponse.json({ error: "task_not_found" }, { status: 404 });
+  }
+
+  const updated = await updateTask(existing.id, { assignee: agent.assignmentKey });
+  return NextResponse.json({ success: true, task: updated });
+}

app/api/agents/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from "next/server";
+
+import { listFleetAgents } from "@/lib/agents";
+
+export async function GET() {
+  return NextResponse.json(await listFleetAgents());
+}

app/api/architecture/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from "next/server";
+
+import { listArchitecture } from "@/lib/agents";
+
+export async function GET() {
+  return NextResponse.json(await listArchitecture());
+}

app/api/tasks/[id]/route.ts

@@ -0,0 +1,35 @@
+import { NextResponse } from "next/server";
+
+import { updateTask, validateTaskPayload } from "@/lib/tasks";
+
+export async function PATCH(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  const numericId = Number(id);
+  if (!Number.isInteger(numericId) || numericId <= 0) {
+    return NextResponse.json({ error: "invalid_task_id" }, { status: 400 });
+  }
+
+  const payload = (await request.json()) as Record<string, unknown>;
+  const errors = validateTaskPayload(payload as never, true);
+  if (errors.length > 0) {
+    return NextResponse.json({ error: "validation_error", details: errors }, { status: 400 });
+  }
+
+  const task = await updateTask(numericId, {
+    title: typeof payload.title === "string" ? payload.title : undefined,
+    description: typeof payload.description === "string" ? payload.description : undefined,
+    assignee: typeof payload.assignee === "string" ? payload.assignee : undefined,
+    priority: payload.priority as never,
+    status: payload.status as never,
+    tags: Array.isArray(payload.tags) ? payload.tags.filter((tag) => typeof tag === "string") : undefined,
+  });
+
+  if (!task) {
+    return NextResponse.json({ error: "task_not_found" }, { status: 404 });
+  }
+
+  return NextResponse.json(task);
+}

app/api/tasks/route.ts

@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+
+import { createTask, listTasks, validateTaskPayload } from "@/lib/tasks";
+
+export async function GET() {
+  return NextResponse.json(await listTasks());
+}
+
+export async function POST(request: Request) {
+  const payload = (await request.json()) as Record<string, unknown>;
+  const errors = validateTaskPayload(payload as never, false);
+  if (errors.length > 0) {
+    return NextResponse.json({ error: "validation_error", details: errors }, { status: 400 });
+  }
+
+  const task = await createTask({
+    title: String(payload.title),
+    description: typeof payload.description === "string" ? payload.description : "",
+    assignee: typeof payload.assignee === "string" ? payload.assignee : "",
+    priority: payload.priority as never,
+    status: (payload.status as never) || "Backlog",
+    tags: Array.isArray(payload.tags) ? payload.tags.filter((tag) => typeof tag === "string") : [],
+  });
+
+  return NextResponse.json(task, { status: 201 });
+}

app/api/usage/stats/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from "next/server";
+
+import { all } from "@/lib/db";
+
+type UsageRow = {
+  agent: string;
+  provider: string;
+  model: string;
+  tokens_used: number;
+  cost_estimate: number;
+};
+
+export async function GET() {
+  const rows = await all<UsageRow>("SELECT * FROM usage_tracking ORDER BY timestamp DESC");
+  const result = rows.reduce(
+    (accumulator, row) => {
+      accumulator.totalRequests += 1;
+      accumulator.totalTokens += row.tokens_used || 0;
+      accumulator.totalCost += row.cost_estimate || 0;
+      if (!accumulator.byAgent[row.agent]) {
+        accumulator.byAgent[row.agent] = { requests: 0, tokens: 0, cost: 0 };
+      }
+      accumulator.byAgent[row.agent].requests += 1;
+      accumulator.byAgent[row.agent].tokens += row.tokens_used || 0;
+      accumulator.byAgent[row.agent].cost += row.cost_estimate || 0;
+      return accumulator;
+    },
+    {
+      totalRequests: 0,
+      totalTokens: 0,
+      totalCost: 0,
+      byAgent: {} as Record<string, { requests: number; tokens: number; cost: number }>,
+    },
+  );
+
+  return NextResponse.json(result);
+}

app/api/wiki/[filename]/route.ts

@@ -0,0 +1,38 @@
+import { NextResponse } from "next/server";
+
+import { deleteWikiPage, readWikiPage, updateWikiPage } from "@/lib/wiki";
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ filename: string }> },
+) {
+  const { filename } = await params;
+  const page = readWikiPage(filename);
+  if (!page) {
+    return NextResponse.json({ error: "wiki_page_not_found" }, { status: 404 });
+  }
+  return NextResponse.json(page);
+}
+
+export async function PUT(
+  request: Request,
+  { params }: { params: Promise<{ filename: string }> },
+) {
+  const { filename } = await params;
+  const payload = (await request.json()) as { content?: string };
+  if (typeof payload.content !== "string") {
+    return NextResponse.json({ error: "content_is_required" }, { status: 400 });
+  }
+
+  updateWikiPage(filename, payload.content);
+  return NextResponse.json({ success: true });
+}
+
+export async function DELETE(
+  _request: Request,
+  { params }: { params: Promise<{ filename: string }> },
+) {
+  const { filename } = await params;
+  deleteWikiPage(filename);
+  return NextResponse.json({ success: true });
+}

app/api/wiki/route.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from "next/server";
+
+import { createWikiPage, listWikiPages } from "@/lib/wiki";
+
+export async function GET() {
+  return NextResponse.json(listWikiPages());
+}
+
+export async function POST(request: Request) {
+  const payload = (await request.json()) as { title?: string };
+  if (!payload.title) {
+    return NextResponse.json({ error: "title_is_required" }, { status: 400 });
+  }
+
+  const filename = createWikiPage(payload.title);
+  return NextResponse.json({ filename, success: true }, { status: 201 });
+}

app/architecture/page.tsx

@@ -0,0 +1,9 @@
+import { ArchitectureView } from "@/components/architecture-view";
+import { listArchitecture } from "@/lib/agents";
+
+export const dynamic = "force-dynamic";
+
+export default async function ArchitecturePage() {
+  const architecture = await listArchitecture();
+  return <ArchitectureView architecture={architecture} />;
+}

app/gitea/page.tsx

@@ -0,0 +1,21 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export const dynamic = "force-dynamic";
+
+export default function GiteaPage() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Gitea Integration</CardTitle>
+        <CardDescription>
+          The Next.js migration keeps the fleet UI focused on operations. Existing Gitea automation can be reattached through dedicated API routes or direct repo links.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3 text-sm text-slate-300">
+        <p>Primary repo: `TopherMayor/openclaw-taskboard`</p>
+        <p>Infra wrapper: `TopherMayor/homelabagentroot` under `homelab/ubuntu/taskboard/`</p>
+        <p>Use the architecture and agents pages to verify deployed fleet state before issuing repo automation from the host agents.</p>
+      </CardContent>
+    </Card>
+  );
+}

app/globals.css

@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: 220 44% 10%;
+  --foreground: 210 40% 96%;
+  --card: 222 47% 13%;
+  --card-foreground: 210 40% 96%;
+  --primary: 188 95% 48%;
+  --primary-foreground: 221 39% 11%;
+  --secondary: 221 28% 20%;
+  --secondary-foreground: 210 40% 96%;
+  --muted: 223 27% 18%;
+  --muted-foreground: 215 20% 74%;
+  --accent: 35 94% 56%;
+  --accent-foreground: 221 39% 11%;
+  --border: 218 22% 26%;
+  --input: 218 22% 26%;
+  --ring: 188 95% 48%;
+  --radius: 1rem;
+  --font-sans: "Space Grotesk", sans-serif;
+  --font-mono: "IBM Plex Mono", monospace;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  min-height: 100vh;
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+pre {
+  overflow-x: auto;
+}

app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+
+import "@/app/globals.css";
+import { AppShell } from "@/components/app-shell";
+
+export const metadata: Metadata = {
+  title: "Claw Fleet Console",
+  description: "OpenClaw and ZeroClaw fleet dashboard",
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const headerList = await headers();
+  const pathname = headerList.get("x-pathname") || "/tasks";
+
+  return (
+    <html lang="en">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body>
+        <AppShell pathname={pathname}>{children}</AppShell>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function HomePage() {
+  redirect("/tasks");
+}

app/tasks/page.tsx

@@ -0,0 +1,10 @@
+import { TasksClient } from "@/components/tasks-client";
+import { listFleetAgents } from "@/lib/agents";
+import { listTasks } from "@/lib/tasks";
+
+export const dynamic = "force-dynamic";
+
+export default async function TasksPage() {
+  const [tasks, agents] = await Promise.all([listTasks(), listFleetAgents()]);
+  return <TasksClient initialTasks={tasks} agents={agents} />;
+}

app/usage/page.tsx

@@ -0,0 +1,39 @@
+import { all } from "@/lib/db";
+import { UsageView } from "@/components/usage-view";
+
+export const dynamic = "force-dynamic";
+
+type UsageRow = {
+  agent: string;
+  provider: string;
+  model: string;
+  tokens_used: number;
+  cost_estimate: number;
+};
+
+export default async function UsagePage() {
+  const rows = await all<UsageRow>("SELECT * FROM usage_tracking ORDER BY timestamp DESC");
+
+  const stats = rows.reduce(
+    (accumulator, row) => {
+      accumulator.totalRequests += 1;
+      accumulator.totalTokens += row.tokens_used || 0;
+      accumulator.totalCost += row.cost_estimate || 0;
+      if (!accumulator.byAgent[row.agent]) {
+        accumulator.byAgent[row.agent] = { requests: 0, tokens: 0, cost: 0 };
+      }
+      accumulator.byAgent[row.agent].requests += 1;
+      accumulator.byAgent[row.agent].tokens += row.tokens_used || 0;
+      accumulator.byAgent[row.agent].cost += row.cost_estimate || 0;
+      return accumulator;
+    },
+    {
+      totalRequests: 0,
+      totalTokens: 0,
+      totalCost: 0,
+      byAgent: {} as Record<string, { requests: number; tokens: number; cost: number }>,
+    },
+  );
+
+  return <UsageView stats={stats} />;
+}

app/wiki/page.tsx

@@ -0,0 +1,23 @@
+import { WikiView } from "@/components/wiki-view";
+import { listWikiPages, readWikiPage } from "@/lib/wiki";
+
+export const dynamic = "force-dynamic";
+
+export default async function WikiPage() {
+  const pages = listWikiPages();
+  const firstPage = pages[0] ? readWikiPage(pages[0].filename) : null;
+
+  return (
+    <WikiView
+      pages={pages}
+      initialPageContent={
+        firstPage
+          ? {
+              title: firstPage.metadata.title,
+              content: firstPage.content,
+            }
+          : null
+      }
+    />
+  );
+}