jedarden/FABRIC
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add agentation feedback toolbar to web UI

Browse source 
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>
This commit is contained in:
jedarden 2026-06-06 22:30:48 -04:00
parent 9e717bdb24
commit 19a6737f5f
3 changed files with 30 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
package-lock.json generated
View file

@ -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": {

1
package.json
View file

@ -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",

7
src/web/frontend/src/App.tsx
View file

@ -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>
);
};