🎨 Palette: Replace link with semantic button for clear action

.Jules/palette.md

@@ -21,3 +21,6 @@
 ## 2026-08-16 - Focus Parity for CSS Transform Animations
 **Learning:** When interactive elements (like `.btn` links) have CSS `transform` animations on `:hover` (e.g., `transform: translateX(4px)`), missing the corresponding `transform` on the `:focus-visible` state means keyboard users do not get the same visual feedback as mouse users, creating an inconsistent and less polished experience.
 **Action:** Ensure CSS `transform` and other layout-affecting animations applied on `:hover` are also applied on `:focus-visible` for the parent element to maintain focus parity.
+## 2026-08-16 - Semantic Buttons for Interactive Actions
+**Learning:** Using `<a href="#">` for interactive actions (like clearing annotations or saving) creates unintended scrolling behavior (jumping to the top of the page) and incorrect semantics for screen readers, as the element is performing an action on the page rather than navigating.
+**Action:** Replace `<a href="#">` tags used for JavaScript actions with `<button type="button">` and apply inline CSS reset styles (`background: transparent; border: none; padding: 0; font: inherit; cursor: pointer; text-decoration: underline;`) to maintain the visual appearance of a link while providing correct semantics and preventing page jumps.

.gitignore

@@ -42,3 +42,4 @@ pr_description.txt
 
 .cache/
 test_output*.log
+node_modules/

router/static/visualizer.html

@@ -325,7 +325,7 @@ <h3>✎ Human Review</h3>
  <input type="text" id="note-input" placeholder="Optional review note..." value="${ann ? escapeHtml(ann.note || '') : ''}">
  <button onclick="saveNote(${idx})">Save Note</button>
  </div>
- ${ann ? `<div style="margin-top:8px;font-size:0.75em;color:#64b5f6">✓ Reviewed as <b>${escapeHtml(ann.tier)}</b> · <a href="#" onclick="clearAnnotation(${idx})" style="color:#f44336">clear</a></div>` : ''}
+ ${ann ? `<div style="margin-top:8px;font-size:0.75em;color:#64b5f6">✓ Reviewed as <b>${escapeHtml(ann.tier)}</b> · <button type="button" onclick="clearAnnotation(${idx})" style="color:#f44336; background:transparent; border:none; padding:0; font:inherit; cursor:pointer; text-decoration:underline;" aria-label="Clear annotation">clear</button></div>` : ''}
  </div>
  `;
 }