+ You can turn on Dispatch Feedback’s Safari extension in Settings.
+ + diff --git a/apps/browser-extension/safari/Dispatch Feedback/Dispatch Feedback/Resources/Icon.png b/apps/browser-extension/safari/Dispatch Feedback/Dispatch Feedback/Resources/Icon.png new file mode 100644 index 00000000..43ef9c75 Binary files /dev/null and b/apps/browser-extension/safari/Dispatch Feedback/Dispatch Feedback/Resources/Icon.png differ diff --git a/apps/browser-extension/safari/Dispatch Feedback/Dispatch Feedback/Resources/Style.css b/apps/browser-extension/safari/Dispatch Feedback/Dispatch Feedback/Resources/Style.css new file mode 100644 index 00000000..ed591d39 --- /dev/null +++ b/apps/browser-extension/safari/Dispatch Feedback/Dispatch Feedback/Resources/Style.css @@ -0,0 +1,29 @@ +* { + -webkit-user-select: none; + -webkit-user-drag: none; + cursor: default; +} + +:root { + color-scheme: light dark; + + --spacing: 20px; +} + +html { + height: 100%; +} + +body { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + gap: var(--spacing); + margin: 0 calc(var(--spacing) * 2); + height: 100%; + + font: -apple-system-short-body; + text-align: center; +} diff --git a/apps/browser-extension/safari/Dispatch Feedback/Dispatch Feedback/SceneDelegate.swift b/apps/browser-extension/safari/Dispatch Feedback/Dispatch Feedback/SceneDelegate.swift new file mode 100644 index 00000000..7ff4227f --- /dev/null +++ b/apps/browser-extension/safari/Dispatch Feedback/Dispatch Feedback/SceneDelegate.swift @@ -0,0 +1,18 @@ +// +// SceneDelegate.swift +// Dispatch Feedback +// +// Created by Brad Harris on 7/16/26. +// + +import UIKit + +class SceneDelegate: UIResponder, UIWindowSceneDelegate { + + var window: UIWindow? + + func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) { + guard let _ = (scene as? UIWindowScene) else { return } + } + +} diff --git a/apps/browser-extension/safari/Dispatch Feedback/Dispatch Feedback/ViewController.swift b/apps/browser-extension/safari/Dispatch Feedback/Dispatch Feedback/ViewController.swift new file mode 100644 index 00000000..8c9c8a74 --- /dev/null +++ b/apps/browser-extension/safari/Dispatch Feedback/Dispatch Feedback/ViewController.swift @@ -0,0 +1,34 @@ +// +// ViewController.swift +// Dispatch Feedback +// +// Created by Brad Harris on 7/16/26. +// + +import UIKit +import WebKit + +class ViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHandler { + + @IBOutlet var webView: WKWebView! + + override func viewDidLoad() { + super.viewDidLoad() + + self.webView.navigationDelegate = self + self.webView.scrollView.isScrollEnabled = false + + self.webView.configuration.userContentController.add(self, name: "controller") + + self.webView.loadFileURL(Bundle.main.url(forResource: "Main", withExtension: "html")!, allowingReadAccessTo: Bundle.main.resourceURL!) + } + + func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { + // Override point for customization. + } + + func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { + // Override point for customization. + } + +} diff --git a/apps/browser-extension/src/lib/agent-memory.ts b/apps/browser-extension/src/lib/agent-memory.ts new file mode 100644 index 00000000..f06554e7 --- /dev/null +++ b/apps/browser-extension/src/lib/agent-memory.ts @@ -0,0 +1,32 @@ +export const SELECTIONS_KEY = "dispatchAgentSelections"; + +export interface SelectionStorage { + get(key: string): Promise- Chrome is requesting permission to connect + A browser is requesting permission to connect
Approve only if you started this request. The extension @@ -452,66 +456,168 @@ export function BrowserExtensionSettings(): JSX.Element { className="space-y-4 rounded-lg border border-border bg-background/40 p-4" data-testid="extension-install-guide" > -
-
-
-
- {hasConnections && (
-
- )}
- - Finish setup in Chrome -
-- The extension is a developer preview, so Chrome loads it - from an unzipped folder for now. -
-
-
+ {installPlatform === "chrome" ? (
+ <>
+
-
-
- - 1. Unzip the download -
-- Keep the extracted folder somewhere Chrome can continue - to access it. -
-
-
-
- 2. Load the folder
-
- Open{" "}
- chrome://extensions,
- enable Developer mode, then choose Load unpacked.
-
-
+
+
+ Safari on iPad
+
+
+
+
+ {hasConnections && (
+
+ )}
+ + Finish setup in Chrome +
++ The extension is a developer preview, so Chrome + loads it from an unzipped folder for now. +
+
+
+
+ ) : (
+ <>
+
+
+
+ + 1. Unzip the download +
++ Keep the extracted folder somewhere Chrome can + continue to access it. +
+
+
+
+ + 2. Load the folder +
+
+ Open{" "}
+
+ chrome://extensions
+
+ , enable Developer mode, then choose Load unpacked.
+
+
+
+ + 3. Connect Dispatch +
++ Open the extension, enter this Dispatch URL, and + verify the pairing code here. +
+
+
+ + Install on iPad via TestFlight +
+
+ Safari extensions ship inside a small companion app.
+ Ask your Dispatch admin for the TestFlight invite, or
+ build it from{" "}
+
+ apps/browser-extension
+ {" "}
+ in the Dispatch repo.
+
+
+
+ )}
+
+
+ + 1. Install from TestFlight +
++ Install the Dispatch Feedback app from your + TestFlight invite on the iPad. +
+
+
+
+ + 2. Enable the extension +
++ Settings → Apps → Safari → Extensions → enable + Dispatch Browser Feedback, then allow it on the + sites you test. +
+
+
+
+ + 3. Connect Dispatch +
++ Open the extension from Safari's toolbar, enter + this Dispatch URL, and verify the pairing code here. +
+
{dispatchUrl}
diff --git a/e2e/browser-extension-overlay.spec.ts b/e2e/browser-extension-overlay.spec.ts
new file mode 100644
index 00000000..10f2eec6
--- /dev/null
+++ b/e2e/browser-extension-overlay.spec.ts
@@ -0,0 +1,227 @@
+import { execSync } from "node:child_process";
+import { existsSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { test, expect, type Page } from "@playwright/test";
+
+// The Safari feedback overlay is a plain content script, so it can be
+// exercised headlessly: a fixture page, a stubbed extension messaging bridge
+// on window.browser, and the built IIFE injected the way the background's
+// scripting.executeScript would.
+
+const overlayBundlePath = resolve(
+ import.meta.dirname,
+ "../apps/browser-extension/dist/safari/unpacked/feedback-overlay.js"
+);
+
+const fixtureHtml = `
+
+ Overlay fixture
+
+
+
+ Fixture page
+
+
+
+
+
+
+`;
+
+test.use({ hasTouch: true });
+
+test.beforeAll(() => {
+ if (!existsSync(overlayBundlePath)) {
+ execSync("pnpm --filter @dispatch/browser-extension build:safari", {
+ cwd: resolve(import.meta.dirname, ".."),
+ stdio: "inherit",
+ });
+ }
+});
+
+async function openFixture(page: Page): Promise {
+ await page.route("**/overlay-fixture", (route) =>
+ route.fulfill({ contentType: "text/html", body: fixtureHtml })
+ );
+ await page.addInitScript(() => {
+ const sent: unknown[] = [];
+ const win = window as typeof window & {
+ __sentMessages: unknown[];
+ __failNextSubmission: boolean;
+ browser: unknown;
+ };
+ win.__sentMessages = sent;
+ win.__failNextSubmission = false;
+ win.browser = {
+ runtime: {
+ sendMessage: (message: { type: string }) => {
+ sent.push(message);
+ switch (message.type) {
+ case "overlay:init":
+ return Promise.resolve({
+ ok: true,
+ data: {
+ connected: true,
+ baseUrl: "http://dispatch.test",
+ agents: [
+ { id: "agent-1", name: "fix-navbar", status: "running" },
+ {
+ id: "agent-2",
+ name: "refactor-auth",
+ status: "running",
+ repoName: "dispatch",
+ },
+ ],
+ selectedAgentId: "agent-2",
+ },
+ });
+ case "submission:create":
+ if (win.__failNextSubmission) {
+ win.__failNextSubmission = false;
+ return Promise.resolve({
+ ok: false,
+ error: "Dispatch is unreachable.",
+ });
+ }
+ return Promise.resolve({
+ ok: true,
+ data: { status: "delivered" },
+ });
+ default:
+ return Promise.resolve({ ok: true, data: {} });
+ }
+ },
+ },
+ };
+ });
+ await page.goto("/overlay-fixture");
+}
+
+async function injectOverlay(page: Page): Promise {
+ await page.addScriptTag({
+ content: readFileSync(overlayBundlePath, "utf8"),
+ });
+}
+
+function shadow(page: Page) {
+ return page.locator("[data-dispatch-feedback-host]");
+}
+
+test.describe("Safari feedback overlay", () => {
+ test("tap, refine, comment, and send with a stable retry id", async ({
+ page,
+ }) => {
+ await openFixture(page);
+ await injectOverlay(page);
+
+ const host = shadow(page);
+ await expect(host).toHaveCount(1);
+ await expect(page.getByText("Tap an element to select it")).toBeVisible();
+
+ // Aiming blocks page interaction: a tap selects instead of clicking.
+ await page.locator("#target-button").tap();
+ await expect(page.getByRole("button", { name: "Use ✓" })).toBeVisible();
+ expect(
+ await page.evaluate(() => (window as { __clicks?: number }).__clicks)
+ ).toBeUndefined();
+
+ const selector = host.locator(".toolbar-selector");
+ await expect(selector).toContainText("#target-button");
+
+ // Refine: up to the card, back down to the button.
+ await page.getByRole("button", { name: "‹ Parent" }).click();
+ await expect(selector).toContainText("#card");
+ await page.getByRole("button", { name: "Child ›" }).click();
+ await expect(selector).toContainText("#target-button");
+ await page.getByRole("button", { name: "‹ Parent" }).click();
+
+ // Confirm: the card appears with agents from overlay:init.
+ await page.getByRole("button", { name: "Use ✓" }).click();
+ const agentSelect = host.locator("select");
+ await expect(agentSelect).toBeVisible();
+ await expect(agentSelect).toHaveValue("agent-2");
+
+ // The aiming block is released: page clicks work again.
+ await page.locator("#target-button").click();
+ expect(
+ await page.evaluate(() => (window as { __clicks?: number }).__clicks)
+ ).toBe(1);
+
+ await host.locator("textarea").fill("Make this button purple");
+ await page.evaluate(() => {
+ (window as { __failNextSubmission?: boolean }).__failNextSubmission =
+ true;
+ });
+ await page.getByRole("button", { name: "Send" }).click();
+ await expect(host.locator(".card-error")).toContainText(
+ "Dispatch is unreachable."
+ );
+ await page.getByRole("button", { name: "Send" }).click();
+ await expect(host).toHaveCount(0);
+
+ const messages = await page.evaluate(
+ () => (window as { __sentMessages?: unknown[] }).__sentMessages ?? []
+ );
+ const submissions = messages.filter(
+ (
+ message
+ ): message is {
+ clientSubmissionId: string;
+ selection: { element: { selector: string } };
+ } => (message as { type?: string }).type === "submission:create"
+ );
+ expect(submissions).toHaveLength(2);
+ expect(submissions[0].clientSubmissionId).toBe(
+ submissions[1].clientSubmissionId
+ );
+ expect(submissions[0].selection.element.selector).toContain("#card");
+ expect(
+ messages.some(
+ (message) =>
+ (message as { type?: string; reason?: string }).type ===
+ "overlay:closed" &&
+ (message as { reason?: string }).reason === "submitted"
+ )
+ ).toBe(true);
+ expect(
+ await page.evaluate(() => typeof window.__dispatchElementPickerCleanup)
+ ).toBe("undefined");
+ });
+
+ test("cancel tears the overlay down without submitting", async ({ page }) => {
+ await openFixture(page);
+ await injectOverlay(page);
+
+ await page.locator("#headline").tap();
+ await page.getByRole("button", { name: "Cancel selection" }).click();
+ await expect(shadow(page)).toHaveCount(0);
+
+ const messages = await page.evaluate(
+ () => (window as { __sentMessages?: unknown[] }).__sentMessages ?? []
+ );
+ expect(
+ messages.some(
+ (message) =>
+ (message as { type?: string; reason?: string }).type ===
+ "overlay:closed" &&
+ (message as { reason?: string }).reason === "cancelled"
+ )
+ ).toBe(true);
+ expect(
+ messages.some(
+ (message) => (message as { type?: string }).type === "submission:create"
+ )
+ ).toBe(false);
+ });
+
+ test("re-injection replaces a previous overlay instance", async ({
+ page,
+ }) => {
+ await openFixture(page);
+ await injectOverlay(page);
+ await injectOverlay(page);
+ await expect(shadow(page)).toHaveCount(1);
+ });
+});
diff --git a/e2e/settings.spec.ts b/e2e/settings.spec.ts
index bb24e325..cad5fee5 100644
--- a/e2e/settings.spec.ts
+++ b/e2e/settings.spec.ts
@@ -118,7 +118,7 @@ test.describe("Settings pane", () => {
});
await expect(
- page.getByText("Chrome is requesting permission to connect")
+ page.getByText("A browser is requesting permission to connect")
).toBeVisible();
await page.getByRole("button", { name: "Approve connection" }).click();
await expect(page.getByText("Connection approved")).toBeVisible();