prism0x2a 0.6.1 → 0.7.2

package/.next/standalone/app/pricing/page.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+import { useState } from "react";
+import { PrismDock } from "@/components/PrismDock";
+import { BillingToggle } from "@/components/pricing/BillingToggle";
+import { PricingCard, type PricingCardProps } from "@/components/pricing/PricingCard";
+import { useLicense } from "@/lib/prism/hooks/useLicense";
+import { useTargetPath } from "@/lib/prism/hooks/useTargetPath";
+import type { LicenseTier } from "@/lib/prism/license/types";
+
+// ─── Plan definitions ──────────────────────────────────────────────────────────
+
+type PlanDef = Omit<PricingCardProps, "yearly" | "isCurrent"> & { tier: LicenseTier };
+
+const PRISM_PLANS: PlanDef[] = [
+  {
+    tier: "free",
+    name: "Free",
+    tagline: "For individuals exploring the tool",
+    monthlyPrice: 0,
+    yearlyMonthlyPrice: 0,
+    checkoutUrl: null,
+    accentColor: "rgb(148,163,184)",
+    accentBg: "rgba(148,163,184,0.08)",
+    accentBorder: "rgba(148,163,184,0.2)",
+    features: [
+      "Up to 250 LOC scanned",
+      "Single-file insights",
+      "Basic LLM queries",
+    ],
+  },
+  {
+    tier: "pro",
+    name: "Pro",
+    tagline: "For professional developers",
+    monthlyPrice: 39,
+    yearlyMonthlyPrice: 32,
+    checkoutUrl: "https://prism0x2a.lemonsqueezy.com/checkout/buy/a9097951-5d54-438c-89ef-3e093d88f6c6",
+    highlighted: true,
+    accentColor: "rgb(96,165,250)",
+    accentBg: "rgba(59,130,246,0.12)",
+    accentBorder: "rgba(59,130,246,0.35)",
+    features: [
+      "Unlimited LOC",
+      "Monorepo support",
+      "Aggregate scan",
+      "Cross-workspace insights",
+      "LLM insights",
+      "Custom queries",
+    ],
+  },
+  {
+    tier: "team",
+    name: "Team",
+    tagline: "For engineering teams",
+    monthlyPrice: 99,
+    yearlyMonthlyPrice: 82,
+    unit: "dev",
+    checkoutUrl: "https://prism0x2a.lemonsqueezy.com/checkout/buy/ddcff26c-303a-4993-a7a7-73129b150a97",
+    accentColor: "rgb(52,211,153)",
+    accentBg: "rgba(52,211,153,0.1)",
+    accentBorder: "rgba(52,211,153,0.3)",
+    features: [
+      "Everything in Pro",
+      "Cross-layer context",
+      "Auto insights",
+      "Team sync",
+      "CI integration",
+      "Priority support",
+    ],
+  },
+];
+
+const FORGE_PLAN: PlanDef = {
+  tier: "forge-pro",
+  name: "forge0x2B Pro",
+  tagline: "Unlimited AI generation for forge users",
+  monthlyPrice: 29,
+  yearlyMonthlyPrice: 24,
+  checkoutUrl: "https://prism0x2a.lemonsqueezy.com/checkout/buy/21c1146e-9fea-4c32-a4fc-c5a5e64215e7",
+  accentColor: "rgb(244,114,182)",
+  accentBg: "rgba(236,72,153,0.12)",
+  accentBorder: "rgba(236,72,153,0.3)",
+  features: [
+    "Unlimited forge generation",
+    "Unlimited forge generation (AI)",
+    "No prism0x2A features",
+  ],
+};
+
+const SPECTRUM_PLAN: PlanDef = {
+  tier: "spectrum",
+  name: "Spectrum 0x55",
+  tagline: "prism Pro + forge Pro — the full stack",
+  monthlyPrice: 49,
+  yearlyMonthlyPrice: 41,
+  checkoutUrl: "https://prism0x2a.lemonsqueezy.com/checkout/buy/64d25b45-7c4a-410d-b4aa-7504f98ab5f7",
+  highlighted: true,
+  accentColor: "rgb(167,139,250)",
+  accentBg: "rgba(99,102,241,0.15)",
+  accentBorder: "rgba(167,139,250,0.35)",
+  features: [
+    "Everything in prism Pro",
+    "Everything in forge Pro",
+    "Best value bundle",
+  ],
+};
+
+const FAQ: { q: string; a: string }[] = [
+  {
+    q: "What is the difference between Pro and Team?",
+    a: "Pro gives one developer unlimited scans, LLM insights, and monorepo support. Team adds cross-layer context, auto insights, CI integration, and team sync — billed per developer seat.",
+  },
+  {
+    q: "What is Spectrum 0x55?",
+    a: "Spectrum 0x55 bundles prism0x2A Pro and forge0x2B Pro at a discounted price. You get all prism features plus unlimited AI generation in forge — for €49/mo instead of €68/mo.",
+  },
+  {
+    q: "Can I switch plans?",
+    a: "Yes — manage your subscription at any time via your Lemonsqueezy billing portal. Upgrades take effect immediately; downgrades apply at the next billing cycle.",
+  },
+  {
+    q: "Is there a free trial?",
+    a: "The Free tier is available indefinitely. Paid plans are billed monthly or yearly with no trial period, but you can cancel at any time.",
+  },
+  {
+    q: "How does offline grace period work?",
+    a: "prism validates your license once every 30 days. If it cannot reach Lemonsqueezy, you continue working for a 7-day grace period before features are restricted.",
+  },
+];
+
+// ─── Page ──────────────────────────────────────────────────────────────────────
+
+export default function PricingPage() {
+  const [yearly, setYearly] = useState(false);
+  const { tq } = useTargetPath();
+  const { license } = useLicense(tq);
+  const currentTier = license?.tier ?? "free";
+
+  return (
+    <div className="flex flex-col min-h-screen" style={{ background: "var(--bg-app)" }}>
+      <PrismDock />
+
+      <main className="flex-1 flex flex-col items-center px-6 pt-32 pb-24 gap-16">
+
+        {/* Hero */}
+        <div className="text-center flex flex-col items-center gap-4 max-w-xl">
+          <h1 className="text-4xl font-bold text-slate-100 tracking-tight">
+            Simple, transparent pricing
+          </h1>
+          <p className="text-slate-400 text-base leading-relaxed">
+            Start free. Upgrade when your codebase grows. Cancel anytime.
+          </p>
+          <BillingToggle yearly={yearly} onChange={setYearly} />
+        </div>
+
+        {/* prism plans */}
+        <section className="w-full max-w-4xl flex flex-col gap-6">
+          <h2 className="text-xs font-semibold text-slate-500 uppercase tracking-widest">
+            prism<span className="font-mono">0x2A</span> — Code intelligence
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            {PRISM_PLANS.map((plan) => (
+              <PricingCard
+                key={plan.tier}
+                {...plan}
+                yearly={yearly}
+                isCurrent={currentTier === plan.tier}
+              />
+            ))}
+          </div>
+        </section>
+
+        {/* forge + spectrum */}
+        <section className="w-full max-w-4xl flex flex-col gap-6">
+          <h2 className="text-xs font-semibold text-slate-500 uppercase tracking-widest">
+            forge<span className="font-mono">0x2B</span> + bundles
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <PricingCard
+              {...FORGE_PLAN}
+              yearly={yearly}
+              isCurrent={currentTier === "forge-pro"}
+            />
+            <div className="relative">
+              <div
+                className="absolute -top-3 left-1/2 -translate-x-1/2 text-xs px-3 py-0.5 rounded-full font-semibold z-10"
+                style={{
+                  background: "linear-gradient(90deg, rgba(59,130,246,0.2), rgba(236,72,153,0.2))",
+                  color: "rgb(167,139,250)",
+                  border: "1px solid rgba(167,139,250,0.3)",
+                }}
+              >
+                Best value
+              </div>
+              <PricingCard
+                {...SPECTRUM_PLAN}
+                yearly={yearly}
+                isCurrent={currentTier === "spectrum"}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Tier comparison callout */}
+        <section className="w-full max-w-4xl">
+          <div
+            className="rounded-xl p-6 flex flex-col gap-4"
+            style={{
+              background: "var(--surface-panel)",
+              border: "1px solid var(--border-default)",
+            }}
+          >
+            <h2 className="text-xs font-semibold text-slate-500 uppercase tracking-widest">
+              Tier feature map
+            </h2>
+            <div className="overflow-x-auto">
+              <table className="w-full text-xs text-slate-400 border-collapse">
+                <thead>
+                  <tr className="border-b" style={{ borderColor: "rgba(51,65,85,0.4)" }}>
+                    <th className="text-left py-2 pr-4 font-medium text-slate-300 w-1/3">Feature</th>
+                    <th className="py-2 px-2 font-medium text-slate-400">Free</th>
+                    <th className="py-2 px-2 font-medium text-sky-400">Pro</th>
+                    <th className="py-2 px-2 font-medium text-emerald-400">Team</th>
+                    <th className="py-2 px-2 font-medium text-violet-400">Spectrum</th>
+                    <th className="py-2 px-2 font-medium text-pink-400">forge Pro</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    ["Unlimited LOC",           false, true,  true,  true,  false],
+                    ["Monorepo support",         false, true,  true,  true,  false],
+                    ["Aggregate scan",           false, true,  true,  true,  false],
+                    ["LLM insights",             false, true,  true,  true,  false],
+                    ["Custom queries",           false, true,  true,  true,  false],
+                    ["Cross-layer context",      false, false, true,  false, false],
+                    ["Auto insights",            false, false, true,  false, false],
+                    ["Team sync / CI",           false, false, true,  false, false],
+                    ["forge unlimited gen.",     false, false, false, true,  true ],
+                  ].map(([label, free, pro, team, spectrum, forge]) => (
+                    <tr key={String(label)} className="border-b" style={{ borderColor: "rgba(51,65,85,0.2)" }}>
+                      <td className="py-2 pr-4 text-slate-400">{String(label)}</td>
+                      {[free, pro, team, spectrum, forge].map((v, i) => (
+                        <td key={i} className="py-2 px-2 text-center">
+                          {v ? (
+                            <span style={{ color: ["rgb(71,85,105)","rgb(96,165,250)","rgb(52,211,153)","rgb(167,139,250)","rgb(244,114,182)"][i] }}>✦</span>
+                          ) : (
+                            <span className="text-slate-700">–</span>
+                          )}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </section>
+
+        {/* FAQ */}
+        <section className="w-full max-w-2xl flex flex-col gap-4">
+          <h2 className="text-xs font-semibold text-slate-500 uppercase tracking-widest">FAQ</h2>
+          <div className="flex flex-col gap-3">
+            {FAQ.map(({ q, a }) => (
+              <details
+                key={q}
+                className="group rounded-xl px-5 py-4"
+                style={{
+                  background: "var(--surface-panel)",
+                  border: "1px solid var(--border-default)",
+                }}
+              >
+                <summary className="text-sm font-medium text-slate-300 cursor-pointer list-none flex items-center justify-between gap-2">
+                  {q}
+                  <span className="text-slate-600 group-open:rotate-180 transition-transform text-xs">▼</span>
+                </summary>
+                <p className="mt-3 text-sm text-slate-500 leading-relaxed">{a}</p>
+              </details>
+            ))}
+          </div>
+        </section>
+      </main>
+
+      <footer className="text-center py-4 text-xs text-slate-600">
+        <span className="font-mono">0x2A = 42.</span> The answer to all questions.
+      </footer>
+    </div>
+  );
+}

package/.next/standalone/app/settings/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
+import Link from "next/link";
 import { ANTHROPIC_MODELS, type PrismConfig } from "@/lib/prism/configSchema";
 import { PrismDock } from "@/components/PrismDock";
 import { useLicense } from "@/lib/prism/hooks/useLicense";
@@ -112,21 +113,48 @@ function KeyStatusBadge({
 // ── License helpers ────────────────────────────────────────────────────────────
 
 const TIER_COLORS: Record<LicenseTier, { bg: string; text: string; border: string }> = {
-  free:       { bg: "rgba(148,163,184,0.08)", text: "rgb(148,163,184)", border: "rgba(148,163,184,0.2)" },
-  pro:        { bg: "rgba(99,102,241,0.12)",  text: "rgb(129,140,248)", border: "rgba(99,102,241,0.3)"  },
-  team:       { bg: "rgba(52,211,153,0.1)",   text: "rgb(52,211,153)",  border: "rgba(52,211,153,0.25)" },
-  enterprise: { bg: "rgba(251,191,36,0.1)",   text: "rgb(251,191,36)",  border: "rgba(251,191,36,0.25)" },
+  free:        { bg: "rgba(148,163,184,0.08)", text: "rgb(148,163,184)", border: "rgba(148,163,184,0.2)" },
+  pro:         { bg: "rgba(59,130,246,0.12)",  text: "rgb(96,165,250)",  border: "rgba(59,130,246,0.3)"  },
+  "forge-pro": { bg: "rgba(236,72,153,0.12)",  text: "rgb(244,114,182)", border: "rgba(236,72,153,0.3)"  },
+  spectrum:    { bg: "rgba(99,102,241,0.12)",  text: "rgb(167,139,250)", border: "rgba(99,102,241,0.3)"  },
+  team:        { bg: "rgba(52,211,153,0.1)",   text: "rgb(52,211,153)",  border: "rgba(52,211,153,0.25)" },
+  enterprise:  { bg: "rgba(251,191,36,0.1)",   text: "rgb(251,191,36)",  border: "rgba(251,191,36,0.25)" },
+};
+
+const TIER_LABEL: Record<LicenseTier, string> = {
+  free: "Free",
+  pro: "Pro",
+  "forge-pro": "forge Pro",
+  spectrum: "Spectrum 0x55",
+  team: "Team",
+  enterprise: "Enterprise",
 };
 
 function TierBadge({ tier }: { tier: LicenseTier }) {
   const c = TIER_COLORS[tier];
+  if (tier === "spectrum") {
+    return (
+      <span
+        className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full font-semibold tracking-wide"
+        style={{
+          background: "linear-gradient(90deg, rgba(59,130,246,0.15), rgba(236,72,153,0.15))",
+          color: "rgb(167,139,250)",
+          border: "1px solid rgba(167,139,250,0.35)",
+        }}
+      >
+        <span className="w-1.5 h-1.5 rounded-full inline-block"
+          style={{ background: "linear-gradient(90deg, rgb(96,165,250), rgb(244,114,182))" }} />
+        Spectrum 0x55
+      </span>
+    );
+  }
   return (
     <span
       className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full font-semibold uppercase tracking-wide"
       style={{ background: c.bg, color: c.text, border: `1px solid ${c.border}` }}
     >
       <span className="w-1.5 h-1.5 rounded-full inline-block" style={{ background: c.text }} />
-      {tier}
+      {TIER_LABEL[tier]}
     </span>
   );
 }
@@ -136,6 +164,15 @@ function fmtDate(ts: number | null): string {
   return new Date(ts * 1000).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
 }
 
+function fmtRelative(ts: number | null): string {
+  if (!ts) return "never";
+  const diff = Math.floor(Date.now() / 1000) - ts;
+  if (diff < 60) return "just now";
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+
 // ── Component ─────────────────────────────────────────────────────────────────
 
 export default function SettingsPage() {
@@ -143,26 +180,25 @@ export default function SettingsPage() {
   const { license, isPro, refresh: refreshLicense } = useLicense(tq);
 
   // ── license activation state ────────────────────────────────────────────────
-  const [licenseJson, setLicenseJson] = useState("");
+  const [licenseKeyInput, setLicenseKeyInput] = useState("");
   const [licenseActivating, setLicenseActivating] = useState(false);
+  const [licenseRevalidating, setLicenseRevalidating] = useState(false);
   const [licenseMsg, setLicenseMsg] = useState<{ ok: boolean; text: string } | null>(null);
-  const [showActivate, setShowActivate] = useState(false);
 
   async function handleActivateLicense() {
+    if (!licenseKeyInput.trim()) return;
     setLicenseActivating(true);
     setLicenseMsg(null);
     try {
-      const body = JSON.parse(licenseJson);
-      const res = await fetch(`/api/license${tq}`, {
+      const res = await fetch(`/api/license/activate${tq}`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body),
+        body: JSON.stringify({ licenseKey: licenseKeyInput.trim() }),
       });
       const data = await res.json();
       if (!res.ok) throw new Error(data.error ?? "Activation failed");
-      setLicenseMsg({ ok: true, text: `Activated — tier: ${data.tier}` });
-      setLicenseJson("");
-      setShowActivate(false);
+      setLicenseMsg({ ok: true, text: `Activated — ${data.productName} (${data.tier})` });
+      setLicenseKeyInput("");
       refreshLicense();
     } catch (err) {
       setLicenseMsg({ ok: false, text: err instanceof Error ? err.message : String(err) });
@@ -171,10 +207,34 @@ export default function SettingsPage() {
     }
   }
 
-  async function handleResetLicense() {
-    await fetch(`/api/license${tq}`, { method: "DELETE" });
-    refreshLicense();
+  async function handleRevalidateLicense() {
+    setLicenseRevalidating(true);
+    setLicenseMsg(null);
+    try {
+      const res = await fetch(`/api/license/validate${tq}`, { method: "POST" });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error ?? "Re-validation failed");
+      setLicenseMsg({ ok: true, text: `Validated — ${data.tier}, last check: now` });
+      refreshLicense();
+    } catch (err) {
+      setLicenseMsg({ ok: false, text: err instanceof Error ? err.message : String(err) });
+    } finally {
+      setLicenseRevalidating(false);
+    }
+  }
+
+  async function handleDeactivateLicense() {
     setLicenseMsg(null);
+    try {
+      const res = await fetch(`/api/license/deactivate${tq}`, { method: "POST" });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error ?? "Deactivation failed");
+      }
+      refreshLicense();
+    } catch (err) {
+      setLicenseMsg({ ok: false, text: err instanceof Error ? err.message : String(err) });
+    }
   }
 
   const [provider, setProvider] = useState<"anthropic-direct" | "atlas-embedded">("anthropic-direct");
@@ -491,80 +551,141 @@ export default function SettingsPage() {
             {license && <TierBadge tier={license.tier} />}
           </div>
 
-          {license && (
-            <div className="flex flex-col gap-2 text-xs text-slate-500">
+          {/* State 2: Activating */}
+          {licenseActivating && (
+            <div className="flex items-center gap-2 text-sm text-slate-400">
+              <span className="animate-spin inline-block w-4 h-4 border-2 border-indigo-400 border-t-transparent rounded-full" />
+              Activating with Lemonsqueezy…
+            </div>
+          )}
+
+          {/* State 3: Active license */}
+          {!licenseActivating && isPro && license && (
+            <div className="flex flex-col gap-2.5 text-xs text-slate-500">
+              {license.productName && (
+                <div className="flex items-center justify-between">
+                  <span>Product</span>
+                  <span className="text-slate-300 font-medium">{license.productName}</span>
+                </div>
+              )}
+              {license.userId && (
+                <div className="flex items-center justify-between">
+                  <span>Account</span>
+                  <span className="font-mono text-slate-400 truncate max-w-48">{license.userId}</span>
+                </div>
+              )}
               <div className="flex items-center justify-between">
-                <span>Issued</span>
-                <span className="font-mono text-slate-400">{fmtDate(license.issuedAt)}</span>
+                <span>Last validated</span>
+                <span className="font-mono text-slate-400">{fmtRelative(license.validatedAt)}</span>
               </div>
               <div className="flex items-center justify-between">
-                <span>Expires</span>
-                <span className="font-mono text-slate-400">
-                  {license.tier === "free" ? "Free tier" : fmtDate(license.expiresAt)}
+                <span>Subscription</span>
+                <span className={`font-medium ${license.subscriptionStatus === "active" ? "text-emerald-400" : "text-amber-400"}`}>
+                  {license.subscriptionStatus === "active"
+                    ? "Active"
+                    : license.subscriptionStatus === "cancelled"
+                    ? `Cancelled${license.expiresAt ? `, active until ${fmtDate(license.expiresAt)}` : ""}`
+                    : license.subscriptionStatus ?? "Unknown"}
                 </span>
               </div>
-              {license.userId && (
+              {license.instanceId && (
                 <div className="flex items-center justify-between">
-                  <span>User</span>
-                  <span className="font-mono text-slate-400 truncate max-w-48">{license.userId}</span>
+                  <span>Instance</span>
+                  <span className="font-mono text-slate-500 text-[10px] truncate max-w-40">{license.instanceId}</span>
+                </div>
+              )}
+              {license.activationLimit !== null && license.activationUsage !== null && (
+                <div className="flex items-center justify-between">
+                  <span>Activations</span>
+                  <span className="font-mono text-slate-400">
+                    {license.activationUsage} / {license.activationLimit ?? "∞"}
+                  </span>
                 </div>
               )}
+              {license.cacheStatus === "grace" && (
+                <p className="text-amber-400 text-xs">
+                  Cache expired — re-validation overdue. Running in 7-day grace period.
+                  {license.gracePeriodEnd && ` Expires ${fmtDate(license.gracePeriodEnd)}.`}
+                </p>
+              )}
               {license.isExpired && (
-                <p className="text-red-400 text-xs mt-1">License expired — downgraded to free tier.</p>
+                <p className="text-red-400 text-xs">Subscription expired — downgraded to free tier.</p>
               )}
             </div>
           )}
 
-          {/* Activate form */}
-          {!showActivate ? (
-            <div className="flex items-center gap-3 pt-1 border-t" style={{ borderColor: "var(--border-default)" }}>
+          {/* State 3 actions */}
+          {!licenseActivating && isPro && (
+            <div className="flex flex-wrap items-center gap-3 pt-1 border-t" style={{ borderColor: "var(--border-default)" }}>
               <button
-                onClick={() => { setShowActivate(true); setLicenseMsg(null); }}
+                onClick={handleRevalidateLicense}
+                disabled={licenseRevalidating}
                 className={S.btnSecondary}
                 style={S.btnSecondaryStyle}
               >
-                {isPro ? "Replace License" : "Activate License"}
+                {licenseRevalidating ? "Checking…" : "Validate now"}
+              </button>
+              <a
+                href="https://prism0x2a.lemonsqueezy.com/billing"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs text-indigo-400 hover:text-indigo-300 transition-colors"
+              >
+                Manage subscription →
+              </a>
+              <button
+                onClick={handleDeactivateLicense}
+                className="text-xs text-red-400 hover:text-red-300 transition-colors ml-auto"
+              >
+                Deactivate this instance
               </button>
-              {isPro && (
-                <button
-                  onClick={handleResetLicense}
-                  className="text-xs text-red-400 hover:text-red-300 transition-colors"
-                >
-                  Reset to free
-                </button>
-              )}
             </div>
-          ) : (
+          )}
+
+          {/* State 1: No license — key input */}
+          {!licenseActivating && !isPro && (
             <div className="flex flex-col gap-3 pt-1 border-t" style={{ borderColor: "var(--border-default)" }}>
-              <label className={S.label}>Paste license JSON</label>
-              <textarea
-                rows={5}
-                value={licenseJson}
-                onChange={(e) => setLicenseJson(e.target.value)}
-                placeholder={'{\n  "tier": "pro",\n  "expiresAt": 0\n}'}
-                className={S.textarea}
-                style={S.inputStyle}
-                autoFocus
-              />
+              <div className="flex flex-col gap-1.5">
+                <label className={S.label}>License Key</label>
+                <input
+                  type="text"
+                  value={licenseKeyInput}
+                  onChange={(e) => setLicenseKeyInput(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === "Enter") handleActivateLicense(); }}
+                  placeholder="LS-XXXXXXXX-XXXXXXXX-XXXXXXXX-XXXXXXXX"
+                  className={S.input}
+                  style={S.inputStyle}
+                  spellCheck={false}
+                />
+              </div>
               <div className="flex items-center gap-3">
                 <button
                   onClick={handleActivateLicense}
-                  disabled={licenseActivating || !licenseJson.trim()}
+                  disabled={!licenseKeyInput.trim()}
                   className={S.btnPrimary}
-                  style={{ background: "rgb(99,102,241)", color: "#fff" }}
+                  style={{ background: "rgb(99,102,241)", color: "#fff", opacity: licenseKeyInput.trim() ? 1 : 0.4 }}
                 >
-                  {licenseActivating ? "Activating…" : "Activate"}
+                  Activate
                 </button>
-                <button
-                  onClick={() => { setShowActivate(false); setLicenseJson(""); setLicenseMsg(null); }}
-                  className="text-xs text-slate-500 hover:text-slate-300 transition-colors"
+                <Link
+                  href="/pricing"
+                  className="text-xs text-indigo-400 hover:text-indigo-300 transition-colors"
                 >
-                  Cancel
-                </button>
+                  View Plans →
+                </Link>
+                <a
+                  href="https://prism0x2a.lemonsqueezy.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-xs text-slate-500 hover:text-slate-400 transition-colors"
+                >
+                  Get a license →
+                </a>
               </div>
             </div>
           )}
 
+          {/* Message */}
           {licenseMsg && (
             <p className={`text-xs font-mono ${licenseMsg.ok ? "text-emerald-400" : "text-red-400"}`}>
               {licenseMsg.text}

package/.next/standalone/components/PrismDock.tsx

@@ -11,6 +11,7 @@ const NAV = [
   { href: "/blue", label: "BLUE", color: "rgb(59,130,246)" },
   { href: "/amber", label: "AMBER", color: "rgb(251,191,36)" },
   { href: "/green", label: "GREEN", color: "rgb(52,211,153)" },
+  { href: "/pricing", label: "Plans", color: "rgb(167,139,250)" },
   { href: "/settings", label: "⚙", color: undefined },
 ] as const;