feat: add InternalClientProvider for Toolbar flags and analytics

.github/actions/ci/action.yml

@@ -34,10 +34,10 @@ runs:
       shell: bash
       run: pnpm demo:build
       env:
-        VITE_LD_CLIENT_SIDE_ID: 68e6a6a8d57c6b098d135c94
-        VITE_LD_BASE_URL: https://app.launchdarkly.com
-        VITE_LD_STREAM_URL: https://clientstream.launchdarkly.com
-        VITE_LD_EVENTS_URL: https://events.launchdarkly.com
+        TOOLBAR_INTERNAL_CLIENT_ID: ${{ env.TOOLBAR_INTERNAL_CLIENT_ID }}
+        TOOLBAR_INTERNAL_BASE_URL: ${{ env.TOOLBAR_INTERNAL_BASE_URL }}
+        TOOLBAR_INTERNAL_STREAM_URL: ${{ env.TOOLBAR_INTERNAL_STREAM_URL }}
+        TOOLBAR_INTERNAL_EVENTS_URL: ${{ env.TOOLBAR_INTERNAL_EVENTS_URL }}
         VITE_LD_DEV_SERVER_URL: http://localhost:8765
         VITE_LD_DEV_SERVER_PROJECT_KEY: developer-toolbar-sandbox
 
@@ -89,10 +89,10 @@ runs:
       id: playwright
       run: pnpm test:e2e:ci
       env:
-        VITE_LD_CLIENT_SIDE_ID: 68e6a6a8d57c6b098d135c94
-        VITE_LD_BASE_URL: https://app.launchdarkly.com
-        VITE_LD_STREAM_URL: https://clientstream.launchdarkly.com
-        VITE_LD_EVENTS_URL: https://events.launchdarkly.com
+        TOOLBAR_INTERNAL_CLIENT_ID: ${{ env.TOOLBAR_INTERNAL_CLIENT_ID }}
+        TOOLBAR_INTERNAL_BASE_URL: ${{ env.TOOLBAR_INTERNAL_BASE_URL }}
+        TOOLBAR_INTERNAL_STREAM_URL: ${{ env.TOOLBAR_INTERNAL_STREAM_URL }}
+        TOOLBAR_INTERNAL_EVENTS_URL: ${{ env.TOOLBAR_INTERNAL_EVENTS_URL }}
         VITE_LD_DEV_SERVER_URL: http://localhost:8765
         VITE_LD_DEV_SERVER_PROJECT_KEY: developer-toolbar-sandbox
 

.github/workflows/ci.yml

@@ -15,3 +15,8 @@ jobs:
           fetch-depth: 0 # If you only need the current version remove this line.
 
       - uses: ./.github/actions/ci
+        env:
+          TOOLBAR_INTERNAL_CLIENT_ID: ${{ vars.TOOLBAR_INTERNAL_CLIENT_ID }}
+          TOOLBAR_INTERNAL_BASE_URL: ${{ vars.TOOLBAR_INTERNAL_BASE_URL }}
+          TOOLBAR_INTERNAL_STREAM_URL: ${{ vars.TOOLBAR_INTERNAL_STREAM_URL }}
+          TOOLBAR_INTERNAL_EVENTS_URL: ${{ vars.TOOLBAR_INTERNAL_EVENTS_URL }}

.github/workflows/manual-publish.yml

@@ -24,6 +24,11 @@ jobs:
         # Build using the same steps from CI.
         name: Build and Test
         uses: ./.github/actions/ci
+        env:
+          TOOLBAR_INTERNAL_CLIENT_ID: ${{ vars.TOOLBAR_INTERNAL_CLIENT_ID }}
+          TOOLBAR_INTERNAL_BASE_URL: ${{ vars.TOOLBAR_INTERNAL_BASE_URL }}
+          TOOLBAR_INTERNAL_STREAM_URL: ${{ vars.TOOLBAR_INTERNAL_STREAM_URL }}
+          TOOLBAR_INTERNAL_EVENTS_URL: ${{ vars.TOOLBAR_INTERNAL_EVENTS_URL }}
 
       - uses: launchdarkly/gh-actions/actions/[email protected]
         name: 'Get npm token'

.github/workflows/release-please.yml

@@ -35,6 +35,11 @@ jobs:
 
       - uses: ./.github/actions/ci
         if: ${{ fromJson(steps.release.outputs.releases_created) }}
+        env:
+          TOOLBAR_INTERNAL_CLIENT_ID: ${{ vars.TOOLBAR_INTERNAL_CLIENT_ID }}
+          TOOLBAR_INTERNAL_BASE_URL: ${{ vars.TOOLBAR_INTERNAL_BASE_URL }}
+          TOOLBAR_INTERNAL_STREAM_URL: ${{ vars.TOOLBAR_INTERNAL_STREAM_URL }}
+          TOOLBAR_INTERNAL_EVENTS_URL: ${{ vars.TOOLBAR_INTERNAL_EVENTS_URL }}
 
       - uses: ./.github/actions/publish
         if: ${{ fromJson(steps.release.outputs.releases_created) }}

CONTRIBUTING.md

@@ -60,6 +60,20 @@ LaunchDarkly Client-Side ID of the project/environment you would like to test ag
 The other values in `env.example` are most likely fine as-is. If you are planning on developing features for/testing using
 a local dev-server, ensure you also update `VITE_LD_DEV_SERVER_URL` and `VITE_LD_DEV_SERVER_URL_PROJECT_KEY` to valid values.
 
+### Toolbar Internal Configuration (Optional)
+
+The toolbar package has its own internal LaunchDarkly client for toolbar feature flags and analytics. This is separate from the demo application configuration:
+
+1. Navigate to the toolbar package directory: `packages/toolbar/`
+2. Copy the values from `.env.example` into a new `.env` (or `.env.local`) file in that same directory
+3. Configure the following environment variables:
+   - `TOOLBAR_INTERNAL_CLIENT_ID` - Your LaunchDarkly Client-Side ID for toolbar features (required)
+   - `TOOLBAR_INTERNAL_BASE_URL` - LaunchDarkly base URL (defaults to `https://app.launchdarkly.com`)
+   - `TOOLBAR_INTERNAL_STREAM_URL` - LaunchDarkly stream URL (defaults to `https://clientstream.launchdarkly.com`)
+   - `TOOLBAR_INTERNAL_EVENTS_URL` - LaunchDarkly events URL (defaults to `https://events.launchdarkly.com`)
+
+**Note:** This configuration is optional and only needed if you're developing or testing toolbar-specific feature flags. If not provided, the toolbar's internal client will not be initialized, and the toolbar will function normally without it. The URL configurations are only needed if you're using a custom LaunchDarkly instance.
+
 ## Toolbar Integration Modes
 
 The LaunchDarkly Toolbar supports two integration modes:

packages/toolbar/rslib.config.cdn.ts

@@ -1,6 +1,10 @@
 import { pluginReact } from '@rsbuild/plugin-react';
 import { defineConfig } from '@rslib/core';
 import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
+import { loadEnv } from '@rsbuild/core';
+
+// Load environment variables with TOOLBAR_ prefix from .env files
+const { publicVars } = loadEnv({ prefixes: ['TOOLBAR_'] });
 
 export default defineConfig({
   source: {
@@ -9,6 +13,8 @@ export default defineConfig({
     },
     include: ['./src/**/*.ts', './src/**/*.tsx'],
     exclude: ['./src/**/*.test.*', './src/**/*.stories.*'],
+    // Inject TOOLBAR_ prefixed env vars into the build
+    define: publicVars,
   },
   lib: [
     // IIFE build for CDN

packages/toolbar/rslib.config.ts

@@ -1,5 +1,9 @@
 import { pluginReact } from '@rsbuild/plugin-react';
 import { defineConfig } from '@rslib/core';
+import { loadEnv } from '@rsbuild/core';
+
+// Load environment variables with TOOLBAR_ prefix from .env files
+const { publicVars } = loadEnv({ prefixes: ['TOOLBAR_'] });
 
 export default defineConfig({
   source: {
@@ -8,6 +12,8 @@ export default defineConfig({
     },
     include: ['./src/**/*.ts', './src/**/*.tsx'],
     exclude: ['./src/**/*.test.*', './src/**/*.stories.*'],
+    // Inject TOOLBAR_ prefixed env vars into the build
+    define: publicVars,
   },
   lib: [
     // ESM build for NPM

packages/toolbar/src/core/tests/ExpandedToolbarContent.test.tsx

@@ -6,6 +6,7 @@ import { DevServerProvider } from '../ui/Toolbar/context/DevServerProvider';
 import { ToolbarUIProvider } from '../ui/Toolbar/context/ToolbarUIProvider';
 import { SearchProvider } from '../ui/Toolbar/context/SearchProvider';
 import { AnalyticsProvider } from '../ui/Toolbar/context/AnalyticsProvider';
+import { InternalClientProvider } from '../ui/Toolbar/context/InternalClientProvider';
 import { IEventInterceptionPlugin, IFlagOverridePlugin } from '../../types';
 
 // Create mock instances that we can access in tests
@@ -91,9 +92,11 @@ function TestWrapper({
           pollIntervalInMs: 5000,
         }}
       >
-        <AnalyticsProvider>
-          <SearchProvider>{children}</SearchProvider>
-        </AnalyticsProvider>
+        <InternalClientProvider>
+          <AnalyticsProvider>
+            <SearchProvider>{children}</SearchProvider>
+          </AnalyticsProvider>
+        </InternalClientProvider>
       </DevServerProvider>
     </ToolbarUIProvider>
   );
@@ -115,6 +118,8 @@ describe('ExpandedToolbarContent - User Interaction Flows', () => {
     onTabChange: vi.fn(),
     setSearchIsExpanded: vi.fn(),
     defaultActiveTab: 'settings' as const,
+    optInToNewFeatures: false,
+    onToggleOptInToNewFeatures: vi.fn(),
   };
 
   const createMockFlagOverridePlugin = (): IFlagOverridePlugin & {