prism0x2a 0.7.2 → 0.11.0

package/.next/standalone/components/blue-explorer/FlowView.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useMemo, useCallback } from "react";
+import { ReactFlow, Background, Controls, useNodesState, useEdgesState } from "@xyflow/react";
+import type { Node, Edge, NodeMouseHandler } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import type { BlueprintData, FileEntry } from "@/lib/prism/blue/explorer/types";
+import { heatBarColor } from "@/lib/prism/blue/explorer/heatHelpers";
+
+const NODE_W = 200;
+const NODE_H = 44;
+
+function buildFlowGraph(data: BlueprintData): { nodes: Node[]; edges: Edge[] } {
+  // Pages = files that are page.tsx / route.tsx / layout.tsx
+  const pageFiles = data.files.filter(
+    (f) => /\/(page|layout|route)\.(tsx?|jsx?)$/.test(f.path)
+  );
+
+  if (pageFiles.length === 0) {
+    // Fallback: show routesDiscovered as nodes
+    const routeNodes: Node[] = data.summary.routesDiscovered.map((r, i) => ({
+      id: `route-${i}`,
+      position: { x: (i % 4) * 240, y: Math.floor(i / 4) * 80 },
+      data: { label: r, route: r },
+      style: {
+        width: NODE_W,
+        height: NODE_H,
+        background: "rgba(30,41,59,0.7)",
+        border: "1px solid rgba(51,65,85,0.5)",
+        borderRadius: 6,
+        fontSize: 10,
+        color: "rgb(148,163,184)",
+        display: "flex",
+        alignItems: "center",
+        padding: "0 10px",
+        fontFamily: "ui-monospace, monospace",
+      },
+    }));
+    return { nodes: routeNodes, edges: [] };
+  }
+
+  // Group by route path
+  function toRoute(path: string): string {
+    return (
+      path
+        .replace(/^(src\/)?app\//, "/")
+        .replace(/\/(page|layout|route)\.(tsx?|jsx?)$/, "")
+        .replace(/\/\(.*?\)/g, "")
+        || "/"
+    );
+  }
+
+  // Build parent-child edges from route hierarchy
+  const routeMap = new Map<string, FileEntry[]>();
+  for (const f of pageFiles) {
+    const route = toRoute(f.path);
+    const arr = routeMap.get(route) ?? [];
+    arr.push(f);
+    routeMap.set(route, arr);
+  }
+
+  const routes = Array.from(routeMap.keys()).sort();
+
+  const nodes: Node[] = routes.map((route, i) => {
+    const files = routeMap.get(route) ?? [];
+    const maxHeat = files.reduce((m, f) => Math.max(m, f.metrics.heatScore), 0);
+    const color = heatBarColor(maxHeat);
+    const isLayout = files.some((f) => f.path.includes("/layout."));
+    return {
+      id: route,
+      position: { x: (i % 5) * (NODE_W + 20), y: Math.floor(i / 5) * (NODE_H + 20) },
+      data: { label: route === "/" ? "/ (root)" : route, maxHeat, files, isLayout },
+      style: {
+        width: NODE_W,
+        height: NODE_H,
+        background: `${color}14`,
+        border: `1px solid ${color}44`,
+        borderRadius: 6,
+        fontSize: 10,
+        color: "rgb(203,213,225)",
+        display: "flex",
+        alignItems: "center",
+        padding: "0 10px",
+        fontFamily: "ui-monospace, monospace",
+        fontWeight: isLayout ? "600" : "400",
+      },
+    };
+  });
+
+  // Infer parent-child edges
+  const edges: Edge[] = [];
+  for (const route of routes) {
+    if (route === "/") continue;
+    const parts = route.split("/").filter(Boolean);
+    for (let len = parts.length - 1; len > 0; len--) {
+      const parent = "/" + parts.slice(0, len).join("/");
+      if (routeMap.has(parent)) {
+        edges.push({
+          id: `${parent}→${route}`,
+          source: parent,
+          target: route,
+          style: { stroke: "rgba(100,116,139,0.3)", strokeWidth: 1 },
+        });
+        break;
+      }
+    }
+    // Connect to root if no other parent found
+    if (!edges.find((e) => e.target === route) && routeMap.has("/")) {
+      edges.push({
+        id: `/→${route}`,
+        source: "/",
+        target: route,
+        style: { stroke: "rgba(100,116,139,0.2)", strokeWidth: 1 },
+      });
+    }
+  }
+
+  return { nodes, edges };
+}
+
+export function FlowView({
+  data,
+  onSelectFile,
+}: {
+  data: BlueprintData;
+  onSelectFile: (file: FileEntry | null) => void;
+}) {
+  const { nodes: initNodes, edges: initEdges } = useMemo(
+    () => buildFlowGraph(data),
+    [data]
+  );
+
+  const [nodes, , onNodesChange] = useNodesState(initNodes);
+  const [edges, , onEdgesChange] = useEdgesState(initEdges);
+
+  const onNodeClick: NodeMouseHandler = useCallback(
+    (_, node) => {
+      const files = node.data.files as FileEntry[] | undefined;
+      if (files && files.length > 0) onSelectFile(files[0]);
+    },
+    [onSelectFile]
+  );
+
+  return (
+    <div style={{ width: "100%", height: "100%", background: "#020617" }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={onNodeClick}
+        fitView
+        fitViewOptions={{ padding: 0.15 }}
+        minZoom={0.05}
+        maxZoom={2}
+        nodesDraggable={false}
+        nodesConnectable={false}
+      >
+        <Background color="#1e293b" gap={20} />
+        <Controls
+          style={{ background: "rgba(15,23,42,0.8)", border: "1px solid rgba(51,65,85,0.4)" }}
+        />
+      </ReactFlow>
+    </div>
+  );
+}

package/.next/standalone/components/blue-explorer/ProGate.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import Link from "next/link";
+
+export function ProGate() {
+  return (
+    <div
+      className="flex flex-col items-center justify-center min-h-[60vh] px-6 text-center gap-6"
+    >
+      {/* Badge */}
+      <div
+        className="flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold"
+        style={{
+          background: "rgba(59,130,246,0.12)",
+          border: "1px solid rgba(59,130,246,0.3)",
+          color: "rgb(96,165,250)",
+        }}
+      >
+        <span>✦</span>
+        <span>PRO FEATURE</span>
+      </div>
+
+      {/* Prism-spectrum visual hint */}
+      <div className="text-6xl select-none" aria-hidden>🔷</div>
+
+      <div className="flex flex-col gap-2 max-w-md">
+        <h2 className="text-2xl font-semibold text-slate-100 tracking-tight">
+          Blueprint Explorer
+        </h2>
+        <p className="text-slate-400 text-sm leading-relaxed">
+          Deep-dive into every file in your codebase — heat scores, coverage,
+          import graphs, state complexity, and AI-powered recommendations.
+          Available on Pro and above.
+        </p>
+      </div>
+
+      {/* Feature pills */}
+      <div className="flex flex-wrap gap-2 justify-center max-w-sm">
+        {[
+          "File heat map",
+          "Coverage overlays",
+          "Import graph",
+          "Inspector panel",
+          "Recommendations",
+          "Per-file comments",
+          "Zone view",
+          "Wire view",
+        ].map((f) => (
+          <span
+            key={f}
+            className="text-xs px-2.5 py-1 rounded-full font-medium"
+            style={{
+              background: "rgba(15,23,42,0.6)",
+              border: "1px solid rgba(51,65,85,0.4)",
+              color: "rgb(148,163,184)",
+            }}
+          >
+            {f}
+          </span>
+        ))}
+      </div>
+
+      {/* CTA */}
+      <div className="flex items-center gap-3">
+        <Link
+          href="/pricing"
+          className="px-5 py-2.5 rounded-lg text-sm font-semibold transition-all"
+          style={{
+            background: "rgb(59,130,246)",
+            color: "#fff",
+            boxShadow: "0 0 20px rgba(59,130,246,0.3)",
+          }}
+        >
+          Upgrade to Pro →
+        </Link>
+        <Link
+          href="/blue"
+          className="px-4 py-2.5 rounded-lg text-sm font-medium transition-colors"
+          style={{
+            color: "rgb(100,116,139)",
+            border: "1px solid rgba(51,65,85,0.4)",
+          }}
+        >
+          Back to BLUE
+        </Link>
+      </div>
+
+      <p className="text-xs text-slate-600">
+        From €39/mo · Cancel anytime · EU VAT compliant
+      </p>
+    </div>
+  );
+}

package/.next/standalone/components/blue-explorer/RescanButton.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+import type { BlueprintData } from "@/lib/prism/blue/explorer/types";
+
+export function RescanButton({
+  target,
+  onComplete,
+}: {
+  target: string;
+  onComplete: (data: BlueprintData) => void;
+}) {
+  const [scanning, setScanning] = useState(false);
+
+  async function rescan() {
+    setScanning(true);
+    try {
+      const res = await fetch("/api/blue/explorer", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ target }),
+      });
+      const json = await res.json();
+      if (res.ok && json.data) onComplete(json.data);
+    } finally {
+      setScanning(false);
+    }
+  }
+
+  return (
+    <button
+      onClick={rescan}
+      disabled={scanning}
+      className="text-xs px-3 py-1 rounded-md font-medium transition-all disabled:opacity-50"
+      style={{
+        background: "rgba(59,130,246,0.15)",
+        color: "rgb(96,165,250)",
+        border: "1px solid rgba(59,130,246,0.25)",
+      }}
+    >
+      {scanning ? "Scanning…" : "↺ Rescan"}
+    </button>
+  );
+}

package/.next/standalone/components/blue-explorer/WireView.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import { useMemo } from "react";
+import type { BlueprintData, FileEntry } from "@/lib/prism/blue/explorer/types";
+import { heatBarColor, heatBadgeClass } from "@/lib/prism/blue/explorer/heatHelpers";
+
+interface RouteNode {
+  segment: string;
+  fullPath: string;
+  layoutFile: FileEntry | null;
+  pageFile: FileEntry | null;
+  otherFiles: FileEntry[];
+  children: RouteNode[];
+  maxHeat: number;
+}
+
+function routeSegment(path: string): string[] {
+  // Strip "app/" prefix, then split on "/" keeping only dir segments
+  const withoutApp = path.replace(/^app\//, "");
+  const parts = withoutApp.split("/");
+  // Remove filename
+  parts.pop();
+  return parts;
+}
+
+function isAppFile(path: string): boolean {
+  return path.startsWith("app/") || path.startsWith("src/app/");
+}
+
+function buildRouteTree(files: FileEntry[]): RouteNode {
+  const root: RouteNode = {
+    segment: "(root)",
+    fullPath: "",
+    layoutFile: null,
+    pageFile: null,
+    otherFiles: [],
+    children: [],
+    maxHeat: 0,
+  };
+
+  const appFiles = files.filter((f) => isAppFile(f.path));
+
+  function getOrCreate(segments: string[], parent: RouteNode): RouteNode {
+    if (segments.length === 0) return parent;
+    const [head, ...rest] = segments;
+    let child = parent.children.find((c) => c.segment === head);
+    if (!child) {
+      const fp = parent.fullPath ? `${parent.fullPath}/${head}` : head;
+      child = {
+        segment: head,
+        fullPath: fp,
+        layoutFile: null,
+        pageFile: null,
+        otherFiles: [],
+        children: [],
+        maxHeat: 0,
+      };
+      parent.children.push(child);
+    }
+    return getOrCreate(rest, child);
+  }
+
+  for (const f of appFiles) {
+    const segs = routeSegment(f.path);
+    const node = getOrCreate(segs, root);
+    const filename = f.path.split("/").pop() ?? "";
+    if (filename === "layout.tsx" || filename === "layout.ts") {
+      node.layoutFile = f;
+    } else if (filename === "page.tsx" || filename === "page.ts") {
+      node.pageFile = f;
+    } else {
+      node.otherFiles.push(f);
+    }
+    const heat = f.metrics.heatScore;
+    if (heat > node.maxHeat) node.maxHeat = heat;
+  }
+
+  // Propagate maxHeat upward
+  function propagate(n: RouteNode): number {
+    const childMax = n.children.reduce((m, c) => Math.max(m, propagate(c)), 0);
+    n.maxHeat = Math.max(n.maxHeat, childMax);
+    return n.maxHeat;
+  }
+  propagate(root);
+
+  return root;
+}
+
+function RouteBlock({
+  node,
+  depth,
+  onSelect,
+}: {
+  node: RouteNode;
+  depth: number;
+  onSelect: (f: FileEntry) => void;
+}) {
+  const barColor = heatBarColor(node.maxHeat);
+  const label = node.segment.startsWith("(") ? node.segment : `/${node.segment}`;
+
+  return (
+    <div
+      className="rounded border flex flex-col"
+      style={{
+        borderColor: `${barColor}33`,
+        background: `rgba(8,15,30,${0.7 - depth * 0.05})`,
+        marginLeft: depth > 0 ? 12 : 0,
+      }}
+    >
+      {/* Route header */}
+      <div
+        className="flex items-center gap-2 px-3 py-1.5 border-b"
+        style={{ borderColor: `${barColor}22`, background: `${barColor}08` }}
+      >
+        <span
+          className="text-[9px] font-mono font-bold px-1 py-0.5 rounded"
+          style={{ background: `${barColor}22`, color: barColor }}
+        >
+          {node.maxHeat.toFixed(0)}
+        </span>
+        <span className="text-xs font-mono text-slate-300 font-medium">{label}</span>
+
+        {node.layoutFile && (
+          <button
+            onClick={() => onSelect(node.layoutFile!)}
+            className="text-[9px] font-mono px-1.5 py-0.5 rounded ml-1 hover:opacity-80 transition-opacity"
+            style={{ background: "rgba(168,85,247,0.15)", color: "rgb(216,180,254)", border: "1px solid rgba(168,85,247,0.3)" }}
+          >
+            layout
+          </button>
+        )}
+        {node.pageFile && (
+          <button
+            onClick={() => onSelect(node.pageFile!)}
+            className="text-[9px] font-mono px-1.5 py-0.5 rounded hover:opacity-80 transition-opacity"
+            style={{ background: "rgba(59,130,246,0.15)", color: "rgb(147,197,253)", border: "1px solid rgba(59,130,246,0.3)" }}
+          >
+            page
+          </button>
+        )}
+        {node.otherFiles.slice(0, 3).map((f) => (
+          <button
+            key={f.id}
+            onClick={() => onSelect(f)}
+            className="text-[9px] font-mono px-1.5 py-0.5 rounded hover:opacity-80 transition-opacity"
+            style={{ background: "rgba(30,41,59,0.5)", color: "rgb(100,116,139)", border: "1px solid rgba(51,65,85,0.3)" }}
+          >
+            {f.path.split("/").pop()}
+          </button>
+        ))}
+        {node.otherFiles.length > 3 && (
+          <span className="text-[9px] text-slate-600 font-mono">+{node.otherFiles.length - 3}</span>
+        )}
+      </div>
+
+      {/* Children */}
+      {node.children.length > 0 && (
+        <div className="flex flex-col gap-1.5 p-1.5">
+          {node.children
+            .sort((a, b) => b.maxHeat - a.maxHeat)
+            .map((child) => (
+              <RouteBlock key={child.fullPath} node={child} depth={depth + 1} onSelect={onSelect} />
+            ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function WireView({
+  data,
+  onSelectFile,
+}: {
+  data: BlueprintData;
+  onSelectFile: (file: FileEntry | null) => void;
+}) {
+  const tree = useMemo(() => buildRouteTree(data.files), [data]);
+  const hasAppFiles = tree.layoutFile || tree.pageFile || tree.children.length > 0;
+
+  if (!hasAppFiles) {
+    return (
+      <div className="h-full flex flex-col items-center justify-center gap-3 text-center px-6">
+        <span className="text-4xl">🔌</span>
+        <p className="text-sm text-slate-500">No app/ directory files found in this blueprint.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-y-auto p-4">
+      <p className="text-[10px] uppercase tracking-widest text-slate-600 font-semibold mb-3">
+        Next.js Layout Hierarchy
+      </p>
+      <div className="flex flex-col gap-1.5">
+        {/* Root-level files */}
+        {(tree.layoutFile || tree.pageFile) && (
+          <div
+            className="rounded border p-2 flex items-center gap-2 mb-1"
+            style={{ borderColor: "rgba(51,65,85,0.4)", background: "rgba(8,15,30,0.6)" }}
+          >
+            <span className="text-[9px] font-mono text-slate-500">/</span>
+            {tree.layoutFile && (
+              <button
+                onClick={() => onSelectFile(tree.layoutFile!)}
+                className="text-[9px] font-mono px-1.5 py-0.5 rounded hover:opacity-80"
+                style={{ background: "rgba(168,85,247,0.15)", color: "rgb(216,180,254)", border: "1px solid rgba(168,85,247,0.3)" }}
+              >
+                layout <span className={heatBadgeClass(tree.layoutFile.metrics.heatScore).split(" ").slice(-1)[0]}>
+                  {tree.layoutFile.metrics.heatScore.toFixed(0)}
+                </span>
+              </button>
+            )}
+            {tree.pageFile && (
+              <button
+                onClick={() => onSelectFile(tree.pageFile!)}
+                className="text-[9px] font-mono px-1.5 py-0.5 rounded hover:opacity-80"
+                style={{ background: "rgba(59,130,246,0.15)", color: "rgb(147,197,253)", border: "1px solid rgba(59,130,246,0.3)" }}
+              >
+                page
+              </button>
+            )}
+          </div>
+        )}
+        {tree.children
+          .sort((a, b) => b.maxHeat - a.maxHeat)
+          .map((child) => (
+            <RouteBlock key={child.fullPath} node={child} depth={0} onSelect={onSelectFile} />
+          ))}
+      </div>
+    </div>
+  );
+}