Fix correctness and suspicious lint debt (issue #65)

apps/server/src/anchoring.ts

@@ -155,7 +155,10 @@ function scoreCandidate(
     originalPath.length === candidate.headingPath.length
   ) {
     let score = 10_000;
-    score -= Math.abs(candidate.sectionIndex - originalIndexPath?.[originalIndexPath.length - 1]!);
+    const lastIdx = originalIndexPath?.[originalIndexPath.length - 1];
+    if (lastIdx !== undefined) {
+      score -= Math.abs(candidate.sectionIndex - lastIdx);
+    }
     return score;
   }
 

apps/server/src/export/html-envelope.ts

@@ -200,15 +200,18 @@ export async function prerasterizeMermaid(
     source: string;
   }
   const hits: Hit[] = [];
-  for (let m: RegExpExecArray | null; (m = re.exec(html)); ) {
+  let m = re.exec(html);
+  while (m !== null) {
     const index = Number.parseInt(m[1] ?? '', 10);
-    if (!Number.isInteger(index) || index < 0) continue;
-    hits.push({
-      start: m.index,
-      end: m.index + m[0].length,
-      index,
-      source: decodeHtmlEntities(m[2] ?? ''),
-    });
+    if (Number.isInteger(index) && index >= 0) {
+      hits.push({
+        start: m.index,
+        end: m.index + m[0].length,
+        index,
+        source: decodeHtmlEntities(m[2] ?? ''),
+      });
+    }
+    m = re.exec(html);
   }
   if (hits.length === 0) return html;
 
@@ -372,20 +375,21 @@ export async function inlineImageAssets(
   // the alt text).
   const hits: Hit[] = [];
   const imgRe = /<img\b[^>]*\bsrc="([^"]+)"[^>]*>/dg;
-  for (let m: RegExpExecArray | null; (m = imgRe.exec(html)); ) {
+  let m = imgRe.exec(html);
+  while (m !== null) {
     const src = m[1]!;
-    if (isAbsoluteUrl(src)) continue;
     const hit = attached.get(src);
-    if (!hit) continue;
     const srcIndices = m.indices?.[1];
-    if (!srcIndices) continue; // paranoia: requires the `d` flag to be set
-    hits.push({
-      start: srcIndices[0],
-      end: srcIndices[1],
-      ref: src,
-      mime: hit.mime,
-      assetId: hit.assetId,
-    });
+    if (!isAbsoluteUrl(src) && hit && srcIndices) {
+      hits.push({
+        start: srcIndices[0],
+        end: srcIndices[1],
+        ref: src,
+        mime: hit.mime,
+        assetId: hit.assetId,
+      });
+    }
+    m = imgRe.exec(html);
   }
   if (hits.length === 0) return html;
 

apps/server/src/export/mermaid-chromium.ts

@@ -12,7 +12,7 @@
  * Chromium launch in the process. Each render gets a fresh
  * `BrowserContext` so state never leaks across diagrams.
  */
-import type { BrowserContext } from 'playwright';
+import type { Browser, BrowserContext } from 'playwright';
 import { loadMermaidUmd } from './html-envelope.js';
 import {
   type MermaidImageFormat,
@@ -172,7 +172,7 @@ export async function renderMermaidWithChromium(
 ): Promise<RenderedMermaidImage | null> {
   const umd = await loadUmd();
 
-  let browser;
+  let browser: Browser;
   try {
     browser = await getBrowser();
   } catch (err) {

apps/server/src/routes/documents.ts

@@ -19,7 +19,6 @@ import {
   createSession,
   deleteSession,
   hashPassword,
-  type Identity,
   INVITE_SESSION_COOKIE,
   parseCookie,
   readIdentity,
@@ -332,6 +331,7 @@ async function updateDocument(c: Context, deps: AppDeps) {
   const rawCommitMessage = typeof body?.commit_message === 'string' ? body.commit_message : '';
   const commitMessage =
     rawCommitMessage
+      // biome-ignore lint/suspicious/noControlCharactersInRegex: stripping control characters from user input is the intent
       .replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, '')
       .trim()
       .slice(0, 1000) || undefined;

apps/web/src/components/AppBar.tsx

@@ -43,7 +43,7 @@ export function AppBar({
     <Flex align="center" gap="3" px="3" py="2" className="app-bar">
       <Link to="/" aria-label="Marginalia home" className="app-brand">
         <span className="app-brand-icon" aria-hidden="true">
-          <svg viewBox="0 0 24 24" className="app-brand-icon-svg">
+          <svg viewBox="0 0 24 24" className="app-brand-icon-svg" aria-hidden="true">
             <defs>
               <linearGradient
                 id={brandGradientId}

apps/web/src/components/DiffView.tsx

@@ -222,7 +222,7 @@ export function DiffView({ before, after, contextLines = null, active = true }:
         </div>
       </div>
       {overviewMarkers.length ? (
-        <div className="diff-overview" aria-label="Diff overview">
+        <div className="diff-overview">
           <button
             type="button"
             className="diff-overview-track"

apps/web/src/components/DocumentLayout.tsx

@@ -1505,12 +1505,10 @@ export function DocumentLayout({ doc, onDocSettingsChanged, children }: Props) {
               <InlineCommentsLayer
                 uid={doc.uid}
                 threads={threads}
-                docSource={liveSource}
                 docHtml={liveRendered.html}
                 docElementRef={docRef}
                 scrollContainerRef={docScrollRef}
                 blockRanges={blockRanges}
-                docFormat={doc.format}
                 canComment={canComment}
                 open={inlineCommentsOpen}
                 onToggleOpen={() => setInlineCommentsOpen((v) => !v)}
@@ -1593,9 +1591,7 @@ export function DocumentLayout({ doc, onDocSettingsChanged, children }: Props) {
                 <InlineCommentsList
                   uid={doc.uid}
                   threads={threads}
-                  docSource={liveSource}
                   blockRanges={blockRanges}
-                  docFormat={doc.format}
                   canComment={canComment}
                   pendingAnchor={canComment ? pendingAnchor : null}
                   focusedThread={focusedThread}

apps/web/src/components/ImageLightbox.tsx

@@ -54,11 +54,23 @@ export function ImageLightbox({
       >
         <Dialog.Title className="visually-hidden">{image?.alt || 'Image preview'}</Dialog.Title>
         {image && (
+          // biome-ignore lint/a11y/useSemanticElements: <button> cannot contain the controls and image markup inside
           <div
             className={`lightbox-stage lightbox-stage-${zoom}`}
+            role="button"
+            tabIndex={0}
+            aria-label={zoom === 'fit' ? 'Zoom to native size' : 'Fit to viewport'}
             onClick={() => setZoom((z) => (z === 'fit' ? 'native' : 'fit'))}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                setZoom((z) => (z === 'fit' ? 'native' : 'fit'));
+              }
+            }}
           >
             <div className="lightbox-figure">
+              {/* biome-ignore lint/a11y/noStaticElementInteractions: stop-propagation only — controls inside are buttons */}
+              {/* biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation only, no real interaction */}
               <div className="lightbox-controls" onClick={(e) => e.stopPropagation()}>
                 <Tooltip content={bgTooltip}>
                   <IconButton variant="soft" size="2" color="gray" onClick={cycleBg}>
@@ -77,6 +89,7 @@ export function ImageLightbox({
                 <img src={image.src} alt={image.alt} className={`lightbox-img zoom-${zoom}`} />
               </div>
               {image.alt && (
+                // biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation only, no real interaction
                 <p className="lightbox-caption" onClick={(e) => e.stopPropagation()}>
                   {image.alt}
                 </p>

apps/web/src/components/MarkdownToolbar.tsx

@@ -126,7 +126,12 @@ export function MarkdownToolbar({ viewRef, format, wordWrap, onWordWrapToggle }:
   const isAdoc = format === 'asciidoc';
 
   return (
-    <div className="markdown-toolbar" onMouseDown={(e) => e.preventDefault()}>
+    <div
+      className="markdown-toolbar"
+      role="toolbar"
+      aria-label="Editor formatting"
+      onMouseDown={(e) => e.preventDefault()}
+    >
       {/* Inline formatting */}
       <div className="markdown-toolbar__group">
         {isAdoc ? (

apps/web/src/components/ResizeHandle.tsx

@@ -60,6 +60,7 @@ export function ResizeHandle({
   }
 
   return (
+    // biome-ignore lint/a11y/useSemanticElements: <hr> cannot carry the interactive resize behaviour
     <div
       className={`resize-handle resize-handle-${side}`}
       role="separator"

apps/web/src/components/ToastContainer.tsx

@@ -17,13 +17,14 @@ export function ToastContainer() {
         <div key={t.id} className="toast" role="status">
           <div className="toast-head">
             <strong>{t.title}</strong>
-            <button className="toast-close" onClick={() => dismissToast(t.id)}>
+            <button type="button" className="toast-close" onClick={() => dismissToast(t.id)}>
               ×
             </button>
           </div>
           <div className="toast-body">{t.body}</div>
           {t.action && (
             <button
+              type="button"
               className="link"
               onClick={() => {
                 t.action?.onClick();

apps/web/src/components/inline-comments/EmojiReactionPicker.tsx

@@ -54,6 +54,7 @@ export function EmojiReactionPicker({ onPick, disabled }: Props) {
       >
         {/* Close before awaiting onPick — snappier UX, and the parent
             handles its own busy state. */}
+        {/* biome-ignore lint/a11y/useSemanticElements: <fieldset> is form-only; this groups action buttons */}
         <div className="ic-emoji-quick-row" role="group" aria-label="Common reactions">
           {QUICK_REACTIONS.map(({ emoji, label }) => (
             <button

apps/web/src/components/inline-comments/InlineCommentRow.tsx

@@ -45,6 +45,7 @@ export function InlineCommentRow({
   const [linkCopied, setLinkCopied] = useState(false);
   const [reacting, setReacting] = useState(false);
   const linkCopyTimer = useRef<number | null>(null);
+  const editTextareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   // Clean up the copy-confirmation timer if the component unmounts while it's pending.
   useEffect(() => {
@@ -53,6 +54,10 @@ export function InlineCommentRow({
     };
   }, []);
 
+  useEffect(() => {
+    if (editing) editTextareaRef.current?.focus();
+  }, [editing]);
+
   function startEdit() {
     setDraft(node.body);
     setEditing(true);
@@ -204,11 +209,11 @@ export function InlineCommentRow({
         {editing ? (
           <div className="ic-edit">
             <textarea
+              ref={editTextareaRef}
               className="ic-composer-body"
               value={draft}
               rows={3}
               onChange={(e) => setDraft(e.target.value)}
-              autoFocus
             />
             <div className="ic-composer-actions">
               <button
@@ -236,6 +241,7 @@ export function InlineCommentRow({
         )}
 
         {!editing && node.reactions.length > 0 && (
+          // biome-ignore lint/a11y/useSemanticElements: <fieldset> is form-only; reactions are not a form group
           <div className="ic-reactions" role="group" aria-label="Reactions">
             {node.reactions.map((r) => (
               <button

apps/web/src/components/inline-comments/InlineCommentsLayer.tsx

@@ -9,7 +9,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import type { CommentAnchor, DocumentFormat, Thread } from '../../lib/api.js';
+import type { CommentAnchor, Thread } from '../../lib/api.js';
 import { isProposal, proposalStatus } from '../../lib/api.js';
 import {
   buildThreadCollapseState,
@@ -24,12 +24,10 @@ import { COMMENT_FLASH_MS } from './inlineUtils.js';
 interface Props {
   uid: string;
   threads: Thread[];
-  docSource: string;
   docHtml: string;
   docElementRef: RefObject<HTMLElement | null>;
   scrollContainerRef: RefObject<HTMLDivElement | null>;
   blockRanges: Map<string, BlockSourceRange>;
-  docFormat: DocumentFormat;
   canComment: boolean;
   open: boolean;
   onToggleOpen: () => void;
@@ -133,12 +131,10 @@ interface GlobalState {
 export function InlineCommentsLayer({
   uid,
   threads,
-  docSource,
   docHtml,
   docElementRef,
   scrollContainerRef,
   blockRanges,
-  docFormat,
   canComment,
   open,
   onToggleOpen,

apps/web/src/components/inline-comments/InlineCommentsList.tsx

@@ -2,7 +2,7 @@ import type { BlockSourceRange } from '@marginalia/renderer';
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import { DropdownMenu, Flex, IconButton, SegmentedControl, Text } from '@radix-ui/themes';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import type { CommentAnchor, DocumentFormat, Thread } from '../../lib/api.js';
+import type { CommentAnchor, Thread } from '../../lib/api.js';
 import { isProposal, proposalStatus } from '../../lib/api.js';
 import {
   buildThreadCollapseState,
@@ -25,9 +25,7 @@ import { InlineThreadCard } from './InlineThreadCard.js';
 interface Props {
   uid: string;
   threads: Thread[];
-  docSource: string;
   blockRanges: Map<string, BlockSourceRange>;
-  docFormat: DocumentFormat;
   canComment: boolean;
   pendingAnchor: CommentAnchor | null;
   focusedThread: { threadId: string; nonce: number } | null;
@@ -73,9 +71,7 @@ const FOCUS_HIGHLIGHT_MS = 1800;
 export function InlineCommentsList({
   uid,
   threads,
-  docSource,
   blockRanges,
-  docFormat,
   canComment,
   pendingAnchor,
   focusedThread,

apps/web/src/components/inline-comments/InlineComposer.tsx

@@ -347,7 +347,7 @@ export const InlineComposer = forwardRef<InlineComposerHandle, Props>(function I
         onSelect={(e) => updateCaret(e.currentTarget)}
       />
       {activeMention && filteredMentionOptions.length > 0 && (
-        <div className="ic-mention-menu" aria-label="Mention suggestions">
+        <div className="ic-mention-menu">
           {filteredMentionOptions.map((option, index) => (
             <button
               key={option.toLowerCase()}
@@ -364,7 +364,7 @@ export const InlineComposer = forwardRef<InlineComposerHandle, Props>(function I
         </div>
       )}
       {activeShortcode && filteredShortcodeOptions.length > 0 && (
-        <div className="ic-mention-menu" aria-label="Emoji suggestions">
+        <div className="ic-mention-menu">
           {filteredShortcodeOptions.map((match, index) => (
             <button
               key={match.shortcode}

apps/web/src/pages/EditPage.tsx

@@ -62,12 +62,18 @@ function collectReferencedRefs(source: string, format: 'markdown' | 'asciidoc'):
   // AsciiDoc: image::src[]  /  image:src[] (inline) / include::src[]
   const adocRe = /(?:^|\s)(?:image::|image:|include::)([^\s[]+)/g;
   const re = format === 'asciidoc' ? adocRe : mdRe;
-  let m: RegExpExecArray | null;
-  while ((m = re.exec(source)) !== null) {
+  let m = re.exec(source);
+  while (m !== null) {
     const raw = m[1];
-    if (!raw) continue;
-    if (/^[a-z][a-z0-9+.-]*:/i.test(raw) || raw.startsWith('/') || raw.startsWith('#')) continue;
-    out.add(raw);
+    if (
+      raw &&
+      !/^[a-z][a-z0-9+.-]*:/i.test(raw) &&
+      !raw.startsWith('/') &&
+      !raw.startsWith('#')
+    ) {
+      out.add(raw);
+    }
+    m = re.exec(source);
   }
   return out;
 }

apps/web/src/pages/HomePage.tsx

@@ -870,6 +870,7 @@ function MarkdownDropZone({
   const depth = useRef(0);
 
   return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: drop-target wrapper around an editable textarea; not a clickable element
     <div
       className={`drop-zone ${over ? 'drop-zone--over' : ''}`}
       onDragEnter={(e) => {
@@ -938,6 +939,7 @@ function FileDropZone({
   }
 
   return (
+    // biome-ignore lint/a11y/useSemanticElements: <button> can't host the drag-and-drop and dashed-panel rendering
     <div
       className={`file-drop ${over ? 'file-drop--over' : ''}`}
       role="button"