Spaces:

akdybala
/

coderag-retrieval-console

Running

coderag-retrieval-console / coderag_ui /src /main.jsx

Use browser MiniLM embeddings

6ed4eb1 verified 3 months ago

21.5 kB

import React, { useEffect, useMemo, useState } from "react";
import { createRoot } from "react-dom/client";
import {
  Activity,
  Braces,
  Code2,
  Database,
  FileCode2,
  GitBranch,
  Layers3,
  RefreshCw,
  Search,
  Server,
  Sparkles,
  Upload,
  Zap
} from "lucide-react";
import "./styles.css";

const DEFAULT_CODE = `from collections import defaultdict
def normalize_user(user):
    email = user["email"].strip().lower()
    return {
        "id": user["id"],
        "email": email,
        "active": bool(user.get("active", True)),
    }
def group_active_users(users):
    groups = defaultdict(list)
    for user in users:
        normalized = normalize_user(user)
        if normalized["active"]:
            domain = normalized["email"].split("@")[-1]
            groups[domain].append(normalized)
    return dict(groups)
def find_user_by_email(users, email):
    target = email.strip().lower()
    for user in users:
        normalized = normalize_user(user)
        if normalized["email"] == target:
            return normalized
    return None
`;

const DEFAULT_QUERY =
  "Where are active users grouped by email domain after normalizing their records?";

const SOURCE_LABELS = {
  raw_code: "Raw code",
  cross_file_propagated: "Propagated",
  semantic_synthetic: "Semantic"
};

const SOURCE_ICONS = {
  raw_code: FileCode2,
  cross_file_propagated: GitBranch,
  semantic_synthetic: Sparkles
};

let extractorPromise = null;
let embeddingBackend = "hashing";

function getExtractor() {
  if (!extractorPromise) {
    extractorPromise = import("@xenova/transformers").then(({ env, pipeline }) => {
      env.allowLocalModels = false;
      env.useBrowserCache = true;
      return pipeline("feature-extraction", "Xenova/all-MiniLM-L6-v2");
    });
  }
  return extractorPromise;
}

function formatNumber(value) {
  if (typeof value !== "number") return value;
  return value.toLocaleString(undefined, { maximumFractionDigits: 4 });
}

function sourceName(source) {
  return SOURCE_LABELS[source] || source;
}

function tokenize(text) {
  const words = (text.toLowerCase().match(/[a-z_][a-z0-9_]*|\d+(?:\.\d+)?/g) || []);
  const bigrams = words.slice(1).map((word, index) => `${words[index]}_${word}`);
  return [...words, ...bigrams];
}

function hashToken(token, dimensions) {
  let hash = 2166136261;
  for (let index = 0; index < token.length; index += 1) {
    hash ^= token.charCodeAt(index);
    hash = Math.imul(hash, 16777619);
  }
  return Math.abs(hash) % dimensions;
}

function embedTextHash(text, dimensions = 384) {
  const vector = new Float32Array(dimensions);
  for (const token of tokenize(text)) {
    const bucket = hashToken(token, dimensions);
    vector[bucket] += token.length % 2 === 0 ? 1 : -1;
  }
  let norm = 0;
  for (const value of vector) norm += value * value;
  norm = Math.sqrt(norm);
  if (norm > 0) {
    for (let index = 0; index < vector.length; index += 1) vector[index] /= norm;
  }
  return vector;
}

async function embedText(text) {
  try {
    const extractor = await getExtractor();
    const output = await extractor(text || " ", {
      pooling: "mean",
      normalize: true
    });
    embeddingBackend = "Xenova/all-MiniLM-L6-v2";
    return Float32Array.from(output.data);
  } catch (error) {
    console.warn("Falling back to hashing embeddings:", error);
    embeddingBackend = "hashing-fallback";
    return embedTextHash(text);
  }
}

function dot(left, right) {
  let score = 0;
  for (let index = 0; index < left.length; index += 1) score += left[index] * right[index];
  return score;
}

function extractFunctions(source, filePath) {
  const lines = source.replace(/\r\n/g, "\n").split("\n");
  const starts = [];
  const defPattern = /^(\s*)(async\s+def|def)\s+([A-Za-z_][A-Za-z0-9_]*)\s*\(/;
  lines.forEach((line, index) => {
    const match = line.match(defPattern);
    if (match) {
      starts.push({ line: index, indent: match[1].length, name: match[3] });
    }
  });
  return starts.map((start, index) => {
    const next = starts.find((candidate, candidateIndex) => (
      candidateIndex > index && candidate.indent <= start.indent
    ));
    const endLine = next ? next.line : lines.length;
    const rawCode = lines.slice(start.line, endLine).join("\n").trim();
    const calls = Array.from(rawCode.matchAll(/\b([A-Za-z_][A-Za-z0-9_]*)\s*\(/g))
      .map((match) => match[1])
      .filter((name) => !["if", "for", "while", "return", "def"].includes(name));
    const uniqueCalls = [...new Set(calls.filter((name) => name !== start.name))];
    const words = start.name.replace(/_/g, " ");
    const ownSummary = `Function ${start.name} handles ${words}. Calls: ${uniqueCalls.slice(0, 8).join(", ") || "none"}.`;
    return {
      key: `${filePath}::${start.name}`,
      file_path: filePath,
      qualified_name: start.name,
      symbol_type: "function",
      start_line: start.line + 1,
      end_line: endLine,
      raw_code: rawCode,
      own_sketch: `${lines[start.line]}\n${ownSummary}`,
      propagated_text: `${ownSummary}\n\n${rawCode}`,
      direct_callees: uniqueCalls
    };
  });
}

function semanticQuestions(record) {
  const nameWords = record.qualified_name.replace(/_/g, " ");
  const questions = [
    `Where is ${nameWords} implemented?`,
    `Which function handles ${nameWords}?`,
    `How does ${nameWords} work?`
  ];
  if (/email|domain/i.test(record.raw_code)) {
    questions.push("Where are users grouped or matched by email domain?");
  }
  if (/active/i.test(record.raw_code)) {
    questions.push("Which function filters or processes active records?");
  }
  if (/normalize|strip|lower/i.test(record.raw_code)) {
    questions.push("Where is input normalized or cleaned?");
  }
  return questions;
}

async function buildBrowserIndex(source, filePath) {
  const functions = extractFunctions(source, filePath);
  const byName = Object.fromEntries(functions.map((record) => [record.qualified_name, record]));
  const vectors = [];
  for (const record of functions) {
    const calleeContext = record.direct_callees
      .map((name) => byName[name]?.own_sketch)
      .filter(Boolean)
      .join("\n");
    record.propagated_text = [record.propagated_text, calleeContext].filter(Boolean).join("\n\n");
    for (const [sourceNameValue, text] of [
      ["raw_code", record.raw_code],
      ["cross_file_propagated", record.propagated_text]
    ]) {
      vectors.push({
        record,
        source: sourceNameValue,
        text,
        scope: null,
        evidence: [],
        vector: await embedText(text)
      });
    }
    for (const question of semanticQuestions(record)) {
      vectors.push({
        record,
        source: "semantic_synthetic",
        text: question,
        scope: "behavior",
        evidence: [record.qualified_name],
        vector: await embedText(question)
      });
    }
  }
  const dimensions = vectors[0]?.vector.length || 384;
  return {
    dimensions,
    functions,
    vectors,
    stats: {
      schema_version: "coderag-browser-neural-vector-db-v1",
      database_path: "browser-memory",
      dimensions,
      embedding_backend: embeddingBackend,
      function_count: functions.length,
      vector_count: vectors.length,
      sources: vectors.reduce((counts, row) => {
        counts[row.source] = (counts[row.source] || 0) + 1;
        return counts;
      }, {}),
      active_index_mode: "browser_static",
      active_file_path: filePath
    }
  };
}

async function searchBrowserIndex(index, query, topK, perSource, selectedSources) {
  const queryVector = await embedText(query);
  const candidateRows = new Map();
  for (const sourceValue of selectedSources) {
    const ranked = index.vectors
      .filter((row) => row.source === sourceValue)
      .map((row) => ({ ...row, score: dot(row.vector, queryVector) }))
      .sort((left, right) => right.score - left.score)
      .slice(0, perSource);
    for (const row of ranked) {
      const existing = candidateRows.get(row.record.key);
      if (!existing || row.score > existing.best_score) {
        candidateRows.set(row.record.key, {
          ...row.record,
          source_scores: { ...(existing?.source_scores || {}), [sourceValue]: Number(row.score.toFixed(6)) },
          best_source: sourceValue,
          best_score: Number(row.score.toFixed(6)),
          matched_text: row.text,
          matched_scope: row.scope,
          matched_evidence: row.evidence
        });
      } else {
        existing.source_scores[sourceValue] = Number(row.score.toFixed(6));
      }
    }
  }
  const hits = [...candidateRows.values()]
    .sort((left, right) => right.best_score - left.best_score)
    .slice(0, topK);
  return {
    query,
    hits,
    candidate_count: candidateRows.size,
    per_source: perSource,
    sources: selectedSources,
    stats: index.stats
  };
}

function App() {
  const [code, setCode] = useState(DEFAULT_CODE);
  const [filename, setFilename] = useState("user_index.py");
  const [query, setQuery] = useState(DEFAULT_QUERY);
  const [topK, setTopK] = useState(6);
  const [perSource, setPerSource] = useState(5);
  const [sources, setSources] = useState([
    "raw_code",
    "cross_file_propagated",
    "semantic_synthetic"
  ]);
  const [stats, setStats] = useState(null);
  const [result, setResult] = useState(null);
  const [activeHit, setActiveHit] = useState(null);
  const [status, setStatus] = useState("idle");
  const [error, setError] = useState("");
  const [clientIndex, setClientIndex] = useState(null);

  useEffect(() => {
    refreshStats();
  }, []);

  useEffect(() => {
    setActiveHit(result?.hits?.[0] || null);
  }, [result]);

  const sourceCounts = useMemo(() => stats?.sources || {}, [stats]);
  const hasIndexedCode = stats?.active_index_mode === "pasted_code";

  async function refreshStats() {
    try {
      const response = await fetch("/api/coderag/stats");
      const payload = await response.json();
      if (!response.ok) throw new Error(payload.error || "Stats failed");
      setStats(payload);
    } catch (err) {
      setStatus("indexing");
      const fallback = await buildBrowserIndex(code, filename || "user_index.py");
      setClientIndex(fallback);
      setStats(fallback.stats);
      setError("");
      setStatus("idle");
    }
  }

  async function indexCode() {
    setStatus("indexing");
    setError("");
    setResult(null);
    try {
      const response = await fetch("/api/coderag/index-code", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code, filename })
      });
      const payload = await response.json();
      if (!response.ok) throw new Error(payload.error || "Indexing failed");
      setStats(payload);
      setStatus("idle");
    } catch (err) {
      const fallback = await buildBrowserIndex(code, filename || "user_index.py");
      setClientIndex(fallback);
      setStats(fallback.stats);
      setError("");
      setStatus("idle");
    }
  }

  async function rebuildSampleDb() {
    setStatus("rebuilding");
    setError("");
    try {
      const response = await fetch("/api/coderag/rebuild", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({})
      });
      const payload = await response.json();
      if (!response.ok) throw new Error(payload.error || "Rebuild failed");
      setStats(payload);
      setResult(null);
      setStatus("idle");
    } catch (err) {
      const fallback = await buildBrowserIndex(DEFAULT_CODE, "sample_users.py");
      setCode(DEFAULT_CODE);
      setFilename("sample_users.py");
      setClientIndex(fallback);
      setStats(fallback.stats);
      setResult(null);
      setError("");
      setStatus("idle");
    }
  }

  async function search() {
    setStatus("searching");
    setError("");
    try {
      const response = await fetch("/api/coderag/search", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          query,
          top_k: topK,
          per_source: perSource,
          sources
        })
      });
      const payload = await response.json();
      if (!response.ok) throw new Error(payload.error || "Search failed");
      setResult(payload);
      setStats(payload.stats);
      setStatus("idle");
    } catch (err) {
      const fallback = clientIndex || await buildBrowserIndex(code, filename || "user_index.py");
      setClientIndex(fallback);
      const payload = await searchBrowserIndex(fallback, query, topK, perSource, sources);
      setResult(payload);
      setStats(payload.stats);
      setError("");
      setStatus("idle");
    }
  }

  function toggleSource(source) {
    setSources((current) => {
      if (current.includes(source) && current.length > 1) {
        return current.filter((item) => item !== source);
      }
      if (!current.includes(source)) return [...current, source];
      return current;
    });
  }

  return (
    <main className="app-shell">
      <section className="topbar">
        <div>
          <div className="eyebrow">
            <Database size={16} />
            Paste code, build vectors, ask questions
          </div>
          <h1>CodeRAG Retrieval Console</h1>
        </div>
        <button
          className="icon-button"
          onClick={rebuildSampleDb}
          disabled={status === "rebuilding"}
          title="Restore benchmark vector database"
        >
          <RefreshCw size={18} />
        </button>
      </section>
      <section className="status-strip">
        <Metric icon={Server} label="Functions" value={stats?.function_count ?? "-"} />
        <Metric icon={Layers3} label="Vector rows" value={stats?.vector_count ?? "-"} />
        <Metric icon={Braces} label="Dimensions" value={stats?.dimensions ?? "-"} />
        <Metric icon={Activity} label="Candidates" value={result?.candidate_count ?? "-"} />
      </section>
      <section className="workbench">
        <aside className="code-pane">
          <div className="panel-title">
            <Code2 size={18} />
            Code workspace
          </div>
          <label className="filename-field">
            File name
            <input
              value={filename}
              onChange={(event) => setFilename(event.target.value)}
              spellCheck="false"
            />
          </label>
          <textarea
            className="code-input"
            value={code}
            onChange={(event) => setCode(event.target.value)}
            spellCheck="false"
          />
          <button
            className="primary-button"
            onClick={indexCode}
            disabled={status === "indexing" || !code.trim()}
          >
            <Upload size={18} />
            Build code index
          </button>
          {hasIndexedCode && (
            <div className="success-box">
              Active index: {stats.function_count} functions from {stats.active_file_path}
            </div>
          )}
        </aside>
        <aside className="query-pane">
          <div className="panel-title">
            <Search size={18} />
            Question
          </div>
          <textarea
            className="question-input"
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            spellCheck="false"
          />
          <div className="control-group">
            <label>
              Top matches
              <input
                type="number"
                min="1"
                max="20"
                value={topK}
                onChange={(event) => setTopK(Number(event.target.value))}
              />
            </label>
            <label>
              Per source
              <input
                type="number"
                min="1"
                max="10"
                value={perSource}
                onChange={(event) => setPerSource(Number(event.target.value))}
              />
            </label>
          </div>
          <div className="source-grid">
            {Object.keys(SOURCE_LABELS).map((source) => {
              const Icon = SOURCE_ICONS[source];
              const active = sources.includes(source);
              return (
                <button
                  key={source}
                  className={`source-toggle ${active ? "active" : ""}`}
                  onClick={() => toggleSource(source)}
                  title={`${sourceName(source)} vector source`}
                >
                  <Icon size={17} />
                  <span>{sourceName(source)}</span>
                  <small>{sourceCounts[source] ?? 0}</small>
                </button>
              );
            })}
          </div>
          <button
            className="primary-button"
            onClick={search}
            disabled={status === "searching" || !query.trim()}
          >
            <Zap size={18} />
            Retrieve top matches
          </button>
          {error && <div className="error-box">{error}</div>}
          {status === "indexing" && <div className="notice">Parsing functions, creating V7 sketches, generating semantic vectors, and writing SQLite rows.</div>}
          {status === "searching" && <div className="notice">Scoring vectors and merging candidates from selected sources.</div>}
          {status === "rebuilding" && <div className="notice">Restoring the benchmark repository vector database.</div>}
        </aside>
        <section className="results-pane">
          <div className="panel-title">
            <Layers3 size={18} />
            Top matches
          </div>
          {!result ? (
            <div className="empty-state">
              Build the code index, ask a question, and CodeRAG will retrieve the most relevant functions.
            </div>
          ) : (
            <div className="hit-list">
              {result.hits.map((hit, index) => (
                <HitRow
                  key={hit.key}
                  hit={hit}
                  index={index}
                  active={activeHit?.key === hit.key}
                  onClick={() => setActiveHit(hit)}
                />
              ))}
            </div>
          )}
        </section>
      </section>
      <section className="detail-pane wide-detail">
        <div className="panel-title">
          <FileCode2 size={18} />
          Retrieved evidence
        </div>
        {!activeHit ? (
          <div className="empty-state">Select a match to inspect its code, V7 sketch, source scores, and semantic provenance.</div>
        ) : (
          <HitDetail hit={activeHit} />
        )}
      </section>
    </main>
  );
}

function Metric({ icon: Icon, label, value }) {
  return (
    <div className="metric">
      <Icon size={18} />
      <div>
        <span>{label}</span>
        <strong>{formatNumber(value)}</strong>
      </div>
    </div>
  );
}

function HitRow({ hit, index, active, onClick }) {
  return (
    <button className={`hit-row ${active ? "active" : ""}`} onClick={onClick}>
      <span className="rank">{index + 1}</span>
      <span className="hit-main">
        <strong>{hit.qualified_name}</strong>
        <small>{hit.file_path}</small>
      </span>
      <span className={`source-pill ${hit.best_source}`}>{sourceName(hit.best_source)}</span>
      <span className="score">{hit.best_score.toFixed(4)}</span>
    </button>
  );
}

function HitDetail({ hit }) {
  return (
    <div className="detail-grid">
      <div className="detail-stack">
        <div className="detail-header">
          <div>
            <h2>{hit.qualified_name}</h2>
            <p>
              {hit.file_path}
              {hit.start_line ? `:${hit.start_line}-${hit.end_line}` : ""}
            </p>
          </div>
          <span className={`source-pill ${hit.best_source}`}>{sourceName(hit.best_source)}</span>
        </div>
        <section className="score-card">
          <h3>Source scores</h3>
          <div className="score-bars">
            {Object.entries(hit.source_scores).map(([source, score]) => (
              <div className="bar-row" key={source}>
                <span>{sourceName(source)}</span>
                <div className="bar-track">
                  <div className={`bar-fill ${source}`} style={{ width: `${Math.max(2, Math.min(100, score * 100))}%` }} />
                </div>
                <strong>{score.toFixed(4)}</strong>
              </div>
            ))}
          </div>
        </section>
        <section className="score-card">
          <h3>Matched vector text</h3>
          <p className="matched-text">{hit.matched_text || "No text stored for this vector."}</p>
          {hit.matched_scope && <span className="scope-chip">{hit.matched_scope}</span>}
          {hit.matched_evidence?.length > 0 && (
            <div className="evidence-list">
              {hit.matched_evidence.map((item) => (
                <code key={item}>{item}</code>
              ))}
            </div>
          )}
        </section>
      </div>
      <CodeBlock title="Raw code" value={hit.raw_code || "Code body unavailable."} />
      <CodeBlock title="V7 sketch and propagated context" value={hit.propagated_text || hit.own_sketch || "Sketch unavailable."} />
    </div>
  );
}

function CodeBlock({ title, value }) {
  return (
    <section className="code-card">
      <h3>{title}</h3>
      <pre>{value}</pre>
    </section>
  );
}

createRoot(document.getElementById("root")).render(<App />);

	import React, { useEffect, useMemo, useState } from "react";
	import { createRoot } from "react-dom/client";
	import {
	Activity,
	Braces,
	Code2,
	Database,
	FileCode2,
	GitBranch,
	Layers3,
	RefreshCw,
	Search,
	Server,
	Sparkles,
	Upload,
	Zap
	} from "lucide-react";
	import "./styles.css";

	const DEFAULT_CODE = `from collections import defaultdict


	def normalize_user(user):
	email = user["email"].strip().lower()
	return {
	"id": user["id"],
	"email": email,
	"active": bool(user.get("active", True)),
	}


	def group_active_users(users):
	groups = defaultdict(list)
	for user in users:
	normalized = normalize_user(user)
	if normalized["active"]:
	domain = normalized["email"].split("@")[-1]
	groups[domain].append(normalized)
	return dict(groups)


	def find_user_by_email(users, email):
	target = email.strip().lower()
	for user in users:
	normalized = normalize_user(user)
	if normalized["email"] == target:
	return normalized
	return None
	`;

	const DEFAULT_QUERY =
	"Where are active users grouped by email domain after normalizing their records?";

	const SOURCE_LABELS = {
	raw_code: "Raw code",
	cross_file_propagated: "Propagated",
	semantic_synthetic: "Semantic"
	};

	const SOURCE_ICONS = {
	raw_code: FileCode2,
	cross_file_propagated: GitBranch,
	semantic_synthetic: Sparkles
	};

	let extractorPromise = null;
	let embeddingBackend = "hashing";

	function getExtractor() {
	if (!extractorPromise) {
	extractorPromise = import("@xenova/transformers").then(({ env, pipeline }) => {
	env.allowLocalModels = false;
	env.useBrowserCache = true;
	return pipeline("feature-extraction", "Xenova/all-MiniLM-L6-v2");
	});
	}
	return extractorPromise;
	}

	function formatNumber(value) {
	if (typeof value !== "number") return value;
	return value.toLocaleString(undefined, { maximumFractionDigits: 4 });
	}

	function sourceName(source) {
	return SOURCE_LABELS[source] \|\| source;
	}

	function tokenize(text) {
	const words = (text.toLowerCase().match(/[a-z_][a-z0-9_]*\|\d+(?:\.\d+)?/g) \|\| []);
	const bigrams = words.slice(1).map((word, index) => `${words[index]}_${word}`);
	return [...words, ...bigrams];
	}

	function hashToken(token, dimensions) {
	let hash = 2166136261;
	for (let index = 0; index < token.length; index += 1) {
	hash ^= token.charCodeAt(index);
	hash = Math.imul(hash, 16777619);
	}
	return Math.abs(hash) % dimensions;
	}

	function embedTextHash(text, dimensions = 384) {
	const vector = new Float32Array(dimensions);
	for (const token of tokenize(text)) {
	const bucket = hashToken(token, dimensions);
	vector[bucket] += token.length % 2 === 0 ? 1 : -1;
	}
	let norm = 0;
	for (const value of vector) norm += value * value;
	norm = Math.sqrt(norm);
	if (norm > 0) {
	for (let index = 0; index < vector.length; index += 1) vector[index] /= norm;
	}
	return vector;
	}

	async function embedText(text) {
	try {
	const extractor = await getExtractor();
	const output = await extractor(text \|\| " ", {
	pooling: "mean",
	normalize: true
	});
	embeddingBackend = "Xenova/all-MiniLM-L6-v2";
	return Float32Array.from(output.data);
	} catch (error) {
	console.warn("Falling back to hashing embeddings:", error);
	embeddingBackend = "hashing-fallback";
	return embedTextHash(text);
	}
	}

	function dot(left, right) {
	let score = 0;
	for (let index = 0; index < left.length; index += 1) score += left[index] * right[index];
	return score;
	}

	function extractFunctions(source, filePath) {
	const lines = source.replace(/\r\n/g, "\n").split("\n");
	const starts = [];
	const defPattern = /^(\s)(async\s+def\|def)\s+([A-Za-z_][A-Za-z0-9_])\s*\(/;
	lines.forEach((line, index) => {
	const match = line.match(defPattern);
	if (match) {
	starts.push({ line: index, indent: match[1].length, name: match[3] });
	}
	});
	return starts.map((start, index) => {
	const next = starts.find((candidate, candidateIndex) => (
	candidateIndex > index && candidate.indent <= start.indent
	));
	const endLine = next ? next.line : lines.length;
	const rawCode = lines.slice(start.line, endLine).join("\n").trim();
	const calls = Array.from(rawCode.matchAll(/\b([A-Za-z_][A-Za-z0-9_])\s\(/g))
	.map((match) => match[1])
	.filter((name) => !["if", "for", "while", "return", "def"].includes(name));
	const uniqueCalls = [...new Set(calls.filter((name) => name !== start.name))];
	const words = start.name.replace(/_/g, " ");
	const ownSummary = `Function ${start.name} handles ${words}. Calls: ${uniqueCalls.slice(0, 8).join(", ") \|\| "none"}.`;
	return {
	key: `${filePath}::${start.name}`,
	file_path: filePath,
	qualified_name: start.name,
	symbol_type: "function",
	start_line: start.line + 1,
	end_line: endLine,
	raw_code: rawCode,
	own_sketch: `${lines[start.line]}\n${ownSummary}`,
	propagated_text: `${ownSummary}\n\n${rawCode}`,
	direct_callees: uniqueCalls
	};
	});
	}

	function semanticQuestions(record) {
	const nameWords = record.qualified_name.replace(/_/g, " ");
	const questions = [
	`Where is ${nameWords} implemented?`,
	`Which function handles ${nameWords}?`,
	`How does ${nameWords} work?`
	];
	if (/email\|domain/i.test(record.raw_code)) {
	questions.push("Where are users grouped or matched by email domain?");
	}
	if (/active/i.test(record.raw_code)) {
	questions.push("Which function filters or processes active records?");
	}
	if (/normalize\|strip\|lower/i.test(record.raw_code)) {
	questions.push("Where is input normalized or cleaned?");
	}
	return questions;
	}

	async function buildBrowserIndex(source, filePath) {
	const functions = extractFunctions(source, filePath);
	const byName = Object.fromEntries(functions.map((record) => [record.qualified_name, record]));
	const vectors = [];
	for (const record of functions) {
	const calleeContext = record.direct_callees
	.map((name) => byName[name]?.own_sketch)
	.filter(Boolean)
	.join("\n");
	record.propagated_text = [record.propagated_text, calleeContext].filter(Boolean).join("\n\n");
	for (const [sourceNameValue, text] of [
	["raw_code", record.raw_code],
	["cross_file_propagated", record.propagated_text]
	]) {
	vectors.push({
	record,
	source: sourceNameValue,
	text,
	scope: null,
	evidence: [],
	vector: await embedText(text)
	});
	}
	for (const question of semanticQuestions(record)) {
	vectors.push({
	record,
	source: "semantic_synthetic",
	text: question,
	scope: "behavior",
	evidence: [record.qualified_name],
	vector: await embedText(question)
	});
	}
	}
	const dimensions = vectors[0]?.vector.length \|\| 384;
	return {
	dimensions,
	functions,
	vectors,
	stats: {
	schema_version: "coderag-browser-neural-vector-db-v1",
	database_path: "browser-memory",
	dimensions,
	embedding_backend: embeddingBackend,
	function_count: functions.length,
	vector_count: vectors.length,
	sources: vectors.reduce((counts, row) => {
	counts[row.source] = (counts[row.source] \|\| 0) + 1;
	return counts;
	}, {}),
	active_index_mode: "browser_static",
	active_file_path: filePath
	}
	};
	}

	async function searchBrowserIndex(index, query, topK, perSource, selectedSources) {
	const queryVector = await embedText(query);
	const candidateRows = new Map();
	for (const sourceValue of selectedSources) {
	const ranked = index.vectors
	.filter((row) => row.source === sourceValue)
	.map((row) => ({ ...row, score: dot(row.vector, queryVector) }))
	.sort((left, right) => right.score - left.score)
	.slice(0, perSource);
	for (const row of ranked) {
	const existing = candidateRows.get(row.record.key);
	if (!existing \|\| row.score > existing.best_score) {
	candidateRows.set(row.record.key, {
	...row.record,
	source_scores: { ...(existing?.source_scores \|\| {}), [sourceValue]: Number(row.score.toFixed(6)) },
	best_source: sourceValue,
	best_score: Number(row.score.toFixed(6)),
	matched_text: row.text,
	matched_scope: row.scope,
	matched_evidence: row.evidence
	});
	} else {
	existing.source_scores[sourceValue] = Number(row.score.toFixed(6));
	}
	}
	}
	const hits = [...candidateRows.values()]
	.sort((left, right) => right.best_score - left.best_score)
	.slice(0, topK);
	return {
	query,
	hits,
	candidate_count: candidateRows.size,
	per_source: perSource,
	sources: selectedSources,
	stats: index.stats
	};
	}

	function App() {
	const [code, setCode] = useState(DEFAULT_CODE);
	const [filename, setFilename] = useState("user_index.py");
	const [query, setQuery] = useState(DEFAULT_QUERY);
	const [topK, setTopK] = useState(6);
	const [perSource, setPerSource] = useState(5);
	const [sources, setSources] = useState([
	"raw_code",
	"cross_file_propagated",
	"semantic_synthetic"
	]);
	const [stats, setStats] = useState(null);
	const [result, setResult] = useState(null);
	const [activeHit, setActiveHit] = useState(null);
	const [status, setStatus] = useState("idle");
	const [error, setError] = useState("");
	const [clientIndex, setClientIndex] = useState(null);

	useEffect(() => {
	refreshStats();
	}, []);

	useEffect(() => {
	setActiveHit(result?.hits?.[0] \|\| null);
	}, [result]);

	const sourceCounts = useMemo(() => stats?.sources \|\| {}, [stats]);
	const hasIndexedCode = stats?.active_index_mode === "pasted_code";

	async function refreshStats() {
	try {
	const response = await fetch("/api/coderag/stats");
	const payload = await response.json();
	if (!response.ok) throw new Error(payload.error \|\| "Stats failed");
	setStats(payload);
	} catch (err) {
	setStatus("indexing");
	const fallback = await buildBrowserIndex(code, filename \|\| "user_index.py");
	setClientIndex(fallback);
	setStats(fallback.stats);
	setError("");
	setStatus("idle");
	}
	}

	async function indexCode() {
	setStatus("indexing");
	setError("");
	setResult(null);
	try {
	const response = await fetch("/api/coderag/index-code", {
	method: "POST",
	headers: { "Content-Type": "application/json" },
	body: JSON.stringify({ code, filename })
	});
	const payload = await response.json();
	if (!response.ok) throw new Error(payload.error \|\| "Indexing failed");
	setStats(payload);
	setStatus("idle");
	} catch (err) {
	const fallback = await buildBrowserIndex(code, filename \|\| "user_index.py");
	setClientIndex(fallback);
	setStats(fallback.stats);
	setError("");
	setStatus("idle");
	}
	}

	async function rebuildSampleDb() {
	setStatus("rebuilding");
	setError("");
	try {
	const response = await fetch("/api/coderag/rebuild", {
	method: "POST",
	headers: { "Content-Type": "application/json" },
	body: JSON.stringify({})
	});
	const payload = await response.json();
	if (!response.ok) throw new Error(payload.error \|\| "Rebuild failed");
	setStats(payload);
	setResult(null);
	setStatus("idle");
	} catch (err) {
	const fallback = await buildBrowserIndex(DEFAULT_CODE, "sample_users.py");
	setCode(DEFAULT_CODE);
	setFilename("sample_users.py");
	setClientIndex(fallback);
	setStats(fallback.stats);
	setResult(null);
	setError("");
	setStatus("idle");
	}
	}

	async function search() {
	setStatus("searching");
	setError("");
	try {
	const response = await fetch("/api/coderag/search", {
	method: "POST",
	headers: { "Content-Type": "application/json" },
	body: JSON.stringify({
	query,
	top_k: topK,
	per_source: perSource,
	sources
	})
	});
	const payload = await response.json();
	if (!response.ok) throw new Error(payload.error \|\| "Search failed");
	setResult(payload);
	setStats(payload.stats);
	setStatus("idle");
	} catch (err) {
	const fallback = clientIndex \|\| await buildBrowserIndex(code, filename \|\| "user_index.py");
	setClientIndex(fallback);
	const payload = await searchBrowserIndex(fallback, query, topK, perSource, sources);
	setResult(payload);
	setStats(payload.stats);
	setError("");
	setStatus("idle");
	}
	}

	function toggleSource(source) {
	setSources((current) => {
	if (current.includes(source) && current.length > 1) {
	return current.filter((item) => item !== source);
	}
	if (!current.includes(source)) return [...current, source];
	return current;
	});
	}

	return (
	<main className="app-shell">
	<section className="topbar">
	<div>
	<div className="eyebrow">
	<Database size={16} />
	Paste code, build vectors, ask questions
	</div>
	<h1>CodeRAG Retrieval Console</h1>
	</div>
	<button
	className="icon-button"
	onClick={rebuildSampleDb}
	disabled={status === "rebuilding"}
	title="Restore benchmark vector database"
	>
	<RefreshCw size={18} />
	</button>
	</section>

	<section className="status-strip">
	<Metric icon={Server} label="Functions" value={stats?.function_count ?? "-"} />
	<Metric icon={Layers3} label="Vector rows" value={stats?.vector_count ?? "-"} />
	<Metric icon={Braces} label="Dimensions" value={stats?.dimensions ?? "-"} />
	<Metric icon={Activity} label="Candidates" value={result?.candidate_count ?? "-"} />
	</section>

	<section className="workbench">
	<aside className="code-pane">
	<div className="panel-title">
	<Code2 size={18} />
	Code workspace
	</div>
	<label className="filename-field">
	File name
	<input
	value={filename}
	onChange={(event) => setFilename(event.target.value)}
	spellCheck="false"
	/>
	</label>
	<textarea
	className="code-input"
	value={code}
	onChange={(event) => setCode(event.target.value)}
	spellCheck="false"
	/>
	<button
	className="primary-button"
	onClick={indexCode}
	disabled={status === "indexing" \|\| !code.trim()}
	>
	<Upload size={18} />
	Build code index
	</button>
	{hasIndexedCode && (
	<div className="success-box">
	Active index: {stats.function_count} functions from {stats.active_file_path}
	</div>
	)}
	</aside>

	<aside className="query-pane">
	<div className="panel-title">
	<Search size={18} />
	Question
	</div>
	<textarea
	className="question-input"
	value={query}
	onChange={(event) => setQuery(event.target.value)}
	spellCheck="false"
	/>

	<div className="control-group">
	<label>
	Top matches
	<input
	type="number"
	min="1"
	max="20"
	value={topK}
	onChange={(event) => setTopK(Number(event.target.value))}
	/>
	</label>
	<label>
	Per source
	<input
	type="number"
	min="1"
	max="10"
	value={perSource}
	onChange={(event) => setPerSource(Number(event.target.value))}
	/>
	</label>
	</div>

	<div className="source-grid">
	{Object.keys(SOURCE_LABELS).map((source) => {
	const Icon = SOURCE_ICONS[source];
	const active = sources.includes(source);
	return (
	<button
	key={source}
	className={`source-toggle ${active ? "active" : ""}`}
	onClick={() => toggleSource(source)}
	title={`${sourceName(source)} vector source`}
	>
	<Icon size={17} />
	<span>{sourceName(source)}</span>
	<small>{sourceCounts[source] ?? 0}</small>
	</button>
	);
	})}
	</div>

	<button
	className="primary-button"
	onClick={search}
	disabled={status === "searching" \|\| !query.trim()}
	>
	<Zap size={18} />
	Retrieve top matches
	</button>

	{error && <div className="error-box">{error}</div>}
	{status === "indexing" && <div className="notice">Parsing functions, creating V7 sketches, generating semantic vectors, and writing SQLite rows.</div>}
	{status === "searching" && <div className="notice">Scoring vectors and merging candidates from selected sources.</div>}
	{status === "rebuilding" && <div className="notice">Restoring the benchmark repository vector database.</div>}
	</aside>

	<section className="results-pane">
	<div className="panel-title">
	<Layers3 size={18} />
	Top matches
	</div>
	{!result ? (
	<div className="empty-state">
	Build the code index, ask a question, and CodeRAG will retrieve the most relevant functions.
	</div>
	) : (
	<div className="hit-list">
	{result.hits.map((hit, index) => (
	<HitRow
	key={hit.key}
	hit={hit}
	index={index}
	active={activeHit?.key === hit.key}
	onClick={() => setActiveHit(hit)}
	/>
	))}
	</div>
	)}
	</section>
	</section>

	<section className="detail-pane wide-detail">
	<div className="panel-title">
	<FileCode2 size={18} />
	Retrieved evidence
	</div>
	{!activeHit ? (
	<div className="empty-state">Select a match to inspect its code, V7 sketch, source scores, and semantic provenance.</div>
	) : (
	<HitDetail hit={activeHit} />
	)}
	</section>
	</main>
	);
	}

	function Metric({ icon: Icon, label, value }) {
	return (
	<div className="metric">
	<Icon size={18} />
	<div>
	<span>{label}</span>
	<strong>{formatNumber(value)}</strong>
	</div>
	</div>
	);
	}

	function HitRow({ hit, index, active, onClick }) {
	return (
	<button className={`hit-row ${active ? "active" : ""}`} onClick={onClick}>
	<span className="rank">{index + 1}</span>
	<span className="hit-main">
	<strong>{hit.qualified_name}</strong>
	<small>{hit.file_path}</small>
	</span>
	<span className={`source-pill ${hit.best_source}`}>{sourceName(hit.best_source)}</span>
	<span className="score">{hit.best_score.toFixed(4)}</span>
	</button>
	);
	}

	function HitDetail({ hit }) {
	return (
	<div className="detail-grid">
	<div className="detail-stack">
	<div className="detail-header">
	<div>
	<h2>{hit.qualified_name}</h2>
	<p>
	{hit.file_path}
	{hit.start_line ? `:${hit.start_line}-${hit.end_line}` : ""}
	</p>
	</div>
	<span className={`source-pill ${hit.best_source}`}>{sourceName(hit.best_source)}</span>
	</div>

	<section className="score-card">
	<h3>Source scores</h3>
	<div className="score-bars">
	{Object.entries(hit.source_scores).map(([source, score]) => (
	<div className="bar-row" key={source}>
	<span>{sourceName(source)}</span>
	<div className="bar-track">
	<div className={`bar-fill ${source}`} style={{ width: `${Math.max(2, Math.min(100, score * 100))}%` }} />
	</div>
	<strong>{score.toFixed(4)}</strong>
	</div>
	))}
	</div>
	</section>

	<section className="score-card">
	<h3>Matched vector text</h3>
	<p className="matched-text">{hit.matched_text \|\| "No text stored for this vector."}</p>
	{hit.matched_scope && <span className="scope-chip">{hit.matched_scope}</span>}
	{hit.matched_evidence?.length > 0 && (
	<div className="evidence-list">
	{hit.matched_evidence.map((item) => (
	<code key={item}>{item}</code>
	))}
	</div>
	)}
	</section>
	</div>

	<CodeBlock title="Raw code" value={hit.raw_code \|\| "Code body unavailable."} />
	<CodeBlock title="V7 sketch and propagated context" value={hit.propagated_text \|\| hit.own_sketch \|\| "Sketch unavailable."} />
	</div>
	);
	}

	function CodeBlock({ title, value }) {
	return (
	<section className="code-card">
	<h3>{title}</h3>
	<pre>{value}</pre>
	</section>
	);
	}

	createRoot(document.getElementById("root")).render(<App />);