[taskboard] migrate fleet console to nextjs

2026-03-06 14:44:27 -08:00
parent 94e54dc144
commit a765b3d22f
48 changed files with 5483 additions and 790 deletions
--- a/components/app-shell.tsx
+++ b/components/app-shell.tsx
@@ -0,0 +1,67 @@
+import Link from "next/link";
+import { Network, NotebookTabs, PanelsTopLeft, ScrollText, Settings2, UsersRound } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const navItems = [
+  { href: "/tasks", label: "Tasks", icon: PanelsTopLeft },
+  { href: "/agents", label: "Agents", icon: UsersRound },
+  { href: "/architecture", label: "Architecture", icon: Network },
+  { href: "/wiki", label: "Wiki", icon: NotebookTabs },
+  { href: "/usage", label: "Usage", icon: ScrollText },
+  { href: "/gitea", label: "Gitea", icon: Settings2 },
+];
+
+export function AppShell({
+  pathname,
+  children,
+}: {
+  pathname: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(34,211,238,0.18),_transparent_30%),radial-gradient(circle_at_top_right,_rgba(245,158,11,0.14),_transparent_28%),linear-gradient(180deg,#07111f_0%,#091321_44%,#0f172a_100%)] text-foreground">
+      <header className="border-b border-white/10 bg-slate-950/60 backdrop-blur-xl">
+        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-6">
+          <div>
+            <p className="font-mono text-xs uppercase tracking-[0.3em] text-cyan-300/80">
+              OpenClaw Taskboard
+            </p>
+            <h1 className="mt-1 text-2xl font-semibold tracking-tight text-white">
+              Claw Fleet Console
+            </h1>
+            <p className="mt-1 max-w-2xl text-sm text-slate-300">
+              Unified operations view for OpenClaw orchestration, ZeroClaw host runtimes, and deployed architecture.
+            </p>
+          </div>
+        </div>
+      </header>
+
+      <div className="mx-auto grid max-w-7xl gap-6 px-6 py-8 lg:grid-cols-[240px_minmax(0,1fr)]">
+        <nav className="space-y-2">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = pathname === item.href;
+            return (
+              <Link
+                className={cn(
+                  "flex items-center gap-3 rounded-xl border px-4 py-3 text-sm transition",
+                  isActive
+                    ? "border-cyan-300/30 bg-cyan-300/10 text-cyan-100 shadow-panel"
+                    : "border-white/10 bg-slate-950/35 text-slate-300 hover:border-white/20 hover:bg-white/5 hover:text-white",
+                )}
+                href={item.href}
+                key={item.href}
+              >
+                <Icon className="h-4 w-4" />
+                <span>{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+
+        <main>{children}</main>
+      </div>
+    </div>
+  );
+}