From 212b9e7c21d68337c9661ecd9870774152b39698 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Thu, 14 May 2026 06:15:59 +0200
Subject: [PATCH] =?UTF-8?q?feat(FN-002):=20complete=20Step=202=20=E2=80=94?=
 =?UTF-8?q?=20React=20Frontend=20App=20Skeleton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fusion-Task-Id: FN-002
Fusion-Task-Lineage: 49cb7077-d805-4d39-9a27-ae50744f2839
---
 apps/web/Dockerfile     |  2 +-
 apps/web/package.json   |  2 +-
 apps/web/src/App.css    | 40 ++++++++++++++++++++--------------------
 apps/web/src/index.css  | 17 +++++++++++++++++
 apps/web/vite.config.ts |  6 ++++++
 pnpm-workspace.yaml     |  2 ++
 6 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/apps/web/Dockerfile b/apps/web/Dockerfile
index f624c23..f986d06 100644
--- a/apps/web/Dockerfile
+++ b/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
diff --git a/apps/web/package.json b/apps/web/package.json
index 15b17f6..bc4c599 100644
--- a/apps/web/package.json
+++ b/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"
   },
diff --git a/apps/web/src/App.css b/apps/web/src/App.css
index ba880d4..055517c 100644
--- a/apps/web/src/App.css
+++ b/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;
-  opacity: 0.8;
+  margin: var(--space-xs) 0 0;
+  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);
-  border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 0.75rem;
-  padding: 1.5rem 2rem;
-  min-width: 280px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--space-md) var(--space-lg);
+  min-width: var(--width-card);
 }
 
 .status-card h2 {
-  margin: 0 0 1rem;
-  font-size: 1.25rem;
+  margin: 0 0 var(--space-sm);
+  font-size: var(--font-lg);
 }
 
 .status-row {
   display: flex;
   justify-content: space-between;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid rgba(255,255,255,0.06);
+  padding: var(--space-xs) 0;
+  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;
-  font-size: 0.875rem;
-  border-top: 1px solid rgba(255,255,255,0.08);
+  opacity: var(--opacity-dim);
+  font-size: var(--font-sm);
+  border-top: 1px solid var(--border);
 }
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 809a2fc..e3e18b8 100644
--- a/apps/web/src/index.css
+++ b/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;
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index f3c9219..544b13e 100644
--- a/apps/web/vite.config.ts
+++ b/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: {
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index dac1824..d75bbb0 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,5 +1,7 @@
 packages:
   - 'apps/*'
   - 'packages/*'
+allowBuilds:
+  esbuild: set this to true or false
 onlyBuiltDependencies:
   - esbuild