@e-llm-studio/click-tracking

Shared protocol, React helpers, and host-side delivery tools for click and functionality tracking. Authentication, runtime URLs, and product-specific event catalogs are injected by the consuming application.

import { RemoteTracker, useRemoteTracker } from '@e-llm-studio/click-tracking/react';

function Content() {
  const tracker = useRemoteTracker();
  return <button {...tracker.attributes('save_clicked')}>Save</button>;
}

export function Mode() {
  return <RemoteTracker mode="Example Mode"><Content /></RemoteTracker>;
}

By default, events use window.hostMicroFrontendApi.dispatch. A remote can instead pass an explicit dispatch function or dispatch-capable object to RemoteTracker/createRemoteTracker.

Keep mode and feature names in the consuming application. Lifecycle outcomes should use metadata such as { status: 'started' | 'completed' | 'failed' } rather than separate transport implementations.

Host applications and VS Code webviews

The /host entry point contains the IndexedDB adapter, queue, activity tracking, aligned publisher, API payload builder, and feature API client. It does not import CW Core modules.

import {
  HostClickTracker,
  createHostTrackingStore,
  createIndexedDbTrackingStorage,
  createTrackingDelivery,
} from '@e-llm-studio/click-tracking/host';

const deliver = createTrackingDelivery({
  endpoint: () => `${runtimeApiUrl}/segment_click_analytics/v1/submit-ui-clicks`,
  request: extensionApiRequest,
  getUserEmail: () => currentUser.email,
  resolveMode: resolveRegisteredModeAndFeatures,
});

const store = createHostTrackingStore({
  defaultMode: 'vscode-extension',
  storage: createIndexedDbTrackingStorage({ database: 'extension-click-tracking' }),
  deliver,
});

export const App = () => (
  <HostClickTracker store={store} eventNames={['chat_used', 'file_opened']}>
    <ExtensionLayout />
  </HostClickTracker>
);

Mark the chat textarea with data-cw-track="chat_used", or call store.getState().track(...) for actions such as opening a file in the right pane.