Claude/system test part two c et wh

.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-explicit-any": "warn"
+  }
+}

.github/workflows/ci.yml

@@ -0,0 +1,101 @@
+name: CI
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+      - run: npm ci
+      - run: npm run lint
+
+  test:
+    name: Unit Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+      - run: npm ci
+      - run: npm test -- --coverage
+      - uses: codecov/codecov-action@v3
+        with:
+          fail_ci_if_error: false
+
+  e2e:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+      - run: npm ci
+      - run: npx playwright install --with-deps
+      - run: npm run build
+      - run: npm run test:e2e
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    needs: [lint, test]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+      - run: npm ci
+      - run: npm run build
+      - uses: actions/upload-artifact@v4
+        with:
+          name: build
+          path: .next/
+          retention-days: 1
+
+  deploy-preview:
+    name: Deploy Preview
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.event_name == 'pull_request'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: amondnet/vercel-action@v25
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+
+  deploy-production:
+    name: Deploy Production
+    runs-on: ubuntu-latest
+    needs: [build, e2e]
+    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+    environment: production
+    steps:
+      - uses: actions/checkout@v4
+      - uses: amondnet/vercel-action@v25
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+          vercel-args: "--prod"

.log

@@ -0,0 +1,15 @@
+# Execution Log
+
+## 2024-12-23 fix: Plan name shows as undefined on upgrade page
+
+- **Root cause:** Components passed undefined planId directly to getPlanById(), which returns undefined. This undefined value was rendered as text "undefined" in the UI when users had no subscription.
+- **Solution:** Added two new helper functions:
+  - `getDisplayPlanName(planId)` - Returns "Free" for undefined/null/unknown planIds
+  - `getPlanOrDefault(planId)` - Returns Free plan object for undefined/null/unknown planIds
+  - Updated UpgradePage.tsx and BillingOverview.tsx to use getPlanOrDefault()
+- **Files changed:**
+  - src/lib/plans.ts (added helper functions)
+  - src/components/UpgradePage.tsx (use getPlanOrDefault)
+  - src/components/BillingOverview.tsx (use getPlanOrDefault)
+  - tests/plan-display.test.ts (added verification tests)
+- **Tests:** 19 passing

.tasks

@@ -2,13 +2,13 @@
 
 ## Format
 # [ ] Not started
-# [~] In progress  
+# [~] In progress
 # [x] Done (YYYY-MM-DD)
 # [!] Stuck - needs help
 # [REVIEW] tag = Claude stops for approval
 
 ## Tasks
 
-[ ] First feature to build
-[ ] Second feature
-[ ] Payment integration [REVIEW]
+[x] Add aria-label to upgrade button in UpgradePage (2024-12-23)
+[x] Add TypeScript strict null check to tsconfig (2024-12-23)
+[x] Update package.json description (2024-12-23)

DESIGN-SYSTEM.md

@@ -0,0 +1,149 @@
+# Design System: Billing Dashboard
+
+> Generated by Claude Code V7.7 on 2024-12-23
+
+## Color Palette
+
+### Semantic Tokens
+
+```css
+:root {
+  /* Primary */
+  --color-primary: #3b82f6;
+  --color-primary-hover: #2563eb;
+
+  /* Feedback */
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+
+  /* Neutral */
+  --color-background: #ffffff;
+  --color-surface: #f9fafb;
+  --color-text: #111827;
+  --color-text-muted: #6b7280;
+  --color-border: #e5e7eb;
+}
+
+/* Dark mode */
+[data-theme="dark"] {
+  --color-background: #111827;
+  --color-surface: #1f2937;
+  --color-text: #f9fafb;
+}
+```
+
+## Typography
+
+| Role      | Font  | Size     | Weight |
+| --------- | ----- | -------- | ------ |
+| Heading 1 | Inter | 2rem     | 700    |
+| Heading 2 | Inter | 1.5rem   | 600    |
+| Body      | Inter | 1rem     | 400    |
+| Caption   | Inter | 0.875rem | 400    |
+
+## Spacing Scale
+
+```
+4px  - xs
+8px  - sm
+12px - md
+16px - lg
+24px - xl
+32px - 2xl
+48px - 3xl
+```
+
+## Component Library
+
+**Choice:** Custom components with Tailwind CSS
+
+**Installed Components:**
+
+- [x] Button
+- [x] Card
+- [x] BillingOverview
+- [x] UpgradePage
+- [x] UsageMetrics _(new)_
+
+## Components
+
+### UsageMetricsCard
+
+**Purpose:** Display current usage metrics (API calls, storage, team members) with progress bars.
+
+**File:** `src/components/UsageMetrics.tsx`
+
+**Props:**
+
+```typescript
+interface UsageMetricsProps {
+  metrics: UsageMetrics | null;
+  planLimits: { apiCalls: number; storageUsed: number; teamMembers: number };
+  isLoading?: boolean;
+  error?: string | null;
+}
+```
+
+**States:**
+
+| State   | Component         | Description                                    |
+| ------- | ----------------- | ---------------------------------------------- |
+| Loading | `LoadingSkeleton` | Skeleton placeholders with aria-busy           |
+| Empty   | `EmptyState`      | Guidance: "Start using the API to see metrics" |
+| Error   | `ErrorState`      | Error message + "Try Again" button             |
+| Success | `SuccessState`    | Three metric cards with progress bars          |
+
+**Metrics Displayed:**
+
+- API Calls (count / limit)
+- Storage (GB / limit)
+- Team Members (seats / limit)
+
+**Visual Indicators:**
+
+- Green bar: < 80% usage
+- Yellow bar: 80-99% usage
+- Red bar: 100%+ usage (over limit)
+
+**Accessibility:**
+
+- `aria-busy="true"` on loading state
+- `role="alert"` on error state
+- `aria-label` on retry button
+- `aria-hidden` on decorative icons
+
+**Usage:**
+
+```tsx
+<UsageMetricsCard
+  metrics={usageData}
+  planLimits={{ apiCalls: 10000, storageUsed: 50, teamMembers: 5 }}
+  isLoading={isLoading}
+  error={error}
+/>
+```
+
+---
+
+### BillingOverview
+
+**Purpose:** Display current plan with upgrade CTA.
+
+**File:** `src/components/BillingOverview.tsx`
+
+**States:** Loading, Success only (simple component)
+
+---
+
+### UpgradePage
+
+**Purpose:** Show plan options and allow upgrades.
+
+**File:** `src/components/UpgradePage.tsx`
+
+**States:** Loading, Success
+
+---
+
+_Last updated: 2024-12-23_