Backmerge

.claude/skills/commit/skill.md

@@ -1,6 +1,6 @@
 ---
 name: "commit"
-description: "Safe commit with pre-audit. Use /commit instead of git commit directly. Scans staged changes for César-specific violations, runs the verification loop (test → lint), then creates a properly formatted commit."
+description: "Safe commit with pre-audit. Use /commit instead of git commit directly. Scans staged changes for César-specific violations, runs the verification loop (test → lint), updates docs (CHANGELOG, ROADMAP, README, CLAUDE.md), then creates a properly formatted commit."
 user_invocable: true
 ---
 
@@ -115,6 +115,8 @@ If permissions were added, ask the user to confirm they are necessary — Chrome
 
 **If `--fast` was passed**: skip this step entirely and go to Step 5.
 
+> Note: `--fast` skips tests/lint only — Step 5 (doc sync) is never skipped.
+
 Run these in order. Stop immediately if any fails.
 
 ```sh
@@ -129,7 +131,20 @@ If any command fails, show the error output and stop. Fix the issue before commi
 
 ---
 
-## Step 5 — Create the commit
+## Step 5 — Update documentation and roadmap
+
+Before committing, check whether the staged changes affect anything documented in the project's markdown files. Review and update as needed:
+
+1. **CHANGELOG.md** — Add an entry under the current version section (or create a new `[Unreleased]` section) describing what changed. Follow the existing Keep a Changelog format (Added / Fixed / Changed / Removed).
+2. **ROADMAP.md** — If the commit ships, progresses, or completes a roadmap item, update its status (e.g., 📋 → 🔨 or 🔨 → ✅). If the commit introduces a new planned feature not yet on the roadmap, add it.
+3. **README.md** — If the commit changes user-facing behavior, UI, supported LLMs, or anything mentioned in the README, update the relevant section.
+4. **CLAUDE.md** — If the commit changes architecture, build setup, key constraints, or commands, update the dev guide.
+
+Only touch files that actually need updating — don't add noise. Stage the updated docs together with the code changes.
+
+---
+
+## Step 6 — Create the commit
 
 Stage specific files (never `git add -A` or `git add .`):
 

CHANGELOG.md

@@ -14,6 +14,8 @@ All notable changes to César are documented here.
 - Bundle size reporting in build output (metafile)
 
 ### Fixed
+- Comment prefill polls for editor (up to 2s) instead of fixed 500ms delay — fixes race on slow connections
+- Comment prefill scopes broader search to same post ancestor — prevents injecting into wrong post
 - `escapeHTML` rewritten as pure string replacement — works in service workers (no `document` dependency)
 - `chrome.storage` wrappers now properly reject on `runtime.lastError`
 - LLM error handlers use `await` instead of `return` (errors were silently swallowed)
@@ -22,6 +24,22 @@ All notable changes to César are documented here.
 - Removed stale `reason_fr` fallbacks from overlay manager and feed scanner
 
 ### Changed
+- Overlay dismiss animates out (scale + fade) instead of `display: none` — smoother UX
+- Inline styles replaced with CSS classes across overlay manager and popup (no more `style.color` in JS)
+- All `!important` rules removed from overlay CSS — specificity fixed via selector weight
+- Text arrows (`▼`) replaced with inline SVGs for cross-platform consistency
+- AbortController wired to all overlay event listeners for proper cleanup on re-inject
+- Overlay CSS resets font properties on `*` to prevent LinkedIn style bleed
+- Popup: `html lang` changed from `fr` to `en`; scrollbar styled; `max-height` on reveal panel reduced
+- Minimum font sizes raised to 11px across badges, labels, and footer for readability
+- Low-contrast text colors bumped (`#606078` → `#9a9ab0`, `#3a3a4e` → `#9a9ab0`)
+- Added `aria-label`, `aria-expanded`, `aria-controls`, and proper `<label>` associations across popup and overlay
+- Added `focus-visible` ring on all interactive elements (popup toggles, buttons, inputs, selects)
+- Added `prefers-reduced-motion` media query — disables slide-in, pulse, and spin animations
+- Added severity label badges (HIGH / MED / LOW) in overlay header
+- Added spinner animation on loader icon during comment prefill
+- Added LinkedIn dark-mode border contrast override for badges
+- Feedback buttons: clicking one now dims the others (`sourceit-btn-acted`)
 - Data attributes renamed from `data-sourceit-*` to `data-cesar-*`
 - Debug mode off by default in production (`CONFIG.DEBUG = false`)
 - Third-party regex patterns use Unicode-aware `\p{L}` for accented characters

manifest.json

@@ -31,15 +31,15 @@
   "action": {
     "default_popup": "popup.html",
     "default_icon": {
-      "16": "icons/icon16.png",
-      "48": "icons/icon48.png",
-      "128": "icons/icon128.png"
+      "16": "static/icons/icon16.png",
+      "48": "static/icons/icon48.png",
+      "128": "static/icons/icon128.png"
     }
   },
   "icons": {
-    "16": "icons/icon16.png",
-    "48": "icons/icon48.png",
-    "128": "icons/icon128.png"
+    "16": "static/icons/icon16.png",
+    "48": "static/icons/icon48.png",
+    "128": "static/icons/icon128.png"
   },
   "content_security_policy": {
     "extension_pages": "script-src 'self'; object-src 'self'"

src/content/ui/comment-prefill.js

@@ -8,7 +8,7 @@ import { escapeHTML } from '../../shared/sanitize.js';
  */
 export async function prefillComment(postElement, text, btn) {
   const originalHTML = btn.innerHTML;
-  btn.innerHTML = `${ICONS.loader} Opening...`;
+  btn.innerHTML = `<span class="sourceit-icon-spin">${ICONS.loader}</span> Opening...`;
 
   try {
     // Step 1: Find and click LinkedIn's "Comment" button to open the comment box
@@ -34,10 +34,7 @@ export async function prefillComment(postElement, text, btn) {
       linkedinCommentBtn.click();
     }
 
-    // Step 2: Wait for the comment editor to appear
-    await new Promise((resolve) => setTimeout(resolve, 500));
-
-    // Step 3: Find the comment input (contenteditable div)
+    // Step 2: Poll for the comment editor to appear (up to 2s)
     const editorSelectors = [
       '.ql-editor[data-placeholder]',
       '.ql-editor',
@@ -47,17 +44,18 @@ export async function prefillComment(postElement, text, btn) {
     ];
 
     let editor = null;
-    for (const sel of editorSelectors) {
-      editor = postElement.querySelector(sel);
-      if (editor) break;
-    }
-
-    // Broader search if not found within post
-    if (!editor) {
+    for (let attempt = 0; attempt < 10 && !editor; attempt++) {
+      await new Promise((resolve) => setTimeout(resolve, 200));
       for (const sel of editorSelectors) {
-        const candidates = document.querySelectorAll(sel);
-        for (const c of candidates) {
-          if (c.offsetParent !== null) editor = c;
+        editor = postElement.querySelector(sel);
+        if (editor) break;
+      }
+      // Broader search — scoped to the same post ancestor to avoid injecting into wrong post
+      if (!editor) {
+        const postAncestor = postElement.closest('.feed-shared-update-v2') || postElement;
+        for (const sel of editorSelectors) {
+          editor = postAncestor.querySelector(sel);
+          if (editor) break;
         }
       }
     }
@@ -72,14 +70,12 @@ export async function prefillComment(postElement, text, btn) {
       editor.dispatchEvent(new Event('change', { bubbles: true }));
 
       btn.innerHTML = `${ICONS.check} Ready — review and post`;
-      btn.style.color = '#2e7d32';
-      btn.style.borderColor = '#c8e6c9';
+      btn.classList.add('sourceit-btn-post-success');
     } else {
       // Fallback: copy to clipboard
       await navigator.clipboard.writeText(text);
       btn.innerHTML = `${ICONS.copy} Copied — paste in comment`;
-      btn.style.color = '#e65100';
-      btn.style.borderColor = '#ffe0b2';
+      btn.classList.add('sourceit-btn-post-fallback');
     }
   } catch (_err) {
     // Ultimate fallback
@@ -94,7 +90,6 @@ export async function prefillComment(postElement, text, btn) {
   // Reset button after 5s
   setTimeout(() => {
     btn.innerHTML = originalHTML;
-    btn.style.color = '';
-    btn.style.borderColor = '';
+    btn.classList.remove('sourceit-btn-post-success', 'sourceit-btn-post-fallback');
   }, 5000);
 }