jsgrrchg · jsgrrchg · May 18, 2026 · May 17, 2026 · May 18, 2026 · May 18, 2026
diff --git a/.gitignore b/.gitignore
@@ -28,6 +28,9 @@ apps/desktop/dist-electron/
 apps/desktop/dist-electron*/
 apps/desktop/out/
 apps/desktop/node_modules/
+apps/desktop/test-results/
+apps/desktop/playwright-report/
+apps/desktop/e2e/dist/
 assets/
 !apps/desktop/src/assets/
 !apps/desktop/src/assets/fonts/

diff --git a/apps/desktop/e2e/harness/index.html b/apps/desktop/e2e/harness/index.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>NeverWrite live-preview harness</title>
+        <style>
+            :root {
+                --text-primary: #1a1a1a;
+                --text-secondary: #6a6a6a;
+                --bg-primary: #ffffff;
+                --bg-secondary: #f4f4f4;
+                --bg-tertiary: #e8e8e8;
+                --bg-elevated: #ffffff;
+                --accent: #2563eb;
+                --border: #d4d4d4;
+                --highlight-bg: #fff3a0;
+                --highlight-text: #1a1a1a;
+                --selection-bg: #b3d4fc;
+                --text-input-line-height: 1.5;
+            }
+            html,
+            body {
+                margin: 0;
+                padding: 0;
+                font-family:
+                    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+                    monospace;
+                font-size: 16px;
+                background: var(--bg-primary);
+                color: var(--text-primary);
+            }
+            #editor {
+                width: 800px;
+                margin: 40px;
+                border: 1px solid var(--border);
+            }
+            .cm-editor {
+                font-family: inherit;
+                font-size: inherit;
+            }
+            .cm-editor.cm-focused {
+                outline: none;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="editor"></div>
+        <script>
+            // The renderer's runtime module throws at module load if
+            // window.neverwriteElectron is missing. The harness only needs
+            // CodeMirror + the live-preview extensions, so we provide a
+            // permissive stub here (synchronous, before any module loads).
+            window.neverwriteElectron = new Proxy(
+                {},
+                {
+                    get() {
+                        return () => Promise.resolve(null);
+                    },
+                },
+            );
+            window.neverwriteWindowLabel = "harness";
+        </script>
+        <script type="module" src="./main.ts"></script>
+    </body>
+</html>
diff --git a/apps/desktop/e2e/harness/main.ts b/apps/desktop/e2e/harness/main.ts
@@ -0,0 +1,64 @@
+import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
+import { EditorSelection, EditorState } from "@codemirror/state";
+import { drawSelection, EditorView } from "@codemirror/view";
+
+import { linkReferenceField } from "../../src/features/editor/extensions/livePreviewHelpers";
+import { createInlineLivePreviewPlugin } from "../../src/features/editor/extensions/livePreviewInline";
+import { livePreviewTheme } from "../../src/features/editor/extensions/livePreviewTheme";
+
+type MountOptions = {
+    doc: string;
+    selection: number | { anchor: number; head?: number };
+};
+
+declare global {
+    interface Window {
+        mountEditor: (options: MountOptions) => void;
+        editorView: EditorView | null;
+    }
+}
+
+let view: EditorView | null = null;
+
+function toSelection(selection: MountOptions["selection"]) {
+    if (typeof selection === "number") return EditorSelection.cursor(selection);
+    if (selection.head === undefined || selection.head === selection.anchor) {
+        return EditorSelection.cursor(selection.anchor);
+    }
+    return EditorSelection.range(selection.anchor, selection.head);
+}
+
+window.mountEditor = ({ doc, selection }: MountOptions) => {
+    view?.destroy();
+    const parent = document.getElementById("editor");
+    if (!parent) throw new Error("missing #editor mount node");
+    parent.innerHTML = "";
+
+    view = new EditorView({
+        state: EditorState.create({
+            doc,
+            selection: toSelection(selection),
+            extensions: [
+                markdown({ base: markdownLanguage }),
+                linkReferenceField,
+                createInlineLivePreviewPlugin(),
+                livePreviewTheme,
+                // The real editor (src/features/editor/Editor.tsx,
+                // FileTextTabView.tsx) uses drawSelection() so the caret is a
+                // CM-rendered element, not the native browser caret. Mirror
+                // that here so e2e measurements reflect what users see.
+                drawSelection(),
+            ],
+        }),
+        parent,
+    });
+
+    view.focus();
+    // Ensure the contenteditable inside the editor gets focus too, so the
+    // caret element actually renders in headless browsers.
+    const contentEl = parent.querySelector(".cm-content") as HTMLElement | null;
+    contentEl?.focus();
+    window.editorView = view;
+};
+
+window.editorView = null;
diff --git a/apps/desktop/e2e/playwright.config.ts b/apps/desktop/e2e/playwright.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+    testDir: "./tests",
+    fullyParallel: true,
+    forbidOnly: !!process.env.CI,
+    retries: process.env.CI ? 1 : 0,
+    workers: process.env.CI ? 1 : undefined,
+    reporter: process.env.CI ? "github" : "list",
+    use: {
+        baseURL: "http://localhost:5180",
+        trace: "retain-on-failure",
+    },
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+    ],
+    webServer: {
+        command: "npx vite --config e2e/vite.harness.config.ts --port 5180",
+        url: "http://localhost:5180",
+        cwd: "..",
+        reuseExistingServer: !process.env.CI,
+        stdout: "pipe",
+        stderr: "pipe",
+        timeout: 60_000,
+    },
+});