prism0x2a 0.7.2 → 0.11.0

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

@@ -0,0 +1,219 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useExplorerBlueprint } from "@/lib/prism/blue/explorer/useExplorerBlueprint";
+import { ExplorerNav } from "@/components/blue-explorer/ExplorerNav";
+import type { BlueprintData } from "@/lib/prism/blue/explorer/types";
+
+interface Message {
+  role: "user" | "assistant";
+  text: string;
+  referencedFiles?: string[];
+  pending?: boolean;
+}
+
+export default function ExplorerAskPage() {
+  const { data, setData, loading, outdated, setOutdated, target } = useExplorerBlueprint();
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState("");
+  const [sending, setSending] = useState(false);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  function handleRescan(d: typeof data) {
+    if (d) { setData(d); setOutdated(false); }
+  }
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  async function send() {
+    const question = input.trim();
+    if (!question || sending) return;
+
+    setInput("");
+    setMessages((prev) => [...prev, { role: "user", text: question }]);
+    setSending(true);
+
+    try {
+      const res = await fetch("/api/blue/explorer/ask", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ target, question }),
+      });
+      const json = await res.json();
+      if (!res.ok) {
+        setMessages((prev) => [
+          ...prev,
+          { role: "assistant", text: `**Error:** ${json.error ?? "Unknown error"}` },
+        ]);
+      } else {
+        setMessages((prev) => [
+          ...prev,
+          {
+            role: "assistant",
+            text: json.answer.text,
+            referencedFiles: json.answer.referencedFiles,
+            pending: json.answer.pending,
+          },
+        ]);
+      }
+    } catch {
+      setMessages((prev) => [
+        ...prev,
+        { role: "assistant", text: "**Network error** — could not reach the API." },
+      ]);
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <main className="flex flex-col flex-1 pt-16 h-screen overflow-hidden">
+      <ExplorerNav target={target} outdated={outdated} onRescan={handleRescan} />
+
+      {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-3 text-center px-6">
+          <span className="text-4xl">💬</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 to generate a blueprint before using Architect Mode.
+          </p>
+        </div>
+      )}
+
+      {!loading && data && (
+        <div className="flex flex-col flex-1 overflow-hidden">
+          {/* Context strip */}
+          <div
+            className="px-4 py-2 text-[10px] font-mono text-slate-600 border-b flex items-center gap-3 flex-shrink-0"
+            style={{ borderColor: "rgba(51,65,85,0.3)", background: "rgba(8,12,24,0.5)" }}
+          >
+            <span>Blueprint: <span className="text-slate-500">{data.summary.fileCount} files</span></span>
+            <span>·</span>
+            <span>Scanned: <span className="text-slate-500">{new Date(data.generatedAt).toLocaleString()}</span></span>
+            {data.analysis.hasCycles && (
+              <>
+                <span>·</span>
+                <span className="text-red-400">{data.analysis.cycleCount} cycle{data.analysis.cycleCount !== 1 ? "s" : ""}</span>
+              </>
+            )}
+          </div>
+
+          {/* Message list */}
+          <div className="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-4 max-w-3xl mx-auto w-full">
+            {messages.length === 0 && (
+              <div className="flex flex-col gap-3 pt-8">
+                <p className="text-xs uppercase tracking-widest text-slate-600 font-semibold">Suggested questions</p>
+                {[
+                  "Where are the highest-risk files in this codebase?",
+                  "What import cycles exist and how should I fix them?",
+                  "Which modules have the lowest test coverage?",
+                  "Where should I add a new authentication layer?",
+                ].map((q) => (
+                  <button
+                    key={q}
+                    onClick={() => setInput(q)}
+                    className="text-left text-xs px-3 py-2 rounded-lg text-slate-400 hover:text-slate-200 transition-colors"
+                    style={{ background: "rgba(15,23,42,0.5)", border: "1px solid rgba(51,65,85,0.35)" }}
+                  >
+                    {q}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {messages.map((msg, i) => (
+              <div key={i} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start gap-2 items-start"}`}>
+                {msg.role === "assistant" && (
+                  <span
+                    className="w-5 h-5 rounded flex items-center justify-center text-[9px] font-bold flex-shrink-0 mt-0.5"
+                    style={{ background: "rgba(167,139,250,0.15)", color: "rgb(167,139,250)" }}
+                  >✦</span>
+                )}
+                <div
+                  className="max-w-xl rounded-xl px-4 py-3 text-xs leading-relaxed whitespace-pre-wrap"
+                  style={msg.role === "user"
+                    ? { background: "rgba(59,130,246,0.12)", border: "1px solid rgba(59,130,246,0.25)", color: "rgb(203,213,225)", borderTopRightRadius: 4 }
+                    : { background: "rgba(15,23,42,0.8)", border: "1px solid rgba(51,65,85,0.4)", color: "rgb(148,163,184)", borderTopLeftRadius: 4 }
+                  }
+                >
+                  {msg.text}
+                  {msg.pending && (
+                    <p className="mt-2 text-[10px]" style={{ color: "rgba(167,139,250,0.6)" }}>
+                      ✦ prismlens@0.4.0 not yet published — response is a preview.
+                    </p>
+                  )}
+                  {msg.referencedFiles && msg.referencedFiles.length > 0 && (
+                    <div className="mt-2 flex flex-wrap gap-1">
+                      {msg.referencedFiles.map((f) => (
+                        <span
+                          key={f}
+                          className="text-[9px] font-mono px-1.5 py-0.5 rounded"
+                          style={{ background: "rgba(51,65,85,0.4)", color: "rgb(100,116,139)" }}
+                        >
+                          {f.split("/").pop()}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+
+            {sending && (
+              <div className="flex gap-2 items-start">
+                <span
+                  className="w-5 h-5 rounded flex items-center justify-center text-[9px] font-bold flex-shrink-0"
+                  style={{ background: "rgba(167,139,250,0.15)", color: "rgb(167,139,250)" }}
+                >✦</span>
+                <div
+                  className="px-4 py-3 rounded-xl text-xs text-slate-600"
+                  style={{ background: "rgba(15,23,42,0.5)", border: "1px solid rgba(51,65,85,0.3)" }}
+                >
+                  Thinking…
+                </div>
+              </div>
+            )}
+
+            <div ref={bottomRef} />
+          </div>
+
+          {/* Input */}
+          <div
+            className="px-4 py-3 border-t flex-shrink-0"
+            style={{ borderColor: "rgba(51,65,85,0.4)", background: "rgba(8,12,24,0.7)" }}
+          >
+            <div className="max-w-3xl mx-auto flex gap-2 items-end">
+              <textarea
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
+                }}
+                placeholder="Ask anything about your codebase… (Enter to send, Shift+Enter for newline)"
+                rows={2}
+                className="flex-1 resize-none rounded-xl px-3 py-2.5 text-xs text-slate-300 placeholder:text-slate-600 outline-none"
+                style={{ background: "rgba(15,23,42,0.8)", border: "1px solid rgba(51,65,85,0.5)" }}
+              />
+              <button
+                onClick={send}
+                disabled={!input.trim() || sending}
+                className="px-4 py-2.5 rounded-xl text-xs font-semibold flex-shrink-0 transition-all disabled:opacity-40"
+                style={{ background: "rgba(167,139,250,0.15)", color: "rgb(167,139,250)", border: "1px solid rgba(167,139,250,0.3)" }}
+              >
+                {sending ? "…" : "Send"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+}

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

@@ -0,0 +1,139 @@
+"use client";
+
+import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { useExplorerBlueprint } from "@/lib/prism/blue/explorer/useExplorerBlueprint";
+import { ExplorerNav } from "@/components/blue-explorer/ExplorerNav";
+import type { BlueprintData } from "@/lib/prism/blue/explorer/types";
+
+export default function ExplorerExplainPage() {
+  const { data, setData, loading, outdated, setOutdated, target } = useExplorerBlueprint();
+  const searchParams = useSearchParams();
+  const modulePath = searchParams.get("path") ?? "";
+
+  const [markdown, setMarkdown] = useState<string | null>(null);
+  const [explaining, setExplaining] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  function handleRescan(d: typeof data) {
+    if (d) { setData(d); setOutdated(false); }
+  }
+
+  async function explain(path: string) {
+    setExplaining(true);
+    setError(null);
+    setMarkdown(null);
+    try {
+      const res = await fetch("/api/blue/explorer/explain", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ target, modulePath: path }),
+      });
+      const json = await res.json();
+      if (!res.ok) setError(json.error ?? "Failed");
+      else setMarkdown(json.markdown);
+    } catch {
+      setError("Network error");
+    } finally {
+      setExplaining(false);
+    }
+  }
+
+  // Auto-explain when path is in URL
+  const [autoRan, setAutoRan] = useState(false);
+  if (modulePath && data && !autoRan && !explaining && !markdown) {
+    setAutoRan(true);
+    explain(modulePath);
+  }
+
+  const file = data?.files.find((f) => f.path === modulePath);
+
+  return (
+    <main className="flex flex-col flex-1 pt-16 h-screen overflow-hidden">
+      <ExplorerNav target={target} outdated={outdated} onRescan={handleRescan} />
+
+      {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-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 && data && (
+        <div className="flex flex-1 overflow-hidden">
+          {/* Left: file picker */}
+          <div
+            className="w-56 flex-shrink-0 border-r overflow-y-auto"
+            style={{ borderColor: "rgba(51,65,85,0.3)", background: "rgba(8,12,24,0.6)" }}
+          >
+            <p className="text-[10px] uppercase tracking-widest text-slate-600 font-semibold px-3 py-3">
+              Choose a module
+            </p>
+            <div className="flex flex-col">
+              {data.files
+                .sort((a, b) => b.metrics.heatScore - a.metrics.heatScore)
+                .slice(0, 30)
+                .map((f) => (
+                  <button
+                    key={f.id}
+                    onClick={() => explain(f.path)}
+                    className="text-left px-3 py-2 text-[10px] font-mono text-slate-500 hover:text-slate-200 hover:bg-slate-800/40 transition-colors border-b border-slate-800/30 truncate"
+                    style={{ color: f.path === modulePath ? "rgb(167,139,250)" : undefined }}
+                  >
+                    {f.path.split("/").pop()}
+                    <span className="ml-1 opacity-50">{f.metrics.heatScore.toFixed(0)}</span>
+                  </button>
+                ))}
+            </div>
+          </div>
+
+          {/* Right: explanation */}
+          <div className="flex-1 overflow-y-auto p-6">
+            {!modulePath && !explaining && !markdown && (
+              <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-500">Select a module from the left to explain it.</p>
+              </div>
+            )}
+
+            {explaining && (
+              <div className="flex items-center gap-2 text-slate-500 text-sm">
+                <span className="animate-pulse">✦</span>
+                <span>Explaining {modulePath.split("/").pop()}…</span>
+              </div>
+            )}
+
+            {error && (
+              <p className="text-sm text-red-400">{error}</p>
+            )}
+
+            {markdown && !explaining && (
+              <div
+                className="prose prose-invert prose-sm max-w-none text-slate-300"
+                style={{ fontFamily: "inherit" }}
+              >
+                {/* Simple markdown renderer */}
+                {markdown.split("\n").map((line, i) => {
+                  if (line.startsWith("# ")) return <h1 key={i} className="text-xl font-bold text-slate-100 mb-3">{line.slice(2)}</h1>;
+                  if (line.startsWith("## ")) return <h2 key={i} className="text-base font-semibold text-slate-200 mt-6 mb-2">{line.slice(3)}</h2>;
+                  if (line.startsWith("| ")) return <p key={i} className="text-xs font-mono text-slate-400">{line}</p>;
+                  if (line.startsWith("- ")) return <p key={i} className="text-xs text-slate-400 ml-2">• {line.slice(2)}</p>;
+                  if (line.startsWith("> ")) return <p key={i} className="text-xs italic text-slate-500 border-l-2 border-slate-700 pl-3 my-1">{line.slice(2)}</p>;
+                  if (line.startsWith("**")) return <p key={i} className="text-xs font-semibold text-slate-300">{line.replace(/\*\*(.*?)\*\*/g, "$1")}</p>;
+                  if (line === "") return <div key={i} className="h-1" />;
+                  return <p key={i} className="text-xs text-slate-400 leading-relaxed">{line}</p>;
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </main>
+  );
+}

package/.next/standalone/app/blue/explorer/file/[path]/page.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import { useTargetPath } from "@/lib/prism/hooks/useTargetPath";
+import { ExplorerFileInspector } from "@/components/blue-explorer/ExplorerSummary";
+import type { BlueprintData, FileEntry, ExplorerComment } from "@/lib/prism/blue/explorer/types";
+
+function fileHash(path: string): string {
+  let h = 0;
+  for (let i = 0; i < path.length; i++) {
+    h = (Math.imul(31, h) + path.charCodeAt(i)) | 0;
+  }
+  return Math.abs(h).toString(16).padStart(8, "0");
+}
+
+export default function FileInspectorPage() {
+  const params = useParams<{ path: string }>();
+  const decodedPath = decodeURIComponent(params.path ?? "");
+  const { tq, ready } = useTargetPath();
+
+  const [file, setFile]           = useState<FileEntry | null>(null);
+  const [loading, setLoading]     = useState(true);
+  const [comments, setComments]   = useState<ExplorerComment[]>([]);
+  const [newComment, setNew]      = useState("");
+  const [submitting, setSub]      = useState(false);
+
+  const hash = fileHash(decodedPath);
+
+  useEffect(() => {
+    if (!ready) return;
+    const target = tq.slice(1);
+
+    // Load file from blueprint
+    fetch(`/api/blue/explorer?target=${encodeURIComponent(target)}`)
+      .then((r) => r.json())
+      .then(({ data }: { data: BlueprintData | null }) => {
+        const found = data?.files.find((f) => f.path === decodedPath) ?? null;
+        setFile(found);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+
+    // Load comments
+    fetch(`/api/blue/explorer/comments/${hash}?target=${encodeURIComponent(target)}`)
+      .then((r) => r.json())
+      .then(({ comments: c }) => setComments(c ?? []))
+      .catch(() => {});
+  }, [ready]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function addComment() {
+    if (!newComment.trim()) return;
+    setSub(true);
+    const target = tq.slice(1);
+    const res = await fetch(`/api/blue/explorer/comments/${hash}?target=${encodeURIComponent(target)}`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ text: newComment.trim(), filePath: decodedPath }),
+    });
+    const { comment } = await res.json();
+    if (comment) setComments((c) => [comment, ...c]);
+    setNew("");
+    setSub(false);
+  }
+
+  async function deleteComment(id: string) {
+    const target = tq.slice(1);
+    await fetch(`/api/blue/explorer/comments/${hash}?target=${encodeURIComponent(target)}&id=${id}`, {
+      method: "DELETE",
+    });
+    setComments((c) => c.filter((x) => x.id !== id));
+  }
+
+  return (
+    <main className="flex-1 flex flex-col overflow-hidden pt-16">
+      {/* Breadcrumb */}
+      <div
+        className="flex items-center gap-2 px-4 py-2 border-b text-xs flex-shrink-0"
+        style={{ borderColor: "rgba(51,65,85,0.4)", background: "rgba(15,23,42,0.5)" }}
+      >
+        <Link href="/blue/explorer" className="text-slate-500 hover:text-slate-400">Explorer</Link>
+        <span className="text-slate-700">/</span>
+        <span className="text-slate-400 font-mono truncate max-w-md">{decodedPath}</span>
+      </div>
+
+      {loading && (
+        <div className="flex-1 flex items-center justify-center text-slate-500 text-sm">Loading…</div>
+      )}
+
+      {!loading && !file && (
+        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-center px-6">
+          <p className="text-slate-500 text-sm">File not found in blueprint data.</p>
+          <Link href="/blue/explorer" className="text-xs text-blue-400">← Back to Explorer</Link>
+        </div>
+      )}
+
+      {!loading && file && (
+        <div className="flex flex-1 overflow-hidden">
+          {/* Inspector panel */}
+          <div className="w-80 flex-shrink-0 overflow-y-auto border-r" style={{ borderColor: "rgba(51,65,85,0.3)" }}>
+            <ExplorerFileInspector file={file} />
+          </div>
+
+          {/* Comments panel */}
+          <div className="flex-1 flex flex-col overflow-hidden">
+            <div
+              className="px-4 py-2 border-b flex-shrink-0 text-xs font-semibold text-slate-500 uppercase tracking-widest"
+              style={{ borderColor: "rgba(51,65,85,0.3)" }}
+            >
+              Comments ({comments.length})
+            </div>
+
+            {/* Comment input */}
+            <div className="px-4 py-3 border-b flex gap-2 flex-shrink-0" style={{ borderColor: "rgba(51,65,85,0.3)" }}>
+              <textarea
+                value={newComment}
+                onChange={(e) => setNew(e.target.value)}
+                placeholder="Add a comment about this file…"
+                rows={2}
+                className="flex-1 text-xs bg-slate-900 border border-slate-700/60 rounded px-2.5 py-2 text-slate-300 placeholder:text-slate-600 outline-none focus:border-blue-500/50 resize-none"
+              />
+              <button
+                onClick={addComment}
+                disabled={submitting || !newComment.trim()}
+                className="text-xs px-3 py-1 rounded font-medium self-end transition-all disabled:opacity-40"
+                style={{ background: "rgba(59,130,246,0.2)", color: "rgb(96,165,250)", border: "1px solid rgba(59,130,246,0.3)" }}
+              >
+                {submitting ? "…" : "Add"}
+              </button>
+            </div>
+
+            {/* Comment thread */}
+            <div className="flex-1 overflow-y-auto px-4 py-3 flex flex-col gap-3">
+              {comments.length === 0 && (
+                <p className="text-sm text-slate-600 text-center py-8">No comments yet.</p>
+              )}
+              {comments.map((c) => (
+                <div
+                  key={c.id}
+                  className="rounded-lg px-3 py-2.5 flex flex-col gap-1"
+                  style={{ background: "rgba(15,23,42,0.6)", border: "1px solid rgba(51,65,85,0.3)" }}
+                >
+                  <p className="text-xs text-slate-300 leading-relaxed">{c.text}</p>
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px] text-slate-600 font-mono">
+                      {new Date(c.createdAt).toLocaleString()}
+                    </span>
+                    <button
+                      onClick={() => deleteComment(c.id)}
+                      className="text-[10px] text-slate-700 hover:text-red-500 transition-colors"
+                    >
+                      delete
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+}

package/.next/standalone/app/blue/explorer/flow/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 { FlowView } from "@/components/blue-explorer/FlowView";
+import type { FileEntry } from "@/lib/prism/blue/explorer/types";
+
+export default function ExplorerFlowPage() {
+  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">
+            <FlowView 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>
+  );
+}