@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.2

package/src/__tests__/components/AppTopBar.test.ts

@@ -5,25 +5,23 @@ import { createPinia } from 'pinia'
 import AppTopBar from '../../components/AppTopBar.vue'
 import ExperimentPopover from '../../components/ExperimentPopover.vue'
 import ExperimentSelectorModal from '../../components/ExperimentSelectorModal.vue'
-import { usePlatformContext } from '../../composables/usePlatformContext'
+import { usePlatform } from '../../composables/usePlatform'
 import { APP_EXPERIMENT_KEY, type AppExperimentState } from '../../composables/useAppExperiment'
 import { defineControlModel, defineControls } from '../../composables/useControlSchema'
 import ThemeToggle from '../../components/ThemeToggle.vue'
 import SettingsModal from '../../components/SettingsModal.vue'
 import type { TopBarSettingsConfig } from '../../types/components'
 
-// Mock the usePlatformContext composable
-vi.mock('../../composables/usePlatformContext', () => ({
-  usePlatformContext: vi.fn(() => ({
-    isIntegrated: computed(() => false),
-    context: ref({ isIntegrated: false, theme: 'system' }),
+// Mock the usePlatform composable
+vi.mock('../../composables/usePlatform', () => ({
+  usePlatform: vi.fn(() => ({
+    integrated: computed(() => false),
+    isAdmin: computed(() => true),
+    can: () => true,
     plugin: computed(() => undefined),
     user: computed(() => undefined),
     theme: computed(() => 'system' as const),
     features: computed(() => undefined),
-    navigate: vi.fn(),
-    notify: vi.fn(),
-    sendToPlatform: vi.fn(),
   })),
 }))
 
@@ -117,19 +115,19 @@ describe('AppTopBar', () => {
     })
   })
 
-  describe('showThemeToggle prop', () => {
-    it('should not render ThemeToggle when showThemeToggle is false', () => {
+  describe('spec.themeToggle', () => {
+    it('should not render ThemeToggle when spec.themeToggle is false', () => {
       const wrapper = createWrapper({
+        spec: { themeToggle: false },
         title: 'Test App',
-        showThemeToggle: false,
       })
       expect(wrapper.findComponent(ThemeToggle).exists()).toBe(false)
     })
 
-    it('should render ThemeToggle when showThemeToggle is true', () => {
+    it('should render ThemeToggle when spec.themeToggle is true', () => {
       const wrapper = createWrapper({
+        spec: { themeToggle: true },
         title: 'Test App',
-        showThemeToggle: true,
       })
       const themeToggle = wrapper.findComponent(ThemeToggle)
       expect(themeToggle.exists()).toBe(true)
@@ -137,8 +135,8 @@ describe('AppTopBar', () => {
 
     it('should pass size="sm" to ThemeToggle', () => {
       const wrapper = createWrapper({
+        spec: { themeToggle: true },
         title: 'Test App',
-        showThemeToggle: true,
       })
       const themeToggle = wrapper.findComponent(ThemeToggle)
       expect(themeToggle.props('size')).toBe('sm')
@@ -146,36 +144,48 @@ describe('AppTopBar', () => {
 
     it('should render ThemeToggle in right section', () => {
       const wrapper = createWrapper({
+        spec: { themeToggle: true },
         title: 'Test App',
-        showThemeToggle: true,
       })
       const rightSection = wrapper.find('.mint-topbar__right')
       expect(rightSection.findComponent(ThemeToggle).exists()).toBe(true)
     })
   })
 
-  describe('showSettings prop', () => {
-    it('should not render settings button when showSettings is false', () => {
+  describe('spec.settings', () => {
+    it('should not render settings button when spec.settings is false', () => {
       const wrapper = createWrapper({
+        spec: { settings: false },
         title: 'Test App',
-        showSettings: false,
       })
       expect(wrapper.find('.mint-topbar__settings-btn').exists()).toBe(false)
     })
 
-    it('should render settings button when showSettings is true', () => {
+    it('should render settings button when spec.settings is set', () => {
       const wrapper = createWrapper({
+        spec: { settings: {} },
         title: 'Test App',
-        showSettings: true,
       })
       const settingsBtn = wrapper.find('.mint-topbar__settings-btn')
       expect(settingsBtn.exists()).toBe(true)
     })
 
+    it('should follow a spec.settings getter', async () => {
+      const canConfigure = ref(true)
+      const wrapper = createWrapper({
+        spec: { settings: () => (canConfigure.value ? {} : false) },
+        title: 'Test App',
+      })
+      canConfigure.value = false
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('.mint-topbar__settings-btn').exists()).toBe(false)
+    })
+
     it('should render SettingsModal after settings is opened', async () => {
       const wrapper = createWrapper({
+        spec: { settings: {} },
         title: 'Test App',
-        showSettings: true,
       })
       expect(wrapper.findComponent(SettingsModal).exists()).toBe(false)
 
@@ -185,8 +195,8 @@ describe('AppTopBar', () => {
 
     it('should have aria-label on settings button', () => {
       const wrapper = createWrapper({
+        spec: { settings: {} },
         title: 'Test App',
-        showSettings: true,
       })
       const settingsBtn = wrapper.find('.mint-topbar__settings-btn')
       expect(settingsBtn.attributes('aria-label')).toBe('Open settings')
@@ -194,8 +204,8 @@ describe('AppTopBar', () => {
 
     it('should render settings icon SVG', () => {
       const wrapper = createWrapper({
+        spec: { settings: {} },
         title: 'Test App',
-        showSettings: true,
       })
       const settingsBtn = wrapper.find('.mint-topbar__settings-btn')
       const icon = settingsBtn.find('.mint-topbar__settings-icon')
@@ -207,34 +217,33 @@ describe('AppTopBar', () => {
   describe('settings button interaction', () => {
     it('should open SettingsModal when settings button is clicked', async () => {
       const wrapper = createWrapper({
+        spec: { settings: {} },
         title: 'Test App',
-        showSettings: true,
       })
 
       const settingsModal = await openSettingsModal(wrapper)
-      expect(settingsModal.props('modelValue')).toBe(true)
+      expect(settingsModal.props('open')).toBe(true)
     })
 
     it('should not mount SettingsModal while closed', () => {
       const wrapper = createWrapper({
+        spec: { settings: {} },
         title: 'Test App',
-        showSettings: true,
       })
 
       expect(wrapper.findComponent(SettingsModal).exists()).toBe(false)
     })
   })
 
-  describe('settingsConfig prop', () => {
+  describe('spec.settings config', () => {
     it('should pass title to SettingsModal', async () => {
       const settingsConfig: TopBarSettingsConfig = {
         title: 'Custom Settings',
       }
 
       const wrapper = createWrapper({
+        spec: { settings: settingsConfig },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig,
       })
 
       const settingsModal = await openSettingsModal(wrapper)
@@ -250,9 +259,8 @@ describe('AppTopBar', () => {
       }
 
       const wrapper = createWrapper({
+        spec: { settings: settingsConfig },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig,
       })
 
       const settingsModal = await openSettingsModal(wrapper)
@@ -261,12 +269,13 @@ describe('AppTopBar', () => {
 
     it('should normalize shorthand settings tabs for SettingsModal', async () => {
       const wrapper = createWrapper({
-        title: 'Test App',
-        showSettings: true,
-        settingsConfig: {
-          tabs: ['General', 'Advanced'],
-          showAppearance: false,
+        spec: {
+          settings: {
+            tabs: ['General', 'Advanced'],
+            showAppearance: false,
+          },
         },
+        title: 'Test App',
       })
 
       const settingsModal = await openSettingsModal(wrapper)
@@ -301,21 +310,22 @@ describe('AppTopBar', () => {
       }
       const settingsConfig: TopBarSettingsConfig = {
         showAppearance: false,
-        schema,
+        spec: schema,
         values: { threshold: 0.25, method: 'linear', externalContext: 'experiment-1' },
       }
 
       const wrapper = createWrapper({
+        spec: { settings: settingsConfig },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig,
       })
 
       await openSettingsModal(wrapper)
       await wrapper.setProps({
-        settingsConfig: {
-          ...settingsConfig,
-          values: { threshold: 0.75, method: 'logistic', externalContext: 'experiment-2' },
+        spec: {
+          settings: {
+            ...settingsConfig,
+            values: { threshold: 0.75, method: 'logistic', externalContext: 'experiment-2' },
+          },
         },
       })
       await waitForAsyncComponents(wrapper)
@@ -324,7 +334,7 @@ describe('AppTopBar', () => {
       expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('logistic')
     })
 
-    it('should render compact controls in SettingsModal', async () => {
+    it('should pass a control model built from controls to SettingsModal', async () => {
       const controls = defineControls({
         threshold: {
           label: 'Threshold',
@@ -333,19 +343,19 @@ describe('AppTopBar', () => {
           sectionLabel: 'Parameters',
         },
       })
+      const model = defineControlModel({ controls })
       const settingsConfig: TopBarSettingsConfig = {
         showAppearance: false,
-        controls,
+        spec: model,
       }
 
       const wrapper = createWrapper({
+        spec: { settings: settingsConfig },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig,
       })
 
       const settingsModal = await openSettingsModal(wrapper)
-      expect(settingsModal.props('controls')).toStrictEqual(controls)
+      expect(settingsModal.props('spec')).toStrictEqual(model)
       expect(wrapper.text()).toContain('Threshold')
       expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
     })
@@ -363,17 +373,16 @@ describe('AppTopBar', () => {
       })
       const settingsConfig: TopBarSettingsConfig = {
         showAppearance: false,
-        model,
+        spec: model,
       }
 
       const wrapper = createWrapper({
+        spec: { settings: settingsConfig },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig,
       })
 
       const settingsModal = await openSettingsModal(wrapper)
-      expect(settingsModal.props('model')).toStrictEqual(model)
+      expect(settingsModal.props('spec')).toStrictEqual(model)
       expect(wrapper.text()).toContain('Threshold')
       expect((wrapper.find('input').element as HTMLInputElement).value).toBe('0.25')
     })
@@ -384,9 +393,8 @@ describe('AppTopBar', () => {
       }
 
       const wrapper = createWrapper({
+        spec: { settings: settingsConfig },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig,
       })
 
       const settingsModal = await openSettingsModal(wrapper)
@@ -399,9 +407,8 @@ describe('AppTopBar', () => {
       }
 
       const wrapper = createWrapper({
+        spec: { settings: settingsConfig },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig,
       })
 
       const settingsModal = await openSettingsModal(wrapper)
@@ -410,9 +417,8 @@ describe('AppTopBar', () => {
 
     it('should default showAppearance to true when not specified', async () => {
       const wrapper = createWrapper({
+        spec: { settings: {} },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig: {},
       })
 
       const settingsModal = await openSettingsModal(wrapper)
@@ -425,9 +431,8 @@ describe('AppTopBar', () => {
       }
 
       const wrapper = createWrapper({
+        spec: { settings: settingsConfig },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig,
       })
 
       const settingsModal = await openSettingsModal(wrapper)
@@ -436,8 +441,8 @@ describe('AppTopBar', () => {
 
     it('should use default size when not specified', async () => {
       const wrapper = createWrapper({
+        spec: { settings: {} },
         title: 'Test App',
-        showSettings: true,
       })
 
       const settingsModal = await openSettingsModal(wrapper)
@@ -453,9 +458,8 @@ describe('AppTopBar', () => {
       }
 
       const wrapper = createWrapper({
+        spec: { settings: settingsConfig },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig,
       }, {
         'settings-tab-general': '<div class="custom-tab-content">Custom General Tab</div>',
       })
@@ -466,12 +470,13 @@ describe('AppTopBar', () => {
 
     it('should forward shorthand settings-tab slots to SettingsModal', async () => {
       const wrapper = createWrapper({
-        title: 'Test App',
-        showSettings: true,
-        settingsConfig: {
-          tabs: ['General'],
-          showAppearance: false,
+        spec: {
+          settings: {
+            tabs: ['General'],
+            showAppearance: false,
+          },
         },
+        title: 'Test App',
       }, {
         'settings-tab-General': '<div>General Content</div>',
       })
@@ -489,9 +494,8 @@ describe('AppTopBar', () => {
       }
 
       const wrapper = createWrapper({
+        spec: { settings: settingsConfig },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig,
       }, {
         'settings-tab-general': '<div>General Content</div>',
         'settings-tab-advanced': '<div>Advanced Content</div>',
@@ -504,8 +508,8 @@ describe('AppTopBar', () => {
 
     it('should forward settings-appearance slot', async () => {
       const wrapper = createWrapper({
+        spec: { settings: {} },
         title: 'Test App',
-        showSettings: true,
       }, {
         'settings-appearance': '<div class="custom-appearance">Custom Appearance</div>',
       })
@@ -515,25 +519,36 @@ describe('AppTopBar', () => {
     })
   })
 
-  describe('showStandaloneLabel prop', () => {
-    it('should show standalone badge when showStandaloneLabel is true (default)', () => {
+  describe('spec.standaloneLabel visibility', () => {
+    it('should show standalone badge by default', () => {
       const wrapper = createWrapper({
         title: 'Test App',
-        showStandaloneLabel: true,
       })
       expect(wrapper.find('.mint-topbar__standalone-badge').exists()).toBe(true)
     })
 
-    it('should hide standalone badge when showStandaloneLabel is false', () => {
+    it('should hide standalone badge when spec.standaloneLabel is false', () => {
       const wrapper = createWrapper({
+        spec: { standaloneLabel: false },
         title: 'Test App',
-        showStandaloneLabel: false,
+      })
+      expect(wrapper.find('.mint-topbar__standalone-badge').exists()).toBe(false)
+    })
+
+    it('should hide standalone badge when spec.standaloneLabel is false and an app experiment is provided', () => {
+      const wrapper = mount(AppTopBar, {
+        props: { title: 'Test App', spec: { standaloneLabel: false } },
+        global: {
+          plugins: [createPinia()],
+          provide: { [APP_EXPERIMENT_KEY as symbol]: {} as AppExperimentState },
+          stubs: { 'router-link': { template: '<a><slot /></a>' } },
+        },
       })
       expect(wrapper.find('.mint-topbar__standalone-badge').exists()).toBe(false)
     })
   })
 
-  describe('standaloneLabel prop', () => {
+  describe('spec.standaloneLabel text', () => {
     it('should display default "Standalone" label', () => {
       const wrapper = createWrapper({
         title: 'Test App',
@@ -544,8 +559,8 @@ describe('AppTopBar', () => {
 
     it('should display custom standalone label', () => {
       const wrapper = createWrapper({
+        spec: { standaloneLabel: 'Demo Mode' },
         title: 'Test App',
-        standaloneLabel: 'Demo Mode',
       })
       const badge = wrapper.find('.mint-topbar__standalone-badge')
       expect(badge.text()).toBe('Demo Mode')
@@ -553,8 +568,8 @@ describe('AppTopBar', () => {
 
     it('should support empty string as label', () => {
       const wrapper = createWrapper({
+        spec: { standaloneLabel: '' },
         title: 'Test App',
-        standaloneLabel: '',
       })
       const badge = wrapper.find('.mint-topbar__standalone-badge')
       expect(badge.text()).toBe('')
@@ -568,7 +583,6 @@ describe('AppTopBar', () => {
       // The component code correctly checks isStandalone computed property
       const wrapper = createWrapper({
         title: 'Test App',
-        showStandaloneLabel: true,
       })
 
       // In non-integrated mode (default mock), badge should be visible
@@ -578,9 +592,10 @@ describe('AppTopBar', () => {
 
   describe('combined features', () => {
     it('does not bind an experiment when the integrated plugin is static', async () => {
-      vi.mocked(usePlatformContext).mockReturnValueOnce({
-        isIntegrated: computed(() => true),
-        context: ref({ isIntegrated: true, theme: 'system' }),
+      vi.mocked(usePlatform).mockReturnValueOnce({
+        integrated: computed(() => true),
+        isAdmin: computed(() => true),
+        can: () => true,
         plugin: computed(() => ({
           id: 'hmdb',
           name: 'HMDB',
@@ -588,13 +603,12 @@ describe('AppTopBar', () => {
           route_prefix: '/hmdb',
           api_prefix: '/api/hmdb',
           plugin_type: 'static',
+          display_name: 'HMDB',
+          settings_api: 'platform' as const,
         })),
         user: computed(() => undefined),
         theme: computed(() => 'system' as const),
         features: computed(() => undefined),
-        navigate: vi.fn(),
-        notify: vi.fn(),
-        sendToPlatform: vi.fn(),
       })
       const wrapper = mount(AppTopBar, {
         props: { title: 'HMDB' },
@@ -618,16 +632,14 @@ describe('AppTopBar', () => {
     })
 
     it('passes injected app experiment bindings to the popover and selector modal', async () => {
-      vi.mocked(usePlatformContext).mockReturnValueOnce({
-        isIntegrated: computed(() => true),
-        context: ref({ isIntegrated: true, theme: 'system' }),
+      vi.mocked(usePlatform).mockReturnValueOnce({
+        integrated: computed(() => true),
+        isAdmin: computed(() => true),
+        can: () => true,
         plugin: computed(() => undefined),
         user: computed(() => undefined),
         theme: computed(() => 'system' as const),
         features: computed(() => undefined),
-        navigate: vi.fn(),
-        notify: vi.fn(),
-        sendToPlatform: vi.fn(),
       })
       const appExperiment: AppExperimentState = {
         experimentName: computed(() => 'Dose response'),
@@ -657,7 +669,7 @@ describe('AppTopBar', () => {
           saveSuccessMessage: 'Saved',
         })),
         selectorModal: computed(() => ({
-          modelValue: true,
+          open: true,
           currentExperimentId: 12,
         })),
         openModal: vi.fn(),
@@ -697,16 +709,15 @@ describe('AppTopBar', () => {
         saveSuccessMessage: 'Saved',
       })
       expect(wrapper.findComponent(ExperimentSelectorModal).props()).toMatchObject({
-        modelValue: true,
+        open: true,
         currentExperimentId: 12,
       })
     })
 
     it('should render ThemeToggle and settings button together', () => {
       const wrapper = createWrapper({
+        spec: { themeToggle: true, settings: {} },
         title: 'Test App',
-        showThemeToggle: true,
-        showSettings: true,
       })
 
       expect(wrapper.findComponent(ThemeToggle).exists()).toBe(true)
@@ -715,11 +726,8 @@ describe('AppTopBar', () => {
 
     it('should render standalone badge, ThemeToggle, and settings button together', () => {
       const wrapper = createWrapper({
+        spec: { themeToggle: true, standaloneLabel: 'Offline', settings: {} },
         title: 'Test App',
-        showThemeToggle: true,
-        showSettings: true,
-        showStandaloneLabel: true,
-        standaloneLabel: 'Offline',
       })
 
       expect(wrapper.find('.mint-topbar__standalone-badge').exists()).toBe(true)
@@ -730,11 +738,9 @@ describe('AppTopBar', () => {
 
     it('should maintain existing topbar functionality with new features', () => {
       const wrapper = createWrapper({
+        spec: { themeToggle: true, settings: {} },
         title: 'My Plugin',
         subtitle: 'Version 1.0',
-        showThemeToggle: true,
-        showSettings: true,
-        showStandaloneLabel: true,
       })
 
       // Verify title and subtitle still render
@@ -749,10 +755,8 @@ describe('AppTopBar', () => {
 
     it('should render all elements in correct order in right section', () => {
       const wrapper = createWrapper({
+        spec: { themeToggle: true, settings: {} },
         title: 'Test App',
-        showThemeToggle: true,
-        showSettings: true,
-        showStandaloneLabel: true,
       }, {
         actions: '<button class="custom-action">Action</button>',
       })
@@ -784,19 +788,21 @@ describe('AppTopBar', () => {
 
     it('composes page selector, pill nav, theme, and settings controls', () => {
       const wrapper = createWrapper({
+        spec: {
+          themeToggle: true,
+          pills: [
+            { id: 'overview', label: 'Overview' },
+            { id: 'details', label: 'Details' },
+          ],
+          settings: {},
+        },
+        pill: 'overview',
         title: 'Dashboard',
         pageSelector: [
           { id: 'dashboard', label: 'Dashboard' },
           { id: 'settings', label: 'Settings' },
         ],
         currentPageSelectorId: 'dashboard',
-        pillNav: [
-          { id: 'overview', label: 'Overview' },
-          { id: 'details', label: 'Details' },
-        ],
-        currentPillId: 'overview',
-        showThemeToggle: true,
-        showSettings: true,
       })
 
       expect(wrapper.find('.mint-page-selector__label').text()).toBe('Dashboard')
@@ -812,11 +818,13 @@ describe('AppTopBar', () => {
     it('renders pill nav items with icon metadata', async () => {
       const runIcon = 'M8 5v14l11-7z'
       const wrapper = createWrapper({
-        pillNav: [
-          { id: 'analysis', label: 'Run', icon: runIcon },
-          { id: 'results', label: 'Results' },
-        ],
-        currentPillId: 'analysis',
+        spec: {
+          pills: [
+            { id: 'analysis', label: 'Run', icon: runIcon },
+            { id: 'results', label: 'Results' },
+          ],
+        },
+        pill: 'analysis',
       })
 
       const pills = wrapper.findAll('.mint-pill-nav__item')
@@ -829,6 +837,17 @@ describe('AppTopBar', () => {
       expect(wrapper.emitted('pill-select')?.[0][0]).toMatchObject({ id: 'results', label: 'Results' })
     })
 
+    it('emits update:pill with the id of the selected pill', async () => {
+      const wrapper = createWrapper({
+        spec: { pills: ['Run', 'Results'] },
+        pill: 'Run',
+      })
+
+      await wrapper.findAll('.mint-pill-nav__item')[1].trigger('click')
+
+      expect(wrapper.emitted('update:pill')).toEqual([['Results']])
+    })
+
     it('uses shared dropdown state for the page selector menu', async () => {
       const wrapper = createWrapper({
         pageSelector: [
@@ -893,11 +912,10 @@ describe('AppTopBar', () => {
   })
 
   describe('edge cases', () => {
-    it('should handle empty settingsConfig object', async () => {
+    it('should handle empty spec.settings object', async () => {
       const wrapper = createWrapper({
+        spec: { settings: {} },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig: {},
       })
 
       const settingsModal = await openSettingsModal(wrapper)
@@ -908,15 +926,14 @@ describe('AppTopBar', () => {
       expect(settingsModal.props('size')).toBe('lg')
     })
 
-    it('should handle settingsConfig with only some fields', async () => {
+    it('should handle spec.settings with only some fields', async () => {
       const settingsConfig: TopBarSettingsConfig = {
         title: 'Partial Config',
       }
 
       const wrapper = createWrapper({
+        spec: { settings: settingsConfig },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig,
       })
 
       const settingsModal = await openSettingsModal(wrapper)
@@ -930,8 +947,8 @@ describe('AppTopBar', () => {
 
     it('should handle standalone label with special characters', () => {
       const wrapper = createWrapper({
+        spec: { standaloneLabel: '🚀 Preview' },
         title: 'Test App',
-        standaloneLabel: '🚀 Preview',
       })
 
       const badge = wrapper.find('.mint-topbar__standalone-badge')
@@ -941,8 +958,8 @@ describe('AppTopBar', () => {
     it('should handle very long standalone label', () => {
       const longLabel = 'This is a very long standalone mode label text'
       const wrapper = createWrapper({
+        spec: { standaloneLabel: longLabel },
         title: 'Test App',
-        standaloneLabel: longLabel,
       })
 
       const badge = wrapper.find('.mint-topbar__standalone-badge')
@@ -951,7 +968,7 @@ describe('AppTopBar', () => {
   })
 
   describe('type safety', () => {
-    it('should accept valid settingsConfig with all fields', async () => {
+    it('should accept valid spec.settings with all fields', async () => {
       const settingsConfig: TopBarSettingsConfig = {
         title: 'Complete Settings',
         tabs: [
@@ -963,9 +980,8 @@ describe('AppTopBar', () => {
       }
 
       const wrapper = createWrapper({
+        spec: { settings: settingsConfig },
         title: 'Test App',
-        showSettings: true,
-        settingsConfig,
       })
 
       expect((await openSettingsModal(wrapper)).exists()).toBe(true)
@@ -976,9 +992,8 @@ describe('AppTopBar', () => {
 
       for (const size of sizes) {
         const wrapper = createWrapper({
+          spec: { settings: { size } },
           title: 'Test App',
-          showSettings: true,
-          settingsConfig: { size },
         })
 
         const settingsModal = await openSettingsModal(wrapper)
@@ -997,16 +1012,14 @@ describe('AppTopBar', () => {
         features: undefined as unknown,
       }
       const merged = { ...defaults, ...overrides }
-      vi.mocked(usePlatformContext).mockReturnValue({
-        isIntegrated: computed(() => merged.isIntegrated as boolean),
-        context: ref({ isIntegrated: merged.isIntegrated as boolean, theme: merged.theme }),
+      vi.mocked(usePlatform).mockReturnValue({
+        integrated: computed(() => merged.isIntegrated as boolean),
+        isAdmin: computed(() => true),
+        can: () => true,
         plugin: computed(() => merged.plugin as any),
         user: computed(() => merged.user as any),
         theme: computed(() => merged.theme as any),
         features: computed(() => merged.features as any),
-        navigate: vi.fn(),
-        notify: vi.fn(),
-        sendToPlatform: vi.fn(),
       })
     }
 
@@ -1045,7 +1058,7 @@ describe('AppTopBar', () => {
       expect(wrapper.find('.mint-topbar__identity').exists()).toBe(true)
     })
 
-    it('should pass plugin.color to PluginIcon as tone', () => {
+    it('should pass plugin.color to PluginIcon as color', () => {
       const iconPath = 'M13 10V3L4 14h7v7l9-11h-7z'
       mockPlatformCtx({
         isIntegrated: true,
@@ -1058,7 +1071,7 @@ describe('AppTopBar', () => {
 
       const wrapper = createWrapper({ title: 'Test App' })
 
-      expect(wrapper.findComponent({ name: 'PluginIcon' }).props('tone')).toBe('#22C55E')
+      expect(wrapper.findComponent({ name: 'PluginIcon' }).props('color')).toBe('#22C55E')
     })
 
     it('should ignore the custom icon slot when integrated', () => {
@@ -1124,44 +1137,34 @@ describe('AppTopBar', () => {
       expect(wrapper.findComponent({ name: 'PluginIcon' }).exists()).toBe(true)
     })
 
-    it('uses platform plugin nav metadata as the page selector when pageSelector is omitted', async () => {
-      const previousPath = window.location.pathname
-      window.history.pushState({}, '', '/test/analysis')
+    it('should hand the platform page selector an element when pageSelector is omitted', () => {
+      const unmount = vi.fn()
+      const mountPageSelector = vi.fn((_element: HTMLElement) => unmount)
+      const integratedWindow = window as Window & { __MINT_INTEGRATION__?: unknown }
+      integratedWindow.__MINT_INTEGRATION__ = { mountPageSelector, bindExperimentStore: vi.fn() }
       try {
-        const pluginIcon = 'M13 10V3L4 14h7v7l9-11h-7z'
-        const analysisIcon = 'M4 19h16M7 16V8m5 8V4m5 12v-6'
         mockPlatformCtx({
           isIntegrated: true,
           plugin: {
             id: 'test',
             name: 'Dose Designer',
             version: '1.0',
-            icon: pluginIcon,
             route_prefix: '/test',
             api_prefix: '/api/test',
             nav_items: [
               { path: '/', label: 'Dashboard' },
-              { path: '/analysis', label: 'Analysis', icon: analysisIcon },
+              { path: '/analysis', label: 'Analysis' },
             ],
           },
         })
 
         const wrapper = createWrapper()
-        await wrapper.get('.mint-page-selector__trigger').trigger('click')
-
-        expect(wrapper.get('.mint-page-selector__label').text()).toBe('Analysis')
-        expect(wrapper.findAll('.mint-page-selector__item-label').map(item => item.text())).toEqual([
-          'Dashboard',
-          'Analysis',
-        ])
-        expect(wrapper.find('.mint-page-selector__item-hint').exists()).toBe(false)
-        const dropdownIcons = wrapper
-          .findAllComponents({ name: 'PluginIcon' })
-          .filter(icon => icon.classes().includes('mint-page-selector__metadata-icon'))
-        expect(dropdownIcons.map(icon => icon.props('icon'))).toEqual([pluginIcon, analysisIcon])
-        expect(wrapper.findAll('.mint-page-selector__item')[1].classes()).toContain('mint-page-selector__item--active')
+        const host = wrapper.get('.mint-topbar__platform-page-selector').element
+        wrapper.unmount()
+
+        expect([mountPageSelector.mock.calls[0]?.[0], unmount.mock.calls.length]).toEqual([host, 1])
       } finally {
-        window.history.pushState({}, '', previousPath)
+        delete integratedWindow.__MINT_INTEGRATION__
       }
     })
 
@@ -1285,10 +1288,10 @@ describe('AppTopBar', () => {
       ])
     })
 
-    it('accepts string shorthand for pillNav', async () => {
+    it('accepts string shorthand for spec.pills', async () => {
       const wrapper = createWrapper({
-        currentPillId: 'Run',
-        pillNav: ['Run', 'Results'],
+        spec: { pills: ['Run', 'Results'] },
+        pill: 'Run',
       })
 
       expect(wrapper.findAll('.mint-pill-nav__item').map(item => item.text())).toEqual([
@@ -1303,20 +1306,22 @@ describe('AppTopBar', () => {
       ])
     })
 
-    it('emits pill-option-select for pillNav dropdown children', async () => {
+    it('emits pill-option-select for spec.pills dropdown children', async () => {
       const wrapper = createWrapper({
-        currentPillId: 'pca',
-        pillNav: [
-          { id: 'charts', label: 'Charts' },
-          {
-            id: 'visualize',
-            label: 'Visualize',
-            children: [
-              { id: 'pca', label: 'PCA', description: 'Principal component analysis' },
-              { id: 'heatmap', label: 'Heatmap', description: 'Metabolite heatmap' },
-            ],
-          },
-        ],
+        spec: {
+          pills: [
+            { id: 'charts', label: 'Charts' },
+            {
+              id: 'visualize',
+              label: 'Visualize',
+              children: [
+                { id: 'pca', label: 'PCA', description: 'Principal component analysis' },
+                { id: 'heatmap', label: 'Heatmap', description: 'Metabolite heatmap' },
+              ],
+            },
+          ],
+        },
+        pill: 'pca',
       })
 
       await wrapper.findAll('.mint-pill-nav__item')[1].trigger('click')