Visible trash icons on merge queue, gold completion bars, help reply thread

- Merge queue trash icons now visible at 40% opacity (was hidden until hover)
- Completion bars in streak chart changed from teal to gold for better contrast
- Help requests: added Reply button and threaded responses (appends with
  username and separator). formatResponseThread renders thread with <hr> dividers.
- Deleted test "Brain" badge from Supabase

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: amyleesterling

src/components/CellLibraryPanel.vue

@@ -436,8 +436,14 @@ function getAnnotationLayers(): string[] {
 
 async function submitResponse(req: HelpRequest, andResolve = false) {
   if (!responseNote.value.trim()) return;
+  // If there's an existing response, append as a thread entry
+  const userName = backend.userName || 'Unknown';
+  let note = responseNote.value.trim();
+  if (req.responseNote) {
+    note = `${req.responseNote}\n---\n${userName}: ${note}`;
+  }
   const payload = {
-    note: responseNote.value.trim(),
+    note,
     url: responseUrl.value.trim() || undefined,
     annotationLayer: responseAnnotationLayer.value.trim() || undefined,
   };
@@ -450,6 +456,14 @@ async function submitResponse(req: HelpRequest, andResolve = false) {
   helpStore.refreshPending();
 }
 
+/** Format a threaded response note into HTML with line breaks */
+function formatResponseThread(note: string): string {
+  return note
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/\n---\n/g, '<hr style="border:0;border-top:1px solid rgba(255,255,255,0.1);margin:6px 0">')
+    .replace(/\n/g, '<br>');
+}
+
 function relativeTime(iso: string): string {
   const diff = Date.now() - new Date(iso).getTime();
   const mins = Math.floor(diff / 60000);
@@ -639,9 +653,10 @@ const panelStyle = computed(() => ({
             <!-- Show existing response thread -->
             <div v-if="req.responseNote" class="nge-cl-response-display">
               <div class="nge-cl-response-label">💬 {{ req.resolvedByName || 'Response' }}:</div>
-              <div class="nge-cl-response-text">{{ req.responseNote }}</div>
+              <div class="nge-cl-response-text" v-html="formatResponseThread(req.responseNote)"></div>
               <a v-if="req.responseUrl" class="nge-cl-response-link" @click.prevent="openResponseUrl(req.responseUrl)" href="#">↗ View linked state</a>
               <span v-if="req.responseAnnotationLayer" class="nge-cl-response-layer">📐 Layer: {{ req.responseAnnotationLayer }}</span>
+              <button v-if="respondingTo !== req.id" class="nge-cl-btn nge-cl-btn--reply" @click="toggleResponseForm(req.id)">↩ Reply</button>
             </div>
           </div>
 
@@ -1230,4 +1245,18 @@ const panelStyle = computed(() => ({
 .nge-cl-response-layer {
   color: #889;
 }
+.nge-cl-btn--reply {
+  display: inline-block;
+  margin-top: 4px;
+  font-size: 0.7em;
+  padding: 2px 8px;
+  color: #8cf;
+  background: rgba(100, 180, 255, 0.1);
+  border: 1px solid rgba(100, 180, 255, 0.2);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.nge-cl-btn--reply:hover {
+  background: rgba(100, 180, 255, 0.2);
+}
 </style>

src/components/SplitMergeOverlay.vue

@@ -557,7 +557,7 @@ function cancelTool() {
   cursor: pointer;
   font-size: 12px;
   padding: 2px 4px;
-  opacity: 0;
+  opacity: 0.4;
   transition: opacity 0.15s ease;
   pointer-events: auto;
 }

src/components/UserProfilePanel.vue

@@ -1229,7 +1229,7 @@ const emit = defineEmits({hide: null, 'open-settings': null});
 }
 
 .nge-profile-chart-bar--completion {
-  background: linear-gradient(to top, rgba(0, 210, 160, 0.5), rgba(0, 210, 160, 0.8));
+  background: linear-gradient(to top, rgba(255, 180, 50, 0.5), rgba(255, 180, 50, 0.85));
   border-radius: 2px;
 }
 
@@ -1266,7 +1266,7 @@ const emit = defineEmits({hide: null, 'open-settings': null});
 }
 
 .nge-profile-chart-legend-dot--completion {
-  background: rgba(0, 210, 160, 0.7);
+  background: rgba(255, 180, 50, 0.7);
 }
 
 /* ── Badges ── */