Files
supabase/apps/studio/package.json
T
Sean OliverandCharis Lam 6bbe2c3297 feat(telemetry): add dev telemetry toolbar (#42259)
## Problem
We need a local-only UI to inspect client and server telemetry events
and override flags during development without touching non-local env
behavior. This work is intended to be shared across Studio, Docs, and
WWW.

## Changes
- Introduced a shared `dev-tools` package with the Dev Telemetry Toolbar
UI, trigger, and provider.
- Wired the toolbar into Studio, Docs, and WWW app shells (local-only
gating).
- Added a local-only `devTelemetry()` opt-in with storage gating and SSE
subscription.
- Wired client PostHog events into a local listener and re-exported
types.
- Added local flag override cookie support in the UI and CODEOWNERS for
the new package.
- Added unit tests covering local/non-local behavior and flag utilities.

## Testing
Manual (local only):
- Start each app locally: `pnpm dev:studio`, `pnpm dev:docs`, `pnpm
dev:www`
- Open the app, run `devTelemetry()` in the browser console
- Click around and confirm both client and server events appear (client
will be page views only)
- Verify feature flag overrides (PostHog + ConfigCat) persist and
restore correctly
- Confirm dismissing the toolbar clears local storage and hides the
trigger

Unblocked by https://github.com/supabase/platform/pull/29172

Resolves GROWTH-591

Demo:

[github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b](https://github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b)

Screenshots:

<img width="1368" height="972" alt="1"
src="https://github.com/user-attachments/assets/d2f20a0c-191f-4118-bb5e-15b25f5a54a9"
/>

<img width="1423" height="790" alt="2"
src="https://github.com/user-attachments/assets/115598e2-7287-49bf-9ed7-71ecc679dee3"
/>

<img width="1433" height="882" alt="3"
src="https://github.com/user-attachments/assets/51f666f2-9efc-410f-baec-378bdee9dbfe"
/>

<img width="608" height="483" alt="4"
src="https://github.com/user-attachments/assets/584d6cf5-1b2f-4cee-9e6a-d55ce2e3bae5"
/>

<img width="628" height="305" alt="5"
src="https://github.com/user-attachments/assets/991a9b39-578a-4565-b110-537a02040a53"
/>

<img width="659" height="447" alt="6"
src="https://github.com/user-attachments/assets/95ef405c-fffa-44af-bf6a-f974b780e3fc"
/>

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Developer Toolbar (local only): view client/server telemetry, inspect
events, and manage/override feature flags with persistent overrides,
filtering, and clear/reload.
* Client-side telemetry hooks: surface structured events to dev tooling
for realtime inspection.

* **Bug Fixes**
  * Fixed end-of-file newline in shared code.

* **Chores**
* Added dev-tools package, integrated provider and trigger across
Studio, Docs, and marketing sites, and added CODEOWNERS entry.

* **Tests**
  * Added comprehensive tests and test setup for the DevToolbar.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
2026-02-06 11:46:53 -08:00

214 lines
7.6 KiB
JSON

{
"name": "studio",
"version": "0.0.9",
"private": true,
"scripts": {
"preinstall": "npx only-allow pnpm",
"dev": "next dev -p 8082",
"build": "next build && if [ \"$SKIP_ASSET_UPLOAD\" != \"1\" ]; then ./../../scripts/upload-static-assets.sh; fi",
"start": "next start -p 8082",
"lint": "eslint .",
"lint:ratchet": "tsx scripts/ratchet-eslint-rules.ts --rule react-hooks/exhaustive-deps --rule import/no-anonymous-default-export --rule @tanstack/query/exhaustive-deps --rule @typescript-eslint/no-explicit-any",
"clean": "rimraf node_modules tsconfig.tsbuildinfo .next .turbo",
"test": "vitest --run --coverage",
"test:watch": "vitest watch",
"test:ui": "vitest --ui",
"test:update": "vitest --run --update",
"test:ci": "vitest --run --coverage",
"test:report": "open coverage/lcov-report/index.html",
"deploy:staging": "VERCEL_ORG_ID=team_E6KJ1W561hMTjon1QSwOh0WO VERCEL_PROJECT_ID=QmcmhbiAtCMFTAHCuGgQscNbke4TzgWULECctNcKmxWCoT vercel --prod -A .vercel/staging.json",
"pretypecheck": "next typegen",
"typecheck": "tsc --noEmit",
"build:deno-types": "tsx scripts/deno-types.ts",
"build:graphql-types": "tsx scripts/download-graphql-schema.mts && pnpm graphql-codegen --config scripts/codegen.ts",
"build:graphql-types:watch": "pnpm graphql-codegen --config scripts/codegen.ts --watch",
"evals:setup": "cp node_modules/libpg-query/wasm/libpg-query.wasm evals/libpg-query.wasm",
"evals:run": "braintrust eval --no-send-logs evals/assistant.eval.ts",
"evals:upload": "braintrust eval evals/assistant.eval.ts"
},
"dependencies": {
"@ai-sdk/amazon-bedrock": "^3.0.0",
"@ai-sdk/openai": "2.0.32",
"@ai-sdk/provider": "^2.0.0",
"@ai-sdk/provider-utils": "^3.0.0",
"@ai-sdk/react": "2.0.52",
"@aws-sdk/credential-providers": "^3.830.0",
"@dagrejs/dagre": "^1.0.4",
"@dnd-kit/core": "^6.1.0",
"@dnd-kit/modifiers": "^9.0.0",
"@dnd-kit/sortable": "^8.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@electric-sql/pglite": "^0.2.15",
"@graphiql/react": "^0.19.4",
"@graphiql/toolkit": "^0.9.1",
"@gregnr/postgres-meta": "^0.82.0-dev.2",
"@hcaptcha/react-hcaptcha": "^1.12.0",
"@headlessui/react": "^1.7.17",
"@heroicons/react": "^2.1.3",
"@hookform/resolvers": "^3.1.1",
"@mjackson/multipart-parser": "^0.10.1",
"@modelcontextprotocol/sdk": "^1.25.2",
"@monaco-editor/react": "^4.6.0",
"@next/bundle-analyzer": "^16.0.3",
"@number-flow/react": "^0.3.2",
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-slot": "^1.2.0",
"@radix-ui/react-visually-hidden": "^1.1.3",
"@sentry/nextjs": "catalog:",
"@std/path": "npm:@jsr/std__path@^1.0.8",
"@stripe/react-stripe-js": "^3.7.0",
"@stripe/stripe-js": "^7.5.0",
"@supabase/auth-js": "catalog:",
"@supabase/mcp-server-supabase": "^0.6.3",
"@supabase/mcp-utils": "^0.3.2",
"@supabase/pg-meta": "workspace:*",
"@supabase/realtime-js": "catalog:",
"@supabase/shared-types": "0.1.83",
"@supabase/sql-to-rest": "^0.1.6",
"@supabase/supabase-js": "catalog:",
"@tanstack/react-query": "^5.0.0",
"@tanstack/react-query-devtools": "^5.0.0",
"@tanstack/react-table": "^8.21.3",
"@tanstack/react-virtual": "^3.13.12",
"@types/d3-geo": "^3.1.0",
"@uidotdev/usehooks": "^2.4.1",
"@vercel/functions": "^2.1.0",
"@vitejs/plugin-react": "^4.3.4",
"@zip.js/zip.js": "^2.7.29",
"ai": "5.0.52",
"ai-commands": "workspace:*",
"awesome-debounce-promise": "^2.1.0",
"common": "workspace:*",
"common-tags": "^1.8.2",
"config": "workspace:*",
"cron-parser": "^4.9.0",
"cronstrue": "^2.50.0",
"crypto-js": "^4.2.0",
"dev-tools": "workspace:*",
"d3-geo": "^3.1.1",
"dayjs": "^1.11.10",
"dnd-core": "^16.0.1",
"file-saver": "^2.0.5",
"framer-motion": "^11.11.17",
"generate-password-browser": "^1.1.0",
"html-to-image": "^1.10.8",
"http-status": "^2.1.0",
"icons": "workspace:*",
"idb": "^8.0.2",
"immutability-helper": "^3.1.1",
"ip-num": "^1.5.1",
"json-logic-js": "^2.0.2",
"lodash": "catalog:",
"lucide-react": "^0.436.0",
"markdown-table": "^3.0.3",
"memoize-one": "^5.0.1",
"mime-db": "^1.53.0",
"monaco-editor": "0.52.2",
"next": "~16.0.0",
"next-themes": "^0.3.0",
"nuqs": "2.7.1",
"openai": "^4.75.1",
"openapi-fetch": "0.12.4",
"papaparse": "^5.3.1",
"path-to-regexp": "^8.0.0",
"pg-minify": "^1.6.3",
"randombytes": "^2.1.0",
"react": "catalog:",
"react-beautiful-dnd": "^13.1.0",
"react-contexify": "^5.0.0",
"react-data-grid": "7.0.0-beta.41",
"react-day-picker": "^9.11.1",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "catalog:",
"react-error-boundary": "^4.0.13",
"react-grid-layout": "^1.4.2",
"react-hook-form": "^7.45.0",
"react-inlinesvg": "^4.0.4",
"react-intersection-observer": "^9.5.3",
"react-markdown": "^8.0.3",
"react-resizable": "3.0.5",
"react-simple-maps": "4.0.0-beta.6",
"react-use": "^17.5.0",
"reactflow": "^11.10.1",
"recharts": "catalog:",
"remark-gfm": "^3.0.1",
"shared-data": "workspace:*",
"sonner": "^1.5.0",
"sql-formatter": "^15.0.0",
"sqlstring": "^2.3.2",
"streamdown": "^1.3.0",
"stripe-experiment-sync": "^1.0.19",
"tus-js-client": "^4.1.0",
"ui": "workspace:*",
"ui-patterns": "workspace:*",
"use-debounce": "^7.0.1",
"use-stick-to-bottom": "^1.1.1",
"uuid": "^9.0.1",
"valtio": "catalog:",
"yup": "^1.4.0",
"zod": "catalog:",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"@faker-js/faker": "^9.9.0",
"@graphql-codegen/cli": "5.0.5",
"@graphql-typed-document-node/core": "^3.2.0",
"@radix-ui/react-use-escape-keydown": "^1.0.3",
"@smithy/property-provider": "^4.0.4",
"@supabase/postgres-meta": "^0.64.4",
"@tailwindcss/container-queries": "^0.1.1",
"@testing-library/dom": "^10.0.0",
"@testing-library/jest-dom": "^6.6.0",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.0.0",
"@types/common-tags": "^1.8.1",
"@types/crypto-js": "^4.2.2",
"@types/file-saver": "^2.0.2",
"@types/json-logic-js": "^1.2.1",
"@types/lodash": "^4.14.172",
"@types/markdown-table": "^3.0.0",
"@types/mime-db": "^1.43.5",
"@types/node": "catalog:",
"@types/papaparse": "^5.3.1",
"@types/randombytes": "^2.0.3",
"@types/react": "catalog:",
"@types/react-beautiful-dnd": "^13.1.2",
"@types/react-datepicker": "^4.3.4",
"@types/react-dom": "catalog:",
"@types/react-grid-layout": "^1.3.0",
"@types/react-simple-maps": "^3.0.1",
"@types/recharts": "^1.8.23",
"@types/sqlstring": "^2.3.0",
"@types/uuid": "^8.3.4",
"@types/zxcvbn": "^4.4.1",
"@vitest/coverage-v8": "^3.2.0",
"@vitest/ui": "^3.2.0",
"api-types": "workspace:*",
"autoevals": "^0.0.131",
"braintrust": "^1.0.2",
"common": "workspace:*",
"config": "workspace:*",
"date-fns": "^2.30.0",
"eslint-config-supabase": "workspace:*",
"eslint-plugin-barrel-files": "^2.0.7",
"graphql-ws": "5.14.1",
"import-in-the-middle": "^2.0.0",
"jsdom-testing-mocks": "^1.13.1",
"libpg-query": "17.6.0",
"msw": "^2.3.0",
"next-router-mock": "^0.9.13",
"node-mocks-http": "^1.17.2",
"postcss": "^8.5.3",
"prettier": "3.2.4",
"raw-loader": "^4.0.2",
"require-in-the-middle": "^8.0.0",
"tailwindcss": "catalog:",
"tsx": "catalog:",
"typescript": "catalog:",
"vite": "catalog:",
"vite-tsconfig-paths": "^4.3.2",
"vitest": "catalog:"
}
}