prism0x2a 0.7.2 → 0.8.0

package/.next/standalone/app/opengraph-image.tsx

@@ -0,0 +1,126 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+export const alt = "prism0x2A — The answer to your codebase.";
+export const size = { width: 1200, height: 630 };
+export const contentType = "image/png";
+
+export default function OgImage() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: "#020617",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "24px",
+          fontFamily: "system-ui, sans-serif",
+          padding: "48px",
+        }}
+      >
+        {/* Logo */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+          }}
+        >
+          <span style={{ color: "rgb(56,189,248)", fontSize: "56px" }}>✦</span>
+          <span
+            style={{
+              fontSize: "88px",
+              fontWeight: 700,
+              color: "#f1f5f9",
+              letterSpacing: "-2px",
+            }}
+          >
+            prism
+            <span style={{ color: "rgb(14,165,233)", fontFamily: "monospace" }}>
+              0x2A
+            </span>
+          </span>
+        </div>
+
+        {/* Tagline */}
+        <div
+          style={{
+            fontSize: "36px",
+            color: "#94a3b8",
+            fontWeight: 500,
+            letterSpacing: "-0.5px",
+          }}
+        >
+          The answer to your codebase.
+        </div>
+
+        {/* Sub */}
+        <div
+          style={{
+            fontSize: "22px",
+            color: "#475569",
+          }}
+        >
+          Local-first code intelligence · Free up to 50k LOC
+        </div>
+
+        {/* Badges */}
+        <div
+          style={{
+            display: "flex",
+            gap: "16px",
+            marginTop: "8px",
+          }}
+        >
+          {[
+            { label: "€0 to start", color: "rgb(52,211,153)", bg: "rgba(52,211,153,0.12)", border: "rgba(52,211,153,0.3)" },
+            { label: "MIT Engine", color: "rgb(56,189,248)", bg: "rgba(56,189,248,0.12)", border: "rgba(56,189,248,0.3)" },
+            { label: "No account required", color: "rgb(167,139,250)", bg: "rgba(167,139,250,0.12)", border: "rgba(167,139,250,0.3)" },
+          ].map(({ label, color, bg, border }) => (
+            <div
+              key={label}
+              style={{
+                background: bg,
+                color,
+                border: `1px solid ${border}`,
+                borderRadius: "8px",
+                padding: "8px 18px",
+                fontSize: "18px",
+                fontWeight: 600,
+              }}
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+
+        {/* Bot spectrum */}
+        <div
+          style={{
+            display: "flex",
+            gap: "32px",
+            marginTop: "8px",
+          }}
+        >
+          {[
+            { label: "BLUE", color: "rgb(96,165,250)" },
+            { label: "AMBER", color: "rgb(251,191,36)" },
+            { label: "GREEN", color: "rgb(52,211,153)" },
+          ].map(({ label, color }) => (
+            <div
+              key={label}
+              style={{ color, fontSize: "16px", fontFamily: "monospace", fontWeight: 700, letterSpacing: "2px" }}
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+      </div>
+    ),
+    { ...size }
+  );
+}

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/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>
+  );
+}

package/.next/standalone/components/landing/Footer.tsx

@@ -0,0 +1,104 @@
+import Link from "next/link";
+
+export function Footer() {
+  return (
+    <footer
+      className="border-t mt-24"
+      style={{ borderColor: "rgba(51,65,85,0.3)" }}
+    >
+      <div className="max-w-5xl mx-auto px-6 py-16 grid grid-cols-2 sm:grid-cols-4 gap-10">
+        {/* Brand */}
+        <div className="col-span-2 sm:col-span-1 flex flex-col gap-3">
+          <div className="flex items-center gap-1.5">
+            <span className="text-sky-400 text-base select-none">✦</span>
+            <span className="text-slate-200 text-sm font-semibold tracking-tight">
+              prism<span className="font-mono text-sky-500">0x2A</span>
+            </span>
+          </div>
+          <p className="text-xs text-slate-600 leading-relaxed">
+            Local-first code intelligence.<br />
+            Engine: <span className="font-mono text-slate-500">prismlens</span>.
+          </p>
+          <p className="text-xs text-slate-700 font-mono">0x2A = 42</p>
+        </div>
+
+        {/* Product */}
+        <div className="flex flex-col gap-3">
+          <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-widest">Product</h3>
+          <nav className="flex flex-col gap-2">
+            <Link href="/pricing" className="text-xs text-slate-600 hover:text-slate-400 transition-colors">Pricing</Link>
+            <Link
+              href="https://github.com/dadenjo/prism0x2A"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-slate-600 hover:text-slate-400 transition-colors"
+            >
+              Docs
+            </Link>
+            <Link
+              href="https://github.com/dadenjo/prism0x2A/blob/main/CHANGELOG.md"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-slate-600 hover:text-slate-400 transition-colors"
+            >
+              Changelog
+            </Link>
+          </nav>
+        </div>
+
+        {/* Resources */}
+        <div className="flex flex-col gap-3">
+          <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-widest">Resources</h3>
+          <nav className="flex flex-col gap-2">
+            <Link
+              href="https://github.com/dadenjo/prism0x2A"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-slate-600 hover:text-slate-400 transition-colors"
+            >
+              GitHub — prism0x2A
+            </Link>
+            <Link
+              href="https://github.com/dadenjo/forge0x2B"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-slate-600 hover:text-slate-400 transition-colors"
+            >
+              forge0x2B (coming soon)
+            </Link>
+            <span className="text-xs text-slate-700">Engine: prismlens</span>
+          </nav>
+        </div>
+
+        {/* Legal */}
+        <div className="flex flex-col gap-3">
+          <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-widest">Legal</h3>
+          <nav className="flex flex-col gap-2">
+            <Link
+              href="https://github.com/dadenjo/prism0x2A/blob/main/LICENSE"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-slate-600 hover:text-slate-400 transition-colors"
+            >
+              License
+            </Link>
+            <span className="text-xs text-slate-700">Terms (coming)</span>
+            <span className="text-xs text-slate-700">Privacy (coming)</span>
+          </nav>
+        </div>
+      </div>
+
+      <div
+        className="max-w-5xl mx-auto px-6 pb-8 flex flex-col sm:flex-row items-center justify-between gap-2 border-t"
+        style={{ borderColor: "rgba(51,65,85,0.2)" }}
+      >
+        <p className="text-xs text-slate-700">
+          Made in Germany 🇩🇪 · © 2026 prism0x2A
+        </p>
+        <p className="text-xs text-slate-700 font-mono">
+          The answer is 42.
+        </p>
+      </div>
+    </footer>
+  );
+}

package/.next/standalone/components/landing/HeroVisual.tsx

@@ -0,0 +1,139 @@
+export function HeroVisual() {
+  return (
+    <svg
+      viewBox="0 0 600 360"
+      className="w-full max-w-xl"
+      aria-hidden="true"
+      role="img"
+    >
+      <defs>
+        <linearGradient id="prism-fill" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="rgba(148,163,184,0.18)" />
+          <stop offset="40%" stopColor="rgba(226,232,240,0.07)" />
+          <stop offset="100%" stopColor="rgba(99,102,241,0.12)" />
+        </linearGradient>
+
+        <linearGradient id="chaos-fade" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor="rgba(2,6,23,0)" />
+          <stop offset="70%" stopColor="rgba(2,6,23,0.85)" />
+          <stop offset="100%" stopColor="rgba(2,6,23,1)" />
+        </linearGradient>
+
+        <linearGradient id="blue-ray" x1="290" y1="130" x2="432" y2="62" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="rgb(59,130,246)" stopOpacity="0.9" />
+          <stop offset="100%" stopColor="rgb(59,130,246)" stopOpacity="0.35" />
+        </linearGradient>
+        <linearGradient id="amber-ray" x1="290" y1="180" x2="430" y2="180" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="rgb(245,158,11)" stopOpacity="0.9" />
+          <stop offset="100%" stopColor="rgb(245,158,11)" stopOpacity="0.35" />
+        </linearGradient>
+        <linearGradient id="green-ray" x1="290" y1="220" x2="430" y2="295" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="rgb(16,185,129)" stopOpacity="0.9" />
+          <stop offset="100%" stopColor="rgb(16,185,129)" stopOpacity="0.35" />
+        </linearGradient>
+
+        <filter id="soft-glow" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="4" result="blur" />
+          <feMerge>
+            <feMergeNode in="blur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      {/* ── Code chaos (left) ── */}
+      {[
+        { t: "import { analyze } from './engine'",      y: 28  },
+        { t: "TypeError: Cannot read property 'map'",   y: 55  },
+        { t: "  at Object.<anonymous> src/lib:42",      y: 82  },
+        { t: "const deps = await scan(targetPath)",     y: 109 },
+        { t: "// TODO: fix circular ref → api/index",  y: 136 },
+        { t: "export default function Dashboard() {",   y: 163 },
+        { t: "Error: ENOENT no such file or dir",       y: 190 },
+        { t: "  at /src/api/route.ts:17:9",             y: 217 },
+        { t: "import type { Config } from '@/lib'",     y: 244 },
+        { t: "✗ 3 import cycles detected",              y: 271 },
+        { t: "  src/api → lib/db → src/api",            y: 298 },
+        { t: "✗ 14 uncovered branches",                 y: 325 },
+      ].map(({ t, y }, i) => (
+        <text key={i} x="8" y={y} fontSize="9" fontFamily="monospace"
+          fill={`rgba(100,116,139,${0.12 + (i % 4) * 0.04})`}>
+          {t}
+        </text>
+      ))}
+
+      {/* Fade overlay */}
+      <rect x="0" y="0" width="195" height="360" fill="url(#chaos-fade)" />
+
+      {/* ── Input beam ── */}
+      <line x1="0" y1="180" x2="192" y2="180"
+        stroke="rgba(255,255,255,0.12)" strokeWidth="1.5" strokeDasharray="5 3" />
+
+      {/* ── Prism triangle ──
+            apex: (192, 180)   top-right: (292, 88)   bottom-right: (292, 272) */}
+
+      {/* Glass fill */}
+      <polygon points="192,180 292,88 292,272"
+        fill="url(#prism-fill)"
+        stroke="none" />
+
+      {/* Left face highlight */}
+      <line x1="192" y1="180" x2="292" y2="88"
+        stroke="rgba(226,232,240,0.45)" strokeWidth="1.2" />
+      <line x1="192" y1="180" x2="292" y2="272"
+        stroke="rgba(148,163,184,0.3)" strokeWidth="1.2" />
+
+      {/* Right face */}
+      <line x1="292" y1="88" x2="292" y2="272"
+        stroke="rgba(226,232,240,0.5)" strokeWidth="1.5" />
+
+      {/* Internal refraction hints */}
+      <line x1="226" y1="172" x2="292" y2="130" stroke="rgba(255,255,255,0.05)" strokeWidth="0.7" />
+      <line x1="226" y1="180" x2="292" y2="180" stroke="rgba(255,255,255,0.05)" strokeWidth="0.7" />
+      <line x1="226" y1="188" x2="292" y2="230" stroke="rgba(255,255,255,0.05)" strokeWidth="0.7" />
+
+      {/* 0x2A engraving */}
+      <text x="242" y="183" fontSize="10" fontFamily="monospace"
+        fill="rgba(148,163,184,0.38)" textAnchor="middle" letterSpacing="0.5">
+        0x2A
+      </text>
+
+      {/* ── Output rays ── */}
+      <line x1="292" y1="130" x2="432" y2="62"
+        stroke="url(#blue-ray)" strokeWidth="2.5" filter="url(#soft-glow)" />
+      <line x1="292" y1="180" x2="432" y2="180"
+        stroke="url(#amber-ray)" strokeWidth="2.5" filter="url(#soft-glow)" />
+      <line x1="292" y1="230" x2="432" y2="298"
+        stroke="url(#green-ray)" strokeWidth="2.5" filter="url(#soft-glow)" />
+
+      {/* ── Output cards ── */}
+
+      {/* BLUE card */}
+      <rect x="432" y="26" width="154" height="72" rx="7"
+        fill="rgba(8,16,36,0.92)" stroke="rgba(59,130,246,0.45)" strokeWidth="1" />
+      <rect x="432" y="26" width="154" height="3" rx="1.5" fill="rgba(59,130,246,0.7)" />
+      <text x="446" y="50" fontSize="10" fontFamily="monospace"
+        fill="rgb(96,165,250)" fontWeight="bold" letterSpacing="1">BLUE</text>
+      <text x="446" y="66" fontSize="8.5" fontFamily="monospace" fill="rgba(100,116,139,0.85)">Sessions · Recommendations</text>
+      <text x="446" y="85" fontSize="8" fontFamily="sans-serif" fill="rgba(71,85,105,0.75)">LLM-powered investigations</text>
+
+      {/* AMBER card */}
+      <rect x="432" y="144" width="154" height="72" rx="7"
+        fill="rgba(8,16,36,0.92)" stroke="rgba(245,158,11,0.45)" strokeWidth="1" />
+      <rect x="432" y="144" width="154" height="3" rx="1.5" fill="rgba(245,158,11,0.7)" />
+      <text x="446" y="168" fontSize="10" fontFamily="monospace"
+        fill="rgb(251,191,36)" fontWeight="bold" letterSpacing="1">AMBER</text>
+      <text x="446" y="184" fontSize="8.5" fontFamily="monospace" fill="rgba(100,116,139,0.85)">Coverage · Registry · Files</text>
+      <text x="446" y="203" fontSize="8" fontFamily="sans-serif" fill="rgba(71,85,105,0.75)">Metadata + hot-spot analysis</text>
+
+      {/* GREEN card */}
+      <rect x="432" y="262" width="154" height="72" rx="7"
+        fill="rgba(8,16,36,0.92)" stroke="rgba(16,185,129,0.45)" strokeWidth="1" />
+      <rect x="432" y="262" width="154" height="3" rx="1.5" fill="rgba(16,185,129,0.7)" />
+      <text x="446" y="286" fontSize="10" fontFamily="monospace"
+        fill="rgb(52,211,153)" fontWeight="bold" letterSpacing="1">GREEN</text>
+      <text x="446" y="302" fontSize="8.5" fontFamily="monospace" fill="rgba(100,116,139,0.85)">Insights · Queries · Cross-layer</text>
+      <text x="446" y="321" fontSize="8" fontFamily="sans-serif" fill="rgba(71,85,105,0.75)">Auto-discovery + pattern AI</text>
+    </svg>
+  );
+}