feat(web): move the session tool picker into a settings Tools page

Author: elkaix

.changeset/web-tools-settings-page.md

@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": minor
+---
+
+Move the web tool picker out of the composer menu into a Tools page in settings, where the full list fits. Every tool stays on until you turn one off, and the selection still applies to the current session only.

apps/pythinker-web/src/App.vue

@@ -624,6 +624,10 @@ const {
   },
   onLoadConnectors: () => { void client.loadConnectors(); },
   onLoadPlugins: () => { void client.loadPlugins(); },
+  onLoadTools: () => {
+    const sessionId = client.activeSessionId.value;
+    if (sessionId) void client.loadCapabilityData(sessionId);
+  },
   onLoadSubagents: () => { void client.loadSubagents(); },
 });
 
@@ -693,6 +697,14 @@ async function openModelPicker(): Promise<void> {
   }
 }
 
+/** Narrow the active session's tool selection from the settings Tools page. */
+function applySessionTools(names: string[]): void {
+  // `updateCapabilities` rolls its optimistic write back and reports the
+  // failure itself, then rethrows; swallowing here keeps a failed write from
+  // surfacing as an unhandled rejection.
+  void client.updateCapabilities({ tools: names }).catch(() => undefined);
+}
+
 async function openProviders(): Promise<void> {
   providersLoading.value = true;
   providersUnavailable.value = false;
@@ -1092,7 +1104,12 @@ function openPr(url: string): void {
       :sessions="client.sessionsWithUsage.value"
       :plugins="client.plugins.value"
       :subagents="client.subagents.value"
+      :tools="client.toolsBySession.value[client.activeSessionId.value]"
+      :tools-loading="client.toolsLoadingBySession.value[client.activeSessionId.value] === true"
+      :enabled-tools="client.activeSessionCapabilities.value.tools"
+      :session-id="client.activeSessionId.value"
       @set-plugin-enabled="client.setPluginEnabled($event.pluginId, $event.enabled)"
+      @set-tools="applySessionTools($event)"
       @restart-connector="client.restartConnector($event)"
       @set-theme="client.setTheme($event)"
       @set-color-scheme="client.setColorScheme($event)"

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

@@ -11,25 +11,16 @@ const props = defineProps<{
   sessionId?: string;
 }>();
 
-type MenuView = 'root' | 'tools' | 'skills' | 'plugins';
-type SessionCapabilities = { tools?: string[]; mcpServers?: string[] };
+type MenuView = 'root' | 'skills' | 'plugins';
+type SessionCapabilities = { mcpServers?: string[] };
 
 const { t } = useI18n();
 const client = usePythinkerWebClient();
 const triggerRef = ref<HTMLButtonElement | null>(null);
 const open = ref(false);
 const view = ref<MenuView>('root');
-const selectedTools = ref<string[]>([]);
 const selectedMcpServers = ref<string[]>([]);
 
-const tools = computed(() => {
-  const sessionId = props.sessionId;
-  return sessionId ? client.toolsBySession.value[sessionId] ?? [] : [];
-});
-const toolsLoading = computed(() => {
-  const sessionId = props.sessionId;
-  return sessionId ? client.toolsLoadingBySession.value[sessionId] === true : false;
-});
 const skills = computed(() =>
   props.sessionId === client.activeSessionId.value ? client.skills.value : [],
 );
@@ -47,14 +38,12 @@ const capabilities = computed<SessionCapabilities>(() =>
     : {},
 );
 
-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);
 const showPlugins = computed(() => pluginsLoading.value || plugins.value.length > 0);
 
 const drilldownTitle = computed(() => {
   switch (view.value) {
-    case 'tools': return t('capabilityMenu.tools.title');
     case 'skills': return t('capabilityMenu.skills.title');
     case 'plugins': return t('capabilityMenu.plugins.title');
     case 'root': return '';
@@ -63,32 +52,27 @@ const drilldownTitle = computed(() => {
 
 const drilldownCount = computed(() => {
   switch (view.value) {
-    case 'tools': return selectedTools.value.length;
     case 'skills': return skills.value.length;
     case 'plugins': return plugins.value.length;
     case 'root': return 0;
   }
 });
 
 function syncSelection(): void {
-  selectedTools.value = capabilities.value.tools !== undefined
-    ? [...capabilities.value.tools]
-    : tools.value.map((tool) => tool.name);
   selectedMcpServers.value = capabilities.value.mcpServers !== undefined
     ? [...capabilities.value.mcpServers]
     : connectors.value.map((server) => server.id);
 }
 
 watch(
-  [() => props.sessionId, tools, connectors, capabilities],
+  [() => props.sessionId, connectors, capabilities],
   syncSelection,
   { immediate: true },
 );
 
 watch(
-  [tools, toolsLoading, skills, skillsLoading, plugins, pluginsLoading],
+  [skills, skillsLoading, plugins, pluginsLoading],
   () => {
-    if (view.value === 'tools' && !toolsLoading.value && tools.value.length === 0) view.value = 'root';
     if (view.value === 'skills' && !skillsLoading.value && skills.value.length === 0) view.value = 'root';
     if (view.value === 'plugins' && !pluginsLoading.value && plugins.value.length === 0) view.value = 'root';
   },
@@ -140,15 +124,6 @@ function queueWrite(field: CapabilityField, selection: Ref<string[]>, previous:
   return write;
 }
 
-function setToolEnabled(name: string, enabled: boolean): Promise<void> {
-  const previous = [...selectedTools.value];
-  const next = new Set(previous);
-  if (enabled) next.add(name);
-  else next.delete(name);
-  selectedTools.value = [...next];
-  return queueWrite('tools', selectedTools, previous);
-}
-
 function setMcpServerEnabled(id: string, enabled: boolean): Promise<void> {
   const previous = [...selectedMcpServers.value];
   const next = new Set(previous);
@@ -189,13 +164,6 @@ function setPluginEnabled(id: string, enabled: boolean): void {
         <div class="capability-viewport">
           <div class="capability-track" :class="{ 'is-drilled': view !== 'root' }">
             <div class="capability-view">
-              <MenuRow v-if="showTools" :count="selectedTools.length" @click="view = 'tools'">
-                <template #label>{{ t('capabilityMenu.tools.title') }}</template>
-                <template #trailing>
-                  <svg class="chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 3 5 5-5 5" /></svg>
-                </template>
-              </MenuRow>
-
               <MenuRow v-if="showSkills" :count="skills.length" @click="view = 'skills'">
                 <template #label>{{ t('capabilityMenu.skills.title') }}</template>
                 <template #trailing>
@@ -247,34 +215,7 @@ function setPluginEnabled(id: string, enabled: boolean): void {
                 <template #label>{{ drilldownTitle || t('capabilityMenu.back') }}</template>
               </MenuRow>
 
-              <template v-if="view === 'tools'">
-                <p class="capability-caption">{{ t('capabilityMenu.tools.caption') }}</p>
-                <div v-if="toolsLoading" class="capability-loading">
-                  <ActivitySpinner :label="t('capabilityMenu.loading')" />
-                </div>
-                <template v-else>
-                  <MenuRow
-                    v-for="tool in tools"
-                    :key="tool.name"
-                    class="capability-row"
-                    :selected="selectedTools.includes(tool.name)"
-                    :title="tool.description"
-                    @click="void setToolEnabled(tool.name, !selectedTools.includes(tool.name))"
-                  >
-                    <template #label>{{ tool.name }}</template>
-                    <template #trailing>
-                      <SwitchToggle
-                        :model-value="selectedTools.includes(tool.name)"
-                        :aria-label="t('capabilityMenu.tools.toggle', { name: tool.name })"
-                        @click.stop
-                        @update:model-value="void setToolEnabled(tool.name, $event)"
-                      />
-                    </template>
-                  </MenuRow>
-                </template>
-              </template>
-
-              <template v-else-if="view === 'skills'">
+              <template v-if="view === 'skills'">
                 <p class="capability-caption">{{ t('capabilityMenu.skills.caption') }}</p>
                 <div v-if="skillsLoading" class="capability-loading">
                   <ActivitySpinner :label="t('capabilityMenu.loading')" />

apps/pythinker-web/src/components/settings/SettingsPane.vue

@@ -7,6 +7,7 @@ import type {
   AppSession,
   AppSkill,
   AppSubagent,
+  AppTool,
 } from '../../api/types';
 import type { ColorScheme, Theme } from '../../composables/usePythinkerWebClient';
 import type { SettingsTab } from '../../composables/useSettingsNav';
@@ -20,6 +21,7 @@ import HooksPage from './pages/HooksPage.vue';
 import PluginsPage from './pages/PluginsPage.vue';
 import SkillsPage from './pages/SkillsPage.vue';
 import SubagentsPage from './pages/SubagentsPage.vue';
+import ToolsPage from './pages/ToolsPage.vue';
 import UsagePage from './pages/UsagePage.vue';
 
 defineProps<{
@@ -41,6 +43,10 @@ defineProps<{
   sessions?: AppSession[];
   plugins?: AppPlugin[];
   subagents?: AppSubagent[];
+  tools?: AppTool[];
+  toolsLoading?: boolean;
+  enabledTools?: string[];
+  sessionId?: string;
 }>();
 
 const emit = defineEmits<{
@@ -54,6 +60,7 @@ const emit = defineEmits<{
   updateConfig: [patch: Partial<AppConfig>];
   restartConnector: [connectorId: string];
   setPluginEnabled: [payload: { pluginId: string; enabled: boolean }];
+  setTools: [names: string[]];
   close: [];
 }>();
 
@@ -94,6 +101,14 @@ const { t } = useI18n();
       :config-saving="configSaving"
       @update-config="emit('updateConfig', $event)"
     />
+    <ToolsPage
+      v-show="activeTab === 'tools'"
+      :tools="tools"
+      :tools-loading="toolsLoading"
+      :enabled-tools="enabledTools"
+      :session-id="sessionId"
+      @set-tools="emit('setTools', $event)"
+    />
     <PluginsPage
       v-show="activeTab === 'plugins'"
       :plugins="plugins"
@@ -150,7 +165,7 @@ const { t } = useI18n();
   cursor: pointer;
 }
 .close-btn:hover {
-  color: #fff;
+  color: var(--bg);
   background: var(--err);
   border-color: var(--err);
 }

apps/pythinker-web/src/components/settings/pages/ToolsPage.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { AppTool } from '../../../api/types';
+import ListingRow from '../ListingRow.vue';
+
+const props = defineProps<{
+  tools?: AppTool[];
+  toolsLoading?: boolean;
+  enabledTools?: string[];
+  sessionId?: string;
+}>();
+
+const emit = defineEmits<{
+  setTools: [names: string[]];
+}>();
+
+const { t } = useI18n();
+const toolList = computed(() => props.tools ?? []);
+const enabledToolNames = computed(() => props.enabledTools ?? toolList.value.map((tool) => tool.name));
+
+function isToolEnabled(name: string): boolean {
+  return enabledToolNames.value.includes(name);
+}
+
+function setToolEnabled(name: string, enabled: boolean): void {
+  const next = new Set(enabledToolNames.value);
+  if (enabled) next.add(name);
+  else next.delete(name);
+  emit('setTools', [...next]);
+}
+
+function enableAll(): void {
+  emit('setTools', toolList.value.map((tool) => tool.name));
+}
+</script>
+
+<template>
+  <section id="settings-panel-tools" class="panel" role="tabpanel" aria-labelledby="settings-tab-tools">
+    <section class="sec">
+      <h2 class="page-title">{{ t('settings.tools.title') }}</h2>
+      <p class="sec-note">{{ t('settings.tools.note') }}</p>
+      <p v-if="!props.sessionId" class="sec-empty">{{ t('settings.tools.noSession') }}</p>
+      <p v-else-if="props.toolsLoading" class="sec-empty">{{ t('settings.tools.loading') }}</p>
+      <p v-else-if="toolList.length === 0" class="sec-empty">{{ t('settings.tools.empty') }}</p>
+      <template v-else>
+        <div class="listing">
+          <ListingRow v-for="tool in toolList" :key="tool.name" :name="tool.name" mono :off="!isToolEnabled(tool.name)">
+            <template #glyph>
+              <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M8 4h8M6 8h12v11H6zM9 12h6M9 15h4" stroke-linecap="round" stroke-linejoin="round" /></svg>
+            </template>
+            <template #actions>
+              <button type="button" class="switch sm" role="switch" :class="{ on: isToolEnabled(tool.name) }" :aria-checked="isToolEnabled(tool.name)" :aria-label="t('settings.tools.toggleAria', { name: tool.name })" @click="setToolEnabled(tool.name, !isToolEnabled(tool.name))"><span class="knob" /></button>
+            </template>
+          </ListingRow>
+        </div>
+        <div class="actions">
+          <button type="button" class="act" @click="enableAll">{{ t('settings.tools.enableAll') }}</button>
+        </div>
+      </template>
+    </section>
+  </section>
+</template>
+
+<style scoped src="../settings.css"></style>

apps/pythinker-web/src/composables/useSettingsNav.ts

@@ -3,6 +3,7 @@ import { shallowRef, toValue, type MaybeRefOrGetter } from 'vue';
 export type SettingsTab =
   | 'general'
   | 'agent'
+  | 'tools'
   | 'skills'
   | 'connectors'
   | 'plugins'
@@ -26,6 +27,7 @@ export const tabGroups: Array<{
   {
     titleKey: 'settings.groups.capabilities',
     tabs: [
+      { id: 'tools', labelKey: 'settings.tabs.tools' },
       { id: 'plugins', labelKey: 'settings.tabs.plugins' },
       { id: 'skills', labelKey: 'settings.tabs.skills' },
       { id: 'subagents', labelKey: 'settings.tabs.subagents' },
@@ -51,18 +53,20 @@ type UseSettingsNavOptions = {
   };
   onLoadConnectors: () => void;
   onLoadPlugins: () => void;
+  onLoadTools: () => void;
   onLoadSubagents: () => void;
 };
 
 export function useSettingsNav(options: UseSettingsNavOptions) {
   const activeTab = shallowRef<SettingsTab>('general');
 
   function loadFor(tab: SettingsTab): void {
+    if (tab === 'tools') options.onLoadTools();
     if (tab === 'connectors' && toValue(options.counts.connectors) === 0) options.onLoadConnectors();
     if (tab === 'plugins' && toValue(options.counts.plugins) === 0) options.onLoadPlugins();
-    // Connectors and plugins are daemon-wide, so one load holds. Subagents are
-    // resolved from the active session's working directory, so a cached list
-    // belongs to whichever session was active when it loaded — always refetch.
+    // Connectors and plugins are daemon-wide, so one load holds. Tools and
+    // subagents are session-scoped, so always refetch them for the active
+    // session.
     if (tab === 'subagents') options.onLoadSubagents();
   }
 

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

@@ -12,6 +12,7 @@ export default {
   tabs: {
     general: 'General',
     agent: 'Agent',
+    tools: 'Tools',
     plugins: 'Plugins',
     skills: 'Skills',
     subagents: 'Subagents',
@@ -21,6 +22,15 @@ export default {
     advanced: 'Advanced',
     experimental: 'Experimental',
   },
+  tools: {
+    title: 'Tools',
+    note: 'Applies to this session immediately. The selection is saved for the current session only.',
+    noSession: 'No active session.',
+    loading: 'Loading tools…',
+    empty: 'No tools are available.',
+    enableAll: 'Enable all tools',
+    toggleAria: 'Enable {name}',
+  },
   skills: {
     title: 'Skills',
     note: 'Skills the agent can use, grouped by source. A skill you turn off is never loaded.',