prism0x2a 0.7.1 → 0.8.0

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

@@ -1,139 +1,11 @@
-"use client";
-
-import { useState } from "react";
-import { PrismDock } from "@/components/PrismDock";
+import { DashboardHome } from "@/components/dashboard/DashboardHome";
+import { LandingPage } from "@/components/landing/LandingPage";
 
 export default function Home() {
-  const [targetPath, setTargetPath] = useState(
-    process.env.PRISM_TARGET ?? ""
-  );
-  const [result, setResult] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function runCycleDetection() {
-    if (!targetPath.trim()) return;
-    setLoading(true);
-    setError(null);
-    setResult(null);
-    try {
-      const res = await fetch("/api/scan", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ targetPath: targetPath.trim() }),
-      });
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error ?? "Scan failed");
-      setResult(JSON.stringify(data, null, 2));
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setLoading(false);
-    }
+  // Dashboard mode when PRISM_TARGET is set (local CLI usage).
+  // Marketing landing otherwise (Vercel deploy, no target).
+  if (process.env.PRISM_TARGET) {
+    return <DashboardHome />;
   }
-
-  return (
-    <div className="flex flex-col min-h-screen" style={{ background: "var(--bg-app)" }}>
-      <PrismDock />
-
-      {/* Main content */}
-      <main
-        className="flex-1 flex flex-col items-center justify-center px-6 gap-8"
-        style={{ paddingTop: "var(--dock-clearance-top)" }}
-      >
-        {/* Header */}
-        <div className="text-center">
-          <h1 className="text-2xl font-semibold text-slate-100 tracking-tight">
-            prism<span className="font-mono text-sky-500">0x2A</span>
-          </h1>
-          <p className="mt-1 text-sm text-slate-400">
-            The answer to your codebase. &mdash;{" "}
-            <span className="text-sky-400 font-mono">prismlens</span>
-          </p>
-          {process.env.PRISM_TARGET && (
-            <p className="mt-1 text-xs text-slate-500 font-mono">
-              Scanning: {process.env.PRISM_TARGET}
-            </p>
-          )}
-        </div>
-
-        {/* Scan card */}
-        <div
-          className="w-full max-w-lg rounded-xl p-6 flex flex-col gap-4"
-          style={{
-            background: "var(--surface-panel)",
-            border: "1px solid var(--border-default)",
-            boxShadow:
-              "0 1px 2px rgba(15,23,42,.05),0 4px 16px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.04)",
-          }}
-        >
-          <h2 className="text-sm font-semibold text-slate-300 uppercase tracking-widest">
-            Scan a directory
-          </h2>
-          <div className="flex flex-col gap-2">
-            <label className="text-xs text-slate-400" htmlFor="targetPath">
-              Absolute path
-            </label>
-            <input
-              id="targetPath"
-              type="text"
-              value={targetPath}
-              onChange={(e) => setTargetPath(e.target.value)}
-              placeholder="/Users/you/your-project"
-              className="w-full rounded-lg px-3 py-2 text-sm font-mono text-slate-200 outline-none focus:ring-2 focus:ring-sky-500/50"
-              style={{
-                background: "rgba(2,6,23,0.6)",
-                border: "1px solid var(--border-default)",
-              }}
-              onKeyDown={(e) => e.key === "Enter" && runCycleDetection()}
-            />
-          </div>
-          <button
-            onClick={runCycleDetection}
-            disabled={loading || !targetPath.trim()}
-            className="w-full py-2 rounded-lg text-sm font-semibold transition-all disabled:opacity-40 disabled:cursor-not-allowed"
-            style={{
-              background: "rgb(14,165,233)",
-              color: "#020617",
-            }}
-          >
-            {loading ? "Scanning…" : "Run cycle detection"}
-          </button>
-        </div>
-
-        {/* Results card */}
-        {(result || error) && (
-          <div
-            className="w-full max-w-lg rounded-xl p-6 flex flex-col gap-3"
-            style={{
-              background: "var(--surface-panel)",
-              border: `1px solid ${error ? "rgba(239,68,68,0.3)" : "var(--border-default)"}`,
-            }}
-          >
-            <h2 className="text-sm font-semibold text-slate-300 uppercase tracking-widest">
-              Results
-            </h2>
-            {error && (
-              <p className="text-sm text-red-400 font-mono">{error}</p>
-            )}
-            {result && (
-              <pre
-                className="text-xs font-mono text-slate-300 overflow-auto max-h-96 leading-relaxed"
-                style={{ whiteSpace: "pre-wrap", wordBreak: "break-all" }}
-              >
-                {result}
-              </pre>
-            )}
-          </div>
-        )}
-      </main>
-
-      <footer
-        className="text-center py-4 text-xs text-slate-600"
-        style={{ marginBottom: "var(--infobar-clearance-bottom)" }}
-      >
-        prism<span className="font-mono">0x2A</span> v{process.env.NEXT_PUBLIC_PRISM_VERSION}
-      </footer>
-    </div>
-  );
+  return <LandingPage />;
 }

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";
@@ -666,18 +667,21 @@ export default function SettingsPage() {
                 >
                   Activate
                 </button>
+                <Link
+                  href="/pricing"
+                  className="text-xs text-indigo-400 hover:text-indigo-300 transition-colors"
+                >
+                  View Plans →
+                </Link>
                 <a
                   href="https://prism0x2a.lemonsqueezy.com"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-xs text-indigo-400 hover:text-indigo-300 transition-colors"
+                  className="text-xs text-slate-500 hover:text-slate-400 transition-colors"
                 >
                   Get a license →
                 </a>
               </div>
-              <p className="text-xs text-slate-600">
-                Pro $39/mo · Team $99/dev/mo · Spectrum 0x55 $49/mo (bundle)
-              </p>
             </div>
           )}
 

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;
 

package/.next/standalone/components/dashboard/DashboardHome.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useState } from "react";
+import { PrismDock } from "@/components/PrismDock";
+
+export function DashboardHome() {
+  const [targetPath, setTargetPath] = useState(
+    process.env.NEXT_PUBLIC_PRISM_TARGET ?? process.env.PRISM_TARGET ?? ""
+  );
+  const [result, setResult] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function runCycleDetection() {
+    if (!targetPath.trim()) return;
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    try {
+      const res = await fetch("/api/scan", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ targetPath: targetPath.trim() }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error ?? "Scan failed");
+      setResult(JSON.stringify(data, null, 2));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen" style={{ background: "var(--bg-app)" }}>
+      <PrismDock />
+
+      <main
+        className="flex-1 flex flex-col items-center justify-center px-6 gap-8"
+        style={{ paddingTop: "var(--dock-clearance-top)" }}
+      >
+        <div className="text-center">
+          <h1 className="text-2xl font-semibold text-slate-100 tracking-tight">
+            prism<span className="font-mono text-sky-500">0x2A</span>
+          </h1>
+          <p className="mt-1 text-sm text-slate-400">
+            The answer to your codebase. &mdash;{" "}
+            <span className="text-sky-400 font-mono">prismlens</span>
+          </p>
+        </div>
+
+        <div
+          className="w-full max-w-lg rounded-xl p-6 flex flex-col gap-4"
+          style={{
+            background: "var(--surface-panel)",
+            border: "1px solid var(--border-default)",
+            boxShadow:
+              "0 1px 2px rgba(15,23,42,.05),0 4px 16px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.04)",
+          }}
+        >
+          <h2 className="text-sm font-semibold text-slate-300 uppercase tracking-widest">
+            Scan a directory
+          </h2>
+          <div className="flex flex-col gap-2">
+            <label className="text-xs text-slate-400" htmlFor="targetPath">
+              Absolute path
+            </label>
+            <input
+              id="targetPath"
+              type="text"
+              value={targetPath}
+              onChange={(e) => setTargetPath(e.target.value)}
+              placeholder="/Users/you/your-project"
+              className="w-full rounded-lg px-3 py-2 text-sm font-mono text-slate-200 outline-none focus:ring-2 focus:ring-sky-500/50"
+              style={{
+                background: "rgba(2,6,23,0.6)",
+                border: "1px solid var(--border-default)",
+              }}
+              onKeyDown={(e) => e.key === "Enter" && runCycleDetection()}
+            />
+          </div>
+          <button
+            onClick={runCycleDetection}
+            disabled={loading || !targetPath.trim()}
+            className="w-full py-2 rounded-lg text-sm font-semibold transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+            style={{ background: "rgb(14,165,233)", color: "#020617" }}
+          >
+            {loading ? "Scanning…" : "Run cycle detection"}
+          </button>
+        </div>
+
+        {(result || error) && (
+          <div
+            className="w-full max-w-lg rounded-xl p-6 flex flex-col gap-3"
+            style={{
+              background: "var(--surface-panel)",
+              border: `1px solid ${error ? "rgba(239,68,68,0.3)" : "var(--border-default)"}`,
+            }}
+          >
+            <h2 className="text-sm font-semibold text-slate-300 uppercase tracking-widest">
+              Results
+            </h2>
+            {error && <p className="text-sm text-red-400 font-mono">{error}</p>}
+            {result && (
+              <pre className="text-xs font-mono text-slate-300 overflow-auto max-h-96 leading-relaxed"
+                style={{ whiteSpace: "pre-wrap", wordBreak: "break-all" }}>
+                {result}
+              </pre>
+            )}
+          </div>
+        )}
+      </main>
+
+      <footer
+        className="text-center py-4 text-xs text-slate-600"
+        style={{ marginBottom: "var(--infobar-clearance-bottom)" }}
+      >
+        prism<span className="font-mono">0x2A</span> v{process.env.NEXT_PUBLIC_PRISM_VERSION}
+      </footer>
+    </div>
+  );
+}