feat(ntp): omnibar picker impression + upsell source telemetry (FE)

Add omnibar_modelPickerShown / omnibar_reasoningPickerShown notifications,
fired once when the user opens the model selector or reasoning-effort
picker (picker impressions). Add a `source` param ("model" | "reasoning")
to the existing omnibar_showSubscriptionUpsell / omnibar_showSubscriptionUpgrade
notifications so native can attribute the subscription funnel origin.

Frontend only. Native (macOS/Windows) must add the corresponding handlers
before this is shipped, so this lands on a dedicated branch pending native
coordination.

Author: moon0326

special-pages/pages/new-tab/app/omnibar/components/OmnibarProvider.js

@@ -14,6 +14,7 @@ import { OmnibarService } from '../omnibar.service.js';
  * @typedef {import('../../../types/new-tab.js').SubmitChatAction} SubmitChatAction
  * @typedef {import('../../../types/new-tab.js').GetOpenTabsResponse} GetOpenTabsResponse
  * @typedef {import('../../../types/new-tab.js').PageContext} PageContext
+ * @typedef {import('../../../types/new-tab.js').OmnibarPickerSource} OmnibarPickerSource
  * @typedef {import('../../service.hooks.js').State<null, OmnibarConfig>} State
  */
 
@@ -79,7 +80,15 @@ export const OmnibarContext = createContext({
     viewAllAiChats: () => {
         throw new Error('must implement');
     },
-    /** @type {(type?: 'subscribe' | 'upgrade') => void} */
+    /** @type {(picker: OmnibarPickerSource) => void} */
+    pickerShown: () => {
+        throw new Error('must implement');
+    },
+    /** @type {(picker: OmnibarPickerSource) => void} */
+    upsellShown: () => {
+        throw new Error('must implement');
+    },
+    /** @type {(type: 'subscribe' | 'upgrade' | undefined, source: OmnibarPickerSource) => void} */
     showUpsell: () => {
         throw new Error('must implement');
     },
@@ -235,10 +244,26 @@ export function OmnibarProvider(props) {
         [service],
     );
 
-    /** @type {(type?: 'subscribe' | 'upgrade') => void} */
+    /** @type {(picker: OmnibarPickerSource) => void} */
+    const pickerShown = useCallback(
+        (picker) => {
+            service.current?.pickerShown(picker);
+        },
+        [service],
+    );
+
+    /** @type {(picker: OmnibarPickerSource) => void} */
+    const upsellShown = useCallback(
+        (picker) => {
+            service.current?.upsellShown(picker);
+        },
+        [service],
+    );
+
+    /** @type {(type: 'subscribe' | 'upgrade' | undefined, source: OmnibarPickerSource) => void} */
     const showUpsell = useCallback(
-        (type) => {
-            service.current?.showUpsell(type);
+        (type, source) => {
+            service.current?.showUpsell(type, source);
         },
         [service],
     );
@@ -276,6 +301,8 @@ export function OmnibarProvider(props) {
                 onAiChats,
                 openAiChat,
                 viewAllAiChats,
+                pickerShown,
+                upsellShown,
                 showUpsell,
                 getOpenTabs,
                 getTabContent,

special-pages/pages/new-tab/app/omnibar/components/chat-tools/model-selector/ModelSelectorTool.js

@@ -12,12 +12,19 @@ import { ModelSelector } from './ModelSelector';
 
 export function ModelSelectorTool() {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
-    const { showUpsell } = useContext(OmnibarContext);
+    const { showUpsell, pickerShown, upsellShown } = useContext(OmnibarContext);
     const { selectedModel, aiModelSections, allModels, setSelectedModelId } = useSelectedModel();
 
+    // The upsell CTA renders only for a fully-gated section (mirrors ModelDropdown's `isUpsellSection`).
+    const hasUpsell = aiModelSections.some((section) => section.items.length > 0 && section.items.every((model) => !model.isEnabled));
+
     const selector = useModelSelector({
         allModels,
         onModelChange: setSelectedModelId,
+        onOpen: () => {
+            pickerShown('model');
+            if (hasUpsell) upsellShown('model');
+        },
     });
 
     if (aiModelSections.length === 0) return null;
@@ -27,7 +34,7 @@ export function ModelSelectorTool() {
             selector={selector}
             selectedModel={selectedModel}
             aiModelSections={aiModelSections}
-            onUpsell={showUpsell}
+            onUpsell={(type) => showUpsell(type, 'model')}
             ariaLabel={t('omnibar_modelSelectorLabel')}
         />
     );

special-pages/pages/new-tab/app/omnibar/components/chat-tools/model-selector/useModelSelector.js

@@ -10,9 +10,10 @@ import { useDropdown } from '../useDropdown';
  * @param {object} options
  * @param {AIModelItem[]} options.allModels
  * @param {(id: string) => void} [options.onModelChange] - Called when the user selects a model, to persist the choice
+ * @param {() => void} [options.onOpen] - Called when the dropdown opens, to report a picker impression
  */
-export function useModelSelector({ allModels, onModelChange }) {
-    const dropdown = useDropdown({ align: 'right' });
+export function useModelSelector({ allModels, onModelChange, onOpen }) {
+    const dropdown = useDropdown({ align: 'right', onOpen });
 
     /** @param {string} id */
     const selectModel = (id) => {

special-pages/pages/new-tab/app/omnibar/components/chat-tools/reasoning-picker/ReasoningPicker.js

@@ -25,13 +25,24 @@ import styles from './ReasoningPicker.module.css';
  * @param {ReasoningEffort|null} props.selectedEffort
  * @param {(effort: ReasoningEffort) => void} props.onSelect
  * @param {(type?: 'subscribe' | 'upgrade') => void} props.onUpsell
+ * @param {() => void} [props.onOpen] - Called when the dropdown opens, to report a picker impression
  * @param {string} props.ariaLabel
  * @param {string} props.buttonLabel
  * @param {string} props.tryForFreeLabel
  * @param {string} props.upgradeLabel
  */
-export function ReasoningPicker({ options, selectedEffort, onSelect, onUpsell, ariaLabel, buttonLabel, tryForFreeLabel, upgradeLabel }) {
-    const { isOpen, dropdownPos, buttonRef, dropdownRef, toggle, close } = useDropdown({ align: 'right' });
+export function ReasoningPicker({
+    options,
+    selectedEffort,
+    onSelect,
+    onUpsell,
+    onOpen,
+    ariaLabel,
+    buttonLabel,
+    tryForFreeLabel,
+    upgradeLabel,
+}) {
+    const { isOpen, dropdownPos, buttonRef, dropdownRef, toggle, close } = useDropdown({ align: 'right', onOpen });
 
     /** @param {{ restoreFocus: boolean }} opts */
     const handleClose = ({ restoreFocus }) => {

special-pages/pages/new-tab/app/omnibar/components/chat-tools/reasoning-picker/ReasoningPickerTool.js

@@ -37,7 +37,7 @@ function getReasoningIcon(id) {
 
 export function ReasoningPickerTool() {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
-    const { showUpsell } = useContext(OmnibarContext);
+    const { showUpsell, pickerShown, upsellShown } = useContext(OmnibarContext);
     const { reasoningEfforts, selectedEffort, setSelectedReasoningEffort } = useSelectedReasoningEffort();
 
     const options = reasoningEfforts.map((effort) => ({
@@ -53,14 +53,21 @@ export function ReasoningPickerTool() {
         return null;
     }
 
+    // The upsell badge renders for any gated (unavailable) option.
+    const hasUpsell = options.some((option) => option.status === 'unavailable');
+
     const selectedOption = options.find((option) => option.id === selectedEffort);
 
     return (
         <ReasoningPicker
             options={options}
             selectedEffort={selectedEffort}
             onSelect={setSelectedReasoningEffort}
-            onUpsell={showUpsell}
+            onUpsell={(type) => showUpsell(type, 'reasoning')}
+            onOpen={() => {
+                pickerShown('reasoning');
+                if (hasUpsell) upsellShown('reasoning');
+            }}
             ariaLabel={t('omnibar_reasoningPickerLabel')}
             buttonLabel={selectedOption?.name ?? t('omnibar_reasoningPickerLabel')}
             tryForFreeLabel={t('omnibar_reasoningTryForFree')}

special-pages/pages/new-tab/app/omnibar/components/chat-tools/useDropdown.js

@@ -53,8 +53,9 @@ function computePosition(buttonRect, cbRect, align) {
  *
  * @param {object} [options]
  * @param {'left' | 'right'} [options.align] - Horizontal alignment of the dropdown relative to the button. Defaults to 'left'.
+ * @param {() => void} [options.onOpen] - Invoked once each time the dropdown transitions from closed to open. Used to report picker-impression telemetry.
  */
-export function useDropdown({ align = 'left' } = {}) {
+export function useDropdown({ align = 'left', onOpen } = {}) {
     const [isOpen, setIsOpen] = useState(false);
     const [dropdownPos, setDropdownPos] = useState(/** @type {DropdownPosition|null} */ (null));
     const buttonRef = useRef(/** @type {HTMLButtonElement|null} */ (null));
@@ -78,6 +79,7 @@ export function useDropdown({ align = 'left' } = {}) {
         const cbRect = cb?.getBoundingClientRect() ?? null;
         setDropdownPos(computePosition(rect, cbRect, align));
         setIsOpen(true);
+        onOpen?.();
 
         /** @param {MouseEvent} e */
         const handleClickOutside = (e) => {

special-pages/pages/new-tab/app/omnibar/integration-tests/omnibar.spec.js

@@ -1759,7 +1759,27 @@ test.describe('omnibar widget', () => {
 
             await omnibar.modelUpsellButton().click();
 
-            await ntp.mocks.waitForCallCount({ method: 'omnibar_showSubscriptionUpsell', count: 1 });
+            await omnibar.expectMethodCalledWith('omnibar_showSubscriptionUpsell', { source: 'model' });
+        });
+
+        test('fires model-picker and upsell impressions when the model selector is opened', async ({ page }, workerInfo) => {
+            const ntp = NewtabPage.create(page, workerInfo);
+            const omnibar = new OmnibarPage(ntp);
+            await ntp.reducedMotion();
+
+            // Default mock: the advanced section is entirely gated, so the upsell CTA is visible on open.
+            await ntp.openPage({ additional: { omnibar: true, 'omnibar.enableAiChatTools': 'true' } });
+            await omnibar.ready();
+
+            await omnibar.aiTab().click();
+            await omnibar.expectMode('ai');
+
+            await omnibar.modelSelectorButton().click();
+
+            const calls = await ntp.mocks.waitForCallCount({ method: 'telemetryEvent', count: 2 });
+            const params = calls.map((call) => call.payload.params);
+            expect(params).toContainEqual({ attributes: { name: 'omnibar_picker', value: { picker: 'model' } } });
+            expect(params).toContainEqual({ attributes: { name: 'omnibar_upsell', value: { picker: 'model' } } });
         });
 
         test('does not show the upsell when all models are available', async ({ page }, workerInfo) => {
@@ -1777,6 +1797,12 @@ test.describe('omnibar widget', () => {
 
             await omnibar.modelSelectorButton().click();
             await expect(omnibar.modelUpsellButton()).toHaveCount(0);
+
+            // Picker impression still fires, but the upsell impression must not (no gated option visible).
+            const calls = await ntp.mocks.waitForCallCount({ method: 'telemetryEvent', count: 1 });
+            const params = calls.map((call) => call.payload.params);
+            expect(params).toContainEqual({ attributes: { name: 'omnibar_picker', value: { picker: 'model' } } });
+            expect(params).not.toContainEqual({ attributes: { name: 'omnibar_upsell', value: { picker: 'model' } } });
         });
     });
 
@@ -2042,7 +2068,7 @@ test.describe('omnibar widget', () => {
 
             await gatedOption.click();
 
-            await ntp.mocks.waitForCallCount({ method: 'omnibar_showSubscriptionUpsell', count: 1 });
+            await omnibar.expectMethodCalledWith('omnibar_showSubscriptionUpsell', { source: 'reasoning' });
         });
 
         test('an upgrade-gated reasoning-effort option shows "Upgrade" and opens the subscription upgrade', async ({
@@ -2071,7 +2097,33 @@ test.describe('omnibar widget', () => {
 
             await gatedOption.click();
 
-            await ntp.mocks.waitForCallCount({ method: 'omnibar_showSubscriptionUpgrade', count: 1 });
+            await omnibar.expectMethodCalledWith('omnibar_showSubscriptionUpgrade', { source: 'reasoning' });
+        });
+
+        test('fires reasoning-picker and upsell impressions when the reasoning picker is opened', async ({ page }, workerInfo) => {
+            const ntp = NewtabPage.create(page, workerInfo);
+            const omnibar = new OmnibarPage(ntp);
+            await ntp.reducedMotion();
+
+            // claude-haiku-4-5 has a gated 'extended' effort, so the upsell CTA is visible on open.
+            await ntp.openPage({
+                additional: {
+                    omnibar: true,
+                    'omnibar.enableAiChatTools': 'true',
+                    'omnibar.selectedModelId': 'claude-haiku-4-5',
+                },
+            });
+            await omnibar.ready();
+
+            await omnibar.aiTab().click();
+            await omnibar.expectMode('ai');
+
+            await omnibar.reasoningPickerButton().click();
+
+            const calls = await ntp.mocks.waitForCallCount({ method: 'telemetryEvent', count: 2 });
+            const params = calls.map((call) => call.payload.params);
+            expect(params).toContainEqual({ attributes: { name: 'omnibar_picker', value: { picker: 'reasoning' } } });
+            expect(params).toContainEqual({ attributes: { name: 'omnibar_upsell', value: { picker: 'reasoning' } } });
         });
     });
 

special-pages/pages/new-tab/app/omnibar/mocks/omnibar.mock-transport.js

@@ -219,6 +219,7 @@ export function omnibarMockTransport() {
                 case 'omnibar_openSuggestion':
                 case 'omnibar_submitSearch':
                 case 'omnibar_submitChat':
+                case 'telemetryEvent':
                     console.warn('notification (no-op in mock)', msg.method, msg.params);
                     break;
                 case 'omnibar_showSubscriptionUpsell':

special-pages/pages/new-tab/app/omnibar/omnibar.md

@@ -257,6 +257,41 @@ title: Omnibar Widget
 }
 ```
 
+### Picker impressions — `telemetryEvent`
+Impression telemetry is sent via the shared `telemetryEvent` notification (not a bespoke message), so native only needs to add a name case + pixel mapping. Fired once per open (closed→open transition). Native maps `value.picker` to the platform-specific subscription funnel origin and fires the impression pixel.
+
+- **Picker shown** — `{ attributes: { name: "omnibar_picker", value: { picker: "model" | "reasoning" } } }`, sent when the model or reasoning picker opens.
+- **Upsell shown** — `{ attributes: { name: "omnibar_upsell", value: { picker: "model" | "reasoning" } } }`, sent when the conditional subscription upsell CTA is visible on open (only when a gated option exists).
+
+Example payload:
+```json
+{
+   "attributes": { "name": "omnibar_picker", "value": { "picker": "model" } }
+}
+```
+
+### `omnibar_showSubscriptionUpsell`
+- {@link "NewTab Messages".OmnibarShowSubscriptionUpsellNotification}
+- Sent when the user taps "Try for free" on a subscription-gated model or reasoning-effort option.
+- requires `source` — `"model"` or `"reasoning"`, identifying the picker the upsell was triggered from. Native maps `source` to the subscription funnel origin (and infers `flow_type`); the frontend does not send origin or flow information.
+- example payload:
+```json
+{
+   "source": "model"
+}
+```
+
+### `omnibar_showSubscriptionUpgrade`
+- {@link "NewTab Messages".OmnibarShowSubscriptionUpgradeNotification}
+- Sent when a subscriber taps "Upgrade" on a model or reasoning-effort option gated behind a higher tier.
+- requires `source` — `"model"` or `"reasoning"`, identifying the picker the upgrade was triggered from. Native maps `source` to the subscription funnel origin; the frontend does not send origin or flow information.
+- example payload:
+```json
+{
+   "source": "reasoning"
+}
+```
+
 ## Suggestion Types
 
 The omnibar supports various types of suggestions:

special-pages/pages/new-tab/app/omnibar/omnibar.service.js

@@ -12,6 +12,7 @@ import { OmnibarAiChatsService } from './omnibar.ai-chats.service.js';
  * @typedef {import("../../types/new-tab.js").SubmitChatAction} SubmitChatAction
  * @typedef {import("../../types/new-tab.js").GetOpenTabsResponse} GetOpenTabsResponse
  * @typedef {import("../../types/new-tab.js").PageContext} PageContext
+ * @typedef {import("../../types/new-tab.js").OmnibarPickerSource} OmnibarPickerSource
  */
 
 export class OmnibarService {
@@ -213,31 +214,53 @@ export class OmnibarService {
         this.ntp.messaging.notify('omnibar_viewAllAIChats', params);
     }
 
+    /**
+     * Report that the user opened a chat-tool picker (impression), via the shared
+     * `telemetryEvent` message. Native maps `picker` to the platform-specific
+     * subscription funnel origin and fires the picker-impression pixel.
+     * @param {OmnibarPickerSource} picker
+     */
+    pickerShown(picker) {
+        this.ntp.telemetryEvent({ attributes: { name: 'omnibar_picker', value: { picker } } });
+    }
+
+    /**
+     * Report that the conditional subscription upsell CTA became visible inside a picker
+     * (impression), via the shared `telemetryEvent` message.
+     * @param {OmnibarPickerSource} picker
+     */
+    upsellShown(picker) {
+        this.ntp.telemetryEvent({ attributes: { name: 'omnibar_upsell', value: { picker } } });
+    }
+
     /**
      * Ask native to present the subscription upsell (e.g. when the user taps
      * "Try for free" on a gated model or reasoning-effort option).
+     * @param {OmnibarPickerSource} source - The picker the upsell was triggered from.
      */
-    showSubscriptionUpsell() {
-        this.ntp.messaging.notify('omnibar_showSubscriptionUpsell', {});
+    showSubscriptionUpsell(source) {
+        this.ntp.messaging.notify('omnibar_showSubscriptionUpsell', { source });
     }
 
     /**
      * Ask native to present the subscription upgrade flow (e.g. when a subscriber
      * taps "Upgrade" on a model or reasoning-effort option gated behind a higher tier).
+     * @param {OmnibarPickerSource} source - The picker the upgrade was triggered from.
      */
-    showSubscriptionUpgrade() {
-        this.ntp.messaging.notify('omnibar_showSubscriptionUpgrade', {});
+    showSubscriptionUpgrade(source) {
+        this.ntp.messaging.notify('omnibar_showSubscriptionUpgrade', { source });
     }
 
     /**
      * Route a gated item's upsell to the correct native flow.
-     * @param {'subscribe' | 'upgrade'} [type]
+     * @param {'subscribe' | 'upgrade' | undefined} type
+     * @param {OmnibarPickerSource} source - The picker the upsell was triggered from.
      */
-    showUpsell(type) {
+    showUpsell(type, source) {
         if (type === 'upgrade') {
-            this.showSubscriptionUpgrade();
+            this.showSubscriptionUpgrade(source);
         } else {
-            this.showSubscriptionUpsell();
+            this.showSubscriptionUpsell(source);
         }
     }