fix(web): keep the connectors menu inside the toolbar and the viewport

Author: elkaix

.changeset/web-connectors-menu-cleanup.md

@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": patch
+---
+
+Clean up the web composer capability control: the selected tools no longer render as chips in the toolbar, the button reads "Connectors", and the menu panel stays inside the window when its content loads.

apps/pythinker-web/src/components/CapabilityMenu.vue

@@ -2,7 +2,6 @@
 import { computed, ref, watch, type Ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import ActivitySpinner from './ActivitySpinner.vue';
-import Chip from './ui/Chip.vue';
 import MenuRow from './ui/MenuRow.vue';
 import Popover from './ui/Popover.vue';
 import SwitchToggle from './ui/SwitchToggle.vue';
@@ -48,12 +47,6 @@ const capabilities = computed<SessionCapabilities>(() =>
     : {},
 );
 
-const selectedToolItems = computed(() =>
-  tools.value.filter((tool) => selectedTools.value.includes(tool.name)),
-);
-const selectedMcpItems = computed(() =>
-  connectors.value.filter((server) => selectedMcpServers.value.includes(server.id)),
-);
 const showTools = computed(() => toolsLoading.value || tools.value.length > 0);
 const showSkills = computed(() => skillsLoading.value || skills.value.length > 0);
 const showMcp = computed(() => connectorsLoading.value || connectors.value.length > 0);
@@ -191,29 +184,6 @@ function setPluginEnabled(id: string, enabled: boolean): void {
       <span class="capability-trigger-label">{{ t('capabilityMenu.trigger') }}</span>
     </button>
 
-    <div v-if="selectedToolItems.length > 0 || selectedMcpItems.length > 0" class="capability-chip-strip">
-      <Chip
-        v-for="tool in selectedToolItems"
-        :key="`tool:${tool.name}`"
-        class="capability-chip"
-        variant="active"
-        :label="tool.name"
-        :title="t('capabilityMenu.tools.toggle', { name: tool.name })"
-        :aria-label="t('capabilityMenu.tools.toggle', { name: tool.name })"
-        @click="void setToolEnabled(tool.name, false)"
-      />
-      <Chip
-        v-for="server in selectedMcpItems"
-        :key="`mcp:${server.id}`"
-        class="capability-chip"
-        variant="active"
-        :label="server.name"
-        :title="t('capabilityMenu.mcp.toggle', { name: server.name })"
-        :aria-label="t('capabilityMenu.mcp.toggle', { name: server.name })"
-        @click="void setMcpServerEnabled(server.id, false)"
-      />
-    </div>
-
     <Popover :anchor="triggerRef" :open="open" :label="t('capabilityMenu.triggerLabel')" @close="close">
       <div class="capability-panel">
         <div class="capability-viewport">
@@ -361,9 +331,8 @@ function setPluginEnabled(id: string, enabled: boolean): void {
 .capability-control {
   display: flex;
   align-items: center;
-  gap: 4px;
+  flex: none;
   min-width: 0;
-  flex: 1 1 auto;
 }
 
 .capability-trigger {
@@ -397,26 +366,6 @@ function setPluginEnabled(id: string, enabled: boolean): void {
   flex: none;
 }
 
-.capability-chip-strip {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.capability-chip-strip::-webkit-scrollbar {
-  display: none;
-}
-
-.capability-chip {
-  flex: none;
-  min-width: 0;
-  padding: 5px 6px;
-  font-size: var(--ui-font-size-xs);
-}
-
 .capability-panel {
   width: 280px;
   max-height: 288px;

apps/pythinker-web/src/components/ui/Popover.vue

@@ -23,6 +23,7 @@ const panelRef = ref<HTMLElement | null>(null);
 const panelStyle = ref<Record<string, string>>({});
 let opener: HTMLElement | null = null;
 let listenersAttached = false;
+let panelResizeObserver: ResizeObserver | null = null;
 
 function positionPanel(): void {
   const anchor = props.anchor;
@@ -74,6 +75,13 @@ function attachListeners(): void {
   document.addEventListener('keydown', onKeydown);
   document.addEventListener('scroll', onViewportChange, true);
   window.addEventListener('resize', onViewportChange);
+  // The panel is measured once on open, but its content arrives later: a menu
+  // that opens on a spinner and then fills with rows grows downward past the
+  // viewport, because only `top` was written. Re-place it whenever it resizes.
+  if (typeof ResizeObserver !== 'undefined' && panelRef.value) {
+    panelResizeObserver = new ResizeObserver(onViewportChange);
+    panelResizeObserver.observe(panelRef.value);
+  }
   listenersAttached = true;
 }
 
@@ -83,6 +91,8 @@ function detachListeners(): void {
   document.removeEventListener('keydown', onKeydown);
   document.removeEventListener('scroll', onViewportChange, true);
   window.removeEventListener('resize', onViewportChange);
+  panelResizeObserver?.disconnect();
+  panelResizeObserver = null;
   listenersAttached = false;
 }
 

apps/pythinker-web/src/i18n/locales/en/capabilityMenu.ts

@@ -1,6 +1,6 @@
 export default {
-  trigger: 'Capabilities',
-  triggerLabel: 'Choose which capabilities this session may use',
+  trigger: 'Connectors',
+  triggerLabel: 'Choose which connectors this session may use',
   back: 'Back',
   loading: 'Loading…',
   tools: {

apps/pythinker-web/test/capability-menu.test.ts

@@ -360,10 +360,18 @@ describe('CapabilityMenu', () => {
     expect(checked).toEqual([['Docs', 'false'], ['Issue tracker', 'true']]);
   });
 
-  it('renders selected tools and MCP servers as chips', () => {
+  it('renders the selection only inside the panel, never as toolbar chips', async () => {
+    // A chip per selected tool overflowed the composer toolbar: with every tool
+    // on by default the strip pushed the permission and mode controls off the
+    // row and clipped the last chip mid-word. The panel already carries counts.
     const wrapper = mountMenu();
+    expect(wrapper.findAll('.chip')).toHaveLength(0);
 
-    expect(wrapper.findAll('.chip').map((chip) => chip.text())).toEqual(['×Read', '×Docs']);
+    await wrapper.get('.capability-trigger').trigger('click');
+    await flushPromises();
+
+    expect(wrapper.findAll('.chip')).toHaveLength(0);
+    expect(document.body.querySelectorAll('.mcp-row').length).toBeGreaterThan(0);
   });
 
   it('keeps CapabilityMenu.vue free of dark utilities and color literals', () => {

apps/pythinker-web/test/ui-primitives.test.ts

@@ -2,7 +2,7 @@ import { readdirSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { afterEach, describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import Chip from '../src/components/ui/Chip.vue';
 import MenuRow from '../src/components/ui/MenuRow.vue';
@@ -27,6 +27,7 @@ async function settle(): Promise<void> {
 
 afterEach(() => {
   document.body.replaceChildren();
+  vi.unstubAllGlobals();
 });
 
 describe('MenuRow', () => {
@@ -149,6 +150,47 @@ describe('Popover', () => {
     wrapper.unmount();
   });
 
+  it('re-places the panel when its content grows after opening', async () => {
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: 800 });
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 800 });
+    const observed: (() => void)[] = [];
+    vi.stubGlobal('ResizeObserver', class {
+      constructor(callback: () => void) {
+        observed.push(callback);
+      }
+      observe(): void {}
+      disconnect(): void {}
+    });
+    const anchor = document.createElement('button');
+    anchor.getBoundingClientRect = () => ({
+      bottom: 200, height: 20, left: 100, right: 160, top: 180,
+      width: 60, x: 100, y: 180, toJSON: () => ({}),
+    });
+    document.body.append(anchor);
+    const wrapper = mount(Popover, {
+      attachTo: document.body,
+      props: { anchor, open: true },
+      slots: { default: 'Menu' },
+    });
+    const panel = document.body.querySelector('[role="dialog"]') as HTMLElement;
+    Object.defineProperty(panel, 'offsetWidth', { configurable: true, value: 100 });
+    Object.defineProperty(panel, 'offsetHeight', { configurable: true, writable: true, value: 80 });
+
+    await settle();
+    expect(panel.style.top).toBe('204px');
+
+    // The menu opens on a spinner and fills in afterwards. Without the resize
+    // observer the panel keeps the `top` it was measured at and its new bottom
+    // runs off the viewport.
+    Object.defineProperty(panel, 'offsetHeight', { configurable: true, value: 700 });
+    expect(observed).toHaveLength(1);
+    observed[0]!();
+    await settle();
+
+    expect(panel.style.top).toBe('16px');
+    wrapper.unmount();
+  });
+
   it('closes on Escape', async () => {
     const anchor = document.createElement('button');
     document.body.append(anchor);