Add Verdicts tab with Linus/Donald/Bjarne opinions

app.js

@@ -0,0 +1,276 @@
+/* --- DOM refs --- */
+const form = document.getElementById("review-form");
+const urlInput = document.getElementById("url-input");
+const submitBtn = document.getElementById("submit-btn");
+const inputError = document.getElementById("input-error");
+const metaEl = document.getElementById("meta");
+const metaRepo = document.getElementById("meta-repo");
+const metaPath = document.getElementById("meta-path");
+const metaBranch = document.getElementById("meta-branch");
+const tabsEl = document.getElementById("tabs");
+const tabContent = document.getElementById("tab-content");
+const streamError = document.getElementById("stream-error");
+const tabButtons = document.querySelectorAll(".tab");
+
+const GITHUB_BLOB_RE = /^https?:\/\/github\.com\/[^/]+\/[^/]+\/blob\/[^/]+\/.+$/;
+
+/* --- Section parsing --- */
+
+const SECTION_KEYS = ["summary", "quality", "performance", "security", "suggestions", "verdicts"];
+
+// Maps heading text (lowercased) to our section key
+const HEADING_MAP = {
+  summary: "summary",
+  "code quality": "quality",
+  performance: "performance",
+  security: "security",
+  suggestions: "suggestions",
+  verdicts: "verdicts",
+};
+
+function parseSections(markdown) {
+  const sections = {};
+  let currentKey = null;
+
+  for (const line of markdown.split("\n")) {
+    const m = line.match(/^## (.+)$/);
+    if (m) {
+      const title = m[1].trim().toLowerCase();
+      const matched = Object.entries(HEADING_MAP).find(([kw]) => title.includes(kw));
+      if (matched) {
+        currentKey = matched[1];
+        sections[currentKey] = "";
+        continue;
+      }
+    }
+    if (currentKey) {
+      sections[currentKey] = (sections[currentKey] || "") + line + "\n";
+    }
+  }
+  return sections;
+}
+
+// Detect which section the model is currently writing to (last matched heading)
+function detectCurrentSection(markdown) {
+  let last = null;
+  for (const line of markdown.split("\n")) {
+    const m = line.match(/^## (.+)$/);
+    if (m) {
+      const title = m[1].trim().toLowerCase();
+      const matched = Object.entries(HEADING_MAP).find(([kw]) => title.includes(kw));
+      if (matched) last = matched[1];
+    }
+  }
+  return last;
+}
+
+/* --- Diff-aware marked renderer --- */
+
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+function isDiffContent(text) {
+  const lines = text.split("\n");
+  let diffLines = 0;
+  for (const l of lines) {
+    if (l.startsWith("+") || l.startsWith("-") || l.startsWith("@@")) diffLines++;
+  }
+  return diffLines >= 2;
+}
+
+function renderDiffBlock(text) {
+  const lines = text.split("\n").map((line) => {
+    const escaped = escapeHtml(line);
+    if (line.startsWith("+++") || line.startsWith("---")) {
+      return `<span class="diff-line diff-info">${escaped}</span>`;
+    }
+    if (line.startsWith("+")) {
+      return `<span class="diff-line diff-add">${escaped}</span>`;
+    }
+    if (line.startsWith("-")) {
+      return `<span class="diff-line diff-del">${escaped}</span>`;
+    }
+    if (line.startsWith("@@")) {
+      return `<span class="diff-line diff-info">${escaped}</span>`;
+    }
+    return `<span class="diff-line diff-neutral">${escaped}</span>`;
+  });
+  return `<pre class="diff-block"><code>${lines.join("")}</code></pre>`;
+}
+
+const renderer = {
+  code({ text, lang, language }) {
+    const codeLang = (lang || language || "").toLowerCase().trim();
+    // Render as diff if tagged as diff OR if content looks like a diff
+    if (codeLang === "diff" || (!codeLang && isDiffContent(text))) {
+      return renderDiffBlock(text);
+    }
+    const langClass = codeLang ? ` class="language-${escapeHtml(codeLang)}"` : "";
+    return `<pre><code${langClass}>${escapeHtml(text)}</code></pre>`;
+  },
+};
+
+marked.use({ renderer });
+
+function renderMarkdown(md) {
+  return DOMPurify.sanitize(marked.parse(md));
+}
+
+/* --- Tab management --- */
+
+let activeTab = "summary";
+let manualSwitch = false;
+let currentSections = {};
+
+tabButtons.forEach((btn) => {
+  btn.addEventListener("click", () => {
+    manualSwitch = true;
+    setActiveTab(btn.dataset.section);
+    renderActiveTab();
+  });
+});
+
+function setActiveTab(section) {
+  activeTab = section;
+  tabButtons.forEach((btn) => {
+    btn.classList.toggle("active", btn.dataset.section === section);
+  });
+}
+
+function renderActiveTab() {
+  const md = currentSections[activeTab] || "";
+  if (md.trim()) {
+    tabContent.innerHTML = renderMarkdown(md);
+    tabContent.classList.remove("tab-content-empty");
+  } else {
+    tabContent.textContent = "Waiting for content\u2026";
+    tabContent.classList.add("tab-content-empty");
+  }
+}
+
+function updateTabs(sections, currentStreamSection) {
+  currentSections = sections;
+
+  // Mark tabs that have content + which one is streaming
+  tabButtons.forEach((btn) => {
+    const key = btn.dataset.section;
+    btn.classList.toggle("has-content", !!sections[key]?.trim());
+    btn.classList.toggle("streaming", key === currentStreamSection);
+  });
+
+  // Auto-switch to the section currently being written (unless user clicked a tab)
+  if (!manualSwitch && currentStreamSection) {
+    setActiveTab(currentStreamSection);
+  }
+
+  renderActiveTab();
+}
+
+/* --- Review flow --- */
+
+let currentSource = null;
+
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+  startReview();
+});
+
+/* --- Sample buttons --- */
+
+document.querySelectorAll(".sample-btn").forEach((btn) => {
+  btn.addEventListener("click", () => {
+    urlInput.value = btn.dataset.url;
+    startReview();
+  });
+});
+
+function startReview() {
+  const url = urlInput.value.trim();
+
+  // Reset
+  inputError.hidden = true;
+  streamError.hidden = true;
+  metaEl.hidden = true;
+  tabsEl.hidden = true;
+  tabContent.textContent = "";
+  manualSwitch = false;
+  setActiveTab("summary");
+  tabButtons.forEach((btn) => {
+    btn.classList.remove("has-content", "streaming");
+  });
+
+  if (!url) { showInputError("Please enter a GitHub file URL."); return; }
+  if (!GITHUB_BLOB_RE.test(url)) {
+    showInputError("URL must be a GitHub blob URL (e.g. https://github.com/owner/repo/blob/main/file.js).");
+    return;
+  }
+
+  if (currentSource) { currentSource.close(); currentSource = null; }
+  setLoading(true);
+
+  let markdown = "";
+  const source = new EventSource(`/api/review?url=${encodeURIComponent(url)}`);
+  currentSource = source;
+
+  source.addEventListener("meta", (e) => {
+    const data = JSON.parse(e.data);
+    metaRepo.textContent = `${data.owner}/${data.repo}`;
+    metaPath.textContent = data.path;
+    metaBranch.textContent = data.branch;
+    metaEl.hidden = false;
+    tabsEl.hidden = false;
+    tabContent.classList.add("is-streaming");
+  });
+
+  source.addEventListener("content", (e) => {
+    const data = JSON.parse(e.data);
+    markdown += data.text;
+    const sections = parseSections(markdown);
+    const current = detectCurrentSection(markdown);
+    updateTabs(sections, current);
+  });
+
+  source.addEventListener("done", () => {
+    cleanup();
+    // Final render with no streaming section
+    const sections = parseSections(markdown);
+    updateTabs(sections, null);
+  });
+
+  source.addEventListener("error", (e) => {
+    if (e.data) {
+      const data = JSON.parse(e.data);
+      showStreamError(data.message);
+    } else {
+      showStreamError("Connection lost. Please try again.");
+    }
+    cleanup();
+  });
+
+  function cleanup() {
+    source.close();
+    currentSource = null;
+    setLoading(false);
+    tabContent.classList.remove("is-streaming");
+    tabButtons.forEach((btn) => btn.classList.remove("streaming"));
+  }
+}
+
+/* --- Helpers --- */
+
+function setLoading(on) {
+  submitBtn.disabled = on;
+  submitBtn.textContent = on ? "Reviewing\u2026" : "Review Code";
+  document.body.classList.toggle("loading", on);
+}
+
+function showInputError(msg) {
+  inputError.textContent = msg;
+  inputError.hidden = false;
+}
+
+function showStreamError(msg) {
+  streamError.textContent = msg;
+  streamError.hidden = false;
+}

index.html

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Arcee AI Trinity Large Code Review</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <main>
+    <header class="app-header">
+      <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/6435718aaaef013d1aec3b8b/GZPnGkfMn8Ino6JbkL4fJ.png" alt="Arcee AI" class="logo">
+      <div>
+        <h1>Arcee AI Trinity Large Code Review</h1>
+        <p class="subtitle">Paste a public GitHub file URL for an AI-powered code review.</p>
+      </div>
+    </header>
+    <nav class="resources">
+      <a href="https://www.arcee.ai/blog/trinity-large" target="_blank" rel="noopener">Trinity Large Preview blog post</a>
+      <a href="https://huggingface.co/arcee-ai/Trinity-Large-Preview" target="_blank" rel="noopener">Trinity Large Preview on Hugging Face</a>
+      <a href="https://openrouter.ai/arcee-ai/trinity-large-preview:free" target="_blank" rel="noopener">Trinity Large Preview on OpenRouter</a>
+    </nav>
+
+    <form id="review-form">
+      <div class="input-row">
+        <input
+          type="url"
+          id="url-input"
+          placeholder="https://github.com/owner/repo/blob/main/path/to/file.js"
+          required
+        >
+        <button type="submit" id="submit-btn">Review Code</button>
+      </div>
+      <p id="input-error" class="error" hidden></p>
+    </form>
+
+    <section id="samples">
+      <p class="samples-label">Try a sample:</p>
+      <div class="samples-grid">
+        <button class="sample-btn" data-url="https://github.com/torvalds/linux/blob/master/lib/rbtree.c">
+          <span class="sample-lang">C</span>
+          <span class="sample-name">Linux Kernel — rbtree.c</span>
+        </button>
+        <button class="sample-btn" data-url="https://github.com/redis/redis/blob/unstable/src/dict.c">
+          <span class="sample-lang">C</span>
+          <span class="sample-name">Redis — dict.c</span>
+        </button>
+        <button class="sample-btn" data-url="https://github.com/kubernetes/kubernetes/blob/master/pkg/scheduler/schedule_one.go">
+          <span class="sample-lang">Go</span>
+          <span class="sample-name">Kubernetes — schedule_one.go</span>
+        </button>
+        <button class="sample-btn" data-url="https://github.com/golang/go/blob/master/src/runtime/malloc.go">
+          <span class="sample-lang">Go</span>
+          <span class="sample-name">Go runtime — malloc.go</span>
+        </button>
+        <button class="sample-btn" data-url="https://github.com/pytorch/pytorch/blob/main/torch/autograd/function.py">
+          <span class="sample-lang">Python</span>
+          <span class="sample-name">PyTorch — autograd/function.py</span>
+        </button>
+        <button class="sample-btn" data-url="https://github.com/django/django/blob/main/django/db/models/expressions.py">
+          <span class="sample-lang">Python</span>
+          <span class="sample-name">Django — expressions.py</span>
+        </button>
+        <button class="sample-btn" data-url="https://github.com/nodejs/node/blob/main/lib/internal/streams/readable.js">
+          <span class="sample-lang">JavaScript</span>
+          <span class="sample-name">Node.js — streams/readable.js</span>
+        </button>
+        <button class="sample-btn" data-url="https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiber.js">
+          <span class="sample-lang">JavaScript</span>
+          <span class="sample-name">React — ReactFiber.js</span>
+        </button>
+        <button class="sample-btn" data-url="https://github.com/microsoft/TypeScript/blob/main/src/compiler/visitorPublic.ts">
+          <span class="sample-lang">TypeScript</span>
+          <span class="sample-name">TypeScript — visitorPublic.ts</span>
+        </button>
+        <button class="sample-btn" data-url="https://github.com/rails/rails/blob/main/activerecord/lib/active_record/relation/query_methods.rb">
+          <span class="sample-lang">Ruby</span>
+          <span class="sample-name">Rails — query_methods.rb</span>
+        </button>
+        <button class="sample-btn" data-url="https://github.com/ggerganov/llama.cpp/blob/master/src/llama.cpp">
+          <span class="sample-lang">C++</span>
+          <span class="sample-name">llama.cpp — llama.cpp</span>
+        </button>
+        <button class="sample-btn" data-url="https://github.com/ARM-software/optimized-routines/blob/master/string/aarch64/memcpy.S">
+          <span class="sample-lang">ARM64 ASM</span>
+          <span class="sample-name">ARM — memcpy.S</span>
+        </button>
+        <button class="sample-btn" data-url="https://github.com/bminor/glibc/blob/master/sysdeps/x86_64/multiarch/memmove-vec-unaligned-erms.S">
+          <span class="sample-lang">x86-64 ASM</span>
+          <span class="sample-name">glibc — memmove-vec.S</span>
+        </button>
+      </div>
+    </section>
+
+    <div id="meta" hidden>
+      <span id="meta-repo"></span>
+      <span id="meta-path"></span>
+      <span id="meta-branch"></span>
+    </div>
+
+    <div id="tabs" hidden>
+      <nav class="tab-bar">
+        <button class="tab active" data-section="summary">Summary</button>
+        <button class="tab" data-section="quality">Code Quality</button>
+        <button class="tab" data-section="performance">Performance</button>
+        <button class="tab" data-section="security">Security</button>
+        <button class="tab" data-section="suggestions">Suggestions</button>
+        <button class="tab" data-section="verdicts">Verdicts</button>
+      </nav>
+      <div id="tab-content" class="tab-content"></div>
+    </div>
+
+    <div id="stream-error" class="error" hidden></div>
+  </main>
+
+  <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>

public/app.js

@@ -16,7 +16,7 @@ const GITHUB_BLOB_RE = /^https?:\/\/github\.com\/[^/]+\/[^/]+\/blob\/[^/]+\/.+$/
 
 /* --- Section parsing --- */
 
-const SECTION_KEYS = ["summary", "quality", "performance", "security", "suggestions"];
+const SECTION_KEYS = ["summary", "quality", "performance", "security", "suggestions", "verdicts"];
 
 // Maps heading text (lowercased) to our section key
 const HEADING_MAP = {
@@ -25,6 +25,7 @@ const HEADING_MAP = {
   performance: "performance",
   security: "security",
   suggestions: "suggestions",
+  verdicts: "verdicts",
 };
 
 function parseSections(markdown) {

public/index.html

@@ -105,6 +105,7 @@
         <button class="tab" data-section="performance">Performance</button>
         <button class="tab" data-section="security">Security</button>
         <button class="tab" data-section="suggestions">Suggestions</button>
+        <button class="tab" data-section="verdicts">Verdicts</button>
       </nav>
       <div id="tab-content" class="tab-content"></div>
     </div>

server.js

@@ -96,8 +96,17 @@ Numbered list of concrete improvements, ranked ruthlessly by impact. No hand-wav
 
 (continue numbering)
 
+## Verdicts
+After completing ALL the above sections, provide these three expert opinions. Each verdict should be 2-3 sentences, written in character:
+
+**What Linus would say:** [Brutally honest LKML style. If the code is garbage, say it's garbage. No corporate-speak, no hand-holding. Call out stupidity directly.]
+
+**What Donald would say:** [Precise, algorithmic, almost mathematical. Focus on correctness, invariants, whether the code could be formally verified. Reference complexity if relevant.]
+
+**What Bjarne would say:** [Principled design perspective. Focus on abstraction quality, type safety, resource management (RAII), zero-overhead principle. Is the design sound?]
+
 Rules:
-- You MUST use exactly these five ## headings and no others.
+- You MUST use exactly these six ## headings in this order: Summary, Code Quality, Performance, Security, Suggestions, Verdicts.
 - ALWAYS reference line numbers from the provided source.
 - EVERY ISSUE MUST HAVE A BEFORE/AFTER DIFF. No exceptions. No issue without a \`\`\`diff block. No diff without both \`-\` (before) and \`+\` (after) lines. If you cannot show a concrete fix, do not mention the issue.
 - DIFF FORMAT: Lines with \`-\` are BEFORE (old code). Lines with \`+\` are AFTER (new code). Lines with neither are context. Show what you're removing AND what you're replacing it with. Example: