React tree and state

The JSON examples below show selected fields from the full response.

`react_get_tree`

Returns a bounded flat view of the mounted React tree.

Input: rootId is an optional integer. depth is an integer from 1 to 80 and defaults to 30. includeHost defaults to false. maxNodes is an integer from 1 to 2000 and defaults to 400. appOnly defaults to true: keep proven app-owned nodes and reconnect their parent links through excluded library/unknown ancestors. Ownership is resolved on at most 5000 candidates before maxNodes caps the output; depth still bounds traversal. ownershipCoverage describes that candidate set, and truncated discloses omitted tree structure. Use appOnly:false for the raw tree.

npx @genie-react/cli call react_get_tree \
  '{"rootId":7,"depth":5,"maxNodes":100,"appOnly":true}' --json

Output (selected fields):

{
  "rootId": 7,
  "nodes": [
    {
      "id": 7,
      "parentId": null,
      "name": "Checkout",
      "key": null,
      "kind": "component",
      "source": {
        "file": "/src/Checkout.tsx",
        "line": 18,
        "column": 1,
        "functionName": "Checkout"
      },
      "isLibrary": false
    }
  ],
  "total": 18,
  "truncated": false,
  "truncatedBy": null
}

Agent use: Use rootId to inspect the returned instance, or raise depth or maxNodes when truncatedBy shows that the tree is incomplete.

`react_provenance`

Reports wrapper ancestry, source roles, ownership, and source-map health for mounted components.

Input: component is an optional component-name substring. limit is an integer from 1 to 500 and defaults to 200. appOnly defaults to false; true keeps only records with resolved app ownership.

npx @genie-react/cli call react_provenance \
  '{"component":"SearchRow","limit":50,"appOnly":false}' --json

Output (selected fields):

{
  "records": [
    {
      "id": 44,
      "name": "SearchRow",
      "wrapperAncestry": [
        { "kind": "memo", "name": "Memo" },
        { "kind": "forward-ref", "name": "SearchRow" }
      ],
      "ownership": "unknown",
      "source": null,
      "provenance": {
        "definitionSource": null,
        "allocationCallsite": null,
        "hookDefinitionOwner": null,
        "hookCallsite": null,
        "package": null,
        "sourceMapConfidence": "unknown",
        "failureReason": "definition-and-allocation-not-distinguished",
        "usageOrDefinitionFallback": {
          "file": "/src/SearchRow.tsx",
          "line": 18,
          "column": 2,
          "functionName": "SearchRow"
        }
      }
    }
  ],
  "summary": {
    "scanned": 1,
    "returned": 1,
    "resolved": 0,
    "unresolved": 1,
    "ownership": { "app": 0, "library": 0, "unknown": 1 },
    "sourceMaps": {
      "mapped": 0,
      "served": 0,
      "unknown": 1,
      "status": "degraded"
    }
  },
  "hiddenByOwnership": 0,
  "omittedByLimit": 0,
  "truncated": false
}

Agent use: Edit a file only when the relevant source role and ownership are resolved. Here the fallback is ambiguous, so first fix or inspect source maps instead of treating it as the definition.

`react_find_components`

Finds mounted components by display name.

Input: component is the canonical non-empty display-name selector. Legacy query remains an alias; provide at least one and make them agree if both are supplied. exact defaults to false. limit is an integer from 1 to 200 and defaults to 50. appOnly defaults to false; true excludes library and unknown ownership before the output limit. ownershipCoverage, scanTruncated, and omittedByLimit disclose the bounded candidate scan (up to 5000 matching components).

npx @genie-react/cli call react_find_components \
  '{"component":"CheckoutForm","exact":true,"limit":20}' --json

Output (selected fields):

{
  "matches": [
    {
      "id": 42,
      "name": "CheckoutForm",
      "path": "App > Checkout > CheckoutForm",
      "kind": "function",
      "props": { "step": 2 },
      "source": {
        "file": "/src/CheckoutForm.tsx",
        "line": 18,
        "column": 1,
        "functionName": "CheckoutForm"
      },
      "isLibrary": false
    }
  ]
}

Agent use: Choose the mounted instance whose ancestor path, props, and source match the bug, then pass its id to inspection or mutation tools.

`react_inspect_component`

Reads bounded props, class state, and hooks for one mounted instance.

Input: id is a required integer. path is an optional array of string or number segments into props. depth is an integer from 1 to 6 and defaults to 2.

npx @genie-react/cli call react_inspect_component \
  '{"id":42,"path":["user"],"depth":4}' --json

Output (selected fields):

{
  "id": 42,
  "name": "CheckoutForm",
  "kind": "function",
  "props": { "name": "Ada" },
  "hooks": [
    {
      "index": 4,
      "kind": "state",
      "stateful": true,
      "stateIndex": 0,
      "value": { "step": 2 }
    }
  ],
  "wrapperAncestry": []
}

Agent use: Use the returned stateIndex and current value to decide whether a hook override is needed and which nested path to change. Hook output stops at 100 entries, and memo-versus-callback detection is best effort.

`react_dom_for_component`

Finds host elements rendered by one React component.

Input: id is a required integer. limit is an integer from 1 to 50 and defaults to 10.

npx @genie-react/cli call react_dom_for_component \
  '{"id":42,"limit":5}' --json

Output (selected fields):

{
  "id": 42,
  "name": "CheckoutForm",
  "elements": [
    {
      "tag": "form",
      "selector": "[data-testid=\"checkout\"]",
      "domId": null,
      "testId": "checkout",
      "role": "form",
      "ariaLabel": "Checkout",
      "name": null,
      "classes": ["checkout"],
      "text": "Pay now"
    }
  ],
  "total": 1
}

Agent use: Use the returned role, label, test ID, or selector for the next browser action. Prefer semantic fields when generated CSS classes make the selector brittle.

`react_component_for_dom`

Finds the React components that own DOM elements matched by a CSS selector.

Input: selector is a required string. limit is an integer from 1 to 20 and defaults to 5. propsDepth is an integer from 0 to 4 and defaults to 1. appOnly defaults to false. With true, classify up to 5000 DOM matches before limiting unique app-owned components. Read ownershipCoverage, omittedByLimit, and scanTruncated before treating the returned owners as complete.

npx @genie-react/cli call react_component_for_dom \
  '{"selector":"[data-testid=\"checkout\"]","limit":5,"propsDepth":2}' --json

Output (selected fields):

{
  "selector": "[data-testid=\"checkout\"]",
  "matched": 1,
  "components": [
    {
      "id": 42,
      "name": "CheckoutForm",
      "kind": "function",
      "tag": "form",
      "props": { "step": 2 },
      "source": {
        "file": "/src/CheckoutForm.tsx",
        "line": 18,
        "column": 1,
        "functionName": "CheckoutForm"
      },
      "isLibrary": false
    }
  ]
}

Agent use: Use the owner id and exact source to inspect the visible bug or choose the file to edit; compare all returned owners when the selector matches more than one element.

`stylex_inspect`

For apps styled with StyleX. Explains how elements are styled from the running page: the applied stylex.create() objects (name and source file:line, in override order), the CSS declarations they resolve to, defineVars tokens they read, and runtime values from dynamic style functions.

Input: Supply selector, a CSS selector, or id, a current component ID. At least one is required at runtime. The component form describes styled host elements in its rendered subtree, including nested elements. limit is an integer from 1 to 20 and defaults to 5.

npx @genie-react/cli call stylex_inspect \
  '{"selector":"#pricing article"}'

Output (selected fields):

{
  "target": "#pricing article",
  "matched": 1,
  "status": { "system": "stylex", "styleSrc": true, "hint": null },
  "elements": [
    {
      "tag": "article",
      "selector": "article",
      "owner": { "id": 82, "name": "PricingCard" },
      "styleObjects": [
        { "name": "styles.card", "package": "@acme/app", "file": "src/PricingCard.tsx", "line": 5 },
        { "name": "emphasis.featured", "package": "@acme/app", "file": "src/PricingCard.tsx", "line": 29 }
      ],
      "declarations": [
        { "property": "border-color", "value": "rgb(228, 81, 30)", "condition": null, "className": "borderColor-x1xsh3er", "tokens": [] },
        { "property": "gap", "value": "12px", "condition": "@media (width >= 48rem)", "className": "gap-x1e7g6uk", "tokens": [] },
        { "property": "width", "value": "var(--x-width)", "condition": null, "className": "width-x5lhr3w", "tokens": [{ "variable": "--x-width", "value": "80%" }] }
      ],
      "dynamic": [{ "variable": "--x-width", "value": "80%" }],
      "unresolvedClasses": []
    }
  ]
}

status.hint names the StyleX plugin option that unlocks more when system is none or styleSrc is false. line is the style key's line (card: {).

Requires StyleX dev output: set dev: true and debug: true on the StyleX bundler plugin (@stylexjs/unplugin or the Babel plugin). dev alone yields style-object names; debug adds file:line.

Agent use: Read styleObjects in application order to locate the definition that overrides a conflicting style. Check each declaration's condition before treating it as active. Values are declared CSS; verify computed styles and rendered geometry with a browser tool.

Limits: Browser DOM only. Cross-origin or disabled stylesheets are skipped, and rule scanning is bounded. unresolvedClasses identifies classes that readable rules did not explain. Compare matched with elements.length to detect the element limit; a partial result is not a full CSS cascade analysis.

`react_inspect_context`

Reads every React Context value consumed by one component.

Input: id is a required integer. depth is an integer from 1 to 6 and defaults to 2.

npx @genie-react/cli call react_inspect_context \
  '{"id":42,"depth":3}' --json

Output (selected fields):

{
  "id": 42,
  "name": "CheckoutForm",
  "contexts": [
    { "name": "ThemeContext", "value": { "mode": "dark" } },
    { "name": "AuthContext", "value": { "role": "buyer" } }
  ]
}

Agent use: Compare the consumed value with the expected provider value, then inspect or override the named Context if the wrong provider or stale value explains the UI.

Name selectors use component; numeric id and rootId select a specific mounted instance or subtree, and selector is a CSS selector. Those distinct identity domains are preserved. Inspection and override actions operate on that explicit target; their receipts are not component-population filters.

On this page