# FlowMonk Web — Vercel Deployment Roadmap

> **App:** `@flowmonk/web`
> **Repo:** `learning_ai_flowmonk` → `web/`
> **Status:** 🔴 Blocked — `file:` ref

---

## Current State

- **Framework:** Next.js 16.1.6, React 19.2.3
- **Output:** Vercel-aware
- **Styling:** No TailwindCSS (minimal inline/module CSS)
- **Dependencies:** 6 `@bytelyst/*` — **1 via `file:` ref** (`ui`), 5 via Gitea (pinned versions like `0.1.0` and `0.1.1`)
- **Build:** `next build --webpack`
- **Special:** `typedRoutes: true`, `outputFileTracingRoot` set (harmless on Vercel)
- **Client-side focused** — zones, flows, tasks, schedule, recommendations

## Gaps to Fix

### Gap 1: Convert `file:` ref (~5 min)

**File:** `web/package.json`

```diff
- "@bytelyst/ui": "file:../../learning_ai_common_plat/packages/ui",
+ "@bytelyst/ui": "^0.1.0",
```

- [ ] Update `package.json`
- [ ] Run `pnpm install`
- [ ] Verify build

### Gap 2: Registry Access (~5 min)

Once Caddy is configured on the Azure VM (see [SECURE_API_EXPOSURE.md](../single_azure_vm/docker/SECURE_API_EXPOSURE.md)), Gitea will be accessible at `https://gitea.bytelyst.com`.

- [ ] Update `.npmrc`:
  ```
  @bytelyst:registry=https://gitea.bytelyst.com/api/packages/ByteLyst/npm/
  //gitea.bytelyst.com/api/packages/ByteLyst/npm/:_authToken=${GITEA_NPM_TOKEN}
  ```
- [ ] Set `GITEA_NPM_TOKEN` as a Vercel environment variable

### Gap 3 (optional): Add TailwindCSS

Not a deployment blocker, but the app lacks TailwindCSS unlike all other ecosystem web apps.

- [ ] (Deferred) Add TailwindCSS v4 for consistency

## Deployment Steps

### Step 1: Fix `file:` ref (~5 min)

### Step 2: Fix registry access (~5 min)

### Step 3: Create Vercel Project (~5 min)

- [ ] Connect `learning_ai_flowmonk` repo
- [ ] Set **Root Directory** to `web`
- [ ] Framework preset: **Next.js**

### Step 4: Environment Variables (~5 min)

- [ ] `NEXT_PUBLIC_BACKEND_URL` = `https://api.bytelyst.com/flowmonk`

### Step 5: Verify (~5 min)

- [ ] Test dashboard loads
- [ ] Test zone/flow/task CRUD pages
- [ ] Test schedule generation view

### Step 6: Domain (~5 min)

- [ ] Add custom domain (e.g., `app.flowmonk.app`)

## Estimated Total Effort: ~30 minutes
