initial: RAG Visualizer (Phases 1-4)

backend/models/schemas.py

@@ -96,7 +96,6 @@ class RetrievedChunk(BaseModel):
     end_char: int
     parent_id: Optional[str] = None
     level: int = 0
-    text_highlighted: Optional[str] = None
 
 
 class QueryResponse(BaseModel):
@@ -124,61 +123,3 @@ class CompareResponse(BaseModel):
     results_a: List[RetrievedChunk]
     results_b: List[RetrievedChunk]
     hypothetical_answer: Optional[str] = None
-
-
-class JudgeRequest(BaseModel):
-    search_query: str
-    chunk_a: str
-    chunk_b: str
-
-
-class ChunkScore(BaseModel):
-    query_relevance: int = Field(ge=1, le=10)
-    answer_completeness: int = Field(ge=1, le=10)
-    factual_plausibility: int = Field(ge=1, le=10)
-    clarity: int = Field(ge=1, le=10)
-    overall: float
-
-    @model_validator(mode="after")
-    def check_overall(self) -> "ChunkScore":
-        expected = round(
-            (
-                self.query_relevance
-                + self.answer_completeness
-                + self.factual_plausibility
-                + self.clarity
-            )
-            / 4,
-            2,
-        )
-        self.overall = expected
-        return self
-
-
-class JudgeResponse(BaseModel):
-    winner: Literal["chunk_a", "chunk_b", "tie"]
-    confidence: float = Field(ge=0, le=1)
-
-    chunk_a_score: ChunkScore
-    chunk_b_score: ChunkScore
-
-    winner_reason: str
-    chunk_a_strengths: List[str]
-    chunk_b_strengths: List[str]
-    chunk_a_weaknesses: List[str]
-    chunk_b_weaknesses: List[str]
-    deciding_dimension: str
-
-    @model_validator(mode="after")
-    def check_winner_consistency(self) -> "JudgeResponse":
-        a = self.chunk_a_score.overall
-        b = self.chunk_b_score.overall
-        gap = abs(a - b)
-
-        if gap <= 0.5:
-            self.winner = "tie"
-        elif a > b:
-            self.winner = "chunk_a"
-        else:
-            self.winner = "chunk_b"
-        return self

backend/routers/retrieval_router.py

@@ -12,8 +12,6 @@ from backend.engines.reducer import ReducerEngine
 from backend.models.schemas import (
     CompareRequest,
     CompareResponse,
-    JudgeResponse,
-    JudgeRequest,
     QueryRequest,
     QueryResponse,
     RetrievedChunk,
@@ -33,18 +31,12 @@ stop_words = set(stopwords.words("english"))
 @router.post("/retrieve", response_model=QueryResponse)
 async def retrieve(request: QueryRequest):
 
-    search_text = (
-        await get_hyde_text(request.search_text)
-        if request.use_hyde
-        else request.search_text
-    )
-
     if request.use_reranking == True:
         "" ""
 
     retrieved_chunks, embeddings = await process_retrieval(
         request.embedding_model,
-        search_text,
+        request.search_text,
         request.strategy,
         request.top_k,
         request.search_text,
@@ -62,67 +54,11 @@ async def retrieve(request: QueryRequest):
     }
 
     if request.use_hyde:
-        response_kwargs["hypothetical_answer"] = search_text
+        response_kwargs["hypothetical_answer"] = request.search_text
 
     return QueryResponse(**response_kwargs)
 
 
-@router.post("/compare", response_model=CompareResponse)
-async def compare(request: CompareRequest):
-    retrieval_text = (
-        await get_hyde_text(request.search_text)
-        if request.use_hyde
-        else request.search_text
-    )
-    (
-        (retrieved_chunks_a, _),
-        (retrieved_chunks_b, _),
-    ) = await asyncio.gather(
-        process_retrieval(
-            request.model_a,
-            retrieval_text,
-            request.strategy_a,
-            request.top_k,
-            request.search_text,
-        ),
-        process_retrieval(
-            request.model_b,
-            retrieval_text,
-            request.strategy_b,
-            request.top_k,
-            request.search_text,
-        ),
-    )
-
-    response_kwargs = {
-        "search_text": request.search_text,
-        "results_a": retrieved_chunks_a,
-        "results_b": retrieved_chunks_b,
-    }
-    if request.use_hyde:
-        response_kwargs["hypothetical_answer"] = retrieval_text
-
-    return CompareResponse(**response_kwargs)
-
-
-@router.post("/judge", response_model=JudgeResponse)
-async def judge(request: JudgeRequest):
-    prompt = system_instructions.format(
-        search_query=request.search_query,
-        chunk_a=request.chunk_a,
-        chunk_b=request.chunk_b,
-    )
-
-    llm_client = OllamaClient()
-    result = await llm_client.generate(prompt=prompt)
-
-    print(f"res:res: {result}")
-
-    result_dict = json.loads(result)
-
-    return JudgeResponse(**result_dict)
-
-
 async def process_retrieval(
     model, search_text, strategy, top_k, original_query: Optional[str] = None
 ):
@@ -147,7 +83,7 @@ async def process_retrieval(
         metadatas = result["metadatas"][0]
 
         for i in range(len(ids)):
-            text_highlighted = get_text_highlights(documents[i], highlight_text)
+
             meta = metadatas[i] or {}
             retrieved_chunks.append(
                 RetrievedChunk(
@@ -158,34 +94,7 @@ async def process_retrieval(
                     end_char=meta.get("end_char", 0),
                     parent_id=meta.get("parent_id") or None,
                     level=meta.get("level", 0),
-                    text_highlighted=text_highlighted,
                 )
             )
 
     return retrieved_chunks, embeddings
-
-
-def get_text_highlights(original_text, search_text):
-    query_keywords = get_keywords(search_text)
-    if not query_keywords:
-        return original_text
-
-    query_keywords.sort(key=len, reverse=True)
-
-    safe_keywords = [f"{re.escape(w)}(?:'s)?" for w in query_keywords]
-
-    pattern_string = r"\b(" + "|".join(safe_keywords) + r")\b"
-    pattern = re.compile(pattern_string, re.IGNORECASE)
-
-    return pattern.sub(r"<mark>\1</mark>", original_text)
-
-
-def get_keywords(text: str):
-    token = tokenizer.tokenize(text.lower())
-    return [word for word in token if word not in stop_words]
-
-
-async def get_hyde_text(search_text):
-    llm_client = OllamaClient()
-    hyde_prompt.format(search_text=search_text)
-    return await llm_client.generate(hyde_prompt, response_format=None)

frontend/app.js

@@ -1328,325 +1328,3 @@ if (dom.closeDrawer) {
 // ============================================================
 // TASK 3.5: ARENA COMPARISON LOGIC
 // ============================================================
-const domArena = {
-  modal: document.getElementById("arena-modal"),
-  btnOpen: document.getElementById("btn-open-arena"),
-  btnClose: document.getElementById("btn-close-arena"),
-  btnFight: document.getElementById("btn-arena-fight"),
-  queryInput: document.getElementById("arena-query-input"),
-  modelA: document.getElementById("arena-model-a"),
-  strategyA: document.getElementById("arena-strategy-a"),
-  resultsA: document.getElementById("arena-results-a"),
-  modelB: document.getElementById("arena-model-b"),
-  strategyB: document.getElementById("arena-strategy-b"),
-  resultsB: document.getElementById("arena-results-b"),
-};
-
-if (domArena.btnOpen) {
-  domArena.btnOpen.addEventListener("click", () => {
-    domArena.modal.style.display = "flex";
-    if (dom.queryInput && dom.queryInput.value) {
-      domArena.queryInput.value = dom.queryInput.value;
-    }
-  });
-}
-
-if (domArena.btnClose) {
-  domArena.btnClose.addEventListener("click", () => {
-    domArena.modal.style.display = "none";
-  });
-}
-
-if (domArena.btnFight) {
-  domArena.btnFight.addEventListener("click", async () => {
-    const query = domArena.queryInput.value.trim();
-    if (!query) return;
-
-    domArena.btnFight.disabled = true;
-    domArena.btnFight.textContent = "FIGHTING...";
-
-    // Reset AI Referee if active
-    if (typeof domReferee !== "undefined" && domReferee.panel) {
-      domReferee.panel.style.display = "none";
-      domReferee.verdictBox.style.display = "none";
-      domReferee.loadingBox.style.display = "none";
-      domReferee.triggerBox.style.display = "block";
-    }
-
-    domArena.resultsA.innerHTML =
-      '<div class="skeleton-loader"></div><div class="skeleton-loader"></div>';
-    domArena.resultsB.innerHTML =
-      '<div class="skeleton-loader"></div><div class="skeleton-loader"></div>';
-
-    try {
-      const res = await fetch("/api/compare", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          search_text: query,
-          top_k: 3,
-          model_a: domArena.modelA.value,
-          strategy_a: domArena.strategyA.value,
-          model_b: domArena.modelB.value,
-          strategy_b: domArena.strategyB.value,
-        }),
-      });
-
-      if (!res.ok)
-        throw new Error(
-          "Comparison failed. Check if server is running and /api/compare exists.",
-        );
-
-      const data = await res.json();
-
-      // Render Column A
-      domArena.resultsA.innerHTML = data.results_a
-        .map(
-          (chunk, i) => `
-        <div class="query-result-item" style="border-left-color: var(--warning-color)">
-          <div class="query-result-header">
-            <span class="rank-badge" style="color: var(--warning-color)">Rank ${i + 1}</span>
-            <span class="dist-badge">Dist: ${chunk.score.toFixed(3)}</span>
-          </div>
-          <div class="query-result-text">${chunk.text_highlighted || escapeHtml(chunk.text)}</div>
-        </div>
-      `,
-        )
-        .join("");
-
-      // Render Column B
-      domArena.resultsB.innerHTML = data.results_b
-        .map(
-          (chunk, i) => `
-        <div class="query-result-item" style="border-left-color: var(--info-color)">
-          <div class="query-result-header">
-            <span class="rank-badge" style="color: var(--info-color)">Rank ${i + 1}</span>
-            <span class="dist-badge">Dist: ${chunk.score.toFixed(3)}</span>
-          </div>
-          <div class="query-result-text">${chunk.text_highlighted || escapeHtml(chunk.text)}</div>
-        </div>
-      `,
-        )
-        .join("");
-
-      // Activate AI Referee if both sides retrieved chunks
-      if (
-        typeof domReferee !== "undefined" &&
-        domReferee.panel &&
-        data.results_a.length > 0 &&
-        data.results_b.length > 0
-      ) {
-        domReferee.panel.style.display = "block";
-        domReferee.btnCall.dataset.query = query;
-        domReferee.btnCall.dataset.chunkA = data.results_a[0].text;
-        domReferee.btnCall.dataset.chunkB = data.results_b[0].text;
-      }
-    } catch (err) {
-      console.error(err);
-      domArena.resultsA.innerHTML = `<div style="color: var(--superman-red); padding: 1rem;">Error: ${err.message}</div>`;
-      domArena.resultsB.innerHTML = `<div style="color: var(--superman-red); padding: 1rem;">Error: ${err.message}</div>`;
-    } finally {
-      domArena.btnFight.disabled = false;
-      domArena.btnFight.textContent = "🔥 FIGHT!";
-    }
-  });
-}
-
-// ============================================================
-// TASK 5.1: AI REFEREE / LLM-AS-A-JUDGE LOGIC
-// ============================================================
-const domReferee = {
-  panel: document.getElementById("arena-referee-panel"),
-  triggerBox: document.getElementById("referee-trigger-box"),
-  btnCall: document.getElementById("btn-call-referee"),
-  loadingBox: document.getElementById("referee-loading-box"),
-  statusText: document.getElementById("referee-status-text"),
-  verdictBox: document.getElementById("referee-verdict-box"),
-};
-
-if (domReferee.btnCall) {
-  domReferee.btnCall.addEventListener("click", async () => {
-    const query = domReferee.btnCall.dataset.query;
-    const chunkA = domReferee.btnCall.dataset.chunkA;
-    const chunkB = domReferee.btnCall.dataset.chunkB;
-    if (!query || !chunkA || !chunkB) return;
-
-    // Capture user-selected model names for clean revealed scorecard display
-    const labelA = domArena.modelA.options[domArena.modelA.selectedIndex].text;
-    const labelB = domArena.modelB.options[domArena.modelB.selectedIndex].text;
-
-    domReferee.triggerBox.style.display = "none";
-    domReferee.loadingBox.style.display = "block";
-    domReferee.verdictBox.style.display = "none";
-
-    const statuses = [
-      "⚖️ Summoning Gemma evaluation referee...",
-      "🔍 Blinding model names and metadata...",
-      "🧠 Auditing Corner A relevance and clarity...",
-      "🧠 Auditing Corner B completeness and truthfulness...",
-      "📊 Aggregating overall dimensional scores...",
-      "✍️ Draft verdict and writing final card...",
-    ];
-    let statusIdx = 0;
-    domReferee.statusText.textContent = statuses[0];
-    const statusInterval = setInterval(() => {
-      statusIdx = (statusIdx + 1) % statuses.length;
-      domReferee.statusText.textContent = statuses[statusIdx];
-    }, 1500);
-
-    try {
-      const res = await fetch("/api/judge", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          search_query: query,
-          chunk_a: chunkA,
-          chunk_b: chunkB,
-        }),
-      });
-
-      if (!res.ok)
-        throw new Error(
-          "Gemma evaluation failed. Check if local Ollama server is running.",
-        );
-
-      const data = await res.json();
-      clearInterval(statusInterval);
-
-      renderRefereeScorecard(data, labelA, labelB);
-    } catch (err) {
-      clearInterval(statusInterval);
-      console.error(err);
-      domReferee.verdictBox.innerHTML = `
-        <div style="color: var(--superman-red); text-align: center; padding: 1.5rem; border: 1px solid var(--superman-red-glow); border-radius: 6px; background-color: var(--superman-red-muted);">
-          <strong>Referee Error:</strong> ${err.message}
-        </div>
-      `;
-      domReferee.verdictBox.style.display = "block";
-    } finally {
-      domReferee.loadingBox.style.display = "none";
-    }
-  });
-}
-
-function renderRefereeScorecard(data, labelA, labelB) {
-  const isA = data.winner === "chunk_a";
-  const isB = data.winner === "chunk_b";
-  const isTie = data.winner === "tie";
-
-  let winnerColor = "var(--superman-yellow)";
-  let winnerBanner = "⚖️ IT'S A TIE";
-  if (isA) {
-    winnerColor = "var(--superman-yellow)";
-    winnerBanner = `🏆 ${labelA.toUpperCase()} WINS`;
-  } else if (isB) {
-    winnerColor = "var(--superman-blue)";
-    winnerBanner = `🏆 ${labelB.toUpperCase()} WINS`;
-  }
-
-  // Dynamically replace blinded chunk labels with actual bolded model names
-  const boldLabelA = `<strong>${labelA}</strong>`;
-  const boldLabelB = `<strong>${labelB}</strong>`;
-
-  let cleanedReason = data.winner_reason.trim();
-  // Strip leading/trailing quote characters
-  cleanedReason = cleanedReason
-    .replace(/^["']/, "")
-    .replace(/["']$/, "")
-    .trim();
-  // Collapse any newlines or multiple whitespace characters to a single space for single-line display
-  cleanedReason = cleanedReason.replace(/\r?\n|\r/g, " ").replace(/\s+/g, " ");
-
-  cleanedReason = cleanedReason
-    .replace(/\b(Chunk A|chunk_a|chunk A)\b/g, boldLabelA)
-    .replace(/\b(Chunk B|chunk_b|chunk B)\b/g, boldLabelB);
-
-  const scoreCardHtml = `
-    <div class="verdict-banner" style="background-color: ${winnerColor}-muted; border-color: ${winnerColor};">
-      <div class="verdict-title" style="color: ${winnerColor}">${winnerBanner}</div>
-      <div class="verdict-confidence">Confidence: ${(data.confidence * 100).toFixed(0)}%</div>
-    </div>
-    
-    <div class="verdict-reason">
-      <strong>Verdict Reason:</strong>
-      <p>${cleanedReason}</p>
-      <div class="deciding-factor">Deciding Factor: <code>${data.deciding_dimension}</code></div>
-    </div>
-
-    <!-- Comparative Table of dimensions -->
-    <div class="referee-scores-table">
-      <div class="scores-table-header">
-        <span class="score-col-label">Criterion</span>
-        <span class="score-col-val" style="font-size: 0.65rem; color: var(--superman-yellow);">${labelA}</span>
-        <span class="score-col-bar">Comparison</span>
-        <span class="score-col-val" style="font-size: 0.65rem; color: var(--superman-blue);">${labelB}</span>
-      </div>
-      
-      ${renderScoreRow("Query Relevance", data.chunk_a_score.query_relevance, data.chunk_b_score.query_relevance)}
-      ${renderScoreRow("Completeness", data.chunk_a_score.answer_completeness, data.chunk_b_score.answer_completeness)}
-      ${renderScoreRow("Plausibility", data.chunk_a_score.factual_plausibility, data.chunk_b_score.factual_plausibility)}
-      ${renderScoreRow("Clarity & Style", data.chunk_a_score.clarity, data.chunk_b_score.clarity)}
-      
-      <div class="scores-table-row overall-row">
-        <span class="score-col-label"><strong>Overall Average</strong></span>
-        <span class="score-col-val" style="color: var(--superman-yellow)"><strong>${data.chunk_a_score.overall.toFixed(2)}</strong></span>
-        <span class="score-col-bar">
-          <div class="overall-progress-bar">
-            <div class="overall-val-a" style="width: ${data.chunk_a_score.overall * 10}%"></div>
-            <div class="overall-val-b" style="width: ${data.chunk_b_score.overall * 10}%"></div>
-          </div>
-        </span>
-        <span class="score-col-val" style="color: var(--superman-blue)"><strong>${data.chunk_b_score.overall.toFixed(2)}</strong></span>
-      </div>
-    </div>
-
-    <!-- Strengths & Weaknesses Column -->
-    <div class="verdict-details-grid">
-      <div class="verdict-details-col">
-        <h4>${labelA} Analysis</h4>
-        <div class="verdict-list-title strength-list-title">🟢 Strengths</div>
-        <ul>
-          ${data.chunk_a_strengths.map((s) => `<li>${escapeHtml(s)}</li>`).join("")}
-        </ul>
-        <div class="verdict-list-title weakness-list-title">🔴 Weaknesses</div>
-        <ul>
-          ${data.chunk_a_weaknesses.map((w) => `<li>${escapeHtml(w)}</li>`).join("")}
-        </ul>
-      </div>
-      
-      <div class="verdict-details-col">
-        <h4>${labelB} Analysis</h4>
-        <div class="verdict-list-title strength-list-title">🟢 Strengths</div>
-        <ul>
-          ${data.chunk_b_strengths.map((s) => `<li>${escapeHtml(s)}</li>`).join("")}
-        </ul>
-        <div class="verdict-list-title weakness-list-title">🔴 Weaknesses</div>
-        <ul>
-          ${data.chunk_b_weaknesses.map((w) => `<li>${escapeHtml(w)}</li>`).join("")}
-        </ul>
-      </div>
-    </div>
-  `;
-
-  domReferee.verdictBox.innerHTML = scoreCardHtml;
-  domReferee.verdictBox.style.display = "block";
-}
-
-function renderScoreRow(label, valA, valB) {
-  const pctA = valA * 10;
-  const pctB = valB * 10;
-
-  return `
-    <div class="scores-table-row">
-      <span class="score-col-label">${label}</span>
-      <span class="score-col-val">${valA}/10</span>
-      <span class="score-col-bar">
-        <div class="score-progress-bar">
-          <div class="score-val-a" style="width: ${pctA}%"></div>
-          <div class="score-val-b" style="width: ${pctB}%"></div>
-        </div>
-      </span>
-      <span class="score-col-val">${valB}/10</span>
-    </div>
-  `;
-}

frontend/index.html

@@ -240,7 +240,6 @@
             <div class="query-simulator-section">
               <div class="query-section-title" style="display: flex; justify-content: space-between; align-items: center;">
                 <span>🔮 Sonar Query Simulator (RAG Retrieval)</span>
-                <button id="btn-open-arena" class="btn-sm" style="background: var(--superman-red); color: white; border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; font-family: var(--font-sans);">⚔️ Arena Comparison</button>
               </div>
               <div class="query-input-wrapper">
                 <input type="text" id="query-input" placeholder="Type a concept query to fetch semantically similar chunks (e.g. 'linear regression')..." />
@@ -296,93 +295,6 @@
         </div>
       </aside>
 
-      <!-- ===== THE ARENA MODAL ===== -->
-      <div id="arena-modal" class="arena-modal-overlay" style="display: none;">
-        <div class="arena-modal-content">
-          <div class="arena-header">
-            <h2>⚔️ The Grand Comparison Arena</h2>
-            <button id="btn-close-arena" class="btn-close-arena">&times;</button>
-          </div>
-          
-          <div class="arena-query-bar">
-            <input type="text" id="arena-query-input" placeholder="Type a query to compare configurations (e.g., 'What is Clark Kent's weakness?')..." />
-            <button class="btn-run" id="btn-arena-fight" style="width: 150px; flex-shrink: 0;">🔥 FIGHT!</button>
-          </div>
-
-          <div class="arena-body">
-            <div class="arena-columns">
-              <!-- COLUMN A -->
-              <div class="arena-col">
-                <div class="arena-col-header">
-                  <h3>Corner A</h3>
-                  <div class="arena-config-row">
-                    <select id="arena-model-a" class="select-input">
-                      <option value="nomic-embed-text">Nomic Embed</option>
-                      <option value="EmbeddingGemma">Gemma Embed</option>
-                      <option value="qwen3-embedding:0.6b">Qwen3 Embed</option>
-                    </select>
-                    <select id="arena-strategy-a" class="select-input">
-                      <option value="fixed_size">Fixed Size</option>
-                      <option value="sentence">Sentence</option>
-                      <option value="recursive">Recursive</option>
-                      <option value="semantic">Semantic</option>
-                    </select>
-                  </div>
-                </div>
-                <div class="arena-results-list" id="arena-results-a">
-                  <div style="text-align: center; color: var(--text-tertiary); padding: 2rem;">Awaiting challengers...</div>
-                </div>
-              </div>
-
-              <!-- COLUMN B -->
-              <div class="arena-col">
-                <div class="arena-col-header" style="border-bottom-color: var(--info-color);">
-                  <h3>Corner B</h3>
-                  <div class="arena-config-row">
-                    <select id="arena-model-b" class="select-input">
-                      <option value="nomic-embed-text">Nomic Embed</option>
-                      <option value="EmbeddingGemma">Gemma Embed</option>
-                      <option value="qwen3-embedding:0.6b">Qwen3 Embed</option>
-                    </select>
-                    <select id="arena-strategy-b" class="select-input">
-                      <option value="fixed_size">Fixed Size</option>
-                      <option value="sentence">Sentence</option>
-                      <option value="recursive">Recursive</option>
-                      <option value="semantic">Semantic</option>
-                    </select>
-                  </div>
-                </div>
-                <div class="arena-results-list" id="arena-results-b">
-                  <div style="text-align: center; color: var(--text-tertiary); padding: 2rem;">Awaiting challengers...</div>
-                </div>
-              </div>
-            </div>
-
-            <!-- THE AI REFEREE PANEL (TASK 5.1) -->
-            <div class="arena-referee-panel" id="arena-referee-panel" style="display: none;">
-              <div class="referee-divider">
-                <span class="referee-badge">⚖️ THE AI REFEREE</span>
-              </div>
-              
-              <div class="referee-trigger-box" id="referee-trigger-box">
-                <p class="referee-prompt-text">Call upon the local Gemma model to analyze, score, and judge both contexts!</p>
-                <button class="btn-run" id="btn-call-referee" style="margin: 0 auto; display: block; max-width: 250px;">⚖️ CALL THE REFEREE</button>
-              </div>
-
-              <!-- Loading scanner status -->
-              <div class="referee-loading-box" id="referee-loading-box" style="display: none;">
-                <div class="skeleton-loader" style="max-width: 400px; margin: 0 auto 1rem; border-radius: 6px;"></div>
-                <div class="referee-status-text" id="referee-status-text">Summoning Gemma to review the case...</div>
-              </div>
-
-              <!-- Scorecard Verdict Display -->
-              <div class="referee-verdict-box" id="referee-verdict-box" style="display: none;"></div>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
     </main>
   </div>
 

frontend/styles.css

@@ -750,134 +750,6 @@ input[type="range"]::-moz-range-thumb {
   cursor: help;
 }
 
-
-/* ============================================================
-   THE GRAND COMPARISON ARENA (TASK 3.5)
-   ============================================================ */
-.arena-modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(15, 23, 42, 0.9);
-  backdrop-filter: blur(8px);
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.arena-modal-content {
-  background: var(--bg-surface);
-  width: 90vw;
-  height: 90vh;
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border: 1px solid var(--border-default);
-}
-
-.arena-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--space-md) var(--space-xl);
-  background: var(--bg-surface-elevated);
-  border-bottom: 1px solid var(--border-default);
-}
-
-.arena-header h2 {
-  margin: 0;
-  font-size: 1.25rem;
-  color: var(--superman-red);
-}
-
-.btn-close-arena {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  font-size: 1.5rem;
-  cursor: pointer;
-}
-
-.btn-close-arena:hover {
-  color: var(--superman-red);
-}
-
-.arena-query-bar {
-  display: flex;
-  padding: var(--space-lg) var(--space-xl);
-  gap: var(--space-md);
-  background: var(--bg-surface-elevated);
-  border-bottom: 1px solid var(--border-default);
-}
-
-.arena-query-bar input {
-  flex: 1;
-  padding: var(--space-md) var(--space-lg);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border-default);
-  background: var(--bg-surface);
-  color: var(--text-primary);
-  font-size: 1rem;
-}
-
-.arena-columns {
-  display: flex;
-  height: 385px;
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--border-default);
-}
-
-.arena-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 0 var(--space-xl) 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.arena-col {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--border-default);
-}
-.arena-col:last-child {
-  border-right: none;
-}
-
-.arena-col-header {
-  padding: var(--space-md) var(--space-xl);
-  border-bottom: 2px solid var(--warning-color);
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.arena-col-header h3 {
-  margin: 0 0 var(--space-sm) 0;
-  font-size: 1.1rem;
-  font-weight: 700;
-  color: var(--text-primary);
-}
-
-.arena-config-row {
-  display: flex;
-  gap: var(--space-sm);
-}
-
-.arena-config-row select {
-  flex: 1;
-}
-
-.arena-results-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-xl);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-}
-
 /* Low opacity wash of primary colors, no underlines */
 .chunk-highlight[data-color="1"] { background: rgba(37, 99, 235, 0.1); }
 .chunk-highlight[data-color="2"] { background: rgba(239, 68, 68, 0.1); }
@@ -1558,310 +1430,6 @@ input[type="range"]::-moz-range-thumb {
     border-right: none;
     border-bottom: 1px solid var(--border-default);
   }
-}
-
-/* ============================================================
-   12. AI REFEREE (TASK 5.1)
-   ============================================================ */
-.arena-referee-panel {
-  margin-top: 2rem;
-  padding: 1.5rem;
-  border-radius: 8px;
-  background-color: var(--bg-surface-raised);
-  border: 1px solid var(--border-default);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
-}
-
-.referee-divider {
-  display: flex;
-  align-items: center;
-  text-align: center;
-  margin-bottom: 1.5rem;
-}
-
-.referee-divider::before,
-.referee-divider::after {
-  content: '';
-  flex: 1;
-  border-bottom: 1px dashed var(--border-default);
-}
-
-.referee-badge {
-  padding: 0.25rem 0.75rem;
-  font-family: 'Roboto Condensed', sans-serif;
-  font-weight: 700;
-  font-size: 0.85rem;
-  color: var(--superman-blue);
-  background-color: var(--superman-blue-muted);
-  border-radius: 50px;
-  border: 1px solid rgba(37, 99, 235, 0.2);
-  letter-spacing: 0.05em;
-  margin: 0 1rem;
-}
-
-.referee-prompt-text {
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-  margin-bottom: 1rem;
-}
-
-.referee-status-text {
-  text-align: center;
-  font-weight: 500;
-  color: var(--superman-blue);
-  font-size: 0.9rem;
-  animation: pulse 1.5s infinite ease-in-out;
-}
-
-.referee-verdict-box {
-  animation: fadeIn 0.4s ease-out;
-}
-
-/* Verdict banner */
-.verdict-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.5rem;
-  border-radius: 6px;
-  border: 1.5px solid;
-  margin-bottom: 1.5rem;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
-}
-
-.verdict-title {
-  font-family: 'Roboto Condensed', sans-serif;
-  font-weight: 700;
-  font-size: 1.2rem;
-  letter-spacing: 0.02em;
-}
-
-.verdict-confidence {
-  font-size: 0.85rem;
-  font-weight: 600;
-  background-color: rgba(255, 255, 255, 0.7);
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-/* Verdict reason */
-.verdict-reason {
-  background-color: var(--bg-surface);
-  padding: 1.25rem;
-  border-radius: 6px;
-  border: 1px solid var(--border-default);
-  margin-bottom: 1.5rem;
-}
-
-.verdict-reason > strong {
-  display: block;
-  font-size: 0.85rem;
-  color: var(--text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 0.5rem;
-}
-
-.verdict-reason p {
-  font-size: 0.95rem;
-  color: var(--text-primary);
-  line-height: 1.5;
-  margin-bottom: 0.75rem;
-  font-style: italic;
-}
-
-.deciding-factor {
-  font-size: 0.8rem;
-  color: var(--text-tertiary);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.deciding-factor code {
-  background-color: var(--bg-surface-raised);
-  padding: 0.1rem 0.4rem;
-  border-radius: 4px;
-  font-family: 'JetBrains Mono', monospace;
-  color: var(--superman-red);
-  font-weight: 600;
-}
-
-/* Scorecard Table */
-.referee-scores-table {
-  background-color: var(--bg-surface);
-  border: 1px solid var(--border-default);
-  border-radius: 6px;
-  overflow: hidden;
-  margin-bottom: 1.5rem;
-}
-
-.scores-table-header {
-  display: grid;
-  grid-template-columns: 150px 70px 1fr 70px;
-  padding: 0.75rem 1rem;
-  background-color: var(--bg-surface-raised);
-  border-bottom: 1px solid var(--border-default);
-  font-weight: 600;
-  font-size: 0.8rem;
-  color: var(--text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.scores-table-row {
-  display: grid;
-  grid-template-columns: 150px 70px 1fr 70px;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border-default);
-  font-size: 0.9rem;
-}
-
-.scores-table-row:last-child {
-  border-bottom: none;
-}
-
-.overall-row {
-  background-color: rgba(37, 99, 235, 0.02);
-  border-top: 1.5px solid var(--border-default);
-}
-
-.score-col-label {
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.score-col-val {
-  text-align: center;
-  font-weight: 600;
-}
-
-.score-col-bar {
-  padding: 0 1rem;
-}
-
-.score-progress-bar {
-  height: 6px;
-  background-color: #e2e8f0;
-  border-radius: 10px;
-  overflow: hidden;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2px;
-}
-
-.score-val-a {
-  background-color: var(--superman-yellow);
-  height: 100%;
-  border-radius: 10px 0 0 10px;
-  justify-self: end;
-}
-
-.score-val-b {
-  background-color: var(--superman-blue);
-  height: 100%;
-  border-radius: 0 10px 10px 0;
-  justify-self: start;
-}
-
-.overall-progress-bar {
-  height: 10px;
-  background-color: #e2e8f0;
-  border-radius: 10px;
-  overflow: hidden;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2px;
-}
-
-.overall-val-a {
-  background-color: var(--superman-yellow);
-  height: 100%;
-  border-radius: 10px 0 0 10px;
-  justify-self: end;
-}
-
-.overall-val-b {
-  background-color: var(--superman-blue);
-  height: 100%;
-  border-radius: 0 10px 10px 0;
-  justify-self: start;
-}
-
-/* Strengths & Weaknesses Columns */
-.verdict-details-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1.5rem;
-}
-
-.verdict-details-col {
-  background-color: var(--bg-surface);
-  border: 1px solid var(--border-default);
-  padding: 1.25rem;
-  border-radius: 6px;
-}
-
-.verdict-details-col h4 {
-  font-family: 'Roboto Condensed', sans-serif;
-  font-weight: 700;
-  margin-bottom: 1rem;
-  font-size: 1rem;
-  border-bottom: 1.5px solid var(--border-default);
-  padding-bottom: 0.5rem;
-}
-
-.verdict-details-col:first-child h4 {
-  color: var(--warning-color);
-  border-bottom-color: rgba(245, 158, 11, 0.2);
-}
-
-.verdict-details-col:last-child h4 {
-  color: var(--info-color);
-  border-bottom-color: rgba(59, 130, 246, 0.2);
-}
-
-.verdict-list-title {
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 0.5rem;
-}
-
-.strength-list-title {
-  color: #16a34a;
-}
-
-.weakness-list-title {
-  color: #dc2626;
-  margin-top: 1rem;
-}
-
-.verdict-details-col ul {
-  padding-left: 1.25rem;
-  margin: 0;
-}
-
-.verdict-details-col li {
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  line-height: 1.4;
-  margin-bottom: 0.4rem;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-
-/* ============================================================
-   RETRIEVAL X-RAY HIGHLIGHTS (TASK 3.4)
-   ============================================================ */
 .xray-content.search-active .chunk-highlight {
   opacity: 0.3;
   transition: all 0.3s ease;