@hustle-together/api-dev-tools 3.12.3 → 4.5.1

package/templates/playwright-report/page.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import Link from "next/link";
+
+/**
+ * Playwright Report Page
+ *
+ * Shows Playwright E2E test results or instructions to run tests.
+ * Links to the HTML report when available.
+ *
+ * Created with Hustle API Dev Tools (v3.12.12)
+ */
+export default function PlaywrightReportPage() {
+  // In a real implementation, check if playwright-report/ exists
+  const hasReport = false;
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-gray-950">
+      {/* Header */}
+      <header className="border-b-4 border-black bg-[#BA0C2F] px-6 py-8 dark:border-gray-600">
+        <div className="mx-auto max-w-4xl">
+          <div className="flex items-center gap-2">
+            <Link
+              href="/hustle-dev-dashboard"
+              className="text-white/80 hover:text-white"
+            >
+              Dashboard
+            </Link>
+            <span className="text-white/60">/</span>
+            <span className="text-white">Playwright</span>
+          </div>
+          <h1 className="mt-2 text-3xl font-black text-white">
+            PLAYWRIGHT REPORTS
+          </h1>
+          <p className="mt-2 text-white/80">End-to-end test results</p>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="mx-auto max-w-4xl px-6 py-8">
+        {hasReport ? <ReportContent /> : <EmptyState />}
+      </main>
+
+      {/* Footer */}
+      <footer className="border-t-2 border-black px-6 py-4 dark:border-gray-600">
+        <div className="mx-auto max-w-4xl text-center text-sm text-gray-600 dark:text-gray-400">
+          Built with{" "}
+          <a
+            href="https://github.com/hustle-together/api-dev-tools"
+            className="font-bold text-[#BA0C2F] hover:underline"
+          >
+            Hustle API Dev Tools
+          </a>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+function ReportContent() {
+  return (
+    <div className="space-y-6">
+      <div className="border-2 border-black p-6 dark:border-gray-600">
+        <h2 className="mb-4 text-xl font-bold text-black dark:text-white">
+          View Report
+        </h2>
+        <p className="mb-4 text-gray-600 dark:text-gray-400">
+          Playwright has generated an HTML report. Click below to view it:
+        </p>
+        <a
+          href="/playwright-report/index.html"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-block rounded bg-[#BA0C2F] px-6 py-3 font-bold text-white transition-colors hover:bg-[#8a0923]"
+        >
+          Open HTML Report
+        </a>
+      </div>
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="space-y-6">
+      {/* Status Card */}
+      <div className="border-2 border-black p-6 dark:border-gray-600">
+        <div className="flex items-center gap-3">
+          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 text-2xl dark:bg-gray-800">
+            0
+          </div>
+          <div>
+            <h2 className="text-xl font-bold text-black dark:text-white">
+              No Playwright Reports
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400">
+              Run E2E tests to generate a report
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Instructions */}
+      <div className="border-2 border-black bg-gray-50 p-6 dark:border-gray-600 dark:bg-gray-900">
+        <h3 className="mb-4 font-bold text-black dark:text-white">
+          Run E2E Tests
+        </h3>
+        <div className="space-y-4">
+          <Step
+            number={1}
+            title="Run All E2E Tests"
+            command="pnpm test:e2e"
+            description="Runs all Playwright tests and generates a report"
+          />
+          <Step
+            number={2}
+            title="Run with UI"
+            command="pnpm playwright test --ui"
+            description="Opens Playwright's interactive test runner"
+          />
+          <Step
+            number={3}
+            title="View Report"
+            command="pnpm playwright show-report"
+            description="Opens the HTML report in your browser"
+          />
+        </div>
+      </div>
+
+      {/* Available Commands */}
+      <div className="border-2 border-black p-6 dark:border-gray-600">
+        <h3 className="mb-4 font-bold text-black dark:text-white">
+          Playwright Commands
+        </h3>
+        <div className="space-y-3">
+          <CommandItem
+            command="pnpm test:e2e"
+            description="Run all E2E tests"
+          />
+          <CommandItem
+            command="pnpm playwright test --ui"
+            description="Interactive test runner"
+          />
+          <CommandItem
+            command="pnpm playwright test --headed"
+            description="Run with visible browser"
+          />
+          <CommandItem
+            command="pnpm playwright show-report"
+            description="Open HTML report"
+          />
+          <CommandItem
+            command="pnpm playwright codegen"
+            description="Generate tests by recording"
+          />
+        </div>
+      </div>
+
+      {/* Test Types */}
+      <div className="border-2 border-black bg-gray-50 p-6 dark:border-gray-600 dark:bg-gray-900">
+        <h3 className="mb-4 font-bold text-black dark:text-white">
+          E2E Test Types
+        </h3>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <TestTypeCard
+            icon="🖥️"
+            title="Page Tests"
+            description="Full page navigation and interaction tests"
+            pattern="*.e2e.test.ts"
+          />
+          <TestTypeCard
+            icon="📸"
+            title="Visual Tests"
+            description="Screenshot comparison for UI changes"
+            pattern="*.visual.spec.ts"
+          />
+          <TestTypeCard
+            icon="♿"
+            title="Accessibility"
+            description="WCAG compliance and a11y checks"
+            pattern="*.a11y.spec.ts"
+          />
+          <TestTypeCard
+            icon="📱"
+            title="Responsive"
+            description="Mobile, tablet, and desktop viewports"
+            pattern="--project=mobile"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Step({
+  number,
+  title,
+  command,
+  description,
+}: {
+  number: number;
+  title: string;
+  command: string;
+  description: string;
+}) {
+  return (
+    <div className="flex gap-4">
+      <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-[#BA0C2F] text-sm font-bold text-white">
+        {number}
+      </div>
+      <div>
+        <p className="font-medium text-black dark:text-white">{title}</p>
+        <code className="mt-1 block rounded bg-white px-3 py-1 font-mono text-sm text-[#BA0C2F] dark:bg-gray-800">
+          {command}
+        </code>
+        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function CommandItem({
+  command,
+  description,
+}: {
+  command: string;
+  description: string;
+}) {
+  return (
+    <div className="flex items-center justify-between rounded bg-white px-4 py-2 dark:bg-gray-800">
+      <code className="font-mono text-[#BA0C2F]">{command}</code>
+      <span className="text-sm text-gray-500">{description}</span>
+    </div>
+  );
+}
+
+function TestTypeCard({
+  icon,
+  title,
+  description,
+  pattern,
+}: {
+  icon: string;
+  title: string;
+  description: string;
+  pattern: string;
+}) {
+  return (
+    <div className="rounded border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
+      <div className="mb-2 text-2xl">{icon}</div>
+      <h4 className="font-medium text-black dark:text-white">{title}</h4>
+      <p className="text-sm text-gray-600 dark:text-gray-400">{description}</p>
+      <code className="mt-2 block text-xs text-[#BA0C2F]">{pattern}</code>
+    </div>
+  );
+}

package/templates/registry.json

@@ -1,7 +1,96 @@
 {
-  "version": "1.0.0",
+  "version": "1.5.0",
   "updated_at": "",
-  "description": "Central registry tracking all APIs, components, and pages created through Hustle Dev Tools",
+  "description": "Central registry tracking all APIs, components, pages, hooks, utilities, types, routes, environment variables, external services, ADRs, and brand guide created through Hustle Dev Tools",
+
+  "adrs": {
+    "_description": "Architecture Decision Records - significant decisions with context and reasoning. Created during research, updated during interview.",
+    "_example": {
+      "0001-database-choice": {
+        "number": 1,
+        "title": "Database Choice",
+        "status": "accepted",
+        "date": "2025-12-30",
+        "phase": "interview",
+        "endpoint": "todo-app",
+        "category": "database",
+        "decision": "supabase",
+        "options_considered": ["supabase", "firebase", "postgres"],
+        "file": ".claude/adrs/0001-database-choice.md",
+        "decided_at": "2025-12-30T10:15:00Z"
+      }
+    }
+  },
+
+  "brand_guide": {
+    "_description": "Brand guide configuration tracking. Single source of truth for all UI styling decisions.",
+    "created_at": null,
+    "last_updated": null,
+    "version": 0,
+    "interview_completed": false,
+    "file": ".claude/BRAND_GUIDE.md",
+    "brand_page": "src/app/brand/page.tsx",
+    "theme_file": "src/lib/theme.ts",
+    "sections": {
+      "colors": false,
+      "typography": false,
+      "spacing": false,
+      "animations": false,
+      "voice": false,
+      "custom_elements": false
+    },
+    "custom_elements": [],
+    "_custom_elements_options": [
+      "terminal-animation",
+      "gradient-text",
+      "typing-effect",
+      "parallax-scroll",
+      "particle-background",
+      "three-js-scene",
+      "gsap-animations",
+      "lottie-animations",
+      "glassmorphism",
+      "neumorphism"
+    ],
+    "voice": {
+      "tone": null,
+      "_tone_options": ["professional", "friendly", "technical", "playful", "custom"],
+      "terminology": {},
+      "dos": [],
+      "donts": []
+    },
+    "colors": {
+      "primary": null,
+      "secondary": null,
+      "accent": null,
+      "background": null,
+      "foreground": null,
+      "muted": null,
+      "destructive": null,
+      "gradients": []
+    },
+    "typography": {
+      "font_sans": null,
+      "font_mono": null,
+      "font_heading": null,
+      "scale": "default"
+    },
+    "motion": {
+      "style": null,
+      "_style_options": ["snappy", "smooth", "bouncy", "minimal", "none"],
+      "duration_fast": "150ms",
+      "duration_normal": "300ms",
+      "duration_slow": "500ms",
+      "easing": "ease-out",
+      "library": null,
+      "_library_options": ["css", "framer-motion", "gsap", "none"]
+    },
+    "shadcn": {
+      "initialized": false,
+      "components_installed": [],
+      "theme_configured": false
+    }
+  },
 
   "apis": {},
 
@@ -9,5 +98,192 @@
 
   "pages": {},
 
-  "combined": {}
+  "combined": {},
+
+  "routes": {
+    "_description": "All application routes - API routes, page routes, middleware. Enables dead route detection and navigation planning.",
+    "_example": {
+      "/api/users": {
+        "file": "src/app/api/users/route.ts",
+        "methods": ["GET", "POST"],
+        "auth_required": true,
+        "rate_limited": true,
+        "description": "User CRUD operations"
+      },
+      "/api/users/[id]": {
+        "file": "src/app/api/users/[id]/route.ts",
+        "methods": ["GET", "PUT", "DELETE"],
+        "auth_required": true,
+        "params": ["id"],
+        "description": "Single user operations"
+      },
+      "/dashboard": {
+        "file": "src/app/dashboard/page.tsx",
+        "type": "page",
+        "auth_required": true,
+        "layout": "src/app/dashboard/layout.tsx"
+      }
+    }
+  },
+
+  "env_vars": {
+    "_description": "Environment variables required by the application. Enables /api-env validation and deployment checklists.",
+    "_example": {
+      "DATABASE_URL": {
+        "required": true,
+        "description": "PostgreSQL connection string",
+        "used_by": ["prisma", "src/lib/db.ts"],
+        "format": "postgresql://user:pass@host:5432/db",
+        "sensitive": true
+      },
+      "NEXT_PUBLIC_API_URL": {
+        "required": true,
+        "description": "Public API base URL",
+        "used_by": ["src/lib/api-client.ts"],
+        "public": true,
+        "sensitive": false
+      },
+      "STRIPE_SECRET_KEY": {
+        "required": false,
+        "description": "Stripe API secret key",
+        "used_by": ["src/app/api/payments/route.ts"],
+        "sensitive": true,
+        "docs": "https://stripe.com/docs/keys"
+      }
+    }
+  },
+
+  "services": {
+    "_description": "External services and APIs the application depends on. Enables dependency tracking and outage awareness.",
+    "_example": {
+      "stripe": {
+        "name": "Stripe",
+        "type": "payment",
+        "sdk": "@stripe/stripe-js",
+        "env_vars": ["STRIPE_SECRET_KEY", "STRIPE_PUBLISHABLE_KEY", "STRIPE_WEBHOOK_SECRET"],
+        "endpoints_used": ["/v1/customers", "/v1/subscriptions", "/v1/checkout/sessions"],
+        "webhooks": ["/api/webhooks/stripe"],
+        "docs": "https://stripe.com/docs/api",
+        "status_page": "https://status.stripe.com"
+      },
+      "supabase": {
+        "name": "Supabase",
+        "type": "database",
+        "sdk": "@supabase/supabase-js",
+        "env_vars": ["SUPABASE_URL", "SUPABASE_ANON_KEY", "SUPABASE_SERVICE_KEY"],
+        "features_used": ["auth", "database", "storage"],
+        "docs": "https://supabase.com/docs",
+        "status_page": "https://status.supabase.com"
+      },
+      "openai": {
+        "name": "OpenAI",
+        "type": "ai",
+        "sdk": "openai",
+        "env_vars": ["OPENAI_API_KEY"],
+        "models_used": ["gpt-4", "gpt-3.5-turbo"],
+        "docs": "https://platform.openai.com/docs",
+        "status_page": "https://status.openai.com"
+      }
+    }
+  },
+
+  "webhooks": {
+    "_description": "Incoming webhook endpoints and their configurations. Critical for security auditing.",
+    "_example": {
+      "/api/webhooks/stripe": {
+        "file": "src/app/api/webhooks/stripe/route.ts",
+        "service": "stripe",
+        "signature_header": "stripe-signature",
+        "signature_secret_env": "STRIPE_WEBHOOK_SECRET",
+        "events_handled": ["checkout.session.completed", "customer.subscription.updated"],
+        "idempotency": true
+      },
+      "/api/webhooks/github": {
+        "file": "src/app/api/webhooks/github/route.ts",
+        "service": "github",
+        "signature_header": "x-hub-signature-256",
+        "signature_secret_env": "GITHUB_WEBHOOK_SECRET",
+        "events_handled": ["push", "pull_request"]
+      }
+    }
+  },
+
+  "hooks": {
+    "_description": "Custom React hooks - tracked to prevent duplication and enable reuse",
+    "_example": {
+      "useAuth": {
+        "file": "src/hooks/useAuth.ts",
+        "returns": "{ user: User | null, login: Function, logout: Function }",
+        "description": "Authentication hook with login/logout methods"
+      }
+    }
+  },
+
+  "utils": {
+    "_description": "Utility functions - tracked to prevent duplication",
+    "_example": {
+      "formatCurrency": {
+        "file": "src/lib/utils/format.ts",
+        "signature": "(amount: number, currency?: string) => string",
+        "description": "Format number as currency with locale support"
+      }
+    }
+  },
+
+  "types": {
+    "_description": "Shared TypeScript types - tracked for schema consistency",
+    "_example": {
+      "User": {
+        "file": "src/types/user.ts",
+        "definition": "{ id: string, email: string, name: string }",
+        "used_by": ["useAuth", "UserProfile", "api/users"]
+      }
+    }
+  },
+
+  "providers": {
+    "_description": "React Context providers - tracked to show app structure",
+    "_example": {
+      "AuthProvider": {
+        "file": "src/providers/AuthProvider.tsx",
+        "context": "AuthContext",
+        "provides": "{ user, login, logout }",
+        "wraps": "entire app"
+      }
+    }
+  },
+
+  "orchestrator_defaults": {
+    "description": "Shared decisions from /hustle-build orchestrator interviews - applied to all sub-workflows",
+    "error_handling": {
+      "style": null,
+      "options": ["try-catch-rethrow", "error-boundary", "result-type", "error-codes"]
+    },
+    "authentication": {
+      "method": null,
+      "options": ["jwt", "session", "api-key", "oauth", "none"]
+    },
+    "logging": {
+      "level": null,
+      "options": ["verbose", "standard", "minimal", "none"]
+    },
+    "api_versioning": {
+      "strategy": null,
+      "options": ["url-prefix", "header", "query-param", "none"]
+    },
+    "testing": {
+      "coverage_threshold": null,
+      "visual_viewports": ["mobile-portrait", "mobile-notch", "mobile-landscape", "tablet-portrait", "tablet-landscape", "small-desktop", "desktop"]
+    },
+    "styling": {
+      "approach": null,
+      "options": ["tailwind", "css-modules", "styled-components", "emotion", "vanilla"]
+    }
+  },
+
+  "visual_test_results": {
+    "description": "Results from /test-visual runs - populated by visual-analyzer agent",
+    "last_run": null,
+    "elements": {}
+  }
 }