Megatron website

The product landing page for Megatron, a local-first desktop control center for Claude Code skills, plugins, and usage. The website is deployed on Vercel at megatron-site.vercel.app as a static web application.

The interactive preview embeds Megatron's actual React renderer, including Skills, Plugins (user, project, and local scopes), hierarchical project navigation and scoping, actionable scan diagnostics, missing-project explanations, all seven Usage panels, settings, the command palette, file views, and dialogs. Tokens includes four token categories, independent 24-hour/7-day/30-day periods, trends, and model/project breakdowns. History has annual activity metrics, a yearly contribution calendar, an expandable monthly project timeline, shared year selection, and full-day details with available token data; Activity has recent prompts and sessions. Compact token values expose exact counts on hover and keyboard focus. A typed browser adapter supplies session-only sample data and simulates native actions, including parent-folder grants and cascading project discovery.

The marketing page uses vanilla JavaScript; the embedded preview uses React and TypeScript. Both entries build with Vite and Tailwind CSS v4. Normal builds require no desktop app checkout.

Deployment

The website is deployed to Vercel at megatron-site.vercel.app as a static site with continuous deployment connected to the GitHub repository. Pushes to main deploy directly to production, and pull requests generate preview deployments.

Vercel configuration

• Framework Preset: Vite
• Build Command: npm run build (typechecks, checks renderer snapshot integrity, and builds static assets)
• Output Directory: dist
• Install Command: npm ci
• Node.js Version: 22.x (matches "engines": { "node": ">=22.13.0" } in package.json)

All interactive preview features—including the typed browser adapter, sample state, simulated project/folder grants, and the pinned React renderer snapshot—execute entirely client-side in the visitor's browser. The deployment requires no server-side runtime, backend database, or external API keys.

Local development

Requires Node.js 22.13+ (or a newer supported Node release) and npm.

npm ci
npm run dev

Open http://127.0.0.1:5173 to access the local development server.

To build and preview the production bundle locally:

npm run build
npm run preview

The production site is emitted to dist/. The local production preview serves at http://127.0.0.1:4173.

Commands

Command	Purpose
npm run dev	Start the development server at 127.0.0.1:5173.
npm run build	Check TypeScript and renderer integrity, then build both production entries.
npm run preview	Serve the existing production build at 127.0.0.1:4173.
npm run typecheck	Check the preview, adapter, and imported renderer types.
npm run preview:check	Verify the pinned renderer snapshot against its recorded hashes.
npm run preview:sync -- <app>	Import a reviewed app checkout and record integration patches in provenance.
npm run lint	Check authored JavaScript and TypeScript with zero warnings allowed.
npm run format:check	Check formatting without modifying files.
npm run format	Format authored code and documentation.
npm test	Run adapter, analytics, messaging, provenance, and verification-tool regression tests.
npm run verify:visual	Build and capture all responsive preview states.
npm run verify:qa	Run headless Playwright interaction verification against an active preview server.
npm run verify:qa:ci	Run production interaction checks with an owned preview server; requires an existing build.
npm run pre-commit:check	Check generated instruction and skill mirrors.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗