@peaske7/readit 0.1.7 → 0.2.0

package/e2e/perf/text-selection.spec.ts

@@ -0,0 +1,119 @@
+import { test } from "@playwright/test";
+import { getFixturePath, TIERS } from "./fixtures/generate";
+import {
+  measureInteraction,
+  reportInteraction,
+  waitForHighlightCount,
+} from "./utils/metrics";
+import { spawnPerfCli } from "./utils/perf-cli";
+
+// Use medium tier
+const tier = TIERS[0];
+const ITERATIONS = 5;
+
+test(`text-selection: ${tier.name} (${tier.lines} lines, ${tier.comments} comments)`, async ({
+  page,
+}, testInfo) => {
+  const fixturePath = getFixturePath(tier);
+  const { url, cleanup } = await spawnPerfCli(fixturePath, { port: 4630 });
+
+  try {
+    await page.goto(url);
+    await waitForHighlightCount(page, tier.comments);
+    await page.waitForTimeout(300);
+
+    // Collect selectable text positions distributed across the document
+    const targets = await page.evaluate((count) => {
+      const article = document.querySelector("article");
+      if (!article) throw new Error("Article not found");
+
+      const paragraphs = [...article.querySelectorAll("p")];
+      const step = Math.floor(paragraphs.length / (count + 1));
+
+      return paragraphs
+        .filter((_, i) => i % step === 0)
+        .slice(0, count)
+        .map((p) => {
+          const text = (p.textContent || "").slice(0, 25).trim();
+          return text;
+        })
+        .filter((t) => t.length > 10);
+    }, ITERATIONS);
+
+    const durations: number[] = [];
+
+    for (const targetText of targets) {
+      // Clear any existing selection state
+      await page.evaluate(() => window.getSelection()?.removeAllRanges());
+      await page.waitForTimeout(100);
+
+      const duration = await measureInteraction(
+        page,
+        `text-selection-${targets.indexOf(targetText)}`,
+        async () => {
+          // Trigger text selection via custom event
+          await page.evaluate((text) => {
+            const article = document.querySelector("article");
+            if (!article) throw new Error("Article not found");
+
+            const walker = document.createTreeWalker(
+              article,
+              NodeFilter.SHOW_TEXT,
+            );
+            let currentOffset = 0;
+
+            while (walker.nextNode()) {
+              const textNode = walker.currentNode as Text;
+              const content = textNode.textContent || "";
+              const index = content.indexOf(text);
+
+              if (index !== -1) {
+                const startOffset = currentOffset + index;
+                const endOffset = startOffset + text.length;
+                window.dispatchEvent(
+                  new CustomEvent("test:select-text", {
+                    detail: { text, startOffset, endOffset },
+                  }),
+                );
+                return;
+              }
+
+              currentOffset += content.length;
+            }
+
+            throw new Error(`Text "${text}" not found`);
+          }, targetText);
+        },
+        async () => {
+          // Wait for comment input textarea to appear
+          await page
+            .locator('textarea[placeholder="Add your comment..."]')
+            .waitFor({ state: "visible", timeout: 10_000 });
+        },
+      );
+
+      durations.push(duration);
+
+      // Cancel the selection (press Escape to dismiss the comment input)
+      await page.keyboard.press("Escape");
+      await page.waitForTimeout(100);
+    }
+
+    // Report median
+    durations.sort((a, b) => a - b);
+    const median = durations[Math.floor(durations.length / 2)];
+
+    reportInteraction(
+      testInfo,
+      `text-selection: median of ${durations.length} iterations (${tier.name})`,
+      median,
+    );
+
+    // Also report all iterations
+    console.log(
+      `  All iterations: ${durations.map((d) => `${Math.round(d)}ms`).join(", ")}`,
+    );
+  } finally {
+    await cleanup();
+  }
+});

package/e2e/perf/utils/metrics.ts

@@ -0,0 +1,286 @@
+import type { Page, TestInfo } from "@playwright/test";
+
+// ─── Types ───────────────────────────────────────────────────────────
+
+export interface LoadMetrics {
+  fcp: number | null;
+  domContentLoaded: number;
+  allHighlightsPainted: number;
+  highlightCount: number;
+}
+
+export interface ScrollMetrics {
+  totalTimeMs: number;
+  longTaskCount: number;
+  longTaskDurations: number[];
+  p50: number;
+  p95: number;
+  p99: number;
+}
+
+export interface InteractionMetrics {
+  durationMs: number;
+}
+
+// ─── Wait for highlights ─────────────────────────────────────────────
+
+/**
+ * Polls the DOM for comment highlights until either:
+ * - The expected count is reached, OR
+ * - The count stabilizes (no change for `stableMs` milliseconds)
+ *
+ * Returns the timestamp when highlights finished painting.
+ * Not all comments may resolve to highlights (anchor failures, overlaps).
+ */
+export async function waitForHighlightCount(
+  page: Page,
+  expectedCount: number,
+  timeoutMs = 60_000,
+): Promise<number> {
+  return page.evaluate(
+    ({ expected, timeout, stableWindow }) => {
+      return new Promise<number>((resolve, reject) => {
+        const deadline = performance.now() + timeout;
+        let lastCount = 0;
+        let lastChangeTime = performance.now();
+
+        const check = () => {
+          const marks = document.querySelectorAll("mark[data-comment-id]");
+          const uniqueIds = new Set(
+            [...marks].map((m) => m.getAttribute("data-comment-id")),
+          );
+          const count = uniqueIds.size;
+
+          // Exact target reached
+          if (count >= expected) {
+            resolve(performance.now());
+            return;
+          }
+
+          // Track changes for stabilization
+          if (count !== lastCount) {
+            lastCount = count;
+            lastChangeTime = performance.now();
+          }
+
+          // Stabilized: count hasn't changed for stableWindow ms and we have > 0 highlights
+          if (count > 0 && performance.now() - lastChangeTime > stableWindow) {
+            resolve(performance.now());
+            return;
+          }
+
+          if (performance.now() > deadline) {
+            reject(
+              new Error(
+                `Timed out: expected ${expected} highlights, found ${count}`,
+              ),
+            );
+            return;
+          }
+
+          requestAnimationFrame(check);
+        };
+
+        requestAnimationFrame(check);
+      });
+    },
+    { expected: expectedCount, timeout: timeoutMs, stableWindow: 2000 },
+  );
+}
+
+// ─── Collect load metrics ────────────────────────────────────────────
+
+/**
+ * Navigates to the URL and collects load + highlight timing metrics.
+ */
+export async function collectLoadMetrics(
+  page: Page,
+  url: string,
+  expectedComments: number,
+): Promise<LoadMetrics> {
+  await page.goto(url);
+
+  const highlightTimestamp = await waitForHighlightCount(
+    page,
+    expectedComments,
+  );
+
+  const navMetrics = await page.evaluate(() => {
+    const nav = performance.getEntriesByType(
+      "navigation",
+    )[0] as PerformanceNavigationTiming;
+    const paintEntries = performance.getEntriesByType("paint");
+    const fcp = paintEntries.find((e) => e.name === "first-contentful-paint");
+    const marks = document.querySelectorAll("mark[data-comment-id]");
+    const actualCount = new Set(
+      [...marks].map((m) => m.getAttribute("data-comment-id")),
+    ).size;
+
+    return {
+      fcp: fcp ? fcp.startTime : null,
+      domContentLoaded: nav.domContentLoadedEventEnd,
+      actualCount,
+    };
+  });
+
+  return {
+    fcp: navMetrics.fcp,
+    domContentLoaded: navMetrics.domContentLoaded,
+    allHighlightsPainted: highlightTimestamp,
+    highlightCount: navMetrics.actualCount,
+  };
+}
+
+// ─── Collect scroll metrics ──────────────────────────────────────────
+
+/**
+ * Scrolls programmatically from top to bottom, collecting Long Task entries.
+ */
+export async function collectScrollMetrics(
+  page: Page,
+  stepPx = 600,
+  intervalMs = 150,
+): Promise<ScrollMetrics> {
+  return page.evaluate(
+    ({ step, interval }) => {
+      return new Promise<{
+        totalTimeMs: number;
+        longTaskCount: number;
+        longTaskDurations: number[];
+        p50: number;
+        p95: number;
+        p99: number;
+      }>((resolve) => {
+        const longTasks: number[] = [];
+
+        // Observe Long Tasks during scroll only (no buffered — excludes page load jank)
+        const obs = new PerformanceObserver((list) => {
+          for (const entry of list.getEntries()) {
+            longTasks.push(entry.duration);
+          }
+        });
+        obs.observe({ type: "longtask" });
+
+        const totalHeight = document.documentElement.scrollHeight;
+        const start = performance.now();
+        let currentY = 0;
+
+        const scrollStep = () => {
+          currentY += step;
+          window.scrollTo(0, currentY);
+
+          if (currentY < totalHeight) {
+            setTimeout(scrollStep, interval);
+          } else {
+            // Wait a beat for final Long Tasks to fire
+            setTimeout(() => {
+              obs.disconnect();
+              const elapsed = performance.now() - start;
+
+              const sorted = [...longTasks].sort((a, b) => a - b);
+              const pct = (p: number) => {
+                if (sorted.length === 0) return 0;
+                const idx = Math.ceil((p / 100) * sorted.length) - 1;
+                return sorted[Math.max(0, idx)];
+              };
+
+              resolve({
+                totalTimeMs: elapsed,
+                longTaskCount: sorted.length,
+                longTaskDurations: sorted,
+                p50: pct(50),
+                p95: pct(95),
+                p99: pct(99),
+              });
+            }, 500);
+          }
+        };
+
+        // Start scrolling
+        window.scrollTo(0, 0);
+        setTimeout(scrollStep, interval);
+      });
+    },
+    { step: stepPx, interval: intervalMs },
+  );
+}
+
+// ─── Measure interaction timing ──────────────────────────────────────
+
+/**
+ * Sets a performance mark, runs the trigger, waits for condition, returns duration.
+ */
+export async function measureInteraction(
+  page: Page,
+  name: string,
+  trigger: () => Promise<void>,
+  waitFor: () => Promise<void>,
+): Promise<number> {
+  await page.evaluate((n) => performance.mark(`${n}-start`), name);
+
+  await trigger();
+  await waitFor();
+
+  return page.evaluate((n) => {
+    performance.mark(`${n}-end`);
+    const measure = performance.measure(n, `${n}-start`, `${n}-end`);
+    return measure.duration;
+  }, name);
+}
+
+// ─── Reporting ───────────────────────────────────────────────────────
+
+export function reportLoadMetrics(
+  testInfo: TestInfo,
+  label: string,
+  metrics: LoadMetrics,
+): void {
+  const lines = [
+    `--- ${label} ---`,
+    `  FCP:                    ${metrics.fcp !== null ? `${Math.round(metrics.fcp)}ms` : "N/A"}`,
+    `  DOM Content Loaded:     ${Math.round(metrics.domContentLoaded)}ms`,
+    `  All highlights painted: ${Math.round(metrics.allHighlightsPainted)}ms`,
+    `  Highlights found:       ${metrics.highlightCount}`,
+  ];
+  console.log(lines.join("\n"));
+
+  testInfo.annotations.push({
+    type: "perf-metric",
+    description: JSON.stringify({ label, ...metrics }),
+  });
+}
+
+export function reportScrollMetrics(
+  testInfo: TestInfo,
+  label: string,
+  metrics: ScrollMetrics,
+): void {
+  const lines = [
+    `--- ${label} ---`,
+    `  Total scroll time:    ${Math.round(metrics.totalTimeMs)}ms`,
+    `  Long tasks (>50ms):   ${metrics.longTaskCount}`,
+    `  P50 long task:        ${Math.round(metrics.p50)}ms`,
+    `  P95 long task:        ${Math.round(metrics.p95)}ms`,
+    `  P99 long task:        ${Math.round(metrics.p99)}ms`,
+  ];
+  console.log(lines.join("\n"));
+
+  testInfo.annotations.push({
+    type: "perf-metric",
+    description: JSON.stringify({ label, ...metrics }),
+  });
+}
+
+export function reportInteraction(
+  testInfo: TestInfo,
+  label: string,
+  durationMs: number,
+): void {
+  console.log(`--- ${label} ---`);
+  console.log(`  Duration: ${Math.round(durationMs)}ms`);
+
+  testInfo.annotations.push({
+    type: "perf-metric",
+    description: JSON.stringify({ label, durationMs }),
+  });
+}

package/e2e/perf/utils/perf-cli.ts

@@ -0,0 +1,86 @@
+import type { ChildProcess } from "node:child_process";
+import { spawn } from "node:child_process";
+import { resolve } from "node:path";
+
+interface SpawnPerfCliResult {
+  url: string;
+  process: ChildProcess;
+  cleanup: () => Promise<void>;
+}
+
+interface SpawnPerfCliOptions {
+  port?: number;
+}
+
+const CLI_PATH = resolve(import.meta.dirname, "../../../dist/cli.js");
+
+/**
+ * Start the readit CLI with one or more fixture files for perf testing.
+ * Uses --no-open (no --clean, so pre-seeded comments are loaded).
+ */
+export async function spawnPerfCli(
+  fixturePaths: string | string[],
+  options: SpawnPerfCliOptions = {},
+): Promise<SpawnPerfCliResult> {
+  const { port = 4600 } = options;
+
+  const paths = Array.isArray(fixturePaths) ? fixturePaths : [fixturePaths];
+  const args = [CLI_PATH, ...paths, "--no-open", "--port", String(port)];
+
+  const cliProcess = spawn("bun", args, {
+    cwd: resolve(import.meta.dirname, "../../.."),
+    stdio: ["pipe", "pipe", "pipe"],
+  });
+
+  const url = await waitForServerReady(cliProcess);
+
+  return {
+    url,
+    process: cliProcess,
+    cleanup: async () => {
+      cliProcess.kill("SIGTERM");
+      await new Promise<void>((resolve) => {
+        cliProcess.once("exit", () => resolve());
+        setTimeout(resolve, 2000);
+      });
+    },
+  };
+}
+
+function waitForServerReady(cliProcess: ChildProcess): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let output = "";
+
+    const timeout = setTimeout(() => {
+      reject(
+        new Error(`Server did not start within timeout. Output: ${output}`),
+      );
+    }, 30_000);
+
+    cliProcess.stdout?.on("data", (data: Buffer) => {
+      output += data.toString();
+
+      const urlMatch = output.match(/URL:\s+(http:\/\/[^\s]+)/);
+      if (urlMatch) {
+        clearTimeout(timeout);
+        resolve(urlMatch[1]);
+      }
+    });
+
+    cliProcess.stderr?.on("data", (data: Buffer) => {
+      output += data.toString();
+    });
+
+    cliProcess.on("error", (err) => {
+      clearTimeout(timeout);
+      reject(err);
+    });
+
+    cliProcess.on("exit", (code) => {
+      if (code !== 0 && code !== null) {
+        clearTimeout(timeout);
+        reject(new Error(`CLI exited with code ${code}: ${output}`));
+      }
+    });
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaske7/readit",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "A CLI tool to review Markdown documents with inline comments",
   "author": "Jay Shimada <peaske@pm.me>",
   "license": "MIT",
@@ -14,16 +14,17 @@
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
-    "dev": "NODE_ENV=development bun --watch src/cli/index.ts --",
+    "dev": "NODE_ENV=development bun --watch src/cli.ts --",
     "dev:client": "bunx vite",
     "build": "bunx vite build && bun run build:cli",
-    "build:cli": "NODE_ENV=production bun build src/cli/index.ts --outdir dist --target bun --format esm --packages external",
+    "build:cli": "NODE_ENV=production bun build src/cli.ts --outdir dist --target bun --format esm --packages external",
     "start": "bun run build && bun dist/index.js",
     "test": "vitest run",
     "bench": "vitest bench",
     "test:watch": "vitest",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui",
+    "test:e2e": "playwright test --project=chromium",
+    "test:e2e:ui": "playwright test --project=chromium --ui",
+    "test:perf": "PERF_SETUP=1 playwright test --project=perf",
     "check": "biome check .",
     "check:fix": "biome check --write .",
     "format": "biome format --write .",
@@ -33,37 +34,27 @@
     "prepare": "lefthook install || true"
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-slot": "^1.2.4",
-    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "commander": "^14.0.3",
-    "dompurify": "^3.3.3",
     "lucide-react": "^0.577.0",
     "mermaid": "^11.13.0",
     "open": "^11.0.0",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.1",
-    "rehype-parse": "^9.0.1",
     "rehype-raw": "^7.0.0",
-    "rehype-react": "^8.0.0",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "unified": "^11.0.5",
-    "unist-util-visit": "^5.1.0",
     "zod": "^4.3.6",
     "zustand": "^5.0.12"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.8",
+    "@biomejs/biome": "^2.4.9",
     "@playwright/test": "^1.58.2",
     "@tailwindcss/vite": "^4.2.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/bun": "^1.3.11",
-    "@types/dompurify": "^3.2.0",
     "@types/jsdom": "^28.0.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -75,7 +66,7 @@
     "react-dom": "^19.2.4",
     "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
-    "vite": "^8.0.1",
-    "vitest": "^4.1.0"
+    "vite": "^8.0.3",
+    "vitest": "^4.1.1"
   }
 }

package/playwright.config.ts

@@ -13,9 +13,21 @@ export default defineConfig({
     trace: "on-first-retry",
   },
 
+  globalSetup: process.env.PERF_SETUP ? "./e2e/perf/perf.setup.ts" : undefined,
+  globalTeardown: process.env.PERF_SETUP
+    ? "./e2e/perf/perf.teardown.ts"
+    : undefined,
+
   projects: [
     {
       name: "chromium",
+      testIgnore: "**/perf/**",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "perf",
+      testDir: "./e2e/perf",
+      timeout: 120_000,
       use: { ...devices["Desktop Chrome"] },
     },
   ],