feat(mcp): MCP server for AI agents, agent scopes on API keys, switches in settings

MindSift now speaks MCP (Streamable HTTP, stateless JSON-RPC) at POST /api/v1/mcp so
Claude Code, Codex, Claude Desktop, Cursor and custom agents can read, create and
complete tasks and keep shared lists. API keys get the scopes tasks:read/write and
lists:read/write; tools/list only shows what the key may call and every tool checks
its scope. Task and list write paths are shared helpers (updateTask, createTask,
addListItem, setListItemDone) used by REST and MCP alike.

Settings: scope selection and the SectionPicker (import, restore) use ToggleSwitch
rows instead of checkbox-like buttons; new MCP section with connection snippets for
Claude Code, Codex and JSON configs. Docs, README, help and changelog updated; v0.28.0.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

frontend/src/features/settings/SectionPicker.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Check } from 'lucide-react';
 import { DATA_SECTIONS, DataSection } from '../../lib/types';
+import { ToggleSwitch } from '../../components/ToggleSwitch';
 
 interface SectionPickerProps {
   value: DataSection[];
@@ -8,30 +8,27 @@ interface SectionPickerProps {
   label?: string;
 }
 
-// Which parts of the own data a restore or import covers; at least one stays selected
+// Which parts of the own data a restore or import covers; one switch per section, at least one stays on
 export const SectionPicker: React.FC<SectionPickerProps> = ({ value, onChange, label = 'Bereiche' }) => (
-  <div className="flex flex-wrap items-center gap-1.5" role="group" aria-label={label}>
-    <span className="text-[11px] text-muted mr-1">{label}:</span>
-    {DATA_SECTIONS.map((sec) => {
-      const on = value.includes(sec.id);
-      return (
-        <button
-          key={sec.id}
-          type="button"
-          role="checkbox"
-          aria-checked={on}
-          onClick={() => {
-            const next = on ? value.filter((v) => v !== sec.id) : [...value, sec.id];
-            if (next.length > 0) onChange(next);
-          }}
-          className={`h-11 sm:h-7 px-2.5 rounded-btn border text-[11px] inline-flex items-center gap-1 transition-colors ${
-            on ? 'border-accent bg-accent/10 text-main' : 'border-border text-muted hover:text-main'
-          }`}
-        >
-          {on && <Check className="w-3 h-3 text-accent" />}
-          {sec.label}
-        </button>
-      );
-    })}
+  <div role="group" aria-label={label}>
+    <p className="text-[11px] text-muted mb-1.5">{label}</p>
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1 border border-border rounded-card px-3 py-1.5 bg-panel">
+      {DATA_SECTIONS.map((sec) => {
+        const on = value.includes(sec.id);
+        return (
+          <div key={sec.id} className="flex items-center justify-between gap-3 min-h-[44px] sm:min-h-[36px]">
+            <span className="text-xs text-main">{sec.label}</span>
+            <ToggleSwitch
+              checked={on}
+              title={sec.label}
+              onChange={() => {
+                const next = on ? value.filter((v) => v !== sec.id) : [...value, sec.id];
+                if (next.length > 0) onChange(next);
+              }}
+            />
+          </div>
+        );
+      })}
+    </div>
   </div>
 );