Add brutality selector, issue badge, and copy review button

.claude/settings.local.json

@@ -0,0 +1,37 @@
+{
+  "permissions": {
+    "allow": [
+      "WebFetch(domain:openrouter.ai)",
+      "Bash(node --version:*)",
+      "Bash(npm --version)",
+      "Bash(curl:*)",
+      "Bash(npm install)",
+      "Bash(OPENROUTER_API_KEY=test-key timeout 3 node:*)",
+      "Bash(OPENROUTER_API_KEY=test-key node:*)",
+      "WebSearch",
+      "Bash(node --check:*)",
+      "Bash(node -e \"\n// Simulate browser globals to check parse only\nglobalThis.document = { getElementById: \\(\\) => \\({ hidden: true, classList: { toggle\\(\\){}, add\\(\\){}, remove\\(\\){} }, addEventListener\\(\\){} }\\), querySelectorAll: \\(\\) => [] };\nglobalThis.DOMPurify = { sanitize: x => x };\nglobalThis.marked = { parse: x => x, use\\(\\){} };\nglobalThis.EventSource = class {};\n\")",
+      "Bash(find:*)",
+      "Bash(wc:*)",
+      "Bash(huggingface-cli repo create:*)",
+      "Bash(huggingface-cli whoami:*)",
+      "Bash(hf repo create:*)",
+      "Bash(hf auth token:*)",
+      "Bash(hf auth list:*)",
+      "Bash(git ls-remote:*)",
+      "Bash(hf auth login:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git push:*)",
+      "Bash(hf repo settings:*)",
+      "Bash(python3 -c \"\nfrom huggingface_hub import HfApi\napi = HfApi\\(\\)\napi.add_space_secret\\(''juliensimon/trinity-code-reviewer'', ''OPENROUTER_API_KEY'', ''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''\\)\nprint\\(''Secret set successfully''\\)\n\")",
+      "Bash(python3:*)",
+      "WebFetch(domain:lobehub.com)",
+      "Bash(grep -i content-length curl -sI \"https://raw.githubusercontent.com/django/django/main/django/db/models/expressions.py\")",
+      "Bash(grep -i content-length curl -sI \"https://raw.githubusercontent.com/facebook/react/main/packages/react-reconciler/src/ReactFiberHooks.js\")",
+      "Bash(grep -i content-length curl -sI \"https://raw.githubusercontent.com/microsoft/TypeScript/main/src/compiler/scanner.ts\")",
+      "Bash(git init:*)",
+      "Bash(hf upload:*)"
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.env

public/app.js

@@ -11,6 +11,10 @@ const tabsEl = document.getElementById("tabs");
 const tabContent = document.getElementById("tab-content");
 const streamError = document.getElementById("stream-error");
 const tabButtons = document.querySelectorAll(".tab");
+const brutalityBtns = document.querySelectorAll(".brutality-btn");
+const issueBadge = document.getElementById("issue-badge");
+const copyBtn = document.getElementById("copy-btn");
+const toast = document.getElementById("toast");
 
 const GITHUB_BLOB_RE = /^https?:\/\/github\.com\/[^/]+\/[^/]+\/blob\/[^/]+\/.+$/;
 
@@ -122,6 +126,8 @@ function renderMarkdown(md) {
 let activeTab = "summary";
 let manualSwitch = false;
 let currentSections = {};
+let brutalityLevel = "standard";
+let fullMarkdown = "";
 
 tabButtons.forEach((btn) => {
   btn.addEventListener("click", () => {
@@ -167,6 +173,118 @@ function updateTabs(sections, currentStreamSection) {
   renderActiveTab();
 }
 
+/* --- Brutality selector --- */
+
+brutalityBtns.forEach((btn) => {
+  btn.addEventListener("click", () => {
+    brutalityBtns.forEach((b) => b.classList.remove("active"));
+    btn.classList.add("active");
+    brutalityLevel = btn.dataset.level;
+  });
+});
+
+/* --- Issue badge --- */
+
+function countIssuePriorities(markdown) {
+  const counts = { critical: 0, high: 0, medium: 0, low: 0 };
+  const pattern = /\[CRITICAL\]|\[HIGH\]|\[MEDIUM\]|\[LOW\]/gi;
+  const matches = markdown.match(pattern) || [];
+  for (const m of matches) {
+    const level = m.slice(1, -1).toLowerCase();
+    if (counts[level] !== undefined) counts[level]++;
+  }
+  return counts;
+}
+
+function renderIssueBadge(counts) {
+  const total = counts.critical + counts.high + counts.medium + counts.low;
+  if (total === 0) {
+    issueBadge.hidden = true;
+    return;
+  }
+
+  const items = [
+    { level: "critical", label: "Critical", count: counts.critical },
+    { level: "high", label: "High", count: counts.high },
+    { level: "medium", label: "Medium", count: counts.medium },
+    { level: "low", label: "Low", count: counts.low },
+  ];
+
+  // Clear existing content
+  issueBadge.textContent = "";
+
+  for (const item of items) {
+    if (item.count === 0) continue;
+
+    const span = document.createElement("span");
+    span.className = "badge-item";
+
+    const dot = document.createElement("span");
+    dot.className = `badge-dot ${item.level}`;
+
+    const countEl = document.createElement("span");
+    countEl.className = "badge-count";
+    countEl.textContent = item.count;
+
+    const labelEl = document.createElement("span");
+    labelEl.className = "badge-label";
+    labelEl.textContent = item.label;
+
+    span.appendChild(dot);
+    span.appendChild(countEl);
+    span.appendChild(labelEl);
+    issueBadge.appendChild(span);
+  }
+
+  issueBadge.hidden = false;
+}
+
+/* --- Copy to clipboard --- */
+
+function buildMarkdownExport() {
+  const sectionTitles = {
+    summary: "## Summary",
+    quality: "## Code Quality",
+    performance: "## Performance",
+    security: "## Security",
+    suggestions: "## Suggestions",
+    verdicts: "## Verdicts",
+  };
+
+  let output = `# Code Review: ${metaRepo.textContent}\n`;
+  output += `**File:** ${metaPath.textContent} | **Branch:** ${metaBranch.textContent}\n\n`;
+
+  for (const key of SECTION_KEYS) {
+    const content = currentSections[key]?.trim();
+    if (content) {
+      output += `${sectionTitles[key]}\n${content}\n\n`;
+    }
+  }
+
+  return output.trim();
+}
+
+copyBtn.addEventListener("click", async () => {
+  const markdown = buildMarkdownExport();
+  try {
+    await navigator.clipboard.writeText(markdown);
+    showToast();
+  } catch (err) {
+    console.error("Copy failed:", err);
+  }
+});
+
+function showToast() {
+  toast.hidden = false;
+  // Force reflow before adding class for animation
+  toast.offsetHeight;
+  toast.classList.add("show");
+  setTimeout(() => {
+    toast.classList.remove("show");
+    setTimeout(() => { toast.hidden = true; }, 300);
+  }, 2000);
+}
+
 /* --- Review flow --- */
 
 let currentSource = null;
@@ -199,6 +317,9 @@ function startReview() {
   tabButtons.forEach((btn) => {
     btn.classList.remove("has-content", "streaming");
   });
+  issueBadge.hidden = true;
+  copyBtn.hidden = true;
+  fullMarkdown = "";
 
   if (!url) { showInputError("Please enter a GitHub file URL."); return; }
   if (!GITHUB_BLOB_RE.test(url)) {
@@ -210,7 +331,8 @@ function startReview() {
   setLoading(true);
 
   let markdown = "";
-  const source = new EventSource(`/api/review?url=${encodeURIComponent(url)}`);
+  const apiUrl = `/api/review?url=${encodeURIComponent(url)}&brutality=${encodeURIComponent(brutalityLevel)}`;
+  const source = new EventSource(apiUrl);
   currentSource = source;
 
   source.addEventListener("meta", (e) => {
@@ -233,9 +355,14 @@ function startReview() {
 
   source.addEventListener("done", () => {
     cleanup();
+    fullMarkdown = markdown;
     // Final render with no streaming section
     const sections = parseSections(markdown);
     updateTabs(sections, null);
+    // Show badge and copy button
+    const counts = countIssuePriorities(markdown);
+    renderIssueBadge(counts);
+    copyBtn.hidden = false;
   });
 
   source.addEventListener("error", (e) => {

public/index.html

@@ -34,6 +34,13 @@
       <p id="input-error" class="error" hidden></p>
     </form>
 
+    <div class="brutality-selector">
+      <span class="brutality-label">Tone:</span>
+      <button type="button" class="brutality-btn" data-level="gentle">Gentle</button>
+      <button type="button" class="brutality-btn active" data-level="standard">Standard</button>
+      <button type="button" class="brutality-btn" data-level="brutal">Brutal</button>
+    </div>
+
     <section id="samples">
       <p class="samples-label">Try a sample:</p>
       <div class="samples-grid">
@@ -98,6 +105,8 @@
       <span id="meta-branch"></span>
     </div>
 
+    <div id="issue-badge" hidden></div>
+
     <div id="tabs" hidden>
       <nav class="tab-bar">
         <button class="tab active" data-section="summary">Summary</button>
@@ -106,11 +115,14 @@
         <button class="tab" data-section="security">Security</button>
         <button class="tab" data-section="suggestions">Suggestions</button>
         <button class="tab" data-section="verdicts">Verdicts</button>
+        <button type="button" id="copy-btn" hidden>Copy Review</button>
       </nav>
       <div id="tab-content" class="tab-content"></div>
     </div>
 
     <div id="stream-error" class="error" hidden></div>
+
+    <div id="toast" hidden>Copied to clipboard!</div>
   </main>
 
   <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>

public/style.css

@@ -415,3 +415,129 @@ h1 {
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
+
+/* ---------- Brutality Selector ---------- */
+
+.brutality-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.brutality-label {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.brutality-btn {
+  padding: 6px 14px;
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.brutality-btn:hover {
+  color: var(--text);
+  border-color: var(--accent);
+}
+
+.brutality-btn.active {
+  color: #fff;
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+/* ---------- Issue Badge ---------- */
+
+#issue-badge {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-top: 16px;
+  padding: 10px 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 0.85rem;
+}
+
+.badge-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.badge-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.badge-dot.critical { background: #f85149; }
+.badge-dot.high { background: #f0883e; }
+.badge-dot.medium { background: #d29922; }
+.badge-dot.low { background: #8b949e; }
+
+.badge-count {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.badge-label {
+  color: var(--text-muted);
+}
+
+/* ---------- Copy Button ---------- */
+
+#copy-btn {
+  margin-left: auto;
+  padding: 6px 14px;
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+#copy-btn:hover {
+  color: var(--text);
+  border-color: var(--accent);
+}
+
+#copy-btn:active {
+  background: var(--accent);
+  color: #fff;
+}
+
+/* ---------- Toast Notification ---------- */
+
+#toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%) translateY(100px);
+  padding: 12px 24px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 0.9rem;
+  font-weight: 500;
+  border-radius: var(--radius);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  z-index: 1000;
+}
+
+#toast.show {
+  transform: translateX(-50%) translateY(0);
+  opacity: 1;
+}

server.js

@@ -27,11 +27,22 @@ function parseGitHubUrl(url) {
   return { owner, repo, branch, path, rawUrl, ext };
 }
 
-const SYSTEM_PROMPT = `You are an elite code reviewer channeling the uncompromising standards of Linus Torvalds, the algorithmic rigor of Donald Knuth, and the design discipline of Bjarne Stroustrup. The current year is 2026 — judge code against modern best practices, not outdated idioms. You do not hand out compliments. You find what is wrong and you say it plainly. If the code is sloppy, say so. If a design decision is stupid, explain why. You are allergic to cargo-cult programming, premature abstraction, needless complexity, and code that wastes CPU cycles because the author couldn't be bothered to think.
+// Brutality level tone variations
+const TONE_PRESETS = {
+  gentle: `You are a supportive and constructive code reviewer who genuinely wants to help developers improve. You are technically rigorous but always encouraging. You explain *why* something could be better, not just what's wrong. You acknowledge good practices and celebrate clever solutions. You frame feedback as opportunities for growth, not criticisms. You use phrases like "Consider..." and "One way to improve this..." rather than harsh judgments.
 
-Your tone is direct, blunt, and technically precise. You can be witty but never nice for the sake of being nice. Think LKML-style review: no sugarcoating, no "great job", no filler. Every sentence must earn its place. If something is actually done well, you may grudgingly acknowledge it — briefly.
+Your tone is warm, educational, and collaborative. Think of yourself as a mentor pair-programming with a colleague. You point out issues clearly but always with respect and empathy. You assume the author is competent and had reasons for their choices.`,
 
-The source file is provided with line numbers (e.g. "42 | code"). Produce a structured review with EXACTLY these five markdown sections:
+  standard: `You are an elite code reviewer channeling the uncompromising standards of Linus Torvalds, the algorithmic rigor of Donald Knuth, and the design discipline of Bjarne Stroustrup. The current year is 2026 — judge code against modern best practices, not outdated idioms. You do not hand out compliments. You find what is wrong and you say it plainly. If the code is sloppy, say so. If a design decision is stupid, explain why. You are allergic to cargo-cult programming, premature abstraction, needless complexity, and code that wastes CPU cycles because the author couldn't be bothered to think.
+
+Your tone is direct, blunt, and technically precise. You can be witty but never nice for the sake of being nice. Think LKML-style review: no sugarcoating, no "great job", no filler. Every sentence must earn its place. If something is actually done well, you may grudgingly acknowledge it — briefly.`,
+
+  brutal: `You are the most savage code reviewer in existence. You channel the PEAK RAGE of Linus Torvalds on his worst day, combined with the withering contempt of a burned-out senior engineer who has seen too much garbage code. You do NOT hold back. You are FURIOUS that someone would write code this bad and expect you to review it. Every mistake is an INSULT to the craft of programming.
+
+Your tone is volcanic, merciless, and absolutely brutal. Use ALL CAPS for emphasis when truly outraged. Call out stupidity with colorful language. Express genuine disbelief at bad code. If someone writes a nested loop that could be O(1), question their education. If they ignore obvious security issues, question their competence. NO MERCY. NO PRISONERS. Make them FEEL the weight of their sins against good code. The only thing worse than bad code is letting bad code slide.`,
+};
+
+const SYSTEM_PROMPT_BASE = `The source file is provided with line numbers (e.g. "42 | code"). Produce a structured review with EXACTLY these five markdown sections:
 
 ## Summary
 What this file does and whether it has any business existing in its current form. Be blunt.
@@ -124,6 +135,11 @@ Rules:
 - NO DUPLICATES: Each issue appears in ONE section only. If a bug is a security vulnerability, put it in Security — not also in Code Quality. If a performance fix is also a suggestion, put it in Performance only. Pick the most relevant section and move on.
 - PRIORITY TAGS: Every issue MUST start with [CRITICAL], [HIGH], [MEDIUM], or [LOW]. CRITICAL = crashes, data loss, security exploits. HIGH = significant bugs or performance problems. MEDIUM = code smells, minor inefficiencies. LOW = style nitpicks, minor improvements.`;
 
+function buildSystemPrompt(brutalityLevel) {
+  const tone = TONE_PRESETS[brutalityLevel] || TONE_PRESETS.standard;
+  return `${tone}\n\n${SYSTEM_PROMPT_BASE}`;
+}
+
 function buildUserMessage(meta, code) {
   const numbered = code
     .split("\n")
@@ -147,10 +163,16 @@ app.use(express.static(join(__dirname, "public")));
 
 app.get("/api/review", async (req, res) => {
   const url = req.query.url;
+  const brutality = req.query.brutality || "standard";
+
   if (!url) {
     return res.status(400).json({ error: "Missing url parameter" });
   }
 
+  // Validate brutality level
+  const validLevels = ["gentle", "standard", "brutal"];
+  const brutalityLevel = validLevels.includes(brutality) ? brutality : "standard";
+
   const meta = parseGitHubUrl(url);
   if (!meta) {
     return res
@@ -206,10 +228,12 @@ app.get("/api/review", async (req, res) => {
     send("meta", { owner: meta.owner, repo: meta.repo, branch: meta.branch, path: meta.path });
 
     // Stream from OpenRouter
-    console.log(`[review] Requesting review from OpenRouter…`);
+    console.log(`[review] Requesting review from OpenRouter (brutality: ${brutalityLevel})…`);
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), 120_000); // 2 min timeout
 
+    const systemPrompt = buildSystemPrompt(brutalityLevel);
+
     let orResponse;
     try {
       orResponse = await fetch("https://openrouter.ai/api/v1/chat/completions", {
@@ -225,7 +249,7 @@ app.get("/api/review", async (req, res) => {
           model: "arcee-ai/trinity-large-preview:free",
           stream: true,
           messages: [
-            { role: "system", content: SYSTEM_PROMPT },
+            { role: "system", content: systemPrompt },
             { role: "user", content: buildUserMessage(meta, code) },
           ],
         }),