Document the Browser Feedback extension in the in-app docs

README.md

@@ -31,6 +31,7 @@ Give this prompt to a coding agent to get Dispatch installed as a persistent ser
 - Personalities — short system-prompt blocks appended to every agent for voice or standing preferences.
 - Keyboard shortcuts and a command palette (`Mod+K`) for fast navigation and actions.
 - GitHub integration — PR creation and CI status checks via MCP tools.
+- Browser Feedback — a Chrome extension to select an element on any web page, comment, and send it with bounded DOM context to a running agent (paired under Settings → Connections).
 - Slack notifications with focus-aware suppression.
 - Activity analytics — heatmaps, daily status charts, working time by project.
 - Token usage tracking by day, project, and model.

apps/web/src/components/app/docs-pane.tsx

@@ -9,6 +9,7 @@ import {
   Image,
   Keyboard,
   Monitor,
+  MousePointerClick,
   PlugZap,
   Signal,
   Sparkles,
@@ -21,6 +22,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   AgentsContent,
   AutomationsContent,
+  BrowserFeedbackContent,
   EventsContent,
   MediaContent,
   NotificationsContent,
@@ -42,6 +44,7 @@ export type DocsSection =
   | "personas"
   | "events"
   | "media"
+  | "browser-feedback"
   | "notifications"
   | "updates";
 
@@ -124,6 +127,13 @@ const SECTIONS: SectionDef[] = [
     title: "Media & Sharing",
     content: <MediaContent />,
   },
+  {
+    id: "browser-feedback",
+    label: "Browser Feedback",
+    icon: MousePointerClick,
+    title: "Browser Feedback",
+    content: <BrowserFeedbackContent />,
+  },
   {
     id: "notifications",
     label: "Notifications",

apps/web/src/components/app/docs-sections/browser-feedback.tsx

@@ -0,0 +1,88 @@
+import { Code, H3, P, Section } from "./primitives";
+
+export function BrowserFeedbackContent() {
+  return (
+    <>
+      <P>
+        The Dispatch Browser Feedback extension lets you select an element on
+        any web page, add a comment, and send it — along with bounded DOM
+        context for that element — straight to a running agent. It's a Chrome
+        extension you pair with your Dispatch instance under{" "}
+        <strong>Settings → Connections</strong>.
+      </P>
+
+      <Section>
+        <H3>Installing the extension</H3>
+        <P>
+          The extension is a developer preview, so Chrome loads it from an
+          unzipped folder. In <strong>Settings → Connections</strong>, download
+          the extension ZIP and unzip it somewhere Chrome can keep reading. Open{" "}
+          <Code>chrome://extensions</Code>, enable{" "}
+          <strong>Developer mode</strong>, choose <strong>Load unpacked</strong>
+          , and select the extracted folder. Click the extension's toolbar icon
+          to open its side panel.
+        </P>
+      </Section>
+
+      <Section>
+        <H3>Pairing a browser</H3>
+        <P>
+          In the side panel, enter your <strong>Dispatch URL</strong> and start
+          the connection. Dispatch opens an approval prompt showing a six-digit
+          code; confirm it matches the code in the extension and approve. Once
+          the browser finishes connecting it appears under{" "}
+          <strong>Paired browsers</strong> in Settings. Each Chrome profile gets
+          its own revocable, 90-day token stored only in extension-local storage
+          — so pairing a new profile or machine is a separate request.
+        </P>
+      </Section>
+
+      <Section>
+        <H3>Sending feedback</H3>
+        <P>
+          Open the side panel on the page you want to inspect and start element
+          selection — hover to highlight, click to select, or press{" "}
+          <Code>Escape</Code> to cancel. The panel previews the sanitized
+          context that will be shared. Add a <strong>Comment</strong>, pick one
+          of your <strong>running agents</strong>, and choose{" "}
+          <strong>Send to agent</strong>. The comment and page context are
+          delivered to that agent as a prompt. Only running agents are
+          selectable; use <strong>Refresh running agents</strong> if the list is
+          stale.
+        </P>
+      </Section>
+
+      <Section>
+        <H3>Privacy and page access</H3>
+        <P>
+          The inspected page never has to share an origin with Dispatch. On
+          first use Chrome asks you to grant the extension access to HTTP and
+          HTTPS pages; this optional grant keeps the picker reliable as you move
+          between projects and can be revoked from Chrome at any time.
+          Browser-owned pages such as <Code>chrome://</Code> and the Chrome Web
+          Store can't be inspected.
+        </P>
+        <P>
+          Before previewing or sending, the extension strips form values,
+          editable content, scripts, inline event handlers, <Code>srcdoc</Code>,
+          and likely-secret URL parameters. The agent receives the page context
+          marked as untrusted observational data, not as instructions. HTTP
+          Dispatch URLs are supported for self-hosted setups but require an
+          explicit acknowledgement that HTTP sends without transport encryption.
+        </P>
+      </Section>
+
+      <Section>
+        <H3>Managing connections</H3>
+        <P>
+          <strong>Settings → Connections</strong> lists every paired browser
+          with its device name and when it was last used. Each browser has its
+          own access — revoke one with <strong>Revoke</strong> and the others
+          stay connected. You can also <strong>Disconnect</strong> from the
+          extension itself, which removes the local token and the optional
+          Dispatch host permission.
+        </P>
+      </Section>
+    </>
+  );
+}

apps/web/src/components/app/docs-sections/index.ts

@@ -7,5 +7,6 @@ export { WorktreesContent } from "./worktrees";
 export { PersonasContent } from "./personas";
 export { EventsContent } from "./events";
 export { MediaContent } from "./media";
+export { BrowserFeedbackContent } from "./browser-feedback";
 export { NotificationsContent } from "./notifications";
 export { UpdatesContent } from "./updates";

apps/web/src/lib/tips/tips.ts

@@ -204,6 +204,14 @@ export const tips: Tip[] = [
     since: "0.29.1",
     surfaces: ["inline"],
   },
+  {
+    id: "browser-feedback",
+    title: "Browser Feedback",
+    body: "Select an element on any web page, add a comment, and send it to a running agent. Pair the Chrome extension from Settings → Connections.",
+    docsSection: "browser-feedback",
+    since: "0.29.3",
+    surfaces: ["ambient"],
+  },
   {
     id: "job-webhook-trigger",
     title: "Job Webhook Triggers",