diff --git a/.changeset/web-capability-menu.md b/.changeset/web-capability-menu.md
new file mode 100644
index 00000000..1e9252f0
--- /dev/null
+++ b/.changeset/web-capability-menu.md
@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": minor
+---
+
+Add a capability menu to the composer. It picks which tools and MCP servers the current session may use, lists the session's skills, and turns plugins on or off. Each group states how far its change reaches, because the three differ: tool and MCP changes apply to this session at once, skills are read-only here, and plugin changes are global to the daemon. Selected tools and servers appear as chips beside the composer controls.
diff --git a/.changeset/web-composer-shell.md b/.changeset/web-composer-shell.md
new file mode 100644
index 00000000..cc0a9107
--- /dev/null
+++ b/.changeset/web-composer-shell.md
@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": patch
+---
+
+Widen the chat reading column to 928px and restyle the composer card: a 24px radius, a translucent blurred surface, a border that strengthens on hover and focus, and an input that grows to 384px before it scrolls. The toolbar controls are 30px circles with a divider after the attachment button.
diff --git a/apps/pythinker-web/src/api/daemon/client.ts b/apps/pythinker-web/src/api/daemon/client.ts
index 07a54b8a..b68a8118 100644
--- a/apps/pythinker-web/src/api/daemon/client.ts
+++ b/apps/pythinker-web/src/api/daemon/client.ts
@@ -14,6 +14,7 @@ import type {
   AppConnector,
   AppPlugin,
   AppSkill,
+  AppTool,
   AppSubagent,
   AppSessionCursor,
   AppSessionRuntimeStatus,
@@ -130,6 +131,14 @@ interface WireSkillDescriptor {
   disable_model_invocation?: boolean;
 }
 
+interface WireToolDescriptor {
+  name: string;
+  description: string;
+  input_schema: unknown;
+  source: 'builtin' | 'skill' | 'mcp';
+  mcp_server_id?: string;
+}
+
 interface WireMcpServer {
   id: string;
   name: string;
@@ -381,6 +390,8 @@ export class DaemonPythinkerWebApi implements PythinkerWebApi {
       goalObjective?: string;
       goalControl?: 'pause' | 'resume' | 'cancel';
       thinking?: string;
+      tools?: string[];
+      mcpServers?: string[];
     },
   ): Promise<AppSession> {
     const body: Record<string, unknown> = {};
@@ -394,6 +405,8 @@ export class DaemonPythinkerWebApi implements PythinkerWebApi {
     if (input.goalObjective !== undefined) agentConfig['goal_objective'] = input.goalObjective;
     if (input.goalControl !== undefined) agentConfig['goal_control'] = input.goalControl;
     if (input.thinking !== undefined) agentConfig['thinking'] = input.thinking;
+    if (input.tools !== undefined) agentConfig['tools'] = input.tools;
+    if (input.mcpServers !== undefined) agentConfig['mcp_servers'] = input.mcpServers;
     if (Object.keys(agentConfig).length > 0) body['agent_config'] = agentConfig;
     const data = await this.http.post<WireSession>(
       `/sessions/${encodeURIComponent(sessionId)}/profile`,
@@ -729,6 +742,23 @@ export class DaemonPythinkerWebApi implements PythinkerWebApi {
   }
 
   // -------------------------------------------------------------------------
+  // Tools — session-visible tool descriptors
+  // GET /tools?session_id={id} → { tools: WireToolDescriptor[] }
+  // -------------------------------------------------------------------------
+
+  async listTools(sessionId: string): Promise<AppTool[]> {
+    const data = await this.http.get<{ tools: WireToolDescriptor[] }>('/tools', {
+      session_id: sessionId,
+    });
+    return (data.tools ?? []).map((tool) => ({
+      name: tool.name,
+      description: tool.description,
+      inputSchema: tool.input_schema,
+      source: tool.source,
+      mcpServerId: tool.mcp_server_id,
+    }));
+  }
+
   // Skills — session-scoped slash-invocable skills
   // GET  /sessions/{id}/skills              → { skills: WireSkillDescriptor[] }
   // POST /sessions/{id}/skills/{name}:activate body { args? } → { activated, skill_name }
diff --git a/apps/pythinker-web/src/api/daemon/mappers.ts b/apps/pythinker-web/src/api/daemon/mappers.ts
index 3e81ce9d..da6ecde8 100644
--- a/apps/pythinker-web/src/api/daemon/mappers.ts
+++ b/apps/pythinker-web/src/api/daemon/mappers.ts
@@ -101,6 +101,8 @@ export function toAppSession(wire: WireSession): AppSession {
     currentPromptId: wire.current_prompt_id,
     cwd: wire.metadata.cwd,
     model: wire.agent_config.model,
+    tools: wire.agent_config.tools,
+    mcpServers: wire.agent_config.mcp_servers,
     usage: toAppSessionUsage(wire.usage),
     messageCount: wire.message_count,
     lastSeq: wire.last_seq,
diff --git a/apps/pythinker-web/src/api/types.ts b/apps/pythinker-web/src/api/types.ts
index 5f995fa0..2775f0d0 100644
--- a/apps/pythinker-web/src/api/types.ts
+++ b/apps/pythinker-web/src/api/types.ts
@@ -69,6 +69,10 @@ export interface AppSession {
   currentPromptId?: string;
   cwd: string;
   model: string;
+  /** Exact tool names configured for this session, when explicitly set. */
+  tools?: string[];
+  /** MCP server ids configured for this session, when explicitly set. */
+  mcpServers?: string[];
   usage: AppSessionUsage;
   messageCount: number;
   lastSeq: number;
@@ -651,6 +655,15 @@ export interface AppConnector {
   lastError?: string;
 }
 
+/** One tool available to the current session. */
+export interface AppTool {
+  name: string;
+  description: string;
+  inputSchema: unknown;
+  source: 'builtin' | 'skill' | 'mcp';
+  mcpServerId?: string;
+}
+
 // ---------------------------------------------------------------------------
 // PythinkerWebApi — the app-facing interface
 // ---------------------------------------------------------------------------
@@ -662,7 +675,7 @@ export interface PythinkerWebApi {
   createSession(input: { title?: string; cwd?: string; model?: string; workspaceId?: string }): Promise<AppSession>;
   /** Fetch one session by id (deep links beyond the first listSessions page). */
   getSession(sessionId: string): Promise<AppSession>;
-  updateSession(sessionId: string, input: { title?: string; cwd?: string; model?: string; permissionMode?: string; planMode?: boolean; dynamicWorkflowMode?: boolean; goalObjective?: string; goalControl?: 'pause' | 'resume' | 'cancel'; thinking?: string }): Promise<AppSession>;
+  updateSession(sessionId: string, input: { title?: string; cwd?: string; model?: string; permissionMode?: string; planMode?: boolean; dynamicWorkflowMode?: boolean; goalObjective?: string; goalControl?: 'pause' | 'resume' | 'cancel'; thinking?: string; tools?: string[]; mcpServers?: string[] }): Promise<AppSession>;
   getSessionStatus(sessionId: string): Promise<AppSessionRuntimeStatus>;
   archiveSession(sessionId: string): Promise<{ archived: true }>;
   listMessages(sessionId: string, input?: PageRequest & { role?: AppMessageRole }): Promise<Page<AppMessage>>;
@@ -687,6 +700,7 @@ export interface PythinkerWebApi {
   respondQuestion(sessionId: string, questionId: string, response: QuestionResponse): Promise<{ resolved: true; resolvedAt: string }>;
   dismissQuestion(sessionId: string, questionId: string): Promise<{ dismissed: true; dismissedAt: string }>;
   listSkills(sessionId: string): Promise<AppSkill[]>;
+  listTools(sessionId: string): Promise<AppTool[]>;
   activateSkill(sessionId: string, skillName: string, args?: string): Promise<{ activated: true; skillName: string }>;
   /** Configured MCP servers — GET /mcp/servers. */
   listConnectors(): Promise<AppConnector[]>;
diff --git a/apps/pythinker-web/src/components/CapabilityMenu.vue b/apps/pythinker-web/src/components/CapabilityMenu.vue
new file mode 100644
index 00000000..6a0de6c9
--- /dev/null
+++ b/apps/pythinker-web/src/components/CapabilityMenu.vue
@@ -0,0 +1,474 @@
+<script setup lang="ts">
+import { computed, ref, watch } 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';
+import { usePythinkerWebClient } from '../composables/usePythinkerWebClient';
+
+const props = defineProps<{
+  sessionId?: string;
+}>();
+
+type MenuView = 'root' | 'tools' | 'skills' | 'plugins';
+type SessionCapabilities = { tools?: string[]; 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 : [],
+);
+const skillsLoading = computed(() => {
+  const sessionId = props.sessionId;
+  return sessionId ? client.skillsLoadingBySession.value[sessionId] === true : false;
+});
+const connectors = computed(() => client.connectors.value);
+const connectorsLoading = computed(() => client.connectorsLoading.value);
+const plugins = computed(() => client.plugins.value);
+const pluginsLoading = computed(() => client.pluginsLoading.value);
+const capabilities = computed<SessionCapabilities>(() =>
+  props.sessionId === client.activeSessionId.value
+    ? client.activeSessionCapabilities.value
+    : {},
+);
+
+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);
+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 '';
+  }
+});
+
+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],
+  syncSelection,
+  { immediate: true },
+);
+
+watch(
+  [tools, toolsLoading, 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';
+  },
+);
+
+function toggleOpen(): void {
+  open.value = !open.value;
+  if (!open.value) {
+    view.value = 'root';
+    return;
+  }
+  if (props.sessionId) void client.loadCapabilityData(props.sessionId);
+}
+
+function close(): void {
+  open.value = false;
+  view.value = 'root';
+}
+
+async 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];
+  try {
+    await client.updateCapabilities({ tools: selectedTools.value });
+  } catch {
+    selectedTools.value = previous;
+  }
+}
+
+async function setMcpServerEnabled(id: string, enabled: boolean): Promise<void> {
+  const previous = [...selectedMcpServers.value];
+  const next = new Set(previous);
+  if (enabled) next.add(id);
+  else next.delete(id);
+  selectedMcpServers.value = [...next];
+  try {
+    await client.updateCapabilities({ mcpServers: selectedMcpServers.value });
+  } catch {
+    selectedMcpServers.value = previous;
+  }
+}
+
+function setPluginEnabled(id: string, enabled: boolean): void {
+  void client.setPluginEnabled(id, enabled);
+}
+</script>
+
+<template>
+  <div class="capability-control">
+    <button
+      ref="triggerRef"
+      type="button"
+      class="capability-trigger"
+      :class="{ open }"
+      :aria-expanded="open"
+      aria-haspopup="menu"
+      :aria-label="t('capabilityMenu.triggerLabel')"
+      @click.stop="toggleOpen"
+    >
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M4 3.5h8M4 8h8M4 12.5h8" />
+        <circle cx="6" cy="3.5" r="1.2" fill="currentColor" stroke="none" />
+        <circle cx="10" cy="8" r="1.2" fill="currentColor" stroke="none" />
+        <circle cx="7" cy="12.5" r="1.2" fill="currentColor" stroke="none" />
+      </svg>
+      <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" @close="close">
+      <div class="capability-panel">
+        <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>
+                  <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>
+
+              <div v-if="showMcp" class="capability-group">
+                <div class="capability-group-title">{{ t('capabilityMenu.mcp.title') }}</div>
+                <p class="capability-caption">{{ t('capabilityMenu.mcp.caption') }}</p>
+                <div v-if="connectorsLoading" class="capability-loading">
+                  <ActivitySpinner :label="t('capabilityMenu.loading')" />
+                </div>
+                <template v-else>
+                  <MenuRow
+                    v-for="server in connectors"
+                    :key="server.id"
+                    class="mcp-row"
+                    :selected="selectedMcpServers.includes(server.id)"
+                    :title="server.name"
+                    @click="void setMcpServerEnabled(server.id, !selectedMcpServers.includes(server.id))"
+                  >
+                    <template #label>{{ server.name }}</template>
+                    <template #trailing>
+                      <SwitchToggle
+                        :model-value="selectedMcpServers.includes(server.id)"
+                        :aria-label="t('capabilityMenu.mcp.toggle', { name: server.name })"
+                        @click.stop
+                        @update:model-value="void setMcpServerEnabled(server.id, $event)"
+                      />
+                    </template>
+                  </MenuRow>
+                </template>
+              </div>
+
+              <MenuRow v-if="showPlugins" :count="plugins.length" @click="view = 'plugins'">
+                <template #label>{{ t('capabilityMenu.plugins.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>
+            </div>
+
+            <div class="capability-view capability-view-secondary">
+              <MenuRow v-if="view !== 'root'" class="capability-back" :count="drilldownCount" @click="view = 'root'">
+                <template #leading>
+                  <svg class="back-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="m10 3-5 5 5 5" /></svg>
+                </template>
+                <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'">
+                <p class="capability-caption">{{ t('capabilityMenu.skills.caption') }}</p>
+                <div v-if="skillsLoading" class="capability-loading">
+                  <ActivitySpinner :label="t('capabilityMenu.loading')" />
+                </div>
+                <template v-else>
+                  <MenuRow
+                    v-for="skill in skills"
+                    :key="skill.name"
+                    class="skill-row"
+                    disabled
+                    :title="skill.description"
+                    :aria-label="t('capabilityMenu.skills.toggle', { name: skill.name })"
+                  >
+                    <template #label>{{ skill.name }}</template>
+                  </MenuRow>
+                </template>
+              </template>
+
+              <template v-else-if="view === 'plugins'">
+                <p class="capability-caption">{{ t('capabilityMenu.plugins.caption') }}</p>
+                <div v-if="pluginsLoading" class="capability-loading">
+                  <ActivitySpinner :label="t('capabilityMenu.loading')" />
+                </div>
+                <template v-else>
+                  <MenuRow
+                    v-for="plugin in plugins"
+                    :key="plugin.id"
+                    class="plugin-row"
+                    :selected="plugin.enabled"
+                    :title="plugin.displayName"
+                    @click="setPluginEnabled(plugin.id, !plugin.enabled)"
+                  >
+                    <template #label>{{ plugin.displayName }}</template>
+                    <template #trailing>
+                      <SwitchToggle
+                        :model-value="plugin.enabled"
+                        :aria-label="t('capabilityMenu.plugins.toggle', { name: plugin.displayName })"
+                        @click.stop
+                        @update:model-value="setPluginEnabled(plugin.id, $event)"
+                      />
+                    </template>
+                  </MenuRow>
+                </template>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Popover>
+  </div>
+</template>
+
+<style scoped>
+.capability-control {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.capability-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: none;
+  min-width: 30px;
+  height: 30px;
+  padding: 2px 7px;
+  border: 0;
+  border-radius: var(--r-sm);
+  background: none;
+  color: var(--muted);
+  font: inherit;
+  font-size: var(--ui-font-size);
+  line-height: 1;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.capability-trigger:hover,
+.capability-trigger.open {
+  background: var(--soft);
+  color: var(--ink);
+}
+
+.capability-trigger svg {
+  width: 16px;
+  height: 16px;
+  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;
+  overflow: hidden;
+}
+
+.capability-viewport {
+  max-height: 288px;
+  overflow: hidden;
+}
+
+.capability-track {
+  display: flex;
+  align-items: flex-start;
+  width: 200%;
+  transform: translateX(0);
+  transition: transform 150ms ease;
+}
+
+.capability-track.is-drilled {
+  transform: translateX(-50%);
+}
+
+.capability-view {
+  flex: 0 0 50%;
+  min-width: 0;
+  max-height: 288px;
+  overflow-y: auto;
+}
+
+.capability-group-title {
+  padding: 6px 8px 2px;
+  color: var(--ink);
+  font-size: var(--ui-font-size-xs);
+  font-weight: 600;
+}
+
+.capability-caption {
+  margin: 0;
+  padding: 2px 8px 6px;
+  color: var(--muted);
+  font-size: var(--ui-font-size-xs);
+  line-height: 1.35;
+}
+
+.capability-loading {
+  display: flex;
+  align-items: center;
+  min-height: 27px;
+  padding: 0 8px 6px;
+  color: var(--muted);
+}
+
+.capability-loading :deep(.activity-spin) {
+  font-size: var(--ui-font-size-sm);
+}
+
+.chevron,
+.back-chevron {
+  display: block;
+  width: 14px;
+  height: 14px;
+  color: var(--muted);
+}
+
+.capability-back {
+  margin-bottom: 2px;
+}
+
+@media (max-width: 640px) {
+  .capability-trigger-label {
+    display: none;
+  }
+
+  .capability-trigger {
+    padding: 2px 6px;
+  }
+}
+</style>
diff --git a/apps/pythinker-web/src/components/ChatDock.vue b/apps/pythinker-web/src/components/ChatDock.vue
index 242931fe..5cdbf9e4 100644
--- a/apps/pythinker-web/src/components/ChatDock.vue
+++ b/apps/pythinker-web/src/components/ChatDock.vue
@@ -332,8 +332,9 @@ defineExpose({ loadForEdit });
 
 /* Use a different surface so the card radius reads against the page, especially in dark mode; --sh only exists on the modern and pythinker themes, hence the fallback. */
 .chat-dock :deep(.composer-card) {
-  background: var(--panel);
-  box-shadow: var(--sh, 0 6px 18px rgba(0, 0, 0, 0.28));
+  background: color-mix(in srgb, var(--panel) 78%, transparent);
+  backdrop-filter: blur(16px);
+  box-shadow: var(--sh, 0 6px 18px color-mix(in srgb, var(--ink) 28%, transparent));
 }
 
 .chat-dock.align-center { margin-left: auto; margin-right: auto; }
diff --git a/apps/pythinker-web/src/components/Composer.vue b/apps/pythinker-web/src/components/Composer.vue
index ff1bf16e..7e3abf5e 100644
--- a/apps/pythinker-web/src/components/Composer.vue
+++ b/apps/pythinker-web/src/components/Composer.vue
@@ -4,6 +4,7 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SlashMenu from './SlashMenu.vue';
 import MentionMenu from './MentionMenu.vue';
+import CapabilityMenu from './CapabilityMenu.vue';
 import type { SlashCommand } from '../lib/slashCommands';
 import { buildSlashItems, filterCommands, parseSlash } from '../lib/slashCommands';
 import type { FileItem } from './MentionMenu.vue';
@@ -1078,6 +1079,8 @@ function selectModel(modelId: string): void {
           >
             <svg class="attach-icon" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M8 3v10M3 8h10"/></svg>
           </button>
+          <span v-if="hasUpload" class="toolbar-divider" aria-hidden="true" />
+          <CapabilityMenu v-if="sessionId" :session-id="sessionId" />
 
           <!-- Permission pill — click to open dropdown -->
           <span
@@ -1318,12 +1321,18 @@ function selectModel(modelId: string): void {
 .composer-card {
   position: relative;
   border: 1px solid var(--line);
-  border-radius: 16px;
-  background: var(--bg);
-  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+  border-radius: var(--r-xl);
+  background: color-mix(in srgb, var(--bg) 82%, transparent);
+  backdrop-filter: blur(16px);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 4%, transparent);
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 
+.composer-card:hover,
+.composer-card:focus-within {
+  border-color: color-mix(in srgb, var(--line) 55%, var(--ink));
+}
+
 
 
 /* Attachment strip */
@@ -1535,10 +1544,11 @@ function selectModel(modelId: string): void {
   font-family: var(--mono);
   font-size: var(--ui-font-size);
   background: transparent;
-  height: 56px;
+  height: auto;
   min-height: 56px;
-  max-height: 56px;
+  max-height: 384px;
   overflow-y: auto;
+  field-sizing: content;
   line-height: 1.5;
   margin-bottom: 6px;
 }
@@ -1570,12 +1580,13 @@ function selectModel(modelId: string): void {
 /* Send button — circular icon (morphs into the abort square while running) */
 .send {
   width: 30px;
+  min-width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--blue);
   color: var(--bg); /* on-accent text — readable in dark + mono-dark */
   border: none;
-  padding: 0;
+  padding: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1595,6 +1606,8 @@ function selectModel(modelId: string): void {
 
 .send svg {
   flex: none;
+  width: 20px;
+  height: 20px;
 }
 
 .send-icon {
@@ -1621,9 +1634,9 @@ function selectModel(modelId: string): void {
   align-items: center;
   justify-content: space-between;
   padding: 6px 10px 4px;
-  background: color-mix(in srgb, var(--panel2), black 1.5%);
+  background: color-mix(in srgb, var(--panel2) 98.5%, var(--ink) 1.5%);
   position: relative;
-  border-radius: 0 0 var(--r-md) var(--r-md);
+  border-radius: 0 0 var(--r-xl) var(--r-xl);
 }
 
 .toolbar-left,
@@ -1635,14 +1648,16 @@ function selectModel(modelId: string): void {
   overflow: hidden;
 }
 
-/* Attach button (pill style, matches permission/plan) */
+/* Attach button */
 .attach-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
-  padding: 2px 7px;
-  border-radius: 6px;
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  padding: 0;
+  border-radius: 50%;
   font-size: var(--ui-font-size);
   color: var(--muted);
   cursor: pointer;
@@ -1663,6 +1678,14 @@ function selectModel(modelId: string): void {
   background: var(--soft);
 }
 
+.toolbar-divider {
+  width: 1px;
+  height: 16px;
+  flex: none;
+  margin: 0 4px;
+  background: var(--line);
+}
+
 /* Permission pill */
 .perm-pill {
   display: inline-flex;
@@ -2125,19 +2148,19 @@ function selectModel(modelId: string): void {
       var(--dock-inline-left, max(12px, env(safe-area-inset-left)));
   }
   .composer-card {
-    border-radius: 14px;
+    border-radius: var(--r-xl);
     max-width: 100%;
   }
   .input-row {
     gap: 6px;
     min-width: 0;
   }
-  /* Send → 36px round (hide the SVG arrow, show only the ::after glyph) */
+  /* Send → 30px round (hide the SVG arrow, show only the ::after glyph) */
   .send {
-    width: 36px;
-    height: 36px;
-    min-width: 36px;
-    padding: 0;
+    width: 30px;
+    height: 30px;
+    min-width: 30px;
+    padding: 5px;
     border-radius: 50%;
     font-size: 0;
     align-self: flex-end;
@@ -2149,7 +2172,7 @@ function selectModel(modelId: string): void {
   .send::after {
     content: "↑";
     /* Fixed icon glyph size — not part of the UI font scale. */
-    font-size: 17px;
+    font-size: 20px;
     line-height: 1;
     color: var(--bg);
   }
@@ -2177,14 +2200,13 @@ function selectModel(modelId: string): void {
     max-width: calc(100vw - 24px);
   }
 
-  /* Bump mobile font sizes +2px and pin input at 16px to prevent iOS zoom.
-     Single-line-friendly height: 56px desktop default → 44px touch target. */
+  /* Bump mobile font sizes +2px and pin input at 16px to prevent iOS zoom. */
   .ph {
     /* Pinned at 16px to prevent iOS auto-zoom on focus (not part of UI font scale). */
     font-size: 16px;
-    height: 44px;
+    height: auto;
     min-height: 44px;
-    max-height: 44px;
+    max-height: 384px;
   }
   .model-pill,
   .attach-btn {
diff --git a/apps/pythinker-web/src/components/ConversationPane.vue b/apps/pythinker-web/src/components/ConversationPane.vue
index cddb00c1..7ce613ad 100644
--- a/apps/pythinker-web/src/components/ConversationPane.vue
+++ b/apps/pythinker-web/src/components/ConversationPane.vue
@@ -1047,7 +1047,7 @@ defineExpose({ loadComposerForEdit });
 
 <style scoped>
 .con {
-  --read-max: 760px;
+  --read-max: 928px;
   display: flex;
   flex-direction: column;
   min-width: 0;
diff --git a/apps/pythinker-web/src/composables/usePythinkerWebClient.ts b/apps/pythinker-web/src/composables/usePythinkerWebClient.ts
index 24566178..078ae990 100644
--- a/apps/pythinker-web/src/composables/usePythinkerWebClient.ts
+++ b/apps/pythinker-web/src/composables/usePythinkerWebClient.ts
@@ -21,6 +21,7 @@ import type {
   AppConnector,
   AppPlugin,
   AppSkill,
+  AppTool,
   AppSubagent,
   AppTask,
   AppWarning,
@@ -524,6 +525,9 @@ const starredModelIds = ref<string[]>(loadStarredModelsFromStorage());
 // Session-scoped skills (slash-invocable). Loaded lazily per session; the active
 // session's list feeds the composer's `/` menu.
 const skillsBySession = ref<Record<string, AppSkill[]>>({});
+const skillsLoadingBySession = ref<Record<string, boolean>>({});
+const toolsBySession = ref<Record<string, AppTool[]>>({});
+const toolsLoadingBySession = ref<Record<string, boolean>>({});
 const providers = ref<AppProvider[]>([]);
 
 // CSS handles the spinner frames; this only flips the spinner between normal and
@@ -669,6 +673,39 @@ function persistSessionProfile(patch: {
     });
 }
 
+/** Persist the selected tools and MCP servers with optimistic local state. */
+async function updateCapabilities(input: {
+  tools?: string[];
+  mcpServers?: string[];
+}): Promise<void> {
+  const sid = rawState.activeSessionId;
+  if (!sid) return;
+  const previous = rawState.sessions.find((session) => session.id === sid);
+  if (!previous) return;
+
+  rawState.sessions = rawState.sessions.map((session) =>
+    session.id === sid
+      ? {
+          ...session,
+          tools: input.tools !== undefined ? input.tools : session.tools,
+          mcpServers: input.mcpServers !== undefined ? input.mcpServers : session.mcpServers,
+        }
+      : session,
+  );
+
+  try {
+    await getPythinkerWebApi().updateSession(sid, input);
+  } catch (error) {
+    rawState.sessions = rawState.sessions.map((session) =>
+      session.id === sid
+        ? { ...session, tools: previous.tools, mcpServers: previous.mcpServers }
+        : session,
+    );
+    pushOperationFailure('updateCapabilities', error, { sessionId: sid });
+    throw error;
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Theme (Terminal default vs Modern bubbles). Persisted to localStorage and
 // mirrored onto <html data-theme> so fixed/teleported dialogs + sheets inherit.
@@ -1458,6 +1495,7 @@ function stopTaskOutputPolling(): void {
 }
 
 async function loadSkillsForSession(sessionId: string): Promise<void> {
+  skillsLoadingBySession.value = { ...skillsLoadingBySession.value, [sessionId]: true };
   try {
     const api = getPythinkerWebApi();
     const list = await api.listSkills(sessionId);
@@ -1465,6 +1503,20 @@ async function loadSkillsForSession(sessionId: string): Promise<void> {
   } catch {
     // Skills are side data; an older daemon without /skills just yields no
     // slash-skills, the built-in commands still work.
+  } finally {
+    skillsLoadingBySession.value = { ...skillsLoadingBySession.value, [sessionId]: false };
+  }
+}
+
+async function loadToolsForSession(sessionId: string): Promise<void> {
+  toolsLoadingBySession.value = { ...toolsLoadingBySession.value, [sessionId]: true };
+  try {
+    const list = await getPythinkerWebApi().listTools(sessionId);
+    toolsBySession.value = { ...toolsBySession.value, [sessionId]: list };
+  } catch {
+    toolsBySession.value = { ...toolsBySession.value, [sessionId]: [] };
+  } finally {
+    toolsLoadingBySession.value = { ...toolsLoadingBySession.value, [sessionId]: false };
   }
 }
 
@@ -1486,26 +1538,49 @@ async function loadConnectors(): Promise<void> {
 }
 
 const plugins = ref<AppPlugin[]>([]);
+const pluginsLoading = ref(false);
 const subagents = ref<AppSubagent[]>([]);
 
 async function loadPlugins(): Promise<void> {
+  pluginsLoading.value = true;
   try {
     plugins.value = await getPythinkerWebApi().listPlugins();
   } catch {
     // An older daemon has no /plugins; an empty list is the honest answer.
     plugins.value = [];
+  } finally {
+    pluginsLoading.value = false;
   }
 }
 
 async function setPluginEnabled(pluginId: string, enabled: boolean): Promise<void> {
+  const previous = plugins.value.find((plugin) => plugin.id === pluginId)?.enabled;
+  plugins.value = plugins.value.map((plugin) =>
+    plugin.id === pluginId ? { ...plugin, enabled } : plugin,
+  );
   try {
     await getPythinkerWebApi().setPluginEnabled(pluginId, enabled);
-  } catch {
-    // The reload below reports whatever state the daemon ended up in.
+  } catch (error) {
+    if (previous !== undefined) {
+      plugins.value = plugins.value.map((plugin) =>
+        plugin.id === pluginId ? { ...plugin, enabled: previous } : plugin,
+      );
+    }
+    pushOperationFailure('setPluginEnabled', error);
+    return;
   }
   await loadPlugins();
 }
 
+async function loadCapabilityData(sessionId: string): Promise<void> {
+  await Promise.all([
+    loadToolsForSession(sessionId),
+    loadSkillsForSession(sessionId),
+    loadConnectors(),
+    loadPlugins(),
+  ]);
+}
+
 async function loadSubagents(): Promise<void> {
   const workDir = rawState.sessions.find((s) => s.id === rawState.activeSessionId)?.cwd;
   if (workDir === undefined || workDir === '') {
@@ -1867,6 +1942,14 @@ const sessions = computed<Session[]>(() => {
 
 const activeSessionId = computed<string>(() => rawState.activeSessionId ?? '');
 
+const activeSessionCapabilities = computed(() => {
+  const session = rawState.sessions.find((candidate) => candidate.id === rawState.activeSessionId);
+  return {
+    tools: session?.tools,
+    mcpServers: session?.mcpServers,
+  };
+});
+
 /** Slash-invocable skills for the active session (feeds the composer `/` menu). */
 const skills = computed<AppSkill[]>(() => {
   const sid = rawState.activeSessionId;
@@ -4279,6 +4362,7 @@ export function usePythinkerWebClient() {
     workspace,
     sessions,
     activeSessionId,
+    activeSessionCapabilities,
 
     // Workspace view props
     workspacesView,
@@ -4434,10 +4518,16 @@ export function usePythinkerWebClient() {
     loadModels,
     loadProviders,
     skills,
+    skillsLoadingBySession,
+    toolsBySession,
+    toolsLoadingBySession,
+    loadCapabilityData,
+    updateCapabilities,
     activateSkill,
     connectors,
     connectorsLoading,
     plugins,
+    pluginsLoading,
     loadPlugins,
     setPluginEnabled,
     subagents,
diff --git a/apps/pythinker-web/src/i18n/locales/en/capabilityMenu.ts b/apps/pythinker-web/src/i18n/locales/en/capabilityMenu.ts
new file mode 100644
index 00000000..c8b28d3c
--- /dev/null
+++ b/apps/pythinker-web/src/i18n/locales/en/capabilityMenu.ts
@@ -0,0 +1,26 @@
+export default {
+  trigger: 'Capabilities',
+  triggerLabel: 'Choose which capabilities this session may use',
+  back: 'Back',
+  loading: 'Loading…',
+  tools: {
+    title: 'Tools',
+    caption: 'Applies to this session immediately.',
+    toggle: 'Use {name}',
+  },
+  skills: {
+    title: 'Skills',
+    caption: 'Read-only here. Skills cannot be enabled or disabled from this menu.',
+    toggle: 'Skill {name}',
+  },
+  mcp: {
+    title: 'MCP servers',
+    caption: 'Applies to this session immediately.',
+    toggle: 'Use {name}',
+  },
+  plugins: {
+    title: 'Plugins',
+    caption: 'Global to the daemon. Changes affect every session immediately.',
+    toggle: 'Enable {name}',
+  },
+} as const;
diff --git a/apps/pythinker-web/src/i18n/locales/index.ts b/apps/pythinker-web/src/i18n/locales/index.ts
index ec846c25..cfcfb468 100644
--- a/apps/pythinker-web/src/i18n/locales/index.ts
+++ b/apps/pythinker-web/src/i18n/locales/index.ts
@@ -28,6 +28,7 @@ import en_onboarding from './en/onboarding';
 import en_settings from './en/settings';
 import en_header from './en/header';
 import en_sideChat from './en/sideChat';
+import en_capabilityMenu from './en/capabilityMenu';
 
 export const messages = {
   en: {
@@ -61,6 +62,7 @@ export const messages = {
     settings: en_settings,
     header: en_header,
     sideChat: en_sideChat,
+    capabilityMenu: en_capabilityMenu,
   },
 } as const;
 
diff --git a/apps/pythinker-web/src/style.css b/apps/pythinker-web/src/style.css
index 006f84cf..311ea411 100644
--- a/apps/pythinker-web/src/style.css
+++ b/apps/pythinker-web/src/style.css
@@ -41,13 +41,15 @@
   --err: var(--dsw-alias-state-error-secondary);
   /* Subtle hover wash for icon buttons (toast close, etc.). */
   --hover: var(--dsw-alias-interactive-bg-hover);
-  /* Radius scale (Modern). A regular 8 / 12 / 16 progression: list items + pill
-     controls use --r-sm, the input box + cards use --r-md, dialogs use --r-lg.
+  /* Radius scale (Modern). A regular 8 / 12 / 16 / 24 progression: list items + pill
+     controls use --r-sm, input boxes use --r-md, dialogs use --r-lg, and the
+     composer card uses --r-xl.
      The Terminal theme keeps its own sharper 3–4px corners. */
   --r-xs: 6px;
   --r-sm: 8px;
   --r-md: 12px;
   --r-lg: 16px;
+  --r-xl: 24px;
   --ui-font-size: 14px;
   --ui-font-size-sm: calc(var(--ui-font-size) - 1px);
   --ui-font-size-xs: calc(var(--ui-font-size) - 2px);
@@ -387,9 +389,10 @@ html[data-color-scheme="dark"][data-theme="modern"] {
    to the global sheet where they apply reliably. The chat surface is white, so
    the composer card reads as a rounded card via a soft shadow + hairline border. */
 :is(html[data-theme="modern"], html[data-theme="pythinker"]) .composer-card {
-  border-radius: var(--r-md);
+  border-radius: var(--r-xl);
   border: 1px solid var(--line);
-  background: var(--bg);
+  background: color-mix(in srgb, var(--bg) 82%, transparent);
+  backdrop-filter: blur(16px);
   box-shadow: var(--shc);
 }
 
@@ -408,12 +411,12 @@ html[data-color-scheme="dark"][data-theme="modern"] {
   width: 30px;
   min-width: 30px;
   height: 30px;
-  padding: 0;
+  padding: 5px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 1px 2px rgba(20, 23, 28, 0.1);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
   align-self: flex-end;
 }
 :is(html[data-theme="modern"], html[data-theme="pythinker"]) .send:hover { background: var(--blue2); }
@@ -427,10 +430,11 @@ html[data-color-scheme="dark"][data-theme="modern"] {
   background: color-mix(in srgb, var(--panel), black 1.5%);
 }
 :is(html[data-theme="modern"], html[data-theme="pythinker"]) .attach-btn {
-  width: 26px;
-  height: 26px;
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
   padding: 0;
-  border-radius: var(--r-sm);
+  border-radius: 50%;
 }
 :is(html[data-theme="modern"], html[data-theme="pythinker"]) .attach-btn:hover {
   background: var(--soft);
@@ -855,8 +859,8 @@ html[data-color-scheme="dark"][data-theme="pythinker"] {
 /* Composer: the one card that keeps a shadow (effect.shadow.inputDefault),
    with the chat-input radius documented in web-best-practices §8. */
 html[data-theme="pythinker"] .composer-card {
-  border-radius: 20px;
-  box-shadow: 0 5px 16px -4px rgba(0, 0, 0, 0.07);
+  border-radius: var(--r-xl);
+  box-shadow: 0 5px 16px -4px color-mix(in srgb, var(--ink) 7%, transparent);
 }
 
 /* Cards stay flat: no hover lift, no shadow (Quiet Utility / card.md). */
diff --git a/apps/pythinker-web/test/capability-menu.test.ts b/apps/pythinker-web/test/capability-menu.test.ts
new file mode 100644
index 00000000..1ae7807c
--- /dev/null
+++ b/apps/pythinker-web/test/capability-menu.test.ts
@@ -0,0 +1,291 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { flushPromises, mount } from '@vue/test-utils';
+import { createI18n } from 'vue-i18n';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { Ref } from 'vue';
+
+import { DaemonPythinkerWebApi } from '../src/api/daemon/client';
+import CapabilityMenu from '../src/components/CapabilityMenu.vue';
+
+type MockFunction = ReturnType<typeof vi.fn>;
+type TestTool = { name: string; description: string; inputSchema: unknown; source: 'builtin' };
+type TestSkill = { name: string; description: string; source: string };
+type TestConnector = { id: string; name: string; transport: 'http' | 'stdio'; status: 'connected'; toolCount: number };
+type TestPlugin = { id: string; displayName: string; enabled: boolean };
+
+interface MockClient {
+  activeSessionId: Ref<string>;
+  activeSessionCapabilities: Ref<{ tools: string[]; mcpServers: string[] }>;
+  toolsBySession: Ref<Record<string, TestTool[]>>;
+  toolsLoadingBySession: Ref<Record<string, boolean>>;
+  skills: Ref<TestSkill[]>;
+  skillsLoadingBySession: Ref<Record<string, boolean>>;
+  connectors: Ref<TestConnector[]>;
+  connectorsLoading: Ref<boolean>;
+  plugins: Ref<TestPlugin[]>;
+  pluginsLoading: Ref<boolean>;
+  loadCapabilityData: MockFunction;
+  updateCapabilities: MockFunction;
+  setPluginEnabled: MockFunction;
+  updateSession: MockFunction;
+}
+
+const clientState = vi.hoisted(() => ({ value: undefined as MockClient | undefined }));
+
+vi.mock('../src/composables/usePythinkerWebClient', async () => {
+  const { ref: vueRef } = await import('vue');
+  const updateSession = vi.fn(async () => undefined);
+  const client = {
+    activeSessionId: vueRef('session_1'),
+    activeSessionCapabilities: vueRef({ tools: ['Read'], mcpServers: ['mcp_1'] }),
+    toolsBySession: vueRef({
+      session_1: [
+        { name: 'Read', description: 'Read files', inputSchema: {}, source: 'builtin' },
+        { name: 'Write', description: 'Write files', inputSchema: {}, source: 'builtin' },
+      ],
+    }),
+    toolsLoadingBySession: vueRef({ session_1: false }),
+    skills: vueRef([{ name: 'review', description: 'Review code', source: 'project' }]),
+    skillsLoadingBySession: vueRef({ session_1: false }),
+    connectors: vueRef([
+      { id: 'mcp_1', name: 'Docs', transport: 'http', status: 'connected', toolCount: 2 },
+      { id: 'mcp_2', name: 'Issue tracker', transport: 'stdio', status: 'connected', toolCount: 1 },
+    ]),
+    connectorsLoading: vueRef(false),
+    plugins: vueRef([{ id: 'plugin_1', displayName: 'Review plugin', enabled: true }]),
+    pluginsLoading: vueRef(false),
+    loadCapabilityData: vi.fn(),
+    updateCapabilities: vi.fn((input: Record<string, unknown>) => {
+      void updateSession('session_1', input);
+    }),
+    setPluginEnabled: vi.fn(),
+    updateSession,
+  };
+  clientState.value = client;
+  return { usePythinkerWebClient: () => client };
+});
+
+const menuMessages = {
+  capabilityMenu: {
+    trigger: 'Capabilities',
+    triggerLabel: 'Choose capabilities',
+    back: 'Back',
+    loading: 'Loading',
+    tools: {
+      title: 'Tools',
+      caption: 'Applies to this session immediately.',
+      toggle: 'Use {name}',
+    },
+    skills: {
+      title: 'Skills',
+      caption: 'Read-only here.',
+      toggle: 'Skill {name}',
+    },
+    mcp: {
+      title: 'MCP servers',
+      caption: 'Applies to this session immediately.',
+      toggle: 'Use {name}',
+    },
+    plugins: {
+      title: 'Plugins',
+      caption: 'Global to the daemon. Changes affect every session immediately.',
+      toggle: 'Enable {name}',
+    },
+  },
+};
+
+function okEnvelope(data: unknown): Response {
+  return new Response(
+    JSON.stringify({ code: 0, msg: 'ok', data, request_id: 'req_1' }),
+    { status: 200, headers: { 'content-type': 'application/json' } },
+  );
+}
+
+function api(): DaemonPythinkerWebApi {
+  return new DaemonPythinkerWebApi({
+    serverHttpUrl: 'http://example.test:58627',
+    clientId: 'web_test',
+    clientName: 'pythinker-code-web',
+    clientVersion: '0.1.1',
+    clientUiMode: 'web',
+  });
+}
+
+function mountMenu() {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: { en: menuMessages },
+    missingWarn: false,
+    fallbackWarn: false,
+  });
+  return mount(CapabilityMenu, {
+    props: { sessionId: 'session_1' },
+    attachTo: document.body,
+    global: { plugins: [i18n] },
+  });
+}
+
+function client(): MockClient {
+  if (!clientState.value) throw new Error('mock client is not ready');
+  return clientState.value;
+}
+
+afterEach(() => {
+  document.body.replaceChildren();
+  vi.restoreAllMocks();
+  const current = client();
+  current.activeSessionCapabilities.value = { tools: ['Read'], mcpServers: ['mcp_1'] };
+  current.toolsBySession.value = {
+    session_1: [
+      { name: 'Read', description: 'Read files', inputSchema: {}, source: 'builtin' },
+      { name: 'Write', description: 'Write files', inputSchema: {}, source: 'builtin' },
+    ],
+  };
+  current.skills.value = [{ name: 'review', description: 'Review code', source: 'project' }];
+  current.connectors.value = [
+    { id: 'mcp_1', name: 'Docs', transport: 'http', status: 'connected', toolCount: 2 },
+    { id: 'mcp_2', name: 'Issue tracker', transport: 'stdio', status: 'connected', toolCount: 1 },
+  ];
+  current.plugins.value = [{ id: 'plugin_1', displayName: 'Review plugin', enabled: true }];
+  current.toolsLoadingBySession.value = { session_1: false };
+  current.skillsLoadingBySession.value = { session_1: false };
+  current.connectorsLoading.value = false;
+  current.pluginsLoading.value = false;
+  current.updateCapabilities.mockReset();
+  current.updateCapabilities.mockImplementation((input: Record<string, unknown>) => {
+    void current.updateSession('session_1', input);
+  });
+  current.updateSession.mockReset();
+  current.updateSession.mockResolvedValue(undefined);
+  current.loadCapabilityData.mockClear();
+});
+
+describe('daemon capability contracts', () => {
+  it('listTools requests the session id and maps the response', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(okEnvelope({
+      tools: [
+        {
+          name: 'Read',
+          description: 'Read files',
+          input_schema: { type: 'object' },
+          source: 'builtin',
+        },
+        {
+          name: 'mcp__docs__search',
+          description: 'Search docs',
+          input_schema: {},
+          source: 'mcp',
+          mcp_server_id: 'mcp_1',
+        },
+      ],
+    }));
+    vi.stubGlobal('fetch', fetchMock);
+
+    const tools = await api().listTools('session/1');
+    const requestUrl = new URL(String(fetchMock.mock.calls[0]![0]));
+
+    expect(requestUrl.pathname.endsWith('/tools')).toBe(true);
+    expect(requestUrl.searchParams.get('session_id')).toBe('session/1');
+    expect(tools).toEqual([
+      { name: 'Read', description: 'Read files', inputSchema: { type: 'object' }, source: 'builtin', mcpServerId: undefined },
+      { name: 'mcp__docs__search', description: 'Search docs', inputSchema: {}, source: 'mcp', mcpServerId: 'mcp_1' },
+    ]);
+  });
+
+  it('updateSession sends only the supplied capability keys', async () => {
+    const sessionResponse = {
+      id: 'session_1',
+      title: 'Session',
+      created_at: '2026-08-01T00:00:00.000Z',
+      updated_at: '2026-08-01T00:00:00.000Z',
+      status: 'idle',
+      metadata: { cwd: '/repo' },
+      agent_config: { model: 'test/model' },
+      usage: {
+        input_tokens: 0,
+        output_tokens: 0,
+        cache_read_tokens: 0,
+        cache_creation_tokens: 0,
+        total_cost_usd: 0,
+        context_tokens: 0,
+        context_limit: 128_000,
+        turn_count: 0,
+      },
+      permission_rules: [],
+      message_count: 0,
+      last_seq: 0,
+    };
+    const fetchMock = vi.fn().mockImplementation(() => Promise.resolve(okEnvelope(sessionResponse)));
+    vi.stubGlobal('fetch', fetchMock);
+    const daemon = api();
+
+    await daemon.updateSession('session_1', { tools: ['Read'] });
+    await daemon.updateSession('session_1', { mcpServers: ['mcp_1'] });
+    await daemon.updateSession('session_1', {});
+
+    const bodies = fetchMock.mock.calls.map((call) => JSON.parse((call[1] as RequestInit).body as string));
+    expect(bodies[0]).toEqual({ agent_config: { tools: ['Read'] } });
+    expect(bodies[1]).toEqual({ agent_config: { mcp_servers: ['mcp_1'] } });
+    expect(bodies[2]).not.toHaveProperty('agent_config.tools');
+    expect(bodies[2]).not.toHaveProperty('agent_config.mcp_servers');
+  });
+});
+
+describe('CapabilityMenu', () => {
+  it('omits a capability group with no items', async () => {
+    const current = client();
+    current.toolsBySession.value = { session_1: [] };
+    current.skills.value = [];
+    current.connectors.value = [];
+    current.plugins.value = [];
+
+    const wrapper = mountMenu();
+    await wrapper.get('.capability-trigger').trigger('click');
+    await flushPromises();
+
+    expect(document.body.querySelector('.capability-panel')?.querySelectorAll('.menu-row')).toHaveLength(0);
+  });
+
+  it('toggling an MCP server calls updateSession with the new server list', async () => {
+    client().activeSessionCapabilities.value = { tools: ['Read'], mcpServers: ['mcp_1', 'mcp_2'] };
+    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 flushPromises();
+
+    expect(client().updateSession).toHaveBeenCalledWith('session_1', { mcpServers: ['mcp_2'] });
+  });
+
+  it('restores the previous toggle state when updateSession rejects', async () => {
+    const current = client();
+    current.updateCapabilities.mockRejectedValueOnce(new Error('daemon unreachable'));
+    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 flushPromises();
+
+    expect(toggle.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('renders selected tools and MCP servers as chips', () => {
+    const wrapper = mountMenu();
+
+    expect(wrapper.findAll('.chip').map((chip) => chip.text())).toEqual(['×Read', '×Docs']);
+  });
+
+  it('keeps CapabilityMenu.vue free of dark utilities and color literals', () => {
+    const source = readFileSync(join(import.meta.dirname, '../src/components/CapabilityMenu.vue'), 'utf8');
+    expect(source).not.toMatch(/dark:/);
+    expect(source).not.toMatch(/#[0-9a-f]{3,8}\b/i);
+    expect(source).not.toContain(['r', 'gb('].join(''));
+    expect(source).not.toContain(['r', 'gba('].join(''));
+  });
+});
diff --git a/apps/pythinker-web/test/composer.test.ts b/apps/pythinker-web/test/composer.test.ts
index a618dbcc..3a0bd228 100644
--- a/apps/pythinker-web/test/composer.test.ts
+++ b/apps/pythinker-web/test/composer.test.ts
@@ -1,13 +1,15 @@
 import { readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
 import { flushPromises, mount } from '@vue/test-utils';
 import { createI18n } from 'vue-i18n';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import Composer from '../src/components/Composer.vue';
 import type { AppModel } from '../src/api/types';
 
-const sourcePath = (path: string) => fileURLToPath(new URL(path, import.meta.url));
+const sourcePath = (path: string) => join(import.meta.dirname, path);
 const composerSource = readFileSync(sourcePath('../src/components/Composer.vue'), 'utf8');
+const conversationPaneSource = readFileSync(sourcePath('../src/components/ConversationPane.vue'), 'utf8');
+const styleSource = readFileSync(sourcePath('../src/style.css'), 'utf8');
 
 function mountComposer(props: Record<string, unknown> = {}) {
   const i18n = createI18n({
@@ -82,6 +84,80 @@ afterEach(() => {
 });
 
 describe('Composer styling', () => {
+  it('uses the shared xl radius token for the composer card', () => {
+    const composerCardRule = composerSource.match(/(?:^|\n)\.composer-card\s*\{([^}]*)\}/)?.[1] ?? '';
+    expect(composerCardRule.trim()).not.toBe('');
+    expect(composerCardRule).toMatch(/border-radius:\s*var\(--r-xl\);/);
+
+    const modernCardRule = styleSource.match(/:is\(html\[data-theme="modern"\], html\[data-theme="pythinker"\]\) \.composer-card\s*\{([^}]*)\}/)?.[1] ?? '';
+    expect(modernCardRule).toMatch(/border-radius:\s*var\(--r-xl\);/);
+
+    const pythinkerCardRule = styleSource.match(/html\[data-theme="pythinker"\] \.composer-card\s*\{([^}]*)\}/)?.[1] ?? '';
+    expect(pythinkerCardRule).toMatch(/border-radius:\s*var\(--r-xl\);/);
+  });
+
+  it('defines the xl radius token in the shared style tokens', () => {
+    expect(styleSource).toMatch(/--r-xl:\s*24px;/);
+  });
+
+  it('uses a translucent card surface with a backdrop blur', () => {
+    const composerCardRule = composerSource.match(/(?:^|\n)\.composer-card\s*\{([^}]*)\}/)?.[1] ?? '';
+    expect(composerCardRule).toMatch(/background:\s*color-mix\([^;]+transparent\);/);
+    expect(composerCardRule).toMatch(/backdrop-filter:\s*blur\([^;]+\);/);
+  });
+
+  it('strengthens the card border on hover and focus within', () => {
+    const interactionRule = composerSource.match(/(?:^|\n)\.composer-card:hover,\s*\.composer-card:focus-within\s*\{([^}]*)\}/)?.[1] ?? '';
+    expect(interactionRule.trim()).not.toBe('');
+    expect(interactionRule).toMatch(/border-color:\s*[^;]+;/);
+  });
+
+  it('caps the input at 384px and scrolls its content', () => {
+    const inputRule = composerSource.match(/(?:^|\n)\.ph\s*\{([^}]*)\}/)?.[1] ?? '';
+    expect(inputRule).toMatch(/max-height:\s*384px;/);
+    expect(inputRule).toMatch(/overflow-y:\s*auto;/);
+    expect(inputRule).toMatch(/field-sizing:\s*content;/);
+  });
+
+  it('uses circular attachment controls and a divider after the plus button', () => {
+    const attachRule = composerSource.match(/(?:^|\n)\.attach-btn\s*\{([^}]*)\}/)?.[1] ?? '';
+    expect(attachRule).toMatch(/width:\s*30px;/);
+    expect(attachRule).toMatch(/height:\s*30px;/);
+    expect(attachRule).toMatch(/border-radius:\s*50%;/);
+
+    const themedAttachRule = styleSource.match(/:is\(html\[data-theme="modern"\], html\[data-theme="pythinker"\]\) \.attach-btn\s*\{([^}]*)\}/)?.[1] ?? '';
+    expect(themedAttachRule).toMatch(/width:\s*30px;/);
+    expect(themedAttachRule).toMatch(/height:\s*30px;/);
+    expect(themedAttachRule).toMatch(/border-radius:\s*50%;/);
+
+    const dividerRule = composerSource.match(/(?:^|\n)\.toolbar-divider\s*\{([^}]*)\}/)?.[1] ?? '';
+    expect(dividerRule).toMatch(/width:\s*1px;/);
+    expect(dividerRule).toMatch(/height:\s*16px;/);
+    expect(composerSource).toMatch(/class="attach-btn"[\s\S]*class="toolbar-divider"/);
+  });
+
+  it('pads the send button around a 20px glyph and keeps the accent fill', () => {
+    const sendRule = composerSource.match(/(?:^|\n)\.send\s*\{([^}]*)\}/)?.[1] ?? '';
+    expect(sendRule).toMatch(/padding:\s*5px;/);
+    // The send button carries the theme accent, not a monochrome fill: --blue is
+    // the Pythinker brand colour and each theme redefines it.
+    expect(sendRule).toMatch(/background:\s*var\(--blue\);/);
+    expect(sendRule).toMatch(/color:\s*var\(--bg\);/);
+
+    const sendIconRule = composerSource.match(/(?:^|\n)\.send svg\s*\{([^}]*)\}/)?.[1] ?? '';
+    expect(sendIconRule).toMatch(/width:\s*20px;/);
+    expect(sendIconRule).toMatch(/height:\s*20px;/);
+
+    const themedSendRule = styleSource.match(/:is\(html\[data-theme="modern"\], html\[data-theme="pythinker"\]\) \.send\s*\{([^}]*)\}/)?.[1] ?? '';
+    expect(themedSendRule).toMatch(/padding:\s*5px;/);
+    expect(themedSendRule).not.toMatch(/background:\s*var\(--ink\);/);
+  });
+
+  it('widens the shared reading column to 928px', () => {
+    const conRule = conversationPaneSource.match(/(?:^|\n)\.con\s*\{([^}]*)\}/)?.[1] ?? '';
+    expect(conRule).toMatch(/--read-max:\s*928px;/);
+  });
+
   it('places the composer border flush against the message list', () => {
     const composerRule = composerSource.match(/(?:^|\n)\.composer\s*\{([^}]*)\}/)?.[1] ?? '';
     expect(composerRule.trim()).not.toBe('');