feat: forester dashboard

forester/.gitignore

@@ -3,6 +3,7 @@ logs
 .idea
 .env
 .env.devnet
+.env.mainnet
 *.json
 !package.json
 spawn.sh

forester/Dockerfile

@@ -14,9 +14,8 @@ RUN cargo build --release --package forester
 
 FROM debian:bookworm-slim
 RUN apt-get update && apt-get install -y ca-certificates libssl3 && rm -rf /var/lib/apt/lists/*
-RUN mkdir -p /app/config /app/static
+RUN mkdir -p /app/config
 COPY --from=builder /app/target/release/forester /usr/local/bin/forester
-COPY --from=builder /app/forester/static /app/static
 WORKDIR /app
 
 ENTRYPOINT ["/usr/local/bin/forester"]

forester/dashboard/.env.local.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_FORESTER_API_URL=http://localhost:8080

forester/dashboard/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+.next/
+out/
+.env.local

forester/dashboard/Dockerfile

@@ -0,0 +1,26 @@
+FROM node:20-alpine AS base
+
+FROM base AS deps
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+FROM base AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+EXPOSE 3000
+ENV PORT=3000
+CMD ["node", "server.js"]

forester/dashboard/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

forester/dashboard/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "standalone",
+};
+
+export default nextConfig;

forester/dashboard/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "forester-dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^14.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "swr": "^2.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.0.0"
+  }
+}

forester/dashboard/postcss.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

forester/dashboard/src/app/compressible/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useCompressible } from "@/hooks/useCompressible";
+import { ErrorState } from "@/components/ErrorState";
+import { CompressiblePanel } from "@/components/CompressiblePanel";
+
+export default function CompressiblePage() {
+  const { data, error, isLoading } = useCompressible();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-gray-400 text-sm">
+          Loading compressible status...
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !data) {
+    return <ErrorState error={error} fallbackMessage="Failed to load compressible data" />;
+  }
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-bold">Compressible Accounts</h2>
+      <CompressiblePanel data={data} />
+    </div>
+  );
+}

forester/dashboard/src/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

forester/dashboard/src/app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { Sidebar } from "@/components/Sidebar";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Forester Dashboard",
+  description: "Light Protocol Forester monitoring dashboard",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className="bg-white text-gray-900 antialiased">
+        <div className="flex min-h-screen">
+          <Sidebar />
+          <main className="flex-1 p-6 overflow-auto">{children}</main>
+        </div>
+      </body>
+    </html>
+  );
+}

forester/dashboard/src/app/metrics/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useMetrics } from "@/hooks/useMetrics";
+import { ErrorState } from "@/components/ErrorState";
+import { MetricsPanel } from "@/components/MetricsPanel";
+
+export default function MetricsPage() {
+  const { data: metrics, error, isLoading } = useMetrics();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-gray-400 text-sm">Loading metrics...</div>
+      </div>
+    );
+  }
+
+  if (error || !metrics) {
+    return <ErrorState error={error} fallbackMessage="Failed to load metrics" />;
+  }
+
+  const isEmpty =
+    Object.keys(metrics.transactions_processed_total).length === 0 &&
+    Object.keys(metrics.forester_balances).length === 0;
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-bold">Metrics</h2>
+      {isEmpty ? (
+        <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
+          <p className="text-gray-500 text-sm">
+            No metrics data available.
+          </p>
+          <p className="text-gray-400 text-xs mt-2">
+            Configure --prometheus-url to query aggregated metrics, or connect
+            to a running forester instance.
+          </p>
+        </div>
+      ) : (
+        <MetricsPanel metrics={metrics} />
+      )}
+    </div>
+  );
+}

forester/dashboard/src/app/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useForesterStatus } from "@/hooks/useForesterStatus";
+import { EpochCard } from "@/components/EpochCard";
+import { ErrorState } from "@/components/ErrorState";
+import { ForesterList } from "@/components/ForesterList";
+import { QueuePressureChart } from "@/components/QueuePressureChart";
+import { formatNumber } from "@/lib/utils";
+
+export default function OverviewPage() {
+  const { data: status, error, isLoading } = useForesterStatus();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-gray-400 text-sm">Loading forester status...</div>
+      </div>
+    );
+  }
+
+  if (error || !status) {
+    return <ErrorState error={error} fallbackMessage="Failed to load forester status" />;
+  }
+
+  const warnings: string[] = [];
+  if (status.active_epoch_foresters.length === 0) {
+    warnings.push("No foresters registered for the active epoch");
+  }
+  if (
+    status.slots_until_next_registration < 1000 &&
+    status.registration_epoch_foresters.length === 0
+  ) {
+    warnings.push("Registration closing soon with no foresters registered");
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-bold">Overview</h2>
+        <span className="text-xs text-gray-400 font-mono">
+          Slot {formatNumber(status.slot)}
+        </span>
+      </div>
+
+      {warnings.map((w, i) => (
+        <div
+          key={i}
+          className="bg-amber-50 border border-amber-200 rounded-lg px-4 py-3 text-sm text-amber-800"
+        >
+          {w}
+        </div>
+      ))}
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <StatCard label="Total Trees" value={status.total_trees} />
+        <StatCard label="Active Trees" value={status.active_trees} />
+        <StatCard label="Rolled Over" value={status.rolled_over_trees} />
+        <StatCard
+          label="Total Pending"
+          value={status.total_pending_items}
+          highlight={status.total_pending_items > 0}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <EpochCard status={status} />
+        <QueuePressureChart stats={status.aggregate_queue_stats} />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <ForesterList
+          title="Active Epoch Foresters"
+          foresters={status.active_epoch_foresters}
+        />
+        <ForesterList
+          title="Registration Epoch Foresters"
+          foresters={status.registration_epoch_foresters}
+        />
+      </div>
+    </div>
+  );
+}
+
+function StatCard({
+  label,
+  value,
+  highlight,
+}: {
+  label: string;
+  value: number;
+  highlight?: boolean;
+}) {
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 p-4">
+      <div className="text-xs text-gray-500">{label}</div>
+      <div
+        className={`text-2xl font-semibold mt-1 ${highlight ? "text-amber-600" : "text-gray-900"}`}
+      >
+        {formatNumber(value)}
+      </div>
+    </div>
+  );
+}

forester/dashboard/src/app/trees/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useForesterStatus } from "@/hooks/useForesterStatus";
+import { ErrorState } from "@/components/ErrorState";
+import { TreeTable } from "@/components/TreeTable";
+
+export default function TreesPage() {
+  const { data: status, error, isLoading } = useForesterStatus();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-gray-400 text-sm">Loading trees...</div>
+      </div>
+    );
+  }
+
+  if (error || !status) {
+    return <ErrorState error={error} fallbackMessage="Failed to load trees" />;
+  }
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-bold">Trees</h2>
+      <TreeTable
+        trees={status.trees}
+        foresters={status.active_epoch_foresters}
+        currentLightSlot={status.current_light_slot}
+      />
+    </div>
+  );
+}