From 19a6737f5fdf73acdd2683d504a63f8ca14ec478 Mon Sep 17 00:00:00 2001
From: jedarden <github@jedarden.com>
Date: Sat, 6 Jun 2026 22:30:48 -0400
Subject: [PATCH] feat: add agentation feedback toolbar to web UI

Adds the agentation floating annotation toolbar so annotated UI elements
produce structured markdown (CSS selectors, positions, React component info)
that can be copied/pasted into Claude to provide precise visual feedback.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package-lock.json            | 25 ++++++++++++++++++++++---
 package.json                 |  1 +
 src/web/frontend/src/App.tsx |  7 +++++++
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 21cdc40..fb17d1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@types/blessed": "^0.1.27",
+        "agentation": "^3.0.2",
         "better-sqlite3": "^12.6.2",
         "blessed": "^0.1.81",
         "chalk": "^4.1.2",
@@ -1980,6 +1981,24 @@
         "node": ">= 14"
       }
     },
+    "node_modules/agentation": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/agentation/-/agentation-3.0.2.tgz",
+      "integrity": "sha512-iGzBxFVTuZEIKzLY6AExSLAQH6i6SwxV4pAu7v7m3X6bInZ7qlZXAwrEqyc4+EfP4gM7z2RXBF6SF4DeH0f2lA==",
+      "license": "PolyForm-Shield-1.0.0",
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -3756,7 +3775,7 @@
       "version": "19.2.4",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -3766,7 +3785,7 @@
       "version": "19.2.4",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.27.0"
@@ -3935,7 +3954,7 @@
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/semver": {
diff --git a/package.json b/package.json
index 72aafc4..3bdf06a 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
   },
   "dependencies": {
     "@types/blessed": "^0.1.27",
+    "agentation": "^3.0.2",
     "better-sqlite3": "^12.6.2",
     "blessed": "^0.1.81",
     "chalk": "^4.1.2",
diff --git a/src/web/frontend/src/App.tsx b/src/web/frontend/src/App.tsx
index 36d1302..89b608a 100644
--- a/src/web/frontend/src/App.tsx
+++ b/src/web/frontend/src/App.tsx
@@ -24,6 +24,7 @@ import FleetSummaryBar from './components/FleetSummaryBar';
 import HistoricalSessionsPanel from './components/HistoricalSessionsPanel';
 import WorkerAnalyticsPanel from './components/WorkerAnalyticsPanel';
 import CommandPalette from './components/CommandPalette';
+import { Agentation } from 'agentation';
 import { extractReplayFromUrl, ReplayExport } from './utils/replayExport';
 import { FocusPresetManager, createWebPresetManager, FocusPreset } from './utils/focusPresets';
 
@@ -1109,6 +1110,12 @@ const App: React.FC = () => {
         workers={workers}
         events={events}
       />
+
+      <Agentation
+        onSubmit={(markdown) => {
+          navigator.clipboard.writeText(markdown).catch(console.error);
+        }}
+      />
     </div>
   );
 };