fix(code-insight): keep usage highlights readable (#855)

Usage previews rendered the matched occurrence through tokenSpans, so the token colour rules outranked the inherited --fg-search-match and left syntax colours on the search-match background (about 1.1:1 in Islands Light). Render the match as plain text so it takes the search-match foreground; syntax colours stay on the surrounding code. Covered by unit tests and a Playwright contrast check across light, dark, high-contrast and mixed editor schemes.

Fixes #851

Co-authored-by: kkMihai <[email protected]>

src/features/code-insight/UsagesView.tsx

@@ -54,7 +54,7 @@ export function UsagePreview({ usage }: { usage: Usage }) {
   return (
     <span className={styles.preview}>
       {tokenSpans(text, 0, from, tokens, "b:")}
-      <mark className={styles.match}>{tokenSpans(text, from, to, tokens, "m:")}</mark>
+      <mark className={styles.match}>{text.slice(from, to)}</mark>
       {tokenSpans(text, to, text.length, tokens, "a:")}
     </span>
   );

src/features/code-insight/usagePreview.test.tsx

@@ -17,14 +17,17 @@ describe("UsagePreview", () => {
     );
     await waitFor(() => expect(container.querySelector(".tok-keyword")?.textContent).toBe("const"));
     expect(container.querySelector("mark")?.textContent).toBe("foo");
+    expect(container.querySelector("mark")?.childElementCount).toBe(0);
     expect(container.textContent).toBe("const x = foo();");
   });
 
-  it("colours a usage inside a doc comment as a comment", async () => {
+  it("keeps comment colours outside the match and the search foreground inside it", async () => {
     const { container } = render(
       <UsagePreview usage={{ path: "/p/a.ts", line: 1, col: 8, endCol: 11, text: " * Uses foo()" }} />,
     );
-    await waitFor(() => expect(container.querySelector("mark .tok-comment")?.textContent).toBe("foo"));
+    await waitFor(() => expect(container.querySelector(".tok-comment")?.textContent).toBe("* Uses "));
+    expect(container.querySelector("mark")?.textContent).toBe("foo");
+    expect(container.querySelector("mark")?.childElementCount).toBe(0);
   });
 });