diff --git a/docs/superpowers/specs/2026-05-02-b1-nextjs-scaffold-design.md b/docs/superpowers/specs/2026-05-02-b1-nextjs-scaffold-design.md index 512e7ee..a2eaae8 100644 --- a/docs/superpowers/specs/2026-05-02-b1-nextjs-scaffold-design.md +++ b/docs/superpowers/specs/2026-05-02-b1-nextjs-scaffold-design.md @@ -131,34 +131,16 @@ The trailing-slash preservation means `GET /api/acc/` proxies to `api-server:300 ### Empty UI page -`web/app/page.tsx` renders a centered card confirming the service is up: +`web/app/page.tsx` renders a placeholder confirming the service is up. The implementation plan invokes the `frontend-design` skill to generate `page.tsx` and `layout.tsx` (per user direction — frontend-design owns all web design code in this codebase). The brief handed to the skill: -```tsx -export default function Home() { - return ( -
-
-

cm-web-next scaffold

-

- B1 scaffold. UI lands in B2. -

-

- Try{" "} - - /api/acc/ - {" "} - to verify the proxy reaches{" "} - api-server:3000. -

-
-
- ); -} -``` +- **Page purpose:** scaffold-confirmation page for `cm-web-next`. Shipped only in B1; replaced by the real dashboard in B2. +- **Required content:** product name (`CM Bot V2`), the literal text `cm-web-next scaffold` so an operator can grep the page for it, a one-line "B2 lands the real UI" note, and an obvious link to `/api/acc/` so a smoke test of the proxy is one click away. +- **Design constraints:** uses Tailwind v4 (already configured); no external font/image deps; no JS interactivity (Server Component is fine); single page, no nav. Should clearly read as a temporary scaffold (not a real dashboard) so nobody mistakes it for production UI. +- **Out of scope:** dark mode, responsive breakpoints beyond mobile-first defaults, animations. -`web/app/layout.tsx` is the standard `create-next-app` boilerplate with ``, body class for Tailwind defaults, and a tab title `CM Bot V2`. +`web/app/layout.tsx` is also generated by frontend-design — minimal `` shell with `` Tailwind defaults and tab title `CM Bot V2`. -`web/app/globals.css` is the Tailwind v4 import (`@import "tailwindcss"`). +`web/app/globals.css` is the Tailwind v4 import (`@import "tailwindcss";`) — written by hand, no design surface. ### Dockerfile @@ -350,9 +332,15 @@ Low. - **Trailing slashes.** `trailingSlash: true` in Next.js means `/api/acc` redirects to `/api/acc/` with a 308. The Flask version always required the slash. Behavior is parity-equivalent for clients that include the slash; clients that don't get a redirect they didn't get before. The UI we control will always include it. - **Build context size.** Docker build context includes the whole repo unless we set up `.dockerignore`. The repo's existing `.dockerignore` excludes `__pycache__`, `*.py[cod]`, `*.log`, `.git`, `logs/`, `node_modules/`. The `node_modules/` entry already prevents copying the host's `web/node_modules/` if the operator ran `npm install` on the host — good. We don't need a new repo-root `.dockerignore` change. +## Frontend-design conventions + +All web design code in this codebase (TSX components, page layouts, CSS-in-class Tailwind, etc.) goes through the `frontend-design` skill rather than being hand-written. This decision applies to B1's placeholder, B2's full UI port, and any subsequent UI work. Glue code (Route Handlers, `next.config.ts`, env wiring, the Dockerfile, package.json, etc.) is written directly. + +Practical implication for the implementation plan: there is one task that explicitly invokes `frontend-design` with the brief described in the "Empty UI page" section above and writes the returned `page.tsx` and `layout.tsx` into `web/app/`. Subsequent edits to those files in B2 follow the same pattern. + ## Out-of-Scope Follow-Ups -- **B2** — port the UI: tabs, two tables, sortable columns, inline cell editing, refresh, stats cards, error states. +- **B2** — port the UI: tabs, two tables, sortable columns, inline cell editing, refresh, stats cards, error states. Implementation invokes `frontend-design`. - **B3** — PWA: `manifest.webmanifest`, `next-pwa` (or hand-rolled service worker), 192/512 icons, install prompt. - **B4** — cutover: delete `app/cm_web_view.py`, retire `cm-web` service, rename `cm-web-next` → `cm-web` (and same for the image), update aaPanel-hardening guide and `dev.sh` accordingly. - **Hot-reload in dev** — `command: ["npm", "run", "dev"]` in the override + bind-mount `web/` into the container. Useful but not necessary for B1; revisit when B2 starts and iteration speed matters.