prism0x2a 0.7.2 → 0.11.0

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

@@ -0,0 +1,138 @@
+"use client";
+
+import { useMemo, useCallback } from "react";
+import { ReactFlow, Background, Controls, MiniMap, useNodesState, useEdgesState } from "@xyflow/react";
+import type { Node, Edge, NodeMouseHandler } from "@xyflow/react";
+import dagre from "dagre";
+import "@xyflow/react/dist/style.css";
+import type { BlueprintData, FileEntry, GraphNode, GraphEdge } from "@/lib/prism/blue/explorer/types";
+import { heatColor } from "@/lib/prism/blue/explorer/heatHelpers";
+
+const NODE_W = 200;
+const NODE_H = 40;
+
+function buildLayout(
+  gNodes: GraphNode[],
+  gEdges: GraphEdge[],
+  fileMap: Map<string, FileEntry>,
+  catFilter: string
+) {
+  const visible = catFilter === "all"
+    ? gNodes
+    : gNodes.filter((n) => {
+        const f = fileMap.get(n.path);
+        return f?.category === catFilter;
+      });
+  const visibleIds = new Set(visible.map((n) => n.id));
+  const visibleEdges = gEdges.filter(
+    (e) => visibleIds.has(e.source) && visibleIds.has(e.target)
+  );
+
+  const g = new dagre.graphlib.Graph();
+  g.setDefaultEdgeLabel(() => ({}));
+  g.setGraph({ rankdir: "LR", ranksep: 90, nodesep: 28 });
+
+  visible.forEach((n) => g.setNode(n.id, { width: NODE_W, height: NODE_H }));
+  visibleEdges.forEach((e) => g.setEdge(e.source, e.target));
+  dagre.layout(g);
+
+  const nodes: Node[] = visible.map((n) => {
+    const pos = g.node(n.id) ?? { x: 0, y: 0 };
+    const file = fileMap.get(n.path);
+    const heat = file?.metrics.heatScore ?? 0;
+    const color = heatColor(heat);
+    const label = n.path.split("/").pop() ?? n.path;
+    return {
+      id: n.id,
+      position: { x: pos.x - NODE_W / 2, y: pos.y - NODE_H / 2 },
+      data: { label, heat, path: n.path, category: n.category, file },
+      style: {
+        width: NODE_W,
+        height: NODE_H,
+        background: color + "18",
+        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",
+        overflow: "hidden",
+        whiteSpace: "nowrap" as const,
+        textOverflow: "ellipsis",
+      },
+    };
+  });
+
+  const edges: Edge[] = visibleEdges.map((e) => ({
+    id: `${e.source}→${e.target}`,
+    source: e.source,
+    target: e.target,
+    style: { stroke: "rgba(100,116,139,0.35)", strokeWidth: 1 },
+    animated: false,
+  }));
+
+  return { nodes, edges };
+}
+
+export function BlueprintGraph({
+  data,
+  catFilter,
+  onSelectFile,
+}: {
+  data: BlueprintData;
+  catFilter: string;
+  onSelectFile: (file: FileEntry | null) => void;
+}) {
+  const fileMap = useMemo(() => {
+    const m = new Map<string, FileEntry>();
+    data.files.forEach((f) => m.set(f.path, f));
+    return m;
+  }, [data]);
+
+  const { nodes: layoutNodes, edges: layoutEdges } = useMemo(
+    () => buildLayout(data.nodes, data.edges, fileMap, catFilter),
+    [data, fileMap, catFilter]
+  );
+
+  const [nodes, , onNodesChange] = useNodesState(layoutNodes);
+  const [edges, , onEdgesChange] = useEdgesState(layoutEdges);
+
+  const onNodeClick: NodeMouseHandler = useCallback(
+    (_, node) => {
+      const file = node.data.file as FileEntry | undefined;
+      onSelectFile(file ?? null);
+    },
+    [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}
+        elementsSelectable={true}
+      >
+        <Background color="#1e293b" gap={20} />
+        <Controls
+          style={{ background: "rgba(15,23,42,0.8)", border: "1px solid rgba(51,65,85,0.4)" }}
+        />
+        <MiniMap
+          style={{ background: "rgba(8,12,24,0.8)", border: "1px solid rgba(51,65,85,0.3)" }}
+          nodeColor={(n) => heatColor((n.data?.heat as number) ?? 0) + "88"}
+          maskColor="rgba(2,6,23,0.6)"
+        />
+      </ReactFlow>
+    </div>
+  );
+}

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

@@ -0,0 +1,125 @@
+"use client";
+
+import type { FileEntry } from "@/lib/prism/blue/explorer/types";
+import {
+  heatBadgeClass, heatBarColor,
+  covAvg, covBucket, COV_COLOR, COV_BG, COV_BORDER,
+} from "@/lib/prism/blue/explorer/heatHelpers";
+
+export type ColorMode = "heat" | "coverage" | "neutral";
+
+function splitPath(path: string) {
+  const parts = path.split("/");
+  const filename = parts.pop() ?? path;
+  const dir = parts.join("/");
+  return { filename, dir };
+}
+
+export function ExplorerFileCard({
+  file,
+  selected,
+  colorMode,
+  onClick,
+}: {
+  file: FileEntry;
+  selected: boolean;
+  colorMode: ColorMode;
+  onClick: () => void;
+}) {
+  const score = file.metrics.heatScore;
+  const { filename, dir } = splitPath(file.path);
+  const cov = file.coverage;
+  const avg = covAvg(cov);
+  const bucket = covBucket(avg);
+  const isNeutral = colorMode === "neutral";
+  const showCov = colorMode === "coverage";
+
+  let borderColor = selected ? "rgb(59,130,246)" : "transparent";
+  if (!selected && !isNeutral) {
+    borderColor = showCov ? COV_COLOR[bucket] : (score >= 50 ? "#f97316" : score >= 25 ? "#facc15" : "transparent");
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      className={`w-full text-left px-4 py-2.5 border-b border-slate-800/40 hover:bg-slate-800/30 transition-colors border-l-2 ${
+        selected ? "bg-slate-800/60" : ""
+      }`}
+      style={{ borderLeftColor: borderColor }}
+    >
+      <div className="flex items-center gap-2">
+        {/* Heat badge */}
+        <span className={`text-[10px] font-mono px-1.5 py-0.5 rounded shrink-0 ${
+          isNeutral ? "bg-slate-800/60 text-slate-500 border border-slate-700/40" : heatBadgeClass(score)
+        }`}>
+          {score.toFixed(1)}
+        </span>
+
+        {/* Coverage badge */}
+        {(showCov || isNeutral) && (
+          <span
+            className="text-[10px] font-mono px-1.5 py-0.5 rounded shrink-0 border"
+            style={isNeutral
+              ? { color: "#64748b", borderColor: "#334155", background: "rgba(30,41,59,0.4)" }
+              : { color: COV_COLOR[bucket], borderColor: COV_BORDER[bucket], background: COV_BG[bucket] }
+            }
+            title={cov
+              ? `${avg?.toFixed(1)}% avg · S:${cov.statements}% B:${cov.branches}% F:${cov.functions}% L:${cov.lines}%`
+              : "No coverage data"
+            }
+          >
+            🧪 {cov ? `${avg?.toFixed(0)}%` : "—"}
+          </span>
+        )}
+
+        <span className="text-sm text-slate-200 font-medium truncate flex-1 min-w-0">{filename}</span>
+
+        <div className="flex gap-1 shrink-0 items-center">
+          <span className="text-[9px] font-mono text-slate-600">{file.metrics.loc}L</span>
+          {file.hasUseClientDirective && <Tag label="client" color="purple" />}
+          {file.isApiRoute && <Tag label="api" color="green" />}
+          {file.isCyclic && <Tag label="cycle" color="red" />}
+          {(file.commitStats?.count_180d ?? 0) > 10 && (
+            <span title={`Hot: ${file.commitStats!.count_180d} commits/180d`} className="text-[10px]">🔥</span>
+          )}
+        </div>
+      </div>
+
+      {dir && (
+        <div className="text-[11px] text-slate-600 font-mono mt-0.5 truncate pl-[52px]">{dir}/</div>
+      )}
+
+      {/* Progress bar */}
+      <div className="mt-1.5 h-0.5 rounded-full bg-slate-800 overflow-hidden">
+        <div
+          className="h-full rounded-full"
+          style={isNeutral
+            ? { width: "100%", backgroundColor: "#1e293b" }
+            : showCov && cov
+              ? { width: `${Math.min(100, avg ?? 0)}%`, backgroundColor: COV_COLOR[bucket] }
+              : { width: `${Math.min(100, score)}%`, backgroundColor: heatBarColor(score) }
+          }
+        />
+      </div>
+    </button>
+  );
+}
+
+// Inline tag badge — avoids pulling in the maternity-copilot Tag component
+function Tag({ label, color }: { label: string; color: "purple" | "green" | "red" | "teal" }) {
+  const map = {
+    purple: { bg: "rgba(168,85,247,0.12)", text: "rgb(216,180,254)", border: "rgba(168,85,247,0.3)" },
+    green:  { bg: "rgba(34,197,94,0.12)",  text: "rgb(134,239,172)", border: "rgba(34,197,94,0.3)" },
+    red:    { bg: "rgba(239,68,68,0.12)",  text: "rgb(252,165,165)", border: "rgba(239,68,68,0.3)" },
+    teal:   { bg: "rgba(20,184,166,0.12)", text: "rgb(94,234,212)",  border: "rgba(20,184,166,0.3)" },
+  };
+  const s = map[color];
+  return (
+    <span
+      className="text-[9px] font-mono px-1 py-0.5 rounded"
+      style={{ background: s.bg, color: s.text, border: `1px solid ${s.border}` }}
+    >
+      {label}
+    </span>
+  );
+}

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

@@ -0,0 +1,30 @@
+"use client";
+// Pro-tier gate wrapper — client component that checks license and
+// either renders children or the ProGate upgrade wall.
+
+import type { ReactNode } from "react";
+import { PrismDock } from "@/components/PrismDock";
+import { useTargetPath } from "@/lib/prism/hooks/useTargetPath";
+import { useLicense } from "@/lib/prism/hooks/useLicense";
+import { ProGate } from "./ProGate";
+
+export function ExplorerGate({ children }: { children: ReactNode }) {
+  const { tq, ready } = useTargetPath();
+  const { isPro, ready: licReady } = useLicense(tq);
+
+  // While loading, show minimal shell to avoid layout shift
+  if (!ready || !licReady) {
+    return (
+      <div className="flex flex-col min-h-screen" style={{ background: "var(--bg-app)" }}>
+        <PrismDock />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen" style={{ background: "var(--bg-app)" }}>
+      <PrismDock />
+      {isPro ? children : <ProGate />}
+    </div>
+  );
+}

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

@@ -0,0 +1,70 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { BlueprintData } from "@/lib/prism/blue/explorer/types";
+import { RescanButton } from "./RescanButton";
+
+export const SUB_TABS = [
+  { href: "/blue/explorer",          label: "List",    exact: true  },
+  { href: "/blue/explorer/graph",    label: "Graph",   exact: false },
+  { href: "/blue/explorer/zones",    label: "Zones",   exact: false },
+  { href: "/blue/explorer/wire",     label: "Wire",    exact: false },
+  { href: "/blue/explorer/flow",     label: "Flow",    exact: false },
+  { href: "/blue/explorer/ask",      label: "Ask ✦",   exact: false },
+  { href: "/blue/explorer/refactor", label: "Refactor",exact: false },
+] as const;
+
+export function ExplorerNav({
+  target,
+  outdated,
+  onRescan,
+}: {
+  target: string;
+  outdated?: boolean;
+  onRescan: (data: BlueprintData) => void;
+}) {
+  const pathname = usePathname();
+
+  return (
+    <>
+      <div
+        className="flex items-center gap-1 px-4 py-2 border-b flex-shrink-0"
+        style={{ borderColor: "rgba(51,65,85,0.4)", background: "rgba(15,23,42,0.5)" }}
+      >
+        <span className="text-xs font-semibold text-blue-400 font-mono mr-3">BLUE / Explorer</span>
+        {SUB_TABS.map(({ href, label, exact }) => {
+          const isActive = exact
+            ? pathname === href
+            : pathname.startsWith(href) && !pathname.startsWith("/blue/explorer/file") && !pathname.startsWith("/blue/explorer/explain");
+          return (
+            <Link
+              key={href}
+              href={href}
+              className="text-xs px-3 py-1 rounded-md transition-colors"
+              style={{
+                background: isActive ? "rgba(59,130,246,0.15)" : "transparent",
+                color: isActive ? "rgb(96,165,250)" : "rgb(100,116,139)",
+                border: isActive ? "1px solid rgba(59,130,246,0.3)" : "1px solid transparent",
+              }}
+            >
+              {label}
+            </Link>
+          );
+        })}
+        <div className="flex-1" />
+        <RescanButton target={target} onComplete={onRescan} />
+      </div>
+
+      {outdated && (
+        <div
+          className="px-4 py-2 text-xs font-mono flex items-center gap-2 flex-shrink-0 border-b"
+          style={{ background: "rgba(120,53,15,0.2)", borderColor: "rgba(120,53,15,0.4)", color: "rgb(251,191,36)" }}
+        >
+          <span>⚠</span>
+          <span>Source files changed since last scan — run ↺ Rescan to update.</span>
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,188 @@
+"use client";
+
+import type { BlueprintData, FileEntry } from "@/lib/prism/blue/explorer/types";
+import { catIcon } from "@/lib/prism/blue/explorer/heatHelpers";
+import { SummaryCard, MetricRow } from "./primitives";
+
+export function ExplorerSummary({ data }: { data: BlueprintData }) {
+  const { summary, heatmap } = data;
+
+  const catCounts = data.files.reduce<Record<string, number>>((acc, f) => {
+    acc[f.category] = (acc[f.category] ?? 0) + 1;
+    return acc;
+  }, {});
+
+  const filesWithCov = data.files.filter((f) => f.coverage !== null).length;
+  const covPct = summary.fileCount > 0 ? Math.round((filesWithCov / summary.fileCount) * 100) : 0;
+
+  const cyclicPct = summary.fileCount > 0
+    ? Math.round((summary.cyclicFileCount / summary.fileCount) * 100)
+    : 0;
+
+  const avgHeat = data.files.length > 0
+    ? (data.files.reduce((s, f) => s + f.metrics.heatScore, 0) / data.files.length)
+    : 0;
+
+  return (
+    <div className="flex flex-col gap-4 p-4 overflow-y-auto">
+      <p className="text-[10px] text-slate-600 font-mono">
+        Generated {new Date(data.generatedAt).toLocaleString()}
+      </p>
+
+      {/* KPI grid */}
+      <div className="grid grid-cols-3 gap-2">
+        <SummaryCard label="Files"      value={summary.fileCount} />
+        <SummaryCard label="Components" value={summary.componentCount} />
+        <SummaryCard label="Routes"     value={summary.routesDiscovered.length} />
+        <SummaryCard label="Cyclic"     value={summary.cyclicFileCount} />
+        <SummaryCard label="Client"     value={summary.clientFileCount} />
+        <SummaryCard label="Server"     value={summary.serverFileCount} />
+      </div>
+
+      {/* Heat overview */}
+      <div className="flex flex-col gap-1">
+        <MetricRow label="Avg heat score"   value={avgHeat.toFixed(1)} />
+        <MetricRow label="Coverage files"   value={`${filesWithCov} / ${summary.fileCount} (${covPct}%)`} direction="up-good" />
+        <MetricRow label="Cyclic rate"      value={`${cyclicPct}%`} direction="down-good" />
+      </div>
+
+      {/* Categories */}
+      <div className="flex flex-col gap-1">
+        <p className="text-[10px] uppercase tracking-widest font-semibold text-slate-600 mb-1">Categories</p>
+        {Object.entries(catCounts)
+          .sort(([, a], [, b]) => b - a)
+          .map(([cat, count]) => (
+            <div key={cat} className="flex items-center justify-between bg-slate-900/60 px-2.5 py-1.5 rounded">
+              <span className="text-slate-500 text-xs">{catIcon(cat)} {cat}</span>
+              <span className="text-slate-300 font-mono font-medium text-xs">{count}</span>
+            </div>
+          ))}
+      </div>
+
+      {/* Hottest files from prismlens heatmap */}
+      {heatmap.hottestFiles.length > 0 && (
+        <div className="flex flex-col gap-1">
+          <p className="text-[10px] uppercase tracking-widest font-semibold text-slate-600 mb-1">Hottest files</p>
+          {heatmap.hottestFiles.slice(0, 6).map((f) => (
+            <div key={f.path} className="flex items-center gap-2 bg-slate-900/60 px-2.5 py-1.5 rounded">
+              <span className="text-[10px] font-mono text-orange-400 shrink-0">{f.heatScore.toFixed(0)}</span>
+              <span className="text-[11px] font-mono text-slate-400 truncate flex-1">{f.path.split("/").pop()}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Most imported */}
+      {summary.mostImportedFiles.length > 0 && (
+        <div className="flex flex-col gap-1">
+          <p className="text-[10px] uppercase tracking-widest font-semibold text-slate-600 mb-1">Most imported</p>
+          {summary.mostImportedFiles.slice(0, 5).map((f) => (
+            <div key={f.path} className="flex items-center gap-2 bg-slate-900/60 px-2.5 py-1.5 rounded">
+              <span className="text-[10px] font-mono text-blue-400 shrink-0">{f.count}×</span>
+              <span className="text-[11px] font-mono text-slate-400 truncate flex-1">{f.path.split("/").pop()}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ExplorerFileInspector({ file }: { file: FileEntry }) {
+  const cov = file.coverage;
+  return (
+    <div className="flex flex-col gap-4 p-4 overflow-y-auto h-full">
+      <div>
+        <p className="text-xs font-semibold text-slate-200 font-mono break-all">{file.path}</p>
+        <div className="flex gap-2 mt-1 flex-wrap">
+          <span className="text-[10px] font-mono text-slate-500">{file.metrics.loc} LOC</span>
+          <span className="text-[10px] font-mono text-slate-500">heat {file.metrics.heatScore.toFixed(1)}</span>
+          <span className="text-[10px] font-mono text-slate-500">{file.category}</span>
+          {file.hasUseClientDirective && <span className="text-[10px] text-purple-400">client</span>}
+          {file.isApiRoute && <span className="text-[10px] text-green-400">api</span>}
+          {file.isCyclic && <span className="text-[10px] text-red-400">cyclic</span>}
+        </div>
+      </div>
+
+      {file.docSummary && (
+        <div className="bg-slate-900/60 rounded px-3 py-2">
+          <p className="text-xs text-slate-400 leading-relaxed">{file.docSummary}</p>
+        </div>
+      )}
+
+      {cov && (
+        <div>
+          <p className="text-[10px] uppercase tracking-widest font-semibold text-slate-600 mb-1">Coverage</p>
+          <div className="grid grid-cols-2 gap-1">
+            <MetricRow label="Statements" value={`${cov.statements.toFixed(0)}%`} />
+            <MetricRow label="Branches"   value={`${cov.branches.toFixed(0)}%`} />
+            <MetricRow label="Functions"  value={`${cov.functions.toFixed(0)}%`} />
+            <MetricRow label="Lines"      value={`${cov.lines.toFixed(0)}%`} />
+          </div>
+        </div>
+      )}
+
+      <div>
+        <p className="text-[10px] uppercase tracking-widest font-semibold text-slate-600 mb-1">Metrics</p>
+        <div className="flex flex-col gap-1">
+          <MetricRow label="Incoming deps" value={file.metrics.incomingRuntimeDeps} />
+          <MetricRow label="Outgoing deps" value={file.metrics.outgoingRuntimeDeps} />
+          {file.metrics.complexityScore !== null && (
+            <MetricRow label="Complexity" value={file.metrics.complexityScore.toFixed(1)} />
+          )}
+          {file.stateComplexity && (
+            <MetricRow label="State hooks" value={file.stateComplexity.hookCounts.total} />
+          )}
+        </div>
+      </div>
+
+      {file.exports.length > 0 && (
+        <div>
+          <p className="text-[10px] uppercase tracking-widest font-semibold text-slate-600 mb-1">Exports</p>
+          <div className="flex flex-col gap-0.5">
+            {file.exports.slice(0, 8).map((e) => (
+              <span key={e} className="text-[11px] font-mono text-slate-400 truncate">{e}</span>
+            ))}
+            {file.exports.length > 8 && (
+              <span className="text-[10px] text-slate-600">+{file.exports.length - 8} more</span>
+            )}
+          </div>
+        </div>
+      )}
+
+      {file.explainability.symbolSummaries.length > 0 && (
+        <div>
+          <p className="text-[10px] uppercase tracking-widest font-semibold text-slate-600 mb-1">Symbols</p>
+          <div className="flex flex-col gap-1">
+            {file.explainability.symbolSummaries.slice(0, 6).map((s) => (
+              <div key={s.name} className="bg-slate-900/60 rounded px-2 py-1">
+                <div className="flex items-center gap-1.5">
+                  <span className="text-[9px] font-mono text-slate-500 uppercase">{s.kind}</span>
+                  <span className="text-[11px] font-mono text-slate-200">{s.name}</span>
+                  {s.exported && <span className="text-[9px] text-blue-400">↑</span>}
+                </div>
+                {s.doc && <p className="text-[10px] text-slate-500 mt-0.5 truncate">{s.doc}</p>}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {file.internalImports.length > 0 && (
+        <div>
+          <p className="text-[10px] uppercase tracking-widest font-semibold text-slate-600 mb-1">
+            Imports ({file.internalImports.length} internal)
+          </p>
+          <div className="flex flex-col gap-0.5 max-h-32 overflow-y-auto">
+            {file.internalImports.slice(0, 10).map((imp) => (
+              <span key={imp} className="text-[10px] font-mono text-slate-500 truncate">{imp}</span>
+            ))}
+            {file.internalImports.length > 10 && (
+              <span className="text-[9px] text-slate-600">+{file.internalImports.length - 10} more</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}