prism0x2a 0.7.2 → 0.11.0

package/.next/standalone/app/blue/explorer/graph/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { useExplorerBlueprint } from "@/lib/prism/blue/explorer/useExplorerBlueprint";
+import { ExplorerNav } from "@/components/blue-explorer/ExplorerNav";
+import { ExplorerFileInspector } from "@/components/blue-explorer/ExplorerSummary";
+import { BlueprintGraph } from "@/components/blue-explorer/BlueprintGraph";
+import { catIcon } from "@/lib/prism/blue/explorer/heatHelpers";
+import type { FileEntry } from "@/lib/prism/blue/explorer/types";
+
+export default function ExplorerGraphPage() {
+  const { data, setData, loading, error, outdated, setOutdated, target } = useExplorerBlueprint();
+  const [selected, setSelected] = useState<FileEntry | null>(null);
+  const [catFilter, setCatFilter] = useState("all");
+
+  const categories = useMemo(() => {
+    if (!data) return [];
+    return ["all", ...Array.from(new Set(data.files.map((f) => f.category))).sort()];
+  }, [data]);
+
+  function handleRescan(d: typeof data) {
+    if (d) { setData(d); setOutdated(false); }
+  }
+
+  return (
+    <main className="flex flex-col flex-1 pt-16 h-screen overflow-hidden">
+      <ExplorerNav target={target} outdated={outdated} onRescan={handleRescan} />
+
+      {error && (
+        <div className="px-4 py-2 text-xs text-red-400 font-mono bg-red-950/30 border-b border-red-900/30 flex-shrink-0">
+          {error}
+        </div>
+      )}
+
+      {loading && (
+        <div className="flex-1 flex items-center justify-center text-slate-500 text-sm">
+          Loading blueprint…
+        </div>
+      )}
+
+      {!loading && !data && (
+        <div className="flex-1 flex flex-col items-center justify-center gap-4 text-center px-6">
+          <span className="text-5xl">🕸️</span>
+          <h2 className="text-lg font-semibold text-slate-300">No blueprint yet</h2>
+          <p className="text-sm text-slate-500 max-w-sm">
+            Run ↺ Rescan above to generate a blueprint.
+          </p>
+        </div>
+      )}
+
+      {!loading && data && (
+        <div className="flex flex-1 overflow-hidden">
+          <div className="flex flex-col flex-1 overflow-hidden">
+            <div
+              className="flex items-center gap-2 px-3 py-2 border-b flex-shrink-0"
+              style={{ borderColor: "rgba(51,65,85,0.3)", background: "rgba(10,16,30,0.5)" }}
+            >
+              <span className="text-[10px] text-slate-500 font-mono">
+                {data.nodes.length} nodes · {data.edges.length} edges
+              </span>
+              <select
+                value={catFilter}
+                onChange={(e) => setCatFilter(e.target.value)}
+                className="text-xs px-2 py-0.5 rounded bg-slate-900 border border-slate-700/60 text-slate-400 outline-none ml-auto"
+              >
+                {categories.map((c) => (
+                  <option key={c} value={c}>{c === "all" ? "All categories" : `${catIcon(c)} ${c}`}</option>
+                ))}
+              </select>
+              <span className="text-[10px] text-slate-600 font-mono">Click node → inspector</span>
+            </div>
+            <div className="flex-1 overflow-hidden">
+              <BlueprintGraph data={data} catFilter={catFilter} onSelectFile={setSelected} />
+            </div>
+          </div>
+
+          {selected && (
+            <div
+              className="w-72 flex-shrink-0 border-l overflow-y-auto"
+              style={{ borderColor: "rgba(51,65,85,0.3)", background: "rgba(8,12,24,0.7)" }}
+            >
+              <div
+                className="flex items-center justify-between px-4 py-2 border-b flex-shrink-0"
+                style={{ borderColor: "rgba(51,65,85,0.3)" }}
+              >
+                <span className="text-[10px] uppercase tracking-widest text-slate-500 font-semibold">Inspector</span>
+                <button onClick={() => setSelected(null)} className="text-slate-600 hover:text-slate-400 text-xs">✕</button>
+              </div>
+              <ExplorerFileInspector file={selected} />
+            </div>
+          )}
+        </div>
+      )}
+    </main>
+  );
+}

package/.next/standalone/app/blue/explorer/layout.tsx

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import { ExplorerGate } from "@/components/blue-explorer/ExplorerGate";
+
+export const metadata = { title: "Blueprint Explorer — prism0x2A" };
+
+export default function ExplorerLayout({ children }: { children: ReactNode }) {
+  return <ExplorerGate>{children}</ExplorerGate>;
+}

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

@@ -0,0 +1,219 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import Link from "next/link";
+import { useTargetPath } from "@/lib/prism/hooks/useTargetPath";
+import { ExplorerFileCard, type ColorMode } from "@/components/blue-explorer/ExplorerFileCard";
+import { ExplorerSummary, ExplorerFileInspector } from "@/components/blue-explorer/ExplorerSummary";
+import { ExplorerNav } from "@/components/blue-explorer/ExplorerNav";
+import type { BlueprintData, FileEntry } from "@/lib/prism/blue/explorer/types";
+import { catIcon } from "@/lib/prism/blue/explorer/heatHelpers";
+
+type SortKey = "heat" | "loc" | "name" | "deps";
+
+export default function ExplorerListPage() {
+  const { tq, ready } = useTargetPath();
+  const target = tq.slice(1);
+
+  const [data, setData]           = useState<BlueprintData | null>(null);
+  const [loading, setLoading]     = useState(false);
+  const [error, setError]         = useState<string | null>(null);
+  const [outdated, setOutdated]   = useState(false);
+
+  const [selected, setSelected]   = useState<FileEntry | null>(null);
+  const [colorMode, setColorMode] = useState<ColorMode>("heat");
+  const [sortKey, setSortKey]     = useState<SortKey>("heat");
+  const [search, setSearch]       = useState("");
+  const [catFilter, setCatFilter] = useState<string>("all");
+
+  useEffect(() => {
+    if (!ready) return;
+    setLoading(true);
+    fetch(`/api/blue/explorer?target=${encodeURIComponent(target)}`)
+      .then((r) => r.json())
+      .then(({ data: d }) => {
+        setData(d ?? null);
+        if (d?.generatedAt) {
+          fetch(
+            `/api/blue/explorer/outdated?target=${encodeURIComponent(target)}&since=${encodeURIComponent(d.generatedAt)}`
+          )
+            .then((r) => r.json())
+            .then(({ outdated: o }) => setOutdated(!!o))
+            .catch(() => {});
+        }
+      })
+      .catch(() => setError("Failed to load blueprint data"))
+      .finally(() => setLoading(false));
+  }, [ready]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function handleRescan(d: typeof data) {
+    if (d) { setData(d); setOutdated(false); }
+  }
+
+  const categories = useMemo(() => {
+    if (!data) return [];
+    return ["all", ...Array.from(new Set(data.files.map((f) => f.category))).sort()];
+  }, [data]);
+
+  const filteredFiles = useMemo(() => {
+    if (!data) return [];
+    let files = data.files;
+    if (catFilter !== "all") files = files.filter((f) => f.category === catFilter);
+    if (search.trim()) {
+      const q = search.toLowerCase();
+      files = files.filter((f) => f.path.toLowerCase().includes(q));
+    }
+    return [...files].sort((a, b) => {
+      if (sortKey === "heat") return b.metrics.heatScore - a.metrics.heatScore;
+      if (sortKey === "loc")  return b.metrics.loc - a.metrics.loc;
+      if (sortKey === "name") return a.path.localeCompare(b.path);
+      if (sortKey === "deps") return b.metrics.outgoingRuntimeDeps - a.metrics.outgoingRuntimeDeps;
+      return 0;
+    });
+  }, [data, catFilter, search, sortKey]);
+
+  return (
+    <main className="flex flex-col flex-1 pt-16 h-screen overflow-hidden">
+      <ExplorerNav target={target} outdated={outdated} onRescan={handleRescan} />
+
+      {error && (
+        <div className="px-4 py-2 text-xs text-red-400 font-mono bg-red-950/30 border-b border-red-900/30 flex-shrink-0">
+          {error}
+        </div>
+      )}
+
+      {/* Content area */}
+      {loading && (
+        <div className="flex-1 flex items-center justify-center text-slate-500 text-sm">
+          Loading blueprint data…
+        </div>
+      )}
+
+      {!loading && !data && (
+        <div className="flex-1 flex flex-col items-center justify-center gap-4 text-center px-6">
+          <span className="text-5xl">📐</span>
+          <h2 className="text-lg font-semibold text-slate-300">No blueprint yet</h2>
+          <p className="text-sm text-slate-500 max-w-sm">
+            Blueprint generation requires{" "}
+            <span className="font-mono text-blue-400">prismlens v0.3.0</span>{" "}
+            (coming soon). Once available, click Generate above.
+          </p>
+          <p className="text-xs text-slate-600">
+            Or place a <span className="font-mono">blueprint.json</span> in{" "}
+            <span className="font-mono text-slate-500">.prism/</span> manually.
+          </p>
+        </div>
+      )}
+
+      {!loading && data && (
+        <div className="flex flex-1 overflow-hidden">
+          {/* Left: summary panel */}
+          <div
+            className="w-64 flex-shrink-0 overflow-y-auto border-r"
+            style={{ borderColor: "rgba(51,65,85,0.3)", background: "rgba(8,15,30,0.6)" }}
+          >
+            <ExplorerSummary data={data} />
+          </div>
+
+          {/* Center: file list */}
+          <div className="flex flex-col flex-1 overflow-hidden">
+            {/* Toolbar */}
+            <div
+              className="flex items-center gap-2 px-3 py-2 border-b flex-shrink-0"
+              style={{ borderColor: "rgba(51,65,85,0.3)", background: "rgba(10,16,30,0.5)" }}
+            >
+              {/* Search */}
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Filter files…"
+                className="text-xs px-2.5 py-1 rounded bg-slate-900 border border-slate-700/60 text-slate-300 placeholder:text-slate-600 outline-none focus:border-blue-500/50 w-40"
+              />
+              {/* Category filter */}
+              <select
+                value={catFilter}
+                onChange={(e) => setCatFilter(e.target.value)}
+                className="text-xs px-2 py-1 rounded bg-slate-900 border border-slate-700/60 text-slate-400 outline-none"
+              >
+                {categories.map((c) => (
+                  <option key={c} value={c}>{c === "all" ? "All categories" : `${catIcon(c)} ${c}`}</option>
+                ))}
+              </select>
+              {/* Color mode */}
+              <div className="flex gap-1 ml-1">
+                {(["heat", "coverage", "neutral"] as ColorMode[]).map((m) => (
+                  <button
+                    key={m}
+                    onClick={() => setColorMode(m)}
+                    className="text-[10px] px-2 py-0.5 rounded capitalize"
+                    style={{
+                      background: colorMode === m ? "rgba(59,130,246,0.2)" : "rgba(30,41,59,0.5)",
+                      color: colorMode === m ? "rgb(96,165,250)" : "rgb(100,116,139)",
+                      border: `1px solid ${colorMode === m ? "rgba(59,130,246,0.3)" : "rgba(51,65,85,0.3)"}`,
+                    }}
+                  >
+                    {m}
+                  </button>
+                ))}
+              </div>
+              {/* Sort */}
+              <select
+                value={sortKey}
+                onChange={(e) => setSortKey(e.target.value as SortKey)}
+                className="text-xs px-2 py-1 rounded bg-slate-900 border border-slate-700/60 text-slate-400 outline-none ml-auto"
+              >
+                <option value="heat">Sort: heat</option>
+                <option value="loc">Sort: LOC</option>
+                <option value="name">Sort: name</option>
+                <option value="deps">Sort: deps</option>
+              </select>
+              <span className="text-[10px] text-slate-600 font-mono">{filteredFiles.length} files</span>
+            </div>
+
+            {/* File list */}
+            <div className="flex-1 overflow-y-auto">
+              {filteredFiles.map((file) => (
+                <ExplorerFileCard
+                  key={file.id}
+                  file={file}
+                  selected={selected?.id === file.id}
+                  colorMode={colorMode}
+                  onClick={() => setSelected(selected?.id === file.id ? null : file)}
+                />
+              ))}
+              {filteredFiles.length === 0 && (
+                <div className="p-8 text-center text-slate-600 text-sm">No files match your filter.</div>
+              )}
+            </div>
+          </div>
+
+          {/* Right: inspector panel */}
+          {selected && (
+            <div
+              className="w-72 flex-shrink-0 border-l overflow-y-auto"
+              style={{ borderColor: "rgba(51,65,85,0.3)", background: "rgba(8,12,24,0.7)" }}
+            >
+              <div
+                className="flex items-center justify-between px-4 py-2 border-b flex-shrink-0"
+                style={{ borderColor: "rgba(51,65,85,0.3)" }}
+              >
+                <span className="text-[10px] uppercase tracking-widest text-slate-500 font-semibold">Inspector</span>
+                <div className="flex gap-2 items-center">
+                  <Link
+                    href={`/blue/explorer/file/${encodeURIComponent(selected.path)}`}
+                    className="text-[10px] text-blue-400 hover:text-blue-300 transition-colors"
+                  >
+                    deep-dive →
+                  </Link>
+                  <button onClick={() => setSelected(null)} className="text-slate-600 hover:text-slate-400 text-xs">✕</button>
+                </div>
+              </div>
+              <ExplorerFileInspector file={selected} />
+            </div>
+          )}
+        </div>
+      )}
+    </main>
+  );
+}

package/.next/standalone/app/blue/explorer/refactor/page.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { useExplorerBlueprint } from "@/lib/prism/blue/explorer/useExplorerBlueprint";
+import { ExplorerNav } from "@/components/blue-explorer/ExplorerNav";
+import type { BlueprintData } from "@/lib/prism/blue/explorer/types";
+
+type SuggestionKind = "cycle" | "coverage" | "hotspot" | "complexity";
+type Severity = "critical" | "high" | "medium" | "low";
+
+interface Suggestion {
+  id: string;
+  kind: SuggestionKind;
+  severity: Severity;
+  title: string;
+  description: string;
+  files: string[];
+}
+
+const KIND_ICON: Record<SuggestionKind, string> = {
+  cycle:      "↺",
+  coverage:   "🧪",
+  hotspot:    "🔥",
+  complexity: "⚙",
+};
+
+const SEVERITY_COLOR: Record<Severity, string> = {
+  critical: "rgb(248,113,113)",
+  high:     "rgb(251,146,60)",
+  medium:   "rgb(250,204,21)",
+  low:      "rgb(100,116,139)",
+};
+
+const SEVERITY_BG: Record<Severity, string> = {
+  critical: "rgba(239,68,68,0.1)",
+  high:     "rgba(251,146,60,0.1)",
+  medium:   "rgba(250,204,21,0.08)",
+  low:      "rgba(51,65,85,0.3)",
+};
+
+export default function ExplorerRefactorPage() {
+  const { data, setData, loading, outdated, setOutdated, target } = useExplorerBlueprint();
+  const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
+  const [fetching, setFetching] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [filter, setFilter] = useState<"all" | SuggestionKind>("all");
+  const [derived, setDerived] = useState(false);
+
+  function handleRescan(d: typeof data) {
+    if (d) { setData(d); setOutdated(false); }
+  }
+
+  async function loadSuggestions(tgt: string) {
+    setFetching(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/blue/explorer/refactor?target=${encodeURIComponent(tgt)}`);
+      const json = await res.json();
+      if (!res.ok) setError(json.error ?? "Failed");
+      else {
+        setSuggestions(json.suggestions ?? []);
+        setDerived(!!json.derived);
+      }
+    } catch {
+      setError("Network error");
+    } finally {
+      setFetching(false);
+    }
+  }
+
+  useEffect(() => {
+    if (target && data) loadSuggestions(target);
+  }, [target, data]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const filtered = filter === "all"
+    ? suggestions
+    : suggestions.filter((s) => s.kind === filter);
+
+  const counts: Partial<Record<SuggestionKind | "all", number>> = {
+    all: suggestions.length,
+    cycle:    suggestions.filter((s) => s.kind === "cycle").length,
+    hotspot:  suggestions.filter((s) => s.kind === "hotspot").length,
+    coverage: suggestions.filter((s) => s.kind === "coverage").length,
+    complexity: suggestions.filter((s) => s.kind === "complexity").length,
+  };
+
+  return (
+    <main className="flex flex-col flex-1 pt-16 h-screen overflow-hidden">
+      <ExplorerNav target={target} outdated={outdated} onRescan={handleRescan} />
+
+      {error && (
+        <div className="px-4 py-2 text-xs text-red-400 font-mono bg-red-950/30 border-b border-red-900/30 flex-shrink-0">
+          {error}
+        </div>
+      )}
+
+      {(loading || fetching) && (
+        <div className="flex-1 flex items-center justify-center text-slate-500 text-sm">
+          {loading ? "Loading blueprint…" : "Analysing refactor opportunities…"}
+        </div>
+      )}
+
+      {!loading && !data && (
+        <div className="flex-1 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 blueprint yet. Run ↺ Rescan first.</p>
+        </div>
+      )}
+
+      {!loading && !fetching && data && (
+        <div className="flex flex-col flex-1 overflow-hidden">
+          {/* Toolbar */}
+          <div
+            className="flex items-center gap-2 px-4 py-2 border-b flex-shrink-0"
+            style={{ borderColor: "rgba(51,65,85,0.3)", background: "rgba(10,16,30,0.5)" }}
+          >
+            {(["all", "cycle", "hotspot", "coverage"] as const).map((k) => (
+              <button
+                key={k}
+                onClick={() => setFilter(k)}
+                className="text-[10px] px-2.5 py-1 rounded capitalize flex items-center gap-1"
+                style={{
+                  background: filter === k ? "rgba(59,130,246,0.15)" : "rgba(15,23,42,0.4)",
+                  color: filter === k ? "rgb(96,165,250)" : "rgb(100,116,139)",
+                  border: `1px solid ${filter === k ? "rgba(59,130,246,0.3)" : "rgba(51,65,85,0.3)"}`,
+                }}
+              >
+                {k !== "all" && <span>{KIND_ICON[k]}</span>}
+                {k} {counts[k] !== undefined && counts[k]! > 0 && <span className="opacity-60">({counts[k]})</span>}
+              </button>
+            ))}
+            <div className="flex-1" />
+            {derived && (
+              <span className="text-[10px] font-mono text-slate-600">
+                ✦ Derived from blueprint · AI suggestions available with prismlens@0.4.0
+              </span>
+            )}
+          </div>
+
+          {/* Suggestions list */}
+          <div className="flex-1 overflow-y-auto p-4">
+            {filtered.length === 0 && !fetching && (
+              <div className="flex flex-col items-center justify-center h-full gap-3 text-center">
+                <span className="text-4xl">✓</span>
+                <p className="text-sm text-slate-400">No {filter !== "all" ? filter : ""} issues found.</p>
+              </div>
+            )}
+
+            <div className="flex flex-col gap-3 max-w-3xl mx-auto">
+              {filtered.map((s) => (
+                <div
+                  key={s.id}
+                  className="flex flex-col gap-3 p-4 rounded-xl"
+                  style={{
+                    background: SEVERITY_BG[s.severity],
+                    border: `1px solid ${SEVERITY_COLOR[s.severity]}33`,
+                  }}
+                >
+                  <div className="flex items-start gap-3">
+                    <span
+                      className="text-sm w-7 h-7 rounded flex items-center justify-center flex-shrink-0"
+                      style={{ background: `${SEVERITY_COLOR[s.severity]}18`, color: SEVERITY_COLOR[s.severity] }}
+                    >
+                      {KIND_ICON[s.kind]}
+                    </span>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span
+                          className="text-[9px] font-mono font-bold px-1.5 py-0.5 rounded uppercase"
+                          style={{ background: `${SEVERITY_COLOR[s.severity]}18`, color: SEVERITY_COLOR[s.severity] }}
+                        >
+                          {s.severity}
+                        </span>
+                        <span className="text-xs font-semibold text-slate-200">{s.title}</span>
+                      </div>
+                      <p className="text-xs text-slate-500 mt-1 leading-relaxed">{s.description}</p>
+                    </div>
+                  </div>
+
+                  {s.files.length > 0 && (
+                    <div className="flex flex-wrap gap-1 pl-10">
+                      {s.files.slice(0, 4).map((f) => (
+                        <Link
+                          key={f}
+                          href={`/blue/explorer/file/${encodeURIComponent(f)}`}
+                          className="text-[10px] font-mono px-2 py-0.5 rounded hover:opacity-80 transition-opacity"
+                          style={{ background: "rgba(15,23,42,0.7)", color: "rgb(96,165,250)", border: "1px solid rgba(59,130,246,0.2)" }}
+                        >
+                          {f.split("/").pop()}
+                        </Link>
+                      ))}
+                      {s.files.length > 4 && (
+                        <span className="text-[9px] text-slate-600 font-mono self-center">+{s.files.length - 4} more</span>
+                      )}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+}

package/.next/standalone/app/blue/explorer/wire/page.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { useExplorerBlueprint } from "@/lib/prism/blue/explorer/useExplorerBlueprint";
+import { ExplorerNav } from "@/components/blue-explorer/ExplorerNav";
+import { ExplorerFileInspector } from "@/components/blue-explorer/ExplorerSummary";
+import { WireView } from "@/components/blue-explorer/WireView";
+import type { FileEntry } from "@/lib/prism/blue/explorer/types";
+
+export default function ExplorerWirePage() {
+  const { data, setData, loading, error, outdated, setOutdated, target } = useExplorerBlueprint();
+  const [selected, setSelected] = useState<FileEntry | null>(null);
+
+  function handleRescan(d: typeof data) {
+    if (d) { setData(d); setOutdated(false); }
+  }
+
+  return (
+    <main className="flex flex-col flex-1 pt-16 h-screen overflow-hidden">
+      <ExplorerNav target={target} outdated={outdated} onRescan={handleRescan} />
+
+      {error && (
+        <div className="px-4 py-2 text-xs text-red-400 font-mono bg-red-950/30 border-b border-red-900/30 flex-shrink-0">
+          {error}
+        </div>
+      )}
+
+      {loading && (
+        <div className="flex-1 flex items-center justify-center text-slate-500 text-sm">
+          Loading blueprint…
+        </div>
+      )}
+
+      {!loading && !data && (
+        <div className="flex-1 flex flex-col items-center justify-center gap-4 text-center px-6">
+          <span className="text-5xl">🔌</span>
+          <h2 className="text-lg font-semibold text-slate-300">No blueprint yet</h2>
+          <p className="text-sm text-slate-500 max-w-sm">
+            Run ↺ Rescan above to generate a blueprint.
+          </p>
+        </div>
+      )}
+
+      {!loading && data && (
+        <div className="flex flex-1 overflow-hidden">
+          <div className="flex-1 overflow-hidden">
+            <WireView data={data} onSelectFile={setSelected} />
+          </div>
+
+          {selected && (
+            <div
+              className="w-72 flex-shrink-0 border-l overflow-y-auto"
+              style={{ borderColor: "rgba(51,65,85,0.3)", background: "rgba(8,12,24,0.7)" }}
+            >
+              <div
+                className="flex items-center justify-between px-4 py-2 border-b flex-shrink-0"
+                style={{ borderColor: "rgba(51,65,85,0.3)" }}
+              >
+                <span className="text-[10px] uppercase tracking-widest text-slate-500 font-semibold">Inspector</span>
+                <button onClick={() => setSelected(null)} className="text-slate-600 hover:text-slate-400 text-xs">✕</button>
+              </div>
+              <ExplorerFileInspector file={selected} />
+            </div>
+          )}
+        </div>
+      )}
+    </main>
+  );
+}

package/.next/standalone/app/blue/explorer/zones/page.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { useExplorerBlueprint } from "@/lib/prism/blue/explorer/useExplorerBlueprint";
+import { ExplorerNav } from "@/components/blue-explorer/ExplorerNav";
+import { ExplorerFileInspector } from "@/components/blue-explorer/ExplorerSummary";
+import { ZonesView } from "@/components/blue-explorer/ZonesView";
+import type { FileEntry } from "@/lib/prism/blue/explorer/types";
+
+export default function ExplorerZonesPage() {
+  const { data, setData, loading, error, outdated, setOutdated, target } = useExplorerBlueprint();
+  const [selected, setSelected] = useState<FileEntry | null>(null);
+
+  function handleRescan(d: typeof data) {
+    if (d) { setData(d); setOutdated(false); }
+  }
+
+  return (
+    <main className="flex flex-col flex-1 pt-16 h-screen overflow-hidden">
+      <ExplorerNav target={target} outdated={outdated} onRescan={handleRescan} />
+
+      {error && (
+        <div className="px-4 py-2 text-xs text-red-400 font-mono bg-red-950/30 border-b border-red-900/30 flex-shrink-0">
+          {error}
+        </div>
+      )}
+
+      {loading && (
+        <div className="flex-1 flex items-center justify-center text-slate-500 text-sm">
+          Loading blueprint…
+        </div>
+      )}
+
+      {!loading && !data && (
+        <div className="flex-1 flex flex-col items-center justify-center gap-4 text-center px-6">
+          <span className="text-5xl">🗺️</span>
+          <h2 className="text-lg font-semibold text-slate-300">No blueprint yet</h2>
+          <p className="text-sm text-slate-500 max-w-sm">
+            Run ↺ Rescan above to generate a blueprint.
+          </p>
+        </div>
+      )}
+
+      {!loading && data && (
+        <div className="flex flex-1 overflow-hidden">
+          <div className="flex-1 overflow-hidden">
+            <ZonesView data={data} onSelectFile={setSelected} />
+          </div>
+
+          {selected && (
+            <div
+              className="w-72 flex-shrink-0 border-l overflow-y-auto"
+              style={{ borderColor: "rgba(51,65,85,0.3)", background: "rgba(8,12,24,0.7)" }}
+            >
+              <div
+                className="flex items-center justify-between px-4 py-2 border-b flex-shrink-0"
+                style={{ borderColor: "rgba(51,65,85,0.3)" }}
+              >
+                <span className="text-[10px] uppercase tracking-widest text-slate-500 font-semibold">Inspector</span>
+                <button onClick={() => setSelected(null)} className="text-slate-600 hover:text-slate-400 text-xs">✕</button>
+              </div>
+              <ExplorerFileInspector file={selected} />
+            </div>
+          )}
+        </div>
+      )}
+    </main>
+  );
+}