Merge the web UI batch follow-ups: connectors menu, Tools settings page, MCP server management

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.

.changeset/web-mcp-server-crud.md

@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": minor
+---
+
+Add, edit, and remove your own MCP servers from the connectors page in the web UI; a new or edited server starts with your next session.

.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;
@@ -1100,11 +1112,20 @@ function openPr(url: string): void {
       :skills="client.skills.value"
       :connectors="client.connectors.value"
       :connectors-loading="client.connectorsLoading.value"
+      :connectors-error="client.connectorsError.value"
       :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)"
+      @create-connector="client.createConnector($event)"
+      @update-connector="client.updateConnector($event.connectorId, $event.input)"
+      @remove-connector="client.removeConnector($event)"
       @set-theme="client.setTheme($event)"
       @set-color-scheme="client.setColorScheme($event)"
       @set-ui-font-size="client.setUiFontSize($event)"

apps/pythinker-web/src/api/daemon/client.ts

@@ -5,6 +5,8 @@ import type { PythinkerApiConfig } from '../config';
 import { buildRestUrl, buildWsUrl } from '../config';
 import type {
   AppConfig,
+  AppMcpServerDefinition,
+  AppMcpServerInput,
   AppMessage,
   AppMessageRole,
   AppModel,
@@ -151,6 +153,17 @@ interface WireMcpServer {
   status: 'connected' | 'connecting' | 'disconnected' | 'error';
   tool_count: number;
   last_error?: string;
+  editable: boolean;
+  definition?: WireMcpServerDefinition;
+}
+
+interface WireMcpServerDefinition {
+  transport: 'stdio' | 'http' | 'sse';
+  command?: string;
+  args?: string[];
+  env?: Record<string, string>;
+  url?: string;
+  headers?: Record<string, string>;
 }
 
 interface WirePlugin {
@@ -175,6 +188,28 @@ interface WireAgentProfile {
   when_to_use?: string;
 }
 
+function toAppMcpDefinition(definition: WireMcpServerDefinition): AppMcpServerDefinition {
+  return {
+    transport: definition.transport,
+    command: definition.command,
+    args: definition.args,
+    env: definition.env,
+    url: definition.url,
+    headers: definition.headers,
+  };
+}
+
+function toWireMcpDefinition(input: AppMcpServerInput): WireMcpServerDefinition {
+  return {
+    transport: input.transport,
+    command: input.command,
+    args: input.args,
+    env: input.env,
+    url: input.url,
+    headers: input.headers,
+  };
+}
+
 interface WireArchiveResult {
   archived: true;
 }
@@ -791,9 +826,34 @@ export class DaemonPythinkerWebApi implements PythinkerWebApi {
       status: server.status,
       toolCount: server.tool_count,
       lastError: server.last_error,
+      editable: server.editable,
+      definition: server.definition === undefined ? undefined : toAppMcpDefinition(server.definition),
     }));
   }
 
+  async createConnector(input: AppMcpServerInput): Promise<{ created: true }> {
+    return this.http.post<{ created: true }>('/mcp/servers', {
+      mcp_server_id: input.name,
+      config: toWireMcpDefinition(input),
+    });
+  }
+
+  async updateConnector(
+    connectorId: string,
+    input: AppMcpServerInput,
+  ): Promise<{ updated: true }> {
+    return this.http.put<{ updated: true }>(
+      `/mcp/servers/${encodeURIComponent(connectorId)}`,
+      { config: toWireMcpDefinition(input) },
+    );
+  }
+
+  async removeConnector(connectorId: string): Promise<{ deleted: true }> {
+    return this.http.delete<{ deleted: true }>(
+      `/mcp/servers/${encodeURIComponent(connectorId)}`,
+    );
+  }
+
   async listPlugins(): Promise<AppPlugin[]> {
     const data = await this.http.get<{ plugins: WirePlugin[] }>('/plugins');
     return (data.plugins ?? []).map((plugin) => ({

apps/pythinker-web/src/api/daemon/http.ts

@@ -170,6 +170,10 @@ export class DaemonHttpClient {
     return this.request<T>('PATCH', path, body);
   }
 
+  async put<T>(path: string, body: unknown): Promise<T> {
+    return this.request<T>('PUT', path, body);
+  }
+
   async delete<T>(path: string): Promise<T> {
     return this.request<T>('DELETE', path);
   }

apps/pythinker-web/src/api/types.ts

@@ -662,13 +662,28 @@ export interface AppSubagent {
 }
 
 /** A configured MCP server ("connector") and its live connection state. */
+export interface AppMcpServerDefinition {
+  transport: 'stdio' | 'http' | 'sse';
+  command?: string;
+  args?: string[];
+  env?: Record<string, string>;
+  url?: string;
+  headers?: Record<string, string>;
+}
+
+export interface AppMcpServerInput extends AppMcpServerDefinition {
+  name: string;
+}
+
 export interface AppConnector {
   id: string;
   name: string;
   transport: 'stdio' | 'http' | 'sse';
   status: 'connected' | 'connecting' | 'disconnected' | 'error';
   toolCount: number;
   lastError?: string;
+  editable: boolean;
+  definition?: AppMcpServerDefinition;
 }
 
 /** One tool available to the current session. */
@@ -720,6 +735,12 @@ export interface PythinkerWebApi {
   activateSkill(sessionId: string, skillName: string, args?: string): Promise<{ activated: true; skillName: string }>;
   /** Configured MCP servers — GET /mcp/servers. */
   listConnectors(): Promise<AppConnector[]>;
+  /** Create one user-global MCP server — POST /mcp/servers. */
+  createConnector(input: AppMcpServerInput): Promise<{ created: true }>;
+  /** Replace one user-global MCP server — PUT /mcp/servers/{id}. */
+  updateConnector(connectorId: string, input: AppMcpServerInput): Promise<{ updated: true }>;
+  /** Remove one user-global MCP server — DELETE /mcp/servers/{id}. */
+  removeConnector(connectorId: string): Promise<{ deleted: true }>;
   /** Restart one MCP server — POST /mcp/servers/{id}:restart. */
   restartConnector(connectorId: string): Promise<{ restarting: true }>;
   /** Installed plugins — GET /plugins. */