feat(server): adapt dynamic context control to ProcessedPointedDOMElement

- Add cssComputed and textContent fields to ProcessedPointedDOMElement type
- Update ElementProcessor to capture full computed styles from raw data
- Adapt element-detail.ts to shape ProcessedPointedDOMElement instead of TargetedElement
- Update tests to use ProcessedPointedDOMElement
- All shaping logic now works server-side on processed elements

Author: ashtonchew

packages/server/src/__tests__/utils/element-detail.test.ts

@@ -4,7 +4,40 @@ import {
   normalizeTextDetail,
   shapeElementForDetail,
 } from '../../utils/element-detail';
-import { createMockElement } from '../test-helpers';
+import { ProcessedPointedDOMElement } from '../../types';
+
+function createMockProcessedElement(): ProcessedPointedDOMElement {
+  return {
+    selector: 'div.test-element',
+    tagName: 'DIV',
+    id: 'test-id',
+    classes: ['test-class'],
+    innerText: 'Visible text',
+    textContent: 'Visible text with hidden content',
+    attributes: { 'data-test': 'true' },
+    position: {
+      x: 100, y: 200, width: 300, height: 50,
+    },
+    cssProperties: {
+      display: 'block',
+      position: 'relative',
+      fontSize: '16px',
+      color: 'rgb(0, 0, 0)',
+      backgroundColor: 'rgb(255, 255, 255)',
+    },
+    cssComputed: {
+      display: 'block',
+      position: 'relative',
+      fontSize: '16px',
+      color: 'rgb(0, 0, 0)',
+      backgroundColor: 'rgb(255, 255, 255)',
+      marginTop: '10px',
+      paddingLeft: '5px',
+    },
+    timestamp: new Date().toISOString(),
+    url: 'https://example.com',
+  };
+}
 
 describe('element-detail utilities', () => {
   describe('normalizeTextDetail', () => {
@@ -41,19 +74,18 @@ describe('element-detail utilities', () => {
 
   describe('shapeElementForDetail', () => {
     it('omits text and css when levels request none', () => {
-      const element = createMockElement();
+      const element = createMockProcessedElement();
       const shaped = shapeElementForDetail(element, 'none', 0);
 
-      expect(shaped.innerText).toBeUndefined();
+      expect(shaped.innerText).toBe('');
       expect(shaped.textContent).toBeUndefined();
       expect(shaped.cssProperties).toBeUndefined();
-      expect(shaped.cssLevel).toBe(0);
     });
 
     it('returns visible text and level 1 css subset', () => {
-      const element = createMockElement();
-      element.textVariants!.visible = 'Visible text only';
-      element.textVariants!.full = 'Visible text only with hidden';
+      const element = createMockProcessedElement();
+      element.innerText = 'Visible text only';
+      element.textContent = 'Visible text only with hidden';
       const shaped = shapeElementForDetail(element, 'visible', 1);
 
       expect(shaped.innerText).toBe('Visible text only');
@@ -64,17 +96,11 @@ describe('element-detail utilities', () => {
     });
 
     it('returns full css when level 3 requested', () => {
-      const element = createMockElement();
-      element.cssComputed = {
-        ...element.cssProperties!,
-        marginTop: '5px',
-      };
-
+      const element = createMockProcessedElement();
       const shaped = shapeElementForDetail(element, 'full', 3);
-      expect(shaped.cssProperties).toEqual({
-        ...element.cssComputed,
-      });
-      expect(shaped.textContent).toBe(element.textVariants!.full);
+
+      expect(shaped.cssProperties).toEqual(element.cssComputed);
+      expect(shaped.textContent).toBe(element.textContent);
     });
   });
 });

packages/server/src/services/element-processor.ts

@@ -26,13 +26,15 @@ export default class ElementProcessor {
       classes: element ? Array.from(element.classList) : [],
       attributes: element ? this.getAttributes(element) : {},
       innerText: element?.textContent || '',
+      textContent: element?.textContent || undefined,
       selector: element ? generateSelector(element) : 'unknown',
 
       position: this.getPosition(raw.boundingClientRect),
       url: raw.url,
       timestamp: new Date(raw.timestamp).toISOString(),
 
       cssProperties: this.getRelevantStyles(raw.computedStyles),
+      cssComputed: raw.computedStyles ? { ...raw.computedStyles } : undefined,
       componentInfo: this.getComponentInfo(raw.reactFiber),
 
       warnings: allWarnings.length > 0 ? allWarnings : undefined,

packages/server/src/types.ts

@@ -21,10 +21,14 @@ export interface ProcessedPointedDOMElement {
   url: string;
   timestamp: string; // ISO format
 
-  // Optional processing
+  // Full CSS data for shaping
   cssProperties?: CSSProperties;
+  cssComputed?: Record<string, string>; // Full computed styles
   componentInfo?: ComponentInfo;
 
+  // Text content (full, including hidden nodes)
+  textContent?: string;
+
   // Processing metadata
   warnings?: string[];
 }

packages/server/src/utils/element-detail.ts

@@ -3,15 +3,14 @@ import {
   CSSProperties,
   DEFAULT_CSS_LEVEL,
   DEFAULT_TEXT_DETAIL,
-  TargetedElement,
   TextDetailLevel,
-  TextSnapshots,
 } from '@mcp-pointer/shared/types';
 import {
   CSS_LEVEL_FIELD_MAP,
   isValidCSSLevel,
   isValidTextDetail,
 } from '@mcp-pointer/shared/detail';
+import { ProcessedPointedDOMElement } from '../types';
 
 export interface DetailParameters {
   textDetail?: unknown;
@@ -88,33 +87,24 @@ export function normalizeDetailParameters(
   };
 }
 
-function resolveTextVariants(element: TargetedElement): TextSnapshots {
-  const visible = element.textVariants?.visible ?? element.innerText ?? '';
-  const full = element.textVariants?.full ?? element.textContent ?? visible;
-
-  return {
-    visible,
-    full,
-  };
-}
-
 function resolveTextContent(
-  variants: TextSnapshots,
+  element: ProcessedPointedDOMElement,
   detail: TextDetailLevel,
 ): string | undefined {
   if (detail === 'none') {
     return undefined;
   }
 
   if (detail === 'visible') {
-    return variants.visible;
+    return element.innerText;
   }
 
-  return variants.full || variants.visible;
+  // 'full' - return textContent if available, otherwise innerText
+  return element.textContent ?? element.innerText;
 }
 
 function buildCssProperties(
-  element: TargetedElement,
+  element: ProcessedPointedDOMElement,
   cssLevel: CSSDetailLevel,
 ): CSSProperties | undefined {
   if (cssLevel === 0) {
@@ -156,34 +146,28 @@ function buildCssProperties(
 }
 
 export function shapeElementForDetail(
-  element: TargetedElement,
+  element: ProcessedPointedDOMElement,
   detail: TextDetailLevel,
   cssLevel: CSSDetailLevel,
-): TargetedElement {
-  const variants = resolveTextVariants(element);
-  const resolvedText = resolveTextContent(variants, detail);
-  const textContent = detail === 'full' ? variants.full : undefined;
+): ProcessedPointedDOMElement {
+  const resolvedText = resolveTextContent(element, detail);
+  const textContent = detail === 'full' ? element.textContent : undefined;
   const cssProperties = buildCssProperties(element, cssLevel);
 
-  const shaped: TargetedElement = {
+  const shaped: ProcessedPointedDOMElement = {
     selector: element.selector,
     tagName: element.tagName,
     id: element.id,
     classes: [...element.classes],
     attributes: { ...element.attributes },
     position: { ...element.position },
-    cssLevel,
     componentInfo: element.componentInfo ? { ...element.componentInfo } : undefined,
     timestamp: element.timestamp,
     url: element.url,
-    tabId: element.tabId,
-    textDetail: detail,
+    innerText: resolvedText ?? '',
+    warnings: element.warnings,
   };
 
-  if (resolvedText !== undefined) {
-    shaped.innerText = resolvedText;
-  }
-
   if (textContent !== undefined) {
     shaped.textContent = textContent;
   }