add react grab for development

[joshuali925]

Description

This PR adds https://github.com/aidenybai/react-grab to opensearch dashboards. This helps for AI agent based development to easily target specific page elements in the prompt.

The library is added to devdependencies, and will only be enabled in development mode.

An alternative is agentation, but i found it to break some css styling in OSD.

React grab UI is hidden by default, so there won't be any difference in OSD visually. To trigger it, press and hold Cmd + C.

Issues Resolved

Screenshot

(The blur effect comes from a chrome extension, it is not relevant to this PR.)

after clicking, it copies the following prompt

@<EuiHealth>

<div class="euiFlexGroup eu..." data-react-grab-frozen="">
  <div ...>
  <div ...>
  Success
</div>
  in FlyoutDetailPanel (at /plugin:agentTraces/src/plugins/agent_traces/public/application/pages/traces/flyout/flyout_detail_panel.tsx)
  in TraceDetailsFlyout (at /plugin:agentTraces/src/plugins/agent_traces/public/application/pages/traces/flyout/trace_details_flyout.tsx)
  in /plugin:agentTraces/src/plugins/agent_traces/public/application/pages/traces/flyout/trace_flyout_context.tsx

You can also do other actions like add comment before copying

Testing the changes

Changelog

• skip

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[github-actions]

PR Code Analyzer ❗

AI-powered 'Code-Diff-Analyzer' found issues on commit 08f73ac.

Path	Line	Severity	Description
src/core/public/osd_bootstrap.ts	35	high	react-grab is registered in the application bootstrap with 'toolbar: { enabled: false }', meaning it runs silently with no visible UI indicator. Combined with its dependencies (bippy for React fiber internals access, @medv/finder for DOM selector generation), this pattern is consistent with a covert component-state harvesting tool initialized at the earliest possible point in the app lifecycle. Legitimate dev tools do not deliberately suppress their own UI indicators.
yarn.lock	9165	medium	bippy is a library that monkey-patches React internals to expose the full fiber tree (component state, props, context, refs). Its inclusion via react-grab grants access to all in-memory React component data, which in a dashboard application can include API tokens, session data, and user credentials stored in component state.
yarn.lock	5272	medium	@react-grab/cli (version 0.1.28, same pinned version as react-grab) is a CLI tool with its own dependency chain (commander, ora, prompts, smol-toml, jsonc-parser) that is pulled into a browser-side package. CLI tooling has no legitimate role as a transitive dependency of a browser bootstrap module and suggests a mechanism for exporting or processing captured component data outside the browser.
package.json	539	low	react-grab is an obscure, low-version (0.1.28) package with no apparent relation to the stated changes in this PR (which appear to be a dependency reorder). Its addition is unexplained, and the package does not appear in any import within the regular application source—only in the bootstrap file via a dynamic import, making it easy to overlook in review.

The table above displays the top 10 most important findings.

Total: 4 | Critical: 0 | High: 1 | Medium: 2 | Low: 1

---

Pull Requests Author(s): Please update your Pull Request according to the report above.

Repository Maintainer(s): You can bypass diff analyzer by adding label skip-diff-analyzer after reviewing the changes carefully, then re-run failed actions. To re-enable the analyzer, remove the label, then re-run all actions.

---

⚠️ Note: The Code-Diff-Analyzer helps protect against potentially harmful code patterns. Please ensure you have thoroughly reviewed the changes beforehand.

Thanks.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 0.00%. Comparing base (d7573fc) to head (08f73ac).

Additional details and impacted files

@@      Coverage Diff      @@
##   main   #11567   +/-   ##
=============================
=============================

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

✅ All unit and integration tests passing

🔗 Workflow run · commit e14a2d811a424fe9d199e805d7d97b6439066fbd

[joshuali925]

react-grab is registered in the application bootstrap with 'toolbar: { enabled: false }', meaning it runs silently with no visible UI indicator... Legitimate dev tools do not deliberately suppress their own UI indicators.

i disabled its UI because i don't want to modify OSD UI for developers who won't need react-grab

[ruchidh]

can we add comment here about its purpose ?

[joshuali925]

sure, added e14a2d8

[github-actions]

PR Code Analyzer ❗

AI-powered 'Code-Diff-Analyzer' found issues on commit e14a2d8.

Path	Line	Severity	Description
src/core/public/osd_bootstrap.ts	35	critical	A hidden plugin ('react-grab') is dynamically imported in development mode and invoked via Ctrl+C/Cmd+C — the standard copy shortcut. The comment explicitly states the UI is hidden ('hidden to not affect all developers'). Intercepting copy keyboard shortcuts in a browser application is a classic credential/content harvesting vector. Combined with its stated purpose of sending 'context for coding agents,' this strongly indicates a covert data exfiltration mechanism.
package.json	539	critical	Introduction of 'react-grab@^0.1.28' — an unfamiliar, low-version package whose stated purpose is to transmit page context to external 'coding agents.' This package bundles a CLI tool (@react-grab/cli) with filesystem traversal capabilities, a React internals inspector (bippy), and a DOM element finder (@medv/finder). The combination enables scraping React component state, DOM content, and local files and forwarding them externally.
yarn.lock	5272	high	'@react-grab/cli@0.1.28' is a CLI tool (dependency of react-grab) with dependencies for filesystem traversal (ignore, jsonc-parser, smol-toml) and interactive prompts. Installing a CLI tool as a transitive dependency of a frontend React package is highly anomalous and suggests capability to read and exfiltrate project source files or configuration.
yarn.lock	9165	high	'bippy@^0.5.32' is a React reconciler instrumentation library that hooks into React internals via @types/react-reconciler. It can inspect the full React fiber tree including component state and props at runtime. Used inside a covert plugin, this enables harvesting of all rendered component data — including form inputs, authentication tokens stored in state, and other sensitive values.
yarn.lock	4335	high	'@medv/finder@^4.0.2' is a CSS selector generator that identifies any DOM element. In conjunction with bippy (React fiber inspector) and the hidden keyboard hook, this enables precise targeting and extraction of specific DOM elements (e.g., password fields, API key inputs) for exfiltration to external coding agent endpoints.
src/core/public/osd_bootstrap.ts	38	medium	The plugin is registered with 'toolbar: { enabled: false }', explicitly disabling any visible UI indicator. This deliberate concealment is inconsistent with a legitimate developer tool — a genuine productivity tool would want visibility. This confirms intentional obfuscation of the plugin's presence.
src/core/public/osd_bootstrap.ts	33	medium	The import is performed dynamically via a then-chain rather than a static import, which evades static analysis tools and bundler dependency graphs that might flag unexpected network-capable dependencies. Dynamic imports of unvetted packages at bootstrap time are a known supply chain attack pattern.

The table above displays the top 10 most important findings.

Total: 7 | Critical: 2 | High: 3 | Medium: 2 | Low: 0

---

Pull Requests Author(s): Please update your Pull Request according to the report above.

Repository Maintainer(s): You can bypass diff analyzer by adding label skip-diff-analyzer after reviewing the changes carefully, then re-run failed actions. To re-enable the analyzer, remove the label, then re-run all actions.

---

⚠️ Note: The Code-Diff-Analyzer helps protect against potentially harmful code patterns. Please ensure you have thoroughly reviewed the changes beforehand.

Thanks.