semantica/explorer/tests/markdownContentViewer.test.ts

import test from "node:test";
import assert from "node:assert/strict";
import React from "react";
import { renderToString } from "react-dom/server";

(globalThis as typeof globalThis & { React: typeof React }).React = React;

import { MarkdownContentViewer } from "../src/workspaces/GraphWorkspace/MarkdownContentViewer.tsx";
import { isSafeUrl } from "../src/workspaces/GraphWorkspace/markdownUrlSafety.ts";

test("isSafeUrl permits safe http, https, and mailto URLs and relative paths", () => {
  assert.equal(isSafeUrl("https://example.com"), true);
  assert.equal(isSafeUrl("http://localhost:8000"), true);
  assert.equal(isSafeUrl("mailto:user@example.com"), true);
  assert.equal(isSafeUrl("#section-1"), true);
  assert.equal(isSafeUrl("/relative/path"), true);
});

test("isSafeUrl rejects protocol-relative URLs and dangerous schemes", () => {
  // Protocol-relative URLs (must be blocked)
  assert.equal(isSafeUrl("//evil.com"), false);
  assert.equal(isSafeUrl("//localhost:8000"), false);
  assert.equal(isSafeUrl("//"), false);

  // Dangerous schemes
  assert.equal(isSafeUrl("javascript:alert('xss')"), false);
  assert.equal(isSafeUrl("JAVASCRIPT:alert(1)"), false);
  assert.equal(isSafeUrl("data:text/html;base64,PHNjcmlwdD4="), false);
  assert.equal(isSafeUrl("vbscript:MsgBox(1)"), false);
  assert.equal(isSafeUrl(""), false);
  assert.equal(isSafeUrl(undefined), false);
});

// ─── C URL contract: whitespace-only strings ────────────────────────────────
// The CommonMark parser normalises whitespace-only link destinations to "" so
// these values are unreachable through normal markdown rendering. However, the
// function is exported and its direct-call contract must be correct.
test("isSafeUrl rejects whitespace-only strings (contract correctness)", () => {
  assert.equal(isSafeUrl(" "), false, "single space must be rejected");
  assert.equal(isSafeUrl("\t"), false, "tab must be rejected");
  assert.equal(isSafeUrl("\n"), false, "newline must be rejected");
  assert.equal(isSafeUrl("   "), false, "multiple spaces must be rejected");
  assert.equal(isSafeUrl(" \t\n "), false, "mixed whitespace must be rejected");
});

test("renders Preview mode with formatted Markdown elements and tabs", () => {
  const markdown = `# Main Title\n\n**Bold Statement**\n\n* Item A\n* Item B`;
  const html = renderToString(React.createElement(MarkdownContentViewer, { content: markdown, defaultMode: "preview" }));

  // Tab buttons are present
  assert.equal(html.includes("Preview"), true);
  assert.equal(html.includes("Source"), true);
  assert.equal(html.includes("Copy"), true);

  // Formatted preview elements
  assert.equal(html.includes("Main Title"), true);
  assert.equal(html.includes("Bold Statement"), true);
  assert.equal(html.includes("<strong>Bold Statement</strong>"), true);
  assert.equal(html.includes("Item A"), true);
  assert.equal(html.includes("Item B"), true);
});

test("stays read-only without a resource and exposes Edit for canonical resources", () => {
  const readOnly = renderToString(React.createElement(MarkdownContentViewer, {
    content: "Read-only body",
  }));
  const editable = renderToString(React.createElement(MarkdownContentViewer, {
    content: "Editable body",
    resource: { kind: "context-node", id: "node-1" },
  }));

  assert.equal(readOnly.includes(">Edit</button>"), false);
  assert.equal(editable.includes(">Edit</button>"), true);
});

test("empty canonical resources still expose Edit", () => {
  const html = renderToString(React.createElement(MarkdownContentViewer, {
    content: "",
    resource: { kind: "context-node", id: "empty-node" },
  }));

  assert.equal(html.includes("No content available for this node."), true);
  assert.equal(html.includes(">Edit</button>"), true);
});

test("renders Source mode with exact unmodified text inside pre/code", () => {
  const markdown = `# Title 🚀\n\n  * Indented item\n\n\`\`\`python\ndef test():\n    return "α + β"\n\`\`\``;
  const html = renderToString(React.createElement(MarkdownContentViewer, { content: markdown, defaultMode: "source" }));

  assert.equal(html.includes("<pre"), true);
  assert.equal(html.includes("<code"), true);
  assert.equal(html.includes("# Title 🚀"), true);
  assert.equal(html.includes("  * Indented item"), true);
  assert.equal(html.includes('return &quot;α + β&quot;'), true);
});

test("renders raw HTML safely as escaped text without executing elements", () => {
  const dangerousHtml = `<script>alert("XSS")</script><iframe src="https://evil.com"></iframe>`;
  const html = renderToString(React.createElement(MarkdownContentViewer, { content: dangerousHtml, defaultMode: "preview" }));

  // Script and iframe tags must NOT be rendered as active DOM tags
  assert.equal(html.includes("<script>"), false);
  assert.equal(html.includes("<iframe"), false);
  // Content is escaped as text
  assert.equal(html.includes("&lt;script&gt;"), true);
});

// ─── C-1: HAST node prop must not reach the DOM ─────────────────────────────
// react-markdown passes a HAST `node` (Element) object to custom component
// overrides. Before this fix, ...props spread caused React 19 to serialise it
// as node="[object Object]" on every <a> and <code> element.
test("rendered links do not expose the HAST node object as a DOM attribute", () => {
  const content = `[Example](https://example.com)\n\nInline \`code\` here.`;
  const html = renderToString(React.createElement(MarkdownContentViewer, { content, defaultMode: "preview" }));

  // The rendered HTML must not contain the serialised HAST object
  assert.equal(html.includes("node="), false, "node= attribute must not appear in rendered HTML");
  assert.equal(html.includes("[object Object]"), false, "serialised HAST object must not appear in rendered HTML");

  // The link must still render correctly with the right href
  assert.equal(html.includes('href="https://example.com"'), true, "href must be present");
});

// ─── C-2: Fragment links must not open in a new tab ─────────────────────────
// Links to in-document anchors such as #section or GFM footnote backlinks like
// #user-content-fn-1 must stay in the current document. Only external links
// use target="_blank".
test("fragment links render in the current document without target blank", () => {
  const content = `[Jump to section](#introduction)\n\n[External](https://example.com)`;
  const html = renderToString(React.createElement(MarkdownContentViewer, { content, defaultMode: "preview" }));

  // Fragment link must have the href
  assert.equal(html.includes('href="#introduction"'), true, "fragment href must be present");

  // Confirm no target=_blank attribute appears anywhere near the fragment link.
  // We check that the output contains a fragment href WITHOUT target="_blank"
  // by verifying the two strings are not both present (the external link has
  // target blank; the fragment link must not).
  const fragmentLinkIdx = html.indexOf('href="#introduction"');
  assert.notEqual(fragmentLinkIdx, -1, "fragment link must be rendered");
  // Inspect the 80 chars around the fragment href — should not contain target
  const fragmentContext = html.slice(Math.max(0, fragmentLinkIdx - 10), fragmentLinkIdx + 90);
  assert.equal(fragmentContext.includes('target="_blank"'), false, "fragment link must not have target=_blank");

  // External link must still have target blank
  assert.equal(html.includes('href="https://example.com"'), true, "external href must be present");
  assert.equal(html.includes('target="_blank"'), true, "external link must have target=_blank");
  assert.equal(html.includes('rel="noopener noreferrer"'), true, "external link must have rel");
});

test("GFM footnote backlinks render without target blank", () => {
  // GFM footnote syntax: footnote ref in text + definition below
  const content = `See the note[^1] for more.\n\n[^1]: This is the footnote text.`;
  const html = renderToString(React.createElement(MarkdownContentViewer, { content, defaultMode: "preview" }));

  // The footnote reference link (#user-content-fn-1) and backlink
  // (#user-content-fnref-1) are fragment links and must not open in a new tab.
  // We verify no fragment href is paired with target=_blank.
  // Extract all href="#..." occurrences and confirm none is adjacent to target=_blank.
  const anchorMatches = [...html.matchAll(/href="#[^"]*"/g)];
  assert.ok(anchorMatches.length > 0, "GFM footnotes must produce fragment links");
  for (const match of anchorMatches) {
    const start = match.index ?? 0;
    const context = html.slice(Math.max(0, start - 10), start + 120);
    assert.equal(
      context.includes('target="_blank"'),
      false,
      `fragment link ${match[0]} must not have target=_blank`,
    );
  }
});

// ─── C-1-R: GFM footnote attributes must be preserved (regression test) ─────
// The C-1 fix (removing the HAST `node` prop) must NOT silently drop other
// legitimate HAST attributes. remark-gfm generates the following on footnote
// links that are required for correct in-page navigation and accessibility:
//
//   Footnote reference anchor:
//     id="user-content-fnref-1"           ← backlink target
//     data-footnote-ref="true"
//     aria-describedby="footnote-label"
//
//   Footnote back-link anchor:
//     data-footnote-backref=""
//     aria-label="Back to reference 1"    ← screen-reader label
//     class="data-footnote-backref"
//
// If these are absent, clicking the ↩ back-link cannot scroll back to the
// in-text reference, and screen readers cannot announce the backlink purpose.
test("GFM footnote links preserve generated id, aria, and class attributes", () => {
  const content = `See the note[^1] for more.\n\n[^1]: This is the footnote text.`;
  const html = renderToString(React.createElement(MarkdownContentViewer, { content, defaultMode: "preview" }));

  // The HAST `node` object must not appear serialised as a DOM attribute.
  assert.equal(html.includes("node="), false, "node= attribute must not appear in HTML");
  assert.equal(html.includes("[object Object]"), false, "serialised HAST object must not appear in HTML");

  // Footnote reference anchor must retain its id so the backlink can navigate to it.
  assert.equal(
    html.includes('id="user-content-fnref-1"'),
    true,
    "footnote reference anchor must retain id for back-navigation",
  );

  // Footnote backlink must retain its aria-label for screen-reader accessibility.
  assert.equal(
    html.includes('aria-label="Back to reference 1"'),
    true,
    "footnote backlink must retain aria-label for accessibility",
  );

  // Footnote backlink must retain its class attribute.
  assert.equal(
    html.includes('class="data-footnote-backref"'),
    true,
    "footnote backlink must retain class attribute",
  );
});

test("renders safe links as <a> with target blank and unclickable span for unsafe links", () => {
  const content = `[Safe Link](https://getsemantica.ai)\n\n[Unsafe Scheme](javascript:alert(1))\n\n[Protocol Relative](//evil.com)`;
  const html = renderToString(React.createElement(MarkdownContentViewer, { content, defaultMode: "preview" }));

  // Safe link renders as <a> with security attributes
  assert.equal(html.includes('href="https://getsemantica.ai"'), true);
  assert.equal(html.includes('target="_blank"'), true);
  assert.equal(html.includes('rel="noopener noreferrer"'), true);

  // Unsafe links do NOT render as <a> tags
  assert.equal(html.includes('href="javascript:alert(1)"'), false);
  assert.equal(html.includes('href="//evil.com"'), false);
  assert.equal(html.includes("Unsafe Scheme"), true);
  assert.equal(html.includes("Protocol Relative"), true);
});

test("renders remote images as safe placeholder badges instead of <img> tags", () => {
  const content = `![System Diagram](https://example.com/diagram.png)`;
  const html = renderToString(React.createElement(MarkdownContentViewer, { content, defaultMode: "preview" }));

  // No <img> tag rendered
  assert.equal(html.includes("<img"), false);
  // Image placeholder badge rendered
  assert.equal(html.includes("Image:"), true);
  assert.equal(html.includes("System Diagram"), true);
});

test("renders clear empty-state message when content is empty or null", () => {
  const emptyHtml = renderToString(React.createElement(MarkdownContentViewer, { content: "" }));
  assert.equal(emptyHtml.includes("No content available for this node."), true);

  const nullHtml = renderToString(React.createElement(MarkdownContentViewer, { content: null }));
  assert.equal(nullHtml.includes("No content available for this node."), true);
});

test("renders plain text cleanly without requiring Markdown formatting", () => {
  const plainText = "Plain entity summary text without markdown formatting.";
  const html = renderToString(React.createElement(MarkdownContentViewer, { content: plainText, defaultMode: "preview" }));

  assert.equal(html.includes(plainText), true);
});

test("handles very large Markdown content without failure", () => {
  const largeContent = `# Large Knowledge Node\n\n` + "Structured observation paragraph. ".repeat(400);
  assert.equal(largeContent.length > 10000, true);

  const html = renderToString(React.createElement(MarkdownContentViewer, { content: largeContent, defaultMode: "preview" }));
  assert.equal(html.includes("Large Knowledge Node"), true);
});

// ─── H-2: Stale copied state lifecycle (SSR-compatible portion) ─────────────
// Full state-transition testing (Node A → copy → Node B) requires an interactive
// framework. The lifecycle correctness is guaranteed by the render-phase
// previous-prop synchronisation pattern: a `copiedForContent` state value tracks
// the content for which the copied indicator was set; when `content` changes, the
// mismatch is detected during render and `copied` is reset to false in the same
// React batch, before the new node's UI is painted. What we CAN verify in SSR
// is that the initial render for any content value shows the Copy button (not the
// Copied indicator), which confirms the initial state is always clean.
test("copy button always starts in un-copied state on initial render", () => {
  const html = renderToString(React.createElement(MarkdownContentViewer, {
    content: "# Some Node\n\nDescription text.",
    defaultMode: "preview",
  }));

  // Initial render must show 'Copy', never 'Copied'
  assert.equal(html.includes("Copy"), true, "Copy button must be present on initial render");
  assert.equal(html.includes("Copied"), false, "Copied indicator must NOT be present on initial render");
});

// ─── #1117: complete ARIA tab/tabpanel relationship ─────────────────────────
// The tabs previously exposed role/aria-selected but never connected to the
// panel, so assistive tech could not tell which content the tabs controlled.
// These assertions read the rendered HTML, matching the aria-label precedent
// used by the GFM footnote tests above.

/** Pull an attribute value out of the element carrying a given marker attribute. */
function attrOf(html: string, elementMarker: string, attr: string): string | null {
  const idx = html.indexOf(elementMarker);
  if (idx === -1) return null;
  const tagStart = html.lastIndexOf("<", idx);
  const tag = html.slice(tagStart, html.indexOf(">", idx) + 1);
  const m = tag.match(new RegExp(`${attr}="([^"]*)"`));
  return m ? m[1] : null;
}

test("each tab is wired to the panel and the panel back to the active tab", () => {
  const html = renderToString(React.createElement(MarkdownContentViewer, {
    content: "# Node\n\nBody text.",
    defaultMode: "preview",
  }));

  const panelId = attrOf(html, 'role="tabpanel"', "id");
  assert.ok(panelId, "panel must carry an id");

  // Both tabs must reference the panel that actually exists in the DOM.
  const controls = [...html.matchAll(/aria-controls="([^"]*)"/g)].map((m) => m[1]);
  assert.equal(controls.length, 2, "both tabs must declare aria-controls");
  for (const c of controls) {
    assert.equal(c, panelId, "aria-controls must resolve to the rendered panel");
  }

  // The panel must be labelled by the *selected* tab.
  const labelledBy = attrOf(html, 'role="tabpanel"', "aria-labelledby");
  const selectedTabId = attrOf(html, 'aria-selected="true"', "id");
  assert.ok(selectedTabId, "selected tab must carry an id");
  assert.equal(labelledBy, selectedTabId, "panel must be labelled by the selected tab");
});

test("panel labelling follows the active tab in source mode", () => {
  const html = renderToString(React.createElement(MarkdownContentViewer, {
    content: "# Node\n\nBody text.",
    defaultMode: "source",
  }));
  const labelledBy = attrOf(html, 'role="tabpanel"', "aria-labelledby");
  const selectedTabId = attrOf(html, 'aria-selected="true"', "id");
  // Assert both are present before comparing — otherwise null === null would
  // make this pass against a component with no tab wiring at all.
  assert.ok(labelledBy, "panel must declare aria-labelledby");
  assert.ok(selectedTabId, "selected tab must carry an id");
  assert.equal(labelledBy, selectedTabId);
  assert.equal(selectedTabId.endsWith("-tab-source"), true, "source tab must be the selected one");
});

// The empty state is a third render branch. If the panel only existed on the two
// content branches, aria-controls would dangle for empty nodes.
test("tabpanel is still rendered, and aria-controls still resolves, when empty", () => {
  const html = renderToString(React.createElement(MarkdownContentViewer, { content: "" }));
  assert.equal(html.includes("No content available for this node."), true);
  const panelId = attrOf(html, 'role="tabpanel"', "id");
  assert.ok(panelId, "empty state must still render the tabpanel");
  const controls = [...html.matchAll(/aria-controls="([^"]*)"/g)].map((m) => m[1]);
  assert.equal(controls.length, 2);
  assert.deepEqual([...new Set(controls)], [panelId], "aria-controls must not dangle on the empty state");
});

test("tablist is a single tab stop via roving tabindex", () => {
  const html = renderToString(React.createElement(MarkdownContentViewer, {
    content: "# Node",
    defaultMode: "preview",
  }));
  const tabIndexes = [...html.matchAll(/role="tab"[^>]*/g)].map((m) => m[0].match(/tabindex="(-?\d+)"/)?.[1]);
  assert.equal(tabIndexes.filter((t) => t === "0").length, 1, "exactly one tab may be reachable via Tab");
  assert.equal(tabIndexes.filter((t) => t === "-1").length, 1, "the other tab must be removed from tab order");
});

test("ids are unique per instance so two mounted viewers cannot collide", () => {
  const one = renderToString(React.createElement(MarkdownContentViewer, { content: "# A" }));
  const two = renderToString(React.createElement(
    "div",
    null,
    React.createElement(MarkdownContentViewer, { content: "# A" }),
    React.createElement(MarkdownContentViewer, { content: "# B" }),
  ));
  assert.ok(attrOf(one, 'role="tabpanel"', "id"));
  const panelIds = [...two.matchAll(/role="tabpanel" id="([^"]*)"/g)].map((m) => m[1]);
  assert.equal(panelIds.length, 2, "both viewers must render a panel");
  assert.notEqual(panelIds[0], panelIds[1], "panel ids must differ between instances");
});

import { resolveTabNavigation } from "../src/workspaces/GraphWorkspace/MarkdownContentViewer.tsx";

// ─── #1117 / Qodo: roving-tabindex navigation logic ─────────────────────────
// resolveTabNavigation is the pure function that drives handleTabKeyDown.
// Testing it directly gives us coverage of the navigation contract without
// needing a live DOM or synthetic keyboard events.

// ── ArrowRight moves focus forward, wraps at end ────────────────────────────
test("ArrowRight from preview moves focus to source without wrapping", () => {
  assert.equal(resolveTabNavigation("preview", "ArrowRight"), "source");
});

test("ArrowRight from source wraps back to preview", () => {
  // With only two tabs the rightmost tab wraps to the first.
  assert.equal(resolveTabNavigation("source", "ArrowRight"), "preview");
});

// ── ArrowLeft moves focus backward, wraps at start ──────────────────────────
test("ArrowLeft from source moves focus to preview without wrapping", () => {
  assert.equal(resolveTabNavigation("source", "ArrowLeft"), "preview");
});

test("ArrowLeft from preview wraps back to source", () => {
  // The leftmost tab wraps to the last.
  assert.equal(resolveTabNavigation("preview", "ArrowLeft"), "source");
});

// ── Home and End always resolve to the boundary tabs ────────────────────────
test("Home always moves focus to the first tab (preview)", () => {
  assert.equal(resolveTabNavigation("preview", "Home"), "preview", "Home on first tab stays at first");
  assert.equal(resolveTabNavigation("source", "Home"), "preview", "Home on last tab jumps to first");
});

test("End always moves focus to the last tab (source)", () => {
  assert.equal(resolveTabNavigation("source", "End"), "source", "End on last tab stays at last");
  assert.equal(resolveTabNavigation("preview", "End"), "source", "End on first tab jumps to last");
});

// ── Non-navigation keys return null so the handler can bail out ─────────────
test("non-navigation keys return null so keydown handler does not move focus", () => {
  for (const key of ["Enter", "Space", " ", "Tab", "Escape", "a", "F1"]) {
    assert.equal(
      resolveTabNavigation("preview", key),
      null,
      `key "${key}" must return null`,
    );
    assert.equal(
      resolveTabNavigation("source", key),
      null,
      `key "${key}" on source must return null`,
    );
  }
});

// ── Arrow navigation does NOT change activeMode (manual activation) ──────────
// resolveTabNavigation only returns the target for focus movement. The caller
// (focusTab) imperatively updates tabIndex and moves DOM focus without calling
// setActiveMode. We verify the contract: resolveTabNavigation never returns a
// value that could be interpreted as "activate" — it just returns a tab identity.
// The absence of a setActiveMode call in focusTab is what enforces manual
// activation; these tests confirm the logic layer does not accidentally activate.
test("resolveTabNavigation return value is purely a focus target, never an activation signal", () => {
  // A real activation calls setActiveMode. resolveTabNavigation just computes
  // the next focused tab. If the caller only updates focusedModeRef + DOM tabIndex,
  // activeMode remains unchanged. This test asserts the function's return contract.
  const result = resolveTabNavigation("preview", "ArrowRight");
  assert.equal(typeof result, "string", "returns a string tab name when key is a navigation key");
  assert.notEqual(result, null, "non-null means 'move focus here'");
  // The returned value is a valid tab mode, not a command to switch content.
  assert.ok(result === "preview" || result === "source");
});

// ── Roving tabindex initial state for defaultMode='source' ──────────────────
// The existing 'tablist is a single tab stop' test only checks defaultMode='preview'.
// When the component starts in source mode the source tab must start at tabIndex 0.
test("roving tabindex initial state is correct when defaultMode is source", () => {
  const html = renderToString(React.createElement(MarkdownContentViewer, {
    content: "# Node",
    defaultMode: "source",
  }));
  const tabIndexes = [...html.matchAll(/role="tab"[^>]*/g)].map(
    (m) => m[0].match(/tabindex="(-?\d+)"/)?.[1],
  );
  // There are exactly two tabs; one must be 0, the other -1.
  assert.equal(tabIndexes.filter((t) => t === "0").length, 1, "exactly one tab is reachable via Tab");
  assert.equal(tabIndexes.filter((t) => t === "-1").length, 1, "the other tab is removed from tab order");

  // The source tab specifically must hold tabIndex 0 (it is the focused/active one).
  // We identify the source tab by its id suffix and verify its tabindex.
  const sourceTabMatch = [...html.matchAll(/role="tab"[^>]*/g)].find((m) =>
    m[0].includes("-tab-source"),
  );
  assert.ok(sourceTabMatch, "source tab must be present in rendered HTML");
  assert.equal(
    sourceTabMatch[0].match(/tabindex="(-?\d+)"/)?.[1],
    "0",
    "source tab must have tabIndex 0 when defaultMode is source",
  );
});

// ── aria-labelledby correctness for each defaultMode ────────────────────────
// These tests verify the static wiring; the existing tests cover preview and
// source modes, so these act as a consolidated regression check that both
// directions of the panel labelling contract hold after the refactor.
test("panel aria-labelledby matches the selected tab in preview mode after refactor", () => {
  const html = renderToString(React.createElement(MarkdownContentViewer, {
    content: "# Refactor check",
    defaultMode: "preview",
  }));
  const labelledBy = attrOf(html, 'role="tabpanel"', "aria-labelledby");
  const selectedTabId = attrOf(html, 'aria-selected="true"', "id");
  assert.ok(labelledBy, "panel must carry aria-labelledby after refactor");
  assert.ok(selectedTabId, "a tab must be aria-selected=true after refactor");
  assert.equal(labelledBy, selectedTabId, "panel must be labelled by the selected tab");
  assert.ok(selectedTabId.endsWith("-tab-preview"), "preview tab must be selected");
});

test("panel aria-labelledby matches the selected tab in source mode after refactor", () => {
  const html = renderToString(React.createElement(MarkdownContentViewer, {
    content: "# Refactor check",
    defaultMode: "source",
  }));
  const labelledBy = attrOf(html, 'role="tabpanel"', "aria-labelledby");
  const selectedTabId = attrOf(html, 'aria-selected="true"', "id");
  assert.ok(labelledBy, "panel must carry aria-labelledby after refactor");
  assert.ok(selectedTabId, "a tab must be aria-selected=true after refactor");
  assert.equal(labelledBy, selectedTabId, "panel must be labelled by the selected tab");
  assert.ok(selectedTabId.endsWith("-tab-source"), "source tab must be selected");
});

// ── Qodo performance regression: focusedModeRef is a ref, not state ──────────
// The confirmed bug was: setFocusedMode (useState setter) caused a re-render
// on every arrow keypress, which triggered react-markdown's full parse+runSync
// cycle even though activeMode did not change.
//
// The fix uses useRef instead of useState for the focused-mode tracking. Refs
// do not schedule re-renders when mutated. We cannot directly count React
// renders inside renderToString (it runs synchronously, once). What we CAN
// verify is the structural invariant that makes the fix work:
//
//   1. The component renders identically for the same props on successive
//      renderToString calls (no hidden state that would differ if focusedMode
//      were state vs ref — both start at defaultMode on fresh mount).
//   2. The tabIndex JSX prop reads from focusedModeRef.current which equals
//      defaultMode on initial render. This is the same output the old code
//      produced, so no regression in SSR output.
//
// Full verification of "arrow key press does NOT trigger ReactMarkdown.parse()"
// requires a live DOM + render-count instrumentation. That test belongs in an
// interactive framework (Playwright component test or jsdom + Testing Library)
// which is not installed in this project. The structural guarantee provided by
// the ref-based implementation is documented here for that future test to pin.
test("successive renderToString calls produce identical tabIndex output (ref parity with state)", () => {
  const props = { content: "# Perf node\n\n" + "row. ".repeat(200), defaultMode: "preview" as const };
  const first  = renderToString(React.createElement(MarkdownContentViewer, props));
  const second = renderToString(React.createElement(MarkdownContentViewer, props));
  // Both renders start with a fresh ref initialised to defaultMode, so output
  // must be byte-for-byte identical (modulo React's useId counter which advances
  // per call — we compare structure, not the specific id values).
  const extractTabIndexes = (html: string) =>
    [...html.matchAll(/role="tab"[^>]*/g)].map((m) => m[0].match(/tabindex="(-?\d+)"/)?.[1]);
  assert.deepEqual(
    extractTabIndexes(first),
    extractTabIndexes(second),
    "tabIndex values must be the same on every fresh mount with the same defaultMode",
  );
  // Verify content is actually rendered (not an empty-state shortcut).
  assert.ok(first.includes("Perf node"), "markdown content must be rendered");
});

// ── Regression guard: tabIndex-reset-on-re-render (useLayoutEffect fix) ──────
//
// The adversarial review identified a concrete bug: after ArrowRight moves focus
// to Source while Preview remains selected (activeMode='preview'), any subsequent
// React re-render applied JSX tabIndex={activeMode === X} and overwrote the
// imperative tabIndex values set by focusTab(), reverting focus tracking to the
// selection state.
//
// Fix: useLayoutEffect(() => { ... }) with no deps array, which runs after every
// React render and restores focusedModeRef.current to the DOM before paint.
//
// WHY THIS CANNOT BE TESTED WITH renderToString:
//   The fix is a client-side DOM mutation applied by useLayoutEffect. On the
//   server, useLayoutEffect is silently skipped (React design: effects do not run
//   during SSR). renderToString produces only the initial HTML, which correctly
//   reflects activeMode === focusedModeRef.current at mount time. It cannot
//   simulate: (a) a keydown event that calls focusTab(), (b) a subsequent
//   state-update re-render, or (c) the useLayoutEffect correction after that
//   render. The full sequence requires a live DOM with React hydrated and event
//   dispatch — either jsdom + React Testing Library, or Playwright component
//   tests. Neither is installed in this project.
//
// WHAT WE CAN VERIFY (SSR-compatible proxies):
//   1. The fix is mechanical: useLayoutEffect reads focusedModeRef.current and
//      writes it unconditionally to the DOM. The only way it fails is if:
//      (a) focusedModeRef.current is wrong — covered by the navigation logic tests.
//      (b) useLayoutEffect is not called — impossible if it is in the component body
//          unconditionally.
//      (c) The ref assignment in focusTab() is skipped — covered by the imperative
//          DOM update tests (focusTab sets the ref before calling .focus()).
//   2. We verify the structural guarantee: on initial render focusedModeRef.current
//      equals defaultMode, so JSX and useLayoutEffect agree, and no visible change
//      occurs. This is the only SSR-observable aspect of the fix.
//
// TRACKING: Add a jsdom/Playwright test for the full sequence as a follow-up.
// The specific scenario to pin:
//   Preview selected → focusTab('source') → re-render (e.g. setCopied) →
//   useLayoutEffect runs → sourceTab.tabIndex === 0 AND previewTab.tabIndex === -1.

test("tabIndex regression (SSR proxy): initial focusedModeRef matches defaultMode so JSX and useLayoutEffect agree on mount", () => {
  // On initial mount focusedModeRef.current = defaultMode and activeMode = defaultMode,
  // so both the JSX tabIndex expression and the useLayoutEffect correction write
  // identical values. There is no visible disagreement at first render.
  // This confirms the static foundation the fix relies on.
  for (const mode of ["preview", "source"] as const) {
    const html = renderToString(React.createElement(MarkdownContentViewer, {
      content: "# Node",
      defaultMode: mode,
    }));
    const tabs = [...html.matchAll(/role="tab"[^>]*/g)];
    assert.equal(tabs.length, 2, `${mode}: both tab buttons must be present`);

    const focusedTab = tabs.find((m) => m[0].includes(`-tab-${mode}`));
    const otherTab   = tabs.find((m) => !m[0].includes(`-tab-${mode}`));
    assert.ok(focusedTab, `${mode}: the ${mode} tab must be present`);
    assert.ok(otherTab,   `${mode}: the other tab must be present`);

    // The tab matching defaultMode must have tabIndex=0 (focused/active at mount).
    assert.equal(
      focusedTab[0].match(/tabindex="(-?\d+)"/)?.[1],
      "0",
      `${mode}: ${mode} tab must start as the single Tab stop`,
    );
    // The other tab must have tabIndex=-1 (removed from tab order at mount).
    assert.equal(
      otherTab[0].match(/tabindex="(-?\d+)"/)?.[1],
      "-1",
      `${mode}: the other tab must be removed from tab order at mount`,
    );
  }
});