From 234342a06161e716ab7a3d9e9993346cf01fe567 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 20:57:10 -0400
Subject: [PATCH 01/16] feat(web): split the model menu into a model and an
 effort list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The flat menu showed every model of the provider plus every effort level at
once, so it was tall before it had anything to say. It now opens on two rows
— Model and Effort, each with its current value — and drills into one list at
a time, with a back row to return.
---
 .../pythinker-web/src/components/Composer.vue | 92 +++++++++++++++----
 .../src/i18n/locales/en/status.ts             |  2 +-
 apps/pythinker-web/test/composer.test.ts      | 53 +++++++++++
 3 files changed, 127 insertions(+), 20 deletions(-)

diff --git a/apps/pythinker-web/src/components/Composer.vue b/apps/pythinker-web/src/components/Composer.vue
index 3216fcdef..ff1bf16ec 100644
--- a/apps/pythinker-web/src/components/Composer.vue
+++ b/apps/pythinker-web/src/components/Composer.vue
@@ -741,12 +741,15 @@ const hasUpload = computed(() => !!props.uploadImage);
 const dropdownOpen = ref(false);
 const modelPillRef = ref<HTMLElement | null>(null);
 const modelDropdownStyle = ref<Record<string, string>>({});
+/** The dropdown opens on a two-row root menu and drills into one list at a time. */
+const dropdownView = ref<'root' | 'model' | 'effort'>('root');
 const permDropdownOpen = ref(false);
 const toolbarRef = ref<HTMLElement | null>(null);
 
 function toggleDropdown(): void {
   dropdownOpen.value = !dropdownOpen.value;
   if (dropdownOpen.value) {
+    dropdownView.value = 'root';
     const rect = modelPillRef.value?.getBoundingClientRect();
     modelDropdownStyle.value = rect
       ? { maxHeight: `${Math.min(360, Math.max(0, rect.top - 4 - 12))}px` }
@@ -1210,8 +1213,46 @@ function selectModel(modelId: string): void {
           </span>
         </div>
 
-        <!-- Model dropdown — current provider models + controls + more -->
-        <div v-if="dropdownOpen && status" class="model-dropdown" :style="modelDropdownStyle" role="menu" @click.stop>
+        <!-- Model dropdown — a compact root menu that drills into model / effort -->
+        <div v-if="dropdownOpen && status" class="model-dropdown" :class="{ 'is-root': dropdownView === 'root' }" :style="modelDropdownStyle" role="menu" @click.stop>
+          <template v-if="dropdownView === 'root'">
+            <button class="md-row md-row-nav" role="menuitem" @click="dropdownView = 'model'">
+              <span class="md-name">{{ t('status.modelLabel') }}</span>
+              <span class="md-value">{{ status.model }}</span>
+              <svg class="md-chevron" viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
+            </button>
+            <button class="md-row md-row-nav" role="menuitem" :disabled="thinkingAvailability === 'unsupported'" @click="dropdownView = 'effort'">
+              <span class="md-name">{{ t('status.effortRow') }}</span>
+              <span class="md-value">{{ thinkingAvailability === 'unsupported' ? t('status.modeNotSupported') : effortLabel(currentEffort) }}</span>
+              <svg v-if="thinkingAvailability !== 'unsupported'" class="md-chevron" viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
+            </button>
+          </template>
+
+          <!-- Effort levels -->
+          <template v-else-if="dropdownView === 'effort'">
+            <button class="md-row md-row-back" role="menuitem" @click="dropdownView = 'root'">
+              <svg class="md-chevron md-chevron-back" viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 3L5 8l5 5"/></svg>
+              <span class="md-name">{{ t('status.effortRow') }}</span>
+            </button>
+            <button
+              v-for="level in effortLevels"
+              :key="level"
+              class="md-row"
+              role="menuitem"
+              @click="selectEffort(level)"
+            >
+              <span class="md-check"><svg v-if="level === currentEffort" viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3.5 3.5L13 4.5"/></svg></span>
+              <span class="md-name">{{ effortLabel(level) }}</span>
+            </button>
+          </template>
+
+          <!-- Model list -->
+          <template v-else>
+          <button class="md-row md-row-back" role="menuitem" @click="dropdownView = 'root'">
+            <svg class="md-chevron md-chevron-back" viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 3L5 8l5 5"/></svg>
+            <span class="md-name">{{ t('status.modelLabel') }}</span>
+          </button>
+
           <!-- Starred models from other providers -->
           <div v-if="starredOtherModels.length > 0" class="md-section">{{ t('status.starredModels') }}</div>
           <button
@@ -1247,23 +1288,6 @@ function selectModel(modelId: string): void {
 
           <div v-if="providerModels.length > 0" class="md-divider" />
 
-          <!-- Thinking effort -->
-          <div class="md-section">{{ t('status.effortLabel') }}</div>
-          <div v-if="thinkingAvailability === 'unsupported'" class="md-cache-note">{{ t('status.modeNotSupported') }}</div>
-          <template v-else>
-            <button
-              v-for="level in effortLevels"
-              :key="level"
-              class="md-row"
-              role="menuitem"
-              @click="selectEffort(level)"
-            >
-              <span class="md-check"><svg v-if="level === currentEffort" viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3.5 3.5L13 4.5"/></svg></span>
-              <span class="md-name">{{ effortLabel(level) }}</span>
-            </button>
-          </template>
-
-          <div class="md-divider" />
           <div class="md-cache-note">{{ t('status.cacheNote') }}</div>
 
           <div class="md-divider" />
@@ -1272,6 +1296,7 @@ function selectModel(modelId: string): void {
           <button class="md-row md-row-more" role="menuitem" @click="closeDropdown(); emit('pickModel');">
             <span class="md-name">{{ t('status.moreModels') }}</span>
           </button>
+          </template>
         </div>
       </div>
   </div>
@@ -1827,6 +1852,35 @@ function selectModel(modelId: string): void {
   font-size: var(--ui-font-size-xs);
   flex: none;
 }
+
+/* Root menu: two rows, so it sizes to its content and never scrolls. */
+.model-dropdown.is-root {
+  min-width: 240px;
+  overflow-y: visible;
+}
+
+.md-value {
+  color: var(--muted);
+  flex: none;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.md-chevron {
+  flex: none;
+  color: var(--faint);
+}
+
+.md-row-nav:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.md-row-back {
+  color: var(--muted);
+}
 .md-star {
   color: var(--star);
   flex: none;
diff --git a/apps/pythinker-web/src/i18n/locales/en/status.ts b/apps/pythinker-web/src/i18n/locales/en/status.ts
index dabe21ae6..2ba72b0a0 100644
--- a/apps/pythinker-web/src/i18n/locales/en/status.ts
+++ b/apps/pythinker-web/src/i18n/locales/en/status.ts
@@ -32,7 +32,7 @@ export default {
   // Thinking selector
   thinkingLabel: 'thinking',
   thinkingTooltip: 'Toggle thinking mode',
-  effortLabel: 'Thinking effort',
+  effortRow: 'Effort',
   effortLevels: {
     off: 'Off',
     minimal: 'Minimal',
diff --git a/apps/pythinker-web/test/composer.test.ts b/apps/pythinker-web/test/composer.test.ts
index bd187766e..a618dbcc9 100644
--- a/apps/pythinker-web/test/composer.test.ts
+++ b/apps/pythinker-web/test/composer.test.ts
@@ -35,10 +35,21 @@ function mountComposer(props: Record<string, unknown> = {}) {
           compact: { desc: 'Compact context' },
         },
         status: {
+          modelLabel: 'Model',
           modelTooltip: 'Switch model',
           starredModels: 'Starred',
           moreModels: 'More models…',
           thinkingLabel: 'thinking',
+          effortRow: 'Effort',
+          effortLevels: {
+            off: 'Off',
+            minimal: 'Minimal',
+            low: 'Low',
+            medium: 'Medium',
+            high: 'High',
+            xhigh: 'xHigh',
+            max: 'Max',
+          },
         },
       },
     },
@@ -54,6 +65,12 @@ function mountComposer(props: Record<string, unknown> = {}) {
   });
 }
 
+/** The dropdown opens on the root menu; step into the model list. */
+async function openModelList(wrapper: ReturnType<typeof mountComposer>): Promise<void> {
+  const modelRow = wrapper.findAll('.md-row-nav').find((row) => row.text().includes('Model'));
+  await modelRow!.trigger('click');
+}
+
 function waitForCompositionEndTimer(): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, 0));
 }
@@ -371,6 +388,7 @@ describe('Composer model dropdown', () => {
     });
 
     await wrapper.find('.model-pill').trigger('click');
+    await openModelList(wrapper);
 
     const rows = wrapper.findAll('.md-row');
     expect(rows.length).toBeGreaterThan(0);
@@ -387,6 +405,7 @@ describe('Composer model dropdown', () => {
     });
 
     await wrapper.find('.model-pill').trigger('click');
+    await openModelList(wrapper);
     const starredRow = wrapper.findAll('.md-row').find((row) => row.text().includes('GPT-5'));
     expect(starredRow).toBeDefined();
     await starredRow!.trigger('click');
@@ -426,6 +445,40 @@ describe('Composer model dropdown', () => {
     expect(wrapper.get('.model-dropdown').element.style.maxHeight).toBe('360px');
   });
 
+  it('opens on a two-row root menu and drills into the effort list', async () => {
+    const wrapper = mountComposer({
+      status: { model: 'Pythinker K2', modelId: 'pythinker/k2', ctxUsed: 0, ctxMax: 128000, permission: 'manual' },
+      models: [
+        {
+          id: 'pythinker/k2',
+          provider: 'pythinker',
+          model: 'k2',
+          displayName: 'Pythinker K2',
+          maxContextSize: 128000,
+          capabilities: ['thinking'],
+        },
+      ],
+      thinking: 'medium',
+    });
+
+    await wrapper.find('.model-pill').trigger('click');
+    expect(wrapper.findAll('.md-row-nav')).toHaveLength(2);
+    expect(wrapper.text()).toContain('Pythinker K2');
+    expect(wrapper.text()).toContain('Medium');
+    // The model list stays behind the Model row.
+    expect(wrapper.text()).not.toContain('More models…');
+
+    const effortRow = wrapper.findAll('.md-row-nav').find((row) => row.text().includes('Effort'));
+    await effortRow!.trigger('click');
+
+    const levels = wrapper.findAll('.md-row').map((row) => row.text());
+    expect(levels).toEqual(['Effort', 'Off', 'Low', 'Medium', 'High']);
+
+    const high = wrapper.findAll('.md-row').find((row) => row.text() === 'High');
+    await high!.trigger('click');
+    expect(wrapper.emitted('setThinking')).toEqual([['high']]);
+  });
+
   it('replaces the binary thinking toggle with the effort list', () => {
     expect(composerSource).not.toContain('toggleThinking');
     expect(composerSource).not.toContain('md-row-toggle');

From 0aea73551416bb1ee6882eadc923ba421a87ae65 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 21:05:17 -0400
Subject: [PATCH 02/16] fix(web): float the task chips above the composer

The chips and their panel sat in the dock's flow, so the composer moved down
whenever a task appeared and moved again when a panel opened. They now stack
upwards from the top edge of the composer, outside the flow, and the gap
between them passes clicks through to the conversation.
---
 .../pythinker-web/src/components/ChatDock.vue | 43 +++++++++++++------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/apps/pythinker-web/src/components/ChatDock.vue b/apps/pythinker-web/src/components/ChatDock.vue
index 7858839c9..74485b79a 100644
--- a/apps/pythinker-web/src/components/ChatDock.vue
+++ b/apps/pythinker-web/src/components/ChatDock.vue
@@ -119,6 +119,9 @@ defineExpose({ loadForEdit });
 
 <template>
   <div class="chat-dock" :class="[mobile ? 'align-mobile' : 'align-center']" @click.stop>
+    <!-- Task chips and their panel float over the conversation, so opening one
+         never changes the composer's position. -->
+    <div v-if="dockPanel || hasDockWork" class="dock-float">
     <Transition name="dock-panel">
       <div
         ref="workPanelRef"
@@ -188,12 +191,6 @@ defineExpose({ loadForEdit });
       </div>
     </Transition>
 
-    <GoalStrip
-      v-if="goal"
-      :goal="goal"
-      :force-expanded="goalExpandSignal"
-      @control-goal="emit('controlGoal', $event)"
-    />
     <div v-if="hasDockWork" ref="workbarRef" class="dock-workbar">
       <button
         v-if="bashTasks.length > 0"
@@ -257,6 +254,14 @@ defineExpose({ loadForEdit });
         <span class="dw-count">(<b>{{ queued?.length ?? 0 }}</b>)</span>
       </button>
     </div>
+    </div>
+
+    <GoalStrip
+      v-if="goal"
+      :goal="goal"
+      :force-expanded="goalExpandSignal"
+      @control-goal="emit('controlGoal', $event)"
+    />
 
     <QuestionCard
       v-if="pendingQuestion"
@@ -335,16 +340,31 @@ defineExpose({ loadForEdit });
 .chat-dock.align-left { margin-left: 0; margin-right: auto; }
 .chat-dock.align-mobile { max-width: none; }
 
-.dock-work-panel {
+/* The chips and their panel sit outside the flow, stacked upwards from the top
+   edge of the composer. Nothing here changes the dock's height, so opening a
+   panel never moves the composer. */
+.dock-float {
   position: absolute;
-  left: 16px;
-  right: calc(16px + var(--panes-scrollbar-width, 0px));
+  left: var(--dock-inline-left);
+  right: calc(var(--dock-inline-right) + var(--panes-scrollbar-width, 0px));
   bottom: 100%;
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  padding-bottom: 6px;
+  /* Only the chips and the panel take clicks; the gap between them does not. */
+  pointer-events: none;
+}
+.dock-float > * {
+  pointer-events: auto;
+}
+
+.dock-work-panel {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: 10px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  margin-bottom: 7px;
   max-height: min(360px, 50vh);
   display: flex;
   flex-direction: column;
@@ -418,7 +438,6 @@ defineExpose({ loadForEdit });
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 4px var(--dock-inline-right) 2px var(--dock-inline-left);
 }
 .dock-work-chip {
   display: inline-flex;
@@ -461,7 +480,7 @@ defineExpose({ loadForEdit });
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
   }
-  .dock-work-panel {
+  .dock-float {
     left: 10px;
     right: calc(10px + var(--panes-scrollbar-width, 0px));
   }

From 18a6e8c64205c7550038e604372ada9c3c2b7e56 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 21:10:20 -0400
Subject: [PATCH 03/16] fix(web): keep the task chip opaque on hover

The hover rule read var(--hover-bg), a name defined nowhere. An unresolvable
var() invalidates the whole declaration, so the background fell back to
transparent and the conversation showed through the chip. Mix the hover tone
from the panel fill instead, and add a test that every custom property used
without a fallback resolves.
---
 .../pythinker-web/src/components/ChatDock.vue |  4 ++-
 .../test/css-custom-properties.test.ts        | 36 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 apps/pythinker-web/test/css-custom-properties.test.ts

diff --git a/apps/pythinker-web/src/components/ChatDock.vue b/apps/pythinker-web/src/components/ChatDock.vue
index 74485b79a..242931fec 100644
--- a/apps/pythinker-web/src/components/ChatDock.vue
+++ b/apps/pythinker-web/src/components/ChatDock.vue
@@ -451,9 +451,11 @@ defineExpose({ loadForEdit });
   border: 1px solid var(--line);
   cursor: pointer;
 }
+/* Opaque on purpose: the chip floats over the conversation, so a translucent
+   wash would let the text behind it show through. */
 .dock-work-chip:hover,
 .dock-work-chip.on {
-  background: var(--hover-bg);
+  background: color-mix(in srgb, var(--ink) 6%, var(--panel));
   color: var(--ink);
 }
 .dock-work-chip svg {
diff --git a/apps/pythinker-web/test/css-custom-properties.test.ts b/apps/pythinker-web/test/css-custom-properties.test.ts
new file mode 100644
index 000000000..ac9af1c7d
--- /dev/null
+++ b/apps/pythinker-web/test/css-custom-properties.test.ts
@@ -0,0 +1,36 @@
+import { existsSync, globSync, readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+/**
+ * An unresolvable `var(--x)` makes the whole declaration invalid at computed-value
+ * time, so the property silently falls back to its initial value — a background
+ * becomes transparent, a colour becomes black. That reads as a rendering bug, not
+ * a typo, so pin it here: every custom property must be defined somewhere in the
+ * app, or carry a fallback at the point of use.
+ */
+
+const SRC = ['src', 'apps/pythinker-web/src'].find(existsSync);
+if (SRC === undefined) throw new Error('the web app source directory was not found');
+
+const sources = globSync('**/*.{vue,css,ts}', { cwd: SRC }).map((file) =>
+  readFileSync(`${SRC}/${file}`, 'utf8'),
+);
+const all = sources.join('\n');
+
+/** Names used without a fallback: `var(--x)` but not `var(--x, …)`. */
+const usedWithoutFallback = new Set(
+  [...all.matchAll(/var\((--[a-z\d-]+)\s*\)/gu)].map((match) => match[1]!),
+);
+const defined = new Set([...all.matchAll(/(--[a-z\d-]+)\s*'?\s*:/gu)].map((match) => match[1]!));
+
+describe('CSS custom properties', () => {
+  it('finds custom properties to check', () => {
+    expect(usedWithoutFallback.size).toBeGreaterThan(50);
+  });
+
+  it('resolves every custom property used without a fallback', () => {
+    const missing = [...usedWithoutFallback].filter((name) => !defined.has(name)).toSorted();
+
+    expect(missing).toEqual([]);
+  });
+});

From 509524e7bcd4dc8d6c91b463f6b1cac8dc74a3ba Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 21:15:24 -0400
Subject: [PATCH 04/16] feat(web): add the Skills and Connectors settings pages

Settings had no view of what the agent can actually reach. Skills lists the
session's skills grouped by source, marking the ones the model must not
invoke; Connectors lists the configured MCP servers with their transport,
connection state, tool count and last error, and can restart one.

Connectors are fetched the first time the page is opened, not on mount, so
a user who never visits it pays nothing.
---
 apps/pythinker-web/src/App.vue                |   5 +
 apps/pythinker-web/src/api/daemon/client.ts   |  31 ++++
 apps/pythinker-web/src/api/types.ts           |  18 ++
 .../src/components/SettingsDialog.vue         | 162 +++++++++++++++++-
 .../src/composables/usePythinkerWebClient.ts  |  31 ++++
 .../src/i18n/locales/en/settings.ts           |  22 +++
 .../test/settings-dialog.test.ts              |  89 +++++++++-
 7 files changed, 354 insertions(+), 4 deletions(-)

diff --git a/apps/pythinker-web/src/App.vue b/apps/pythinker-web/src/App.vue
index 742a13445..fec4b8585 100644
--- a/apps/pythinker-web/src/App.vue
+++ b/apps/pythinker-web/src/App.vue
@@ -1202,6 +1202,11 @@ function openPr(url: string): void {
       :config="client.config.value"
       :models="client.models.value"
       :config-saving="configSaving"
+      :skills="client.skills.value"
+      :connectors="client.connectors.value"
+      :connectors-loading="client.connectorsLoading.value"
+      @load-connectors="client.loadConnectors()"
+      @restart-connector="client.restartConnector($event)"
       @set-theme="client.setTheme($event)"
       @set-color-scheme="client.setColorScheme($event)"
       @set-ui-font-size="client.setUiFontSize($event)"
diff --git a/apps/pythinker-web/src/api/daemon/client.ts b/apps/pythinker-web/src/api/daemon/client.ts
index 173ba5587..46edaf5b3 100644
--- a/apps/pythinker-web/src/api/daemon/client.ts
+++ b/apps/pythinker-web/src/api/daemon/client.ts
@@ -11,6 +11,7 @@ import type {
   AppProvider,
   ProviderRefreshResult,
   AppSession,
+  AppConnector,
   AppSkill,
   AppSessionCursor,
   AppSessionRuntimeStatus,
@@ -127,6 +128,15 @@ interface WireSkillDescriptor {
   disable_model_invocation?: boolean;
 }
 
+interface WireMcpServer {
+  id: string;
+  name: string;
+  transport: 'stdio' | 'http' | 'sse';
+  status: 'connected' | 'connecting' | 'disconnected' | 'error';
+  tool_count: number;
+  last_error?: string;
+}
+
 interface WireArchiveResult {
   archived: true;
 }
@@ -708,9 +718,30 @@ export class DaemonPythinkerWebApi implements PythinkerWebApi {
       name: s.name,
       description: s.description,
       source: s.source,
+      path: s.path,
+      disableModelInvocation: s.disable_model_invocation,
     }));
   }
 
+  async listConnectors(): Promise<AppConnector[]> {
+    const data = await this.http.get<{ servers: WireMcpServer[] }>('/mcp/servers');
+    return (data.servers ?? []).map((server) => ({
+      id: server.id,
+      name: server.name,
+      transport: server.transport,
+      status: server.status,
+      toolCount: server.tool_count,
+      lastError: server.last_error,
+    }));
+  }
+
+  async restartConnector(connectorId: string): Promise<{ restarting: true }> {
+    return this.http.post<{ restarting: true }>(
+      `/mcp/servers/${encodeURIComponent(connectorId)}:restart`,
+      {},
+    );
+  }
+
   async activateSkill(
     sessionId: string,
     skillName: string,
diff --git a/apps/pythinker-web/src/api/types.ts b/apps/pythinker-web/src/api/types.ts
index 6c025c914..e8909cfd2 100644
--- a/apps/pythinker-web/src/api/types.ts
+++ b/apps/pythinker-web/src/api/types.ts
@@ -596,6 +596,20 @@ export interface AppSkill {
   description: string;
   /** Skill source (e.g. 'builtin' | 'project' | 'plugin') for grouping/labels. */
   source: string;
+  /** Where the skill was loaded from; shown in settings, absent in the slash menu. */
+  path?: string;
+  /** Set when the skill is slash-only and the model must not invoke it. */
+  disableModelInvocation?: boolean;
+}
+
+/** A configured MCP server ("connector") and its live connection state. */
+export interface AppConnector {
+  id: string;
+  name: string;
+  transport: 'stdio' | 'http' | 'sse';
+  status: 'connected' | 'connecting' | 'disconnected' | 'error';
+  toolCount: number;
+  lastError?: string;
 }
 
 // ---------------------------------------------------------------------------
@@ -635,6 +649,10 @@ export interface PythinkerWebApi {
   dismissQuestion(sessionId: string, questionId: string): Promise<{ dismissed: true; dismissedAt: string }>;
   listSkills(sessionId: string): Promise<AppSkill[]>;
   activateSkill(sessionId: string, skillName: string, args?: string): Promise<{ activated: true; skillName: string }>;
+  /** Configured MCP servers — GET /mcp/servers. */
+  listConnectors(): Promise<AppConnector[]>;
+  /** Restart one MCP server — POST /mcp/servers/{id}:restart. */
+  restartConnector(connectorId: string): Promise<{ restarting: true }>;
   listTasks(sessionId: string, status?: AppTaskStatus): Promise<AppTask[]>;
   getTask(sessionId: string, taskId: string, input?: { withOutput?: boolean; outputBytes?: number }): Promise<AppTask>;
   cancelTask(sessionId: string, taskId: string): Promise<{ cancelled: true }>;
diff --git a/apps/pythinker-web/src/components/SettingsDialog.vue b/apps/pythinker-web/src/components/SettingsDialog.vue
index f7b0102d8..0b84cf664 100644
--- a/apps/pythinker-web/src/components/SettingsDialog.vue
+++ b/apps/pythinker-web/src/components/SettingsDialog.vue
@@ -9,7 +9,7 @@ import { useDialogFocus } from '../composables/useDialogFocus';
 import { serverEndpointLabel } from '../api/config';
 import { downloadTraceLog, isTraceEnabled } from '../debug/trace';
 import type { ColorScheme, Theme } from '../composables/usePythinkerWebClient';
-import type { AppConfig, AppConfigProvider, AppModel } from '../api/types';
+import type { AppConfig, AppConfigProvider, AppConnector, AppModel, AppSkill } from '../api/types';
 
 const { t } = useI18n();
 
@@ -31,6 +31,12 @@ const props = defineProps<{
   models?: AppModel[];
   /** True while POST /api/v1/config is saving. */
   configSaving?: boolean;
+  /** Skills available to the active session, for the Skills page. */
+  skills?: AppSkill[];
+  /** Configured MCP servers, for the Connectors page. */
+  connectors?: AppConnector[];
+  /** True while GET /api/v1/mcp/servers is in flight. */
+  connectorsLoading?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -42,16 +48,20 @@ const emit = defineEmits<{
   login: [];
   openOnboarding: [];
   updateConfig: [patch: Partial<AppConfig>];
+  loadConnectors: [];
+  restartConnector: [connectorId: string];
   close: [];
 }>();
 
-type SettingsTab = 'general' | 'agent' | 'advanced' | 'experimental';
+type SettingsTab = 'general' | 'agent' | 'skills' | 'connectors' | 'advanced' | 'experimental';
 
 const activeTab = ref<SettingsTab>('general');
 
 const tabs: { id: SettingsTab; labelKey: string }[] = [
   { id: 'general', labelKey: 'settings.tabs.general' },
   { id: 'agent', labelKey: 'settings.tabs.agent' },
+  { id: 'skills', labelKey: 'settings.tabs.skills' },
+  { id: 'connectors', labelKey: 'settings.tabs.connectors' },
   { id: 'advanced', labelKey: 'settings.tabs.advanced' },
   { id: 'experimental', labelKey: 'settings.tabs.experimental' },
 ];
@@ -239,7 +249,25 @@ function toggleConfigBoolean(key: 'defaultThinking' | 'defaultPlanMode' | 'merge
   emit('updateConfig', { [key]: !configBool(current) } as Partial<AppConfig>);
 }
 
+/** Skills grouped by source, each group's skills sorted by name. */
+const skillGroups = computed(() => {
+  const bySource = new Map<string, AppSkill[]>();
+  for (const skill of props.skills ?? []) {
+    const group = bySource.get(skill.source) ?? [];
+    group.push(skill);
+    bySource.set(skill.source, group);
+  }
+  return [...bySource.entries()]
+    .map(([source, skills]) => ({
+      source,
+      skills: skills.toSorted((a, b) => a.name.localeCompare(b.name)),
+    }))
+    .toSorted((a, b) => a.source.localeCompare(b.source));
+});
+
 function setTab(tab: SettingsTab): void {
+  // The connector list is only fetched when its page is first opened.
+  if (tab === 'connectors' && (props.connectors?.length ?? 0) === 0) emit('loadConnectors');
   activeTab.value = tab;
 }
 </script>
@@ -544,6 +572,63 @@ function setTab(tab: SettingsTab): void {
             </section>
           </section>
 
+          <!-- Skills -->
+          <section
+            v-show="activeTab === 'skills'"
+            id="settings-panel-skills"
+            class="panel"
+            role="tabpanel"
+            aria-labelledby="settings-tab-skills"
+          >
+            <section class="sec">
+              <h3 class="sec-title">{{ t('settings.skills.title') }}</h3>
+              <p class="sec-note">{{ t('settings.skills.note') }}</p>
+              <p v-if="skillGroups.length === 0" class="sec-empty">{{ t('settings.skills.empty') }}</p>
+              <div v-for="group in skillGroups" :key="group.source" class="listing">
+                <h4 class="listing-head">{{ group.source }}</h4>
+                <div v-for="skill in group.skills" :key="`${group.source}/${skill.name}`" class="listing-row">
+                  <div class="listing-main">
+                    <span class="listing-name mono">{{ skill.name }}</span>
+                    <span v-if="skill.disableModelInvocation" class="tag">{{ t('settings.skills.slashOnly') }}</span>
+                  </div>
+                  <p class="listing-desc">{{ skill.description }}</p>
+                  <p v-if="skill.path" class="listing-path mono">{{ skill.path }}</p>
+                </div>
+              </div>
+            </section>
+          </section>
+
+          <!-- Connectors -->
+          <section
+            v-show="activeTab === 'connectors'"
+            id="settings-panel-connectors"
+            class="panel"
+            role="tabpanel"
+            aria-labelledby="settings-tab-connectors"
+          >
+            <section class="sec">
+              <h3 class="sec-title">{{ t('settings.connectors.title') }}</h3>
+              <p class="sec-note">{{ t('settings.connectors.note') }}</p>
+              <p v-if="connectorsLoading" class="sec-empty">{{ t('settings.connectors.loading') }}</p>
+              <p v-else-if="(connectors?.length ?? 0) === 0" class="sec-empty">{{ t('settings.connectors.empty') }}</p>
+              <div v-else class="listing">
+                <div v-for="connector in connectors" :key="connector.id" class="listing-row">
+                  <div class="listing-main">
+                    <span class="dot" :class="`s-${connector.status}`" aria-hidden="true" />
+                    <span class="listing-name">{{ connector.name }}</span>
+                    <span class="tag">{{ connector.transport }}</span>
+                    <span class="listing-meta">{{ t('settings.connectors.tools', { count: connector.toolCount }) }}</span>
+                    <button type="button" class="act" @click="emit('restartConnector', connector.id)">
+                      {{ t('settings.connectors.restart') }}
+                    </button>
+                  </div>
+                  <p class="listing-desc">{{ t(`settings.connectors.status.${connector.status}`) }}</p>
+                  <p v-if="connector.lastError" class="listing-error">{{ connector.lastError }}</p>
+                </div>
+              </div>
+            </section>
+          </section>
+
           <!-- Advanced -->
           <section
             v-show="activeTab === 'advanced'"
@@ -877,6 +962,79 @@ function setTab(tab: SettingsTab): void {
 .switch.on .knob { transform: translateX(18px); }
 
 .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
+/* Skills and connectors pages: a read-only list, one block per entry. */
+.sec-note {
+  margin: -4px 0 12px;
+  font-size: calc(var(--ui-font-size) - 2px);
+  color: var(--muted);
+}
+.sec-empty {
+  margin: 0;
+  font-size: calc(var(--ui-font-size) - 1px);
+  color: var(--faint);
+}
+.listing {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.listing-head {
+  margin: 14px 0 4px;
+  font-size: calc(var(--ui-font-size) - 2px);
+  font-weight: 600;
+  color: var(--muted);
+}
+.listing-row {
+  padding: 8px 0;
+  border-top: 1px solid var(--line2);
+}
+.listing-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.listing-name {
+  font-weight: 600;
+  color: var(--ink);
+}
+.listing-meta {
+  margin-left: auto;
+  font-size: calc(var(--ui-font-size) - 2px);
+  color: var(--muted);
+}
+.listing-desc,
+.listing-path,
+.listing-error {
+  margin: 3px 0 0;
+  font-size: calc(var(--ui-font-size) - 2px);
+  color: var(--muted);
+}
+.listing-path {
+  color: var(--faint);
+  word-break: break-all;
+}
+.listing-error {
+  color: var(--err);
+}
+.tag {
+  flex: none;
+  padding: 1px 6px;
+  border-radius: 5px;
+  border: 1px solid var(--line);
+  font-size: calc(var(--ui-font-size) - 3px);
+  color: var(--muted);
+}
+.dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--faint);
+}
+.dot.s-connected { background: var(--ok); }
+.dot.s-connecting { background: var(--warn); }
+.dot.s-error { background: var(--err); }
+
 .act {
   border: 1px solid var(--line);
   border-radius: 7px;
diff --git a/apps/pythinker-web/src/composables/usePythinkerWebClient.ts b/apps/pythinker-web/src/composables/usePythinkerWebClient.ts
index 89bdf0f32..aa5f6c8fa 100644
--- a/apps/pythinker-web/src/composables/usePythinkerWebClient.ts
+++ b/apps/pythinker-web/src/composables/usePythinkerWebClient.ts
@@ -18,6 +18,7 @@ import type {
   AppQuestionRequest,
   AppSession,
   AppSessionRuntimeStatus,
+  AppConnector,
   AppSkill,
   AppTask,
   AppWarning,
@@ -1465,6 +1466,32 @@ async function loadSkillsForSession(sessionId: string): Promise<void> {
   }
 }
 
+// Configured MCP servers. Global, not session-scoped, and loaded on demand by
+// the settings dialog — nothing else in the app needs them.
+const connectors = ref<AppConnector[]>([]);
+const connectorsLoading = ref(false);
+
+async function loadConnectors(): Promise<void> {
+  connectorsLoading.value = true;
+  try {
+    connectors.value = await getPythinkerWebApi().listConnectors();
+  } catch {
+    // An older daemon has no /mcp/servers; an empty list is the honest answer.
+    connectors.value = [];
+  } finally {
+    connectorsLoading.value = false;
+  }
+}
+
+async function restartConnector(connectorId: string): Promise<void> {
+  try {
+    await getPythinkerWebApi().restartConnector(connectorId);
+  } catch {
+    // The reload below reports whatever state the server ended up in.
+  }
+  await loadConnectors();
+}
+
 function hasLoadedMessages(sessionId: string): boolean {
   return Object.prototype.hasOwnProperty.call(rawState.messagesBySession, sessionId);
 }
@@ -4372,6 +4399,10 @@ export function usePythinkerWebClient() {
     loadProviders,
     skills,
     activateSkill,
+    connectors,
+    connectorsLoading,
+    loadConnectors,
+    restartConnector,
     setModel,
     toggleStarModel,
     addProvider,
diff --git a/apps/pythinker-web/src/i18n/locales/en/settings.ts b/apps/pythinker-web/src/i18n/locales/en/settings.ts
index 074945943..984f0aac0 100644
--- a/apps/pythinker-web/src/i18n/locales/en/settings.ts
+++ b/apps/pythinker-web/src/i18n/locales/en/settings.ts
@@ -3,9 +3,31 @@ export default {
   tabs: {
     general: 'General',
     agent: 'Agent',
+    skills: 'Skills',
+    connectors: 'Connectors',
     advanced: 'Advanced',
     experimental: 'Experimental',
   },
+  skills: {
+    title: 'Skills',
+    note: 'Skills the agent can use in this session, grouped by where they come from.',
+    empty: 'No skills are available. Open a session to load them.',
+    slashOnly: 'slash only',
+  },
+  connectors: {
+    title: 'Connectors',
+    note: 'MCP servers configured for this workspace and their connection state.',
+    empty: 'No MCP servers are configured.',
+    loading: 'Loading connectors…',
+    tools: '{count} tools',
+    restart: 'Restart',
+    status: {
+      connected: 'Connected.',
+      connecting: 'Connecting…',
+      disconnected: 'Disconnected.',
+      error: 'Failed to connect.',
+    },
+  },
   appearance: 'Appearance',
   notifications: 'Notifications',
   notifyOnComplete: 'Notify when a turn completes',
diff --git a/apps/pythinker-web/test/settings-dialog.test.ts b/apps/pythinker-web/test/settings-dialog.test.ts
index 24180a738..e0f6318a5 100644
--- a/apps/pythinker-web/test/settings-dialog.test.ts
+++ b/apps/pythinker-web/test/settings-dialog.test.ts
@@ -5,7 +5,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import SettingsDialog from '../src/components/SettingsDialog.vue';
 import enSettings from '../src/i18n/locales/en/settings';
-import type { AppConfig, AppModel } from '../src/api/types';
+import type { AppConfig, AppConnector, AppModel, AppSkill } from '../src/api/types';
 
 const i18n = createI18n({
   legacy: false,
@@ -79,7 +79,18 @@ const models: AppModel[] = [
   },
 ];
 
-function mountDialog() {
+const skills: AppSkill[] = [
+  { name: 'gen-changesets', description: 'Write the changesets for a PR', source: 'project', path: '.pythinker/skills/gen-changesets' },
+  { name: 'brainstorm', description: 'Explore a problem first', source: 'builtin' },
+  { name: 'archive', description: 'Archive a session', source: 'builtin', disableModelInvocation: true },
+];
+
+const connectors: AppConnector[] = [
+  { id: 'mcp_1', name: 'context7', transport: 'http', status: 'connected', toolCount: 2 },
+  { id: 'mcp_2', name: 'tavily', transport: 'stdio', status: 'error', toolCount: 0, lastError: 'spawn ENOENT' },
+];
+
+function mountDialog(extraProps: Record<string, unknown> = {}) {
   return mount(SettingsDialog, {
     props: {
       theme: 'modern',
@@ -93,6 +104,7 @@ function mountDialog() {
       config,
       models,
       configSaving: false,
+      ...extraProps,
     },
     global: {
       plugins: [i18n],
@@ -100,6 +112,11 @@ function mountDialog() {
   });
 }
 
+async function openTab(wrapper: ReturnType<typeof mountDialog>, label: string): Promise<void> {
+  const tab = wrapper.findAll('.tab').find((button) => button.text() === label);
+  await tab!.trigger('click');
+}
+
 afterEach(() => {
   document.body.innerHTML = '';
   delete window.pythinkerDesktop;
@@ -251,3 +268,71 @@ describe('SettingsDialog dialog focus', () => {
     opener.remove();
   });
 });
+
+describe('SettingsDialog skills page', () => {
+  it('groups skills by source and marks the slash-only ones', async () => {
+    const wrapper = mountDialog({ skills });
+    await openTab(wrapper, 'Skills');
+
+    const panel = wrapper.get('#settings-panel-skills');
+    expect(panel.findAll('.listing-head').map((head) => head.text())).toEqual([
+      'builtin',
+      'project',
+    ]);
+    // Sorted by name inside each group.
+    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual([
+      'archive',
+      'brainstorm',
+      'gen-changesets',
+    ]);
+    expect(panel.findAll('.tag').map((tag) => tag.text())).toEqual(['slash only']);
+    expect(panel.text()).toContain('.pythinker/skills/gen-changesets');
+  });
+
+  it('says so when no skill is available', async () => {
+    const wrapper = mountDialog();
+    await openTab(wrapper, 'Skills');
+
+    expect(wrapper.get('#settings-panel-skills').text()).toContain('No skills are available');
+  });
+});
+
+describe('SettingsDialog connectors page', () => {
+  it('loads the connectors the first time the page is opened', async () => {
+    const wrapper = mountDialog();
+    await openTab(wrapper, 'Connectors');
+
+    expect(wrapper.emitted('loadConnectors')).toHaveLength(1);
+
+    await openTab(wrapper, 'General');
+    await openTab(wrapper, 'Connectors');
+    expect(wrapper.emitted('loadConnectors')).toHaveLength(2);
+  });
+
+  it('does not reload when connectors are already known', async () => {
+    const wrapper = mountDialog({ connectors });
+    await openTab(wrapper, 'Connectors');
+
+    expect(wrapper.emitted('loadConnectors')).toBeUndefined();
+  });
+
+  it('shows each server status and restarts one on demand', async () => {
+    const wrapper = mountDialog({ connectors });
+    await openTab(wrapper, 'Connectors');
+
+    const panel = wrapper.get('#settings-panel-connectors');
+    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual([
+      'context7',
+      'tavily',
+    ]);
+    expect(panel.findAll('.dot').map((dot) => dot.classes().join(' '))).toEqual([
+      'dot s-connected',
+      'dot s-error',
+    ]);
+    expect(panel.text()).toContain('spawn ENOENT');
+    expect(panel.text()).toContain('2 tools');
+
+    await panel.findAll('.act')[1]!.trigger('click');
+    expect(wrapper.emitted('restartConnector')).toEqual([['mcp_2']]);
+  });
+});

From 607f4f4b835e37ee01873d803d080e4f436ba620 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 21:20:27 -0400
Subject: [PATCH 05/16] feat: turn individual skills off from settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Skills were all-or-nothing: the only control was mergeAllAvailableSkills.
A new disabledSkills config list is filtered in SessionSkillRegistry.register,
the single funnel every source goes through, so a skill turned off is invisible
to the model, the slash menu and the API alike — built-ins included.

The Skills page carries the switch and now packs each skill into one row.
---
 apps/pythinker-web/src/api/daemon/client.ts   |  1 +
 apps/pythinker-web/src/api/daemon/mappers.ts  |  1 +
 apps/pythinker-web/src/api/daemon/wire.ts     |  1 +
 apps/pythinker-web/src/api/types.ts           |  2 +
 .../src/components/SettingsDialog.vue         | 62 +++++++++++++++++--
 .../src/i18n/locales/en/settings.ts           |  3 +-
 .../test/settings-dialog.test.ts              |  1 -
 packages/agent-core/src/config/schema.ts      |  2 +
 packages/agent-core/src/config/toml.ts        |  1 +
 packages/agent-core/src/rpc/core-impl.ts      |  1 +
 .../src/services/config/configService.ts      |  1 +
 packages/agent-core/src/session/index.ts      |  3 +
 packages/agent-core/src/skill/registry.ts     |  9 +++
 .../agent-core/test/skill/registry.test.ts    | 28 +++++++++
 packages/protocol/src/rest/config.ts          |  2 +
 15 files changed, 110 insertions(+), 8 deletions(-)

diff --git a/apps/pythinker-web/src/api/daemon/client.ts b/apps/pythinker-web/src/api/daemon/client.ts
index 46edaf5b3..ebb207b8e 100644
--- a/apps/pythinker-web/src/api/daemon/client.ts
+++ b/apps/pythinker-web/src/api/daemon/client.ts
@@ -1125,6 +1125,7 @@ export class DaemonPythinkerWebApi implements PythinkerWebApi {
       hooks: 'hooks',
       services: 'services',
       mergeAllAvailableSkills: 'merge_all_available_skills',
+      disabledSkills: 'disabled_skills',
       extraSkillDirs: 'extra_skill_dirs',
       loopControl: 'loop_control',
       background: 'background',
diff --git a/apps/pythinker-web/src/api/daemon/mappers.ts b/apps/pythinker-web/src/api/daemon/mappers.ts
index d5ac96a6c..3e81ce9da 100644
--- a/apps/pythinker-web/src/api/daemon/mappers.ts
+++ b/apps/pythinker-web/src/api/daemon/mappers.ts
@@ -749,6 +749,7 @@ export function toAppConfig(wire: WireConfig): AppConfig {
     hooks: wire.hooks,
     services: wire.services,
     mergeAllAvailableSkills: wire.merge_all_available_skills,
+    disabledSkills: wire.disabled_skills,
     extraSkillDirs: wire.extra_skill_dirs,
     loopControl: wire.loop_control,
     background: wire.background,
diff --git a/apps/pythinker-web/src/api/daemon/wire.ts b/apps/pythinker-web/src/api/daemon/wire.ts
index c0e610661..42e2511f4 100644
--- a/apps/pythinker-web/src/api/daemon/wire.ts
+++ b/apps/pythinker-web/src/api/daemon/wire.ts
@@ -380,6 +380,7 @@ export interface WireConfig {
   hooks?: unknown[];
   services?: unknown;
   merge_all_available_skills?: boolean;
+  disabled_skills?: string[];
   extra_skill_dirs?: string[];
   loop_control?: unknown;
   background?: unknown;
diff --git a/apps/pythinker-web/src/api/types.ts b/apps/pythinker-web/src/api/types.ts
index e8909cfd2..303254e94 100644
--- a/apps/pythinker-web/src/api/types.ts
+++ b/apps/pythinker-web/src/api/types.ts
@@ -582,6 +582,8 @@ export interface AppConfig {
   hooks?: unknown[];
   services?: unknown;
   mergeAllAvailableSkills?: boolean;
+  /** Skill names the user turned off; they never reach the agent. */
+  disabledSkills?: string[];
   extraSkillDirs?: string[];
   loopControl?: unknown;
   background?: unknown;
diff --git a/apps/pythinker-web/src/components/SettingsDialog.vue b/apps/pythinker-web/src/components/SettingsDialog.vue
index 0b84cf664..07f197b57 100644
--- a/apps/pythinker-web/src/components/SettingsDialog.vue
+++ b/apps/pythinker-web/src/components/SettingsDialog.vue
@@ -265,6 +265,20 @@ const skillGroups = computed(() => {
     .toSorted((a, b) => a.source.localeCompare(b.source));
 });
 
+const disabledSkills = computed(() => new Set(props.config?.disabledSkills ?? []));
+
+function isSkillEnabled(name: string): boolean {
+  return !disabledSkills.value.has(name);
+}
+
+/** Disabling a skill stores its name; the daemon then never registers it. */
+function toggleSkill(name: string): void {
+  const next = new Set(disabledSkills.value);
+  if (next.has(name)) next.delete(name);
+  else next.add(name);
+  emit('updateConfig', { disabledSkills: [...next].sort() });
+}
+
 function setTab(tab: SettingsTab): void {
   // The connector list is only fetched when its page is first opened.
   if (tab === 'connectors' && (props.connectors?.length ?? 0) === 0) emit('loadConnectors');
@@ -586,13 +600,28 @@ function setTab(tab: SettingsTab): void {
               <p v-if="skillGroups.length === 0" class="sec-empty">{{ t('settings.skills.empty') }}</p>
               <div v-for="group in skillGroups" :key="group.source" class="listing">
                 <h4 class="listing-head">{{ group.source }}</h4>
-                <div v-for="skill in group.skills" :key="`${group.source}/${skill.name}`" class="listing-row">
+                <div
+                  v-for="skill in group.skills"
+                  :key="`${group.source}/${skill.name}`"
+                  class="listing-row"
+                  :class="{ off: !isSkillEnabled(skill.name) }"
+                >
                   <div class="listing-main">
                     <span class="listing-name mono">{{ skill.name }}</span>
                     <span v-if="skill.disableModelInvocation" class="tag">{{ t('settings.skills.slashOnly') }}</span>
+                    <span class="listing-desc">{{ skill.description }}</span>
+                    <button
+                      type="button"
+                      class="switch sm"
+                      role="switch"
+                      :class="{ on: isSkillEnabled(skill.name) }"
+                      :aria-checked="isSkillEnabled(skill.name)"
+                      :aria-label="t('settings.skills.toggleAria', { name: skill.name })"
+                      @click="toggleSkill(skill.name)"
+                    >
+                      <span class="knob" />
+                    </button>
                   </div>
-                  <p class="listing-desc">{{ skill.description }}</p>
-                  <p v-if="skill.path" class="listing-path mono">{{ skill.path }}</p>
                 </div>
               </div>
             </section>
@@ -962,7 +991,12 @@ function setTab(tab: SettingsTab): void {
 .switch.on .knob { transform: translateX(18px); }
 
 .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
-/* Skills and connectors pages: a read-only list, one block per entry. */
+/* Compact switch for the per-skill rows. */
+.switch.sm { width: 30px; height: 17px; }
+.switch.sm .knob { width: 13px; height: 13px; }
+.switch.sm.on .knob { transform: translateX(13px); }
+
+/* Skills and connectors pages: one dense row per entry. */
 .sec-note {
   margin: -4px 0 12px;
   font-size: calc(var(--ui-font-size) - 2px);
@@ -979,19 +1013,25 @@ function setTab(tab: SettingsTab): void {
   gap: 2px;
 }
 .listing-head {
-  margin: 14px 0 4px;
+  margin: 12px 0 2px;
   font-size: calc(var(--ui-font-size) - 2px);
   font-weight: 600;
   color: var(--muted);
 }
 .listing-row {
-  padding: 8px 0;
+  padding: 5px 0;
   border-top: 1px solid var(--line2);
 }
+/* A disabled skill stays readable but clearly recedes. */
+.listing-row.off .listing-name,
+.listing-row.off .listing-desc {
+  color: var(--faint);
+}
 .listing-main {
   display: flex;
   align-items: center;
   gap: 8px;
+  min-width: 0;
 }
 .listing-name {
   font-weight: 600;
@@ -1009,6 +1049,16 @@ function setTab(tab: SettingsTab): void {
   font-size: calc(var(--ui-font-size) - 2px);
   color: var(--muted);
 }
+/* On the skills page the description shares the row with the name, so it
+   truncates instead of wrapping — the switch must stay on the same line. */
+.listing-main .listing-desc {
+  margin: 0 0 0 auto;
+  padding-left: 10px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .listing-path {
   color: var(--faint);
   word-break: break-all;
diff --git a/apps/pythinker-web/src/i18n/locales/en/settings.ts b/apps/pythinker-web/src/i18n/locales/en/settings.ts
index 984f0aac0..cbaf18402 100644
--- a/apps/pythinker-web/src/i18n/locales/en/settings.ts
+++ b/apps/pythinker-web/src/i18n/locales/en/settings.ts
@@ -10,9 +10,10 @@ export default {
   },
   skills: {
     title: 'Skills',
-    note: 'Skills the agent can use in this session, grouped by where they come from.',
+    note: 'Skills the agent can use, grouped by source. A skill you turn off is never loaded.',
     empty: 'No skills are available. Open a session to load them.',
     slashOnly: 'slash only',
+    toggleAria: 'Enable {name}',
   },
   connectors: {
     title: 'Connectors',
diff --git a/apps/pythinker-web/test/settings-dialog.test.ts b/apps/pythinker-web/test/settings-dialog.test.ts
index e0f6318a5..cc95d58ee 100644
--- a/apps/pythinker-web/test/settings-dialog.test.ts
+++ b/apps/pythinker-web/test/settings-dialog.test.ts
@@ -286,7 +286,6 @@ describe('SettingsDialog skills page', () => {
       'gen-changesets',
     ]);
     expect(panel.findAll('.tag').map((tag) => tag.text())).toEqual(['slash only']);
-    expect(panel.text()).toContain('.pythinker/skills/gen-changesets');
   });
 
   it('says so when no skill is available', async () => {
diff --git a/packages/agent-core/src/config/schema.ts b/packages/agent-core/src/config/schema.ts
index 8edbfc36d..d391228f6 100644
--- a/packages/agent-core/src/config/schema.ts
+++ b/packages/agent-core/src/config/schema.ts
@@ -304,6 +304,7 @@ export const PythinkerConfigSchema = z.object({
   httpHookAllowedEnvVars: z.array(z.string().min(1)).optional(),
   services: ServicesConfigSchema.optional(),
   mergeAllAvailableSkills: z.boolean().optional(),
+  disabledSkills: z.array(z.string()).optional(),
   extraSkillDirs: z.array(z.string()).optional(),
   additionalDirs: z.array(z.string().trim().min(1)).optional(),
   loopControl: LoopControlSchema.optional(),
@@ -352,6 +353,7 @@ export const PythinkerConfigPatchSchema = z
     httpHookAllowedEnvVars: z.array(z.string().min(1)).optional(),
     services: ServicesConfigPatchSchema.optional(),
     mergeAllAvailableSkills: z.boolean().optional(),
+  disabledSkills: z.array(z.string()).optional(),
     extraSkillDirs: z.array(z.string()).optional(),
     additionalDirs: z.array(z.string().trim().min(1)).optional(),
     loopControl: LoopControlPatchSchema.optional(),
diff --git a/packages/agent-core/src/config/toml.ts b/packages/agent-core/src/config/toml.ts
index eb361f12a..bd5912181 100644
--- a/packages/agent-core/src/config/toml.ts
+++ b/packages/agent-core/src/config/toml.ts
@@ -481,6 +481,7 @@ export function configToTomlData(config: PythinkerConfig): Record<string, unknow
     'defaultPermissionMode',
     'defaultPlanMode',
     'mergeAllAvailableSkills',
+    'disabledSkills',
     'extraSkillDirs',
     'additionalDirs',
     'allowedHttpHookUrls',
diff --git a/packages/agent-core/src/rpc/core-impl.ts b/packages/agent-core/src/rpc/core-impl.ts
index f1f7dd27b..71539ea9b 100644
--- a/packages/agent-core/src/rpc/core-impl.ts
+++ b/packages/agent-core/src/rpc/core-impl.ts
@@ -1077,6 +1077,7 @@ export class PythinkerCore implements PromisableMethods<CoreAPI> {
       extraDirs: config.extraSkillDirs,
       pluginSkillRoots: this.plugins.pluginSkillRoots(),
       mergeAllAvailableSkills: config.mergeAllAvailableSkills,
+      disabledNames: config.disabledSkills,
     };
   }
 
diff --git a/packages/agent-core/src/services/config/configService.ts b/packages/agent-core/src/services/config/configService.ts
index 6f0c662b4..39df9b8d7 100644
--- a/packages/agent-core/src/services/config/configService.ts
+++ b/packages/agent-core/src/services/config/configService.ts
@@ -68,6 +68,7 @@ function toConfigResponse(config: PythinkerConfig): ConfigResponse {
     hooks: config.hooks,
     services: config.services,
     merge_all_available_skills: config.mergeAllAvailableSkills,
+    disabled_skills: config.disabledSkills,
     extra_skill_dirs: config.extraSkillDirs,
     loop_control: config.loopControl,
     background: config.background,
diff --git a/packages/agent-core/src/session/index.ts b/packages/agent-core/src/session/index.ts
index b1dea3833..df1be11a1 100644
--- a/packages/agent-core/src/session/index.ts
+++ b/packages/agent-core/src/session/index.ts
@@ -181,6 +181,8 @@ export interface SessionSkillConfig {
   readonly pluginSkillRoots?: readonly SkillRoot[];
   readonly mergeAllAvailableSkills?: boolean;
   readonly builtinDir?: string;
+  /** Skill names the user turned off in config. */
+  readonly disabledNames?: readonly string[];
 }
 
 export interface AgentMeta {
@@ -476,6 +478,7 @@ export class Session {
           );
     this.skills = new SessionSkillRegistry({
       sessionId: options.id,
+      disabledNames: options.skills?.disabledNames,
       isPathIgnored: (candidate, cwd) =>
         isGitIgnored(this.persistenceKaos, candidate, cwd),
     });
diff --git a/packages/agent-core/src/skill/registry.ts b/packages/agent-core/src/skill/registry.ts
index e75b2668c..bc6c427e3 100644
--- a/packages/agent-core/src/skill/registry.ts
+++ b/packages/agent-core/src/skill/registry.ts
@@ -19,6 +19,8 @@ export interface SkillRegistryOptions {
   readonly isPathIgnored?: (path: string, cwd: string) => Promise<boolean>;
   readonly onWarning?: (message: string, cause?: unknown) => void;
   readonly sessionId?: string;
+  /** Skill names the user turned off; they are never registered. */
+  readonly disabledNames?: readonly string[];
 }
 
 export class SessionSkillRegistry implements AgentSkillRegistry {
@@ -34,6 +36,7 @@ export class SessionSkillRegistry implements AgentSkillRegistry {
   private readonly discoverImpl: typeof discoverSkills;
   private readonly isPathIgnored: (path: string, cwd: string) => Promise<boolean>;
   private readonly onWarning: (message: string, cause?: unknown) => void;
+  private readonly disabledNames: ReadonlySet<string>;
   readonly sessionId?: string;
 
   constructor(options: SkillRegistryOptions = {}) {
@@ -41,6 +44,9 @@ export class SessionSkillRegistry implements AgentSkillRegistry {
     this.isPathIgnored = options.isPathIgnored ?? (() => Promise.resolve(false));
     this.onWarning = options.onWarning ?? (() => {});
     this.sessionId = options.sessionId;
+    this.disabledNames = new Set(
+      (options.disabledNames ?? []).map((name) => normalizeSkillName(name)),
+    );
   }
 
   async loadRoots(roots: readonly SkillRoot[]): Promise<readonly SkillDefinition[]> {
@@ -69,6 +75,9 @@ export class SessionSkillRegistry implements AgentSkillRegistry {
 
   register(skill: SkillDefinition, options: { readonly replace?: boolean } = {}): void {
     const key = normalizeSkillName(skill.name);
+    // A disabled skill is dropped here, the one funnel every source goes
+    // through, so it is invisible to the model, the slash menu and the API.
+    if (this.disabledNames.has(key)) return;
     if (
       options.replace !== true &&
       (this.byName.has(key) || this.conditionalByName.has(key))
diff --git a/packages/agent-core/test/skill/registry.test.ts b/packages/agent-core/test/skill/registry.test.ts
index 3821a680d..c94f7b9d1 100644
--- a/packages/agent-core/test/skill/registry.test.ts
+++ b/packages/agent-core/test/skill/registry.test.ts
@@ -171,6 +171,34 @@ describe('skill registry prompt rendering', () => {
   });
 });
 
+describe('disabled skills', () => {
+  it('never registers a skill the user turned off', () => {
+    const registry = new SessionSkillRegistry({ disabledNames: ['user-a'] });
+
+    registry.register(makeSkill('user-a', 'user'));
+    registry.register(makeSkill('user-b', 'user'));
+
+    expect(registry.getSkill('user-a')).toBeUndefined();
+    expect(registry.getSkill('user-b')).toBeDefined();
+  });
+
+  it('matches the disabled name regardless of case', () => {
+    const registry = new SessionSkillRegistry({ disabledNames: ['Gen-Changesets'] });
+
+    registry.register(makeSkill('gen-changesets', 'project'));
+
+    expect(registry.getSkill('gen-changesets')).toBeUndefined();
+  });
+
+  it('disables built-in skills too', () => {
+    const registry = new SessionSkillRegistry({ disabledNames: ['loop'] });
+
+    registerBuiltinSkills(registry);
+
+    expect(registry.getSkill('loop')).toBeUndefined();
+  });
+});
+
 function makeRegistry(skills: readonly SkillDefinition[]): SessionSkillRegistry {
   const registry = new SessionSkillRegistry();
   for (const skill of skills) registry.register(skill);
diff --git a/packages/protocol/src/rest/config.ts b/packages/protocol/src/rest/config.ts
index c7a60d8e3..a25070f82 100644
--- a/packages/protocol/src/rest/config.ts
+++ b/packages/protocol/src/rest/config.ts
@@ -23,6 +23,7 @@ export const configResponseSchema = z.object({
   hooks: z.array(z.unknown()).optional(),
   services: z.unknown().optional(),
   merge_all_available_skills: z.boolean().optional(),
+  disabled_skills: z.array(z.string()).optional(),
   extra_skill_dirs: z.array(z.string()).optional(),
   loop_control: z.unknown().optional(),
   background: z.unknown().optional(),
@@ -47,6 +48,7 @@ export const patchConfigRequestSchema = z.object({
   hooks: z.array(z.unknown()).optional(),
   services: z.unknown().optional(),
   merge_all_available_skills: z.boolean().optional(),
+  disabled_skills: z.array(z.string()).optional(),
   extra_skill_dirs: z.array(z.string()).optional(),
   loop_control: z.unknown().optional(),
   background: z.unknown().optional(),

From 39f5db432d99f30cf1c7f170bc46cba666199d64 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 21:26:38 -0400
Subject: [PATCH 06/16] feat(web): rebuild settings as a full-window surface
 with grouped pages

Settings was a 720px modal with four flat tabs. It now fills the window, and
the nav is grouped into Basics, Agent capabilities and Data and statistics.

Two pages are new. Hooks lists the configured lifecycle hooks grouped by
event, with the matcher, transport and command each one runs. Usage stats
totals tokens, sessions, turns and cost across every loaded session and
breaks the token share down per model.

Skills gains a search box and an item count, and every list row is now a
card matching the app's own surfaces.
---
 apps/pythinker-web/src/App.vue                |   1 +
 apps/pythinker-web/src/api/daemon/wire.ts     |  14 +-
 apps/pythinker-web/src/api/types.ts           |  15 +-
 .../src/components/SettingsDialog.vue         | 337 ++++++++++++++++--
 .../src/composables/usePythinkerWebClient.ts  |   2 +
 .../src/i18n/locales/en/settings.ts           |  27 ++
 .../test/settings-dialog.test.ts              |  73 ++++
 7 files changed, 429 insertions(+), 40 deletions(-)

diff --git a/apps/pythinker-web/src/App.vue b/apps/pythinker-web/src/App.vue
index fec4b8585..8d4eccaac 100644
--- a/apps/pythinker-web/src/App.vue
+++ b/apps/pythinker-web/src/App.vue
@@ -1205,6 +1205,7 @@ function openPr(url: string): void {
       :skills="client.skills.value"
       :connectors="client.connectors.value"
       :connectors-loading="client.connectorsLoading.value"
+      :sessions="client.sessionsWithUsage.value"
       @load-connectors="client.loadConnectors()"
       @restart-connector="client.restartConnector($event)"
       @set-theme="client.setTheme($event)"
diff --git a/apps/pythinker-web/src/api/daemon/wire.ts b/apps/pythinker-web/src/api/daemon/wire.ts
index 42e2511f4..2fd49396e 100644
--- a/apps/pythinker-web/src/api/daemon/wire.ts
+++ b/apps/pythinker-web/src/api/daemon/wire.ts
@@ -365,6 +365,18 @@ export interface WireConfigProvider {
   has_api_key: boolean;
 }
 
+export interface WireHook {
+  event: string;
+  type?: 'command' | 'http' | 'model';
+  matcher?: string;
+  command?: string;
+  url?: string;
+  statusMessage?: string;
+  timeout?: number;
+  once?: boolean;
+  async?: boolean;
+}
+
 export interface WireConfig {
   providers: Record<string, WireConfigProvider>;
   default_provider?: string;
@@ -377,7 +389,7 @@ export interface WireConfig {
   default_permission_mode?: string;
   default_plan_mode?: boolean;
   permission?: unknown;
-  hooks?: unknown[];
+  hooks?: WireHook[];
   services?: unknown;
   merge_all_available_skills?: boolean;
   disabled_skills?: string[];
diff --git a/apps/pythinker-web/src/api/types.ts b/apps/pythinker-web/src/api/types.ts
index 303254e94..728586671 100644
--- a/apps/pythinker-web/src/api/types.ts
+++ b/apps/pythinker-web/src/api/types.ts
@@ -579,7 +579,7 @@ export interface AppConfig {
   defaultPermissionMode?: string;
   defaultPlanMode?: boolean;
   permission?: unknown;
-  hooks?: unknown[];
+  hooks?: AppHook[];
   services?: unknown;
   mergeAllAvailableSkills?: boolean;
   /** Skill names the user turned off; they never reach the agent. */
@@ -604,6 +604,19 @@ export interface AppSkill {
   disableModelInvocation?: boolean;
 }
 
+/** One configured hook, as it appears in the daemon config. */
+export interface AppHook {
+  event: string;
+  type?: 'command' | 'http' | 'model';
+  matcher?: string;
+  command?: string;
+  url?: string;
+  statusMessage?: string;
+  timeout?: number;
+  once?: boolean;
+  async?: boolean;
+}
+
 /** A configured MCP server ("connector") and its live connection state. */
 export interface AppConnector {
   id: string;
diff --git a/apps/pythinker-web/src/components/SettingsDialog.vue b/apps/pythinker-web/src/components/SettingsDialog.vue
index 07f197b57..d3294b035 100644
--- a/apps/pythinker-web/src/components/SettingsDialog.vue
+++ b/apps/pythinker-web/src/components/SettingsDialog.vue
@@ -9,7 +9,16 @@ import { useDialogFocus } from '../composables/useDialogFocus';
 import { serverEndpointLabel } from '../api/config';
 import { downloadTraceLog, isTraceEnabled } from '../debug/trace';
 import type { ColorScheme, Theme } from '../composables/usePythinkerWebClient';
-import type { AppConfig, AppConfigProvider, AppConnector, AppModel, AppSkill } from '../api/types';
+import type {
+  AppConfig,
+  AppConfigProvider,
+  AppConnector,
+  AppHook,
+  AppModel,
+  AppSession,
+  AppSkill,
+} from '../api/types';
+import { formatTokens } from '../lib/formatTokens';
 
 const { t } = useI18n();
 
@@ -37,6 +46,8 @@ const props = defineProps<{
   connectors?: AppConnector[];
   /** True while GET /api/v1/mcp/servers is in flight. */
   connectorsLoading?: boolean;
+  /** Every session the client has loaded, for the usage totals. */
+  sessions?: AppSession[];
 }>();
 
 const emit = defineEmits<{
@@ -53,17 +64,44 @@ const emit = defineEmits<{
   close: [];
 }>();
 
-type SettingsTab = 'general' | 'agent' | 'skills' | 'connectors' | 'advanced' | 'experimental';
+type SettingsTab =
+  | 'general'
+  | 'agent'
+  | 'skills'
+  | 'connectors'
+  | 'hooks'
+  | 'usage'
+  | 'advanced'
+  | 'experimental';
 
 const activeTab = ref<SettingsTab>('general');
 
-const tabs: { id: SettingsTab; labelKey: string }[] = [
-  { id: 'general', labelKey: 'settings.tabs.general' },
-  { id: 'agent', labelKey: 'settings.tabs.agent' },
-  { id: 'skills', labelKey: 'settings.tabs.skills' },
-  { id: 'connectors', labelKey: 'settings.tabs.connectors' },
-  { id: 'advanced', labelKey: 'settings.tabs.advanced' },
-  { id: 'experimental', labelKey: 'settings.tabs.experimental' },
+/** Nav groups, mirroring how the pages divide up: basics, what the agent can
+    reach, then the read-only data pages. */
+const tabGroups: { titleKey: string; tabs: { id: SettingsTab; labelKey: string }[] }[] = [
+  {
+    titleKey: 'settings.groups.basics',
+    tabs: [
+      { id: 'general', labelKey: 'settings.tabs.general' },
+      { id: 'agent', labelKey: 'settings.tabs.agent' },
+    ],
+  },
+  {
+    titleKey: 'settings.groups.capabilities',
+    tabs: [
+      { id: 'skills', labelKey: 'settings.tabs.skills' },
+      { id: 'connectors', labelKey: 'settings.tabs.connectors' },
+      { id: 'hooks', labelKey: 'settings.tabs.hooks' },
+    ],
+  },
+  {
+    titleKey: 'settings.groups.data',
+    tabs: [
+      { id: 'usage', labelKey: 'settings.tabs.usage' },
+      { id: 'advanced', labelKey: 'settings.tabs.advanced' },
+      { id: 'experimental', labelKey: 'settings.tabs.experimental' },
+    ],
+  },
 ];
 
 const daemonEndpoint = serverEndpointLabel();
@@ -249,10 +287,19 @@ function toggleConfigBoolean(key: 'defaultThinking' | 'defaultPlanMode' | 'merge
   emit('updateConfig', { [key]: !configBool(current) } as Partial<AppConfig>);
 }
 
+const skillQuery = ref('');
+
 /** Skills grouped by source, each group's skills sorted by name. */
 const skillGroups = computed(() => {
+  const query = skillQuery.value.trim().toLowerCase();
+  const matching = (props.skills ?? []).filter(
+    (skill) =>
+      query === '' ||
+      skill.name.toLowerCase().includes(query) ||
+      skill.description.toLowerCase().includes(query),
+  );
   const bySource = new Map<string, AppSkill[]>();
-  for (const skill of props.skills ?? []) {
+  for (const skill of matching) {
     const group = bySource.get(skill.source) ?? [];
     group.push(skill);
     bySource.set(skill.source, group);
@@ -267,6 +314,56 @@ const skillGroups = computed(() => {
 
 const disabledSkills = computed(() => new Set(props.config?.disabledSkills ?? []));
 
+/** Hooks grouped by the event they fire on, in the order the config lists them. */
+const hookGroups = computed(() => {
+  const byEvent = new Map<string, AppHook[]>();
+  for (const hook of props.config?.hooks ?? []) {
+    const group = byEvent.get(hook.event) ?? [];
+    group.push(hook);
+    byEvent.set(hook.event, group);
+  }
+  return [...byEvent.entries()].map(([event, hooks]) => ({ event, hooks }));
+});
+
+const hookCount = computed(() => props.config?.hooks?.length ?? 0);
+
+const skillCount = computed(() => skillGroups.value.reduce((sum, g) => sum + g.skills.length, 0));
+
+/** Totals over every session the client has loaded. */
+const usageStats = computed(() => {
+  const sessions = props.sessions ?? [];
+  let tokens = 0;
+  let turns = 0;
+  let cost = 0;
+  for (const session of sessions) {
+    tokens += session.usage.inputTokens + session.usage.outputTokens;
+    turns += session.usage.turnCount;
+    cost += session.usage.totalCostUsd;
+  }
+  return {
+    tokens: formatTokens(tokens),
+    sessions: String(sessions.length),
+    turns: String(turns),
+    cost: `$${cost.toFixed(2)}`,
+  };
+});
+
+/** Share of total tokens per model, largest first. */
+const usageByModel = computed(() => {
+  const byModel = new Map<string, number>();
+  let total = 0;
+  for (const session of props.sessions ?? []) {
+    const used = session.usage.inputTokens + session.usage.outputTokens;
+    if (used === 0 || session.model === '') continue;
+    byModel.set(session.model, (byModel.get(session.model) ?? 0) + used);
+    total += used;
+  }
+  if (total === 0) return [];
+  return [...byModel.entries()]
+    .toSorted((a, b) => b[1] - a[1])
+    .map(([model, used]) => ({ model, share: `${Math.round((used / total) * 100)}%` }));
+});
+
 function isSkillEnabled(name: string): boolean {
   return !disabledSkills.value.has(name);
 }
@@ -300,20 +397,23 @@ function setTab(tab: SettingsTab): void {
 
       <div class="settings-layout">
         <nav class="settings-tabs" role="tablist" :aria-label="t('settings.title')">
-          <button
-            v-for="tab in tabs"
-            :key="tab.id"
-            type="button"
-            class="tab"
-            role="tab"
-            :aria-selected="activeTab === tab.id"
-            :aria-controls="`settings-panel-${tab.id}`"
-            :id="`settings-tab-${tab.id}`"
-            :class="{ on: activeTab === tab.id }"
-            @click="setTab(tab.id)"
-          >
-            {{ t(tab.labelKey) }}
-          </button>
+          <template v-for="group in tabGroups" :key="group.titleKey">
+            <span class="tab-group">{{ t(group.titleKey) }}</span>
+            <button
+              v-for="tab in group.tabs"
+              :key="tab.id"
+              type="button"
+              class="tab"
+              role="tab"
+              :aria-selected="activeTab === tab.id"
+              :aria-controls="`settings-panel-${tab.id}`"
+              :id="`settings-tab-${tab.id}`"
+              :class="{ on: activeTab === tab.id }"
+              @click="setTab(tab.id)"
+            >
+              {{ t(tab.labelKey) }}
+            </button>
+          </template>
         </nav>
 
         <div class="body">
@@ -595,8 +695,16 @@ function setTab(tab: SettingsTab): void {
             aria-labelledby="settings-tab-skills"
           >
             <section class="sec">
-              <h3 class="sec-title">{{ t('settings.skills.title') }}</h3>
+              <h2 class="page-title">{{ t('settings.skills.title') }}</h2>
               <p class="sec-note">{{ t('settings.skills.note') }}</p>
+              <input
+                v-model="skillQuery"
+                type="search"
+                class="page-search"
+                :placeholder="t('settings.skills.search')"
+                :aria-label="t('settings.skills.search')"
+              >
+              <p class="listing-count">{{ t('settings.skills.count', { count: skillCount }) }}</p>
               <p v-if="skillGroups.length === 0" class="sec-empty">{{ t('settings.skills.empty') }}</p>
               <div v-for="group in skillGroups" :key="group.source" class="listing">
                 <h4 class="listing-head">{{ group.source }}</h4>
@@ -636,7 +744,7 @@ function setTab(tab: SettingsTab): void {
             aria-labelledby="settings-tab-connectors"
           >
             <section class="sec">
-              <h3 class="sec-title">{{ t('settings.connectors.title') }}</h3>
+              <h2 class="page-title">{{ t('settings.connectors.title') }}</h2>
               <p class="sec-note">{{ t('settings.connectors.note') }}</p>
               <p v-if="connectorsLoading" class="sec-empty">{{ t('settings.connectors.loading') }}</p>
               <p v-else-if="(connectors?.length ?? 0) === 0" class="sec-empty">{{ t('settings.connectors.empty') }}</p>
@@ -658,6 +766,83 @@ function setTab(tab: SettingsTab): void {
             </section>
           </section>
 
+          <!-- Hooks -->
+          <section
+            v-show="activeTab === 'hooks'"
+            id="settings-panel-hooks"
+            class="panel"
+            role="tabpanel"
+            aria-labelledby="settings-tab-hooks"
+          >
+            <section class="sec">
+              <h2 class="page-title">{{ t('settings.hooks.title') }}</h2>
+              <p class="sec-note">{{ t('settings.hooks.note') }}</p>
+              <p v-if="hookCount === 0" class="sec-empty">{{ t('settings.hooks.empty') }}</p>
+              <template v-else>
+                <p class="listing-count">{{ t('settings.hooks.count', { count: hookCount }) }}</p>
+                <div v-for="group in hookGroups" :key="group.event" class="listing">
+                  <h4 class="listing-head">{{ group.event }}</h4>
+                  <div
+                    v-for="(hook, index) in group.hooks"
+                    :key="`${group.event}/${index}`"
+                    class="listing-row"
+                  >
+                    <div class="listing-main">
+                      <span class="listing-name mono">{{ hook.matcher ?? '*' }}</span>
+                      <span class="tag">{{ hook.type ?? 'command' }}</span>
+                      <span v-if="hook.async === true" class="tag">{{ t('settings.hooks.async') }}</span>
+                      <span v-if="hook.timeout !== undefined" class="listing-meta">{{ t('settings.hooks.timeout', { seconds: hook.timeout }) }}</span>
+                    </div>
+                    <p class="listing-path mono">{{ hook.command ?? hook.url ?? '—' }}</p>
+                  </div>
+                </div>
+              </template>
+            </section>
+          </section>
+
+          <!-- Usage stats -->
+          <section
+            v-show="activeTab === 'usage'"
+            id="settings-panel-usage"
+            class="panel"
+            role="tabpanel"
+            aria-labelledby="settings-tab-usage"
+          >
+            <section class="sec">
+              <h2 class="page-title">{{ t('settings.usage.title') }}</h2>
+              <p class="sec-note">{{ t('settings.usage.note') }}</p>
+              <div class="stat-grid">
+                <div class="stat-card">
+                  <span class="stat-label">{{ t('settings.usage.tokens') }}</span>
+                  <span class="stat-value">{{ usageStats.tokens }}</span>
+                </div>
+                <div class="stat-card">
+                  <span class="stat-label">{{ t('settings.usage.sessions') }}</span>
+                  <span class="stat-value">{{ usageStats.sessions }}</span>
+                </div>
+                <div class="stat-card">
+                  <span class="stat-label">{{ t('settings.usage.turns') }}</span>
+                  <span class="stat-value">{{ usageStats.turns }}</span>
+                </div>
+                <div class="stat-card">
+                  <span class="stat-label">{{ t('settings.usage.cost') }}</span>
+                  <span class="stat-value">{{ usageStats.cost }}</span>
+                </div>
+              </div>
+              <h4 class="listing-head">{{ t('settings.usage.byModel') }}</h4>
+              <p v-if="usageByModel.length === 0" class="sec-empty">{{ t('settings.usage.empty') }}</p>
+              <div v-else class="listing">
+                <div v-for="entry in usageByModel" :key="entry.model" class="listing-row">
+                  <div class="listing-main">
+                    <span class="listing-name">{{ entry.model }}</span>
+                    <span class="listing-meta">{{ entry.share }}</span>
+                  </div>
+                  <div class="usage-bar"><span :style="{ width: entry.share }" /></div>
+                </div>
+              </div>
+            </section>
+          </section>
+
           <!-- Advanced -->
           <section
             v-show="activeTab === 'advanced'"
@@ -722,15 +907,16 @@ function setTab(tab: SettingsTab): void {
   inset: 0;
   z-index: 100;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: stretch;
+  justify-content: stretch;
   background: rgba(20, 23, 28, 0.42);
-  padding: 24px;
+  padding: 12px;
 }
+/* Settings is a full-window surface, not a small modal: the pages carry long
+   lists (skills, connectors, plugins) that a 720px box could not show. */
 .dialog {
-  width: min(720px, 100%);
-  height: 640px;
-  max-height: calc(100vh - 80px);
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   background: var(--bg);
@@ -996,7 +1182,80 @@ function setTab(tab: SettingsTab): void {
 .switch.sm .knob { width: 13px; height: 13px; }
 .switch.sm.on .knob { transform: translateX(13px); }
 
-/* Skills and connectors pages: one dense row per entry. */
+/* The settings pages: a large page title, an optional search, then card rows. */
+.page-title {
+  margin: 0 0 6px;
+  font-size: calc(var(--ui-font-size) + 10px);
+  font-weight: 700;
+  color: var(--ink);
+}
+.page-search {
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0 0 12px;
+  padding: 7px 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: var(--ui-font-size);
+}
+.listing-count {
+  margin: 0 0 8px;
+  font-size: calc(var(--ui-font-size) - 2px);
+  color: var(--faint);
+}
+
+/* Usage stats: a card per headline number, then a share bar per model. */
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
+}
+.stat-label {
+  font-size: calc(var(--ui-font-size) - 2px);
+  color: var(--muted);
+}
+.stat-value {
+  font-size: calc(var(--ui-font-size) + 8px);
+  font-weight: 700;
+  color: var(--ink);
+}
+.usage-bar {
+  margin-top: 6px;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--line2);
+  overflow: hidden;
+}
+.usage-bar span {
+  display: block;
+  height: 100%;
+  background: var(--blue);
+}
+
+/* Nav group heading above each block of tabs. */
+.tab-group {
+  padding: 12px 10px 4px;
+  font-size: calc(var(--ui-font-size) - 3px);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+
+/* Skills and connectors pages: one card row per entry. */
 .sec-note {
   margin: -4px 0 12px;
   font-size: calc(var(--ui-font-size) - 2px);
@@ -1010,17 +1269,19 @@ function setTab(tab: SettingsTab): void {
 .listing {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 6px;
 }
 .listing-head {
-  margin: 12px 0 2px;
+  margin: 14px 0 6px;
   font-size: calc(var(--ui-font-size) - 2px);
   font-weight: 600;
   color: var(--muted);
 }
 .listing-row {
-  padding: 5px 0;
-  border-top: 1px solid var(--line2);
+  padding: 8px 12px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
 }
 /* A disabled skill stays readable but clearly recedes. */
 .listing-row.off .listing-name,
@@ -1110,7 +1371,7 @@ function setTab(tab: SettingsTab): void {
       max(12px, env(safe-area-inset-left));
   }
   .dialog {
-    max-height: calc(100dvh - 24px);
+    height: 100%;
   }
   .settings-layout { flex-direction: column; }
   .settings-tabs {
diff --git a/apps/pythinker-web/src/composables/usePythinkerWebClient.ts b/apps/pythinker-web/src/composables/usePythinkerWebClient.ts
index aa5f6c8fa..d4197e529 100644
--- a/apps/pythinker-web/src/composables/usePythinkerWebClient.ts
+++ b/apps/pythinker-web/src/composables/usePythinkerWebClient.ts
@@ -4401,6 +4401,8 @@ export function usePythinkerWebClient() {
     activateSkill,
     connectors,
     connectorsLoading,
+    /** Raw sessions with their usage totals — the settings usage page reads these. */
+    sessionsWithUsage: computed<AppSession[]>(() => rawState.sessions),
     loadConnectors,
     restartConnector,
     setModel,
diff --git a/apps/pythinker-web/src/i18n/locales/en/settings.ts b/apps/pythinker-web/src/i18n/locales/en/settings.ts
index cbaf18402..fff87133f 100644
--- a/apps/pythinker-web/src/i18n/locales/en/settings.ts
+++ b/apps/pythinker-web/src/i18n/locales/en/settings.ts
@@ -1,10 +1,17 @@
 export default {
   title: 'Settings',
+  groups: {
+    basics: 'Basics',
+    capabilities: 'Agent capabilities',
+    data: 'Data and statistics',
+  },
   tabs: {
     general: 'General',
     agent: 'Agent',
     skills: 'Skills',
     connectors: 'Connectors',
+    hooks: 'Hooks',
+    usage: 'Usage stats',
     advanced: 'Advanced',
     experimental: 'Experimental',
   },
@@ -14,6 +21,8 @@ export default {
     empty: 'No skills are available. Open a session to load them.',
     slashOnly: 'slash only',
     toggleAria: 'Enable {name}',
+    search: 'Search skills…',
+    count: '{count} items',
   },
   connectors: {
     title: 'Connectors',
@@ -29,6 +38,24 @@ export default {
       error: 'Failed to connect.',
     },
   },
+  hooks: {
+    title: 'Hooks',
+    note: 'Commands the agent runs on lifecycle events. Changes apply to new sessions.',
+    empty: 'No hooks are configured.',
+    count: '{count} hooks',
+    async: 'async',
+    timeout: '{seconds}s timeout',
+  },
+  usage: {
+    title: 'Usage stats',
+    note: 'Totals across every session loaded in this client.',
+    tokens: 'Token usage',
+    sessions: 'Sessions',
+    turns: 'Turns',
+    cost: 'Cost',
+    byModel: 'By model',
+    empty: 'No usage recorded yet.',
+  },
   appearance: 'Appearance',
   notifications: 'Notifications',
   notifyOnComplete: 'Notify when a turn completes',
diff --git a/apps/pythinker-web/test/settings-dialog.test.ts b/apps/pythinker-web/test/settings-dialog.test.ts
index cc95d58ee..7f21ebf95 100644
--- a/apps/pythinker-web/test/settings-dialog.test.ts
+++ b/apps/pythinker-web/test/settings-dialog.test.ts
@@ -335,3 +335,76 @@ describe('SettingsDialog connectors page', () => {
     expect(wrapper.emitted('restartConnector')).toEqual([['mcp_2']]);
   });
 });
+
+describe('SettingsDialog hooks page', () => {
+  it('groups hooks by event and shows what each one runs', async () => {
+    const wrapper = mountDialog({
+      config: {
+        ...config,
+        hooks: [
+          { event: 'PreToolUse', matcher: 'Bash', type: 'command', command: 'block-no-verify.sh' },
+          { event: 'PreToolUse', type: 'command', command: 'observe.sh pre', timeout: 30 },
+          { event: 'SessionStart', type: 'command', command: 'agent-state.sh', async: true },
+        ],
+      },
+    });
+    await openTab(wrapper, 'Hooks');
+
+    const panel = wrapper.get('#settings-panel-hooks');
+    expect(panel.findAll('.listing-head').map((head) => head.text())).toEqual([
+      'PreToolUse',
+      'SessionStart',
+    ]);
+    // The matcher labels the row; a hook without one is the catch-all.
+    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual([
+      'Bash',
+      '*',
+      '*',
+    ]);
+    expect(panel.text()).toContain('block-no-verify.sh');
+    expect(panel.text()).toContain('30s timeout');
+    expect(panel.text()).toContain('async');
+  });
+
+  it('says so when no hook is configured', async () => {
+    const wrapper = mountDialog();
+    await openTab(wrapper, 'Hooks');
+
+    expect(wrapper.get('#settings-panel-hooks').text()).toContain('No hooks are configured');
+  });
+});
+
+describe('SettingsDialog usage page', () => {
+  const sessions = [
+    {
+      id: 'ses_1',
+      model: 'Pythinker K2',
+      usage: { inputTokens: 600, outputTokens: 400, turnCount: 3, totalCostUsd: 1.5 },
+    },
+    {
+      id: 'ses_2',
+      model: 'GPT-5',
+      usage: { inputTokens: 800, outputTokens: 200, turnCount: 2, totalCostUsd: 0.75 },
+    },
+  ] as unknown as Parameters<typeof mountDialog>[0]['sessions'];
+
+  it('totals tokens, sessions, turns and cost', async () => {
+    const wrapper = mountDialog({ sessions });
+    await openTab(wrapper, 'Usage stats');
+
+    const values = wrapper.get('#settings-panel-usage').findAll('.stat-value').map((v) => v.text());
+    expect(values).toEqual(['2k', '2', '5', '$2.25']);
+  });
+
+  it('splits the token share per model, largest first', async () => {
+    const wrapper = mountDialog({ sessions });
+    await openTab(wrapper, 'Usage stats');
+
+    const panel = wrapper.get('#settings-panel-usage');
+    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual([
+      'Pythinker K2',
+      'GPT-5',
+    ]);
+    expect(panel.findAll('.listing-meta').map((meta) => meta.text())).toEqual(['50%', '50%']);
+  });
+});

From 07e9cfc7662b106506af78a20c98286fdab5738f Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 21:31:15 -0400
Subject: [PATCH 07/16] feat: add the Plugins and Subagents settings pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Neither collection had a REST surface: plugins and subagent profiles were
reachable only over the core rpc, so the web client could not see them. A new
ICatalogService wraps both — they are global rather than session-scoped, so
one service is less machinery than two near-identical wrappers — behind
GET /plugins, POST /plugins/{id}:set-enabled and GET /agent-profiles.

Plugins lists each plugin with its version, source, skill and MCP-server
counts, load errors, and a switch. Subagents lists each profile with its
source, tool count, model and effort.
---
 apps/pythinker-web/src/App.vue                |   5 +
 apps/pythinker-web/src/api/daemon/client.ts   |  64 ++++++++
 apps/pythinker-web/src/api/types.ts           |  30 ++++
 .../src/components/SettingsDialog.vue         |  84 ++++++++++
 .../src/composables/usePythinkerWebClient.ts  |  41 +++++
 .../src/i18n/locales/en/settings.ts           |  16 ++
 .../test/settings-dialog.test.ts              |  88 +++++++++++
 .../src/services/catalog/catalog.ts           |  70 +++++++++
 .../src/services/catalog/catalogService.ts    |  33 ++++
 packages/agent-core/src/services/index.ts     |   7 +
 packages/protocol/src/index.ts                |   1 +
 packages/protocol/src/rest/catalog.ts         |  48 ++++++
 packages/server/src/routes/catalog.ts         | 144 ++++++++++++++++++
 .../server/src/routes/registerApiV1Routes.ts  |   2 +
 packages/server/src/start.ts                  |   3 +-
 15 files changed, 635 insertions(+), 1 deletion(-)
 create mode 100644 packages/agent-core/src/services/catalog/catalog.ts
 create mode 100644 packages/agent-core/src/services/catalog/catalogService.ts
 create mode 100644 packages/protocol/src/rest/catalog.ts
 create mode 100644 packages/server/src/routes/catalog.ts

diff --git a/apps/pythinker-web/src/App.vue b/apps/pythinker-web/src/App.vue
index 8d4eccaac..3808cef47 100644
--- a/apps/pythinker-web/src/App.vue
+++ b/apps/pythinker-web/src/App.vue
@@ -1206,6 +1206,11 @@ function openPr(url: string): void {
       :connectors="client.connectors.value"
       :connectors-loading="client.connectorsLoading.value"
       :sessions="client.sessionsWithUsage.value"
+      :plugins="client.plugins.value"
+      :subagents="client.subagents.value"
+      @load-plugins="client.loadPlugins()"
+      @set-plugin-enabled="client.setPluginEnabled($event.pluginId, $event.enabled)"
+      @load-subagents="client.loadSubagents()"
       @load-connectors="client.loadConnectors()"
       @restart-connector="client.restartConnector($event)"
       @set-theme="client.setTheme($event)"
diff --git a/apps/pythinker-web/src/api/daemon/client.ts b/apps/pythinker-web/src/api/daemon/client.ts
index ebb207b8e..07a54b8a3 100644
--- a/apps/pythinker-web/src/api/daemon/client.ts
+++ b/apps/pythinker-web/src/api/daemon/client.ts
@@ -12,7 +12,9 @@ import type {
   ProviderRefreshResult,
   AppSession,
   AppConnector,
+  AppPlugin,
   AppSkill,
+  AppSubagent,
   AppSessionCursor,
   AppSessionRuntimeStatus,
   AppSessionSnapshot,
@@ -137,6 +139,28 @@ interface WireMcpServer {
   last_error?: string;
 }
 
+interface WirePlugin {
+  id: string;
+  display_name: string;
+  version?: string;
+  enabled: boolean;
+  state: string;
+  skill_count: number;
+  mcp_server_count: number;
+  has_errors: boolean;
+  source: string;
+}
+
+interface WireAgentProfile {
+  name: string;
+  description?: string;
+  source: 'built-in' | 'plugin' | 'user' | 'project';
+  tools: string[];
+  model?: string;
+  effort?: string;
+  when_to_use?: string;
+}
+
 interface WireArchiveResult {
   archived: true;
 }
@@ -735,6 +759,46 @@ export class DaemonPythinkerWebApi implements PythinkerWebApi {
     }));
   }
 
+  async listPlugins(): Promise<AppPlugin[]> {
+    const data = await this.http.get<{ plugins: WirePlugin[] }>('/plugins');
+    return (data.plugins ?? []).map((plugin) => ({
+      id: plugin.id,
+      displayName: plugin.display_name,
+      version: plugin.version,
+      enabled: plugin.enabled,
+      state: plugin.state,
+      skillCount: plugin.skill_count,
+      mcpServerCount: plugin.mcp_server_count,
+      hasErrors: plugin.has_errors,
+      source: plugin.source,
+    }));
+  }
+
+  async setPluginEnabled(
+    pluginId: string,
+    enabled: boolean,
+  ): Promise<{ id: string; enabled: boolean }> {
+    return this.http.post<{ id: string; enabled: boolean }>(
+      `/plugins/${encodeURIComponent(pluginId)}:set-enabled`,
+      { enabled },
+    );
+  }
+
+  async listSubagents(workDir: string): Promise<AppSubagent[]> {
+    const data = await this.http.get<{ profiles: WireAgentProfile[] }>('/agent-profiles', {
+      work_dir: workDir,
+    });
+    return (data.profiles ?? []).map((profile) => ({
+      name: profile.name,
+      description: profile.description,
+      source: profile.source,
+      tools: profile.tools,
+      model: profile.model,
+      effort: profile.effort,
+      whenToUse: profile.when_to_use,
+    }));
+  }
+
   async restartConnector(connectorId: string): Promise<{ restarting: true }> {
     return this.http.post<{ restarting: true }>(
       `/mcp/servers/${encodeURIComponent(connectorId)}:restart`,
diff --git a/apps/pythinker-web/src/api/types.ts b/apps/pythinker-web/src/api/types.ts
index 728586671..5f995fa09 100644
--- a/apps/pythinker-web/src/api/types.ts
+++ b/apps/pythinker-web/src/api/types.ts
@@ -617,6 +617,30 @@ export interface AppHook {
   async?: boolean;
 }
 
+/** One installed plugin. */
+export interface AppPlugin {
+  id: string;
+  displayName: string;
+  version?: string;
+  enabled: boolean;
+  state: string;
+  skillCount: number;
+  mcpServerCount: number;
+  hasErrors: boolean;
+  source: string;
+}
+
+/** One subagent profile the agent can dispatch work to. */
+export interface AppSubagent {
+  name: string;
+  description?: string;
+  source: 'built-in' | 'plugin' | 'user' | 'project';
+  tools: string[];
+  model?: string;
+  effort?: string;
+  whenToUse?: string;
+}
+
 /** A configured MCP server ("connector") and its live connection state. */
 export interface AppConnector {
   id: string;
@@ -668,6 +692,12 @@ export interface PythinkerWebApi {
   listConnectors(): Promise<AppConnector[]>;
   /** Restart one MCP server — POST /mcp/servers/{id}:restart. */
   restartConnector(connectorId: string): Promise<{ restarting: true }>;
+  /** Installed plugins — GET /plugins. */
+  listPlugins(): Promise<AppPlugin[]>;
+  /** Enable or disable a plugin — POST /plugins/{id}:set-enabled. */
+  setPluginEnabled(pluginId: string, enabled: boolean): Promise<{ id: string; enabled: boolean }>;
+  /** Subagent profiles for a working directory — GET /agent-profiles. */
+  listSubagents(workDir: string): Promise<AppSubagent[]>;
   listTasks(sessionId: string, status?: AppTaskStatus): Promise<AppTask[]>;
   getTask(sessionId: string, taskId: string, input?: { withOutput?: boolean; outputBytes?: number }): Promise<AppTask>;
   cancelTask(sessionId: string, taskId: string): Promise<{ cancelled: true }>;
diff --git a/apps/pythinker-web/src/components/SettingsDialog.vue b/apps/pythinker-web/src/components/SettingsDialog.vue
index d3294b035..72a19559c 100644
--- a/apps/pythinker-web/src/components/SettingsDialog.vue
+++ b/apps/pythinker-web/src/components/SettingsDialog.vue
@@ -15,8 +15,10 @@ import type {
   AppConnector,
   AppHook,
   AppModel,
+  AppPlugin,
   AppSession,
   AppSkill,
+  AppSubagent,
 } from '../api/types';
 import { formatTokens } from '../lib/formatTokens';
 
@@ -48,6 +50,10 @@ const props = defineProps<{
   connectorsLoading?: boolean;
   /** Every session the client has loaded, for the usage totals. */
   sessions?: AppSession[];
+  /** Installed plugins, for the Plugins page. */
+  plugins?: AppPlugin[];
+  /** Subagent profiles, for the Subagents page. */
+  subagents?: AppSubagent[];
 }>();
 
 const emit = defineEmits<{
@@ -61,6 +67,9 @@ const emit = defineEmits<{
   updateConfig: [patch: Partial<AppConfig>];
   loadConnectors: [];
   restartConnector: [connectorId: string];
+  loadPlugins: [];
+  setPluginEnabled: [payload: { pluginId: string; enabled: boolean }];
+  loadSubagents: [];
   close: [];
 }>();
 
@@ -69,6 +78,8 @@ type SettingsTab =
   | 'agent'
   | 'skills'
   | 'connectors'
+  | 'plugins'
+  | 'subagents'
   | 'hooks'
   | 'usage'
   | 'advanced'
@@ -89,7 +100,9 @@ const tabGroups: { titleKey: string; tabs: { id: SettingsTab; labelKey: string }
   {
     titleKey: 'settings.groups.capabilities',
     tabs: [
+      { id: 'plugins', labelKey: 'settings.tabs.plugins' },
       { id: 'skills', labelKey: 'settings.tabs.skills' },
+      { id: 'subagents', labelKey: 'settings.tabs.subagents' },
       { id: 'connectors', labelKey: 'settings.tabs.connectors' },
       { id: 'hooks', labelKey: 'settings.tabs.hooks' },
     ],
@@ -379,6 +392,8 @@ function toggleSkill(name: string): void {
 function setTab(tab: SettingsTab): void {
   // The connector list is only fetched when its page is first opened.
   if (tab === 'connectors' && (props.connectors?.length ?? 0) === 0) emit('loadConnectors');
+  if (tab === 'plugins' && (props.plugins?.length ?? 0) === 0) emit('loadPlugins');
+  if (tab === 'subagents' && (props.subagents?.length ?? 0) === 0) emit('loadSubagents');
   activeTab.value = tab;
 }
 </script>
@@ -766,6 +781,75 @@ function setTab(tab: SettingsTab): void {
             </section>
           </section>
 
+          <!-- Plugins -->
+          <section
+            v-show="activeTab === 'plugins'"
+            id="settings-panel-plugins"
+            class="panel"
+            role="tabpanel"
+            aria-labelledby="settings-tab-plugins"
+          >
+            <section class="sec">
+              <h2 class="page-title">{{ t('settings.plugins.title') }}</h2>
+              <p class="sec-note">{{ t('settings.plugins.note') }}</p>
+              <p v-if="(plugins?.length ?? 0) === 0" class="sec-empty">{{ t('settings.plugins.empty') }}</p>
+              <div v-else class="listing">
+                <div
+                  v-for="plugin in plugins"
+                  :key="plugin.id"
+                  class="listing-row"
+                  :class="{ off: !plugin.enabled }"
+                >
+                  <div class="listing-main">
+                    <span class="listing-name">{{ plugin.displayName }}</span>
+                    <span v-if="plugin.version" class="tag">{{ plugin.version }}</span>
+                    <span class="tag">{{ plugin.source }}</span>
+                    <span class="listing-meta">{{ t('settings.plugins.counts', { skills: plugin.skillCount, servers: plugin.mcpServerCount }) }}</span>
+                    <button
+                      type="button"
+                      class="switch sm"
+                      role="switch"
+                      :class="{ on: plugin.enabled }"
+                      :aria-checked="plugin.enabled"
+                      :aria-label="t('settings.plugins.toggleAria', { name: plugin.displayName })"
+                      @click="emit('setPluginEnabled', { pluginId: plugin.id, enabled: !plugin.enabled })"
+                    >
+                      <span class="knob" />
+                    </button>
+                  </div>
+                  <p v-if="plugin.hasErrors" class="listing-error">{{ t('settings.plugins.hasErrors') }}</p>
+                </div>
+              </div>
+            </section>
+          </section>
+
+          <!-- Subagents -->
+          <section
+            v-show="activeTab === 'subagents'"
+            id="settings-panel-subagents"
+            class="panel"
+            role="tabpanel"
+            aria-labelledby="settings-tab-subagents"
+          >
+            <section class="sec">
+              <h2 class="page-title">{{ t('settings.subagents.title') }}</h2>
+              <p class="sec-note">{{ t('settings.subagents.note') }}</p>
+              <p v-if="(subagents?.length ?? 0) === 0" class="sec-empty">{{ t('settings.subagents.empty') }}</p>
+              <div v-else class="listing">
+                <div v-for="agent in subagents" :key="agent.name" class="listing-row">
+                  <div class="listing-main">
+                    <span class="listing-name mono">{{ agent.name }}</span>
+                    <span class="tag">{{ agent.source }}</span>
+                    <span class="tag">{{ t('settings.subagents.tools', { count: agent.tools.length }) }}</span>
+                    <span v-if="agent.model" class="listing-meta">{{ agent.model }}</span>
+                    <span v-if="agent.effort" class="tag">{{ agent.effort }}</span>
+                  </div>
+                  <p v-if="agent.description" class="listing-desc">{{ agent.description }}</p>
+                </div>
+              </div>
+            </section>
+          </section>
+
           <!-- Hooks -->
           <section
             v-show="activeTab === 'hooks'"
diff --git a/apps/pythinker-web/src/composables/usePythinkerWebClient.ts b/apps/pythinker-web/src/composables/usePythinkerWebClient.ts
index d4197e529..24566178a 100644
--- a/apps/pythinker-web/src/composables/usePythinkerWebClient.ts
+++ b/apps/pythinker-web/src/composables/usePythinkerWebClient.ts
@@ -19,7 +19,9 @@ import type {
   AppSession,
   AppSessionRuntimeStatus,
   AppConnector,
+  AppPlugin,
   AppSkill,
+  AppSubagent,
   AppTask,
   AppWarning,
   AppWorkspace,
@@ -1483,6 +1485,40 @@ async function loadConnectors(): Promise<void> {
   }
 }
 
+const plugins = ref<AppPlugin[]>([]);
+const subagents = ref<AppSubagent[]>([]);
+
+async function loadPlugins(): Promise<void> {
+  try {
+    plugins.value = await getPythinkerWebApi().listPlugins();
+  } catch {
+    // An older daemon has no /plugins; an empty list is the honest answer.
+    plugins.value = [];
+  }
+}
+
+async function setPluginEnabled(pluginId: string, enabled: boolean): Promise<void> {
+  try {
+    await getPythinkerWebApi().setPluginEnabled(pluginId, enabled);
+  } catch {
+    // The reload below reports whatever state the daemon ended up in.
+  }
+  await loadPlugins();
+}
+
+async function loadSubagents(): Promise<void> {
+  const workDir = rawState.sessions.find((s) => s.id === rawState.activeSessionId)?.cwd;
+  if (workDir === undefined || workDir === '') {
+    subagents.value = [];
+    return;
+  }
+  try {
+    subagents.value = await getPythinkerWebApi().listSubagents(workDir);
+  } catch {
+    subagents.value = [];
+  }
+}
+
 async function restartConnector(connectorId: string): Promise<void> {
   try {
     await getPythinkerWebApi().restartConnector(connectorId);
@@ -4401,6 +4437,11 @@ export function usePythinkerWebClient() {
     activateSkill,
     connectors,
     connectorsLoading,
+    plugins,
+    loadPlugins,
+    setPluginEnabled,
+    subagents,
+    loadSubagents,
     /** Raw sessions with their usage totals — the settings usage page reads these. */
     sessionsWithUsage: computed<AppSession[]>(() => rawState.sessions),
     loadConnectors,
diff --git a/apps/pythinker-web/src/i18n/locales/en/settings.ts b/apps/pythinker-web/src/i18n/locales/en/settings.ts
index fff87133f..0fa9be942 100644
--- a/apps/pythinker-web/src/i18n/locales/en/settings.ts
+++ b/apps/pythinker-web/src/i18n/locales/en/settings.ts
@@ -8,7 +8,9 @@ export default {
   tabs: {
     general: 'General',
     agent: 'Agent',
+    plugins: 'Plugins',
     skills: 'Skills',
+    subagents: 'Subagents',
     connectors: 'Connectors',
     hooks: 'Hooks',
     usage: 'Usage stats',
@@ -38,6 +40,20 @@ export default {
       error: 'Failed to connect.',
     },
   },
+  plugins: {
+    title: 'Plugins',
+    note: 'Installed plugins and the skills and MCP servers each one contributes.',
+    empty: 'No plugins are installed.',
+    counts: '{skills} skills · {servers} servers',
+    hasErrors: 'This plugin reported errors while loading.',
+    toggleAria: 'Enable {name}',
+  },
+  subagents: {
+    title: 'Subagents',
+    note: 'Profiles the agent can dispatch work to, resolved from the active session folder.',
+    empty: 'No subagent profiles were found. Open a session to resolve them.',
+    tools: '{count} tools',
+  },
   hooks: {
     title: 'Hooks',
     note: 'Commands the agent runs on lifecycle events. Changes apply to new sessions.',
diff --git a/apps/pythinker-web/test/settings-dialog.test.ts b/apps/pythinker-web/test/settings-dialog.test.ts
index 7f21ebf95..59dd63be8 100644
--- a/apps/pythinker-web/test/settings-dialog.test.ts
+++ b/apps/pythinker-web/test/settings-dialog.test.ts
@@ -408,3 +408,91 @@ describe('SettingsDialog usage page', () => {
     expect(panel.findAll('.listing-meta').map((meta) => meta.text())).toEqual(['50%', '50%']);
   });
 });
+
+describe('SettingsDialog plugins page', () => {
+  const plugins = [
+    {
+      id: 'plg_1',
+      displayName: 'Cloudflare',
+      version: '1.2.0',
+      enabled: true,
+      state: 'loaded',
+      skillCount: 3,
+      mcpServerCount: 2,
+      hasErrors: false,
+      source: 'github',
+    },
+    {
+      id: 'plg_2',
+      displayName: 'Designer',
+      enabled: false,
+      state: 'disabled',
+      skillCount: 1,
+      mcpServerCount: 0,
+      hasErrors: true,
+      source: 'local',
+    },
+  ];
+
+  it('loads plugins the first time the page is opened', async () => {
+    const wrapper = mountDialog();
+    await openTab(wrapper, 'Plugins');
+
+    expect(wrapper.emitted('loadPlugins')).toHaveLength(1);
+  });
+
+  it('shows each plugin with its counts and toggles one', async () => {
+    const wrapper = mountDialog({ plugins });
+    await openTab(wrapper, 'Plugins');
+
+    const panel = wrapper.get('#settings-panel-plugins');
+    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual([
+      'Cloudflare',
+      'Designer',
+    ]);
+    expect(panel.text()).toContain('3 skills · 2 servers');
+    expect(panel.text()).toContain('reported errors');
+    // The disabled plugin's row recedes and its switch is off.
+    expect(panel.findAll('.listing-row')[1]!.classes()).toContain('off');
+
+    await panel.findAll('.switch')[1]!.trigger('click');
+    expect(wrapper.emitted('setPluginEnabled')).toEqual([
+      [{ pluginId: 'plg_2', enabled: true }],
+    ]);
+  });
+});
+
+describe('SettingsDialog subagents page', () => {
+  const subagents = [
+    {
+      name: 'Explore',
+      description: 'Read-only search agent',
+      source: 'built-in' as const,
+      tools: ['Read', 'Grep', 'Glob'],
+      model: 'Pythinker K2',
+      effort: 'max',
+    },
+  ];
+
+  it('loads subagents the first time the page is opened', async () => {
+    const wrapper = mountDialog();
+    await openTab(wrapper, 'Subagents');
+
+    expect(wrapper.emitted('loadSubagents')).toHaveLength(1);
+  });
+
+  it('shows the profile source, tool count, model and effort', async () => {
+    const wrapper = mountDialog({ subagents });
+    await openTab(wrapper, 'Subagents');
+
+    const panel = wrapper.get('#settings-panel-subagents');
+    expect(panel.get('.listing-name').text()).toBe('Explore');
+    expect(panel.findAll('.tag').map((tag) => tag.text())).toEqual([
+      'built-in',
+      '3 tools',
+      'max',
+    ]);
+    expect(panel.text()).toContain('Pythinker K2');
+    expect(panel.text()).toContain('Read-only search agent');
+  });
+});
diff --git a/packages/agent-core/src/services/catalog/catalog.ts b/packages/agent-core/src/services/catalog/catalog.ts
new file mode 100644
index 000000000..74df5b116
--- /dev/null
+++ b/packages/agent-core/src/services/catalog/catalog.ts
@@ -0,0 +1,70 @@
+/**
+ * `ICatalogService` — daemon-facing view of what the agent can reach beyond
+ * skills and MCP servers: installed plugins and the subagent profiles.
+ *
+ * Both are read from the core process and both are global rather than
+ * session-scoped, so they share one service instead of two near-identical
+ * wrappers around `ICoreProcessService.rpc`.
+ *
+ * **CoreAPI surface used**:
+ *   - `core.rpc.listPlugins({})` → `readonly PluginSummary[]`
+ *   - `core.rpc.setPluginEnabled({id, enabled})`
+ *   - `core.rpc.listAgentProfiles({workDir})` → `AgentProfileCatalog`
+ *
+ * **Anti-corruption**: imports `@pymodel/agent-core` internals only for the
+ * `createDecorator` value and the rpc payload types.
+ */
+
+import { createDecorator } from '../../di';
+import type { AgentProfileSummary } from '../../rpc';
+import type { PluginSummary } from '../../plugin';
+import type { AgentProfile, Plugin } from '@pymodel/protocol';
+
+// ---------------------------------------------------------------------------
+// Adapter helpers
+// ---------------------------------------------------------------------------
+
+export function toProtocolPlugin(summary: PluginSummary): Plugin {
+  return {
+    id: summary.id,
+    display_name: summary.displayName,
+    version: summary.version,
+    enabled: summary.enabled,
+    state: summary.state,
+    skill_count: summary.skillCount,
+    mcp_server_count: summary.mcpServerCount,
+    has_errors: summary.hasErrors,
+    source: summary.source,
+  };
+}
+
+export function toProtocolAgentProfile(summary: AgentProfileSummary): AgentProfile {
+  return {
+    name: summary.name,
+    description: summary.description,
+    source: summary.source,
+    tools: [...summary.tools],
+    model: summary.model,
+    effort: summary.effort,
+    when_to_use: summary.whenToUse,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Interface
+// ---------------------------------------------------------------------------
+
+export interface ICatalogService {
+  readonly _serviceBrand: undefined;
+
+  /** Installed plugins and whether each one is currently enabled. */
+  listPlugins(): Promise<readonly Plugin[]>;
+
+  /** Enable or disable one plugin. Unknown ids are reported by the core. */
+  setPluginEnabled(pluginId: string, enabled: boolean): Promise<void>;
+
+  /** Subagent profiles resolvable from `workDir` (built-in, plugin, user, project). */
+  listAgentProfiles(workDir: string): Promise<readonly AgentProfile[]>;
+}
+
+export const ICatalogService = createDecorator<ICatalogService>('catalogService');
diff --git a/packages/agent-core/src/services/catalog/catalogService.ts b/packages/agent-core/src/services/catalog/catalogService.ts
new file mode 100644
index 000000000..a631d7aa7
--- /dev/null
+++ b/packages/agent-core/src/services/catalog/catalogService.ts
@@ -0,0 +1,33 @@
+/**
+ * `CatalogService` — implementation of `ICatalogService`.
+ */
+
+import { Disposable, InstantiationType, registerSingleton } from '../../di';
+import type { AgentProfile, Plugin } from '@pymodel/protocol';
+
+import { ICoreProcessService } from '../coreProcess/coreProcess';
+import { ICatalogService, toProtocolAgentProfile, toProtocolPlugin } from './catalog';
+
+export class CatalogService extends Disposable implements ICatalogService {
+  readonly _serviceBrand: undefined;
+
+  constructor(@ICoreProcessService private readonly core: ICoreProcessService) {
+    super();
+  }
+
+  async listPlugins(): Promise<readonly Plugin[]> {
+    const summaries = await this.core.rpc.listPlugins({});
+    return summaries.map(toProtocolPlugin);
+  }
+
+  async setPluginEnabled(pluginId: string, enabled: boolean): Promise<void> {
+    await this.core.rpc.setPluginEnabled({ id: pluginId, enabled });
+  }
+
+  async listAgentProfiles(workDir: string): Promise<readonly AgentProfile[]> {
+    const catalog = await this.core.rpc.listAgentProfiles({ workDir });
+    return catalog.profiles.map(toProtocolAgentProfile);
+  }
+}
+
+registerSingleton(ICatalogService, CatalogService, InstantiationType.Delayed);
diff --git a/packages/agent-core/src/services/index.ts b/packages/agent-core/src/services/index.ts
index 78cbbae76..c411c4477 100644
--- a/packages/agent-core/src/services/index.ts
+++ b/packages/agent-core/src/services/index.ts
@@ -184,6 +184,13 @@ export {
 } from './skill/skill';
 export { SkillService } from './skill/skillService';
 
+export {
+  ICatalogService,
+  toProtocolAgentProfile,
+  toProtocolPlugin,
+} from './catalog/catalog';
+export { CatalogService } from './catalog/catalogService';
+
 export {
   ITaskService,
   TaskAlreadyFinishedError,
diff --git a/packages/protocol/src/index.ts b/packages/protocol/src/index.ts
index aec2a6140..fd9ceda88 100644
--- a/packages/protocol/src/index.ts
+++ b/packages/protocol/src/index.ts
@@ -30,6 +30,7 @@ export * from './rest/message';
 export * from './rest/prompt';
 export * from './rest/approval';
 export * from './rest/question';
+export * from './rest/catalog';
 export * from './rest/tool';
 export * from './rest/skill';
 export * from './rest/task';
diff --git a/packages/protocol/src/rest/catalog.ts b/packages/protocol/src/rest/catalog.ts
new file mode 100644
index 000000000..978fca284
--- /dev/null
+++ b/packages/protocol/src/rest/catalog.ts
@@ -0,0 +1,48 @@
+import { z } from 'zod';
+
+/** One installed plugin and whether it is currently enabled. */
+export const pluginSchema = z.object({
+  id: z.string().min(1),
+  display_name: z.string().min(1),
+  version: z.string().optional(),
+  enabled: z.boolean(),
+  state: z.string(),
+  skill_count: z.number().int().nonnegative(),
+  mcp_server_count: z.number().int().nonnegative(),
+  has_errors: z.boolean(),
+  source: z.string(),
+});
+export type Plugin = z.infer<typeof pluginSchema>;
+
+export const listPluginsResponseSchema = z.object({
+  plugins: z.array(pluginSchema),
+});
+export type ListPluginsResponse = z.infer<typeof listPluginsResponseSchema>;
+
+export const setPluginEnabledRequestSchema = z.object({
+  enabled: z.boolean(),
+});
+export type SetPluginEnabledRequest = z.infer<typeof setPluginEnabledRequestSchema>;
+
+export const setPluginEnabledResultSchema = z.object({
+  id: z.string().min(1),
+  enabled: z.boolean(),
+});
+export type SetPluginEnabledResult = z.infer<typeof setPluginEnabledResultSchema>;
+
+/** One subagent profile the agent can dispatch work to. */
+export const agentProfileSchema = z.object({
+  name: z.string().min(1),
+  description: z.string().optional(),
+  source: z.enum(['built-in', 'plugin', 'user', 'project']),
+  tools: z.array(z.string()),
+  model: z.string().optional(),
+  effort: z.string().optional(),
+  when_to_use: z.string().optional(),
+});
+export type AgentProfile = z.infer<typeof agentProfileSchema>;
+
+export const listAgentProfilesResponseSchema = z.object({
+  profiles: z.array(agentProfileSchema),
+});
+export type ListAgentProfilesResponse = z.infer<typeof listAgentProfilesResponseSchema>;
diff --git a/packages/server/src/routes/catalog.ts b/packages/server/src/routes/catalog.ts
new file mode 100644
index 000000000..9d24ed620
--- /dev/null
+++ b/packages/server/src/routes/catalog.ts
@@ -0,0 +1,144 @@
+/**
+ * `/plugins*` + `/agent-profiles` REST routes.
+ *
+ * 3 endpoints:
+ *
+ *   GET  /plugins                          -                     data: {plugins: Plugin[]}
+ *   POST /plugins/{plugin_id}:set-enabled  body: {enabled}       data: {id, enabled}
+ *   GET  /agent-profiles                   query: {work_dir}     data: {profiles: AgentProfile[]}
+ *
+ * Both collections are global rather than session-scoped — plugins are loaded
+ * once per daemon, and subagent profiles are resolved from a working directory
+ * passed as a query parameter.
+ *
+ * **Action suffix**: the POST endpoint uses the shared `parseActionSuffix`
+ * helper; `:set-enabled` is the only action and there is no bare form.
+ *
+ * **Anti-corruption**: route resolves `ICatalogService` via the accessor; no
+ * SDK imports.
+ */
+
+import {
+  ErrorCode,
+  listAgentProfilesResponseSchema,
+  listPluginsResponseSchema,
+  setPluginEnabledRequestSchema,
+  setPluginEnabledResultSchema,
+} from '@pymodel/protocol';
+import { ICatalogService, type IInstantiationService } from '@pymodel/agent-core';
+import { z } from 'zod';
+
+import { errEnvelope, okEnvelope } from '../envelope';
+import { defineRoute } from '../middleware/defineRoute';
+import { parseActionSuffix } from './action-suffix';
+
+interface CatalogRouteHost {
+  get(
+    path: string,
+    options: { preHandler: unknown[]; schema?: Record<string, unknown> } | undefined,
+    handler: (
+      req: { id: string; query: unknown; params: unknown },
+      reply: { send(payload: unknown): unknown },
+    ) => Promise<void> | void,
+  ): unknown;
+  post(
+    path: string,
+    options: { preHandler: unknown[]; schema?: Record<string, unknown> },
+    handler: (
+      req: { id: string; body: unknown; params: unknown },
+      reply: { send(payload: unknown): unknown },
+    ) => Promise<void> | void,
+  ): unknown;
+}
+
+const listAgentProfilesQuerySchema = z.object({
+  work_dir: z.string().min(1),
+});
+
+export function registerCatalogRoutes(
+  app: CatalogRouteHost,
+  ix: IInstantiationService,
+): void {
+  // GET /plugins --------------------------------------------------------
+  const listPluginsRoute = defineRoute(
+    {
+      method: 'GET',
+      path: '/plugins',
+      success: { data: listPluginsResponseSchema },
+      description: 'List installed plugins',
+      tags: ['catalog'],
+    },
+    async (req, reply) => {
+      const plugins = await ix.invokeFunction((a) => a.get(ICatalogService).listPlugins());
+      reply.send(okEnvelope({ plugins }, req.id));
+    },
+  );
+  app.get(
+    listPluginsRoute.path,
+    listPluginsRoute.options,
+    listPluginsRoute.handler as Parameters<CatalogRouteHost['get']>[2],
+  );
+
+  // POST /plugins/{plugin_id}:set-enabled -------------------------------
+  const setPluginEnabledRoute = defineRoute(
+    {
+      method: 'POST',
+      path: '/plugins/{tail}',
+      body: setPluginEnabledRequestSchema,
+      success: { data: setPluginEnabledResultSchema },
+      description: 'Enable or disable a plugin by ID',
+      tags: ['catalog'],
+      operationId: 'setPluginEnabled',
+    },
+    async (req, reply) => {
+      const { tail } = req.params as { tail: string };
+      const parsed = parseActionSuffix({
+        tail,
+        allowedActions: ['set-enabled'] as const,
+        resourceLabel: 'plugin',
+      });
+      if (parsed.kind === 'invalid' || parsed.kind === 'bare') {
+        reply.send(
+          errEnvelope(
+            ErrorCode.VALIDATION_FAILED,
+            parsed.kind === 'invalid' ? parsed.reason : `unsupported action: ${tail}`,
+            req.id,
+          ),
+        );
+        return;
+      }
+      const { enabled } = req.body as { enabled: boolean };
+      await ix.invokeFunction((a) => a.get(ICatalogService).setPluginEnabled(parsed.id, enabled));
+      reply.send(okEnvelope({ id: parsed.id, enabled }, req.id));
+    },
+  );
+  app.post(
+    setPluginEnabledRoute.path,
+    setPluginEnabledRoute.options,
+    setPluginEnabledRoute.handler as Parameters<CatalogRouteHost['post']>[2],
+  );
+
+  // GET /agent-profiles -------------------------------------------------
+  const listAgentProfilesRoute = defineRoute(
+    {
+      method: 'GET',
+      path: '/agent-profiles',
+      querystring: listAgentProfilesQuerySchema,
+      success: { data: listAgentProfilesResponseSchema },
+      description: 'List subagent profiles resolvable from a working directory',
+      tags: ['catalog'],
+    },
+    async (req, reply) => {
+      const { work_dir: workDir } = req.query as { work_dir: string };
+      const profiles = await ix.invokeFunction((a) =>
+        a.get(ICatalogService).listAgentProfiles(workDir),
+      );
+      reply.send(okEnvelope({ profiles }, req.id));
+    },
+  );
+  app.get(
+    listAgentProfilesRoute.path,
+    listAgentProfilesRoute.options,
+    listAgentProfilesRoute.handler as Parameters<CatalogRouteHost['get']>[2],
+  );
+}
diff --git a/packages/server/src/routes/registerApiV1Routes.ts b/packages/server/src/routes/registerApiV1Routes.ts
index 426a19392..2304c193e 100644
--- a/packages/server/src/routes/registerApiV1Routes.ts
+++ b/packages/server/src/routes/registerApiV1Routes.ts
@@ -16,6 +16,7 @@ import { registerPromptsRoutes } from './prompts';
 import { registerQuestionsRoutes } from './questions';
 import { registerSessionsRoutes } from './sessions';
 import { registerShutdownRoutes } from './shutdown';
+import { registerCatalogRoutes } from './catalog';
 import { registerSkillsRoutes } from './skills';
 import { registerSnapshotRoutes } from './snapshot';
 import { registerTasksRoutes } from './tasks';
@@ -91,6 +92,7 @@ export async function registerApiV1Routes(
     );
     registerToolsRoutes(apiV1 as unknown as Parameters<typeof registerToolsRoutes>[0], ix);
     registerSkillsRoutes(apiV1 as unknown as Parameters<typeof registerSkillsRoutes>[0], ix);
+    registerCatalogRoutes(apiV1 as unknown as Parameters<typeof registerCatalogRoutes>[0], ix);
     registerTasksRoutes(apiV1 as unknown as Parameters<typeof registerTasksRoutes>[0], ix);
     registerTerminalsRoutes(
       apiV1 as unknown as Parameters<typeof registerTerminalsRoutes>[0],
diff --git a/packages/server/src/start.ts b/packages/server/src/start.ts
index b8fd11e52..a1a46854a 100644
--- a/packages/server/src/start.ts
+++ b/packages/server/src/start.ts
@@ -1,4 +1,4 @@
-import { InstantiationService, resolveConfigPath, resolvePythinkerHome, setUnexpectedErrorHandler, IApprovalService, IAuthSummaryService, IEnvironmentService, IEventService, ICoreProcessService, IModelCatalogService, IMcpService, IMessageService, IFileStore, IFsGitService, IFsSearchService, IFsService, IFsWatcher, ILogService, IPromptService, IQuestionService, ISessionService, ISkillService, ITaskService, ITerminalService, IToolService, IWorkspaceFsService, IWorkspaceRegistry, FsPathEscapesError, FsWatchLimitError, FsWatcherService, SessionNotFoundError, createConnectionLookup, resolveSafePath, type ServiceIdentifier, type CoreProcessServiceOptions } from '@pymodel/agent-core';
+import { InstantiationService, resolveConfigPath, resolvePythinkerHome, setUnexpectedErrorHandler, IApprovalService, IAuthSummaryService, IEnvironmentService, IEventService, ICoreProcessService, IModelCatalogService, IMcpService, IMessageService, IFileStore, IFsGitService, IFsSearchService, IFsService, IFsWatcher, ILogService, IPromptService, IQuestionService, ISessionService, ISkillService, ICatalogService, ITaskService, ITerminalService, IToolService, IWorkspaceFsService, IWorkspaceRegistry, FsPathEscapesError, FsWatchLimitError, FsWatcherService, SessionNotFoundError, createConnectionLookup, resolveSafePath, type ServiceIdentifier, type CoreProcessServiceOptions } from '@pymodel/agent-core';
 import { ErrorCode, createAsyncApiDocument } from '@pymodel/protocol';
 import Fastify from 'fastify';
 import { promises as fspPromises } from 'node:fs';
@@ -235,6 +235,7 @@ export async function startServer(opts: ServerStartOptions): Promise<RunningServ
       a.get(IToolService);
       a.get(IMcpService);
       a.get(ISkillService);
+      a.get(ICatalogService);
 
       a.get(ITaskService);
 

From e9a4ef4a6bdf83eb5861c60ba2e8709544a525c6 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 21:39:18 -0400
Subject: [PATCH 08/16] feat(web): adopt the open-webui row design across the
 settings pages

Port the connector-row anatomy from the open-webui reference: flat borderless
rows with a leading glyph, the name and its tags inline, and a right-hand
action cluster. Only the row content fades when an entry is off, so the switch
that turns it back on keeps full contrast.
---
 .../src/components/SettingsDialog.vue         | 229 ++++++++++++------
 .../test/settings-dialog.test.ts              |   3 +-
 2 files changed, 158 insertions(+), 74 deletions(-)

diff --git a/apps/pythinker-web/src/components/SettingsDialog.vue b/apps/pythinker-web/src/components/SettingsDialog.vue
index 72a19559c..cc9c51b2f 100644
--- a/apps/pythinker-web/src/components/SettingsDialog.vue
+++ b/apps/pythinker-web/src/components/SettingsDialog.vue
@@ -729,21 +729,28 @@ function setTab(tab: SettingsTab): void {
                   class="listing-row"
                   :class="{ off: !isSkillEnabled(skill.name) }"
                 >
-                  <div class="listing-main">
-                    <span class="listing-name mono">{{ skill.name }}</span>
-                    <span v-if="skill.disableModelInvocation" class="tag">{{ t('settings.skills.slashOnly') }}</span>
-                    <span class="listing-desc">{{ skill.description }}</span>
-                    <button
-                      type="button"
-                      class="switch sm"
-                      role="switch"
-                      :class="{ on: isSkillEnabled(skill.name) }"
-                      :aria-checked="isSkillEnabled(skill.name)"
-                      :aria-label="t('settings.skills.toggleAria', { name: skill.name })"
-                      @click="toggleSkill(skill.name)"
-                    >
-                      <span class="knob" />
-                    </button>
+                  <div class="listing-top">
+                    <div class="listing-main">
+                      <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+                        <path d="M12 3l2.1 4.9 5.4.5-4.1 3.6 1.2 5.3L12 14.6 7.4 17.3l1.2-5.3L4.5 8.4l5.4-.5L12 3z" stroke-linejoin="round" />
+                      </svg>
+                      <span class="listing-name mono">{{ skill.name }}</span>
+                      <span v-if="skill.disableModelInvocation" class="tag">{{ t('settings.skills.slashOnly') }}</span>
+                      <span class="listing-desc">{{ skill.description }}</span>
+                    </div>
+                    <div class="row-actions">
+                      <button
+                        type="button"
+                        class="switch sm"
+                        role="switch"
+                        :class="{ on: isSkillEnabled(skill.name) }"
+                        :aria-checked="isSkillEnabled(skill.name)"
+                        :aria-label="t('settings.skills.toggleAria', { name: skill.name })"
+                        @click="toggleSkill(skill.name)"
+                      >
+                        <span class="knob" />
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -765,16 +772,31 @@ function setTab(tab: SettingsTab): void {
               <p v-else-if="(connectors?.length ?? 0) === 0" class="sec-empty">{{ t('settings.connectors.empty') }}</p>
               <div v-else class="listing">
                 <div v-for="connector in connectors" :key="connector.id" class="listing-row">
-                  <div class="listing-main">
-                    <span class="dot" :class="`s-${connector.status}`" aria-hidden="true" />
-                    <span class="listing-name">{{ connector.name }}</span>
-                    <span class="tag">{{ connector.transport }}</span>
-                    <span class="listing-meta">{{ t('settings.connectors.tools', { count: connector.toolCount }) }}</span>
-                    <button type="button" class="act" @click="emit('restartConnector', connector.id)">
-                      {{ t('settings.connectors.restart') }}
-                    </button>
+                  <div class="listing-top">
+                    <div class="listing-main">
+                      <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+                        <path d="M9 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0V8zM12 17v4" stroke-linecap="round" />
+                      </svg>
+                      <span class="listing-name">{{ connector.name }}</span>
+                      <span class="tag">{{ connector.transport }}</span>
+                      <span class="listing-desc">{{ t(`settings.connectors.status.${connector.status}`) }}</span>
+                      <span class="listing-meta">{{ t('settings.connectors.tools', { count: connector.toolCount }) }}</span>
+                    </div>
+                    <div class="row-actions">
+                      <span class="dot" :class="`s-${connector.status}`" aria-hidden="true" />
+                      <button
+                        type="button"
+                        class="icon-btn"
+                        :title="t('settings.connectors.restart')"
+                        :aria-label="t('settings.connectors.restart')"
+                        @click="emit('restartConnector', connector.id)"
+                      >
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+                          <path d="M20 12a8 8 0 1 1-2.6-5.9M20 4v5h-5" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                      </button>
+                    </div>
                   </div>
-                  <p class="listing-desc">{{ t(`settings.connectors.status.${connector.status}`) }}</p>
                   <p v-if="connector.lastError" class="listing-error">{{ connector.lastError }}</p>
                 </div>
               </div>
@@ -800,22 +822,29 @@ function setTab(tab: SettingsTab): void {
                   class="listing-row"
                   :class="{ off: !plugin.enabled }"
                 >
-                  <div class="listing-main">
-                    <span class="listing-name">{{ plugin.displayName }}</span>
-                    <span v-if="plugin.version" class="tag">{{ plugin.version }}</span>
-                    <span class="tag">{{ plugin.source }}</span>
-                    <span class="listing-meta">{{ t('settings.plugins.counts', { skills: plugin.skillCount, servers: plugin.mcpServerCount }) }}</span>
-                    <button
-                      type="button"
-                      class="switch sm"
-                      role="switch"
-                      :class="{ on: plugin.enabled }"
-                      :aria-checked="plugin.enabled"
-                      :aria-label="t('settings.plugins.toggleAria', { name: plugin.displayName })"
-                      @click="emit('setPluginEnabled', { pluginId: plugin.id, enabled: !plugin.enabled })"
-                    >
-                      <span class="knob" />
-                    </button>
+                  <div class="listing-top">
+                    <div class="listing-main">
+                      <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+                        <path d="M10 4a2 2 0 1 1 4 0v1h3a1 1 0 0 1 1 1v3h1a2 2 0 1 1 0 4h-1v3a1 1 0 0 1-1 1h-3v-1a2 2 0 1 0-4 0v1H6a1 1 0 0 1-1-1v-3H4a2 2 0 1 1 0-4h1V6a1 1 0 0 1 1-1h4V4z" stroke-linejoin="round" />
+                      </svg>
+                      <span class="listing-name">{{ plugin.displayName }}</span>
+                      <span v-if="plugin.version" class="tag">{{ plugin.version }}</span>
+                      <span class="tag">{{ plugin.source }}</span>
+                      <span class="listing-meta">{{ t('settings.plugins.counts', { skills: plugin.skillCount, servers: plugin.mcpServerCount }) }}</span>
+                    </div>
+                    <div class="row-actions">
+                      <button
+                        type="button"
+                        class="switch sm"
+                        role="switch"
+                        :class="{ on: plugin.enabled }"
+                        :aria-checked="plugin.enabled"
+                        :aria-label="t('settings.plugins.toggleAria', { name: plugin.displayName })"
+                        @click="emit('setPluginEnabled', { pluginId: plugin.id, enabled: !plugin.enabled })"
+                      >
+                        <span class="knob" />
+                      </button>
+                    </div>
                   </div>
                   <p v-if="plugin.hasErrors" class="listing-error">{{ t('settings.plugins.hasErrors') }}</p>
                 </div>
@@ -837,14 +866,20 @@ function setTab(tab: SettingsTab): void {
               <p v-if="(subagents?.length ?? 0) === 0" class="sec-empty">{{ t('settings.subagents.empty') }}</p>
               <div v-else class="listing">
                 <div v-for="agent in subagents" :key="agent.name" class="listing-row">
-                  <div class="listing-main">
-                    <span class="listing-name mono">{{ agent.name }}</span>
-                    <span class="tag">{{ agent.source }}</span>
-                    <span class="tag">{{ t('settings.subagents.tools', { count: agent.tools.length }) }}</span>
-                    <span v-if="agent.model" class="listing-meta">{{ agent.model }}</span>
-                    <span v-if="agent.effort" class="tag">{{ agent.effort }}</span>
+                  <div class="listing-top">
+                    <div class="listing-main">
+                      <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+                        <rect x="4" y="8" width="16" height="11" rx="3" />
+                        <path d="M12 4v4M9 13h.01M15 13h.01" stroke-linecap="round" />
+                      </svg>
+                      <span class="listing-name mono">{{ agent.name }}</span>
+                      <span class="tag">{{ agent.source }}</span>
+                      <span class="tag">{{ t('settings.subagents.tools', { count: agent.tools.length }) }}</span>
+                      <span v-if="agent.effort" class="tag">{{ agent.effort }}</span>
+                      <span v-if="agent.model" class="listing-meta">{{ agent.model }}</span>
+                    </div>
                   </div>
-                  <p v-if="agent.description" class="listing-desc">{{ agent.description }}</p>
+                  <p v-if="agent.description" class="listing-desc listing-indent">{{ agent.description }}</p>
                 </div>
               </div>
             </section>
@@ -871,11 +906,16 @@ function setTab(tab: SettingsTab): void {
                     :key="`${group.event}/${index}`"
                     class="listing-row"
                   >
-                    <div class="listing-main">
-                      <span class="listing-name mono">{{ hook.matcher ?? '*' }}</span>
-                      <span class="tag">{{ hook.type ?? 'command' }}</span>
-                      <span v-if="hook.async === true" class="tag">{{ t('settings.hooks.async') }}</span>
-                      <span v-if="hook.timeout !== undefined" class="listing-meta">{{ t('settings.hooks.timeout', { seconds: hook.timeout }) }}</span>
+                    <div class="listing-top">
+                      <div class="listing-main">
+                        <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+                          <path d="M13 3L5 14h6l-2 7 8-11h-6l2-7z" stroke-linejoin="round" />
+                        </svg>
+                        <span class="listing-name mono">{{ hook.matcher ?? '*' }}</span>
+                        <span class="tag">{{ hook.type ?? 'command' }}</span>
+                        <span v-if="hook.async === true" class="tag">{{ t('settings.hooks.async') }}</span>
+                        <span v-if="hook.timeout !== undefined" class="listing-meta">{{ t('settings.hooks.timeout', { seconds: hook.timeout }) }}</span>
+                      </div>
                     </div>
                     <p class="listing-path mono">{{ hook.command ?? hook.url ?? '—' }}</p>
                   </div>
@@ -917,9 +957,11 @@ function setTab(tab: SettingsTab): void {
               <p v-if="usageByModel.length === 0" class="sec-empty">{{ t('settings.usage.empty') }}</p>
               <div v-else class="listing">
                 <div v-for="entry in usageByModel" :key="entry.model" class="listing-row">
-                  <div class="listing-main">
-                    <span class="listing-name">{{ entry.model }}</span>
-                    <span class="listing-meta">{{ entry.share }}</span>
+                  <div class="listing-top">
+                    <div class="listing-main">
+                      <span class="listing-name">{{ entry.model }}</span>
+                      <span class="listing-meta">{{ entry.share }}</span>
+                    </div>
                   </div>
                   <div class="usage-bar"><span :style="{ width: entry.share }" /></div>
                 </div>
@@ -1353,7 +1395,7 @@ function setTab(tab: SettingsTab): void {
 .listing {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 2px;
 }
 .listing-head {
   margin: 14px 0 6px;
@@ -1361,53 +1403,94 @@ function setTab(tab: SettingsTab): void {
   font-weight: 600;
   color: var(--muted);
 }
+/* Rows are flat rather than carded: the leading glyph, the name and the right
+   action cluster carry the structure, so a border would only add noise. */
 .listing-row {
-  padding: 8px 12px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--panel);
+  display: flex;
+  flex-direction: column;
+  padding: 5px 0;
 }
-/* A disabled skill stays readable but clearly recedes. */
-.listing-row.off .listing-name,
-.listing-row.off .listing-desc {
-  color: var(--faint);
+.listing-top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
 }
+/* Only the content fades when an entry is off — the switch that turns it back
+   on has to stay at full contrast. */
+.listing-row.off .listing-main { opacity: 0.5; }
 .listing-main {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex: 1;
   min-width: 0;
 }
+.row-actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 4px;
+}
+.listing-glyph {
+  flex: none;
+  width: 15px;
+  height: 15px;
+  color: var(--faint);
+}
 .listing-name {
-  font-weight: 600;
+  flex: none;
+  font-weight: 500;
   color: var(--ink);
 }
 .listing-meta {
-  margin-left: auto;
+  flex: none;
   font-size: calc(var(--ui-font-size) - 2px);
-  color: var(--muted);
+  color: var(--faint);
 }
 .listing-desc,
 .listing-path,
 .listing-error {
-  margin: 3px 0 0;
+  margin: 2px 0 0;
   font-size: calc(var(--ui-font-size) - 2px);
   color: var(--muted);
 }
-/* On the skills page the description shares the row with the name, so it
-   truncates instead of wrapping — the switch must stay on the same line. */
+/* Inside a row the description shares the line with the name, so it truncates
+   instead of wrapping and pushes the meta text to the right edge. */
 .listing-main .listing-desc {
-  margin: 0 0 0 auto;
-  padding-left: 10px;
+  margin: 0;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--faint);
 }
+.listing-main .listing-meta { margin-left: auto; }
 .listing-path {
+  padding-left: 27px;
   color: var(--faint);
   word-break: break-all;
 }
+.listing-error { padding-left: 27px; }
+.listing-indent { padding-left: 27px; }
+
+/* Ghost icon button for the per-row actions — no chrome until hover. */
+.icon-btn {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--faint);
+  cursor: pointer;
+}
+.icon-btn svg { width: 15px; height: 15px; }
+.icon-btn:hover { background: var(--soft); color: var(--ink); }
 .listing-error {
   color: var(--err);
 }
@@ -1415,7 +1498,7 @@ function setTab(tab: SettingsTab): void {
   flex: none;
   padding: 1px 6px;
   border-radius: 5px;
-  border: 1px solid var(--line);
+  background: var(--soft);
   font-size: calc(var(--ui-font-size) - 3px);
   color: var(--muted);
 }
diff --git a/apps/pythinker-web/test/settings-dialog.test.ts b/apps/pythinker-web/test/settings-dialog.test.ts
index 59dd63be8..cb5fef7fd 100644
--- a/apps/pythinker-web/test/settings-dialog.test.ts
+++ b/apps/pythinker-web/test/settings-dialog.test.ts
@@ -331,7 +331,8 @@ describe('SettingsDialog connectors page', () => {
     expect(panel.text()).toContain('spawn ENOENT');
     expect(panel.text()).toContain('2 tools');
 
-    await panel.findAll('.act')[1]!.trigger('click');
+    // Restart is a ghost icon button in the row's action cluster.
+    await panel.findAll('.icon-btn')[1]!.trigger('click');
     expect(wrapper.emitted('restartConnector')).toEqual([['mcp_2']]);
   });
 });

From b60512be2072252315e2a3224b74765ec7611c52 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 22:53:54 -0400
Subject: [PATCH 09/16] refactor(web): make settings an inline route instead of
 a modal

SettingsDialog fused four jobs into 1,571 lines: the modal shell, the tab nav,
ten page bodies and their derived state. Because the shell was welded to the
content, the pages could only ever render as an overlay.

Split it. useSettingsNav owns the tab union, the groups, the active tab and the
guarded lazy loads; SettingsNav renders the nav inside the real sidebar, and
SettingsPane hosts one component per page in the content area. The sidebar keeps
its header and New Session button in both modes and swaps only its body.
---
 apps/pythinker-web/src/App.vue                |  104 +-
 .../src/components/SettingsDialog.vue         | 1571 -----------------
 apps/pythinker-web/src/components/Sidebar.vue |   31 +
 .../src/components/settings/ListingRow.vue    |   32 +
 .../src/components/settings/SettingsNav.vue   |   68 +
 .../src/components/settings/SettingsPane.vue  |  119 ++
 .../settings/pages/AdvancedPage.vue           |   33 +
 .../components/settings/pages/AgentPage.vue   |  221 +++
 .../settings/pages/ConnectorsPage.vue         |   48 +
 .../settings/pages/ExperimentalPage.vue       |   28 +
 .../components/settings/pages/GeneralPage.vue |  241 +++
 .../components/settings/pages/HooksPage.vue   |   51 +
 .../components/settings/pages/PluginsPage.vue |   41 +
 .../components/settings/pages/SkillsPage.vue  |   78 +
 .../settings/pages/SubagentsPage.vue          |   35 +
 .../components/settings/pages/UsagePage.vue   |   71 +
 .../src/components/settings/settings.css      |  260 +++
 .../src/composables/useSettingsNav.ts         |   68 +
 .../src/i18n/locales/en/settings.ts           |    2 +
 .../test/settings-dialog.test.ts              |  499 ------
 apps/pythinker-web/test/settings-pane.test.ts |  436 +++++
 21 files changed, 1928 insertions(+), 2109 deletions(-)
 delete mode 100644 apps/pythinker-web/src/components/SettingsDialog.vue
 create mode 100644 apps/pythinker-web/src/components/settings/ListingRow.vue
 create mode 100644 apps/pythinker-web/src/components/settings/SettingsNav.vue
 create mode 100644 apps/pythinker-web/src/components/settings/SettingsPane.vue
 create mode 100644 apps/pythinker-web/src/components/settings/pages/AdvancedPage.vue
 create mode 100644 apps/pythinker-web/src/components/settings/pages/AgentPage.vue
 create mode 100644 apps/pythinker-web/src/components/settings/pages/ConnectorsPage.vue
 create mode 100644 apps/pythinker-web/src/components/settings/pages/ExperimentalPage.vue
 create mode 100644 apps/pythinker-web/src/components/settings/pages/GeneralPage.vue
 create mode 100644 apps/pythinker-web/src/components/settings/pages/HooksPage.vue
 create mode 100644 apps/pythinker-web/src/components/settings/pages/PluginsPage.vue
 create mode 100644 apps/pythinker-web/src/components/settings/pages/SkillsPage.vue
 create mode 100644 apps/pythinker-web/src/components/settings/pages/SubagentsPage.vue
 create mode 100644 apps/pythinker-web/src/components/settings/pages/UsagePage.vue
 create mode 100644 apps/pythinker-web/src/components/settings/settings.css
 create mode 100644 apps/pythinker-web/src/composables/useSettingsNav.ts
 delete mode 100644 apps/pythinker-web/test/settings-dialog.test.ts
 create mode 100644 apps/pythinker-web/test/settings-pane.test.ts

diff --git a/apps/pythinker-web/src/App.vue b/apps/pythinker-web/src/App.vue
index 3808cef47..ec74b97da 100644
--- a/apps/pythinker-web/src/App.vue
+++ b/apps/pythinker-web/src/App.vue
@@ -14,7 +14,7 @@ import type { AgentMember } from './types';
 import ModelPicker from './components/ModelPicker.vue';
 import ProviderManager from './components/ProviderManager.vue';
 import NewSessionDialog from './components/NewSessionDialog.vue';
-import SettingsDialog from './components/SettingsDialog.vue';
+import SettingsPane from './components/settings/SettingsPane.vue';
 import SessionsDialog from './components/SessionsDialog.vue';
 import AddWorkspaceDialog from './components/AddWorkspaceDialog.vue';
 import StatusPanel from './components/StatusPanel.vue';
@@ -30,6 +30,7 @@ import { isTraceEnabled } from './debug/trace';
 import { usePythinkerWebClient } from './composables/usePythinkerWebClient';
 import { useIsMobile } from './composables/useIsMobile';
 import { useIsDark } from './composables/useIsDark';
+import { useSettingsNav } from './composables/useSettingsNav';
 import type { AppConfig, ThinkingLevel } from './api/types';
 import type { FilePreviewRequest, ToolMedia } from './types';
 
@@ -610,6 +611,31 @@ const showAddWorkspace = ref(false);
 const showStatusPanel = ref(false);
 const showSettings = ref(false);
 
+const { activeTab: activeSettingsTab, setTab: selectSettingsTab } = useSettingsNav({
+  counts: {
+    connectors: () => client.connectors.value.length,
+    plugins: () => client.plugins.value.length,
+    subagents: () => client.subagents.value.length,
+  },
+  onLoadConnectors: () => { void client.loadConnectors(); },
+  onLoadPlugins: () => { void client.loadPlugins(); },
+  onLoadSubagents: () => { void client.loadSubagents(); },
+});
+
+function toggleSettings(): void {
+  showSettings.value = !showSettings.value;
+}
+
+function loginFromSettings(): void {
+  showSettings.value = false;
+  openLogin();
+}
+
+function openOnboardingFromSettings(): void {
+  showSettings.value = false;
+  openOnboarding();
+}
+
 type SubmitPayload = {
   text: string;
   attachments: { fileId: string; kind: 'image' | 'video' }[];
@@ -918,6 +944,8 @@ function openPr(url: string): void {
         :attention-by-session="client.attentionBySession.value"
         :pending-by-session="client.pendingBySession.value"
         :unread-by-session="client.unreadBySession.value"
+        :mode="showSettings ? 'settings' : 'sessions'"
+        :active-settings-tab="activeSettingsTab"
         @select="client.selectSession($event)"
         @create="handleCreateSession"
         @create-in-workspace="handleCreateSessionInWorkspace($event)"
@@ -930,6 +958,8 @@ function openPr(url: string): void {
         @delete-workspace="(id) => client.deleteWorkspace(id)"
         @select-workspaces="handleSelectWorkspaces"
         @open-settings="showSettings = true"
+        @close-settings="showSettings = false"
+        @select-settings-tab="selectSettingsTab($event)"
         @collapse="toggleSidebarCollapse"
       />
       <ResizeHandle
@@ -992,7 +1022,7 @@ function openPr(url: string): void {
           class="rail-btn"
           :title="t('settings.title')"
           :aria-label="t('settings.title')"
-          @click="showSettings = true"
+          @click="toggleSettings"
         >
           <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="12" cy="12" r="3" />
@@ -1014,8 +1044,40 @@ function openPr(url: string): void {
       @open-settings="showMobileSettings = true"
     />
 
+    <SettingsPane
+      v-if="showSettings && !isMobile"
+      :active-tab="activeSettingsTab"
+      :theme="client.theme.value"
+      :color-scheme="client.colorScheme.value"
+      :ui-font-size="client.uiFontSize.value"
+      :auth-ready="client.authReady.value"
+      :account-model="client.defaultModel.value"
+      :notify="client.notifyOnComplete.value"
+      :notify-permission="client.notifyPermission.value"
+      :beta-toc="client.betaToc.value"
+      :config="client.config.value"
+      :models="client.models.value"
+      :config-saving="configSaving"
+      :skills="client.skills.value"
+      :connectors="client.connectors.value"
+      :connectors-loading="client.connectorsLoading.value"
+      :sessions="client.sessionsWithUsage.value"
+      :plugins="client.plugins.value"
+      :subagents="client.subagents.value"
+      @set-plugin-enabled="client.setPluginEnabled($event.pluginId, $event.enabled)"
+      @restart-connector="client.restartConnector($event)"
+      @set-theme="client.setTheme($event)"
+      @set-color-scheme="client.setColorScheme($event)"
+      @set-ui-font-size="client.setUiFontSize($event)"
+      @set-notify="client.setNotifyOnComplete($event)"
+      @set-beta-toc="client.setBetaToc($event)"
+      @update-config="handleUpdateConfig($event)"
+      @login="loginFromSettings"
+      @open-onboarding="openOnboardingFromSettings"
+    />
+
     <ConversationPane
-      v-if="!hasMultiSelect"
+      v-else-if="!hasMultiSelect"
       ref="conversationPaneRef"
       :mobile="isMobile"
       :modern="client.theme.value === 'modern' || client.theme.value === 'pythinker'"
@@ -1188,42 +1250,6 @@ function openPr(url: string): void {
       @close="showModelPicker = false"
     />
 
-    <!-- Settings page (modal) -->
-    <SettingsDialog
-      v-if="showSettings"
-      :theme="client.theme.value"
-      :color-scheme="client.colorScheme.value"
-      :ui-font-size="client.uiFontSize.value"
-      :auth-ready="client.authReady.value"
-      :account-model="client.defaultModel.value"
-      :notify="client.notifyOnComplete.value"
-      :notify-permission="client.notifyPermission.value"
-      :beta-toc="client.betaToc.value"
-      :config="client.config.value"
-      :models="client.models.value"
-      :config-saving="configSaving"
-      :skills="client.skills.value"
-      :connectors="client.connectors.value"
-      :connectors-loading="client.connectorsLoading.value"
-      :sessions="client.sessionsWithUsage.value"
-      :plugins="client.plugins.value"
-      :subagents="client.subagents.value"
-      @load-plugins="client.loadPlugins()"
-      @set-plugin-enabled="client.setPluginEnabled($event.pluginId, $event.enabled)"
-      @load-subagents="client.loadSubagents()"
-      @load-connectors="client.loadConnectors()"
-      @restart-connector="client.restartConnector($event)"
-      @set-theme="client.setTheme($event)"
-      @set-color-scheme="client.setColorScheme($event)"
-      @set-ui-font-size="client.setUiFontSize($event)"
-      @set-notify="client.setNotifyOnComplete($event)"
-      @set-beta-toc="client.setBetaToc($event)"
-      @update-config="handleUpdateConfig($event)"
-      @login="() => { showSettings = false; openLogin(); }"
-            @open-onboarding="() => { showSettings = false; openOnboarding(); }"
-      @close="showSettings = false"
-    />
-
     <!-- Provider Manager overlay -->
     <ProviderManager
       v-if="showProviders"
diff --git a/apps/pythinker-web/src/components/SettingsDialog.vue b/apps/pythinker-web/src/components/SettingsDialog.vue
deleted file mode 100644
index cc9c51b2f..000000000
--- a/apps/pythinker-web/src/components/SettingsDialog.vue
+++ /dev/null
@@ -1,1571 +0,0 @@
-<!-- apps/pythinker-web/src/components/SettingsDialog.vue -->
-<!-- The app's dedicated Settings page (modal). Consolidates what used to be
-     scattered in the sidebar account popover: appearance, language, account,
-     connection, plus notifications and the troubleshooting-log export. -->
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useDialogFocus } from '../composables/useDialogFocus';
-import { serverEndpointLabel } from '../api/config';
-import { downloadTraceLog, isTraceEnabled } from '../debug/trace';
-import type { ColorScheme, Theme } from '../composables/usePythinkerWebClient';
-import type {
-  AppConfig,
-  AppConfigProvider,
-  AppConnector,
-  AppHook,
-  AppModel,
-  AppPlugin,
-  AppSession,
-  AppSkill,
-  AppSubagent,
-} from '../api/types';
-import { formatTokens } from '../lib/formatTokens';
-
-const { t } = useI18n();
-
-const props = defineProps<{
-  theme: Theme;
-  colorScheme: ColorScheme;
-  uiFontSize: number;
-  authReady: boolean;
-  accountModel?: string | null;
-  /** Browser-notification-on-completion preference. */
-  notify: boolean;
-  /** OS permission state ('default' | 'granted' | 'denied') for the hint. */
-  notifyPermission?: string;
-  /** Beta conversation TOC (proportional, viewport, hover tooltip). */
-  betaToc?: boolean;
-  /** Global daemon config from GET /api/v1/config. Secrets are redacted server-side. */
-  config?: AppConfig | null;
-  /** Models from the daemon catalog, used to label default-model choices. */
-  models?: AppModel[];
-  /** True while POST /api/v1/config is saving. */
-  configSaving?: boolean;
-  /** Skills available to the active session, for the Skills page. */
-  skills?: AppSkill[];
-  /** Configured MCP servers, for the Connectors page. */
-  connectors?: AppConnector[];
-  /** True while GET /api/v1/mcp/servers is in flight. */
-  connectorsLoading?: boolean;
-  /** Every session the client has loaded, for the usage totals. */
-  sessions?: AppSession[];
-  /** Installed plugins, for the Plugins page. */
-  plugins?: AppPlugin[];
-  /** Subagent profiles, for the Subagents page. */
-  subagents?: AppSubagent[];
-}>();
-
-const emit = defineEmits<{
-  setTheme: [theme: Theme];
-  setColorScheme: [colorScheme: ColorScheme];
-  setUiFontSize: [size: number];
-  setNotify: [on: boolean];
-  setBetaToc: [on: boolean];
-  login: [];
-  openOnboarding: [];
-  updateConfig: [patch: Partial<AppConfig>];
-  loadConnectors: [];
-  restartConnector: [connectorId: string];
-  loadPlugins: [];
-  setPluginEnabled: [payload: { pluginId: string; enabled: boolean }];
-  loadSubagents: [];
-  close: [];
-}>();
-
-type SettingsTab =
-  | 'general'
-  | 'agent'
-  | 'skills'
-  | 'connectors'
-  | 'plugins'
-  | 'subagents'
-  | 'hooks'
-  | 'usage'
-  | 'advanced'
-  | 'experimental';
-
-const activeTab = ref<SettingsTab>('general');
-
-/** Nav groups, mirroring how the pages divide up: basics, what the agent can
-    reach, then the read-only data pages. */
-const tabGroups: { titleKey: string; tabs: { id: SettingsTab; labelKey: string }[] }[] = [
-  {
-    titleKey: 'settings.groups.basics',
-    tabs: [
-      { id: 'general', labelKey: 'settings.tabs.general' },
-      { id: 'agent', labelKey: 'settings.tabs.agent' },
-    ],
-  },
-  {
-    titleKey: 'settings.groups.capabilities',
-    tabs: [
-      { id: 'plugins', labelKey: 'settings.tabs.plugins' },
-      { id: 'skills', labelKey: 'settings.tabs.skills' },
-      { id: 'subagents', labelKey: 'settings.tabs.subagents' },
-      { id: 'connectors', labelKey: 'settings.tabs.connectors' },
-      { id: 'hooks', labelKey: 'settings.tabs.hooks' },
-    ],
-  },
-  {
-    titleKey: 'settings.groups.data',
-    tabs: [
-      { id: 'usage', labelKey: 'settings.tabs.usage' },
-      { id: 'advanced', labelKey: 'settings.tabs.advanced' },
-      { id: 'experimental', labelKey: 'settings.tabs.experimental' },
-    ],
-  },
-];
-
-const daemonEndpoint = serverEndpointLabel();
-const permissionModes = ['manual', 'yolo', 'auto'] as const;
-const desktopBridge = typeof window !== 'undefined' ? window.pythinkerDesktop : undefined;
-const desktopAutoUpdate = ref(true);
-const desktopUpdateState = ref<DesktopUpdateState | undefined>();
-let removeDesktopUpdateListener: (() => void) | undefined;
-
-const desktopStatusText = computed(() => {
-  const state = desktopUpdateState.value;
-  if (state === undefined) return '';
-  if (state.status === 'disabled') return t('settings.desktop.disabled');
-  if (state.status === 'idle') return state.message ? t('settings.desktop.upToDate') : '';
-  if (state.status === 'checking') return t('settings.desktop.checking');
-  if (state.status === 'available' || state.status === 'downloading') {
-    return state.version
-      ? t('settings.desktop.downloading', { version: state.version })
-      : t('settings.desktop.downloadingUnknown');
-  }
-  if (state.status === 'downloaded') return t('settings.desktop.updateReady');
-  return state.message
-    ? t('settings.desktop.error', { message: state.message })
-    : t('settings.desktop.errorGeneric');
-});
-
-const desktopCheckDisabled = computed(() => {
-  const status = desktopUpdateState.value?.status;
-  return status === 'checking' || status === 'downloading';
-});
-
-function setDesktopUpdateState(state: DesktopUpdateState): void {
-  desktopUpdateState.value = state;
-  desktopAutoUpdate.value = state.autoUpdate;
-}
-
-function setDesktopUpdateError(error: unknown): void {
-  desktopUpdateState.value = {
-    status: 'error',
-    autoUpdate: desktopAutoUpdate.value,
-    message: error instanceof Error ? error.message : String(error),
-  };
-}
-
-async function setDesktopAutoUpdate(enabled: boolean): Promise<void> {
-  if (desktopBridge === undefined) return;
-  desktopAutoUpdate.value = enabled;
-  try {
-    const state = await desktopBridge.setAutoUpdate(enabled);
-    if (state !== undefined) setDesktopUpdateState(state);
-  } catch (error) {
-    setDesktopUpdateError(error);
-  }
-}
-
-async function checkDesktopForUpdates(): Promise<void> {
-  if (desktopBridge === undefined) return;
-  try {
-    const state = await desktopBridge.checkForUpdates();
-    if (state !== undefined) setDesktopUpdateState(state);
-  } catch (error) {
-    setDesktopUpdateError(error);
-  }
-}
-
-async function restartDesktopToUpdate(): Promise<void> {
-  if (desktopBridge === undefined) return;
-  try {
-    const state = await desktopBridge.quitAndInstall();
-    if (state !== undefined) setDesktopUpdateState(state);
-  } catch (error) {
-    setDesktopUpdateError(error);
-  }
-}
-
-// Modal focus: move focus into the dialog on open, restore it to the opener on
-// close (Escape-to-close is handled below).
-const dialogRef = ref<HTMLElement | null>(null);
-useDialogFocus(dialogRef);
-
-function handleKeydown(e: KeyboardEvent): void {
-  if (e.key === 'Escape') emit('close');
-}
-onMounted(() => {
-  document.addEventListener('keydown', handleKeydown);
-  if (desktopBridge === undefined) return;
-  removeDesktopUpdateListener = desktopBridge.onUpdateState(setDesktopUpdateState);
-  void desktopBridge.getUpdateState().then(setDesktopUpdateState).catch(setDesktopUpdateError);
-});
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeydown);
-  removeDesktopUpdateListener?.();
-  removeDesktopUpdateListener = undefined;
-});
-
-function exportLog(): void {
-  downloadTraceLog();
-}
-
-type ModelOption = { id: string; label: string; provider: string };
-
-const modelOptions = computed<ModelOption[]>(() => {
-  const byId = new Map<string, ModelOption>();
-  for (const model of props.models ?? []) {
-    byId.set(model.id, {
-      id: model.id,
-      label: model.displayName ?? model.model ?? model.id,
-      provider: model.provider,
-    });
-  }
-  for (const [id, raw] of Object.entries(props.config?.models ?? {})) {
-    if (byId.has(id)) continue;
-    const provider = extractConfigModelProvider(raw);
-    byId.set(id, {
-      id,
-      label: formatConfigModelLabel(id, raw, provider),
-      provider: provider ?? id,
-    });
-  }
-  return Array.from(byId.values());
-});
-
-const modelGroups = computed<Array<{ provider: string; options: ModelOption[] }>>(() => {
-  const map = new Map<string, ModelOption[]>();
-  for (const option of modelOptions.value) {
-    const list = map.get(option.provider) ?? [];
-    list.push(option);
-    map.set(option.provider, list);
-  }
-  for (const list of map.values()) {
-    list.sort((a, b) => a.label.localeCompare(b.label));
-  }
-  return Array.from(map.entries())
-    .toSorted(([a], [b]) => a.localeCompare(b))
-    .map(([provider, options]) => ({ provider, options }));
-});
-
-const providerEntries = computed<Array<{ id: string; provider: AppConfigProvider }>>(() =>
-  Object.entries(props.config?.providers ?? {})
-    .map(([id, provider]) => ({ id, provider }))
-    .sort((a, b) => a.id.localeCompare(b.id)),
-);
-
-const defaultPermissionMode = computed(() => {
-  const mode = props.config?.defaultPermissionMode;
-  return mode === 'auto' || mode === 'yolo' || mode === 'manual' ? mode : 'manual';
-});
-
-function extractConfigModelProvider(raw: unknown): string | undefined {
-  if (!raw || typeof raw !== 'object') return undefined;
-  const source = raw as Record<string, unknown>;
-  const provider = typeof source['provider'] === 'string' ? source['provider'] : undefined;
-  return provider;
-}
-
-function formatConfigModelLabel(id: string, raw: unknown, provider?: string): string {
-  if (!raw || typeof raw !== 'object') return id;
-  const source = raw as Record<string, unknown>;
-  const model = typeof source['model'] === 'string' ? source['model'] : undefined;
-  const resolvedProvider = provider ?? extractConfigModelProvider(raw);
-  if (model && resolvedProvider) return `${id} (${resolvedProvider}/${model})`;
-  if (model) return `${id} (${model})`;
-  return id;
-}
-
-function configBool(value: boolean | undefined): boolean {
-  return value === true;
-}
-
-function setDefaultModel(event: Event): void {
-  const value = (event.target as HTMLSelectElement).value;
-  if (!value || value === props.config?.defaultModel) return;
-  emit('updateConfig', { defaultModel: value });
-}
-
-function setDefaultPermissionMode(mode: 'manual' | 'auto' | 'yolo'): void {
-  if (mode === defaultPermissionMode.value) return;
-  emit('updateConfig', { defaultPermissionMode: mode });
-}
-
-function toggleConfigBoolean(key: 'defaultThinking' | 'defaultPlanMode' | 'mergeAllAvailableSkills' | 'telemetry'): void {
-  const current = props.config?.[key];
-  emit('updateConfig', { [key]: !configBool(current) } as Partial<AppConfig>);
-}
-
-const skillQuery = ref('');
-
-/** Skills grouped by source, each group's skills sorted by name. */
-const skillGroups = computed(() => {
-  const query = skillQuery.value.trim().toLowerCase();
-  const matching = (props.skills ?? []).filter(
-    (skill) =>
-      query === '' ||
-      skill.name.toLowerCase().includes(query) ||
-      skill.description.toLowerCase().includes(query),
-  );
-  const bySource = new Map<string, AppSkill[]>();
-  for (const skill of matching) {
-    const group = bySource.get(skill.source) ?? [];
-    group.push(skill);
-    bySource.set(skill.source, group);
-  }
-  return [...bySource.entries()]
-    .map(([source, skills]) => ({
-      source,
-      skills: skills.toSorted((a, b) => a.name.localeCompare(b.name)),
-    }))
-    .toSorted((a, b) => a.source.localeCompare(b.source));
-});
-
-const disabledSkills = computed(() => new Set(props.config?.disabledSkills ?? []));
-
-/** Hooks grouped by the event they fire on, in the order the config lists them. */
-const hookGroups = computed(() => {
-  const byEvent = new Map<string, AppHook[]>();
-  for (const hook of props.config?.hooks ?? []) {
-    const group = byEvent.get(hook.event) ?? [];
-    group.push(hook);
-    byEvent.set(hook.event, group);
-  }
-  return [...byEvent.entries()].map(([event, hooks]) => ({ event, hooks }));
-});
-
-const hookCount = computed(() => props.config?.hooks?.length ?? 0);
-
-const skillCount = computed(() => skillGroups.value.reduce((sum, g) => sum + g.skills.length, 0));
-
-/** Totals over every session the client has loaded. */
-const usageStats = computed(() => {
-  const sessions = props.sessions ?? [];
-  let tokens = 0;
-  let turns = 0;
-  let cost = 0;
-  for (const session of sessions) {
-    tokens += session.usage.inputTokens + session.usage.outputTokens;
-    turns += session.usage.turnCount;
-    cost += session.usage.totalCostUsd;
-  }
-  return {
-    tokens: formatTokens(tokens),
-    sessions: String(sessions.length),
-    turns: String(turns),
-    cost: `$${cost.toFixed(2)}`,
-  };
-});
-
-/** Share of total tokens per model, largest first. */
-const usageByModel = computed(() => {
-  const byModel = new Map<string, number>();
-  let total = 0;
-  for (const session of props.sessions ?? []) {
-    const used = session.usage.inputTokens + session.usage.outputTokens;
-    if (used === 0 || session.model === '') continue;
-    byModel.set(session.model, (byModel.get(session.model) ?? 0) + used);
-    total += used;
-  }
-  if (total === 0) return [];
-  return [...byModel.entries()]
-    .toSorted((a, b) => b[1] - a[1])
-    .map(([model, used]) => ({ model, share: `${Math.round((used / total) * 100)}%` }));
-});
-
-function isSkillEnabled(name: string): boolean {
-  return !disabledSkills.value.has(name);
-}
-
-/** Disabling a skill stores its name; the daemon then never registers it. */
-function toggleSkill(name: string): void {
-  const next = new Set(disabledSkills.value);
-  if (next.has(name)) next.delete(name);
-  else next.add(name);
-  emit('updateConfig', { disabledSkills: [...next].sort() });
-}
-
-function setTab(tab: SettingsTab): void {
-  // The connector list is only fetched when its page is first opened.
-  if (tab === 'connectors' && (props.connectors?.length ?? 0) === 0) emit('loadConnectors');
-  if (tab === 'plugins' && (props.plugins?.length ?? 0) === 0) emit('loadPlugins');
-  if (tab === 'subagents' && (props.subagents?.length ?? 0) === 0) emit('loadSubagents');
-  activeTab.value = tab;
-}
-</script>
-
-<template>
-  <div class="backdrop" @click.self="emit('close')">
-    <div ref="dialogRef" class="dialog" role="dialog" aria-modal="true" tabindex="-1" :aria-label="t('settings.title')">
-      <div class="dh">
-        <span class="dtitle">{{ t('settings.title') }}</span>
-        <button class="close-btn" :title="t('newSession.close')" @click="emit('close')">
-          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5">
-            <line x1="1" y1="1" x2="9" y2="9"/><line x1="9" y1="1" x2="1" y2="9"/>
-          </svg>
-        </button>
-      </div>
-
-      <div class="settings-layout">
-        <nav class="settings-tabs" role="tablist" :aria-label="t('settings.title')">
-          <template v-for="group in tabGroups" :key="group.titleKey">
-            <span class="tab-group">{{ t(group.titleKey) }}</span>
-            <button
-              v-for="tab in group.tabs"
-              :key="tab.id"
-              type="button"
-              class="tab"
-              role="tab"
-              :aria-selected="activeTab === tab.id"
-              :aria-controls="`settings-panel-${tab.id}`"
-              :id="`settings-tab-${tab.id}`"
-              :class="{ on: activeTab === tab.id }"
-              @click="setTab(tab.id)"
-            >
-              {{ t(tab.labelKey) }}
-            </button>
-          </template>
-        </nav>
-
-        <div class="body">
-          <!-- General: Appearance + Notifications + Account -->
-          <section
-            v-show="activeTab === 'general'"
-            :id="`settings-panel-general`"
-            class="panel"
-            role="tabpanel"
-            aria-labelledby="settings-tab-general"
-          >
-            <section class="sec">
-              <h3 class="sec-title">{{ t('settings.appearance') }}</h3>
-              <div class="row">
-                <span class="rlabel">{{ t('theme.label') }}</span>
-                <div class="seg" role="group" :aria-label="t('theme.label')">
-                  <button type="button" class="opt" :class="{ on: theme === 'modern' }" :aria-pressed="theme === 'modern'" @click="emit('setTheme', 'modern')">{{ t('theme.modern') }}</button>
-                  <button type="button" class="opt" :class="{ on: theme === 'pythinker' }" :aria-pressed="theme === 'pythinker'" @click="emit('setTheme', 'pythinker')">{{ t('theme.pythinker') }}</button>
-                </div>
-              </div>
-              <div class="row">
-                <span class="rlabel">{{ t('theme.colorSchemeLabel') }}</span>
-                <div class="seg" role="group" :aria-label="t('theme.colorSchemeLabel')">
-                  <button type="button" class="opt" :class="{ on: colorScheme === 'light' }" :aria-pressed="colorScheme === 'light'" @click="emit('setColorScheme', 'light')">{{ t('theme.light') }}</button>
-                  <button type="button" class="opt" :class="{ on: colorScheme === 'dark' }" :aria-pressed="colorScheme === 'dark'" @click="emit('setColorScheme', 'dark')">{{ t('theme.dark') }}</button>
-                  <button type="button" class="opt" :class="{ on: colorScheme === 'system' }" :aria-pressed="colorScheme === 'system'" @click="emit('setColorScheme', 'system')">{{ t('theme.system') }}</button>
-                </div>
-              </div>
-              <div class="row">
-                <span class="rlabel">{{ t('settings.uiFontSize') }}</span>
-                <label class="num-field">
-                  <input
-                    class="num-input"
-                    type="number"
-                    min="12"
-                    max="20"
-                    step="1"
-                    :value="uiFontSize"
-                    :aria-label="t('settings.uiFontSize')"
-                    @input="emit('setUiFontSize', Number(($event.target as HTMLInputElement).value))"
-                  />
-                  <span class="num-unit">px</span>
-                </label>
-              </div>
-            </section>
-
-            <section class="sec">
-              <h3 class="sec-title">{{ t('settings.notifications') }}</h3>
-              <div class="row">
-                <span class="rlabel">
-                  {{ t('settings.notifyOnComplete') }}
-                  <span v-if="notifyPermission === 'denied'" class="hint">{{ t('settings.notifyDenied') }}</span>
-                </span>
-                <button
-                  type="button"
-                  class="switch"
-                  role="switch"
-                  :class="{ on: notify }"
-                  :aria-checked="notify"
-                  :disabled="notifyPermission === 'denied'"
-                  @click="emit('setNotify', !notify)"
-                >
-                  <span class="knob" />
-                </button>
-              </div>
-            </section>
-
-            <section v-if="desktopBridge !== undefined" class="sec">
-              <h3 class="sec-title">{{ t('settings.desktop.title') }}</h3>
-              <div class="row">
-                <span class="rlabel">
-                  {{ t('settings.desktop.automaticUpdates') }}
-                  <span class="hint">{{ t('settings.desktop.automaticUpdatesHint') }}</span>
-                </span>
-                <button
-                  type="button"
-                  class="switch"
-                  role="switch"
-                  :class="{ on: desktopAutoUpdate }"
-                  :aria-checked="desktopAutoUpdate"
-                  @click="void setDesktopAutoUpdate(!desktopAutoUpdate)"
-                >
-                  <span class="knob" />
-                </button>
-              </div>
-              <div v-if="desktopStatusText" class="row">
-                <span class="rlabel">{{ t('settings.desktop.status') }}</span>
-                <span class="rvalue">{{ desktopStatusText }}</span>
-              </div>
-              <div class="actions">
-                <button
-                  type="button"
-                  class="act"
-                  :disabled="desktopCheckDisabled"
-                  @click="void checkDesktopForUpdates()"
-                >
-                  {{ t('settings.desktop.checkForUpdates') }}
-                </button>
-                <button
-                  v-if="desktopUpdateState?.status === 'downloaded'"
-                  type="button"
-                  class="act"
-                  @click="void restartDesktopToUpdate()"
-                >
-                  {{ t('settings.desktop.restartToUpdate') }}
-                </button>
-              </div>
-            </section>
-
-            <section class="sec">
-              <h3 class="sec-title">{{ t('settings.account') }}</h3>
-              <div class="row">
-                <span class="rlabel">{{ authReady ? t('sidebar.signedIn') : t('sidebar.notSignedIn') }}</span>
-                <span v-if="authReady && accountModel" class="rvalue" :title="accountModel">{{ accountModel }}</span>
-              </div>
-              <div class="actions">
-                <button type="button" class="act" @click="emit('openOnboarding'); emit('close')">{{ t('onboarding.reopen') }}</button>
-                <button type="button" class="act signin" @click="emit('login')">{{ t('providers.title') }}</button>
-              </div>
-            </section>
-          </section>
-
-          <!-- Agent defaults -->
-          <section
-            v-show="activeTab === 'agent'"
-            :id="`settings-panel-agent`"
-            class="panel"
-            role="tabpanel"
-            aria-labelledby="settings-tab-agent"
-          >
-            <section class="sec">
-              <div class="sec-head">
-                <h3 class="sec-title">{{ t('settings.agentDefaults') }}</h3>
-                <span v-if="configSaving" class="saving">{{ t('settings.saving') }}</span>
-              </div>
-
-              <template v-if="config">
-                <div class="row">
-                  <span class="rlabel">
-                    {{ t('settings.defaultModel') }}
-                    <span class="hint">{{ t('settings.defaultModelHint') }}</span>
-                  </span>
-                  <select
-                    v-if="modelGroups.length > 0"
-                    class="select-field"
-                    :value="config.defaultModel ?? ''"
-                    :disabled="configSaving"
-                    :aria-label="t('settings.defaultModel')"
-                    @change="setDefaultModel"
-                  >
-                    <option v-if="!config.defaultModel" value="" disabled>{{ t('settings.noDefaultModel') }}</option>
-                    <optgroup v-for="group in modelGroups" :key="group.provider" :label="group.provider">
-                      <option v-for="model in group.options" :key="model.id" :value="model.id">
-                        {{ model.label }}
-                      </option>
-                    </optgroup>
-                  </select>
-                  <span v-else class="rvalue mono">{{ config.defaultModel ?? t('settings.noDefaultModel') }}</span>
-                </div>
-
-                <div class="row">
-                  <span class="rlabel">
-                    {{ t('settings.defaultPermission') }}
-                    <span class="hint">{{ t('settings.defaultPermissionHint') }}</span>
-                  </span>
-                  <div class="seg" role="group" :aria-label="t('settings.defaultPermission')">
-                    <button
-                      v-for="mode in permissionModes"
-                      :key="mode"
-                      type="button"
-                      class="opt"
-                      :class="{ on: defaultPermissionMode === mode }"
-                      :aria-pressed="defaultPermissionMode === mode"
-                      :disabled="configSaving"
-                      @click="setDefaultPermissionMode(mode)"
-                    >
-                      {{ t(`settings.permission.${mode}`) }}
-                    </button>
-                  </div>
-                </div>
-
-                <div class="row">
-                  <span class="rlabel">
-                    {{ t('settings.defaultThinking') }}
-                    <span class="hint">{{ t('settings.defaultThinkingHint') }}</span>
-                  </span>
-                  <button
-                    type="button"
-                    class="switch"
-                    role="switch"
-                    :class="{ on: configBool(config.defaultThinking) }"
-                    :aria-checked="configBool(config.defaultThinking)"
-                    :disabled="configSaving"
-                    @click="toggleConfigBoolean('defaultThinking')"
-                  >
-                    <span class="knob" />
-                  </button>
-                </div>
-
-                <div class="row">
-                  <span class="rlabel">
-                    {{ t('settings.defaultPlanMode') }}
-                    <span class="hint">{{ t('settings.defaultPlanModeHint') }}</span>
-                  </span>
-                  <button
-                    type="button"
-                    class="switch"
-                    role="switch"
-                    :class="{ on: configBool(config.defaultPlanMode) }"
-                    :aria-checked="configBool(config.defaultPlanMode)"
-                    :disabled="configSaving"
-                    @click="toggleConfigBoolean('defaultPlanMode')"
-                  >
-                    <span class="knob" />
-                  </button>
-                </div>
-
-                <div class="row">
-                  <span class="rlabel">
-                    {{ t('settings.mergeSkills') }}
-                    <span class="hint">{{ t('settings.mergeSkillsHint') }}</span>
-                  </span>
-                  <button
-                    type="button"
-                    class="switch"
-                    role="switch"
-                    :class="{ on: configBool(config.mergeAllAvailableSkills) }"
-                    :aria-checked="configBool(config.mergeAllAvailableSkills)"
-                    :disabled="configSaving"
-                    @click="toggleConfigBoolean('mergeAllAvailableSkills')"
-                  >
-                    <span class="knob" />
-                  </button>
-                </div>
-
-                <div v-if="config.telemetry !== undefined" class="row">
-                  <span class="rlabel">{{ t('settings.telemetry') }}</span>
-                  <button
-                    type="button"
-                    class="switch"
-                    role="switch"
-                    :class="{ on: configBool(config.telemetry) }"
-                    :aria-checked="configBool(config.telemetry)"
-                    :disabled="configSaving"
-                    @click="toggleConfigBoolean('telemetry')"
-                  >
-                    <span class="knob" />
-                  </button>
-                </div>
-
-                <div v-if="providerEntries.length > 0" class="provider-list">
-                  <div v-for="{ id, provider } in providerEntries" :key="id" class="provider-row">
-                    <div class="provider-main">
-                      <span class="provider-id">{{ id }}</span>
-                      <span class="provider-type">{{ provider.type }}</span>
-                    </div>
-                    <div class="provider-meta">
-                      <span :class="['provider-badge', provider.hasApiKey ? 'ok' : 'warn']">
-                        {{ provider.hasApiKey ? t('settings.credentialReady') : t('settings.credentialMissing') }}
-                      </span>
-                      <span v-if="provider.defaultModel" class="provider-model">{{ provider.defaultModel }}</span>
-                    </div>
-                  </div>
-                </div>
-              </template>
-
-              <div v-else class="empty-config">
-                {{ t('settings.configUnavailable') }}
-              </div>
-            </section>
-          </section>
-
-          <!-- Skills -->
-          <section
-            v-show="activeTab === 'skills'"
-            id="settings-panel-skills"
-            class="panel"
-            role="tabpanel"
-            aria-labelledby="settings-tab-skills"
-          >
-            <section class="sec">
-              <h2 class="page-title">{{ t('settings.skills.title') }}</h2>
-              <p class="sec-note">{{ t('settings.skills.note') }}</p>
-              <input
-                v-model="skillQuery"
-                type="search"
-                class="page-search"
-                :placeholder="t('settings.skills.search')"
-                :aria-label="t('settings.skills.search')"
-              >
-              <p class="listing-count">{{ t('settings.skills.count', { count: skillCount }) }}</p>
-              <p v-if="skillGroups.length === 0" class="sec-empty">{{ t('settings.skills.empty') }}</p>
-              <div v-for="group in skillGroups" :key="group.source" class="listing">
-                <h4 class="listing-head">{{ group.source }}</h4>
-                <div
-                  v-for="skill in group.skills"
-                  :key="`${group.source}/${skill.name}`"
-                  class="listing-row"
-                  :class="{ off: !isSkillEnabled(skill.name) }"
-                >
-                  <div class="listing-top">
-                    <div class="listing-main">
-                      <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
-                        <path d="M12 3l2.1 4.9 5.4.5-4.1 3.6 1.2 5.3L12 14.6 7.4 17.3l1.2-5.3L4.5 8.4l5.4-.5L12 3z" stroke-linejoin="round" />
-                      </svg>
-                      <span class="listing-name mono">{{ skill.name }}</span>
-                      <span v-if="skill.disableModelInvocation" class="tag">{{ t('settings.skills.slashOnly') }}</span>
-                      <span class="listing-desc">{{ skill.description }}</span>
-                    </div>
-                    <div class="row-actions">
-                      <button
-                        type="button"
-                        class="switch sm"
-                        role="switch"
-                        :class="{ on: isSkillEnabled(skill.name) }"
-                        :aria-checked="isSkillEnabled(skill.name)"
-                        :aria-label="t('settings.skills.toggleAria', { name: skill.name })"
-                        @click="toggleSkill(skill.name)"
-                      >
-                        <span class="knob" />
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
-          </section>
-
-          <!-- Connectors -->
-          <section
-            v-show="activeTab === 'connectors'"
-            id="settings-panel-connectors"
-            class="panel"
-            role="tabpanel"
-            aria-labelledby="settings-tab-connectors"
-          >
-            <section class="sec">
-              <h2 class="page-title">{{ t('settings.connectors.title') }}</h2>
-              <p class="sec-note">{{ t('settings.connectors.note') }}</p>
-              <p v-if="connectorsLoading" class="sec-empty">{{ t('settings.connectors.loading') }}</p>
-              <p v-else-if="(connectors?.length ?? 0) === 0" class="sec-empty">{{ t('settings.connectors.empty') }}</p>
-              <div v-else class="listing">
-                <div v-for="connector in connectors" :key="connector.id" class="listing-row">
-                  <div class="listing-top">
-                    <div class="listing-main">
-                      <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
-                        <path d="M9 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0V8zM12 17v4" stroke-linecap="round" />
-                      </svg>
-                      <span class="listing-name">{{ connector.name }}</span>
-                      <span class="tag">{{ connector.transport }}</span>
-                      <span class="listing-desc">{{ t(`settings.connectors.status.${connector.status}`) }}</span>
-                      <span class="listing-meta">{{ t('settings.connectors.tools', { count: connector.toolCount }) }}</span>
-                    </div>
-                    <div class="row-actions">
-                      <span class="dot" :class="`s-${connector.status}`" aria-hidden="true" />
-                      <button
-                        type="button"
-                        class="icon-btn"
-                        :title="t('settings.connectors.restart')"
-                        :aria-label="t('settings.connectors.restart')"
-                        @click="emit('restartConnector', connector.id)"
-                      >
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
-                          <path d="M20 12a8 8 0 1 1-2.6-5.9M20 4v5h-5" stroke-linecap="round" stroke-linejoin="round" />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                  <p v-if="connector.lastError" class="listing-error">{{ connector.lastError }}</p>
-                </div>
-              </div>
-            </section>
-          </section>
-
-          <!-- Plugins -->
-          <section
-            v-show="activeTab === 'plugins'"
-            id="settings-panel-plugins"
-            class="panel"
-            role="tabpanel"
-            aria-labelledby="settings-tab-plugins"
-          >
-            <section class="sec">
-              <h2 class="page-title">{{ t('settings.plugins.title') }}</h2>
-              <p class="sec-note">{{ t('settings.plugins.note') }}</p>
-              <p v-if="(plugins?.length ?? 0) === 0" class="sec-empty">{{ t('settings.plugins.empty') }}</p>
-              <div v-else class="listing">
-                <div
-                  v-for="plugin in plugins"
-                  :key="plugin.id"
-                  class="listing-row"
-                  :class="{ off: !plugin.enabled }"
-                >
-                  <div class="listing-top">
-                    <div class="listing-main">
-                      <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
-                        <path d="M10 4a2 2 0 1 1 4 0v1h3a1 1 0 0 1 1 1v3h1a2 2 0 1 1 0 4h-1v3a1 1 0 0 1-1 1h-3v-1a2 2 0 1 0-4 0v1H6a1 1 0 0 1-1-1v-3H4a2 2 0 1 1 0-4h1V6a1 1 0 0 1 1-1h4V4z" stroke-linejoin="round" />
-                      </svg>
-                      <span class="listing-name">{{ plugin.displayName }}</span>
-                      <span v-if="plugin.version" class="tag">{{ plugin.version }}</span>
-                      <span class="tag">{{ plugin.source }}</span>
-                      <span class="listing-meta">{{ t('settings.plugins.counts', { skills: plugin.skillCount, servers: plugin.mcpServerCount }) }}</span>
-                    </div>
-                    <div class="row-actions">
-                      <button
-                        type="button"
-                        class="switch sm"
-                        role="switch"
-                        :class="{ on: plugin.enabled }"
-                        :aria-checked="plugin.enabled"
-                        :aria-label="t('settings.plugins.toggleAria', { name: plugin.displayName })"
-                        @click="emit('setPluginEnabled', { pluginId: plugin.id, enabled: !plugin.enabled })"
-                      >
-                        <span class="knob" />
-                      </button>
-                    </div>
-                  </div>
-                  <p v-if="plugin.hasErrors" class="listing-error">{{ t('settings.plugins.hasErrors') }}</p>
-                </div>
-              </div>
-            </section>
-          </section>
-
-          <!-- Subagents -->
-          <section
-            v-show="activeTab === 'subagents'"
-            id="settings-panel-subagents"
-            class="panel"
-            role="tabpanel"
-            aria-labelledby="settings-tab-subagents"
-          >
-            <section class="sec">
-              <h2 class="page-title">{{ t('settings.subagents.title') }}</h2>
-              <p class="sec-note">{{ t('settings.subagents.note') }}</p>
-              <p v-if="(subagents?.length ?? 0) === 0" class="sec-empty">{{ t('settings.subagents.empty') }}</p>
-              <div v-else class="listing">
-                <div v-for="agent in subagents" :key="agent.name" class="listing-row">
-                  <div class="listing-top">
-                    <div class="listing-main">
-                      <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
-                        <rect x="4" y="8" width="16" height="11" rx="3" />
-                        <path d="M12 4v4M9 13h.01M15 13h.01" stroke-linecap="round" />
-                      </svg>
-                      <span class="listing-name mono">{{ agent.name }}</span>
-                      <span class="tag">{{ agent.source }}</span>
-                      <span class="tag">{{ t('settings.subagents.tools', { count: agent.tools.length }) }}</span>
-                      <span v-if="agent.effort" class="tag">{{ agent.effort }}</span>
-                      <span v-if="agent.model" class="listing-meta">{{ agent.model }}</span>
-                    </div>
-                  </div>
-                  <p v-if="agent.description" class="listing-desc listing-indent">{{ agent.description }}</p>
-                </div>
-              </div>
-            </section>
-          </section>
-
-          <!-- Hooks -->
-          <section
-            v-show="activeTab === 'hooks'"
-            id="settings-panel-hooks"
-            class="panel"
-            role="tabpanel"
-            aria-labelledby="settings-tab-hooks"
-          >
-            <section class="sec">
-              <h2 class="page-title">{{ t('settings.hooks.title') }}</h2>
-              <p class="sec-note">{{ t('settings.hooks.note') }}</p>
-              <p v-if="hookCount === 0" class="sec-empty">{{ t('settings.hooks.empty') }}</p>
-              <template v-else>
-                <p class="listing-count">{{ t('settings.hooks.count', { count: hookCount }) }}</p>
-                <div v-for="group in hookGroups" :key="group.event" class="listing">
-                  <h4 class="listing-head">{{ group.event }}</h4>
-                  <div
-                    v-for="(hook, index) in group.hooks"
-                    :key="`${group.event}/${index}`"
-                    class="listing-row"
-                  >
-                    <div class="listing-top">
-                      <div class="listing-main">
-                        <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
-                          <path d="M13 3L5 14h6l-2 7 8-11h-6l2-7z" stroke-linejoin="round" />
-                        </svg>
-                        <span class="listing-name mono">{{ hook.matcher ?? '*' }}</span>
-                        <span class="tag">{{ hook.type ?? 'command' }}</span>
-                        <span v-if="hook.async === true" class="tag">{{ t('settings.hooks.async') }}</span>
-                        <span v-if="hook.timeout !== undefined" class="listing-meta">{{ t('settings.hooks.timeout', { seconds: hook.timeout }) }}</span>
-                      </div>
-                    </div>
-                    <p class="listing-path mono">{{ hook.command ?? hook.url ?? '—' }}</p>
-                  </div>
-                </div>
-              </template>
-            </section>
-          </section>
-
-          <!-- Usage stats -->
-          <section
-            v-show="activeTab === 'usage'"
-            id="settings-panel-usage"
-            class="panel"
-            role="tabpanel"
-            aria-labelledby="settings-tab-usage"
-          >
-            <section class="sec">
-              <h2 class="page-title">{{ t('settings.usage.title') }}</h2>
-              <p class="sec-note">{{ t('settings.usage.note') }}</p>
-              <div class="stat-grid">
-                <div class="stat-card">
-                  <span class="stat-label">{{ t('settings.usage.tokens') }}</span>
-                  <span class="stat-value">{{ usageStats.tokens }}</span>
-                </div>
-                <div class="stat-card">
-                  <span class="stat-label">{{ t('settings.usage.sessions') }}</span>
-                  <span class="stat-value">{{ usageStats.sessions }}</span>
-                </div>
-                <div class="stat-card">
-                  <span class="stat-label">{{ t('settings.usage.turns') }}</span>
-                  <span class="stat-value">{{ usageStats.turns }}</span>
-                </div>
-                <div class="stat-card">
-                  <span class="stat-label">{{ t('settings.usage.cost') }}</span>
-                  <span class="stat-value">{{ usageStats.cost }}</span>
-                </div>
-              </div>
-              <h4 class="listing-head">{{ t('settings.usage.byModel') }}</h4>
-              <p v-if="usageByModel.length === 0" class="sec-empty">{{ t('settings.usage.empty') }}</p>
-              <div v-else class="listing">
-                <div v-for="entry in usageByModel" :key="entry.model" class="listing-row">
-                  <div class="listing-top">
-                    <div class="listing-main">
-                      <span class="listing-name">{{ entry.model }}</span>
-                      <span class="listing-meta">{{ entry.share }}</span>
-                    </div>
-                  </div>
-                  <div class="usage-bar"><span :style="{ width: entry.share }" /></div>
-                </div>
-              </div>
-            </section>
-          </section>
-
-          <!-- Advanced -->
-          <section
-            v-show="activeTab === 'advanced'"
-            :id="`settings-panel-advanced`"
-            class="panel"
-            role="tabpanel"
-            aria-labelledby="settings-tab-advanced"
-          >
-            <section class="sec">
-              <h3 class="sec-title">{{ t('settings.advanced') }}</h3>
-              <div class="row">
-                <span class="rlabel">{{ t('sidebar.daemon') }}</span>
-                <span class="rvalue mono">{{ daemonEndpoint }}</span>
-              </div>
-              <div class="row">
-                <span class="rlabel">
-                  {{ t('settings.exportLog') }}
-                  <span v-if="!isTraceEnabled()" class="hint">{{ t('settings.logHint') }}</span>
-                </span>
-                <button type="button" class="act" @click="exportLog">{{ t('settings.exportLogBtn') }}</button>
-              </div>
-            </section>
-          </section>
-
-          <!-- Experimental -->
-          <section
-            v-show="activeTab === 'experimental'"
-            :id="`settings-panel-experimental`"
-            class="panel"
-            role="tabpanel"
-            aria-labelledby="settings-tab-experimental"
-          >
-            <section class="sec">
-              <h3 class="sec-title">{{ t('settings.beta') }}</h3>
-              <div class="row">
-                <span class="rlabel">
-                  {{ t('settings.betaToc') }}
-                  <span class="hint">{{ t('settings.betaTocHint') }}</span>
-                </span>
-                <button
-                  type="button"
-                  class="switch"
-                  role="switch"
-                  :class="{ on: betaToc }"
-                  :aria-checked="betaToc"
-                  @click="emit('setBetaToc', !betaToc)"
-                >
-                  <span class="knob" />
-                </button>
-              </div>
-            </section>
-          </section>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  background: rgba(20, 23, 28, 0.42);
-  padding: 12px;
-}
-/* Settings is a full-window surface, not a small modal: the pages carry long
-   lists (skills, connectors, plugins) that a 720px box could not show. */
-.dialog {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg);
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
-  overflow: hidden;
-}
-.dh {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--line);
-}
-.dtitle { font-family: var(--sans); font-size: var(--ui-font-size-lg); font-weight: 600; color: var(--ink); }
-.close-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  border: none;
-  border-radius: 6px;
-  background: none;
-  color: var(--muted);
-  cursor: pointer;
-}
-.close-btn:hover { background: var(--soft); color: var(--ink); }
-
-.settings-layout {
-  display: flex;
-  flex-direction: row;
-  min-height: 0;
-  flex: 1;
-}
-
-.settings-tabs {
-  display: flex;
-  flex-direction: column;
-  flex: none;
-  width: 140px;
-  padding: 10px 8px;
-  border-right: 1px solid var(--line);
-  background: var(--panel);
-  gap: 2px;
-  overflow-y: auto;
-}
-.tab {
-  text-align: left;
-  padding: 8px 10px;
-  border: none;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--muted);
-  font-family: var(--sans);
-  font-size: calc(var(--ui-font-size) - 0.5px);
-  cursor: pointer;
-  transition: background 0.12s, color 0.12s;
-}
-.tab:hover { background: var(--soft); color: var(--ink); }
-.tab.on { background: var(--soft); color: var(--blue2); font-weight: 600; }
-
-.body { overflow-y: auto; padding: 6px 16px 16px; flex: 1; }
-.panel { display: block; }
-.sec { padding: 12px 0; border-bottom: 1px solid var(--line); }
-.sec:last-child { border-bottom: none; }
-.sec-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 10px;
-}
-.sec-title {
-  margin: 0 0 10px;
-  font-family: var(--mono);
-  font-size: calc(var(--ui-font-size) - 3px);
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-.sec-head .sec-title { margin-bottom: 0; }
-.saving {
-  flex: none;
-  font-family: var(--mono);
-  font-size: var(--ui-font-size-xs);
-  color: var(--muted);
-}
-.row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  min-height: 34px;
-  padding: 3px 0;
-}
-.rlabel { font-family: var(--sans); font-size: calc(var(--ui-font-size) - 0.5px); color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
-.rvalue { font-family: var(--sans); font-size: calc(var(--ui-font-size) - 1.5px); color: var(--muted); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.rvalue.mono { font-family: var(--mono); font-size: var(--ui-font-size-xs); }
-.hint { font-size: calc(var(--ui-font-size) - 3px); color: var(--faint); font-family: var(--sans); }
-
-.num-field {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  flex: none;
-  padding: 0 8px;
-  height: 30px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--bg);
-}
-.num-input {
-  width: 48px;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--ink);
-  font-family: var(--mono);
-  font-size: var(--ui-font-size-sm);
-  text-align: right;
-}
-.num-unit {
-  color: var(--muted);
-  font-family: var(--mono);
-  font-size: var(--ui-font-size-xs);
-}
-
-.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
-.opt {
-  border: none;
-  background: var(--bg);
-  color: var(--muted);
-  font-family: var(--mono);
-  font-size: var(--ui-font-size-xs);
-  padding: 5px 12px;
-  cursor: pointer;
-  border-left: 1px solid var(--line);
-}
-.opt:first-child { border-left: none; }
-.opt:hover { color: var(--ink); }
-.opt.on { background: var(--soft); color: var(--blue2); font-weight: 600; }
-.opt:disabled { opacity: 0.55; cursor: not-allowed; }
-
-.select-field {
-  min-width: 220px;
-  max-width: min(320px, 50vw);
-  height: 32px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--bg);
-  color: var(--ink);
-  font-family: var(--sans);
-  font-size: calc(var(--ui-font-size) - 1.5px);
-  padding: 0 8px;
-}
-.select-field:disabled { opacity: 0.6; cursor: not-allowed; }
-
-.empty-config {
-  font-family: var(--sans);
-  font-size: calc(var(--ui-font-size) - 1px);
-  color: var(--muted);
-  padding: 4px 0;
-}
-
-.provider-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-top: 10px;
-}
-.provider-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  min-width: 0;
-  padding: 8px 10px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--panel2);
-}
-.provider-main,
-.provider-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-.provider-main { flex: 1; }
-.provider-meta { flex: none; max-width: 45%; }
-.provider-id,
-.provider-model {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.provider-id {
-  font-family: var(--mono);
-  font-size: var(--ui-font-size-xs);
-  color: var(--ink);
-}
-.provider-type {
-  flex: none;
-  font-family: var(--mono);
-  font-size: max(10px, calc(var(--ui-font-size) - 4px));
-  color: var(--muted);
-}
-.provider-model {
-  font-family: var(--mono);
-  font-size: max(10px, calc(var(--ui-font-size) - 4px));
-  color: var(--muted);
-}
-.provider-badge {
-  flex: none;
-  border-radius: 999px;
-  padding: 2px 7px;
-  font-family: var(--mono);
-  font-size: max(10px, calc(var(--ui-font-size) - 4px));
-}
-.provider-badge.ok {
-  background: color-mix(in srgb, var(--ok) 12%, var(--bg));
-  color: var(--ok);
-}
-.provider-badge.warn {
-  background: color-mix(in srgb, var(--warn) 12%, var(--bg));
-  color: var(--warn);
-}
-
-.toggle-row { cursor: pointer; }
-.switch {
-  flex: none;
-  width: 40px;
-  height: 22px;
-  border-radius: 999px;
-  border: 1px solid var(--line);
-  background: var(--panel2);
-  position: relative;
-  cursor: pointer;
-  transition: background 0.16s;
-  padding: 0;
-}
-.switch.on { background: var(--blue); border-color: var(--blue); }
-.switch:disabled { opacity: 0.5; cursor: not-allowed; }
-.knob {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: var(--bg);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  transition: transform 0.16s;
-}
-.switch.on .knob { transform: translateX(18px); }
-
-.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
-/* Compact switch for the per-skill rows. */
-.switch.sm { width: 30px; height: 17px; }
-.switch.sm .knob { width: 13px; height: 13px; }
-.switch.sm.on .knob { transform: translateX(13px); }
-
-/* The settings pages: a large page title, an optional search, then card rows. */
-.page-title {
-  margin: 0 0 6px;
-  font-size: calc(var(--ui-font-size) + 10px);
-  font-weight: 700;
-  color: var(--ink);
-}
-.page-search {
-  width: 100%;
-  box-sizing: border-box;
-  margin: 0 0 12px;
-  padding: 7px 10px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--bg);
-  color: var(--ink);
-  font-family: var(--sans);
-  font-size: var(--ui-font-size);
-}
-.listing-count {
-  margin: 0 0 8px;
-  font-size: calc(var(--ui-font-size) - 2px);
-  color: var(--faint);
-}
-
-/* Usage stats: a card per headline number, then a share bar per model. */
-.stat-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 8px;
-  margin-bottom: 6px;
-}
-.stat-card {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 12px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--panel);
-}
-.stat-label {
-  font-size: calc(var(--ui-font-size) - 2px);
-  color: var(--muted);
-}
-.stat-value {
-  font-size: calc(var(--ui-font-size) + 8px);
-  font-weight: 700;
-  color: var(--ink);
-}
-.usage-bar {
-  margin-top: 6px;
-  height: 4px;
-  border-radius: 999px;
-  background: var(--line2);
-  overflow: hidden;
-}
-.usage-bar span {
-  display: block;
-  height: 100%;
-  background: var(--blue);
-}
-
-/* Nav group heading above each block of tabs. */
-.tab-group {
-  padding: 12px 10px 4px;
-  font-size: calc(var(--ui-font-size) - 3px);
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--faint);
-}
-
-/* Skills and connectors pages: one card row per entry. */
-.sec-note {
-  margin: -4px 0 12px;
-  font-size: calc(var(--ui-font-size) - 2px);
-  color: var(--muted);
-}
-.sec-empty {
-  margin: 0;
-  font-size: calc(var(--ui-font-size) - 1px);
-  color: var(--faint);
-}
-.listing {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.listing-head {
-  margin: 14px 0 6px;
-  font-size: calc(var(--ui-font-size) - 2px);
-  font-weight: 600;
-  color: var(--muted);
-}
-/* Rows are flat rather than carded: the leading glyph, the name and the right
-   action cluster carry the structure, so a border would only add noise. */
-.listing-row {
-  display: flex;
-  flex-direction: column;
-  padding: 5px 0;
-}
-.listing-top {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-width: 0;
-}
-/* Only the content fades when an entry is off — the switch that turns it back
-   on has to stay at full contrast. */
-.listing-row.off .listing-main { opacity: 0.5; }
-.listing-main {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-  min-width: 0;
-}
-.row-actions {
-  display: flex;
-  flex: none;
-  align-items: center;
-  gap: 4px;
-}
-.listing-glyph {
-  flex: none;
-  width: 15px;
-  height: 15px;
-  color: var(--faint);
-}
-.listing-name {
-  flex: none;
-  font-weight: 500;
-  color: var(--ink);
-}
-.listing-meta {
-  flex: none;
-  font-size: calc(var(--ui-font-size) - 2px);
-  color: var(--faint);
-}
-.listing-desc,
-.listing-path,
-.listing-error {
-  margin: 2px 0 0;
-  font-size: calc(var(--ui-font-size) - 2px);
-  color: var(--muted);
-}
-/* Inside a row the description shares the line with the name, so it truncates
-   instead of wrapping and pushes the meta text to the right edge. */
-.listing-main .listing-desc {
-  margin: 0;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--faint);
-}
-.listing-main .listing-meta { margin-left: auto; }
-.listing-path {
-  padding-left: 27px;
-  color: var(--faint);
-  word-break: break-all;
-}
-.listing-error { padding-left: 27px; }
-.listing-indent { padding-left: 27px; }
-
-/* Ghost icon button for the per-row actions — no chrome until hover. */
-.icon-btn {
-  display: flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--faint);
-  cursor: pointer;
-}
-.icon-btn svg { width: 15px; height: 15px; }
-.icon-btn:hover { background: var(--soft); color: var(--ink); }
-.listing-error {
-  color: var(--err);
-}
-.tag {
-  flex: none;
-  padding: 1px 6px;
-  border-radius: 5px;
-  background: var(--soft);
-  font-size: calc(var(--ui-font-size) - 3px);
-  color: var(--muted);
-}
-.dot {
-  flex: none;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--faint);
-}
-.dot.s-connected { background: var(--ok); }
-.dot.s-connecting { background: var(--warn); }
-.dot.s-error { background: var(--err); }
-
-.act {
-  border: 1px solid var(--line);
-  border-radius: 7px;
-  background: var(--bg);
-  color: var(--ink);
-  font-family: var(--sans);
-  font-size: calc(var(--ui-font-size) - 1.5px);
-  padding: 6px 12px;
-  cursor: pointer;
-}
-.act:hover { background: var(--soft); border-color: var(--bd); }
-.act.signin { background: var(--blue); color: var(--bg); border-color: var(--blue); }
-.act.signin:hover { background: var(--blue2); }
-.act.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 30%, var(--line)); }
-.act.danger:hover { background: color-mix(in srgb, var(--err) 8%, var(--bg)); }
-
-@media (max-width: 640px) {
-  .backdrop {
-    padding:
-      max(12px, env(safe-area-inset-top))
-      max(12px, env(safe-area-inset-right))
-      max(12px, env(safe-area-inset-bottom))
-      max(12px, env(safe-area-inset-left));
-  }
-  .dialog {
-    height: 100%;
-  }
-  .settings-layout { flex-direction: column; }
-  .settings-tabs {
-    flex-direction: row;
-    width: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--line);
-    padding: 8px 12px;
-    gap: 6px;
-    overflow-x: auto;
-  }
-  .tab { white-space: nowrap; }
-  .row {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-  .select-field {
-    width: 100%;
-    max-width: none;
-  }
-  .provider-row {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-  .provider-meta {
-    max-width: 100%;
-    flex-wrap: wrap;
-  }
-}
-</style>
diff --git a/apps/pythinker-web/src/components/Sidebar.vue b/apps/pythinker-web/src/components/Sidebar.vue
index e5e213d6d..93b8d4ae0 100644
--- a/apps/pythinker-web/src/components/Sidebar.vue
+++ b/apps/pythinker-web/src/components/Sidebar.vue
@@ -6,8 +6,10 @@
 import { nextTick, onBeforeUnmount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { Session, WorkspaceGroup, WorkspaceView } from '../types';
+import type { SettingsTab } from '../composables/useSettingsNav';
 import SessionRow from './SessionRow.vue';
 import PythinkerLogo from './PythinkerLogo.vue';
+import SettingsNav from './settings/SettingsNav.vue';
 
 const { t } = useI18n();
 
@@ -24,6 +26,8 @@ const props = withDefaults(
     unreadBySession?: Record<string, boolean>;
     /** Width (px) of the session column, driven by the App resize handle. */
     colWidth?: number;
+    mode?: 'sessions' | 'settings';
+    activeSettingsTab?: SettingsTab;
   }>(),
   {
     activeWorkspace: null,
@@ -32,6 +36,8 @@ const props = withDefaults(
     pendingBySession: () => ({}),
     unreadBySession: () => ({}),
     colWidth: 220,
+    mode: 'sessions',
+    activeSettingsTab: 'general',
   },
 );
 
@@ -48,6 +54,8 @@ const emit = defineEmits<{
   renameWorkspace: [id: string, name: string];
   deleteWorkspace: [id: string];
   openSettings: [];
+  closeSettings: [];
+  selectSettingsTab: [tab: SettingsTab];
   collapse: [];
 }>();
 
@@ -485,6 +493,9 @@ onBeforeUnmount(() => {
         </button>
       </div>
 
+      <!-- The header and New Session button above stay mounted in both modes; only
+           the body below swaps between the session list and the settings nav. -->
+      <template v-if="mode === 'sessions'">
       <!-- Workspace section actions -->
       <div class="ws-head">
         <input
@@ -666,6 +677,21 @@ onBeforeUnmount(() => {
           <span>{{ t('settings.title') }}</span>
         </button>
       </div>
+      </template>
+
+      <template v-else>
+        <div class="settings-nav-body">
+          <SettingsNav :active-tab="activeSettingsTab" @select="emit('selectSettingsTab', $event)" />
+        </div>
+        <div class="side-foot">
+          <button type="button" class="settings-row" @click.stop="emit('closeSettings')">
+            <svg viewBox="0 0 16 16" width="16" height="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>
+            <span>{{ t('settings.backToSessions') }}</span>
+          </button>
+        </div>
+      </template>
     </div>
 
     <div
@@ -1150,6 +1176,11 @@ onBeforeUnmount(() => {
 }
 
 /* Pinned settings action */
+.settings-nav-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
 .side-foot {
   flex: none;
   border-top: none;
diff --git a/apps/pythinker-web/src/components/settings/ListingRow.vue b/apps/pythinker-web/src/components/settings/ListingRow.vue
new file mode 100644
index 000000000..72f1e55d0
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/ListingRow.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  name: string;
+  mono?: boolean;
+  off?: boolean;
+}>();
+
+defineSlots<{
+  glyph(): unknown;
+  default(): unknown;
+  actions(): unknown;
+  detail(): unknown;
+}>();
+</script>
+
+<template>
+  <div class="listing-row" :class="{ off }">
+    <div class="listing-top">
+      <div class="listing-main">
+        <slot name="glyph" />
+        <span class="listing-name" :class="{ mono }">{{ name }}</span>
+        <slot />
+      </div>
+      <div class="row-actions">
+        <slot name="actions" />
+      </div>
+    </div>
+    <slot name="detail" />
+  </div>
+</template>
+
+<style scoped src="./settings.css"></style>
diff --git a/apps/pythinker-web/src/components/settings/SettingsNav.vue b/apps/pythinker-web/src/components/settings/SettingsNav.vue
new file mode 100644
index 000000000..7fd8a03f7
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/SettingsNav.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { tabGroups, type SettingsTab } from '../../composables/useSettingsNav';
+
+defineProps<{ activeTab: SettingsTab }>();
+
+const emit = defineEmits<{
+  select: [tab: SettingsTab];
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <nav class="settings-tabs" role="tablist" :aria-label="t('settings.title')">
+    <template v-for="group in tabGroups" :key="group.titleKey">
+      <span class="tab-group">{{ t(group.titleKey) }}</span>
+      <button
+        v-for="tab in group.tabs"
+        :id="`settings-tab-${tab.id}`"
+        :key="tab.id"
+        type="button"
+        class="tab"
+        role="tab"
+        :aria-selected="activeTab === tab.id"
+        :aria-controls="`settings-panel-${tab.id}`"
+        :class="{ on: activeTab === tab.id }"
+        @click="emit('select', tab.id)"
+      >
+        {{ t(tab.labelKey) }}
+      </button>
+    </template>
+  </nav>
+</template>
+
+<style scoped>
+.settings-tabs {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-height: 0;
+  padding: 2px 8px 10px;
+  overflow-y: auto;
+}
+.tab {
+  padding: 8px 10px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--muted);
+  font-family: var(--sans);
+  font-size: calc(var(--ui-font-size) - 0.5px);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+.tab:hover { background: var(--soft); color: var(--ink); }
+.tab.on { background: var(--soft); color: var(--blue2); font-weight: 600; }
+.tab-group {
+  padding: 12px 10px 4px;
+  color: var(--faint);
+  font-size: calc(var(--ui-font-size) - 3px);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+</style>
diff --git a/apps/pythinker-web/src/components/settings/SettingsPane.vue b/apps/pythinker-web/src/components/settings/SettingsPane.vue
new file mode 100644
index 000000000..99cfa81ce
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/SettingsPane.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type {
+  AppConfig,
+  AppConnector,
+  AppModel,
+  AppPlugin,
+  AppSession,
+  AppSkill,
+  AppSubagent,
+} from '../../api/types';
+import type { ColorScheme, Theme } from '../../composables/usePythinkerWebClient';
+import type { SettingsTab } from '../../composables/useSettingsNav';
+import AdvancedPage from './pages/AdvancedPage.vue';
+import AgentPage from './pages/AgentPage.vue';
+import ConnectorsPage from './pages/ConnectorsPage.vue';
+import ExperimentalPage from './pages/ExperimentalPage.vue';
+import GeneralPage from './pages/GeneralPage.vue';
+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 UsagePage from './pages/UsagePage.vue';
+
+defineProps<{
+  activeTab: SettingsTab;
+  theme: Theme;
+  colorScheme: ColorScheme;
+  uiFontSize: number;
+  authReady: boolean;
+  accountModel?: string | null;
+  notify: boolean;
+  notifyPermission?: string;
+  betaToc?: boolean;
+  config?: AppConfig | null;
+  models?: AppModel[];
+  configSaving?: boolean;
+  skills?: AppSkill[];
+  connectors?: AppConnector[];
+  connectorsLoading?: boolean;
+  sessions?: AppSession[];
+  plugins?: AppPlugin[];
+  subagents?: AppSubagent[];
+}>();
+
+const emit = defineEmits<{
+  setTheme: [theme: Theme];
+  setColorScheme: [colorScheme: ColorScheme];
+  setUiFontSize: [size: number];
+  setNotify: [on: boolean];
+  setBetaToc: [on: boolean];
+  login: [];
+  openOnboarding: [];
+  updateConfig: [patch: Partial<AppConfig>];
+  restartConnector: [connectorId: string];
+  setPluginEnabled: [payload: { pluginId: string; enabled: boolean }];
+}>();
+</script>
+
+<template>
+  <main class="settings-pane con">
+    <GeneralPage
+      v-show="activeTab === 'general'"
+      :theme="theme"
+      :color-scheme="colorScheme"
+      :ui-font-size="uiFontSize"
+      :auth-ready="authReady"
+      :account-model="accountModel"
+      :notify="notify"
+      :notify-permission="notifyPermission"
+      @set-theme="emit('setTheme', $event)"
+      @set-color-scheme="emit('setColorScheme', $event)"
+      @set-ui-font-size="emit('setUiFontSize', $event)"
+      @set-notify="emit('setNotify', $event)"
+      @login="emit('login')"
+      @open-onboarding="emit('openOnboarding')"
+    />
+    <AgentPage
+      v-show="activeTab === 'agent'"
+      :config="config"
+      :models="models"
+      :config-saving="configSaving"
+      @update-config="emit('updateConfig', $event)"
+    />
+    <PluginsPage
+      v-show="activeTab === 'plugins'"
+      :plugins="plugins"
+      @set-plugin-enabled="emit('setPluginEnabled', $event)"
+    />
+    <SkillsPage
+      v-show="activeTab === 'skills'"
+      :config="config"
+      :skills="skills"
+      @update-config="emit('updateConfig', $event)"
+    />
+    <SubagentsPage v-show="activeTab === 'subagents'" :subagents="subagents" />
+    <ConnectorsPage
+      v-show="activeTab === 'connectors'"
+      :connectors="connectors"
+      :connectors-loading="connectorsLoading"
+      @restart-connector="emit('restartConnector', $event)"
+    />
+    <HooksPage v-show="activeTab === 'hooks'" :config="config" />
+    <UsagePage v-show="activeTab === 'usage'" :sessions="sessions" />
+    <AdvancedPage v-show="activeTab === 'advanced'" />
+    <ExperimentalPage v-show="activeTab === 'experimental'" :beta-toc="betaToc" @set-beta-toc="emit('setBetaToc', $event)" />
+  </main>
+</template>
+
+<style scoped>
+.settings-pane {
+  grid-column: 3;
+  min-width: 0;
+  min-height: 0;
+  padding: 6px 16px 16px;
+  overflow-y: auto;
+  background: var(--bg);
+  color: var(--ink);
+}
+</style>
diff --git a/apps/pythinker-web/src/components/settings/pages/AdvancedPage.vue b/apps/pythinker-web/src/components/settings/pages/AdvancedPage.vue
new file mode 100644
index 000000000..2f963a175
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/pages/AdvancedPage.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { serverEndpointLabel } from '../../../api/config';
+import { downloadTraceLog, isTraceEnabled } from '../../../debug/trace';
+
+const { t } = useI18n();
+const daemonEndpoint = serverEndpointLabel();
+
+function exportLog(): void {
+  downloadTraceLog();
+}
+</script>
+
+<template>
+  <section id="settings-panel-advanced" class="panel" role="tabpanel" aria-labelledby="settings-tab-advanced">
+    <section class="sec">
+      <h3 class="sec-title">{{ t('settings.advanced') }}</h3>
+      <div class="row">
+        <span class="rlabel">{{ t('sidebar.daemon') }}</span>
+        <span class="rvalue mono">{{ daemonEndpoint }}</span>
+      </div>
+      <div class="row">
+        <span class="rlabel">
+          {{ t('settings.exportLog') }}
+          <span v-if="!isTraceEnabled()" class="hint">{{ t('settings.logHint') }}</span>
+        </span>
+        <button type="button" class="act" @click="exportLog">{{ t('settings.exportLogBtn') }}</button>
+      </div>
+    </section>
+  </section>
+</template>
+
+<style scoped src="../settings.css"></style>
diff --git a/apps/pythinker-web/src/components/settings/pages/AgentPage.vue b/apps/pythinker-web/src/components/settings/pages/AgentPage.vue
new file mode 100644
index 000000000..265453cd6
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/pages/AgentPage.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { AppConfig, AppConfigProvider, AppModel } from '../../../api/types';
+
+const props = defineProps<{
+  config?: AppConfig | null;
+  models?: AppModel[];
+  configSaving?: boolean;
+}>();
+
+const emit = defineEmits<{
+  updateConfig: [patch: Partial<AppConfig>];
+}>();
+
+const { t } = useI18n();
+const permissionModes = ['manual', 'yolo', 'auto'] as const;
+
+type ModelOption = { id: string; label: string; provider: string };
+
+const modelOptions = computed<ModelOption[]>(() => {
+  const byId = new Map<string, ModelOption>();
+  for (const model of props.models ?? []) {
+    byId.set(model.id, {
+      id: model.id,
+      label: model.displayName ?? model.model ?? model.id,
+      provider: model.provider,
+    });
+  }
+  for (const [id, raw] of Object.entries(props.config?.models ?? {})) {
+    if (byId.has(id)) continue;
+    const provider = extractConfigModelProvider(raw);
+    byId.set(id, {
+      id,
+      label: formatConfigModelLabel(id, raw, provider),
+      provider: provider ?? id,
+    });
+  }
+  return Array.from(byId.values());
+});
+
+const modelGroups = computed<Array<{ provider: string; options: ModelOption[] }>>(() => {
+  const map = new Map<string, ModelOption[]>();
+  for (const option of modelOptions.value) {
+    const list = map.get(option.provider) ?? [];
+    list.push(option);
+    map.set(option.provider, list);
+  }
+  for (const list of map.values()) list.sort((a, b) => a.label.localeCompare(b.label));
+  return Array.from(map.entries())
+    .toSorted(([a], [b]) => a.localeCompare(b))
+    .map(([provider, options]) => ({ provider, options }));
+});
+
+const providerEntries = computed<Array<{ id: string; provider: AppConfigProvider }>>(() =>
+  Object.entries(props.config?.providers ?? {})
+    .map(([id, provider]) => ({ id, provider }))
+    .sort((a, b) => a.id.localeCompare(b.id)),
+);
+
+const defaultPermissionMode = computed(() => {
+  const mode = props.config?.defaultPermissionMode;
+  return mode === 'auto' || mode === 'yolo' || mode === 'manual' ? mode : 'manual';
+});
+
+function extractConfigModelProvider(raw: unknown): string | undefined {
+  if (!raw || typeof raw !== 'object') return undefined;
+  const source = raw as Record<string, unknown>;
+  return typeof source['provider'] === 'string' ? source['provider'] : undefined;
+}
+
+function formatConfigModelLabel(id: string, raw: unknown, provider?: string): string {
+  if (!raw || typeof raw !== 'object') return id;
+  const source = raw as Record<string, unknown>;
+  const model = typeof source['model'] === 'string' ? source['model'] : undefined;
+  const resolvedProvider = provider ?? extractConfigModelProvider(raw);
+  if (model && resolvedProvider) return `${id} (${resolvedProvider}/${model})`;
+  if (model) return `${id} (${model})`;
+  return id;
+}
+
+function configBool(value: boolean | undefined): boolean {
+  return value === true;
+}
+
+function setDefaultModel(event: Event): void {
+  const value = (event.target as HTMLSelectElement).value;
+  if (!value || value === props.config?.defaultModel) return;
+  emit('updateConfig', { defaultModel: value });
+}
+
+function setDefaultPermissionMode(mode: 'manual' | 'auto' | 'yolo'): void {
+  if (mode === defaultPermissionMode.value) return;
+  emit('updateConfig', { defaultPermissionMode: mode });
+}
+
+function toggleConfigBoolean(key: 'defaultThinking' | 'defaultPlanMode' | 'mergeAllAvailableSkills' | 'telemetry'): void {
+  emit('updateConfig', { [key]: !configBool(props.config?.[key]) } as Partial<AppConfig>);
+}
+</script>
+
+<template>
+  <section id="settings-panel-agent" class="panel" role="tabpanel" aria-labelledby="settings-tab-agent">
+    <section class="sec">
+      <div class="sec-head">
+        <h3 class="sec-title">{{ t('settings.agentDefaults') }}</h3>
+        <span v-if="configSaving" class="saving">{{ t('settings.saving') }}</span>
+      </div>
+
+      <template v-if="config">
+        <div class="row">
+          <span class="rlabel">
+            {{ t('settings.defaultModel') }}
+            <span class="hint">{{ t('settings.defaultModelHint') }}</span>
+          </span>
+          <select
+            v-if="modelGroups.length > 0"
+            class="select-field"
+            :value="config.defaultModel ?? ''"
+            :disabled="configSaving"
+            :aria-label="t('settings.defaultModel')"
+            @change="setDefaultModel"
+          >
+            <option v-if="!config.defaultModel" value="" disabled>{{ t('settings.noDefaultModel') }}</option>
+            <optgroup v-for="group in modelGroups" :key="group.provider" :label="group.provider">
+              <option v-for="model in group.options" :key="model.id" :value="model.id">{{ model.label }}</option>
+            </optgroup>
+          </select>
+          <span v-else class="rvalue mono">{{ config.defaultModel ?? t('settings.noDefaultModel') }}</span>
+        </div>
+
+        <div class="row">
+          <span class="rlabel">
+            {{ t('settings.defaultPermission') }}
+            <span class="hint">{{ t('settings.defaultPermissionHint') }}</span>
+          </span>
+          <div class="seg" role="group" :aria-label="t('settings.defaultPermission')">
+            <button
+              v-for="mode in permissionModes"
+              :key="mode"
+              type="button"
+              class="opt"
+              :class="{ on: defaultPermissionMode === mode }"
+              :aria-pressed="defaultPermissionMode === mode"
+              :disabled="configSaving"
+              @click="setDefaultPermissionMode(mode)"
+            >
+              {{ t(`settings.permission.${mode}`) }}
+            </button>
+          </div>
+        </div>
+
+        <div class="row">
+          <span class="rlabel">{{ t('settings.defaultThinking') }}<span class="hint">{{ t('settings.defaultThinkingHint') }}</span></span>
+          <button type="button" class="switch" role="switch" :class="{ on: configBool(config.defaultThinking) }" :aria-checked="configBool(config.defaultThinking)" :disabled="configSaving" @click="toggleConfigBoolean('defaultThinking')"><span class="knob" /></button>
+        </div>
+        <div class="row">
+          <span class="rlabel">{{ t('settings.defaultPlanMode') }}<span class="hint">{{ t('settings.defaultPlanModeHint') }}</span></span>
+          <button type="button" class="switch" role="switch" :class="{ on: configBool(config.defaultPlanMode) }" :aria-checked="configBool(config.defaultPlanMode)" :disabled="configSaving" @click="toggleConfigBoolean('defaultPlanMode')"><span class="knob" /></button>
+        </div>
+        <div class="row">
+          <span class="rlabel">{{ t('settings.mergeSkills') }}<span class="hint">{{ t('settings.mergeSkillsHint') }}</span></span>
+          <button type="button" class="switch" role="switch" :class="{ on: configBool(config.mergeAllAvailableSkills) }" :aria-checked="configBool(config.mergeAllAvailableSkills)" :disabled="configSaving" @click="toggleConfigBoolean('mergeAllAvailableSkills')"><span class="knob" /></button>
+        </div>
+        <div v-if="config.telemetry !== undefined" class="row">
+          <span class="rlabel">{{ t('settings.telemetry') }}</span>
+          <button type="button" class="switch" role="switch" :class="{ on: configBool(config.telemetry) }" :aria-checked="configBool(config.telemetry)" :disabled="configSaving" @click="toggleConfigBoolean('telemetry')"><span class="knob" /></button>
+        </div>
+
+        <div v-if="providerEntries.length > 0" class="provider-list">
+          <div v-for="{ id, provider } in providerEntries" :key="id" class="provider-row">
+            <div class="provider-main">
+              <span class="provider-id">{{ id }}</span>
+              <span class="provider-type">{{ provider.type }}</span>
+            </div>
+            <div class="provider-meta">
+              <span :class="['provider-badge', provider.hasApiKey ? 'ok' : 'warn']">{{ provider.hasApiKey ? t('settings.credentialReady') : t('settings.credentialMissing') }}</span>
+              <span v-if="provider.defaultModel" class="provider-model">{{ provider.defaultModel }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <div v-else class="empty-config">{{ t('settings.configUnavailable') }}</div>
+    </section>
+  </section>
+</template>
+
+<style scoped src="../settings.css"></style>
+
+<style scoped>
+.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
+.sec-head .sec-title { margin-bottom: 0; }
+.saving { flex: none; color: var(--muted); font-family: var(--mono); font-size: var(--ui-font-size-xs); }
+.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
+.opt { padding: 5px 12px; border: none; border-left: 1px solid var(--line); background: var(--bg); color: var(--muted); font-family: var(--mono); font-size: var(--ui-font-size-xs); cursor: pointer; }
+.opt:first-child { border-left: none; }
+.opt:hover { color: var(--ink); }
+.opt.on { background: var(--soft); color: var(--blue2); font-weight: 600; }
+.opt:disabled { opacity: 0.55; cursor: not-allowed; }
+.select-field { min-width: 220px; max-width: min(320px, 50vw); height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: calc(var(--ui-font-size) - 1.5px); }
+.select-field:disabled { opacity: 0.6; cursor: not-allowed; }
+.empty-config { padding: 4px 0; color: var(--muted); font-family: var(--sans); font-size: calc(var(--ui-font-size) - 1px); }
+.provider-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
+.provider-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
+.provider-main, .provider-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.provider-main { flex: 1; }
+.provider-meta { flex: none; max-width: 45%; }
+.provider-id, .provider-model { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.provider-id { color: var(--ink); font-family: var(--mono); font-size: var(--ui-font-size-xs); }
+.provider-type, .provider-model { color: var(--muted); font-family: var(--mono); font-size: max(10px, calc(var(--ui-font-size) - 4px)); }
+.provider-badge { flex: none; padding: 2px 7px; border-radius: 999px; font-family: var(--mono); font-size: max(10px, calc(var(--ui-font-size) - 4px)); }
+.provider-badge.ok { background: color-mix(in srgb, var(--ok) 12%, var(--bg)); color: var(--ok); }
+.provider-badge.warn { background: color-mix(in srgb, var(--warn) 12%, var(--bg)); color: var(--warn); }
+
+@media (max-width: 640px) {
+  .select-field { width: 100%; max-width: none; }
+  .provider-row { align-items: flex-start; flex-direction: column; }
+  .provider-meta { max-width: 100%; flex-wrap: wrap; }
+}
+</style>
diff --git a/apps/pythinker-web/src/components/settings/pages/ConnectorsPage.vue b/apps/pythinker-web/src/components/settings/pages/ConnectorsPage.vue
new file mode 100644
index 000000000..a5da29532
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/pages/ConnectorsPage.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import type { AppConnector } from '../../../api/types';
+import ListingRow from '../ListingRow.vue';
+
+defineProps<{
+  connectors?: AppConnector[];
+  connectorsLoading?: boolean;
+}>();
+
+const emit = defineEmits<{
+  restartConnector: [connectorId: string];
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <section id="settings-panel-connectors" class="panel" role="tabpanel" aria-labelledby="settings-tab-connectors">
+    <section class="sec">
+      <h2 class="page-title">{{ t('settings.connectors.title') }}</h2>
+      <p class="sec-note">{{ t('settings.connectors.note') }}</p>
+      <p v-if="connectorsLoading" class="sec-empty">{{ t('settings.connectors.loading') }}</p>
+      <p v-else-if="(connectors?.length ?? 0) === 0" class="sec-empty">{{ t('settings.connectors.empty') }}</p>
+      <div v-else class="listing">
+        <ListingRow v-for="connector in connectors" :key="connector.id" :name="connector.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="M9 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0V8zM12 17v4" stroke-linecap="round" /></svg>
+          </template>
+          <span class="tag">{{ connector.transport }}</span>
+          <span class="listing-desc">{{ t(`settings.connectors.status.${connector.status}`) }}</span>
+          <span class="listing-meta">{{ t('settings.connectors.tools', { count: connector.toolCount }) }}</span>
+          <template #actions>
+            <span class="dot" :class="`s-${connector.status}`" aria-hidden="true" />
+            <button type="button" class="icon-btn" :title="t('settings.connectors.restart')" :aria-label="t('settings.connectors.restart')" @click="emit('restartConnector', connector.id)">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.6-5.9M20 4v5h-5" stroke-linecap="round" stroke-linejoin="round" /></svg>
+            </button>
+          </template>
+          <template v-if="connector.lastError" #detail>
+            <p class="listing-error">{{ connector.lastError }}</p>
+          </template>
+        </ListingRow>
+      </div>
+    </section>
+  </section>
+</template>
+
+<style scoped src="../settings.css"></style>
diff --git a/apps/pythinker-web/src/components/settings/pages/ExperimentalPage.vue b/apps/pythinker-web/src/components/settings/pages/ExperimentalPage.vue
new file mode 100644
index 000000000..4d414b6cf
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/pages/ExperimentalPage.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+defineProps<{ betaToc?: boolean }>();
+
+const emit = defineEmits<{
+  setBetaToc: [on: boolean];
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <section id="settings-panel-experimental" class="panel" role="tabpanel" aria-labelledby="settings-tab-experimental">
+    <section class="sec">
+      <h3 class="sec-title">{{ t('settings.beta') }}</h3>
+      <div class="row">
+        <span class="rlabel">
+          {{ t('settings.betaToc') }}
+          <span class="hint">{{ t('settings.betaTocHint') }}</span>
+        </span>
+        <button type="button" class="switch" role="switch" :class="{ on: betaToc }" :aria-checked="betaToc" @click="emit('setBetaToc', !betaToc)"><span class="knob" /></button>
+      </div>
+    </section>
+  </section>
+</template>
+
+<style scoped src="../settings.css"></style>
diff --git a/apps/pythinker-web/src/components/settings/pages/GeneralPage.vue b/apps/pythinker-web/src/components/settings/pages/GeneralPage.vue
new file mode 100644
index 000000000..2bc8fad5c
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/pages/GeneralPage.vue
@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { ColorScheme, Theme } from '../../../composables/usePythinkerWebClient';
+
+defineProps<{
+  theme: Theme;
+  colorScheme: ColorScheme;
+  uiFontSize: number;
+  authReady: boolean;
+  accountModel?: string | null;
+  notify: boolean;
+  notifyPermission?: string;
+}>();
+
+const emit = defineEmits<{
+  setTheme: [theme: Theme];
+  setColorScheme: [colorScheme: ColorScheme];
+  setUiFontSize: [size: number];
+  setNotify: [on: boolean];
+  login: [];
+  openOnboarding: [];
+}>();
+
+const { t } = useI18n();
+const desktopBridge = typeof window !== 'undefined' ? window.pythinkerDesktop : undefined;
+const desktopAutoUpdate = ref(true);
+const desktopUpdateState = ref<DesktopUpdateState>();
+let removeDesktopUpdateListener: (() => void) | undefined;
+
+const desktopStatusText = computed(() => {
+  const state = desktopUpdateState.value;
+  if (state === undefined) return '';
+  if (state.status === 'disabled') return t('settings.desktop.disabled');
+  if (state.status === 'idle') return state.message ? t('settings.desktop.upToDate') : '';
+  if (state.status === 'checking') return t('settings.desktop.checking');
+  if (state.status === 'available' || state.status === 'downloading') {
+    return state.version
+      ? t('settings.desktop.downloading', { version: state.version })
+      : t('settings.desktop.downloadingUnknown');
+  }
+  if (state.status === 'downloaded') return t('settings.desktop.updateReady');
+  return state.message
+    ? t('settings.desktop.error', { message: state.message })
+    : t('settings.desktop.errorGeneric');
+});
+
+const desktopCheckDisabled = computed(() => {
+  const status = desktopUpdateState.value?.status;
+  return status === 'checking' || status === 'downloading';
+});
+
+function setDesktopUpdateState(state: DesktopUpdateState): void {
+  desktopUpdateState.value = state;
+  desktopAutoUpdate.value = state.autoUpdate;
+}
+
+function setDesktopUpdateError(error: unknown): void {
+  desktopUpdateState.value = {
+    status: 'error',
+    autoUpdate: desktopAutoUpdate.value,
+    message: error instanceof Error ? error.message : String(error),
+  };
+}
+
+async function setDesktopAutoUpdate(enabled: boolean): Promise<void> {
+  if (desktopBridge === undefined) return;
+  desktopAutoUpdate.value = enabled;
+  try {
+    const state = await desktopBridge.setAutoUpdate(enabled);
+    if (state !== undefined) setDesktopUpdateState(state);
+  } catch (error) {
+    setDesktopUpdateError(error);
+  }
+}
+
+async function checkDesktopForUpdates(): Promise<void> {
+  if (desktopBridge === undefined) return;
+  try {
+    const state = await desktopBridge.checkForUpdates();
+    if (state !== undefined) setDesktopUpdateState(state);
+  } catch (error) {
+    setDesktopUpdateError(error);
+  }
+}
+
+async function restartDesktopToUpdate(): Promise<void> {
+  if (desktopBridge === undefined) return;
+  try {
+    const state = await desktopBridge.quitAndInstall();
+    if (state !== undefined) setDesktopUpdateState(state);
+  } catch (error) {
+    setDesktopUpdateError(error);
+  }
+}
+
+onMounted(() => {
+  if (desktopBridge === undefined) return;
+  removeDesktopUpdateListener = desktopBridge.onUpdateState(setDesktopUpdateState);
+  void desktopBridge.getUpdateState().then(setDesktopUpdateState).catch(setDesktopUpdateError);
+});
+
+onUnmounted(() => {
+  removeDesktopUpdateListener?.();
+});
+</script>
+
+<template>
+  <section id="settings-panel-general" class="panel" role="tabpanel" aria-labelledby="settings-tab-general">
+    <section class="sec">
+      <h3 class="sec-title">{{ t('settings.appearance') }}</h3>
+      <div class="row">
+        <span class="rlabel">{{ t('theme.label') }}</span>
+        <div class="seg" role="group" :aria-label="t('theme.label')">
+          <button type="button" class="opt" :class="{ on: theme === 'modern' }" :aria-pressed="theme === 'modern'" @click="emit('setTheme', 'modern')">{{ t('theme.modern') }}</button>
+          <button type="button" class="opt" :class="{ on: theme === 'pythinker' }" :aria-pressed="theme === 'pythinker'" @click="emit('setTheme', 'pythinker')">{{ t('theme.pythinker') }}</button>
+        </div>
+      </div>
+      <div class="row">
+        <span class="rlabel">{{ t('theme.colorSchemeLabel') }}</span>
+        <div class="seg" role="group" :aria-label="t('theme.colorSchemeLabel')">
+          <button type="button" class="opt" :class="{ on: colorScheme === 'light' }" :aria-pressed="colorScheme === 'light'" @click="emit('setColorScheme', 'light')">{{ t('theme.light') }}</button>
+          <button type="button" class="opt" :class="{ on: colorScheme === 'dark' }" :aria-pressed="colorScheme === 'dark'" @click="emit('setColorScheme', 'dark')">{{ t('theme.dark') }}</button>
+          <button type="button" class="opt" :class="{ on: colorScheme === 'system' }" :aria-pressed="colorScheme === 'system'" @click="emit('setColorScheme', 'system')">{{ t('theme.system') }}</button>
+        </div>
+      </div>
+      <div class="row">
+        <span class="rlabel">{{ t('settings.uiFontSize') }}</span>
+        <label class="num-field">
+          <input
+            class="num-input"
+            type="number"
+            min="12"
+            max="20"
+            step="1"
+            :value="uiFontSize"
+            :aria-label="t('settings.uiFontSize')"
+            @input="emit('setUiFontSize', Number(($event.target as HTMLInputElement).value))"
+          />
+          <span class="num-unit">px</span>
+        </label>
+      </div>
+    </section>
+
+    <section class="sec">
+      <h3 class="sec-title">{{ t('settings.notifications') }}</h3>
+      <div class="row">
+        <span class="rlabel">
+          {{ t('settings.notifyOnComplete') }}
+          <span v-if="notifyPermission === 'denied'" class="hint">{{ t('settings.notifyDenied') }}</span>
+        </span>
+        <button
+          type="button"
+          class="switch"
+          role="switch"
+          :class="{ on: notify }"
+          :aria-checked="notify"
+          :disabled="notifyPermission === 'denied'"
+          @click="emit('setNotify', !notify)"
+        >
+          <span class="knob" />
+        </button>
+      </div>
+    </section>
+
+    <section v-if="desktopBridge !== undefined" class="sec">
+      <h3 class="sec-title">{{ t('settings.desktop.title') }}</h3>
+      <div class="row">
+        <span class="rlabel">
+          {{ t('settings.desktop.automaticUpdates') }}
+          <span class="hint">{{ t('settings.desktop.automaticUpdatesHint') }}</span>
+        </span>
+        <button type="button" class="switch" role="switch" :class="{ on: desktopAutoUpdate }" :aria-checked="desktopAutoUpdate" @click="void setDesktopAutoUpdate(!desktopAutoUpdate)">
+          <span class="knob" />
+        </button>
+      </div>
+      <div v-if="desktopStatusText" class="row">
+        <span class="rlabel">{{ t('settings.desktop.status') }}</span>
+        <span class="rvalue">{{ desktopStatusText }}</span>
+      </div>
+      <div class="actions">
+        <button type="button" class="act" :disabled="desktopCheckDisabled" @click="void checkDesktopForUpdates()">{{ t('settings.desktop.checkForUpdates') }}</button>
+        <button v-if="desktopUpdateState?.status === 'downloaded'" type="button" class="act" @click="void restartDesktopToUpdate()">{{ t('settings.desktop.restartToUpdate') }}</button>
+      </div>
+    </section>
+
+    <section class="sec">
+      <h3 class="sec-title">{{ t('settings.account') }}</h3>
+      <div class="row">
+        <span class="rlabel">{{ authReady ? t('sidebar.signedIn') : t('sidebar.notSignedIn') }}</span>
+        <span v-if="authReady && accountModel" class="rvalue" :title="accountModel">{{ accountModel }}</span>
+      </div>
+      <div class="actions">
+        <button type="button" class="act" @click="emit('openOnboarding')">{{ t('onboarding.reopen') }}</button>
+        <button type="button" class="act signin" @click="emit('login')">{{ t('providers.title') }}</button>
+      </div>
+    </section>
+  </section>
+</template>
+
+<style scoped src="../settings.css"></style>
+
+<style scoped>
+.num-field {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 8px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg);
+}
+.num-input {
+  width: 48px;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: var(--ui-font-size-sm);
+  text-align: right;
+}
+.num-unit { color: var(--muted); font-family: var(--mono); font-size: var(--ui-font-size-xs); }
+.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
+.opt {
+  padding: 5px 12px;
+  border: none;
+  border-left: 1px solid var(--line);
+  background: var(--bg);
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: var(--ui-font-size-xs);
+  cursor: pointer;
+}
+.opt:first-child { border-left: none; }
+.opt:hover { color: var(--ink); }
+.opt.on { background: var(--soft); color: var(--blue2); font-weight: 600; }
+.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
+</style>
diff --git a/apps/pythinker-web/src/components/settings/pages/HooksPage.vue b/apps/pythinker-web/src/components/settings/pages/HooksPage.vue
new file mode 100644
index 000000000..36a92e1e4
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/pages/HooksPage.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { AppConfig, AppHook } from '../../../api/types';
+import ListingRow from '../ListingRow.vue';
+
+const props = defineProps<{ config?: AppConfig | null }>();
+
+const { t } = useI18n();
+
+const hookGroups = computed(() => {
+  const byEvent = new Map<string, AppHook[]>();
+  for (const hook of props.config?.hooks ?? []) {
+    const group = byEvent.get(hook.event) ?? [];
+    group.push(hook);
+    byEvent.set(hook.event, group);
+  }
+  return [...byEvent.entries()].map(([event, hooks]) => ({ event, hooks }));
+});
+
+const hookCount = computed(() => props.config?.hooks?.length ?? 0);
+</script>
+
+<template>
+  <section id="settings-panel-hooks" class="panel" role="tabpanel" aria-labelledby="settings-tab-hooks">
+    <section class="sec">
+      <h2 class="page-title">{{ t('settings.hooks.title') }}</h2>
+      <p class="sec-note">{{ t('settings.hooks.note') }}</p>
+      <p v-if="hookCount === 0" class="sec-empty">{{ t('settings.hooks.empty') }}</p>
+      <template v-else>
+        <p class="listing-count">{{ t('settings.hooks.count', { count: hookCount }) }}</p>
+        <div v-for="group in hookGroups" :key="group.event" class="listing">
+          <h4 class="listing-head">{{ group.event }}</h4>
+          <ListingRow v-for="(hook, index) in group.hooks" :key="`${group.event}/${index}`" :name="hook.matcher ?? '*'" mono>
+            <template #glyph>
+              <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M13 3L5 14h6l-2 7 8-11h-6l2-7z" stroke-linejoin="round" /></svg>
+            </template>
+            <span class="tag">{{ hook.type ?? 'command' }}</span>
+            <span v-if="hook.async === true" class="tag">{{ t('settings.hooks.async') }}</span>
+            <span v-if="hook.timeout !== undefined" class="listing-meta">{{ t('settings.hooks.timeout', { seconds: hook.timeout }) }}</span>
+            <template #detail>
+              <p class="listing-path mono">{{ hook.command ?? hook.url ?? '—' }}</p>
+            </template>
+          </ListingRow>
+        </div>
+      </template>
+    </section>
+  </section>
+</template>
+
+<style scoped src="../settings.css"></style>
diff --git a/apps/pythinker-web/src/components/settings/pages/PluginsPage.vue b/apps/pythinker-web/src/components/settings/pages/PluginsPage.vue
new file mode 100644
index 000000000..6c9bf7105
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/pages/PluginsPage.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import type { AppPlugin } from '../../../api/types';
+import ListingRow from '../ListingRow.vue';
+
+defineProps<{ plugins?: AppPlugin[] }>();
+
+const emit = defineEmits<{
+  setPluginEnabled: [payload: { pluginId: string; enabled: boolean }];
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <section id="settings-panel-plugins" class="panel" role="tabpanel" aria-labelledby="settings-tab-plugins">
+    <section class="sec">
+      <h2 class="page-title">{{ t('settings.plugins.title') }}</h2>
+      <p class="sec-note">{{ t('settings.plugins.note') }}</p>
+      <p v-if="(plugins?.length ?? 0) === 0" class="sec-empty">{{ t('settings.plugins.empty') }}</p>
+      <div v-else class="listing">
+        <ListingRow v-for="plugin in plugins" :key="plugin.id" :name="plugin.displayName" :off="!plugin.enabled">
+          <template #glyph>
+            <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M10 4a2 2 0 1 1 4 0v1h3a1 1 0 0 1 1 1v3h1a2 2 0 1 1 0 4h-1v3a1 1 0 0 1-1 1h-3v-1a2 2 0 1 0-4 0v1H6a1 1 0 0 1-1-1v-3H4a2 2 0 1 1 0-4h1V6a1 1 0 0 1 1-1h4V4z" stroke-linejoin="round" /></svg>
+          </template>
+          <span v-if="plugin.version" class="tag">{{ plugin.version }}</span>
+          <span class="tag">{{ plugin.source }}</span>
+          <span class="listing-meta">{{ t('settings.plugins.counts', { skills: plugin.skillCount, servers: plugin.mcpServerCount }) }}</span>
+          <template #actions>
+            <button type="button" class="switch sm" role="switch" :class="{ on: plugin.enabled }" :aria-checked="plugin.enabled" :aria-label="t('settings.plugins.toggleAria', { name: plugin.displayName })" @click="emit('setPluginEnabled', { pluginId: plugin.id, enabled: !plugin.enabled })"><span class="knob" /></button>
+          </template>
+          <template v-if="plugin.hasErrors" #detail>
+            <p class="listing-error">{{ t('settings.plugins.hasErrors') }}</p>
+          </template>
+        </ListingRow>
+      </div>
+    </section>
+  </section>
+</template>
+
+<style scoped src="../settings.css"></style>
diff --git a/apps/pythinker-web/src/components/settings/pages/SkillsPage.vue b/apps/pythinker-web/src/components/settings/pages/SkillsPage.vue
new file mode 100644
index 000000000..23a69a830
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/pages/SkillsPage.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { AppConfig, AppSkill } from '../../../api/types';
+import ListingRow from '../ListingRow.vue';
+
+const props = defineProps<{
+  config?: AppConfig | null;
+  skills?: AppSkill[];
+}>();
+
+const emit = defineEmits<{
+  updateConfig: [patch: Partial<AppConfig>];
+}>();
+
+const { t } = useI18n();
+const skillQuery = ref('');
+
+const skillGroups = computed(() => {
+  const query = skillQuery.value.trim().toLowerCase();
+  const matching = (props.skills ?? []).filter(
+    (skill) => query === '' || skill.name.toLowerCase().includes(query) || skill.description.toLowerCase().includes(query),
+  );
+  const bySource = new Map<string, AppSkill[]>();
+  for (const skill of matching) {
+    const group = bySource.get(skill.source) ?? [];
+    group.push(skill);
+    bySource.set(skill.source, group);
+  }
+  return [...bySource.entries()]
+    .map(([source, groupedSkills]) => ({
+      source,
+      skills: groupedSkills.toSorted((a, b) => a.name.localeCompare(b.name)),
+    }))
+    .toSorted((a, b) => a.source.localeCompare(b.source));
+});
+
+const disabledSkills = computed(() => new Set(props.config?.disabledSkills ?? []));
+const skillCount = computed(() => skillGroups.value.reduce((sum, group) => sum + group.skills.length, 0));
+
+function isSkillEnabled(name: string): boolean {
+  return !disabledSkills.value.has(name);
+}
+
+function toggleSkill(name: string): void {
+  const next = new Set(disabledSkills.value);
+  if (next.has(name)) next.delete(name);
+  else next.add(name);
+  emit('updateConfig', { disabledSkills: [...next].sort() });
+}
+</script>
+
+<template>
+  <section id="settings-panel-skills" class="panel" role="tabpanel" aria-labelledby="settings-tab-skills">
+    <section class="sec">
+      <h2 class="page-title">{{ t('settings.skills.title') }}</h2>
+      <p class="sec-note">{{ t('settings.skills.note') }}</p>
+      <input v-model="skillQuery" type="search" class="page-search" :placeholder="t('settings.skills.search')" :aria-label="t('settings.skills.search')">
+      <p class="listing-count">{{ t('settings.skills.count', { count: skillCount }) }}</p>
+      <p v-if="skillGroups.length === 0" class="sec-empty">{{ t('settings.skills.empty') }}</p>
+      <div v-for="group in skillGroups" :key="group.source" class="listing">
+        <h4 class="listing-head">{{ group.source }}</h4>
+        <ListingRow v-for="skill in group.skills" :key="`${group.source}/${skill.name}`" :name="skill.name" mono :off="!isSkillEnabled(skill.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="M12 3l2.1 4.9 5.4.5-4.1 3.6 1.2 5.3L12 14.6 7.4 17.3l1.2-5.3L4.5 8.4l5.4-.5L12 3z" stroke-linejoin="round" /></svg>
+          </template>
+          <span v-if="skill.disableModelInvocation" class="tag">{{ t('settings.skills.slashOnly') }}</span>
+          <span class="listing-desc">{{ skill.description }}</span>
+          <template #actions>
+            <button type="button" class="switch sm" role="switch" :class="{ on: isSkillEnabled(skill.name) }" :aria-checked="isSkillEnabled(skill.name)" :aria-label="t('settings.skills.toggleAria', { name: skill.name })" @click="toggleSkill(skill.name)"><span class="knob" /></button>
+          </template>
+        </ListingRow>
+      </div>
+    </section>
+  </section>
+</template>
+
+<style scoped src="../settings.css"></style>
diff --git a/apps/pythinker-web/src/components/settings/pages/SubagentsPage.vue b/apps/pythinker-web/src/components/settings/pages/SubagentsPage.vue
new file mode 100644
index 000000000..388255d13
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/pages/SubagentsPage.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import type { AppSubagent } from '../../../api/types';
+import ListingRow from '../ListingRow.vue';
+
+defineProps<{ subagents?: AppSubagent[] }>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <section id="settings-panel-subagents" class="panel" role="tabpanel" aria-labelledby="settings-tab-subagents">
+    <section class="sec">
+      <h2 class="page-title">{{ t('settings.subagents.title') }}</h2>
+      <p class="sec-note">{{ t('settings.subagents.note') }}</p>
+      <p v-if="(subagents?.length ?? 0) === 0" class="sec-empty">{{ t('settings.subagents.empty') }}</p>
+      <div v-else class="listing">
+        <ListingRow v-for="agent in subagents" :key="agent.name" :name="agent.name" mono>
+          <template #glyph>
+            <svg class="listing-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="4" y="8" width="16" height="11" rx="3" /><path d="M12 4v4M9 13h.01M15 13h.01" stroke-linecap="round" /></svg>
+          </template>
+          <span class="tag">{{ agent.source }}</span>
+          <span class="tag">{{ t('settings.subagents.tools', { count: agent.tools.length }) }}</span>
+          <span v-if="agent.effort" class="tag">{{ agent.effort }}</span>
+          <span v-if="agent.model" class="listing-meta">{{ agent.model }}</span>
+          <template v-if="agent.description" #detail>
+            <p class="listing-desc listing-indent">{{ agent.description }}</p>
+          </template>
+        </ListingRow>
+      </div>
+    </section>
+  </section>
+</template>
+
+<style scoped src="../settings.css"></style>
diff --git a/apps/pythinker-web/src/components/settings/pages/UsagePage.vue b/apps/pythinker-web/src/components/settings/pages/UsagePage.vue
new file mode 100644
index 000000000..329da9cd8
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/pages/UsagePage.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { AppSession } from '../../../api/types';
+import { formatTokens } from '../../../lib/formatTokens';
+import ListingRow from '../ListingRow.vue';
+
+const props = defineProps<{ sessions?: AppSession[] }>();
+
+const { t } = useI18n();
+
+const usageStats = computed(() => {
+  const sessions = props.sessions ?? [];
+  let tokens = 0;
+  let turns = 0;
+  let cost = 0;
+  for (const session of sessions) {
+    tokens += session.usage.inputTokens + session.usage.outputTokens;
+    turns += session.usage.turnCount;
+    cost += session.usage.totalCostUsd;
+  }
+  return {
+    tokens: formatTokens(tokens),
+    sessions: String(sessions.length),
+    turns: String(turns),
+    cost: `$${cost.toFixed(2)}`,
+  };
+});
+
+const usageByModel = computed(() => {
+  const byModel = new Map<string, number>();
+  let total = 0;
+  for (const session of props.sessions ?? []) {
+    const used = session.usage.inputTokens + session.usage.outputTokens;
+    if (used === 0 || session.model === '') continue;
+    byModel.set(session.model, (byModel.get(session.model) ?? 0) + used);
+    total += used;
+  }
+  if (total === 0) return [];
+  return [...byModel.entries()]
+    .toSorted((a, b) => b[1] - a[1])
+    .map(([model, used]) => ({ model, share: `${Math.round((used / total) * 100)}%` }));
+});
+</script>
+
+<template>
+  <section id="settings-panel-usage" class="panel" role="tabpanel" aria-labelledby="settings-tab-usage">
+    <section class="sec">
+      <h2 class="page-title">{{ t('settings.usage.title') }}</h2>
+      <p class="sec-note">{{ t('settings.usage.note') }}</p>
+      <div class="stat-grid">
+        <div class="stat-card"><span class="stat-label">{{ t('settings.usage.tokens') }}</span><span class="stat-value">{{ usageStats.tokens }}</span></div>
+        <div class="stat-card"><span class="stat-label">{{ t('settings.usage.sessions') }}</span><span class="stat-value">{{ usageStats.sessions }}</span></div>
+        <div class="stat-card"><span class="stat-label">{{ t('settings.usage.turns') }}</span><span class="stat-value">{{ usageStats.turns }}</span></div>
+        <div class="stat-card"><span class="stat-label">{{ t('settings.usage.cost') }}</span><span class="stat-value">{{ usageStats.cost }}</span></div>
+      </div>
+      <h4 class="listing-head">{{ t('settings.usage.byModel') }}</h4>
+      <p v-if="usageByModel.length === 0" class="sec-empty">{{ t('settings.usage.empty') }}</p>
+      <div v-else class="listing">
+        <ListingRow v-for="entry in usageByModel" :key="entry.model" :name="entry.model">
+          <span class="listing-meta">{{ entry.share }}</span>
+          <template #detail>
+            <div class="usage-bar"><span :style="{ width: entry.share }" /></div>
+          </template>
+        </ListingRow>
+      </div>
+    </section>
+  </section>
+</template>
+
+<style scoped src="../settings.css"></style>
diff --git a/apps/pythinker-web/src/components/settings/settings.css b/apps/pythinker-web/src/components/settings/settings.css
new file mode 100644
index 000000000..3f4ffd2b5
--- /dev/null
+++ b/apps/pythinker-web/src/components/settings/settings.css
@@ -0,0 +1,260 @@
+.panel { display: block; }
+.sec { padding: 12px 0; border-bottom: 1px solid var(--line); }
+.sec:last-child { border-bottom: none; }
+.sec-title {
+  margin: 0 0 10px;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: calc(var(--ui-font-size) - 3px);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.sec-note {
+  margin: -4px 0 12px;
+  color: var(--muted);
+  font-size: calc(var(--ui-font-size) - 2px);
+}
+.sec-empty {
+  margin: 0;
+  color: var(--faint);
+  font-size: calc(var(--ui-font-size) - 1px);
+}
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 34px;
+  padding: 3px 0;
+}
+.rlabel {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: calc(var(--ui-font-size) - 0.5px);
+}
+.rvalue {
+  max-width: 60%;
+  overflow: hidden;
+  color: var(--muted);
+  font-family: var(--sans);
+  font-size: calc(var(--ui-font-size) - 1.5px);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rvalue.mono { font-family: var(--mono); font-size: var(--ui-font-size-xs); }
+.hint { color: var(--faint); font-family: var(--sans); font-size: calc(var(--ui-font-size) - 3px); }
+.act {
+  padding: 6px 12px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: calc(var(--ui-font-size) - 1.5px);
+  cursor: pointer;
+}
+.act:hover { background: var(--soft); border-color: var(--bd); }
+.act.signin { background: var(--blue); color: var(--bg); border-color: var(--blue); }
+.act.signin:hover { background: var(--blue2); }
+.switch {
+  position: relative;
+  flex: none;
+  width: 40px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--panel2);
+  cursor: pointer;
+  transition: background 0.16s;
+}
+.switch.on { background: var(--blue); border-color: var(--blue); }
+.switch:disabled { opacity: 0.5; cursor: not-allowed; }
+.knob {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--bg);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  transition: transform 0.16s;
+}
+.switch.on .knob { transform: translateX(18px); }
+.switch.sm { width: 30px; height: 17px; }
+.switch.sm .knob { width: 13px; height: 13px; }
+.switch.sm.on .knob { transform: translateX(13px); }
+.tag {
+  flex: none;
+  padding: 1px 6px;
+  border-radius: 5px;
+  background: var(--soft);
+  color: var(--muted);
+  font-size: calc(var(--ui-font-size) - 3px);
+}
+.dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--faint);
+}
+.dot.s-connected { background: var(--ok); }
+.dot.s-connecting { background: var(--warn); }
+.dot.s-error { background: var(--err); }
+.page-title {
+  margin: 0 0 6px;
+  color: var(--ink);
+  font-size: calc(var(--ui-font-size) + 10px);
+  font-weight: 700;
+}
+.page-search {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0 0 12px;
+  padding: 7px 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: var(--ui-font-size);
+}
+.listing-count {
+  margin: 0 0 8px;
+  color: var(--faint);
+  font-size: calc(var(--ui-font-size) - 2px);
+}
+.listing { display: flex; flex-direction: column; gap: 2px; }
+.listing-head {
+  margin: 14px 0 6px;
+  color: var(--muted);
+  font-size: calc(var(--ui-font-size) - 2px);
+  font-weight: 600;
+}
+/* Rows are flat rather than carded: the leading glyph, the name and the right
+   action cluster carry the structure, so a border would only add noise. */
+.listing-row {
+  display: flex;
+  flex-direction: column;
+  padding: 5px 0;
+}
+.listing-top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+/* Only the content fades when an entry is off — the switch that turns it back
+   on has to stay at full contrast. */
+.listing-row.off .listing-main { opacity: 0.5; }
+.listing-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+.row-actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 4px;
+}
+.listing-glyph {
+  flex: none;
+  width: 15px;
+  height: 15px;
+  color: var(--faint);
+}
+.listing-name {
+  flex: none;
+  font-weight: 500;
+  color: var(--ink);
+}
+.listing-meta {
+  flex: none;
+  font-size: calc(var(--ui-font-size) - 2px);
+  color: var(--faint);
+}
+.listing-desc,
+.listing-path,
+.listing-error {
+  margin: 2px 0 0;
+  font-size: calc(var(--ui-font-size) - 2px);
+  color: var(--muted);
+}
+/* Inside a row the description shares the line with the name, so it truncates
+   instead of wrapping and pushes the meta text to the right edge. */
+.listing-main .listing-desc {
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--faint);
+}
+.listing-main .listing-meta { margin-left: auto; }
+.listing-path {
+  padding-left: 27px;
+  color: var(--faint);
+  word-break: break-all;
+}
+.listing-error { padding-left: 27px; }
+.listing-indent { padding-left: 27px; }
+
+/* Ghost icon button for the per-row actions — no chrome until hover. */
+.icon-btn {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--faint);
+  cursor: pointer;
+}
+.icon-btn svg { width: 15px; height: 15px; }
+.icon-btn:hover { background: var(--soft); color: var(--ink); }
+.listing-error {
+  color: var(--err);
+}
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
+}
+.stat-label { color: var(--muted); font-size: calc(var(--ui-font-size) - 2px); }
+.stat-value { color: var(--ink); font-size: calc(var(--ui-font-size) + 8px); font-weight: 700; }
+.usage-bar {
+  height: 4px;
+  margin-top: 6px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--line2);
+}
+.usage-bar span { display: block; height: 100%; background: var(--blue); }
+.mono { font-family: var(--mono); }
+
+@media (max-width: 640px) {
+  .row { align-items: flex-start; flex-direction: column; }
+}
diff --git a/apps/pythinker-web/src/composables/useSettingsNav.ts b/apps/pythinker-web/src/composables/useSettingsNav.ts
new file mode 100644
index 000000000..3c1f49e37
--- /dev/null
+++ b/apps/pythinker-web/src/composables/useSettingsNav.ts
@@ -0,0 +1,68 @@
+import { shallowRef, toValue, type MaybeRefOrGetter } from 'vue';
+
+export type SettingsTab =
+  | 'general'
+  | 'agent'
+  | 'skills'
+  | 'connectors'
+  | 'plugins'
+  | 'subagents'
+  | 'hooks'
+  | 'usage'
+  | 'advanced'
+  | 'experimental';
+
+export const tabGroups: Array<{
+  titleKey: string;
+  tabs: Array<{ id: SettingsTab; labelKey: string }>;
+}> = [
+  {
+    titleKey: 'settings.groups.basics',
+    tabs: [
+      { id: 'general', labelKey: 'settings.tabs.general' },
+      { id: 'agent', labelKey: 'settings.tabs.agent' },
+    ],
+  },
+  {
+    titleKey: 'settings.groups.capabilities',
+    tabs: [
+      { id: 'plugins', labelKey: 'settings.tabs.plugins' },
+      { id: 'skills', labelKey: 'settings.tabs.skills' },
+      { id: 'subagents', labelKey: 'settings.tabs.subagents' },
+      { id: 'connectors', labelKey: 'settings.tabs.connectors' },
+      { id: 'hooks', labelKey: 'settings.tabs.hooks' },
+    ],
+  },
+  {
+    titleKey: 'settings.groups.data',
+    tabs: [
+      { id: 'usage', labelKey: 'settings.tabs.usage' },
+      { id: 'advanced', labelKey: 'settings.tabs.advanced' },
+      { id: 'experimental', labelKey: 'settings.tabs.experimental' },
+    ],
+  },
+];
+
+type UseSettingsNavOptions = {
+  counts: {
+    connectors: MaybeRefOrGetter<number>;
+    plugins: MaybeRefOrGetter<number>;
+    subagents: MaybeRefOrGetter<number>;
+  };
+  onLoadConnectors: () => void;
+  onLoadPlugins: () => void;
+  onLoadSubagents: () => void;
+};
+
+export function useSettingsNav(options: UseSettingsNavOptions) {
+  const activeTab = shallowRef<SettingsTab>('general');
+
+  function setTab(tab: SettingsTab): void {
+    if (tab === 'connectors' && toValue(options.counts.connectors) === 0) options.onLoadConnectors();
+    if (tab === 'plugins' && toValue(options.counts.plugins) === 0) options.onLoadPlugins();
+    if (tab === 'subagents' && toValue(options.counts.subagents) === 0) options.onLoadSubagents();
+    activeTab.value = tab;
+  }
+
+  return { activeTab, setTab };
+}
diff --git a/apps/pythinker-web/src/i18n/locales/en/settings.ts b/apps/pythinker-web/src/i18n/locales/en/settings.ts
index 0fa9be942..c880e8cf7 100644
--- a/apps/pythinker-web/src/i18n/locales/en/settings.ts
+++ b/apps/pythinker-web/src/i18n/locales/en/settings.ts
@@ -1,5 +1,7 @@
 export default {
   title: 'Settings',
+  /** Sidebar control that leaves the settings route and restores the session list. */
+  backToSessions: 'Back to sessions',
   groups: {
     basics: 'Basics',
     capabilities: 'Agent capabilities',
diff --git a/apps/pythinker-web/test/settings-dialog.test.ts b/apps/pythinker-web/test/settings-dialog.test.ts
deleted file mode 100644
index cb5fef7fd..000000000
--- a/apps/pythinker-web/test/settings-dialog.test.ts
+++ /dev/null
@@ -1,499 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import { createI18n } from 'vue-i18n';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import SettingsDialog from '../src/components/SettingsDialog.vue';
-import enSettings from '../src/i18n/locales/en/settings';
-import type { AppConfig, AppConnector, AppModel, AppSkill } from '../src/api/types';
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      settings: enSettings,
-      theme: {
-        label: 'Theme',
-        modern: 'Modern',
-        pythinker: 'Pythinker',
-        colorSchemeLabel: 'Color scheme',
-        light: 'Light',
-        dark: 'Dark',
-        system: 'System',
-      },
-      sidebar: {
-        daemon: 'Daemon',
-        language: 'Language',
-        notSignedIn: 'Not signed in',
-        signIn: 'Sign in',
-        signOut: 'Sign out',
-      },
-      onboarding: { reopen: 'Open onboarding' },
-      newSession: { close: 'Close' },
-    },
-  },
-  missingWarn: false,
-  fallbackWarn: false,
-});
-
-const config: AppConfig = {
-  providers: {
-    pythinker: {
-      type: 'pythoughts',
-      defaultModel: 'pythinker/k2',
-      hasApiKey: true,
-    },
-    openai: {
-      type: 'openai',
-      hasApiKey: false,
-    },
-  },
-  defaultModel: 'pythinker/k2',
-  models: {
-    'pythinker/k2': { provider: 'pythinker', model: 'k2' },
-    'openai/gpt-5': { provider: 'openai', model: 'gpt-5' },
-  },
-  defaultPermissionMode: 'manual',
-  defaultThinking: true,
-  defaultPlanMode: false,
-  mergeAllAvailableSkills: false,
-  telemetry: true,
-  raw: { secret: 'must-not-render' },
-};
-
-const models: AppModel[] = [
-  {
-    id: 'pythinker/k2',
-    provider: 'pythinker',
-    model: 'k2',
-    displayName: 'Pythinker K2',
-    maxContextSize: 128000,
-  },
-  {
-    id: 'openai/gpt-5',
-    provider: 'openai',
-    model: 'gpt-5',
-    displayName: 'GPT-5',
-    maxContextSize: 256000,
-  },
-];
-
-const skills: AppSkill[] = [
-  { name: 'gen-changesets', description: 'Write the changesets for a PR', source: 'project', path: '.pythinker/skills/gen-changesets' },
-  { name: 'brainstorm', description: 'Explore a problem first', source: 'builtin' },
-  { name: 'archive', description: 'Archive a session', source: 'builtin', disableModelInvocation: true },
-];
-
-const connectors: AppConnector[] = [
-  { id: 'mcp_1', name: 'context7', transport: 'http', status: 'connected', toolCount: 2 },
-  { id: 'mcp_2', name: 'tavily', transport: 'stdio', status: 'error', toolCount: 0, lastError: 'spawn ENOENT' },
-];
-
-function mountDialog(extraProps: Record<string, unknown> = {}) {
-  return mount(SettingsDialog, {
-    props: {
-      theme: 'modern',
-      colorScheme: 'system',
-      uiFontSize: 15,
-      authReady: true,
-      accountModel: 'pythinker/k2',
-      notify: true,
-      notifyPermission: 'granted',
-      betaToc: false,
-      config,
-      models,
-      configSaving: false,
-      ...extraProps,
-    },
-    global: {
-      plugins: [i18n],
-    },
-  });
-}
-
-async function openTab(wrapper: ReturnType<typeof mountDialog>, label: string): Promise<void> {
-  const tab = wrapper.findAll('.tab').find((button) => button.text() === label);
-  await tab!.trigger('click');
-}
-
-afterEach(() => {
-  document.body.innerHTML = '';
-  delete window.pythinkerDesktop;
-});
-
-describe('SettingsDialog tabs', () => {
-  it('renders side tabs and switches panels', async () => {
-    const wrapper = mountDialog();
-
-    expect(wrapper.text()).toContain('General');
-
-    const generalTab = wrapper.findAll('.tab').find((button) => button.text() === 'General');
-    const agentTab = wrapper.findAll('.tab').find((button) => button.text() === 'Agent');
-    const advancedTab = wrapper.findAll('.tab').find((button) => button.text() === 'Advanced');
-    const experimentalTab = wrapper.findAll('.tab').find((button) => button.text() === 'Experimental');
-
-    expect(generalTab!.classes('on')).toBe(true);
-    expect(agentTab!.classes('on')).toBe(false);
-
-    await agentTab!.trigger('click');
-    expect(generalTab!.classes('on')).toBe(false);
-    expect(agentTab!.classes('on')).toBe(true);
-
-    const agentPanel = wrapper.find('#settings-panel-agent');
-    expect(agentPanel.isVisible()).toBe(true);
-    const generalPanel = wrapper.find('#settings-panel-general');
-    expect(generalPanel.isVisible()).toBe(false);
-
-    await advancedTab!.trigger('click');
-    expect(advancedTab!.classes('on')).toBe(true);
-    expect(agentTab!.classes('on')).toBe(false);
-
-    await experimentalTab!.trigger('click');
-    expect(experimentalTab!.classes('on')).toBe(true);
-    expect(advancedTab!.classes('on')).toBe(false);
-  });
-});
-
-describe('SettingsDialog config controls', () => {
-  it('renders redacted daemon config and emits partial config patches', async () => {
-    const wrapper = mountDialog();
-
-    const agentTab = wrapper.findAll('.tab').find((button) => button.text() === 'Agent');
-    await agentTab!.trigger('click');
-
-    expect(wrapper.text()).toContain('Agent defaults');
-    expect(wrapper.text()).toContain('Pythinker K2');
-    expect(wrapper.text()).toContain('Credential configured');
-    expect(wrapper.text()).toContain('Missing credential');
-    expect(wrapper.text()).not.toContain('must-not-render');
-
-    await wrapper.find('.select-field').setValue('openai/gpt-5');
-    expect(wrapper.emitted('updateConfig')?.[0]?.[0]).toEqual({ defaultModel: 'openai/gpt-5' });
-
-    const auto = wrapper.findAll('.opt').find((button) => button.text() === 'Auto');
-    await auto!.trigger('click');
-    expect(wrapper.emitted('updateConfig')?.[1]?.[0]).toEqual({ defaultPermissionMode: 'auto' });
-
-    const planRow = wrapper.findAll('.row').find((row) => row.text().includes('Plan mode by default'));
-    await planRow!.find('button.switch').trigger('click');
-    expect(wrapper.emitted('updateConfig')?.[2]?.[0]).toEqual({ defaultPlanMode: true });
-  });
-
-  it('groups default model options by provider', async () => {
-    const wrapper = mountDialog();
-
-    const agentTab = wrapper.findAll('.tab').find((button) => button.text() === 'Agent');
-    await agentTab!.trigger('click');
-
-    const groups = wrapper.findAll('optgroup');
-    expect(groups.length).toBe(2);
-    expect(groups[0]!.attributes('label')).toBe('openai');
-    expect(groups[1]!.attributes('label')).toBe('pythinker');
-
-    const openaiOptions = groups[0]!.findAll('option');
-    expect(openaiOptions.some((o) => o.attributes('value') === 'openai/gpt-5')).toBe(true);
-
-    const pythinkerOptions = groups[1]!.findAll('option');
-    expect(pythinkerOptions.some((o) => o.attributes('value') === 'pythinker/k2')).toBe(true);
-  });
-});
-
-describe('SettingsDialog desktop updates', () => {
-  it('renders desktop update controls and checks for updates', async () => {
-    const checkForUpdates = vi.fn().mockResolvedValue(undefined);
-    window.pythinkerDesktop = {
-      platform: 'darwin',
-      getUpdateState: vi.fn().mockResolvedValue({ status: 'idle', autoUpdate: true }),
-      setAutoUpdate: vi.fn().mockResolvedValue({ status: 'idle', autoUpdate: true }),
-      checkForUpdates,
-      quitAndInstall: vi.fn().mockResolvedValue(undefined),
-      onUpdateState: vi.fn().mockReturnValue(() => undefined),
-    };
-
-    const wrapper = mountDialog();
-
-    expect(wrapper.text()).toContain('Desktop app');
-    const checkButton = wrapper.findAll('button').find((button) => button.text() === 'Check for updates');
-    expect(checkButton).toBeDefined();
-
-    await checkButton!.trigger('click');
-    expect(checkForUpdates).toHaveBeenCalledOnce();
-  });
-
-  it('hides desktop update controls outside the desktop app', () => {
-    const wrapper = mountDialog();
-
-    expect(wrapper.text()).not.toContain('Desktop app');
-  });
-});
-
-describe('SettingsDialog dialog focus', () => {
-  it('is a modal that takes focus on open and restores it on close', async () => {
-    const opener = document.createElement('button');
-    document.body.append(opener);
-    opener.focus();
-    expect(document.activeElement).toBe(opener);
-
-    const wrapper = mount(SettingsDialog, {
-      props: {
-        theme: 'modern',
-        colorScheme: 'system',
-        uiFontSize: 15,
-        authReady: true,
-        accountModel: 'pythinker/k2',
-        notify: true,
-        notifyPermission: 'granted',
-        betaToc: false,
-        config,
-        models,
-        configSaving: false,
-      },
-      global: { plugins: [i18n] },
-      attachTo: document.body,
-    });
-
-    const dialog = wrapper.find('.dialog');
-    expect(dialog.attributes('aria-modal')).toBe('true');
-
-    await nextTick();
-    // Opening moves focus into the dialog.
-    expect(document.activeElement).toBe(dialog.element);
-
-    wrapper.unmount();
-    await nextTick();
-    // Closing returns focus to the opener.
-    expect(document.activeElement).toBe(opener);
-
-    opener.remove();
-  });
-});
-
-describe('SettingsDialog skills page', () => {
-  it('groups skills by source and marks the slash-only ones', async () => {
-    const wrapper = mountDialog({ skills });
-    await openTab(wrapper, 'Skills');
-
-    const panel = wrapper.get('#settings-panel-skills');
-    expect(panel.findAll('.listing-head').map((head) => head.text())).toEqual([
-      'builtin',
-      'project',
-    ]);
-    // Sorted by name inside each group.
-    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual([
-      'archive',
-      'brainstorm',
-      'gen-changesets',
-    ]);
-    expect(panel.findAll('.tag').map((tag) => tag.text())).toEqual(['slash only']);
-  });
-
-  it('says so when no skill is available', async () => {
-    const wrapper = mountDialog();
-    await openTab(wrapper, 'Skills');
-
-    expect(wrapper.get('#settings-panel-skills').text()).toContain('No skills are available');
-  });
-});
-
-describe('SettingsDialog connectors page', () => {
-  it('loads the connectors the first time the page is opened', async () => {
-    const wrapper = mountDialog();
-    await openTab(wrapper, 'Connectors');
-
-    expect(wrapper.emitted('loadConnectors')).toHaveLength(1);
-
-    await openTab(wrapper, 'General');
-    await openTab(wrapper, 'Connectors');
-    expect(wrapper.emitted('loadConnectors')).toHaveLength(2);
-  });
-
-  it('does not reload when connectors are already known', async () => {
-    const wrapper = mountDialog({ connectors });
-    await openTab(wrapper, 'Connectors');
-
-    expect(wrapper.emitted('loadConnectors')).toBeUndefined();
-  });
-
-  it('shows each server status and restarts one on demand', async () => {
-    const wrapper = mountDialog({ connectors });
-    await openTab(wrapper, 'Connectors');
-
-    const panel = wrapper.get('#settings-panel-connectors');
-    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual([
-      'context7',
-      'tavily',
-    ]);
-    expect(panel.findAll('.dot').map((dot) => dot.classes().join(' '))).toEqual([
-      'dot s-connected',
-      'dot s-error',
-    ]);
-    expect(panel.text()).toContain('spawn ENOENT');
-    expect(panel.text()).toContain('2 tools');
-
-    // Restart is a ghost icon button in the row's action cluster.
-    await panel.findAll('.icon-btn')[1]!.trigger('click');
-    expect(wrapper.emitted('restartConnector')).toEqual([['mcp_2']]);
-  });
-});
-
-describe('SettingsDialog hooks page', () => {
-  it('groups hooks by event and shows what each one runs', async () => {
-    const wrapper = mountDialog({
-      config: {
-        ...config,
-        hooks: [
-          { event: 'PreToolUse', matcher: 'Bash', type: 'command', command: 'block-no-verify.sh' },
-          { event: 'PreToolUse', type: 'command', command: 'observe.sh pre', timeout: 30 },
-          { event: 'SessionStart', type: 'command', command: 'agent-state.sh', async: true },
-        ],
-      },
-    });
-    await openTab(wrapper, 'Hooks');
-
-    const panel = wrapper.get('#settings-panel-hooks');
-    expect(panel.findAll('.listing-head').map((head) => head.text())).toEqual([
-      'PreToolUse',
-      'SessionStart',
-    ]);
-    // The matcher labels the row; a hook without one is the catch-all.
-    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual([
-      'Bash',
-      '*',
-      '*',
-    ]);
-    expect(panel.text()).toContain('block-no-verify.sh');
-    expect(panel.text()).toContain('30s timeout');
-    expect(panel.text()).toContain('async');
-  });
-
-  it('says so when no hook is configured', async () => {
-    const wrapper = mountDialog();
-    await openTab(wrapper, 'Hooks');
-
-    expect(wrapper.get('#settings-panel-hooks').text()).toContain('No hooks are configured');
-  });
-});
-
-describe('SettingsDialog usage page', () => {
-  const sessions = [
-    {
-      id: 'ses_1',
-      model: 'Pythinker K2',
-      usage: { inputTokens: 600, outputTokens: 400, turnCount: 3, totalCostUsd: 1.5 },
-    },
-    {
-      id: 'ses_2',
-      model: 'GPT-5',
-      usage: { inputTokens: 800, outputTokens: 200, turnCount: 2, totalCostUsd: 0.75 },
-    },
-  ] as unknown as Parameters<typeof mountDialog>[0]['sessions'];
-
-  it('totals tokens, sessions, turns and cost', async () => {
-    const wrapper = mountDialog({ sessions });
-    await openTab(wrapper, 'Usage stats');
-
-    const values = wrapper.get('#settings-panel-usage').findAll('.stat-value').map((v) => v.text());
-    expect(values).toEqual(['2k', '2', '5', '$2.25']);
-  });
-
-  it('splits the token share per model, largest first', async () => {
-    const wrapper = mountDialog({ sessions });
-    await openTab(wrapper, 'Usage stats');
-
-    const panel = wrapper.get('#settings-panel-usage');
-    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual([
-      'Pythinker K2',
-      'GPT-5',
-    ]);
-    expect(panel.findAll('.listing-meta').map((meta) => meta.text())).toEqual(['50%', '50%']);
-  });
-});
-
-describe('SettingsDialog plugins page', () => {
-  const plugins = [
-    {
-      id: 'plg_1',
-      displayName: 'Cloudflare',
-      version: '1.2.0',
-      enabled: true,
-      state: 'loaded',
-      skillCount: 3,
-      mcpServerCount: 2,
-      hasErrors: false,
-      source: 'github',
-    },
-    {
-      id: 'plg_2',
-      displayName: 'Designer',
-      enabled: false,
-      state: 'disabled',
-      skillCount: 1,
-      mcpServerCount: 0,
-      hasErrors: true,
-      source: 'local',
-    },
-  ];
-
-  it('loads plugins the first time the page is opened', async () => {
-    const wrapper = mountDialog();
-    await openTab(wrapper, 'Plugins');
-
-    expect(wrapper.emitted('loadPlugins')).toHaveLength(1);
-  });
-
-  it('shows each plugin with its counts and toggles one', async () => {
-    const wrapper = mountDialog({ plugins });
-    await openTab(wrapper, 'Plugins');
-
-    const panel = wrapper.get('#settings-panel-plugins');
-    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual([
-      'Cloudflare',
-      'Designer',
-    ]);
-    expect(panel.text()).toContain('3 skills · 2 servers');
-    expect(panel.text()).toContain('reported errors');
-    // The disabled plugin's row recedes and its switch is off.
-    expect(panel.findAll('.listing-row')[1]!.classes()).toContain('off');
-
-    await panel.findAll('.switch')[1]!.trigger('click');
-    expect(wrapper.emitted('setPluginEnabled')).toEqual([
-      [{ pluginId: 'plg_2', enabled: true }],
-    ]);
-  });
-});
-
-describe('SettingsDialog subagents page', () => {
-  const subagents = [
-    {
-      name: 'Explore',
-      description: 'Read-only search agent',
-      source: 'built-in' as const,
-      tools: ['Read', 'Grep', 'Glob'],
-      model: 'Pythinker K2',
-      effort: 'max',
-    },
-  ];
-
-  it('loads subagents the first time the page is opened', async () => {
-    const wrapper = mountDialog();
-    await openTab(wrapper, 'Subagents');
-
-    expect(wrapper.emitted('loadSubagents')).toHaveLength(1);
-  });
-
-  it('shows the profile source, tool count, model and effort', async () => {
-    const wrapper = mountDialog({ subagents });
-    await openTab(wrapper, 'Subagents');
-
-    const panel = wrapper.get('#settings-panel-subagents');
-    expect(panel.get('.listing-name').text()).toBe('Explore');
-    expect(panel.findAll('.tag').map((tag) => tag.text())).toEqual([
-      'built-in',
-      '3 tools',
-      'max',
-    ]);
-    expect(panel.text()).toContain('Pythinker K2');
-    expect(panel.text()).toContain('Read-only search agent');
-  });
-});
diff --git a/apps/pythinker-web/test/settings-pane.test.ts b/apps/pythinker-web/test/settings-pane.test.ts
new file mode 100644
index 000000000..18cf47b3e
--- /dev/null
+++ b/apps/pythinker-web/test/settings-pane.test.ts
@@ -0,0 +1,436 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { createI18n } from 'vue-i18n';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import type { AppConfig, AppConnector, AppModel, AppSession, AppSkill } from '../src/api/types';
+import SettingsNav from '../src/components/settings/SettingsNav.vue';
+import SettingsPane from '../src/components/settings/SettingsPane.vue';
+import { messages } from '../src/i18n/locales';
+import { useSettingsNav, type SettingsTab } from '../src/composables/useSettingsNav';
+
+vi.mock('../src/composables/useIsMobile', async () => {
+  const { ref: vueRef } = await import('vue');
+  return { useIsMobile: () => vueRef(false) };
+});
+
+vi.mock('../src/composables/useIsDark', async () => {
+  const { ref: vueRef } = await import('vue');
+  return { useIsDark: () => vueRef(false) };
+});
+
+vi.mock('../src/composables/usePythinkerWebClient', async () => {
+  const { ref: vueRef } = await import('vue');
+  const arrayKeys = [
+    'activationBadges', 'changes', 'connectors', 'dynamicWorkflows', 'models', 'pendingApprovals',
+    'plugins', 'providers', 'questions', 'queued', 'recentCwds', 'sessions', 'sessionsForView',
+    'sessionsWithUsage', 'sideChatTurns', 'skills', 'starredModelIds', 'subagents', 'tasks', 'todos',
+    'turns', 'warnings', 'workspaceGroups', 'workspacesView',
+  ];
+  const recordKeys = ['attentionBySession', 'attentionByWorkspace', 'pendingBySession', 'unreadBySession'];
+  const client: Record<string, unknown> = {
+    activePullRequest: vueRef(null),
+    activeSessionId: vueRef(''),
+    activeWorkspaceId: vueRef(null),
+    activity: vueRef('idle'),
+    authReady: vueRef(true),
+    betaToc: vueRef(false),
+    colorScheme: vueRef('system'),
+    compaction: vueRef(null),
+    config: vueRef(null),
+    connectorsLoading: vueRef(false),
+    defaultModel: vueRef(null),
+    dynamicWorkflowMode: vueRef(false),
+    fastSpinner: vueRef(false),
+    fileDiff: vueRef(null),
+    fileDiffLoading: vueRef(false),
+    gitDiffStats: vueRef(null),
+    gitInfo: vueRef(null),
+    goal: vueRef(null),
+    goalMode: vueRef(false),
+    initialized: vueRef(true),
+    isSending: vueRef(false),
+    notifyOnComplete: vueRef(false),
+    notifyPermission: vueRef('default'),
+    onboarded: vueRef(true),
+    permission: vueRef('manual'),
+    planMode: vueRef(false),
+    selectedDiffPath: vueRef(null),
+    sessionCost: vueRef(0),
+    sessionLoading: vueRef(false),
+    sideChatRunning: vueRef(false),
+    sideChatSending: vueRef(false),
+    sideChatVisible: vueRef(false),
+    status: vueRef({ branch: '', cwd: '/workspace', ctxMax: 0, ctxUsed: 0, model: '', modelId: '', permission: 'manual' }),
+    theme: vueRef('modern'),
+    thinking: vueRef('off'),
+    uiFontSize: vueRef(15),
+    visibleWorkspace: vueRef(null),
+    resolveImageUrl: vi.fn(),
+  };
+  for (const key of arrayKeys) client[key] = vueRef([]);
+  for (const key of recordKeys) client[key] = vueRef({});
+  return {
+    usePythinkerWebClient: () => new Proxy(client, {
+      get(target, property) {
+        if (property in target) return Reflect.get(target, property);
+        const method = vi.fn();
+        target[String(property)] = method;
+        return method;
+      },
+    }),
+  };
+});
+
+import App from '../src/App.vue';
+import ConversationPane from '../src/components/ConversationPane.vue';
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages,
+  missingWarn: false,
+  fallbackWarn: false,
+});
+
+const config: AppConfig = {
+  providers: {
+    pythinker: { type: 'pythoughts', defaultModel: 'pythinker/k2', hasApiKey: true },
+    openai: { type: 'openai', hasApiKey: false },
+  },
+  defaultModel: 'pythinker/k2',
+  models: {
+    'pythinker/k2': { provider: 'pythinker', model: 'k2' },
+    'openai/gpt-5': { provider: 'openai', model: 'gpt-5' },
+  },
+  defaultPermissionMode: 'manual',
+  defaultThinking: true,
+  defaultPlanMode: false,
+  mergeAllAvailableSkills: false,
+  telemetry: true,
+  raw: { secret: 'must-not-render' },
+};
+
+const models: AppModel[] = [
+  { id: 'pythinker/k2', provider: 'pythinker', model: 'k2', displayName: 'Pythinker K2', maxContextSize: 128000 },
+  { id: 'openai/gpt-5', provider: 'openai', model: 'gpt-5', displayName: 'GPT-5', maxContextSize: 256000 },
+];
+
+const skills: AppSkill[] = [
+  { name: 'gen-changesets', description: 'Write the changesets for a PR', source: 'project', path: '.pythinker/skills/gen-changesets' },
+  { name: 'brainstorm', description: 'Explore a problem first', source: 'builtin' },
+  { name: 'archive', description: 'Archive a session', source: 'builtin', disableModelInvocation: true },
+];
+
+const connectors: AppConnector[] = [
+  { id: 'mcp_1', name: 'context7', transport: 'http', status: 'connected', toolCount: 2 },
+  { id: 'mcp_2', name: 'tavily', transport: 'stdio', status: 'error', toolCount: 0, lastError: 'spawn ENOENT' },
+];
+
+function mountPane(activeTab: SettingsTab, extraProps: Record<string, unknown> = {}) {
+  return mount(SettingsPane, {
+    props: {
+      activeTab,
+      theme: 'modern',
+      colorScheme: 'system',
+      uiFontSize: 15,
+      authReady: true,
+      accountModel: 'pythinker/k2',
+      notify: true,
+      notifyPermission: 'granted',
+      betaToc: false,
+      config,
+      models,
+      configSaving: false,
+      ...extraProps,
+    },
+    global: { plugins: [i18n] },
+  });
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  delete window.pythinkerDesktop;
+});
+
+describe('settings navigation', () => {
+  it('renders the ten grouped tabs and emits a selected tab', async () => {
+    const wrapper = mount(SettingsNav, {
+      props: { activeTab: 'general' },
+      global: { plugins: [i18n] },
+    });
+
+    expect(wrapper.findAll('.tab')).toHaveLength(10);
+    expect(wrapper.findAll('.tab-group').map((group) => group.text())).toEqual([
+      'Basics',
+      'Agent capabilities',
+      'Data and statistics',
+    ]);
+    expect(wrapper.get('#settings-tab-general').classes()).toContain('on');
+
+    await wrapper.get('#settings-tab-agent').trigger('click');
+    expect(wrapper.emitted('select')).toEqual([['agent']]);
+    await wrapper.setProps({ activeTab: 'agent' });
+    expect(wrapper.get('#settings-tab-agent').attributes('aria-selected')).toBe('true');
+  });
+
+  it('renders only the active settings page without modal markup', async () => {
+    const wrapper = mountPane('general');
+
+    expect(wrapper.get('#settings-panel-general').isVisible()).toBe(true);
+    expect(wrapper.find('[role="dialog"]').exists()).toBe(false);
+    expect(wrapper.find('.backdrop').exists()).toBe(false);
+
+    await wrapper.setProps({ activeTab: 'agent' });
+    expect(wrapper.get('#settings-panel-general').attributes('style')).toContain('display: none');
+    expect(wrapper.get('#settings-panel-agent').isVisible()).toBe(true);
+  });
+
+  it('loads connectors each time the empty page is opened', () => {
+    const onLoadConnectors = vi.fn();
+    const { setTab } = useSettingsNav({
+      counts: { connectors: 0, plugins: 0, subagents: 0 },
+      onLoadConnectors,
+      onLoadPlugins: vi.fn(),
+      onLoadSubagents: vi.fn(),
+    });
+
+    setTab('connectors');
+    expect(onLoadConnectors).toHaveBeenCalledOnce();
+    setTab('general');
+    setTab('connectors');
+    expect(onLoadConnectors).toHaveBeenCalledTimes(2);
+  });
+
+  it('does not load connectors when they are already known', () => {
+    const onLoadConnectors = vi.fn();
+    const { setTab } = useSettingsNav({
+      counts: { connectors: 2, plugins: 0, subagents: 0 },
+      onLoadConnectors,
+      onLoadPlugins: vi.fn(),
+      onLoadSubagents: vi.fn(),
+    });
+
+    setTab('connectors');
+    expect(onLoadConnectors).not.toHaveBeenCalled();
+  });
+
+  it('loads plugins when the empty page is opened', () => {
+    const onLoadPlugins = vi.fn();
+    const { setTab } = useSettingsNav({
+      counts: { connectors: 0, plugins: 0, subagents: 0 },
+      onLoadConnectors: vi.fn(),
+      onLoadPlugins,
+      onLoadSubagents: vi.fn(),
+    });
+
+    setTab('plugins');
+    expect(onLoadPlugins).toHaveBeenCalledOnce();
+  });
+
+  it('loads subagents when the empty page is opened', () => {
+    const onLoadSubagents = vi.fn();
+    const { setTab } = useSettingsNav({
+      counts: { connectors: 0, plugins: 0, subagents: 0 },
+      onLoadConnectors: vi.fn(),
+      onLoadPlugins: vi.fn(),
+      onLoadSubagents,
+    });
+
+    setTab('subagents');
+    expect(onLoadSubagents).toHaveBeenCalledOnce();
+  });
+});
+
+describe('SettingsPane config controls', () => {
+  it('renders redacted daemon config and emits partial config patches', async () => {
+    const wrapper = mountPane('agent');
+
+    expect(wrapper.text()).toContain('Agent defaults');
+    expect(wrapper.text()).toContain('Pythinker K2');
+    expect(wrapper.text()).toContain('Credential configured');
+    expect(wrapper.text()).toContain('Missing credential');
+    expect(wrapper.text()).not.toContain('must-not-render');
+
+    await wrapper.find('.select-field').setValue('openai/gpt-5');
+    expect(wrapper.emitted('updateConfig')?.[0]?.[0]).toEqual({ defaultModel: 'openai/gpt-5' });
+    const auto = wrapper.findAll('.opt').find((button) => button.text() === 'Auto');
+    await auto!.trigger('click');
+    expect(wrapper.emitted('updateConfig')?.[1]?.[0]).toEqual({ defaultPermissionMode: 'auto' });
+    const planRow = wrapper.findAll('.row').find((row) => row.text().includes('Plan mode by default'));
+    await planRow!.find('button.switch').trigger('click');
+    expect(wrapper.emitted('updateConfig')?.[2]?.[0]).toEqual({ defaultPlanMode: true });
+  });
+
+  it('groups default model options by provider', () => {
+    const groups = mountPane('agent').findAll('optgroup');
+
+    expect(groups).toHaveLength(2);
+    expect(groups[0]!.attributes('label')).toBe('openai');
+    expect(groups[1]!.attributes('label')).toBe('pythinker');
+    expect(groups[0]!.findAll('option').some((option) => option.attributes('value') === 'openai/gpt-5')).toBe(true);
+    expect(groups[1]!.findAll('option').some((option) => option.attributes('value') === 'pythinker/k2')).toBe(true);
+  });
+});
+
+describe('SettingsPane desktop updates', () => {
+  it('renders desktop update controls and checks for updates', async () => {
+    const checkForUpdates = vi.fn().mockResolvedValue(undefined);
+    window.pythinkerDesktop = {
+      platform: 'darwin',
+      getUpdateState: vi.fn().mockResolvedValue({ status: 'idle', autoUpdate: true }),
+      setAutoUpdate: vi.fn().mockResolvedValue({ status: 'idle', autoUpdate: true }),
+      checkForUpdates,
+      quitAndInstall: vi.fn().mockResolvedValue(undefined),
+      onUpdateState: vi.fn().mockReturnValue(() => undefined),
+    };
+    const wrapper = mountPane('general');
+
+    expect(wrapper.text()).toContain('Desktop app');
+    const checkButton = wrapper.findAll('button').find((button) => button.text() === 'Check for updates');
+    await checkButton!.trigger('click');
+    expect(checkForUpdates).toHaveBeenCalledOnce();
+  });
+
+  it('hides desktop update controls outside the desktop app', () => {
+    expect(mountPane('general').text()).not.toContain('Desktop app');
+  });
+});
+
+describe('SettingsPane skills page', () => {
+  it('groups skills by source and marks the slash-only ones', () => {
+    const panel = mountPane('skills', { skills }).get('#settings-panel-skills');
+
+    expect(panel.findAll('.listing-head').map((head) => head.text())).toEqual(['builtin', 'project']);
+    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual(['archive', 'brainstorm', 'gen-changesets']);
+    expect(panel.findAll('.tag').map((tag) => tag.text())).toEqual(['slash only']);
+  });
+
+  it('says so when no skill is available', () => {
+    expect(mountPane('skills').get('#settings-panel-skills').text()).toContain('No skills are available');
+  });
+});
+
+describe('SettingsPane connectors page', () => {
+  it('shows each server status and restarts one on demand', async () => {
+    const wrapper = mountPane('connectors', { connectors });
+    const panel = wrapper.get('#settings-panel-connectors');
+
+    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual(['context7', 'tavily']);
+    expect(panel.findAll('.dot').map((dot) => dot.classes().join(' '))).toEqual(['dot s-connected', 'dot s-error']);
+    expect(panel.text()).toContain('spawn ENOENT');
+    expect(panel.text()).toContain('2 tools');
+    await panel.findAll('.icon-btn')[1]!.trigger('click');
+    expect(wrapper.emitted('restartConnector')).toEqual([['mcp_2']]);
+  });
+});
+
+describe('SettingsPane hooks page', () => {
+  it('groups hooks by event and shows what each one runs', () => {
+    const panel = mountPane('hooks', {
+      config: {
+        ...config,
+        hooks: [
+          { event: 'PreToolUse', matcher: 'Bash', type: 'command', command: 'block-no-verify.sh' },
+          { event: 'PreToolUse', type: 'command', command: 'observe.sh pre', timeout: 30 },
+          { event: 'SessionStart', type: 'command', command: 'agent-state.sh', async: true },
+        ],
+      },
+    }).get('#settings-panel-hooks');
+
+    expect(panel.findAll('.listing-head').map((head) => head.text())).toEqual(['PreToolUse', 'SessionStart']);
+    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual(['Bash', '*', '*']);
+    expect(panel.text()).toContain('block-no-verify.sh');
+    expect(panel.text()).toContain('30s timeout');
+    expect(panel.text()).toContain('async');
+  });
+
+  it('says so when no hook is configured', () => {
+    expect(mountPane('hooks').get('#settings-panel-hooks').text()).toContain('No hooks are configured');
+  });
+});
+
+describe('SettingsPane usage page', () => {
+  const sessions = [
+    { id: 'ses_1', model: 'Pythinker K2', usage: { inputTokens: 600, outputTokens: 400, turnCount: 3, totalCostUsd: 1.5 } },
+    { id: 'ses_2', model: 'GPT-5', usage: { inputTokens: 800, outputTokens: 200, turnCount: 2, totalCostUsd: 0.75 } },
+  ] as AppSession[];
+
+  it('totals tokens, sessions, turns and cost', () => {
+    const values = mountPane('usage', { sessions }).get('#settings-panel-usage').findAll('.stat-value').map((value) => value.text());
+    expect(values).toEqual(['2k', '2', '5', '$2.25']);
+  });
+
+  it('splits the token share per model, largest first', () => {
+    const panel = mountPane('usage', { sessions }).get('#settings-panel-usage');
+    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual(['Pythinker K2', 'GPT-5']);
+    expect(panel.findAll('.listing-meta').map((meta) => meta.text())).toEqual(['50%', '50%']);
+  });
+});
+
+describe('SettingsPane plugins page', () => {
+  const plugins = [
+    { id: 'plg_1', displayName: 'Cloudflare', version: '1.2.0', enabled: true, state: 'loaded', skillCount: 3, mcpServerCount: 2, hasErrors: false, source: 'github' },
+    { id: 'plg_2', displayName: 'Designer', enabled: false, state: 'disabled', skillCount: 1, mcpServerCount: 0, hasErrors: true, source: 'local' },
+  ];
+
+  it('shows each plugin with its counts and toggles one', async () => {
+    const wrapper = mountPane('plugins', { plugins });
+    const panel = wrapper.get('#settings-panel-plugins');
+
+    expect(panel.findAll('.listing-name').map((name) => name.text())).toEqual(['Cloudflare', 'Designer']);
+    expect(panel.text()).toContain('3 skills · 2 servers');
+    expect(panel.text()).toContain('reported errors');
+    expect(panel.findAll('.listing-row')[1]!.classes()).toContain('off');
+    await panel.findAll('.switch')[1]!.trigger('click');
+    expect(wrapper.emitted('setPluginEnabled')).toEqual([[{ pluginId: 'plg_2', enabled: true }]]);
+  });
+});
+
+describe('SettingsPane subagents page', () => {
+  const subagents = [{
+    name: 'Explore',
+    description: 'Read-only search agent',
+    source: 'built-in' as const,
+    tools: ['Read', 'Grep', 'Glob'],
+    model: 'Pythinker K2',
+    effort: 'max',
+  }];
+
+  it('shows the profile source, tool count, model and effort', () => {
+    const panel = mountPane('subagents', { subagents }).get('#settings-panel-subagents');
+    expect(panel.get('.listing-name').text()).toBe('Explore');
+    expect(panel.findAll('.tag').map((tag) => tag.text())).toEqual(['built-in', '3 tools', 'max']);
+    expect(panel.text()).toContain('Pythinker K2');
+    expect(panel.text()).toContain('Read-only search agent');
+  });
+});
+
+describe('desktop settings route', () => {
+  it('swaps the sidebar body and main content while settings is open', async () => {
+    const wrapper = shallowMount(App, {
+      global: {
+        plugins: [i18n],
+        stubs: { Sidebar: false, SettingsNav: false, SettingsPane: false },
+      },
+    });
+
+    expect(wrapper.find('.sessions').exists()).toBe(true);
+    expect(wrapper.findComponent(ConversationPane).exists()).toBe(true);
+
+    await wrapper.get('.side-foot .settings-row').trigger('click');
+    await nextTick();
+
+    expect(wrapper.find('.settings-tabs').exists()).toBe(true);
+    expect(wrapper.find('.sessions').exists()).toBe(false);
+    expect(wrapper.findComponent(SettingsPane).exists()).toBe(true);
+    expect(wrapper.findComponent(ConversationPane).exists()).toBe(false);
+
+    await wrapper.findAll('.sidebar-rail .rail-btn').at(-1)!.trigger('click');
+    await nextTick();
+
+    expect.soft(wrapper.find('.settings-tabs').exists()).toBe(false);
+    expect.soft(wrapper.find('.sessions').exists()).toBe(true);
+    expect.soft(wrapper.findComponent(ConversationPane).exists()).toBe(true);
+  });
+});

From 45431c55e3efac68af4c86d8837529bdc996563a Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 23:11:02 -0400
Subject: [PATCH 10/16] fix(web): leave the settings route on new session and
 move the gear
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New Session and Back to sessions both exit the route now — the sidebar shows
one body at a time, so starting a draft while the settings pane held the
content area left the new session invisible. The sessions-mode gear moves to
the trailing edge of the footer; the settings-mode back arrow keeps the
leading edge.
---
 apps/pythinker-web/src/App.vue                |  4 ++++
 apps/pythinker-web/src/components/Sidebar.vue |  8 ++++++-
 apps/pythinker-web/test/settings-pane.test.ts | 21 +++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/apps/pythinker-web/src/App.vue b/apps/pythinker-web/src/App.vue
index ec74b97da..85ab9eb39 100644
--- a/apps/pythinker-web/src/App.vue
+++ b/apps/pythinker-web/src/App.vue
@@ -880,6 +880,9 @@ function handleCloseAddWorkspace(): void {
 // right pane shows the onboarding composer. The session is only created when
 // the user sends the first message.
 function handleCreateSession(): void {
+  // Starting a session leaves the settings route — the new draft has to be
+  // visible, and the content area can only show one of the two.
+  showSettings.value = false;
   const wsId = client.activeWorkspaceId.value;
   if (wsId) {
     client.openWorkspaceDraft(wsId);
@@ -892,6 +895,7 @@ function handleCreateSession(): void {
 // state in the chosen workspace. No backend session is created until the user
 // actually sends a message.
 function handleCreateSessionInWorkspace(workspaceId: string): void {
+  showSettings.value = false;
   client.openWorkspaceDraft(workspaceId);
 }
 
diff --git a/apps/pythinker-web/src/components/Sidebar.vue b/apps/pythinker-web/src/components/Sidebar.vue
index 93b8d4ae0..2c462defe 100644
--- a/apps/pythinker-web/src/components/Sidebar.vue
+++ b/apps/pythinker-web/src/components/Sidebar.vue
@@ -669,7 +669,7 @@ onBeforeUnmount(() => {
       </div>
 
       <div class="side-foot">
-        <button type="button" class="settings-row" @click.stop="emit('openSettings')">
+        <button type="button" class="settings-row end" @click.stop="emit('openSettings')">
           <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="12" cy="12" r="3" />
             <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l-.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09A1.65 1.65 0 0 0 15 4.6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09A1.65 1.65 0 0 0 19.4 15z" />
@@ -1198,6 +1198,12 @@ onBeforeUnmount(() => {
   text-align: left;
   cursor: pointer;
 }
+/* The sessions-mode gear sits on the trailing edge; the settings-mode back
+   arrow keeps the leading edge, where a back control belongs. */
+.settings-row.end {
+  justify-content: flex-end;
+  text-align: right;
+}
 .settings-row:hover { color: var(--ink); background: var(--soft); }
 .settings-row:focus-visible {
   outline: 2px solid var(--blue);
diff --git a/apps/pythinker-web/test/settings-pane.test.ts b/apps/pythinker-web/test/settings-pane.test.ts
index 18cf47b3e..251193044 100644
--- a/apps/pythinker-web/test/settings-pane.test.ts
+++ b/apps/pythinker-web/test/settings-pane.test.ts
@@ -433,4 +433,25 @@ describe('desktop settings route', () => {
     expect.soft(wrapper.find('.sessions').exists()).toBe(true);
     expect.soft(wrapper.findComponent(ConversationPane).exists()).toBe(true);
   });
+
+  it('leaves the settings route when a new session starts', async () => {
+    const wrapper = shallowMount(App, {
+      global: {
+        plugins: [i18n],
+        stubs: { Sidebar: false, SettingsNav: false, SettingsPane: false },
+      },
+    });
+
+    await wrapper.get('.side-foot .settings-row').trigger('click');
+    await nextTick();
+    expect(wrapper.findComponent(SettingsPane).exists()).toBe(true);
+
+    // New Session shares the sidebar with the settings nav, so it has to close
+    // the route — the content area can only show one of the two.
+    await wrapper.get('.btn-new-chat').trigger('click');
+    await nextTick();
+
+    expect(wrapper.findComponent(SettingsPane).exists()).toBe(false);
+    expect(wrapper.find('.sessions').exists()).toBe(true);
+  });
 });

From ce744d98655a75033ac5512956b07d6267851ea3 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 23:15:33 -0400
Subject: [PATCH 11/16] docs: add desktop download badges to the README

The desktop app publishes to PyModel/pythinker-desktop-releases, not this repo,
so the counter points there. Platform badges are static links rather than
per-asset counters: shields.io asset wildcards silently report 0 (a tag with a
39,877-download .dmg returns 0 for *.dmg), and exact asset names embed the
version, so they break on every release.
---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 80d96fdff..21cdfa617 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,10 @@
 [![Docs](https://img.shields.io/badge/docs-online-0284c7.svg?style=flat-square)](https://pymodel.github.io/pythinker-code/)
 [![Homepage](https://img.shields.io/badge/home-code.pythinker.com-ec4899.svg?style=flat-square)](https://code.pythinker.com)
 
+<a href="https://github.com/PyModel/pythinker-desktop-releases/releases"><img src="https://img.shields.io/github/downloads/PyModel/pythinker-desktop-releases/total?style=flat&label=desktop%20downloads&color=4D6BFE" alt="Total desktop downloads"></a>
+<a href="https://github.com/PyModel/pythinker-desktop-releases/releases/latest"><img src="https://img.shields.io/badge/macOS-.dmg-4D6BFE?style=flat&logo=apple&logoColor=white" alt="Download the macOS .dmg"></a>
+<a href="https://github.com/PyModel/pythinker-desktop-releases/releases/latest"><img src="https://img.shields.io/badge/Windows-.exe-4D6BFE?style=flat&logo=windows&logoColor=white" alt="Download the Windows .exe"></a>
+
 <br />
 
 <a href="https://code.pythinker.com">Website</a> &nbsp;·&nbsp;

From c24bc53c338734eda461760a2fa9ed135d3970c0 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 23:21:42 -0400
Subject: [PATCH 12/16] docs: count desktop .dmg and .exe downloads per
 platform

shields.io cannot split downloads by asset: its wildcards silently report 0 (a
tag whose .dmg had 39,877 downloads returns 0 for *.dmg), exact asset names
embed the version so they break every release, and dynamic/json rejects every
filter expression. A daily workflow sums the counts from the desktop releases
repo and publishes them as shields endpoint documents on the orphan badges
branch, which main's protection rules do not block.

The badges move into the hero row in for-the-badge style, matching the rest of
that row rather than adding a fourth style to the README.
---
 .github/workflows/desktop-download-badges.yml | 81 +++++++++++++++++++
 README.md                                     |  7 +-
 2 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 .github/workflows/desktop-download-badges.yml

diff --git a/.github/workflows/desktop-download-badges.yml b/.github/workflows/desktop-download-badges.yml
new file mode 100644
index 000000000..1ac96c9d6
--- /dev/null
+++ b/.github/workflows/desktop-download-badges.yml
@@ -0,0 +1,81 @@
+# Refreshes the per-platform desktop download counters behind the README badges.
+#
+# shields.io cannot do this on its own: its asset wildcards silently report 0
+# (a tag whose .dmg had 39,877 downloads returns 0 for `*.dmg`), exact asset
+# names embed the version so they break on every release, and `dynamic/json`
+# rejects every filter expression. So we sum the counts here and publish them
+# as shields `endpoint` documents.
+#
+# The documents land on the orphan `badges` branch, never on `main` — `main` is
+# protected and rejects pushes from everyone, CI included.
+name: Desktop Download Badges
+
+on:
+  schedule:
+    # Once a day is plenty; the counters move slowly and the API is rate-limited.
+    - cron: '17 4 * * *'
+  workflow_dispatch: {}
+
+permissions:
+  contents: write
+
+concurrency:
+  group: desktop-download-badges
+  cancel-in-progress: true
+
+jobs:
+  refresh:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the badges branch
+        uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # pinned from v4
+        with:
+          ref: badges
+          persist-credentials: true
+
+      - name: Sum the .dmg and .exe download counts
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          RELEASES_REPO: PyModel/pythinker-desktop-releases
+        run: |
+          set -euo pipefail
+
+          # --paginate walks every release, so the totals cover the whole
+          # history rather than just the latest tag.
+          gh api --paginate "repos/${RELEASES_REPO}/releases" > releases.json
+
+          write_badge() {
+            local suffix="$1" label="$2" out="$3"
+            local total
+            total="$(jq --arg s "$suffix" '
+              [ .[].assets[]
+                | select(.name | ascii_downcase | endswith($s))
+                | .download_count
+              ] | add // 0
+            ' releases.json)"
+            jq -n --arg label "$label" --arg message "$total" '{
+              schemaVersion: 1,
+              label: $label,
+              message: $message,
+              color: "4D6BFE"
+            }' > "$out"
+            echo "${label}: ${total}"
+          }
+
+          write_badge '.dmg' 'macOS .dmg' desktop-dmg.json
+          write_badge '.exe' 'Windows .exe' desktop-exe.json
+
+          rm -f releases.json
+
+      - name: Publish if the counts moved
+        run: |
+          set -euo pipefail
+          if git diff --quiet -- desktop-dmg.json desktop-exe.json; then
+            echo 'Counts unchanged; nothing to publish.'
+            exit 0
+          fi
+          git config user.name 'github-actions[bot]'
+          git config user.email 'github-actions[bot]@users.noreply.github.com'
+          git add desktop-dmg.json desktop-exe.json
+          git commit -m 'chore: refresh desktop download counts'
+          git push origin badges
diff --git a/README.md b/README.md
index 21cdfa617..2bb0a5ecd 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,9 @@
 
 [![npm version](https://img.shields.io/npm/v/@pymodel/pythinker-code?style=for-the-badge&logo=npm&logoColor=white&color=CB3837&label=pythinker-code)](https://www.npmjs.com/package/@pymodel/pythinker-code)
 [![Downloads](https://img.shields.io/npm/dm/@pymodel/pythinker-code?style=for-the-badge&logo=npm&logoColor=white&color=2b89ff&label=downloads)](https://www.npmjs.com/package/@pymodel/pythinker-code)
+[![Desktop downloads](https://img.shields.io/github/downloads/PyModel/pythinker-desktop-releases/total?style=for-the-badge&logo=github&logoColor=white&label=desktop&color=4D6BFE)](https://github.com/PyModel/pythinker-desktop-releases/releases)
+[![macOS .dmg](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2FPyModel%2Fpythinker-code%2Fbadges%2Fdesktop-dmg.json&style=for-the-badge&logo=apple&logoColor=white)](https://github.com/PyModel/pythinker-desktop-releases/releases/latest)
+[![Windows .exe](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2FPyModel%2Fpythinker-code%2Fbadges%2Fdesktop-exe.json&style=for-the-badge&logo=windows&logoColor=white)](https://github.com/PyModel/pythinker-desktop-releases/releases/latest)
 [![Node.js](https://img.shields.io/badge/Node.js-26%2B-339933?style=for-the-badge&logo=nodedotjs&logoColor=white)](https://github.com/PyModel/pythinker-code/blob/main/package.json)
 [![License: MIT](https://img.shields.io/badge/License-MIT-16a34a.svg?style=for-the-badge)](https://github.com/PyModel/pythinker-code/blob/main/LICENSE)
 [![CI](https://img.shields.io/github/actions/workflow/status/PyModel/pythinker-code/ci.yml?branch=main&label=CI&style=for-the-badge&logo=githubactions&logoColor=white)](https://github.com/PyModel/pythinker-code/actions/workflows/ci.yml?query=branch%3Amain)
@@ -21,10 +24,6 @@
 [![Docs](https://img.shields.io/badge/docs-online-0284c7.svg?style=flat-square)](https://pymodel.github.io/pythinker-code/)
 [![Homepage](https://img.shields.io/badge/home-code.pythinker.com-ec4899.svg?style=flat-square)](https://code.pythinker.com)
 
-<a href="https://github.com/PyModel/pythinker-desktop-releases/releases"><img src="https://img.shields.io/github/downloads/PyModel/pythinker-desktop-releases/total?style=flat&label=desktop%20downloads&color=4D6BFE" alt="Total desktop downloads"></a>
-<a href="https://github.com/PyModel/pythinker-desktop-releases/releases/latest"><img src="https://img.shields.io/badge/macOS-.dmg-4D6BFE?style=flat&logo=apple&logoColor=white" alt="Download the macOS .dmg"></a>
-<a href="https://github.com/PyModel/pythinker-desktop-releases/releases/latest"><img src="https://img.shields.io/badge/Windows-.exe-4D6BFE?style=flat&logo=windows&logoColor=white" alt="Download the Windows .exe"></a>
-
 <br />
 
 <a href="https://code.pythinker.com">Website</a> &nbsp;·&nbsp;

From 8355bbe29800d3e0a41a9bb68b5ae257bc1f77ca Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 23:25:08 -0400
Subject: [PATCH 13/16] ci: count desktop downloads across both release repos

Installers shipped from pythinker-code through v0.1.0 and move to
pythinker-desktop-releases from the next release on. Summing both repos
keeps the counters continuous instead of resetting at the handover.
---
 .github/workflows/desktop-download-badges.yml | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/desktop-download-badges.yml b/.github/workflows/desktop-download-badges.yml
index 1ac96c9d6..09818a451 100644
--- a/.github/workflows/desktop-download-badges.yml
+++ b/.github/workflows/desktop-download-badges.yml
@@ -36,13 +36,19 @@ jobs:
       - name: Sum the .dmg and .exe download counts
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          RELEASES_REPO: PyModel/pythinker-desktop-releases
+          # Desktop installers shipped from this repo up to v0.1.0 and move to
+          # pythinker-desktop-releases from the next release on. Summing both
+          # keeps the counters continuous across that move.
+          RELEASES_REPOS: PyModel/pythinker-code PyModel/pythinker-desktop-releases
         run: |
           set -euo pipefail
 
           # --paginate walks every release, so the totals cover the whole
-          # history rather than just the latest tag.
-          gh api --paginate "repos/${RELEASES_REPO}/releases" > releases.json
+          # history rather than just the latest tag. jq -s concatenates the one
+          # array each repo produces into a single list of releases.
+          for repo in ${RELEASES_REPOS}; do
+            gh api --paginate "repos/${repo}/releases"
+          done | jq -s 'add' > releases.json
 
           write_badge() {
             local suffix="$1" label="$2" out="$3"

From 04aa1d8106bdc313e4e4c175533af137f60abc82 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 23:26:43 -0400
Subject: [PATCH 14/16] chore: add changesets for the settings route and
 catalog endpoints

---
 .changeset/catalog-rest-and-skill-toggle.md | 5 +++++
 .changeset/inline-settings-route.md         | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/catalog-rest-and-skill-toggle.md
 create mode 100644 .changeset/inline-settings-route.md

diff --git a/.changeset/catalog-rest-and-skill-toggle.md b/.changeset/catalog-rest-and-skill-toggle.md
new file mode 100644
index 000000000..45ca3312b
--- /dev/null
+++ b/.changeset/catalog-rest-and-skill-toggle.md
@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": minor
+---
+
+Add server endpoints that list installed plugins, enable or disable one, and list subagent profiles, and let a named skill be turned off so it is hidden from the model, the slash menu and the API.
diff --git a/.changeset/inline-settings-route.md b/.changeset/inline-settings-route.md
new file mode 100644
index 000000000..b00ce16ab
--- /dev/null
+++ b/.changeset/inline-settings-route.md
@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-code": minor
+---
+
+Open the web settings inside the app shell instead of over it, and add pages for plugins, skills, subagents, connectors, hooks and usage statistics.

From 6f38288a4239a84577bdba8a939683cea4a0147a Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 23:41:30 -0400
Subject: [PATCH 15/16] fix: address PR review findings on the settings route

Drop disabled plugin skills at discovery indexing, not only at register, so
getPluginSkill can no longer return one. Refetch subagents on every visit to
their page, since the cached list belongs to the session whose working
directory produced it. Match disabled skill names case-insensitively in the
web settings, as the core does. Keep a configured default model visible when
the catalog no longer offers it. Sum the combined desktop download counter
across both release repositories like the per-platform ones.
---
 .github/workflows/desktop-download-badges.yml |  15 +-
 README.md                                     |   2 +-
 apps/pythinker-web/src/App.vue                |  18 +-
 .../components/settings/pages/AgentPage.vue   |   9 +
 .../components/settings/pages/SkillsPage.vue  |  16 +-
 .../src/composables/useSettingsNav.ts         |  18 +-
 apps/pythinker-web/test/settings-pane.test.ts |  64 ++++++-
 .../src/services/catalog/catalog.ts           |  17 --
 packages/agent-core/src/skill/registry.ts     |   3 +
 .../agent-core/test/skill/registry.test.ts    |  21 +++
 packages/server/test/catalog.e2e.test.ts      | 172 ++++++++++++++++++
 11 files changed, 318 insertions(+), 37 deletions(-)
 create mode 100644 packages/server/test/catalog.e2e.test.ts

diff --git a/.github/workflows/desktop-download-badges.yml b/.github/workflows/desktop-download-badges.yml
index 09818a451..62ecf167c 100644
--- a/.github/workflows/desktop-download-badges.yml
+++ b/.github/workflows/desktop-download-badges.yml
@@ -50,6 +50,8 @@ jobs:
             gh api --paginate "repos/${repo}/releases"
           done | jq -s 'add' > releases.json
 
+          # An empty suffix matches every asset, which is what the combined
+          # counter wants; `endswith("")` is true for any string.
           write_badge() {
             local suffix="$1" label="$2" out="$3"
             local total
@@ -70,18 +72,23 @@ jobs:
 
           write_badge '.dmg' 'macOS .dmg' desktop-dmg.json
           write_badge '.exe' 'Windows .exe' desktop-exe.json
+          # The shields `github/downloads/.../total` route reads one repository,
+          # so the combined counter has to be summed here like the other two.
+          write_badge '' 'desktop' desktop-total.json
 
           rm -f releases.json
 
       - name: Publish if the counts moved
         run: |
           set -euo pipefail
-          if git diff --quiet -- desktop-dmg.json desktop-exe.json; then
+          git config user.name 'github-actions[bot]'
+          git config user.email 'github-actions[bot]@users.noreply.github.com'
+          # Stage before comparing: a document added in this run is untracked,
+          # and `git diff` on an untracked path reports no change at all.
+          git add desktop-dmg.json desktop-exe.json desktop-total.json
+          if git diff --cached --quiet; then
             echo 'Counts unchanged; nothing to publish.'
             exit 0
           fi
-          git config user.name 'github-actions[bot]'
-          git config user.email 'github-actions[bot]@users.noreply.github.com'
-          git add desktop-dmg.json desktop-exe.json
           git commit -m 'chore: refresh desktop download counts'
           git push origin badges
diff --git a/README.md b/README.md
index 2bb0a5ecd..cf34b20b7 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
 
 [![npm version](https://img.shields.io/npm/v/@pymodel/pythinker-code?style=for-the-badge&logo=npm&logoColor=white&color=CB3837&label=pythinker-code)](https://www.npmjs.com/package/@pymodel/pythinker-code)
 [![Downloads](https://img.shields.io/npm/dm/@pymodel/pythinker-code?style=for-the-badge&logo=npm&logoColor=white&color=2b89ff&label=downloads)](https://www.npmjs.com/package/@pymodel/pythinker-code)
-[![Desktop downloads](https://img.shields.io/github/downloads/PyModel/pythinker-desktop-releases/total?style=for-the-badge&logo=github&logoColor=white&label=desktop&color=4D6BFE)](https://github.com/PyModel/pythinker-desktop-releases/releases)
+[![Desktop downloads](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2FPyModel%2Fpythinker-code%2Fbadges%2Fdesktop-total.json&style=for-the-badge&logo=github&logoColor=white)](https://github.com/PyModel/pythinker-desktop-releases/releases)
 [![macOS .dmg](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2FPyModel%2Fpythinker-code%2Fbadges%2Fdesktop-dmg.json&style=for-the-badge&logo=apple&logoColor=white)](https://github.com/PyModel/pythinker-desktop-releases/releases/latest)
 [![Windows .exe](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2FPyModel%2Fpythinker-code%2Fbadges%2Fdesktop-exe.json&style=for-the-badge&logo=windows&logoColor=white)](https://github.com/PyModel/pythinker-desktop-releases/releases/latest)
 [![Node.js](https://img.shields.io/badge/Node.js-26%2B-339933?style=for-the-badge&logo=nodedotjs&logoColor=white)](https://github.com/PyModel/pythinker-code/blob/main/package.json)
diff --git a/apps/pythinker-web/src/App.vue b/apps/pythinker-web/src/App.vue
index 85ab9eb39..7078b150e 100644
--- a/apps/pythinker-web/src/App.vue
+++ b/apps/pythinker-web/src/App.vue
@@ -611,7 +611,11 @@ const showAddWorkspace = ref(false);
 const showStatusPanel = ref(false);
 const showSettings = ref(false);
 
-const { activeTab: activeSettingsTab, setTab: selectSettingsTab } = useSettingsNav({
+const {
+  activeTab: activeSettingsTab,
+  setTab: selectSettingsTab,
+  refreshActiveTab: refreshSettingsTab,
+} = useSettingsNav({
   counts: {
     connectors: () => client.connectors.value.length,
     plugins: () => client.plugins.value.length,
@@ -622,8 +626,16 @@ const { activeTab: activeSettingsTab, setTab: selectSettingsTab } = useSettingsN
   onLoadSubagents: () => { void client.loadSubagents(); },
 });
 
+function openSettings(): void {
+  showSettings.value = true;
+  // The active tab persists across visits, so its data has to be refetched on
+  // open — the session it was loaded for may no longer be the active one.
+  refreshSettingsTab();
+}
+
 function toggleSettings(): void {
-  showSettings.value = !showSettings.value;
+  if (showSettings.value) showSettings.value = false;
+  else openSettings();
 }
 
 function loginFromSettings(): void {
@@ -961,7 +973,7 @@ function openPr(url: string): void {
         @rename-workspace="(id, name) => client.renameWorkspace(id, name)"
         @delete-workspace="(id) => client.deleteWorkspace(id)"
         @select-workspaces="handleSelectWorkspaces"
-        @open-settings="showSettings = true"
+        @open-settings="openSettings"
         @close-settings="showSettings = false"
         @select-settings-tab="selectSettingsTab($event)"
         @collapse="toggleSidebarCollapse"
diff --git a/apps/pythinker-web/src/components/settings/pages/AgentPage.vue b/apps/pythinker-web/src/components/settings/pages/AgentPage.vue
index 265453cd6..5e573c065 100644
--- a/apps/pythinker-web/src/components/settings/pages/AgentPage.vue
+++ b/apps/pythinker-web/src/components/settings/pages/AgentPage.vue
@@ -39,6 +39,14 @@ const modelOptions = computed<ModelOption[]>(() => {
   return Array.from(byId.values());
 });
 
+// A default the catalog no longer offers still has to appear, or the browser
+// falls back to the first option and shows a model that was never saved.
+const unlistedDefaultModel = computed<string | undefined>(() => {
+  const configured = props.config?.defaultModel;
+  if (configured === undefined || configured === '') return undefined;
+  return modelOptions.value.some((model) => model.id === configured) ? undefined : configured;
+});
+
 const modelGroups = computed<Array<{ provider: string; options: ModelOption[] }>>(() => {
   const map = new Map<string, ModelOption[]>();
   for (const option of modelOptions.value) {
@@ -122,6 +130,7 @@ function toggleConfigBoolean(key: 'defaultThinking' | 'defaultPlanMode' | 'merge
             @change="setDefaultModel"
           >
             <option v-if="!config.defaultModel" value="" disabled>{{ t('settings.noDefaultModel') }}</option>
+            <option v-if="unlistedDefaultModel" :value="unlistedDefaultModel">{{ unlistedDefaultModel }}</option>
             <optgroup v-for="group in modelGroups" :key="group.provider" :label="group.provider">
               <option v-for="model in group.options" :key="model.id" :value="model.id">{{ model.label }}</option>
             </optgroup>
diff --git a/apps/pythinker-web/src/components/settings/pages/SkillsPage.vue b/apps/pythinker-web/src/components/settings/pages/SkillsPage.vue
index 23a69a830..445501ccb 100644
--- a/apps/pythinker-web/src/components/settings/pages/SkillsPage.vue
+++ b/apps/pythinker-web/src/components/settings/pages/SkillsPage.vue
@@ -35,18 +35,22 @@ const skillGroups = computed(() => {
     .toSorted((a, b) => a.source.localeCompare(b.source));
 });
 
-const disabledSkills = computed(() => new Set(props.config?.disabledSkills ?? []));
+// The core matches disabled names case-insensitively, so the page has to as
+// well — otherwise a config entry cased differently from the catalog reads as
+// enabled here and the switch never turns it back on.
+const disabledSkills = computed(() => props.config?.disabledSkills ?? []);
 const skillCount = computed(() => skillGroups.value.reduce((sum, group) => sum + group.skills.length, 0));
 
 function isSkillEnabled(name: string): boolean {
-  return !disabledSkills.value.has(name);
+  const key = name.toLowerCase();
+  return !disabledSkills.value.some((entry) => entry.toLowerCase() === key);
 }
 
 function toggleSkill(name: string): void {
-  const next = new Set(disabledSkills.value);
-  if (next.has(name)) next.delete(name);
-  else next.add(name);
-  emit('updateConfig', { disabledSkills: [...next].sort() });
+  const key = name.toLowerCase();
+  const next = disabledSkills.value.filter((entry) => entry.toLowerCase() !== key);
+  if (next.length === disabledSkills.value.length) next.push(name);
+  emit('updateConfig', { disabledSkills: next.toSorted() });
 }
 </script>
 
diff --git a/apps/pythinker-web/src/composables/useSettingsNav.ts b/apps/pythinker-web/src/composables/useSettingsNav.ts
index 3c1f49e37..30b3f148e 100644
--- a/apps/pythinker-web/src/composables/useSettingsNav.ts
+++ b/apps/pythinker-web/src/composables/useSettingsNav.ts
@@ -57,12 +57,24 @@ type UseSettingsNavOptions = {
 export function useSettingsNav(options: UseSettingsNavOptions) {
   const activeTab = shallowRef<SettingsTab>('general');
 
-  function setTab(tab: SettingsTab): void {
+  function loadFor(tab: SettingsTab): void {
     if (tab === 'connectors' && toValue(options.counts.connectors) === 0) options.onLoadConnectors();
     if (tab === 'plugins' && toValue(options.counts.plugins) === 0) options.onLoadPlugins();
-    if (tab === 'subagents' && toValue(options.counts.subagents) === 0) options.onLoadSubagents();
+    // 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.
+    if (tab === 'subagents') options.onLoadSubagents();
+  }
+
+  function setTab(tab: SettingsTab): void {
+    loadFor(tab);
     activeTab.value = tab;
   }
 
-  return { activeTab, setTab };
+  /** Call when the settings route opens; the active tab persists across visits. */
+  function refreshActiveTab(): void {
+    loadFor(activeTab.value);
+  }
+
+  return { activeTab, setTab, refreshActiveTab };
 }
diff --git a/apps/pythinker-web/test/settings-pane.test.ts b/apps/pythinker-web/test/settings-pane.test.ts
index 251193044..9d115aa05 100644
--- a/apps/pythinker-web/test/settings-pane.test.ts
+++ b/apps/pythinker-web/test/settings-pane.test.ts
@@ -3,7 +3,9 @@ import { nextTick } from 'vue';
 import { createI18n } from 'vue-i18n';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
+import App from '../src/App.vue';
 import type { AppConfig, AppConnector, AppModel, AppSession, AppSkill } from '../src/api/types';
+import ConversationPane from '../src/components/ConversationPane.vue';
 import SettingsNav from '../src/components/settings/SettingsNav.vue';
 import SettingsPane from '../src/components/settings/SettingsPane.vue';
 import { messages } from '../src/i18n/locales';
@@ -82,9 +84,6 @@ vi.mock('../src/composables/usePythinkerWebClient', async () => {
   };
 });
 
-import App from '../src/App.vue';
-import ConversationPane from '../src/components/ConversationPane.vue';
-
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -240,6 +239,35 @@ describe('settings navigation', () => {
     setTab('subagents');
     expect(onLoadSubagents).toHaveBeenCalledOnce();
   });
+
+  it('reloads subagents even when a list is already cached', () => {
+    // The cached list belongs to whichever session was active when it loaded,
+    // so a non-empty count must not suppress the refetch.
+    const onLoadSubagents = vi.fn();
+    const { setTab } = useSettingsNav({
+      counts: { connectors: 0, plugins: 0, subagents: 3 },
+      onLoadConnectors: vi.fn(),
+      onLoadPlugins: vi.fn(),
+      onLoadSubagents,
+    });
+
+    setTab('subagents');
+    expect(onLoadSubagents).toHaveBeenCalledOnce();
+  });
+
+  it('reloads the persisted tab when the settings route reopens', () => {
+    const onLoadSubagents = vi.fn();
+    const { setTab, refreshActiveTab } = useSettingsNav({
+      counts: { connectors: 0, plugins: 0, subagents: 3 },
+      onLoadConnectors: vi.fn(),
+      onLoadPlugins: vi.fn(),
+      onLoadSubagents,
+    });
+
+    setTab('subagents');
+    refreshActiveTab();
+    expect(onLoadSubagents).toHaveBeenCalledTimes(2);
+  });
 });
 
 describe('SettingsPane config controls', () => {
@@ -297,6 +325,19 @@ describe('SettingsPane desktop updates', () => {
   });
 });
 
+describe('SettingsPane agent page', () => {
+  it('keeps a configured default the catalog no longer offers', () => {
+    // Without a matching option the browser shows its first one, which reads
+    // as a saved default that was never chosen.
+    const wrapper = mountPane('agent', { config: { ...config, defaultModel: 'retired/model' } });
+    const select = wrapper.get('#settings-panel-agent select.select-field');
+
+    expect(select.findAll('option').map((option) => option.attributes('value')))
+      .toContain('retired/model');
+    expect((select.element as HTMLSelectElement).value).toBe('retired/model');
+  });
+});
+
 describe('SettingsPane skills page', () => {
   it('groups skills by source and marks the slash-only ones', () => {
     const panel = mountPane('skills', { skills }).get('#settings-panel-skills');
@@ -309,6 +350,23 @@ describe('SettingsPane skills page', () => {
   it('says so when no skill is available', () => {
     expect(mountPane('skills').get('#settings-panel-skills').text()).toContain('No skills are available');
   });
+
+  it('reads a disabled name that is cased differently as off, and clears it once', async () => {
+    // The core lowercases disabled names, so a config entry cased differently
+    // from the catalog still disables the skill and the page has to agree.
+    const wrapper = mountPane('skills', {
+      skills,
+      config: { ...config, disabledSkills: ['Gen-Changesets'] },
+    });
+    const row = wrapper.get('#settings-panel-skills').findAll('.listing-row')
+      .find((candidate) => candidate.text().includes('gen-changesets'));
+
+    expect(row?.classes()).toContain('off');
+
+    await row?.get('button.switch').trigger('click');
+
+    expect(wrapper.emitted('updateConfig')?.at(-1)).toEqual([{ disabledSkills: [] }]);
+  });
 });
 
 describe('SettingsPane connectors page', () => {
diff --git a/packages/agent-core/src/services/catalog/catalog.ts b/packages/agent-core/src/services/catalog/catalog.ts
index 74df5b116..817559fd8 100644
--- a/packages/agent-core/src/services/catalog/catalog.ts
+++ b/packages/agent-core/src/services/catalog/catalog.ts
@@ -1,20 +1,3 @@
-/**
- * `ICatalogService` — daemon-facing view of what the agent can reach beyond
- * skills and MCP servers: installed plugins and the subagent profiles.
- *
- * Both are read from the core process and both are global rather than
- * session-scoped, so they share one service instead of two near-identical
- * wrappers around `ICoreProcessService.rpc`.
- *
- * **CoreAPI surface used**:
- *   - `core.rpc.listPlugins({})` → `readonly PluginSummary[]`
- *   - `core.rpc.setPluginEnabled({id, enabled})`
- *   - `core.rpc.listAgentProfiles({workDir})` → `AgentProfileCatalog`
- *
- * **Anti-corruption**: imports `@pymodel/agent-core` internals only for the
- * `createDecorator` value and the rpc payload types.
- */
-
 import { createDecorator } from '../../di';
 import type { AgentProfileSummary } from '../../rpc';
 import type { PluginSummary } from '../../plugin';
diff --git a/packages/agent-core/src/skill/registry.ts b/packages/agent-core/src/skill/registry.ts
index bc6c427e3..e3d1534f8 100644
--- a/packages/agent-core/src/skill/registry.ts
+++ b/packages/agent-core/src/skill/registry.ts
@@ -167,6 +167,9 @@ export class SessionSkillRegistry implements AgentSkillRegistry {
     options: { readonly replace?: boolean } = {},
   ): void {
     if (skill.plugin === undefined) return;
+    // Discovery indexes plugin skills before `register` runs, so the disabled
+    // check has to repeat here or `getPluginSkill` would still hand one back.
+    if (this.disabledNames.has(normalizeSkillName(skill.name))) return;
     const key = pluginSkillKey(skill.plugin.id, skill.name);
     if (options.replace === true || !this.byPluginAndName.has(key)) {
       this.byPluginAndName.set(key, skill);
diff --git a/packages/agent-core/test/skill/registry.test.ts b/packages/agent-core/test/skill/registry.test.ts
index c94f7b9d1..991b6710e 100644
--- a/packages/agent-core/test/skill/registry.test.ts
+++ b/packages/agent-core/test/skill/registry.test.ts
@@ -197,6 +197,27 @@ describe('disabled skills', () => {
 
     expect(registry.getSkill('loop')).toBeUndefined();
   });
+
+  it('never indexes a disabled plugin skill discovered from a root', async () => {
+    // Discovery indexes plugin skills before `register` runs, so a disabled one
+    // stays reachable through `getPluginSkill` unless the check repeats there.
+    const disabled = { ...makeSkill('deploy', 'extra'), plugin: { id: 'acme' } };
+    const kept = { ...makeSkill('rollback', 'extra'), plugin: { id: 'acme' } };
+    const registry = new SessionSkillRegistry({
+      disabledNames: ['Deploy'],
+      discover: async (options) => {
+        options.onDiscoveredSkill?.(disabled);
+        options.onDiscoveredSkill?.(kept);
+        return [disabled, kept];
+      },
+    });
+
+    await registry.loadRoots([{ path: '/tmp/plugins', source: 'extra' }]);
+
+    expect(registry.getPluginSkill('acme', 'deploy')).toBeUndefined();
+    expect(registry.getSkill('deploy')).toBeUndefined();
+    expect(registry.getPluginSkill('acme', 'rollback')).toBeDefined();
+  });
 });
 
 function makeRegistry(skills: readonly SkillDefinition[]): SessionSkillRegistry {
diff --git a/packages/server/test/catalog.e2e.test.ts b/packages/server/test/catalog.e2e.test.ts
new file mode 100644
index 000000000..fdce167d5
--- /dev/null
+++ b/packages/server/test/catalog.e2e.test.ts
@@ -0,0 +1,172 @@
+import { mkdtempSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+import { pino } from 'pino';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ICatalogService } from '@pymodel/agent-core';
+import { ErrorCode } from '@pymodel/protocol';
+import type { AgentProfile, Plugin } from '@pymodel/protocol';
+
+import { IRestGateway, startServer, type RunningServer } from '../src';
+
+let tmpDir: string;
+let lockPath: string;
+let bridgeHome: string;
+let server: RunningServer | undefined;
+
+const plugin: Plugin = {
+  id: 'acme',
+  display_name: 'Acme',
+  version: '1.0.0',
+  enabled: true,
+  source: 'user',
+  state: 'loaded',
+  skill_count: 2,
+  mcp_server_count: 0,
+  has_errors: false,
+};
+
+const profile: AgentProfile = {
+  name: 'reviewer',
+  description: 'Reviews a diff',
+  source: 'project',
+  tools: ['read'],
+};
+
+function makeCatalog(overrides: Partial<Record<string, unknown>> = {}) {
+  return {
+    _serviceBrand: undefined,
+    listPlugins: vi.fn(async () => [plugin] as readonly Plugin[]),
+    setPluginEnabled: vi.fn(async () => {}),
+    listAgentProfiles: vi.fn(async () => [profile] as readonly AgentProfile[]),
+    ...overrides,
+  };
+}
+
+beforeEach(() => {
+  tmpDir = mkdtempSync(join(tmpdir(), 'pythinker-server-catalog-test-'));
+  lockPath = join(tmpDir, 'lock');
+  bridgeHome = mkdtempSync(join(tmpdir(), 'pythinker-server-catalog-home-'));
+});
+
+afterEach(async () => {
+  try {
+    await server?.close();
+  } catch {
+    // ignore
+  }
+  server = undefined;
+  rmSync(tmpDir, { recursive: true, force: true, maxRetries: 5, retryDelay: 100 });
+  rmSync(bridgeHome, { recursive: true, force: true, maxRetries: 5, retryDelay: 100 });
+});
+
+async function bootDaemon(catalog: unknown): Promise<RunningServer> {
+  server = await startServer({
+    host: '127.0.0.1',
+    port: 0,
+    lockPath,
+    logger: pino({ level: 'silent' }),
+    coreProcessOptions: { homeDir: bridgeHome },
+    serviceOverrides: [[ICatalogService, catalog]],
+  });
+  return server;
+}
+
+function appOf(r: RunningServer): {
+  inject: (req: unknown) => Promise<{ statusCode: number; json: () => unknown }>;
+} {
+  return r.services.invokeFunction((a) => {
+    const gw = a.get(IRestGateway);
+    return gw.app as unknown as {
+      inject: (req: unknown) => Promise<{ statusCode: number; json: () => unknown }>;
+    };
+  });
+}
+
+function envelopeOf<T>(body: unknown): { code: number; msg: string; data: T | null } {
+  return body as { code: number; msg: string; data: T | null };
+}
+
+describe('catalog routes', () => {
+  it('lists installed plugins', async () => {
+    const catalog = makeCatalog();
+    const r = await bootDaemon(catalog);
+
+    const res = await appOf(r).inject({ method: 'GET', url: '/api/v1/plugins' });
+
+    expect(res.statusCode).toBe(200);
+    const env = envelopeOf<{ plugins: Plugin[] }>(res.json());
+    expect(env.code).toBe(0);
+    expect(env.data?.plugins).toEqual([plugin]);
+  });
+
+  it('disables a plugin through the set-enabled action', async () => {
+    const catalog = makeCatalog();
+    const r = await bootDaemon(catalog);
+
+    const res = await appOf(r).inject({
+      method: 'POST',
+      url: '/api/v1/plugins/acme:set-enabled',
+      payload: { enabled: false },
+    });
+
+    expect(res.statusCode).toBe(200);
+    expect(envelopeOf<{ id: string; enabled: boolean }>(res.json()).data)
+      .toEqual({ id: 'acme', enabled: false });
+    expect(catalog.setPluginEnabled).toHaveBeenCalledWith('acme', false);
+  });
+
+  it('rejects the bare plugin path, which carries no action', async () => {
+    const catalog = makeCatalog();
+    const r = await bootDaemon(catalog);
+
+    const res = await appOf(r).inject({
+      method: 'POST',
+      url: '/api/v1/plugins/acme',
+      payload: { enabled: false },
+    });
+
+    expect(envelopeOf<unknown>(res.json()).code).toBe(ErrorCode.VALIDATION_FAILED);
+    expect(catalog.setPluginEnabled).not.toHaveBeenCalled();
+  });
+
+  it('rejects an unknown action suffix', async () => {
+    const catalog = makeCatalog();
+    const r = await bootDaemon(catalog);
+
+    const res = await appOf(r).inject({
+      method: 'POST',
+      url: '/api/v1/plugins/acme:remove',
+      payload: { enabled: false },
+    });
+
+    expect(envelopeOf<unknown>(res.json()).code).toBe(ErrorCode.VALIDATION_FAILED);
+    expect(catalog.setPluginEnabled).not.toHaveBeenCalled();
+  });
+
+  it('lists subagent profiles for a working directory', async () => {
+    const catalog = makeCatalog();
+    const r = await bootDaemon(catalog);
+
+    const res = await appOf(r).inject({
+      method: 'GET',
+      url: '/api/v1/agent-profiles?work_dir=%2Fworkspace%2Fdemo',
+    });
+
+    expect(res.statusCode).toBe(200);
+    expect(envelopeOf<{ profiles: AgentProfile[] }>(res.json()).data?.profiles).toEqual([profile]);
+    expect(catalog.listAgentProfiles).toHaveBeenCalledWith('/workspace/demo');
+  });
+
+  it('rejects a subagent listing with no working directory', async () => {
+    const catalog = makeCatalog();
+    const r = await bootDaemon(catalog);
+
+    const res = await appOf(r).inject({ method: 'GET', url: '/api/v1/agent-profiles' });
+
+    expect(envelopeOf<unknown>(res.json()).code).toBe(ErrorCode.VALIDATION_FAILED);
+    expect(catalog.listAgentProfiles).not.toHaveBeenCalled();
+  });
+});

From 52dbb7d07c17b8f0c8379cf5d0d1d79b61233d43 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 23:52:06 -0400
Subject: [PATCH 16/16] test(server): validate the response envelope in the
 catalog route tests

---
 packages/server/test/catalog.e2e.test.ts | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/server/test/catalog.e2e.test.ts b/packages/server/test/catalog.e2e.test.ts
index fdce167d5..fe78638ce 100644
--- a/packages/server/test/catalog.e2e.test.ts
+++ b/packages/server/test/catalog.e2e.test.ts
@@ -3,6 +3,7 @@ import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 
 import { pino } from 'pino';
+import { z } from 'zod';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { ICatalogService } from '@pymodel/agent-core';
@@ -85,8 +86,22 @@ function appOf(r: RunningServer): {
   });
 }
 
-function envelopeOf<T>(body: unknown): { code: number; msg: string; data: T | null } {
-  return body as { code: number; msg: string; data: T | null };
+const envelopeSchema = z.object({
+  code: z.number(),
+  msg: z.string(),
+  data: z.unknown(),
+  request_id: z.string().min(1),
+});
+
+/** Parses the uniform `{code, msg, data, request_id}` envelope every route returns. */
+function envelopeOf<T>(body: unknown): {
+  code: number;
+  msg: string;
+  data: T | null;
+  request_id: string;
+} {
+  const envelope = envelopeSchema.parse(body);
+  return { ...envelope, data: envelope.data as T | null };
 }
 
 describe('catalog routes', () => {