fix(web): scope a queued capability write to the session that made it

A write that outlives a session switch would be sent against the new active
session, and its failure would roll that session's selection back to the old
one's snapshot. Both now stop at the session guard.

Also proves the toolbar divider sits next to the attach button in the rendered
DOM instead of matching two class strings anywhere in the file.

Author: elkaix

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

@@ -130,11 +130,17 @@ const writeCount: Record<CapabilityField, number> = { tools: 0, mcpServers: 0 };
 
 function queueWrite(field: CapabilityField, selection: Ref<string[]>, previous: string[]): Promise<void> {
   const seq = ++writeCount[field];
+  // The write belongs to the session that was rendered when the user toggled.
+  // `updateCapabilities` always targets the active session, so a queued write
+  // that outlives a session switch must be dropped, not sent to the new one —
+  // and its rollback must not touch the new session's selection either.
+  const sessionId = props.sessionId;
   const write = writeChain[field].then(async () => {
+    if (props.sessionId !== sessionId) return;
     try {
       await client.updateCapabilities({ [field]: [...selection.value] });
     } catch {
-      if (seq === writeCount[field]) selection.value = previous;
+      if (seq === writeCount[field] && props.sessionId === sessionId) selection.value = previous;
     }
   });
   writeChain[field] = write;

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

@@ -136,6 +136,7 @@ afterEach(() => {
   document.body.replaceChildren();
   vi.restoreAllMocks();
   const current = client();
+  current.activeSessionId.value = 'session_1';
   current.activeSessionCapabilities.value = { tools: ['Read'], mcpServers: ['mcp_1'] };
   current.toolsBySession.value = {
     session_1: [
@@ -327,6 +328,38 @@ describe('CapabilityMenu', () => {
     expect(two.getAttribute('aria-checked')).toBe('true');
   });
 
+  it('drops a queued write and its rollback when the session changes first', async () => {
+    const current = client();
+    const pending = deferred();
+    current.updateCapabilities.mockReturnValueOnce(pending.promise);
+
+    const wrapper = mountMenu();
+    await wrapper.get('.capability-trigger').trigger('click');
+    await flushPromises();
+    const toggle = document.body.querySelector('.mcp-row .switch-toggle') as HTMLButtonElement;
+
+    toggle.click();
+    await nextTick();
+
+    // The user moves to a session with a different selection while the write is
+    // still open. `updateCapabilities` targets whichever session is active, so
+    // the stale failure belongs to a session that is gone; rolling back here
+    // would show session one's selection under session two.
+    await wrapper.setProps({ sessionId: 'session_2' });
+    current.activeSessionId.value = 'session_2';
+    current.activeSessionCapabilities.value = { tools: ['Read'], mcpServers: ['mcp_2'] };
+    await nextTick();
+
+    pending.reject(new Error('daemon unreachable'));
+    await flushPromises();
+
+    const checked = [...document.body.querySelectorAll('.mcp-row')].map((row) => [
+      row.textContent?.includes('Docs') === true ? 'Docs' : 'Issue tracker',
+      row.querySelector('.switch-toggle')?.getAttribute('aria-checked'),
+    ]);
+    expect(checked).toEqual([['Docs', 'false'], ['Issue tracker', 'true']]);
+  });
+
   it('renders selected tools and MCP servers as chips', () => {
     const wrapper = mountMenu();
 

apps/pythinker-web/test/composer.test.ts

@@ -142,7 +142,13 @@ describe('Composer styling', () => {
     const dividerRule = capture(composerSource, /(?:^|\n)\.toolbar-divider\s*\{([^}]*)\}/u);
     expect(dividerRule).toMatch(/width:\s*1px;/u);
     expect(dividerRule).toMatch(/height:\s*16px;/u);
-    expect(composerSource).toMatch(/class="attach-btn"[\s\S]*class="toolbar-divider"/u);
+    // Rendered, not source order: the divider has to be the attach button's next
+    // sibling inside the same toolbar, which a source-wide match cannot show.
+    const wrapper = mountComposer({ uploadImage: async () => ({ fileId: 'file_1' }) });
+    const attach = wrapper.get('.attach-btn').element;
+    const divider = wrapper.get('.toolbar-divider').element;
+    expect(attach.nextElementSibling).toBe(divider);
+    expect(divider.parentElement).toBe(attach.parentElement);
   });
 
   it('pads the send button around a 20px glyph and keeps the accent fill', () => {