feat(ai): Implement Neural Link tool get_computed_styles (#8281)

Author: tobiu

ai/mcp/server/neural-link/openapi.yaml

@@ -72,6 +72,46 @@ paths:
               schema:
                 $ref: '#/components/schemas/ErrorResponse'
 
+  /component/styles/get:
+    post:
+      summary: Get Computed Styles
+      operationId: get_computed_styles
+      x-pass-as-object: true
+      description: |
+        Retrieves the computed styles for a component.
+
+        **When to Use:**
+        To verify visual state and theming (The "Visual Gap").
+      tags: [Component]
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/GetComputedStylesRequest'
+      responses:
+        '200':
+          description: Computed styles
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  styles:
+                    type: object
+        '400':
+          description: Invalid request body
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorResponse'
+        '500':
+          description: Internal server error
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ErrorResponse'
+
   /component/rect/get:
     post:
       summary: Get Component DOM Rects
@@ -805,6 +845,24 @@ components:
           type: string
           description: The target App Worker Session ID
 
+    GetComputedStylesRequest:
+      type: object
+      required:
+        - componentId
+        - variables
+      properties:
+        componentId:
+          type: string
+          description: The component ID
+        variables:
+          type: array
+          items:
+            type: string
+          description: The list of style properties/variables to retrieve
+        sessionId:
+          type: string
+          description: The target App Worker Session ID
+
     GetDomRectRequest:
       type: object
       required:

ai/mcp/server/neural-link/services/ComponentService.mjs

@@ -48,6 +48,18 @@ class ComponentService extends Base {
         return await ConnectionService.call(sessionId, 'get_dom_rect', {componentIds})
     }
 
+    /**
+     * Retrieves the computed styles for a component.
+     * @param {Object} opts            The options object.
+     * @param {String} opts.componentId The component ID.
+     * @param {String[]} opts.variables The list of style properties/variables to retrieve.
+     * @param {String} [opts.sessionId] The target session ID.
+     * @returns {Promise<Object>} The computed styles.
+     */
+    async getComputedStyles({componentId, variables, sessionId}) {
+        return await ConnectionService.call(sessionId, 'get_computed_styles', {componentId, variables});
+    }
+
     /**
      * Retrieves the full component tree of the application.
      * @param {Object} opts            The options object.

ai/mcp/server/neural-link/services/toolService.mjs

@@ -15,6 +15,7 @@ const openApiFilePath = path.join(__dirname, '../openapi.yaml');
 const serviceMapping = {
     get_component_property: ComponentService  .getComponentProperty.bind(ComponentService),
     get_component_tree    : ComponentService  .getComponentTree    .bind(ComponentService),
+    get_computed_styles   : ComponentService  .getComputedStyles   .bind(ComponentService),
     get_dom_rect          : ComponentService  .getDomRect          .bind(ComponentService),
     get_drag_state        : InteractionService.getDragState        .bind(InteractionService),
     get_record            : DataService       .getRecord           .bind(DataService),

src/ai/client/ComponentService.mjs

@@ -26,6 +26,27 @@ class ComponentService extends Service {
         return {value: this.safeSerialize(component[property])};
     }
 
+    /**
+     * @param {Object}   params
+     * @param {String}   params.componentId
+     * @param {String[]} params.variables
+     * @returns {Object}
+     */
+    async getComputedStyles({componentId, variables}) {
+        const component = Neo.getComponent(componentId);
+
+        if (!component) {
+            throw new Error(`Component not found: ${componentId}`)
+        }
+
+        const styles = await Neo.main.DomAccess.getComputedStyle({
+            id   : component.id,
+            style: variables
+        });
+
+        return {styles}
+    }
+
     /**
      * @param {Object}   params
      * @param {String[]} params.componentIds

src/main/DomAccess.mjs

@@ -69,6 +69,7 @@ class DomAccess extends Base {
                 'focus',
                 'getAttributes',
                 'getBoundingClientRect',
+                'getComputedStyle',
                 'getOffscreenCanvas',
                 'getScrollingDimensions',
                 'measure',
@@ -403,6 +404,31 @@ class DomAccess extends Base {
         return rect
     }
 
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {String|String[]} data.style
+     * @returns {Object}
+     */
+    getComputedStyle({id, style}) {
+        let node   = this.getElement(id),
+            styles = {};
+
+        if (node) {
+            let computedStyle = window.getComputedStyle(node);
+
+            if (!Array.isArray(style)) {
+                style = [style]
+            }
+
+            style.forEach(prop => {
+                styles[prop] = computedStyle.getPropertyValue(prop)
+            })
+        }
+
+        return styles
+    }
+
     /**
      * @param {String|HTMLElement} nodeId
      * @returns {HTMLElement|null}