refactor(server): simplify shared state and css payload

Author: ashtonchew

packages/server/src/__tests__/factories/shared-state-factory.ts

@@ -1,6 +1,6 @@
 import { RawPointedDOMElement, PointerMessageType } from '@mcp-pointer/shared/types';
 import {
-  SharedState, StateDataV2, ProcessedPointedDOMElement,
+  SharedState, SharedStateData, ProcessedPointedDOMElement,
 } from '../../types';
 
 export const createProcessedElement = (
@@ -39,17 +39,16 @@ export const createRawElement = (
   ...overrides,
 });
 
-export const createStateV2 = (
+export const createSharedState = (
   rawOverrides: Partial<RawPointedDOMElement> = {},
   processedOverrides: Partial<ProcessedPointedDOMElement> = {},
 ): SharedState => ({
-  stateVersion: 2,
   data: {
     rawPointedDOMElement: createRawElement(rawOverrides),
     processedPointedDOMElement: createProcessedElement(processedOverrides),
     metadata: {
       receivedAt: '2023-01-01T00:00:00.000Z',
       messageType: PointerMessageType.DOM_ELEMENT_POINTED,
     },
-  } as StateDataV2,
+  } as SharedStateData,
 });

packages/server/src/__tests__/services/shared-state-service.test.ts

@@ -2,7 +2,7 @@ import fs from 'fs/promises';
 import path from 'path';
 import os from 'os';
 import SharedStateService from '../../services/shared-state-service';
-import { createStateV2 } from '../factories/shared-state-factory';
+import { createSharedState } from '../factories/shared-state-factory';
 
 jest.mock('../../logger', () => ({
   debug: jest.fn(),
@@ -29,32 +29,30 @@ describe('SharedStateService', () => {
 
   describe('saveState', () => {
     it('writes state to file', async () => {
-      const state = createStateV2();
+      const state = createSharedState();
 
       await service.saveState(state);
 
       const content = await fs.readFile(testPath, 'utf8');
       const parsed = JSON.parse(content);
-      expect(parsed.stateVersion).toBe(state.stateVersion);
       expect(parsed.data.processedPointedDOMElement).toEqual(state.data.processedPointedDOMElement);
     });
 
     it('overwrites corrupted file', async () => {
       await fs.writeFile(testPath, 'invalid json');
-      const state = createStateV2();
+      const state = createSharedState();
 
       await service.saveState(state);
 
       const content = await fs.readFile(testPath, 'utf8');
       const parsed = JSON.parse(content);
-      expect(parsed.stateVersion).toBe(state.stateVersion);
       expect(parsed.data.processedPointedDOMElement).toEqual(state.data.processedPointedDOMElement);
     });
   });
 
   describe('getPointedElement', () => {
     it('returns processed element from state', async () => {
-      const state = createStateV2();
+      const state = createSharedState();
       await fs.writeFile(testPath, JSON.stringify(state));
 
       const result = await service.getPointedElement();

packages/server/src/message-handler.ts

@@ -2,7 +2,7 @@ import { PointerMessageType, type RawPointedDOMElement } from '@mcp-pointer/shar
 import logger from './logger';
 import ElementProcessor from './services/element-processor';
 import SharedStateService from './services/shared-state-service';
-import { SharedState, StateDataV2 } from './types';
+import { SharedState, SharedStateData } from './types';
 
 function buildMetadata(messageType: string) {
   const now = new Date().toISOString();
@@ -22,14 +22,13 @@ function buildState(
   const raw = data as RawPointedDOMElement;
   const processed = elementProcessor.processFromRaw(raw);
 
-  const stateData: StateDataV2 = {
+  const stateData: SharedStateData = {
     rawPointedDOMElement: raw,
     processedPointedDOMElement: processed,
     metadata: buildMetadata(type),
   };
 
   return {
-    stateVersion: 2,
     data: stateData,
   };
 }

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

@@ -1,6 +1,6 @@
 // Simple safe getter function (replaces lodash.get)
 import {
-  RawPointedDOMElement, ElementPosition, CSSProperties, ComponentInfo,
+  RawPointedDOMElement, ElementPosition, ComponentInfo,
 } from '@mcp-pointer/shared/types';
 import { ProcessedPointedDOMElement } from '../types';
 import { extractFromHTML, generateSelector } from '../utils/dom-extractor';
@@ -33,7 +33,6 @@ export default class ElementProcessor {
       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),
 
@@ -64,12 +63,6 @@ export default class ElementProcessor {
     };
   }
 
-  private getRelevantStyles(styles?: Record<string, string>): CSSProperties | undefined {
-    if (!styles) return undefined;
-
-    return { ...styles };
-  }
-
   private getComponentInfo(reactFiber?: any): ComponentInfo | undefined {
     if (!reactFiber) return undefined;
 

packages/server/src/services/mcp-service.ts

@@ -9,7 +9,7 @@ import { CSS_DETAIL_OPTIONS, TEXT_DETAIL_OPTIONS } from '@mcp-pointer/shared/det
 import SharedStateService from './shared-state-service';
 import {
   normalizeDetailParameters,
-  shapeElementForDetail,
+  serializeElement,
   type DetailParameters,
   type NormalizedDetailParameters,
 } from '../utils/element-detail';
@@ -54,14 +54,14 @@ export default class MCPService {
       tools: [
         {
           name: MCPToolName.GET_POINTED_ELEMENT,
-          description: 'Get information about the currently pointed/shown DOM element. Control returned payload size with optional textDetail (full|visible|none) and cssLevel (0-3).',
+          description: 'Get information about the currently pointed/shown DOM element. Control returned payload size with optional textDetail (0 none | 1 visible | 2 full) and cssLevel (0-3).',
           inputSchema: {
             type: 'object',
             properties: {
               textDetail: {
-                type: 'string',
+                type: 'integer',
                 enum: [...TEXT_DETAIL_OPTIONS],
-                description: 'Controls how much text is returned. full (default) includes hidden text fallback, visible uses only rendered text, none omits text fields.',
+                description: 'Controls how much text is returned. 2 (default) includes hidden text fallback, 1 uses only rendered text, 0 omits text fields.',
               },
               cssLevel: {
                 type: 'integer',
@@ -102,7 +102,7 @@ export default class MCPService {
       };
     }
 
-    const shapedElement = shapeElementForDetail(
+    const shapedElement = serializeElement(
       processedElement,
       details.textDetail,
       details.cssLevel,

packages/server/src/types.ts

@@ -21,7 +21,6 @@ export interface ProcessedPointedDOMElement {
   timestamp: string; // ISO format
 
   // Full CSS data for shaping
-  cssProperties?: CSSProperties;
   cssComputed?: Record<string, string>; // Full computed styles
   componentInfo?: ComponentInfo;
 
@@ -32,8 +31,24 @@ export interface ProcessedPointedDOMElement {
   warnings?: string[];
 }
 
+export interface SerializedDOMElement {
+  selector: string;
+  tagName: string;
+  id?: string;
+  classes: string[];
+  attributes: Record<string, string>;
+  position: ElementPosition;
+  url: string;
+  timestamp: string;
+  innerText: string;
+  textContent?: string;
+  cssProperties?: CSSProperties;
+  componentInfo?: ComponentInfo;
+  warnings?: string[];
+}
+
 // State data structure
-export interface StateDataV2 {
+export interface SharedStateData {
   rawPointedDOMElement: RawPointedDOMElement;
   processedPointedDOMElement: ProcessedPointedDOMElement;
   metadata: {
@@ -44,6 +59,5 @@ export interface StateDataV2 {
 
 // Storage format
 export interface SharedState {
-  stateVersion: 2;
-  data: StateDataV2;
+  data: SharedStateData;
 }