Start the c2n MCP server in web sessions and keep gallery screenshot names stable

Merged
CO
1mo ago
+49-6

Summary

SessionStart hook for Claude Code on the web

In a fresh cloud clone, the c2n MCP server in .mcp.json (node packages/tools/mcp/src/cli.ts) exited at startup (CONNECTION_CLOSED). It needs node_modules and the gitignored data/registry.json, and a fresh clone has neither.

  • .claude/hooks/session-start.sh, registered in .claude/settings.json, runs only in remote sessions. It runs npm install, then npm run build:registry -w packages/tools/mcp. It writes everything to stderr, so none of the output ends up in the session's context.
  • The hook exports CHROMIUM_PATH for the container's preinstalled Chromium. playwright.config.ts now launches that path when it is set, the same way apps/ui/scripts/gallery-shots.mjs already does. Without it, the component tests fail because the Chromium version Playwright expects is not installed in the container.
  • One paragraph in CLAUDE.md describes the hook.

Stable gallery screenshot names

The registry's screenshot URLs point at the latest Pages deploy, which we keep. The file name is the card's slug, so the slug must not depend on card order.

  • In navigation-menu.mdx, the card label=Mobile, collapsible groups was read as "Mobile", because a comma ends a fence meta value. It collided with the other "Mobile" card and got the order-dependent slug panel--mobile-2. It is renamed "Collapsible mobile", so its slug is now panel--collapsible-mobile.
  • exampleSlug in packages/tools/mcp/scripts/gallery.ts now fails the registry build when two cards in one section share a label, instead of numbering them -2, -3. No other gallery triggers it.

Validation

  • Hook: exits 0; a clean run takes about 3 min, reruns are cached by wireit. The MCP server then answers initialize.
  • npm run build:tools, npm run mcp:smoke: pass; generated skill/plugin files unchanged.
  • The registry built twice lists the same 735 screenshot URLs.
  • Checkbox suite with CHROMIUM_PATH: 7/7 pass.
  • eslint and prettier: pass on the changed files.

Note: panel--mobile-2.{light,dark}.png disappears from Pages on the next deploy. Only that one card's image breaks, and only for MCP versions released before this change.

šŸ¤– Generated with Claude Code

https://claude.ai/code/session_011Vk53fCCtwpXR13PQS2Mrt

Generated by Claude Code