From 3a5cb929a48735bf8ddf1c9b6c67aa67ae615036 Mon Sep 17 00:00:00 2001
From: callumalpass <callumalpass@gmail.com>
Date: Fri, 2 Oct 2026 22:26:58 +1000
Subject: [PATCH] Prepare shared private feedback integration for Writer

---
 apps/writer/package.json                      |  1 +
 apps/writer/scripts/deploy-pages.mjs          |  2 +
 apps/writer/scripts/feedback-browser-test.mjs | 70 +++++++++++++++++++
 apps/writer/src/App.tsx                       | 11 ++-
 apps/writer/src/FeedbackRoot.test.ts          | 22 ++++++
 apps/writer/src/FeedbackRoot.tsx              | 30 ++++++++
 apps/writer/src/env.d.ts                      |  4 ++
 apps/writer/src/feedback-shell.css            |  8 +++
 apps/writer/src/main.tsx                      |  5 +-
 apps/writer/src/ui/ConnectGate.tsx            | 30 ++++++--
 apps/writer/src/ui/WorkspaceView.tsx          | 21 +++++-
 apps/writer/vite.config.ts                    |  2 +-
 apps/writer/vitest.config.ts                  |  2 +-
 docs/shared-feedback.md                       | 42 +++++++++++
 14 files changed, 239 insertions(+), 11 deletions(-)
 create mode 100644 apps/writer/scripts/feedback-browser-test.mjs
 create mode 100644 apps/writer/src/FeedbackRoot.test.ts
 create mode 100644 apps/writer/src/FeedbackRoot.tsx
 create mode 100644 apps/writer/src/feedback-shell.css
 create mode 100644 docs/shared-feedback.md

diff --git a/apps/writer/package.json b/apps/writer/package.json
index 905707c..72e5310 100644
--- a/apps/writer/package.json
+++ b/apps/writer/package.json
@@ -12,6 +12,7 @@
     "preview": "vite preview --host 127.0.0.1",
     "test": "pnpm manifest && node --test scripts/*.test.mjs && vitest run",
     "test:browser": "node scripts/browser-test.mjs && node scripts/browser-reliability-test.mjs",
+    "test:feedback": "node scripts/feedback-browser-test.mjs",
     "test:browser:reliability": "node scripts/browser-reliability-test.mjs",
     "typecheck": "pnpm manifest && tsc -p tsconfig.json",
     "deploy:lab": "MDBASE_ENV=lab node scripts/deploy-pages.mjs",
diff --git a/apps/writer/scripts/deploy-pages.mjs b/apps/writer/scripts/deploy-pages.mjs
index e197dae..5096e81 100644
--- a/apps/writer/scripts/deploy-pages.mjs
+++ b/apps/writer/scripts/deploy-pages.mjs
@@ -16,6 +16,8 @@ const PAGES_FILE_LIMIT = 25 * 1024 * 1024;
 await run("pnpm", ["build"], {
   ...process.env,
   MDBASE_WRITER_ORIGIN: deployment.origin,
+  VITE_MDBASE_ENV: target,
+  VITE_MDBASE_WRITER_BUILD_ID: commit,
   VITE_MDBASE_CONNECT_URL: deployment.connectUrl,
   VITE_MDBASE_CONNECT_LOOPBACK_URL: deployment.loopbackUrl,
   ...(deployment.demo ? { VITE_WRITER_DEMO: "1" } : {}),
diff --git a/apps/writer/scripts/feedback-browser-test.mjs b/apps/writer/scripts/feedback-browser-test.mjs
new file mode 100644
index 0000000..92d354a
--- /dev/null
+++ b/apps/writer/scripts/feedback-browser-test.mjs
@@ -0,0 +1,70 @@
+// Demo-data acceptance only. Intercepts every feedback POST; never sends mail.
+import assert from "node:assert/strict";
+import { chromium } from "playwright";
+
+const origin = process.env.WRITER_FEEDBACK_TEST_ORIGIN ?? "http://127.0.0.1:8892";
+if (!/^http:\/\/(127\.0\.0\.1|localhost):\d+$/.test(origin)) throw new Error("Feedback acceptance requires a loopback preview.");
+const browser = await chromium.launch();
+try {
+  for (const width of [1440, 390]) {
+    const context = await browser.newContext({ viewport: { width, height: 900 }, reducedMotion: "reduce" });
+    const page = await context.newPage();
+    const posts = [];
+    await context.route("**/v1/feedback", async (route) => {
+      posts.push(route.request().postDataJSON());
+      await route.fulfill({ status: 200, contentType: "application/json", body: "{}" });
+    });
+    await page.addInitScript(() => {
+      window.feedbackCaptures = 0;
+      Object.defineProperty(navigator, "mediaDevices", {
+        configurable: true,
+        value: { getDisplayMedia: () => { window.feedbackCaptures++; return Promise.reject(new DOMException("Cancelled", "NotAllowedError")); } },
+      });
+    });
+    await page.goto(`${origin}/?demo`);
+    await page.locator(".manuscript-row", { hasText: "Small Agents, Large Effects" }).click();
+    await page.waitForFunction(() => window.writer?.workspace?.getSnapshot().phase === "ready");
+    // A user-visible compiler failure, not a Markdown/typesetting diagnostic.
+    await page.evaluate(() => window.writer.workspace.update({ previewProblem: "PRIVATE compiler exception /private/manuscript.md" }));
+    const trigger = page.locator(".topbar").getByRole("button", { name: "Send feedback", exact: true });
+    await trigger.click();
+    const dialog = page.getByRole("dialog", { name: "Send feedback", exact: true });
+    const message = dialog.getByLabel("What happened?");
+    assert.equal(await message.evaluate((element) => document.activeElement === element), true);
+    assert.equal(await dialog.locator("details").evaluate((element) => element.open), false);
+    assert.equal(await page.evaluate(() => window.feedbackCaptures), 0);
+    await message.fill("A private sample draft");
+    await page.screenshot({ path: `/tmp/shared-feedback-writer-form-${width}.png` });
+    await message.press("Control+k");
+    await message.press("F8");
+    assert.equal(await page.locator("dialog[open]").count(), 1);
+    assert.equal(await message.evaluate((element) => document.activeElement === element), true);
+    await message.press("Escape");
+    assert.equal(await dialog.isVisible(), false);
+    assert.equal(await trigger.evaluate((element) => document.activeElement === element), true);
+    await trigger.click();
+    assert.equal(await message.inputValue(), "A private sample draft");
+    await dialog.getByText("What gets sent", { exact: true }).click();
+    await dialog.getByLabel("Include technical diagnostics", { exact: true }).check();
+    const preview = await dialog.locator("pre").last().innerText();
+    assert.ok(preview.includes("preview_failed"));
+    assert.ok(!preview.includes("PRIVATE"));
+    await dialog.getByRole("button", { name: "Send feedback", exact: true }).click();
+    const thanks = dialog.getByRole("heading", { name: "Thanks for the report." });
+    await thanks.waitFor();
+    assert.equal(await thanks.evaluate((element) => document.activeElement === element), true);
+    assert.equal(posts.length, 1);
+    const payload = posts[0];
+    assert.equal(payload.schema_version, 2);
+    assert.equal(payload.application.product, "mdbase writer");
+    assert.equal(payload.application.source_view, "manuscript");
+    assert.ok(payload.diagnostics.events.some((event) => event.code === "preview_failed"));
+    assert.ok(!JSON.stringify(payload).includes("PRIVATE"));
+    for (const key of ["context", "screenshot", "reply_email"]) assert.equal(payload[key], undefined);
+    await page.screenshot({ path: `/tmp/shared-feedback-writer-${width}.png` });
+    await context.close();
+  }
+  console.log("Writer feedback desktop/mobile acceptance passed; all delivery intercepted.");
+} finally {
+  await browser.close();
+}
diff --git a/apps/writer/src/App.tsx b/apps/writer/src/App.tsx
index 9b9bc07..71d2b09 100644
--- a/apps/writer/src/App.tsx
+++ b/apps/writer/src/App.tsx
@@ -9,6 +9,8 @@ import type { WriterBackend } from "./backend/types.js";
 import { createWriterSession, type WriterSession } from "./connect/session.js";
 import { appUrls } from "./apps.js";
 import { AppSwitcher } from "@mdbase-dev/ui/app-switcher";
+import { FeedbackButton, useFeedback } from "@mdbase-dev/ui/feedback";
+import { useWriterFeedbackContext } from "./FeedbackRoot.js";
 import { ConnectGate } from "./ui/ConnectGate.js";
 import { CollectionPicker } from "./ui/CollectionPicker.js";
 import { Home } from "./ui/Home.js";
@@ -65,6 +67,7 @@ function useManuscriptParam(mayLeave: () => Promise<boolean>): [string | null, (
 }
 
 export function App() {
+  const { reportError } = useFeedback();
   const [theme, setTheme] = useState<ThemePreference>(() => loadThemePreference());
   const [slot, setSlot] = useState<HTMLElement | null>(null);
   useEffect(() => saveThemePreference(theme), [theme]);
@@ -77,24 +80,27 @@ export function App() {
             <AppSwitcher current="writer" urls={appUrls} />
             <div className="topbar-slot" ref={setSlot} />
             <ThemeSelect className="topbar-theme" value={theme} onChange={setTheme} />
+            <FeedbackButton />
           </header>
-          <ErrorBoundary>{demoRequested ? <DemoRoot /> : <ConnectRoot />}</ErrorBoundary>
+          <ErrorBoundary onError={() => reportError({ code: "unknown_error" })}>{demoRequested ? <DemoRoot /> : <ConnectRoot />}</ErrorBoundary>
         </div>
       </TopbarSlot.Provider>
     </ThemeChoice.Provider>
   );
 }
 
-class ErrorBoundary extends Component<{ children: ReactNode }, { error: Error | null }> {
+class ErrorBoundary extends Component<{ children: ReactNode; onError(): void }, { error: Error | null }> {
   override state = { error: null as Error | null };
   static getDerivedStateFromError(error: Error) {
     return { error };
   }
+  override componentDidCatch() { this.props.onError(); }
   override render() {
     if (!this.state.error) return this.props.children;
     return (
       <main className="gate">
         <h1>Something went wrong</h1>
+        <FeedbackButton topic="problem" />
         <p>{this.state.error.message}</p>
         <p className="muted">Your saved text is in your collection. Unsent local drafts are backed up in this browser when storage is available. Download a copy before reloading.</p>
         <button className="mdbase-button" type="button" onClick={() => {
@@ -196,6 +202,7 @@ function Manuscripts({ backend, collectionPicker }: { backend: WriterBackend; co
     return new Promise<boolean>((finish) => setNavigation({ message: saved.message, finish }));
   });
   const workspace = useOwned(() => (path ? new ManuscriptWorkspace(backend, path) : null), (w) => void w.dispose(), [backend, path]);
+  useWriterFeedbackContext(path ? "manuscript" : "manuscripts", backend.collectionName);
   currentWorkspace.current = workspace;
   (window as unknown as { writer?: unknown }).writer = { backend, workspace };
   if (!path) return <Home backend={backend} onOpen={setPath} collectionPicker={collectionPicker} />;
diff --git a/apps/writer/src/FeedbackRoot.test.ts b/apps/writer/src/FeedbackRoot.test.ts
new file mode 100644
index 0000000..6307043
--- /dev/null
+++ b/apps/writer/src/FeedbackRoot.test.ts
@@ -0,0 +1,22 @@
+import { FeedbackButton } from "@mdbase-dev/ui/feedback";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, expect, it, vi } from "vitest";
+import { FeedbackRoot } from "./FeedbackRoot.js";
+
+afterEach(() => vi.unstubAllEnvs());
+
+it("hides unconfigured feedback without hiding the Writer shell", () => {
+  vi.stubEnv("VITE_MDBASE_FEEDBACK_URL", "");
+  const markup = renderToStaticMarkup(createElement(FeedbackRoot, { children: [createElement("p", { key: "shell" }, "Writer shell"), createElement(FeedbackButton, { key: "feedback" })] }));
+  expect(markup).toContain("Writer shell");
+  expect(markup).not.toContain("Send feedback");
+});
+
+it("uses the shared entry and excludes unsafe destinations", () => {
+  for (const endpoint of ["https://feedback.example/v1/feedback", "javascript:alert(1)"]) {
+    vi.stubEnv("VITE_MDBASE_FEEDBACK_URL", endpoint);
+    const markup = renderToStaticMarkup(createElement(FeedbackRoot, { children: createElement(FeedbackButton) }));
+    expect(markup.includes("Send feedback")).toBe(endpoint.startsWith("https:"));
+  }
+});
diff --git a/apps/writer/src/FeedbackRoot.tsx b/apps/writer/src/FeedbackRoot.tsx
new file mode 100644
index 0000000..0389113
--- /dev/null
+++ b/apps/writer/src/FeedbackRoot.tsx
@@ -0,0 +1,30 @@
+import { FeedbackProvider, feedbackApplication, resolveFeedbackEndpoint } from "@mdbase-dev/ui/feedback";
+import { createContext, useContext, useLayoutEffect, useState, type ReactNode } from "react";
+
+interface FeedbackContextValue {
+  view: "connection" | "manuscripts" | "manuscript";
+  collectionName?: string;
+}
+const connection: FeedbackContextValue = { view: "connection" };
+const Context = createContext<(value: FeedbackContextValue) => void>(() => undefined);
+
+/** Application context only: no record paths, manuscript titles or session credentials. */
+export function FeedbackRoot({ children }: { children: ReactNode }) {
+  const [context, setContext] = useState(connection);
+  return <Context.Provider value={setContext}>
+    <FeedbackProvider
+      endpoint={resolveFeedbackEndpoint(import.meta.env.VITE_MDBASE_FEEDBACK_URL)}
+      turnstileSiteKey={import.meta.env.VITE_MDBASE_FEEDBACK_TURNSTILE_SITE_KEY ?? null}
+      application={feedbackApplication("mdbase writer", context.view, import.meta.env.VITE_MDBASE_WRITER_BUILD_ID, import.meta.env.VITE_MDBASE_ENV ?? (import.meta.env.DEV ? "development" : "production"))}
+      {...(context.collectionName ? { collectionName: context.collectionName } : {})}
+    >{children}</FeedbackProvider>
+  </Context.Provider>;
+}
+
+export function useWriterFeedbackContext(view: "manuscripts" | "manuscript", collectionName: string): void {
+  const setContext = useContext(Context);
+  useLayoutEffect(() => {
+    setContext({ view, collectionName });
+    return () => setContext(connection);
+  }, [view, collectionName, setContext]);
+}
diff --git a/apps/writer/src/env.d.ts b/apps/writer/src/env.d.ts
index e8c93f6..eeb25e1 100644
--- a/apps/writer/src/env.d.ts
+++ b/apps/writer/src/env.d.ts
@@ -1,5 +1,9 @@
 /// <reference types="vite/client" />
 interface ImportMetaEnv {
+  readonly VITE_MDBASE_ENV?: string;
+  readonly VITE_MDBASE_WRITER_BUILD_ID?: string;
+  readonly VITE_MDBASE_FEEDBACK_URL?: string;
+  readonly VITE_MDBASE_FEEDBACK_TURNSTILE_SITE_KEY?: string;
   readonly VITE_MDBASE_CONNECT_URL?: string;
   readonly VITE_MDBASE_CONNECT_LOOPBACK_URL?: string;
   readonly VITE_WRITER_DEMO?: string;
diff --git a/apps/writer/src/feedback-shell.css b/apps/writer/src/feedback-shell.css
new file mode 100644
index 0000000..e64d43a
--- /dev/null
+++ b/apps/writer/src/feedback-shell.css
@@ -0,0 +1,8 @@
+/* Writer's global label/heading rules must not turn the shared form into an eyebrow. */
+.mdbase-feedback-header h2 { text-transform: none; }
+.mdbase-feedback-dialog label { color: inherit; }
+
+@media (max-width: 900px) {
+  .topbar .mdbase-feedback-trigger { min-width: 44px; min-height: 44px; padding: 8px; }
+  .topbar .mdbase-feedback-trigger > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
+}
diff --git a/apps/writer/src/main.tsx b/apps/writer/src/main.tsx
index 8856355..dfa40f3 100644
--- a/apps/writer/src/main.tsx
+++ b/apps/writer/src/main.tsx
@@ -4,12 +4,15 @@ import "@mdbase-dev/ui/brand.css";
 import "@mdbase-dev/ui/controls.css";
 import "@mdbase-dev/ui/screens.css";
 import "@mdbase-dev/ui/palette.css";
+import "@mdbase-dev/ui/feedback.css";
+import "./feedback-shell.css";
 import "./styles.css";
 
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import { App } from "./App.js";
+import { FeedbackRoot } from "./FeedbackRoot.js";
 
 import { setupPwaInstall } from "./pwa-install.js";
 import "./pwa-install.css";
@@ -21,6 +24,6 @@ const root = document.getElementById("root");
 if (!root) throw new Error("Missing #root");
 createRoot(root).render(
   <StrictMode>
-    <App />
+    <FeedbackRoot><App /></FeedbackRoot>
   </StrictMode>,
 );
diff --git a/apps/writer/src/ui/ConnectGate.tsx b/apps/writer/src/ui/ConnectGate.tsx
index fde2baf..1023b93 100644
--- a/apps/writer/src/ui/ConnectGate.tsx
+++ b/apps/writer/src/ui/ConnectGate.tsx
@@ -2,7 +2,8 @@
 // authorizing a collection, and reviewing the setup the writer needs.
 import type { MdbaseApplicationSessionSnapshot } from "@mdbase-dev/connect";
 import { ConnectLayout, OpeningScreen } from "@mdbase-dev/ui/screens";
-import { useState, type ReactNode } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { FeedbackButton, useFeedback } from "@mdbase-dev/ui/feedback";
 
 import type { WriterSession } from "../connect/session.js";
 
@@ -19,18 +20,37 @@ const RESOURCE_ACTION: Record<string, string> = {
 };
 
 function Centered({ title, children }: { title: string; children: ReactNode }) {
-  return <ConnectLayout app="writer" title={title}>{children}</ConnectLayout>;
+  return <ConnectLayout app="writer" title={title}>{children}<FeedbackButton /></ConnectLayout>;
 }
 
 export function ConnectGate({ session, snapshot }: { session: WriterSession; snapshot: MdbaseApplicationSessionSnapshot }) {
+  const { reportError } = useFeedback();
+  const reportedInitialFailure = useRef(false);
+  useEffect(() => {
+    if (snapshot.status === "start_failed" && !reportedInitialFailure.current && !/cancel|abort|supersed/u.test(snapshot.problem.code)) {
+      reportedInitialFailure.current = true;
+      reportError({ code: "unknown_error" });
+    }
+  }, [snapshot, reportError]);
   const [busy, setBusy] = useState(false);
   const [problem, setProblem] = useState<string | null>(null);
   const run = async (action: () => Promise<{ ok: boolean; problem?: { message?: string; code: string } }>) => {
     setBusy(true);
     setProblem(null);
-    const outcome = await action();
-    setBusy(false);
-    if (!outcome.ok) setProblem(outcome.problem?.message ?? outcome.problem?.code ?? "Something went wrong.");
+    try {
+      const outcome = await action();
+      if (!outcome.ok && !/cancel|abort|supersed/u.test(outcome.problem?.code ?? "")) {
+        setProblem(outcome.problem?.message ?? outcome.problem?.code ?? "Something went wrong.");
+        reportError({ code: "unknown_error" });
+      }
+    } catch (reason) {
+      if (!(reason instanceof DOMException && reason.name === "AbortError")) {
+        setProblem("This action could not be completed. Please try again.");
+        reportError({ code: "unknown_error" });
+      }
+    } finally {
+      setBusy(false);
+    }
   };
   const authorize = (target: "choose" | "selected") =>
     run(() => session.authorize(target, { presentation: "popup", timeoutMs: 10 * 60_000 }) as Promise<{ ok: boolean; problem?: { message?: string; code: string } }>);
diff --git a/apps/writer/src/ui/WorkspaceView.tsx b/apps/writer/src/ui/WorkspaceView.tsx
index fdcabb2..de1f7a8 100644
--- a/apps/writer/src/ui/WorkspaceView.tsx
+++ b/apps/writer/src/ui/WorkspaceView.tsx
@@ -49,6 +49,7 @@ import { CommandPalette } from "@mdbase-dev/ui/command-palette";
 import { moveMenuFocus, useMenuPopover } from "@mdbase-dev/ui/popover";
 import { ConnectLayout } from "@mdbase-dev/ui/screens";
 import { SaveNotice } from "@mdbase-dev/ui/save-notice";
+import { FeedbackButton, useFeedback } from "@mdbase-dev/ui/feedback";
 import { plural, recordTitle, STATE_LABEL, STATE_SHORT_LABEL, STATE_TONE } from "./records.js";
 import { Settings, type SettingsFocus } from "./Settings.js";
 import { ManuscriptStats } from "./stats.js";
@@ -115,6 +116,19 @@ function useSustained(flag: boolean, delay: number): boolean {
 
 export function WorkspaceView({ workspace, onClose }: { workspace: ManuscriptWorkspace; onClose(force?: boolean): void }) {
   const snap = useSyncExternalStore(workspace.subscribe, workspace.getSnapshot);
+  const { reportError } = useFeedback();
+  const failedSaves = useRef(new Set<string>());
+  useEffect(() => {
+    if (snap.phase === "failed") reportError({ code: "source_open_failed" });
+  }, [snap.phase, reportError]);
+  useEffect(() => {
+    if (snap.previewProblem) reportError({ code: "preview_failed" });
+  }, [snap.previewProblem, reportError]);
+  useEffect(() => {
+    const failed = new Set([...snap.records].filter(([, view]) => view.snapshot.state === "error" && !/cancel|abort|supersed/u.test(view.snapshot.problem?.code ?? "")).map(([path]) => path));
+    if ([...failed].some((path) => !failedSaves.current.has(path))) reportError({ code: "save_failed" });
+    failedSaves.current = failed;
+  }, [snap.records, reportError]);
   // Most typesets finish between keystrokes; saying so each time only flickers.
   const slowCompile = useSustained(snap.compiling, 600);
   const [active, setActive] = useState(workspace.main);
@@ -481,7 +495,10 @@ export function WorkspaceView({ workspace, onClose }: { workspace: ManuscriptWor
           exported(EXPORT_NAME[format], []);
         }
       } catch (error) {
-        if (!controller.signal.aborted) setExportStatus({ tone: "problem", text: errorMessage(error) });
+        if (!controller.signal.aborted) {
+          reportError({ code: "unknown_error" });
+          setExportStatus({ tone: "problem", text: errorMessage(error) });
+        }
       } finally {
         if (exportJob.current === controller) exportJob.current = null;
       }
@@ -526,6 +543,7 @@ export function WorkspaceView({ workspace, onClose }: { workspace: ManuscriptWor
   // Keyboard shortcuts (listed in the shortcuts dialog).
   const shortcuts = useRef<(e: KeyboardEvent) => void>(() => {});
   shortcuts.current = (e: KeyboardEvent) => {
+    if (e.target instanceof Element && e.target.closest("dialog[open]")) return;
     if (document.querySelector("dialog[open]") && e.key !== "F8") return;
     const mod = isMod(e);
     let handled = true;
@@ -557,6 +575,7 @@ export function WorkspaceView({ workspace, onClose }: { workspace: ManuscriptWor
   if (snap.phase === "failed") {
     return (
       <ConnectLayout app="writer" title="This manuscript could not be opened" error={snap.problem}>
+        <FeedbackButton topic="problem" />
         <button className="mdbase-connect-action" type="button" onClick={() => void workspace.retryOpen()}>Retry opening</button>
         {snap.recoveredDrafts.size > 0 && <><p>A local draft is still available in this browser.</p><button type="button" className="mdbase-connect-action" onClick={downloadDrafts}>Download local drafts</button></>}
         <button className="mdbase-connect-action" type="button" onClick={() => onClose()}>
diff --git a/apps/writer/vite.config.ts b/apps/writer/vite.config.ts
index 675d6b5..9bec3f3 100644
--- a/apps/writer/vite.config.ts
+++ b/apps/writer/vite.config.ts
@@ -20,7 +20,7 @@ export default defineConfig({
       { find: /^pandoc-wasm\/core$/, replacement: resolve(pandocWasm, "src", "core.js") },
       { find: /^pandoc-wasm\/pandoc\.wasm\?url$/, replacement: `${resolve(pandocWasm, "src", "pandoc.wasm")}?url` },
     ],
-    dedupe: ["@codemirror/state", "@codemirror/view", "@codemirror/language", "@lezer/common", "@lezer/highlight", "@lezer/markdown"],
+    dedupe: ["react", "react-dom", "@codemirror/state", "@codemirror/view", "@codemirror/language", "@lezer/common", "@lezer/highlight", "@lezer/markdown"],
   },
   server: { host: "127.0.0.1", port: 5320, strictPort: true },
   build: { target: "es2022", sourcemap: true },
diff --git a/apps/writer/vitest.config.ts b/apps/writer/vitest.config.ts
index d8c54dd..e32791a 100644
--- a/apps/writer/vitest.config.ts
+++ b/apps/writer/vitest.config.ts
@@ -1,3 +1,3 @@
 import { defineConfig } from "vitest/config";
 
-export default defineConfig({ test: { include: ["src/**/*.test.ts"] } });
+export default defineConfig({ resolve: { dedupe: ["react", "react-dom"] }, test: { include: ["src/**/*.test.ts"] } });
diff --git a/docs/shared-feedback.md b/docs/shared-feedback.md
new file mode 100644
index 0000000..72867df
--- /dev/null
+++ b/docs/shared-feedback.md
@@ -0,0 +1,42 @@
+# Private feedback integration (release-blocked)
+
+Writer uses the shared `@mdbase-dev/ui/feedback` form, screenshot capture/markup
+and verification. There is no new delivery adapter, telemetry or persistence.
+The provider sits above the application error boundary and connection/workspace
+lifetimes. Quiet topbar entries work on desktop and mobile; failure screens also
+provide a report entry.
+
+Fixed connection/manuscripts/manuscript identifiers, deployment environment and
+build ID identify the app. Collection names and diagnostics require consent.
+Manuscript titles, record paths, credentials and raw exception text are never
+passed to the reporter. Visible save/open/preview/export failures nudge the bug;
+normal typesetting diagnostics, cancelled operations and background refreshes do
+not. Capture-phase keyboard shortcuts ignore open-dialog targets, including F8.
+
+## Release dependency
+
+Do not merge or deploy until a coordinated mdbase-connect release publishes the
+UI package containing these exports. The pinned beta.123 does **not** have them.
+Update the pin and regenerate the lockfile using the actual published version,
+then repeat clean-install checks and browser acceptance. Local generated links
+used for isolated verification are not committed dependencies.
+
+First deploy the compatible Worker through guarded cloud-ops, with exact Writer
+CORS origins and environment-specific Turnstile hosts. Enable the build with:
+
+- `VITE_MDBASE_FEEDBACK_URL`: approved environment's `/v1/feedback` endpoint.
+- `VITE_MDBASE_FEEDBACK_TURNSTILE_SITE_KEY`: that environment's public widget key.
+
+Missing/invalid endpoints hide feedback. Deployment tooling supplies
+`VITE_MDBASE_ENV` and `VITE_MDBASE_WRITER_BUILD_ID`. No implicit production endpoint,
+widget, secret, package publication or deployment is introduced here.
+
+## Sample-data acceptance
+
+Build with demo mode and a loopback feedback URL, serve on loopback port 8892,
+then run `node apps/writer/scripts/feedback-browser-test.mjs`. Override the
+loopback origin using `WRITER_FEEDBACK_TEST_ORIGIN`. The test uses demo data and
+intercepts every feedback POST: desktop/mobile focus, draft restoration, F8 and
+command isolation, consent, bounded compiler-failure diagnostics and product/view
+metadata. It never sends mail. Real chooser and platform delivery acceptance
+remain separate.