Skip to content

feat(mcp): playwright-smart-table MCP inspector server (#108) - #157

Draft
rickcedwhat-ai wants to merge 30 commits into
mainfrom
feat/mcp-custom-inspector-wip
Draft

feat(mcp): playwright-smart-table MCP inspector server (#108)#157
rickcedwhat-ai wants to merge 30 commits into
mainfrom
feat/mcp-custom-inspector-wip

Conversation

@rickcedwhat-ai

Copy link
Copy Markdown
Collaborator

WIP — do not merge

Full MCP inspector server implementation for issue #108. Includes:

  • packages/mcp scaffold with inspect_table and preset_detect tools
  • DOM snapshotting + LLM-powered selector discovery
  • Virtualization and pagination detection
  • generate_config / inspect_and_generate one-click config generation
  • Dynamic model fetching + model selection persistence
  • Side-by-side dual-model comparison UI
  • Custom high-fidelity inspector UI
  • zod conflict resolution, CodeQL sanitization fixes

Note: feat/108-mcp-inspector-step1 is an earlier snapshot of this work. feat/mcp-custom-inspector-wip supersedes it — that branch can be deleted once this PR ships.

Closes

Closes #108

🤖 Generated with Claude Code

@coderabbitai

coderabbitai Bot commented May 16, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 510800e6-e5b5-4117-87a7-32ec4eea7c3a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/mcp-custom-inspector-wip

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@rickcedwhat-ai
rickcedwhat-ai force-pushed the feat/mcp-custom-inspector-wip branch from 86ded1c to b38390d Compare May 17, 2026 18:33
@rickcedwhat
rickcedwhat marked this pull request as ready for review May 18, 2026 00:34
@rickcedwhat
rickcedwhat self-requested a review as a code owner May 18, 2026 00:34
@rickcedwhat
rickcedwhat marked this pull request as draft May 18, 2026 00:34
rickcedwhat-ai and others added 24 commits June 9, 2026 15:44
…#108)

Step 1 of the MCP inspector plan (.agents/plans/mcp-inspector.md):

- Add packages/mcp to pnpm workspace
- packages/mcp/package.json: @rickcedwhat/playwright-smart-table-mcp@0.1.0
  - deps: @modelcontextprotocol/sdk, zod
  - peerDep: @playwright/test
- src/types.ts: full InspectTableFindings type surface (preset, virtualization,
  pagination, loading, selectorCandidates) — all sections typed up front so
  later steps fill them in without touching the public API
- src/browser/launcher.ts: thin Playwright browser launch/teardown wrapper
- src/detectors/preset.ts: pure preset fingerprinter (MUI DataGrid, MUI Table,
  RDG, Glide) — confidence = matched signals / total expected signals
- src/tools/inspectTable.ts: MCP tool handler — navigates to URL, collects DOM
  signals via page.evaluate(), runs preset detection, stubs all other sections
- src/index.ts: MCP server entry point (stdio transport)
- tests/unit/preset.test.ts: 12 unit tests covering all presets, partial
  confidence, null cases, and disambiguation (all pass)
- tests/fixtures/mui-datagrid-mock.html: static HTML for manual smoke testing
  via npx @modelcontextprotocol/inspector

Next steps (Step 2): virtualization + pagination detection
…ector)

Security / correctness:
- inspector/App.tsx: escape code in dangerouslySetInnerHTML fallback (XSS)
- mcp/launcher.ts: close browser if newContext() throws (process leak)
- mcp/detectors/pagination.ts: escape aria-label in CSS attribute selectors
- mcp/detectors/selectors.ts: guard against empty choices array
- mcp/tools/generateConfig.ts: escape quotes/backslashes in selector literals
- mcp/tools/inspectTable.ts: use empty arrays in mini-mode (not undefined)
- mcp/tools/inspectTable.ts: propagate storageStatePath into launchBrowser

Type safety:
- mcp/utils/githubModels.ts: add GitHubModelItem + PersistedState interfaces
- mcp/tests/unit/preset.test.ts: add missing DomSignals fields to makeSignals

Structure / config:
- inspector/tsconfig.node.json: moduleResolution Node -> Bundler
- inspector/package.json: remove deprecated shadcn-ui runtime dependency
- mcp/src/index.ts: call getLastState() per SSE session (not startup snapshot)
- .gitignore: ignore packages/mcp/.mcp-state.json

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…type guards

packages/inspector/src/App.tsx:
- Hoist createHighlighter into a module-level singleton (getHighlighter) so
  themes/langs are loaded once across all CodeBlock instances instead of once
  per code change
- Add cancelled flag to the highlight useEffect so stale async results from
  a previous code value cannot overwrite the current html state
- Add cleanup to the MCP client useEffect: track mounted flag to guard all
  state setters after unmount, close the client on cleanup to tear down the
  SSE connection (fixes StrictMode double-invocation leak)

packages/mcp/src/detectors/selectors.ts:
- Guard parsed LLM JSON with Array.isArray before using row/cell/header fields
  so a non-array truthy value (e.g. an object) cannot reach callers

packages/mcp/src/utils/githubModels.ts:
- Validate API response with Array.isArray before casting to GitHubModelItem[]
- Log errors in previously-silent catch blocks in getLastState/saveLastState

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
rickcedwhat-ai and others added 6 commits June 9, 2026 15:44
…sage

Snapshot content injected verbatim into the LLM prompt could override
instructions (prompt injection via page-controlled DOM).

- Add sanitizeSnapshot(): strips HTML comments and residual script/style
  blocks, collapses whitespace, enforces a 15 000-char hard cap
- Move all LLM instructions to a system message so they cannot be
  overridden by snapshot content
- Interpolate only structured signals (preset, virtualization) and the
  sanitized snapshot into the user message

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@rickcedwhat-ai
rickcedwhat-ai force-pushed the feat/mcp-custom-inspector-wip branch from b38390d to f455ecf Compare June 9, 2026 19:45
@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://rickcedwhat.github.io/playwright-smart-table/pr-preview/pr-157/

Built to branch gh-pages at 2026-06-09 19:45 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: playwright-smart-table MCP inspector server

1 participant