ed799a0c0b
A textarea is a poor place to hand-write a nested `_meta` payload. Ace closes a
brace when you open one, folds nested objects, and — through its JSON worker —
marks the offending line in the gutter instead of reporting one message for the
whole document.
Three things the swap turned up:
- Ace fires *two* change events for a replace (a remove, then an insert), so
select-all-and-retype briefly leaves an empty document. Acting on the first
emitted `{}` and wiped the user's saved metadata the instant they selected
it. `handleChange` now coalesces the pair in a microtask, and the component
tracks what it last emitted so the parent echoing that value back is not
mistaken for an external reset.
- Ace's own `github` themes fail WCAG AA on the gutter — `#AAA` on `#e8e8e8` is
1.89:1, and the dark theme is 4.13:1. Folding needs the gutter, so the colors
are overridden with palette tokens (5.82:1 and 4.88:1) rather than hiding it.
- `textInputAriaLabel` alone never reaches the DOM: Ace composes the label as
"<label>, Cursor at row N" and only recomputes it when the cursor moves, so
it is forced once on load. Until then the control's only accessible name is a
position readout.
Testing is split because Ace's input path does not work under happy-dom at all
— `userEvent.type` reaches the textarea and produces no edit, so a test written
that way asserts nothing. Unit tests drive the editor instance through a shared
`src/test/aceEditor.ts` helper; the real keyboard behaviour (`{` then Enter
giving `{\n \n}`) is asserted by Storybook play functions in Chromium.
`react-ace`/`ace-builds` are declared in `clients/web` rather than the root, per
the rule for a dependency that renders React components.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0177mPHAdECD18nLLCTwR5rh
Signed-off-by: cliffhall <cliff@futurescale.com>
99 lines
3.4 KiB
JSON
99 lines
3.4 KiB
JSON
{
|
|
"name": "@modelcontextprotocol/inspector-web",
|
|
"private": true,
|
|
"type": "module",
|
|
"main": "build/index.js",
|
|
"bin": {
|
|
"mcp-inspector-web": "./build/index.js"
|
|
},
|
|
"exports": {
|
|
".": "./build/index.js"
|
|
},
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc -b && vite build && npm run build:runner",
|
|
"build:client": "vite build",
|
|
"build:runner": "tsup --config tsup.runner.config.ts",
|
|
"build:storybook": "storybook build",
|
|
"validate": "npm run format:check && npm run lint && npm run build && npm run test",
|
|
"pretest": "npm run test-servers:build",
|
|
"test": "vitest run --project=unit",
|
|
"test:watch": "vitest --project=unit",
|
|
"test:coverage": "npm run test-servers:build && vitest run --project=unit --project=integration --coverage",
|
|
"test:storybook": "vitest run --project=storybook",
|
|
"test:storybook:watch": "vitest --project=storybook",
|
|
"test:integration": "npm run test-servers:build && vitest run --project=integration",
|
|
"test:integration:watch": "npm run test-servers:build && vitest --project=integration",
|
|
"test-servers:build": "tsc -p ../../test-servers --noCheck",
|
|
"lint": "eslint . --max-warnings 0",
|
|
"format": "prettier --write src server .storybook \"*.{ts,tsx,mts,cts,js,jsx,mjs,cjs}\"",
|
|
"format:check": "prettier --check src server .storybook \"*.{ts,tsx,mts,cts,js,jsx,mjs,cjs}\"",
|
|
"preview": "vite preview",
|
|
"storybook": "storybook dev -p 6006"
|
|
},
|
|
"dependencies": {
|
|
"@dnd-kit/core": "^6.3.1",
|
|
"@dnd-kit/sortable": "^8.0.0",
|
|
"@dnd-kit/utilities": "^3.2.2",
|
|
"@emotion/react": "^11.14.0",
|
|
"@hono/node-server": "^2.0.12",
|
|
"@mantine/core": "^8.3.17",
|
|
"@mantine/form": "^8.3.17",
|
|
"@mantine/hooks": "^8.3.17",
|
|
"@mantine/notifications": "^8.3.17",
|
|
"@napi-rs/keyring": "^1.3.0",
|
|
"ace-builds": "^1.44.0",
|
|
"ajv": "^8.17.1",
|
|
"atomically": "^2.1.1",
|
|
"chokidar": "^4.0.3",
|
|
"commander": "^13.1.0",
|
|
"hono": "^4.13.1",
|
|
"open": "^10.2.0",
|
|
"papaparse": "^5.5.4",
|
|
"pino": "^9.14.0",
|
|
"react": "^19.2.4",
|
|
"react-ace": "^15.0.0",
|
|
"react-dom": "^19.2.4",
|
|
"react-icons": "^5.6.0",
|
|
"react-markdown": "^10.1.0",
|
|
"react-syntax-highlighter": "^16.1.1",
|
|
"remark-gfm": "^4.0.1",
|
|
"zod": "^4.4.3"
|
|
},
|
|
"devDependencies": {
|
|
"@chromatic-com/storybook": "^5.2.1",
|
|
"@eslint/js": "^10.0.1",
|
|
"@storybook/addon-a11y": "^10.5.5",
|
|
"@storybook/addon-docs": "^10.5.5",
|
|
"@storybook/addon-onboarding": "^10.5.5",
|
|
"@storybook/addon-vitest": "^10.5.5",
|
|
"@storybook/react-vite": "^10.5.5",
|
|
"@testing-library/jest-dom": "^6.9.1",
|
|
"@testing-library/react": "^16.3.2",
|
|
"@testing-library/user-event": "^14.6.1",
|
|
"@types/express": "^5.0.6",
|
|
"@types/node": "^24.12.4",
|
|
"@types/papaparse": "^5.5.2",
|
|
"@types/react": "^19.2.14",
|
|
"@types/react-dom": "^19.2.3",
|
|
"@types/react-syntax-highlighter": "^15.5.13",
|
|
"@vitejs/plugin-react": "^6.0.0",
|
|
"@vitest/browser-playwright": "^4.1.10",
|
|
"@vitest/coverage-v8": "^4.1.10",
|
|
"eslint": "^10.8.0",
|
|
"eslint-plugin-react-hooks": "^7.1.1",
|
|
"eslint-plugin-react-refresh": "^0.5.2",
|
|
"eslint-plugin-storybook": "^10.5.5",
|
|
"globals": "^17.4.0",
|
|
"happy-dom": "^20.9.0",
|
|
"playwright": "^1.58.2",
|
|
"prettier": "3.8.4",
|
|
"storybook": "^10.5.5",
|
|
"tsup": "^8.5.1",
|
|
"typescript": "~5.9.3",
|
|
"typescript-eslint": "^8.56.1",
|
|
"vite": "^8.1.5",
|
|
"vitest": "^4.1.10",
|
|
"yaml": "^2.9.0"
|
|
}
|
|
}
|