feat(FN-002): complete Step 2 — React Frontend App Skeleton

Fusion-Task-Id: FN-002
Fusion-Task-Lineage: 49cb7077-d805-4d39-9a27-ae50744f2839

apps/web/Dockerfile

@@ -2,7 +2,7 @@ FROM node:22-alpine AS builder
 
 WORKDIR /app
 COPY package.json ./
-RUN npm install -g pnpm && pnpm install
+RUN npm install -g pnpm@11.1.1 && pnpm install
 
 COPY . .
 RUN pnpm build

apps/web/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "test": "vitest run",
     "typecheck": "tsc -b --noEmit"
   },

apps/web/src/App.css

@@ -5,48 +5,48 @@
 }
 
 .app-header {
-  padding: 2rem;
+  padding: var(--space-lg);
   text-align: center;
-  border-bottom: 1px solid rgba(255,255,255,0.08);
+  border-bottom: 1px solid var(--border);
 }
 
 .app-header h1 {
   margin: 0;
-  font-size: 2.5rem;
+  font-size: var(--font-xl);
   color: var(--accent);
 }
 
 .tagline {
-  margin: 0.5rem 0 0;
+  margin: var(--space-xs) 0 0;
-  opacity: 0.8;
+  opacity: var(--opacity-high);
 }
 
 .app-main {
   flex: 1;
-  padding: 2rem;
+  padding: var(--space-lg);
   display: flex;
   justify-content: center;
   align-items: flex-start;
 }
 
 .status-card {
-  background: rgba(255,255,255,0.04);
+  background: var(--surface);
-  border: 1px solid rgba(255,255,255,0.08);
+  border: 1px solid var(--border);
-  border-radius: 0.75rem;
+  border-radius: var(--radius);
-  padding: 1.5rem 2rem;
+  padding: var(--space-md) var(--space-lg);
-  min-width: 280px;
+  min-width: var(--width-card);
 }
 
 .status-card h2 {
-  margin: 0 0 1rem;
+  margin: 0 0 var(--space-sm);
-  font-size: 1.25rem;
+  font-size: var(--font-lg);
 }
 
 .status-row {
   display: flex;
   justify-content: space-between;
-  padding: 0.5rem 0;
+  padding: var(--space-xs) 0;
-  border-bottom: 1px solid rgba(255,255,255,0.06);
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .status-row:last-child {
@@ -54,7 +54,7 @@
 }
 
 .status-label {
-  opacity: 0.7;
+  opacity: var(--opacity-medium);
 }
 
 .status-value {
@@ -62,9 +62,9 @@
 }
 
 .app-footer {
-  padding: 1rem 2rem;
+  padding: var(--space-sm) var(--space-lg);
   text-align: center;
-  opacity: 0.5;
+  opacity: var(--opacity-dim);
-  font-size: 0.875rem;
+  font-size: var(--font-sm);
-  border-top: 1px solid rgba(255,255,255,0.08);
+  border-top: 1px solid var(--border);
 }

apps/web/src/index.css

@@ -2,6 +2,23 @@
   --bg: #0f172a;
   --fg: #e2e8f0;
   --accent: #38bdf8;
+  --surface: rgba(255, 255, 255, 0.04);
+  --border: rgba(255, 255, 255, 0.08);
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --space-xs: 0.5rem;
+  --space-sm: 1rem;
+  --space-md: 1.5rem;
+  --space-lg: 2rem;
+  --space-xl: 2.5rem;
+  --radius: 0.75rem;
+  --width-card: 17.5rem;
+  --font-base: 1rem;
+  --font-sm: 0.875rem;
+  --font-lg: 1.25rem;
+  --font-xl: 2.5rem;
+  --opacity-dim: 0.5;
+  --opacity-medium: 0.7;
+  --opacity-high: 0.8;
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
   line-height: 1.5;
   color-scheme: dark;

apps/web/vite.config.ts

@@ -1,9 +1,15 @@
 /// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import path from 'path'
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
   server: {
     port: 5173,
     proxy: {

pnpm-workspace.yaml

@@ -1,5 +1,7 @@
 packages:
   - 'apps/*'
   - 'packages/*'
+allowBuilds:
+  esbuild: set this to true or false
 onlyBuiltDependencies:
   - esbuild