feat: nextjs migration (#33)

Author: aledefra

.gitignore

@@ -10,6 +10,8 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+.next
+next-env.d.ts
 *.local
 
 # Editor directories and files
@@ -30,4 +32,6 @@ scripts/deploy-vercel.sh
 # Env files
 .env
 
-tsconfig.app.tsbuildinfo
+tsconfig.app.tsbuildinfo
+tsconfig.tsbuildinfo
+certificates

AGENTS.md

@@ -1,24 +1,35 @@
 # Repository Guidelines
 
 ## Project Structure & Module Organization
-The Vite + React app lives in `src/` with `main.tsx` mounting `App.tsx`. Feature-specific UI is grouped under `src/components` (e.g., `create-project`, `deeploys`), while route screens sit in `src/pages`. Shared hooks/utilities are in `src/lib` and `src/shared`, smart-contract adapters in `src/blockchain`, and schema/types in `src/schemas`, `src/data`, and `src/typedefs`. Static assets live in `public/` and `src/assets/`; builds land in `dist/`.
+
+This is a Next.js App Router project. Routes and layouts live in `app/` (file-based routing via `page.tsx`, `layout.tsx`, `not-found.tsx`, and dynamic segments like `[id]`). The codebase uses route groups for organization, e.g. `app/(public)` and `app/(protected)` (the protected group is gated by `app/(protected)/protected-layout.tsx`).
+
+Most feature UI remains in `src/`: feature-specific components are grouped under `src/components` (e.g., `create-project`, `deeploys`, `tunnels`), shared UI/logic in `src/shared`, hooks/utilities/contexts/providers in `src/lib`, smart-contract adapters in `src/blockchain`, and schema/types in `src/schemas`, `src/data`, and `src/typedefs`. Static assets live in `public/` and `src/assets/`. Next build output is `.next/` (a legacy `dist/` directory may exist from pre-Next builds and should not be treated as the Next build output).
 
 ## Build, Test, and Development Commands
+
 Run all commands from the repo root:
-- `npm run dev` launches the Vite dev server with HMR.
-- `npm run dev:logs` adds verbose Vite diagnostics for debugging config issues.
-- `npm run build` type-checks through `tsc -b` then emits a production bundle to `dist/`.
+
+- `npm run dev` launches the Next.js dev server (`next dev --turbo --experimental-https`).
+- `npm run dev:logs` enables verbose Next.js diagnostics (`NEXT_DEBUG=1 next dev --turbo --experimental-https`).
+- `npm run build` creates a production build (`next build`, outputs to `.next/`).
+- `npm run start` serves the production build locally (`next start`).
 - `npm run lint` executes ESLint with the project’s React/TypeScript rules.
-- `npm run preview` serves the last build for local production smoke tests.
 
 ## Deeploy API Integration
-Deeploy workflows talk to the [edge_node](https://github.com/Ratio1/edge_node) API through wrappers in `src/lib/api/deeploy.ts`. Configure the base URL by setting `VITE_API_URL` and `VITE_ENVIRONMENT` in your `.env`; `src/lib/config.ts` routes requests across devnet/testnet/mainnet. Local storage must expose `accessToken`/`refreshToken` to satisfy the Axios interceptors. When working against a local edge node, run its server first, then point `VITE_API_URL` to the exposed port (e.g., `http://localhost:5000`). Mock responses for offline work by stubbing the helpers (`createPipeline`, `getApps`, etc.) instead of bypassing the provider.
+
+Deeploy workflows talk to the [edge_node](https://github.com/Ratio1/edge_node) API through wrappers in `src/lib/api/deeploy.ts`. Configure the base URL by setting `NEXT_PUBLIC_API_URL` and `NEXT_PUBLIC_ENVIRONMENT` (and optionally `NEXT_PUBLIC_DEV_ADDRESS`) in your env file (prefer `.env.local`); `src/lib/config.ts` routes requests across devnet/testnet/mainnet. Local storage must expose `accessToken`/`refreshToken` to satisfy the Axios interceptors. When working against a local edge node, run its server first, then point `NEXT_PUBLIC_API_URL` to the exposed port (e.g., `http://localhost:5000`).
+
+Because this is Next.js, be mindful of client/server boundaries: modules that access `localStorage` (like `src/lib/api/deeploy.ts`) must only run in client components/hooks (files with `'use client'`) and should not be imported/executed from server components.
 
 ## Coding Style & Naming Conventions
-Prettier (`.prettierrc`) enforces four-space indentation, single quotes, semicolons, and Tailwind class sorting—format before committing. Use PascalCase for components, camelCase for functions and state, and kebab-case for feature folders. Respect path aliases from `tsconfig.app.json` (such as `@components/...`) to avoid brittle relative imports. ESLint relaxes certain hook rules; still supply explicit dependency arrays and delete unused code paths.
+
+Prettier (`.prettierrc`) enforces four-space indentation, single quotes, semicolons, and Tailwind class sorting—format before committing. Use PascalCase for components, camelCase for functions and state, and kebab-case for feature folders. Respect path aliases from `tsconfig.json` (such as `@components/...`) to avoid brittle relative imports. In the `app/` router, add `'use client'` to components that use hooks, browser APIs, or context providers.
 
 ## Testing Guidelines
-Automated tests are not yet wired into `package.json`. Prefer Vitest plus React Testing Library when adding coverage; place specs alongside source as `*.test.ts(x)` or under `src/__tests__/`. Stub Deeploy API calls and blockchain providers to keep tests deterministic, and document manual QA steps in your PR until the suite matures.
+
+Automated tests are not yet wired into `package.json`. Place specs alongside source as `*.test.ts(x)` or under `src/__tests__/`. Stub Deeploy API calls and blockchain providers to keep tests deterministic, and document manual QA steps in your PR until the suite matures.
 
 ## Commit & Pull Request Guidelines
+
 History follows Conventional Commit prefixes (`fix:`, `feat:`, etc.); keep summaries concise and imperative (<72 chars). Separate logical changes—UI tweaks, contract bindings, and config updates should ship in distinct commits. PRs need a clear problem statement, bullet summary of changes, evidence for UI updates (screenshots/GIFs), linked work items, and callouts for required env/config shifts.

Dockerfile_devnet

@@ -1,30 +1,41 @@
-# ---- Build stage ---------
-FROM node:18-slim AS builder
-ARG VERSION
+FROM node:20-alpine AS base
 WORKDIR /app
 
-# Build arguments for configuration
-ARG API_URL=https://devnet-deeploy-api.ratio1.ai
-ARG ENVIRONMENT=devnet
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN apk add --no-cache python3 make g++ libc6-compat
+
+ARG NEXT_PUBLIC_API_URL=https://devnet-deeploy-api.ratio1.ai
+ARG NEXT_PUBLIC_ENVIRONMENT=devnet
+ARG NEXT_PUBLIC_DEV_ADDRESS
+ARG VERSION
 
-# Set environment variables for the build process
-ENV VITE_API_URL=${API_URL}
-ENV VITE_ENVIRONMENT=${ENVIRONMENT}
+ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+ENV NEXT_PUBLIC_ENVIRONMENT=${NEXT_PUBLIC_ENVIRONMENT}
+ENV NEXT_PUBLIC_DEV_ADDRESS=${NEXT_PUBLIC_DEV_ADDRESS}
+ENV NEXT_PUBLIC_APP_VERSION=${VERSION}
 
+FROM base AS deps
 COPY package*.json ./
 RUN npm ci
 
+FROM base AS builder
+COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-ENV VITE_APP_VERSION=${VERSION}
-RUN npm run build          # produces static files in /app/dist
+RUN npm run build
+RUN npm prune --omit=dev
 
-# ---- Runtime stage ---------
-FROM nginx:alpine
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production \
+    HOST=0.0.0.0 \
+    PORT=80 \
+    NEXT_TELEMETRY_DISABLED=1
 
-COPY --from=builder /app/dist /usr/share/nginx/html
+RUN apk add --no-cache libc6-compat
 
-RUN sed -i '/index  index\.html index\.htm;/a\        try_files \$uri \$uri/ /index.html;' \
-        /etc/nginx/conf.d/default.conf
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/public ./public
 
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["node", "server.js"]

Dockerfile_mainnet

@@ -1,30 +1,41 @@
-# ---- Build stage ---------
-FROM node:18-slim AS builder
-ARG VERSION
+FROM node:20-alpine AS base
 WORKDIR /app
 
-# Build arguments for configuration
-ARG API_URL=https://deeploy-api.ratio1.ai
-ARG ENVIRONMENT=mainnet
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN apk add --no-cache python3 make g++ libc6-compat
+
+ARG NEXT_PUBLIC_API_URL=https://deeploy-api.ratio1.ai
+ARG NEXT_PUBLIC_ENVIRONMENT=mainnet
+ARG NEXT_PUBLIC_DEV_ADDRESS
+ARG VERSION
 
-# Set environment variables for the build process
-ENV VITE_API_URL=${API_URL}
-ENV VITE_ENVIRONMENT=${ENVIRONMENT}
+ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+ENV NEXT_PUBLIC_ENVIRONMENT=${NEXT_PUBLIC_ENVIRONMENT}
+ENV NEXT_PUBLIC_DEV_ADDRESS=${NEXT_PUBLIC_DEV_ADDRESS}
+ENV NEXT_PUBLIC_APP_VERSION=${VERSION}
 
+FROM base AS deps
 COPY package*.json ./
 RUN npm ci
 
+FROM base AS builder
+COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-ENV VITE_APP_VERSION=${VERSION}
-RUN npm run build          # produces static files in /app/dist
+RUN npm run build
+RUN npm prune --omit=dev
 
-# ---- Runtime stage ---------
-FROM nginx:alpine
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production \
+    HOST=0.0.0.0 \
+    PORT=80 \
+    NEXT_TELEMETRY_DISABLED=1
 
-COPY --from=builder /app/dist /usr/share/nginx/html
+RUN apk add --no-cache libc6-compat
 
-RUN sed -i '/index  index\.html index\.htm;/a\        try_files \$uri \$uri/ /index.html;' \
-        /etc/nginx/conf.d/default.conf
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/public ./public
 
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["node", "server.js"]

Dockerfile_testnet

@@ -1,30 +1,41 @@
-# ---- Build stage ---------
-FROM node:18-slim AS builder
-ARG VERSION
+FROM node:20-alpine AS base
 WORKDIR /app
 
-# Build arguments for configuration
-ARG API_URL=https://testnet-deeploy-api.ratio1.ai
-ARG ENVIRONMENT=testnet
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN apk add --no-cache python3 make g++ libc6-compat
+
+ARG NEXT_PUBLIC_API_URL=https://testnet-deeploy-api.ratio1.ai
+ARG NEXT_PUBLIC_ENVIRONMENT=testnet
+ARG NEXT_PUBLIC_DEV_ADDRESS
+ARG VERSION
 
-# Set environment variables for the build process
-ENV VITE_API_URL=${API_URL}
-ENV VITE_ENVIRONMENT=${ENVIRONMENT}
+ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+ENV NEXT_PUBLIC_ENVIRONMENT=${NEXT_PUBLIC_ENVIRONMENT}
+ENV NEXT_PUBLIC_DEV_ADDRESS=${NEXT_PUBLIC_DEV_ADDRESS}
+ENV NEXT_PUBLIC_APP_VERSION=${VERSION}
 
+FROM base AS deps
 COPY package*.json ./
 RUN npm ci
 
+FROM base AS builder
+COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-ENV VITE_APP_VERSION=${VERSION}
-RUN npm run build          # produces static files in /app/dist
+RUN npm run build
+RUN npm prune --omit=dev
 
-# ---- Runtime stage ---------
-FROM nginx:alpine
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production \
+    HOST=0.0.0.0 \
+    PORT=80 \
+    NEXT_TELEMETRY_DISABLED=1
 
-COPY --from=builder /app/dist /usr/share/nginx/html
+RUN apk add --no-cache libc6-compat
 
-RUN sed -i '/index  index\.html index\.htm;/a\        try_files \$uri \$uri/ /index.html;' \
-        /etc/nginx/conf.d/default.conf
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/public ./public
 
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["node", "server.js"]

README.md

@@ -1,54 +1,76 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+# Deeploy dApp
+
+Ratio1's Deeploy front-end for deploying and operating services on the Ratio1 network. The app is built with Next.js (App Router) and provides wallet-based authentication, Deeploy job management, tunneling setup, and project drafting tools.
+
+## Features
+
+- Wallet sign-in with SIWE via ConnectKit/Wagmi (Base & Base Sepolia networks pulled from `src/lib/config.ts`).
+- Create and manage Deeploy jobs and projects; drafts are stored locally with Dexie for offline-friendly editing.
+- Monitor running deployments, resend commands, scale workers, and review Deeploy API responses.
+- Cloudflare tunnel management with signed messages to fetch and store secrets securely.
+- Service catalog with scripted additions (`npm run add-service`) and validation (`npm run validate-services`).
+- Shared contexts for authentication, blockchain state, tunneling, and deployment data (`src/lib/contexts`).
+
+## Getting Started
+
+Prerequisites: Node.js 20+ and npm.
+
+1. Install dependencies:
+
 ```
+npm install
+```
+
+2. Create `.env.local` (prefer this over `.env`):
+
+```
+NEXT_PUBLIC_ENVIRONMENT=devnet         # devnet | testnet | mainnet
+NEXT_PUBLIC_API_URL=http://localhost:5000  # Deeploy edge_node base URL
+NEXT_PUBLIC_DEV_ADDRESS=0xYourDevWallet    # optional; forces this address in dev
+NEXT_PUBLIC_APP_VERSION=local              # optional; shown in the UI footer
+```
+
+- `NEXT_PUBLIC_API_URL` should point to your running [edge_node](https://github.com/Ratio1/edge_node) instance or the hosted Deeploy API.
+- `NEXT_PUBLIC_ENVIRONMENT` selects the chain and backend/oracle endpoints defined in `src/lib/config.ts`.
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
+3. Start the dev server (HTTPS by default):
+
+```
+npm run dev
 ```
+
+Visit https://localhost:3000 and trust the local certificate if prompted.
+
+## Usage Notes
+
+- Authentication uses SIWE; tokens (`accessToken`, `refreshToken`) are kept in `localStorage` and reused by the Axios interceptors in `src/lib/api`.
+- Most protected routes live under `app/(protected)/…`; the public login screen is under `app/(public)/login`.
+- Draft projects/jobs are stored in IndexedDB (`src/lib/storage/db.ts`); clearing browser storage removes drafts.
+- When pointing to a local edge_node, start that server first, then set `NEXT_PUBLIC_API_URL` to its port (e.g., `http://localhost:5000`).
+
+## Scripts
+
+- `npm run dev` – Next.js dev server (`next dev --turbo --experimental-https`).
+- `npm run build` / `npm run start` – production build and serve.
+- `npm run lint` – ESLint with the project rules.
+- `npm run add-service` – interactive wizard to append a service to `src/data/services.ts`.
+- `npm run validate-services` – checks service definitions, color variants, and dynamic env types.
+
+## Project Structure
+
+- `app/` – Next.js App Router entrypoints (`(public)` and `(protected)` route groups, layouts, error pages).
+- `src/components/` – feature components (auth, create-job, deeploys, tunnels, etc.).
+- `src/shared/` – shared UI primitives and layout helpers.
+- `src/lib/` – configs, API clients (Deeploy, backend, oracles, tunnels), providers, contexts, hooks, utilities.
+- `src/data/` – static data (services catalog, color types, dynamic env types) and scripts targets.
+- `src/blockchain/` – contract helpers and wagmi/viem bindings.
+- `public/` – static assets and manifest; `certificates/` holds local HTTPS certs for dev.
+- `scripts/` – maintenance scripts for services and data validation.
+
+## Deployment
+
+Dockerfiles are provided per environment (`Dockerfile_devnet`, `_testnet`, `_mainnet`) and expect build args `NEXT_PUBLIC_API_URL`, `NEXT_PUBLIC_ENVIRONMENT`, and `VERSION` (mapped to `NEXT_PUBLIC_APP_VERSION`).
+
+## Testing
+
+Automated tests are not wired up yet; use `npm run lint` locally and document manual QA steps when making changes.