@karimov-labs/backstage-plugin-devxp

A Backstage frontend plugin that provides a Developer Intelligence dashboard for managing masked developer identities. It lets platform teams upload a list of real developer names, store SHA-256–based pseudonyms, and look up or verify masked identities — all without exposing real names to third-party analytics tools.

This plugin is the UI counterpart to @karimov-labs/backstage-plugin-devxp-backend, which must be installed alongside it.

Features

• Dashboard tab — shows configuration health (salt, API token, endpoint, project ID) and total mapping count, plus an inline unmask tester
• Settings tab — upload a plain-text CSV of real developer names to generate and store masked hashes; browse and delete individual mappings
• Hashing algorithm matches the dev-xp-analyzer tool: SHA-256(salt + realName), first 16 hex chars

Requirements

Installation

1. Install the packages

# yarn (Backstage default)
yarn workspace app add @karimov-labs/backstage-plugin-devxp
yarn workspace backend add @karimov-labs/backstage-plugin-devxp-backend

# npm
npm install @karimov-labs/backstage-plugin-devxp
npm install @karimov-labs/backstage-plugin-devxp-backend

2. Add the frontend plugin to your app

Edit packages/app/src/App.tsx:

import devxpPlugin from '@karimov-labs/backstage-plugin-devxp';

export default createApp({
  features: [
    // ... other plugins
    devxpPlugin,
  ],
});

3. Add a sidebar navigation item

In your sidebar component (e.g. packages/app/src/modules/nav/Sidebar.tsx), add:

import AssessmentIcon from '@material-ui/icons/Assessment';

// inside your sidebar menu group:
<SidebarItem icon={AssessmentIcon} to="/devxp" text="Dev Intelligence" />

4. Register the backend plugin

Edit packages/backend/src/index.ts:

backend.add(import('@karimov-labs/backstage-plugin-devxp-backend'));

5. Configure app-config.yaml

devxp:
  # Salt used for SHA-256 hashing — must match the salt used in dev-xp-analyzer
  salt: ${DEVXP_SALT}

  # Whether developer names are masked in the analytics tool
  masked: true

  # dev-xp-analyzer API credentials (optional — only needed if calling the analyzer API)
  apiToken: ${DEVXP_API_TOKEN}
  apiEndpoint: ${DEVXP_API_ENDPOINT}
  projectId: ${DEVXP_PROJECT_ID}

Set the corresponding environment variables before starting Backstage:

export DEVXP_SALT="your-secret-salt"
export DEVXP_API_TOKEN="your-api-token"       # optional
export DEVXP_API_ENDPOINT="https://..."        # optional
export DEVXP_PROJECT_ID="your-project-id"     # optional

Security note: The salt and API token are consumed exclusively by the backend and are never sent to the browser.

Usage

Navigate to /devxp in your Backstage instance.

Dashboard tab

Settings tab

API

The frontend communicates with the backend via the Backstage discovery API at /api/devxp/. See the @karimov-labs/backstage-plugin-devxp-backend README for full endpoint documentation.

License

Apache-2.0