Error Feedback Service + friendly error handling across all pages

- Error Feedback Service: POST /api/feedback saves to JSONL, GET with admin token
- ErrorFeedback component: warm amber tones, friendly messages, 'Report Issue' button
- Replaced ALL red-themed error displays across 15+ pages with ErrorFeedback
- Kind classification: network, auth, location, upgrade, default messages
- QA test suite v2: 8-layer testing (system, API, render, scenario, edge, mobile, perf, security)
- Browser-based visual QA with Playwright (Layer 9)

src/app/upgrade/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, Suspense } from "react";
 import { useAuth } from "@/lib/AuthContext";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Crown, Zap, Check, ChevronLeft, Loader2 } from "lucide-react";
+import ErrorFeedback from "@/components/ErrorFeedback";
 
 const TIERS = [
   {
@@ -207,21 +208,25 @@ function UpgradeContent() {
       </div>
 
       {/* Messages */}
-      {message && (
+      {message && message.type === "success" && (
         <div className="mx-4 mb-4">
-          <div
-            className={`p-3 rounded-xl text-sm text-center ${
-              message.type === "success"
-                ? "bg-emerald-900/20 border border-emerald-800/40 text-emerald-400"
-                : message.type === "error"
-                  ? "bg-red-900/20 border border-red-800/40 text-red-400"
-                  : "bg-blue-900/20 border border-blue-800/40 text-blue-400"
-            }`}
-          >
+          <div className="p-3 rounded-xl text-sm text-center bg-emerald-900/20 border border-emerald-800/40 text-emerald-400">
             {message.text}
           </div>
         </div>
       )}
+      {message && message.type === "info" && (
+        <div className="mx-4 mb-4">
+          <div className="p-3 rounded-xl text-sm text-center bg-blue-900/20 border border-blue-800/40 text-blue-400">
+            {message.text}
+          </div>
+        </div>
+      )}
+      {message && message.type === "error" && (
+        <div className="mx-4 mb-4">
+          <ErrorFeedback error={message.text} kind="upgrade" onRetry={() => setMessage(null)} context="upgrade" />
+        </div>
+      )}
 
       {/* Tier Cards */}
       <div className="px-4 space-y-4">