feat(web): make settings an inline route and add the capability pages (#100)

## Related Issue

No issue — this continues the settings/desktop UI work that landed in
#97, and the problem is described below.

## Problem

Settings was a modal. `SettingsDialog.vue` had grown to 1,571 lines
fusing four unrelated jobs — the fixed backdrop and focus trap, its own
tab navigation, ten page bodies, and the derived state each page needed
— behind an interface of 22 props and 12 emits. Because the modal chrome
was welded to the content, the pages could only ever render as an
overlay: opening Settings hid the whole app behind a scrim, including
the sidebar the user had just been navigating.

Three smaller problems came with it:

- The settings surface only exposed appearance, account and connection.
Plugins, skills, subagents, hooks and usage had no UI at all, and
plugins and subagent profiles had no REST surface either — they existed
only over the internal core RPC.
- A disabled skill could not be turned off from anywhere.
- The README had no desktop download badge, and the desktop artifacts
are published to a different repository than the one the README lives
in.

## What changed

**Settings became a route.** `SettingsDialog.vue` is deleted and
replaced by focused modules:

- `composables/useSettingsNav.ts` owns the `SettingsTab` union, the
three nav groups, the active tab, and the guarded lazy loads. Counts
come in as `MaybeRefOrGetter` so it reads live list lengths instead of
duplicating state.
- `components/settings/SettingsNav.vue` renders the nav and is hosted by
the real `Sidebar`.
- `components/settings/SettingsPane.vue` hosts the pages inline in the
content area. No backdrop, nothing `position: fixed`.
- Ten page components under `components/settings/pages/`, each taking
only the props it needs and owning its own derived state.
- `components/settings/ListingRow.vue` and `settings.css` carry the
shared row and rules.

`Sidebar` gained `mode: 'sessions' | 'settings'`. Its header and New
Session button stay mounted in both modes; only the body below swaps.
`ConversationPane` yields the content area to `SettingsPane`. Mobile is
untouched — it stays a sheet.

**Five new settings pages**, plus the backend they needed:

- Skills, with an enable/disable switch. Turning one off writes a
`disabledSkills` config list that `SessionSkillRegistry.register`
filters. That is the single funnel every skill source goes through, so a
disabled skill is invisible to the model, the slash menu and the API
alike — built-ins included.
- Plugins, Subagents, Connectors and Hooks.
- Usage stats: token, session, turn and cost totals with a per-model
share bar.
- `ICatalogService` behind `GET /plugins`, `POST
/plugins/{id}:set-enabled` and `GET /agent-profiles`, with protocol
schemas for each. One service rather than two, because both collections
are global rather than session-scoped.

**Row design** follows a flat, borderless idiom: 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.

**Model menu** splits into a model list and an effort list, with the
effort levels derived from the model's declared `supportEfforts`.

**README** gains three desktop download badges in the hero row.
Per-platform counts cannot come from shields.io directly: 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. 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.

### Verification

- `pnpm -C apps/pythinker-web exec vitest run` — 322 passed (58 files)
- `pnpm -C apps/pythinker-web exec vue-tsc --noEmit` — clean
- `pnpm run lint` — 0 errors
- `pnpm run build` — clean
- agent-core, protocol and server suites — green

Every new assertion was proven able to fail by breaking the
implementation it covers and confirming the red before restoring.

### Note for reviewers

The active settings tab now persists across close and reopen. The modal
remounted on every open and reset to General; the composable lives in
`App.vue` and does not. This is a deliberate behaviour change, called
out here rather than buried.

## Checklist

- [x] I have read the
[CONTRIBUTING](https://github.com/PyModel/pythinker-code/blob/main/CONTRIBUTING.md)
document.
- [x] I have linked a related issue, or explained the problem above.
- [x] I have added tests that prove my feature works.
- [x] Ran `gen-changesets` skill, or this PR needs no changeset. — two
`minor` changesets, both listing `@pymodel/pythinker-code`: the changed
packages are all ignored by changesets, but the web app and the server
both ship inside the CLI release artifact, so the CLI is the package
that carries them.
- [x] Ran `gen-docs` skill, or this PR needs no doc update.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added a routed settings experience for agents, plugins, skills,
subagents, connectors, hooks, usage, account, and advanced options.
- Added plugin enable/disable controls, connector restart actions,
catalog listings, and skill management.
  - Added support for disabling selected skills.
  - Improved model selection with separate thinking-effort navigation.
  - Added desktop download badges for macOS and Windows releases.

- **Improvements**
- Improved dock panel positioning while keeping the message composer
fixed.
- Added clearer loading, empty, status, and error states throughout
settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: elkaix

.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.

.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.

.github/workflows/desktop-download-badges.yml

@@ -0,0 +1,94 @@
+# 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 }}
+          # 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. 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
+
+          # 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
+            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
+          # 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
+          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 commit -m 'chore: refresh desktop download counts'
+          git push origin badges

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/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)
 [![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)

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,43 @@ const showAddWorkspace = ref(false);
 const showStatusPanel = ref(false);
 const showSettings = ref(false);
 
+const {
+  activeTab: activeSettingsTab,
+  setTab: selectSettingsTab,
+  refreshActiveTab: refreshSettingsTab,
+} = 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 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 {
+  if (showSettings.value) showSettings.value = false;
+  else openSettings();
+}
+
+function loginFromSettings(): void {
+  showSettings.value = false;
+  openLogin();
+}
+
+function openOnboardingFromSettings(): void {
+  showSettings.value = false;
+  openOnboarding();
+}
+
 type SubmitPayload = {
   text: string;
   attachments: { fileId: string; kind: 'image' | 'video' }[];
@@ -854,6 +892,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);
@@ -866,6 +907,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);
 }
 
@@ -918,6 +960,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)"
@@ -929,7 +973,9 @@ 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"
       />
       <ResizeHandle
@@ -992,7 +1038,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 +1060,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,31 +1266,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"
-      @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"