d5f12b2a82* feat(web): reorderable ServerCards — drag-and-drop + keyboard (#1369) Let users control the order of servers on the Servers screen instead of hand-editing mcp.json. Each ServerCard gets a grip handle (in the header, left of the name) that drives an @dnd-kit sortable; pointer and keyboard sensors both work, with live-region announcements for screen readers. - Backend: PUT /api/servers/order rewrites mcp.json in the supplied order inside the write lock, reusing the atomic-write + watcher-notify path. Registered before /:id so "order" isn't captured as a server id. Rejects with 409 when the id set no longer matches disk and 400 on duplicate / malformed bodies, so a reorder racing an external edit can't drop or duplicate an entry. - Hook: useServers.reorderServers(orderedIds) — optimistic local reorder, PUT, refresh-to-disk-truth on failure. - UI: SortableServerCard wrapper owns the dnd-kit concerns; ServerListScreen wraps the grid in DndContext + SortableContext (rect strategy) with pointer + keyboard sensors and announcements. Reorder math and a11y copy extracted to reorderIds.ts / serverReorder.ts for direct unit testing. Renders plain cards (no grip) when no onReorder is wired. - Wired onServerReorder through InspectorView -> App.tsx. Tests: pure-helper units, hook (persist / optimistic / 409 revert), 9 backend integration tests (incl. id-set-mismatch rejection and the route-registration guard), ServerCard/ServerListScreen units, and a real-browser Storybook keyboard-reorder play (the dnd-kit keyboard sensor needs layout rects that happy-dom doesn't provide). Adds @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(web): notify on reorder failure; skip reorder glue when not reorderable Address PR #1447 review: - App.tsx: catch reorderServers rejection (409 from a racing external edit, or a network error) and show a red toast, matching the error-handling pattern used by every other mutation — previously the rejection was discarded with `void` and the drag silently bounced back. - ServerListScreen: only build handleDragEnd / announcements when `reorderable`, so the four-closure announcements object isn't allocated every render when no onReorder is wired. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
86 lines
3 KiB
JSON
86 lines
3 KiB
JSON
{
|
|
"name": "@modelcontextprotocol/inspector-web",
|
|
"private": true,
|
|
"version": "0.0.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "node --import ./server/quiet-config-warnings.mjs ./node_modules/vite/bin/vite.js",
|
|
"build": "tsc -b && vite build",
|
|
"lint": "eslint .",
|
|
"format": "prettier --write src",
|
|
"format:check": "prettier --check src",
|
|
"validate": "npm run format:check && npm run lint && npm run build && npm run test:coverage",
|
|
"preview": "vite preview",
|
|
"storybook": "storybook dev -p 6006",
|
|
"build-storybook": "storybook 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-servers:build": "tsc -p ../../test-servers --noCheck",
|
|
"test:integration": "npm run test-servers:build && vitest run --project=integration",
|
|
"test:integration:watch": "npm run test-servers:build && vitest --project=integration"
|
|
},
|
|
"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": "^1.19.14",
|
|
"@mantine/core": "^8.3.17",
|
|
"@mantine/form": "^8.3.17",
|
|
"@mantine/hooks": "^8.3.17",
|
|
"@mantine/notifications": "^8.3.17",
|
|
"@modelcontextprotocol/ext-apps": "^1.7.1",
|
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
"@napi-rs/keyring": "^1.3.0",
|
|
"ajv": "^8.17.1",
|
|
"atomically": "^2.1.1",
|
|
"chokidar": "^4.0.3",
|
|
"hono": "^4.12.18",
|
|
"open": "^10.2.0",
|
|
"pino": "^9.14.0",
|
|
"react": "^19.2.4",
|
|
"react-dom": "^19.2.4",
|
|
"react-icons": "^5.6.0",
|
|
"react-markdown": "^10.1.0",
|
|
"remark-gfm": "^4.0.1",
|
|
"zod": "^4.3.6",
|
|
"zustand": "^5.0.13"
|
|
},
|
|
"devDependencies": {
|
|
"@chromatic-com/storybook": "^5.0.1",
|
|
"@eslint/js": "^9.39.4",
|
|
"@storybook/addon-a11y": "^10.2.19",
|
|
"@storybook/addon-docs": "^10.2.19",
|
|
"@storybook/addon-onboarding": "^10.2.19",
|
|
"@storybook/addon-vitest": "^10.2.19",
|
|
"@storybook/react-vite": "^10.2.19",
|
|
"@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/react": "^19.2.14",
|
|
"@types/react-dom": "^19.2.3",
|
|
"@vitejs/plugin-react": "^6.0.0",
|
|
"@vitest/browser-playwright": "^4.1.0",
|
|
"@vitest/coverage-v8": "^4.1.0",
|
|
"eslint": "^9.39.4",
|
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
"eslint-plugin-react-refresh": "^0.5.2",
|
|
"eslint-plugin-storybook": "^10.2.19",
|
|
"express": "^5.2.1",
|
|
"globals": "^17.4.0",
|
|
"happy-dom": "^20.9.0",
|
|
"playwright": "^1.58.2",
|
|
"prettier": "^3.8.1",
|
|
"storybook": "^10.2.19",
|
|
"typescript": "~5.9.3",
|
|
"typescript-eslint": "^8.56.1",
|
|
"vite": "^8.0.0",
|
|
"vitest": "^4.1.0",
|
|
"yaml": "^2.9.0"
|
|
}
|
|
}
|