feat(api): one API for curl and MCP, REST reads with keys, origin badge with key name

API keys reach tasks and lists over plain REST too (GET /task-lists, GET /tasks with
status/due filters, PATCH/DELETE /thoughts/{id}, GET /lists, list items), guarded by a route
table; notes and settings stay closed. Rights hold for every access alike (webhook:task also
allows create_task over MCP, tasks:write also task delivery).

Tasks, thoughts and list items record which key created them and which one changed them last
(migration 13 replaces agent_mark; origin stays after the user's own edits and survives the
triage into a list item). OriginBadge shows the key name with a webhook or robot icon, details
on hover and tap, and replaces the Webhook and KI badges everywhere, now also on list items.

Settings: category "API" with rights grouped by tasks, lists and inbox and two tabs
(curl / smart home with a Home Assistant sensor, AI agents over MCP). Docs, help, README and
changelog updated; v0.30.0.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/features/settings/ApiKeysPanel.tsx

@@ -18,24 +18,31 @@ interface ApiKeysPanelProps {
   onIngested?: () => void;
 }
 
-// What a key may do: deliver data (webhooks) or read and change tasks and lists for AI agents (MCP)
-const SCOPES: { id: ApiKeyScope; label: string; hint: string; group: 'webhook' | 'agent' }[] = [
-  { id: 'webhook:triage', label: '📥 Triage / Inbox', hint: 'Gedanken in die Inbox einliefern', group: 'webhook' },
-  { id: 'webhook:task', label: '📋 Aufgaben anlegen', hint: 'Aufgaben direkt anlegen', group: 'webhook' },
-  { id: 'webhook:list', label: '📝 Listeneinträge anlegen', hint: 'Einträge zu Listen hinzufügen', group: 'webhook' },
-  { id: 'tasks:read', label: '📋 Aufgaben lesen', hint: 'Aufgabenlisten und Aufgaben lesen, suchen', group: 'agent' },
-  { id: 'tasks:write', label: '✅ Aufgaben ändern', hint: 'Aufgaben anlegen, ändern und abhaken', group: 'agent' },
-  { id: 'lists:read', label: '📝 Listen lesen', hint: 'Listen und ihre Einträge lesen', group: 'agent' },
-  { id: 'lists:write', label: '🛒 Listen ändern', hint: 'Einträge hinzufügen, ändern und abhaken', group: 'agent' },
+// What a key may do. The rights hold for every access alike: curl/REST and MCP for AI agents. The ids of
+// the delivering rights (webhook:…) stay from the time keys could only deliver data.
+type ScopeGroup = 'tasks' | 'lists' | 'inbox';
+const SCOPES: { id: ApiKeyScope; label: string; chip: string; hint: string; group: ScopeGroup }[] = [
+  { id: 'tasks:read', label: 'Lesen', chip: 'Aufgaben lesen', hint: 'Aufgabenlisten und Aufgaben lesen, suchen', group: 'tasks' },
+  { id: 'webhook:task', label: 'Anlegen', chip: 'Aufgaben anlegen', hint: 'Nur neue Aufgaben anlegen', group: 'tasks' },
+  { id: 'tasks:write', label: 'Ändern', chip: 'Aufgaben ändern', hint: 'Anlegen, ändern, abhaken und löschen', group: 'tasks' },
+  { id: 'lists:read', label: 'Lesen', chip: 'Listen lesen', hint: 'Listen und ihre Einträge lesen', group: 'lists' },
+  { id: 'webhook:list', label: 'Einträge hinzufügen', chip: 'Listeneinträge hinzufügen', hint: 'Nur neue Einträge hinzufügen', group: 'lists' },
+  { id: 'lists:write', label: 'Ändern', chip: 'Listen ändern', hint: 'Einträge hinzufügen, ändern und abhaken', group: 'lists' },
+  { id: 'webhook:triage', label: 'Inbox füllen', chip: 'Inbox', hint: 'Gedanken in die Inbox einliefern', group: 'inbox' },
 ];
-const scopeLabel = (id: string) => SCOPES.find((s) => s.id === id)?.label || id;
-const isAgentScope = (sc: string) => SCOPES.find((s) => s.id === sc)?.group === 'agent';
+const SCOPE_GROUPS: [ScopeGroup, string][] = [
+  ['tasks', '📋 Aufgaben'],
+  ['lists', '🛒 Listen'],
+  ['inbox', '📥 Inbox'],
+];
+const scopeChip = (id: string) => SCOPES.find((s) => s.id === id)?.chip || id;
 
 type SimTarget = 'triage' | 'task' | 'list_item';
 type McpClient = 'claude' | 'codex' | 'json';
+type Access = 'rest' | 'mcp';
 
-// Personal API keys with scopes (switches), MCP connection snippets, a webhook simulator and copyable
-// examples (settings → Webhooks & KI-Agenten)
+// Personal API keys with rights (switches) and how to connect: curl / smart home (read examples,
+// delivery simulator) or AI agents over MCP (settings → API)
 export const ApiKeysPanel: React.FC<ApiKeysPanelProps> = ({ onIngested }) => {
   const [keys, setKeys] = useState<APIKey[]>([]);
   const [newKeyName, setNewKeyName] = useState('');
@@ -43,6 +50,7 @@ export const ApiKeysPanel: React.FC<ApiKeysPanelProps> = ({ onIngested }) => {
   const [newlyCreatedKey, setNewlyCreatedKey] = useState<string | null>(null);
   const [copiedKey, setCopiedKey] = useState(false);
   const [mcpClient, setMcpClient] = useState<McpClient>('claude');
+  const [access, setAccess] = useState<Access>('rest');
 
   // Live Webhook Simulator State
   const [simTitle, setSimTitle] = useState('Waschmaschine im Keller ist fertig!');
@@ -179,10 +187,12 @@ http_headers = { "X-API-Key" = "${exampleToken}" }`
             <Key className="w-4 h-4" />
           </div>
           <div>
-            <h3 className="text-sm font-bold text-main">API-Schlüssel für Webhooks und KI-Agenten</h3>
+            <h3 className="text-sm font-bold text-main">API-Schlüssel</h3>
             <p className="text-xs text-muted">
-              Verbinde Home Assistant, n8n, eigene Skripte oder KI-Agenten (Claude Code, Codex …) mit MindSift. Was ein
-              Key darf, legst du pro Key fest; Notizen bleiben für Keys immer unerreichbar.
+              Ein Schlüssel verbindet Home Assistant, n8n, eigene Skripte oder KI-Agenten (Claude Code, Codex …) mit
+              MindSift. Was er darf, legst du mit den Schaltern fest; das gilt per curl und per MCP gleich. Notizen und
+              Einstellungen bleiben für Schlüssel gesperrt. Was ein Schlüssel anlegt oder ändert, trägt seinen Namen als
+              Badge.
             </p>
           </div>
         </div>
@@ -201,18 +211,10 @@ http_headers = { "X-API-Key" = "${exampleToken}" }`
               <span>API-Key erzeugen</span>
             </button>
           </div>
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3" role="group" aria-label="Berechtigungen des Keys">
-            {(
-              [
-                ['webhook', 'Einliefern (Webhooks)', 'POST /api/v1/webhooks/ingest'],
-                ['agent', 'KI-Agenten (MCP)', 'POST /api/v1/mcp'],
-              ] as const
-            ).map(([group, heading, path]) => (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-3" role="group" aria-label="Berechtigungen des Schlüssels">
+            {SCOPE_GROUPS.map(([group, heading]) => (
               <div key={group} className="border border-border rounded-card bg-panel px-3 py-1.5">
-                <p className="text-[11px] text-muted pt-1 pb-0.5 flex flex-wrap justify-between gap-x-2">
-                  <span className="font-semibold">{heading}</span>
-                  <code className="font-mono">{path}</code>
-                </p>
+                <p className="text-[11px] text-muted pt-1 pb-0.5 font-semibold">{heading}</p>
                 {SCOPES.filter((sc) => sc.group === group).map((sc) => {
                   const on = newKeyScopes.includes(sc.id);
                   return (
@@ -221,7 +223,7 @@ http_headers = { "X-API-Key" = "${exampleToken}" }`
                         <span className="block text-xs text-main">{sc.label}</span>
                         <span className="block text-[11px] text-muted">{sc.hint}</span>
                       </div>
-                      <ToggleSwitch checked={on} onChange={() => toggleScope(sc.id)} title={sc.label} />
+                      <ToggleSwitch checked={on} onChange={() => toggleScope(sc.id)} title={sc.chip} />
                     </div>
                   );
                 })}
@@ -257,13 +259,8 @@ http_headers = { "X-API-Key" = "${exampleToken}" }`
                     .split(',')
                     .filter(Boolean)
                     .map((sc) => (
-                      <span
-                        key={sc}
-                        className={`px-1.5 py-0.5 rounded-btn border text-[10px] ${
-                          isAgentScope(sc) ? 'border-accent/40 text-accent' : 'border-border text-muted'
-                        }`}
-                      >
-                        {scopeLabel(sc)}
+                      <span key={sc} className="px-1.5 py-0.5 rounded-btn border border-border text-muted text-[10px]">
+                        {scopeChip(sc)}
                       </span>
                     ))}
                   {k.lastUsedAt && (
@@ -285,186 +282,250 @@ http_headers = { "X-API-Key" = "${exampleToken}" }`
         </div>
       </div>
 
-      {/* AI agents (MCP) */}
-      <div className="pt-4 border-t border-border">
-        <div className="flex items-center gap-3 mb-3">
-          <div className="w-7 h-7 bg-accent text-on-accent flex items-center justify-center flex-shrink-0">
-            <Bot className="w-4 h-4" />
-          </div>
-          <div>
-            <h3 className="text-sm font-bold text-main">KI-Agenten anbinden (MCP)</h3>
-            <p className="text-xs text-muted">
-              MindSift ist ein MCP-Server: Claude Code, Codex, Claude Desktop, Cursor und eigene Agenten können offene
-              Aufgaben lesen, abhaken und anlegen sowie Listen führen. Dafür braucht der Key die Agenten-Berechtigungen.
-            </p>
-          </div>
-        </div>
-
-        <div className="flex flex-wrap gap-1.5 mb-2" role="radiogroup" aria-label="Agent">
+      {/* How to connect: one API, two accesses */}
+      <div className="pt-4 border-t border-border space-y-4">
+        <div className="flex flex-wrap gap-1.5" role="tablist" aria-label="Zugang">
           {(
             [
-              ['claude', 'Claude Code'],
-              ['codex', 'OpenAI Codex'],
-              ['json', 'Claude Desktop / Cursor'],
+              ['rest', 'curl / Smart Home', Terminal],
+              ['mcp', 'KI-Agenten (MCP)', Bot],
             ] as const
-          ).map(([value, label]) => (
+          ).map(([value, label, Icon]) => (
             <button
               key={value}
               type="button"
-              role="radio"
-              aria-checked={mcpClient === value}
-              onClick={() => setMcpClient(value)}
-              className={`h-11 sm:h-8 px-3 rounded-btn border text-xs transition-colors ${
-                mcpClient === value ? 'border-accent bg-accent/10 text-main' : 'border-border text-muted hover:text-main'
+              role="tab"
+              aria-selected={access === value}
+              onClick={() => setAccess(value)}
+              className={`h-11 sm:h-8 px-3 rounded-btn border text-xs flex items-center gap-1.5 transition-colors ${
+                access === value ? 'border-accent bg-accent/10 text-main' : 'border-border text-muted hover:text-main'
               }`}
             >
+              <Icon className="w-3.5 h-3.5 text-accent" />
               {label}
             </button>
           ))}
         </div>
-        <pre className="p-3 bg-canvas border border-border font-mono text-xs text-main overflow-x-auto">{mcpSnippet}</pre>
-        <p className="mt-2 text-[11px] text-faint">
-          Werkzeuge: <code className="font-mono">list_task_lists</code>, <code className="font-mono">list_tasks</code>,{' '}
-          <code className="font-mono">complete_task</code>, <code className="font-mono">create_task</code>,{' '}
-          <code className="font-mono">update_task</code>, <code className="font-mono">list_lists</code>,{' '}
-          <code className="font-mono">get_list</code>, <code className="font-mono">add_list_item</code>,{' '}
-          <code className="font-mono">check_list_item</code>, <code className="font-mono">search</code>,{' '}
-          <code className="font-mono">capture_to_inbox</code>. Der Agent sieht nur die Werkzeuge, für die der Key
-          berechtigt ist; Freigaben gelten wie für dich selbst. ChatGPT im Browser und claude.ai brauchen OAuth und
-          werden noch nicht unterstützt.
-        </p>
-      </div>
 
-      {/* Simulator */}
-      <div className="pt-4 border-t border-border">
-        <div className="flex items-center gap-3 mb-3">
-          <div className="w-7 h-7 bg-accent text-on-accent flex items-center justify-center flex-shrink-0">
-            <Webhook className="w-4 h-4" />
-          </div>
-          <div>
-            <h3 className="text-sm font-bold text-main">Live Smarthome Webhook-Simulator</h3>
-            <p className="text-xs text-muted">
-              Teste den Webhook-Endpunkt direkt hier
-              {newlyCreatedKey ? ' – mit dem eben erzeugten Key und seinen Berechtigungen.' : ' – mit deiner Anmeldung.'}
-            </p>
-          </div>
-        </div>
+        {access === 'rest' && (
+          <div className="space-y-5">
+            {/* Reading: e.g. a smart home sensor for what is due today */}
+            <div>
+              <div className="flex items-center gap-2 text-xs font-medium text-muted mb-2">
+                <Terminal className="w-3.5 h-3.5 text-accent" />
+                <span>Lesen, z. B. was heute fällig ist (Recht „Aufgaben lesen“):</span>
+              </div>
+              <pre className="p-3 bg-canvas border border-border font-mono text-xs text-main overflow-x-auto">
+{`curl "${baseUrl}/api/v1/tasks?due=today&status=open" \\
+  -H "X-API-Key: ${exampleToken}"`}
+              </pre>
+              <p className="mt-2 text-[11px] text-faint">
+                Filter: <code className="font-mono">due=today</code>, <code className="font-mono">due=overdue</code> oder ein
+                Datum (<code className="font-mono">JJJJ-MM-TT</code>, fällig bis einschließlich), <code className="font-mono">status=open|done</code>,{' '}
+                <code className="font-mono">taskListId</code>. Listen: <code className="font-mono">GET /api/v1/lists</code> und{' '}
+                <code className="font-mono">/lists/ID</code>. Mit „Ändern“ auch <code className="font-mono">PATCH /api/v1/thoughts/ID</code>{' '}
+                (z. B. <code className="font-mono">{'{"isCompleted": true}'}</code>).
+              </p>
+              <div className="flex items-center gap-2 text-xs font-medium text-muted mt-3 mb-2">
+                <Terminal className="w-3.5 h-3.5 text-accent" />
+                <span>Home Assistant: Sensor „Heute fällig“ (configuration.yaml)</span>
+              </div>
+              <pre className="p-3 bg-canvas border border-border font-mono text-xs text-main overflow-x-auto">
+{`rest:
+  - resource: "${baseUrl}/api/v1/tasks?due=today&status=open"
+    headers:
+      X-API-Key: "${exampleToken}"
+    scan_interval: 900
+    sensor:
+      - name: "MindSift heute fällig"
+        value_template: "{{ value_json | length }}"`}
+              </pre>
+            </div>
 
-        <div className="flex flex-wrap gap-1.5 mb-3" role="radiogroup" aria-label="Ziel">
-          {(
-            [
-              ['triage', '📥 Inbox'],
-              ['task', '📋 Aufgabe'],
-              ['list_item', '📝 Listeneintrag'],
-            ] as const
-          ).map(([value, label]) => (
-            <button
-              key={value}
-              type="button"
-              role="radio"
-              aria-checked={simTarget === value}
-              onClick={() => setSimTarget(value)}
-              className={`h-11 sm:h-8 px-3 rounded-btn border text-xs transition-colors ${
-                simTarget === value ? 'border-accent bg-accent/10 text-main' : 'border-border text-muted hover:text-main'
-              }`}
-            >
-              {label}
-            </button>
-          ))}
-          {simTarget === 'list_item' && (
-            <select
-              value={simListId}
-              onChange={(e) => setSimListId(e.target.value)}
-              className="h-11 sm:h-8 px-2 input-field text-base sm:text-xs bg-panel"
-              aria-label="Liste"
-            >
-              <option value="">Liste wählen…</option>
-              {lists.map((l) => (
-                <option key={l.id} value={l.id}>
-                  {l.icon} {l.title}
-                </option>
-              ))}
-            </select>
-          )}
-          {simTarget === 'task' && (
-            <select
-              value={simTaskListId}
-              onChange={(e) => setSimTaskListId(e.target.value)}
-              className="h-11 sm:h-8 px-2 input-field text-base sm:text-xs bg-panel"
-              aria-label="Aufgabenliste"
-            >
-              <option value="">Ohne Aufgabenliste</option>
-              {taskLists.map((tl) => (
-                <option key={tl.id} value={tl.id}>
-                  {tl.icon} {tl.title}
-                </option>
-              ))}
-            </select>
-          )}
-        </div>
+            <div className="pt-4 border-t border-border">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="w-7 h-7 bg-accent text-on-accent flex items-center justify-center flex-shrink-0">
+                  <Webhook className="w-4 h-4" />
+                </div>
+                <div>
+                  <h3 className="text-sm font-bold text-main">Einliefern testen (Webhook)</h3>
+                  <p className="text-xs text-muted">
+                    Teste das Einliefern per <code className="font-mono">POST /api/v1/webhooks/ingest</code> direkt hier
+                    {newlyCreatedKey ? ' – mit dem eben erzeugten Key und seinen Berechtigungen.' : ' – mit deiner Anmeldung.'}
+                  </p>
+                </div>
+              </div>
 
-        {simTarget === 'triage' && (
-          <div className="flex flex-wrap gap-1.5 mb-3">
-            {[
-              { label: '🧺 Waschmaschine fertig', text: 'Waschmaschine im Keller ist fertig – Wäsche aufhängen!', prio: 'high' as PriorityLevel },
-              { label: '🚨 Rauchmelder Batterie', text: 'Rauchmelder Dachgeschoss meldet niedrige Batterie (12%)', prio: 'urgent' as PriorityLevel },
-              { label: '💧 Luftfeuchtigkeit Keller', text: 'Kellerfeuchtigkeit über 70% – Lüften oder Entfeuchter starten', prio: 'urgent' as PriorityLevel },
-            ].map((preset) => (
-              <button
-                key={preset.label}
-                type="button"
-                onClick={() => {
-                  setSimTitle(preset.text);
-                  setSimPriority(preset.prio);
-                }}
-                className="btn-action text-xs"
-              >
-                {preset.label}
-              </button>
-            ))}
-          </div>
-        )}
+              <div className="flex flex-wrap gap-1.5 mb-3" role="radiogroup" aria-label="Ziel">
+                {(
+                  [
+                    ['triage', '📥 Inbox'],
+                    ['task', '📋 Aufgabe'],
+                    ['list_item', '📝 Listeneintrag'],
+                  ] as const
+                ).map(([value, label]) => (
+                  <button
+                    key={value}
+                    type="button"
+                    role="radio"
+                    aria-checked={simTarget === value}
+                    onClick={() => setSimTarget(value)}
+                    className={`h-11 sm:h-8 px-3 rounded-btn border text-xs transition-colors ${
+                    simTarget === value ? 'border-accent bg-accent/10 text-main' : 'border-border text-muted hover:text-main'
+                  }`}
+                  >
+                    {label}
+                  </button>
+                ))}
+                {simTarget === 'list_item' && (
+                  <select
+                    value={simListId}
+                    onChange={(e) => setSimListId(e.target.value)}
+                    className="h-11 sm:h-8 px-2 input-field text-base sm:text-xs bg-panel"
+                    aria-label="Liste"
+                  >
+                    <option value="">Liste wählen…</option>
+                    {lists.map((l) => (
+                      <option key={l.id} value={l.id}>
+                        {l.icon} {l.title}
+                      </option>
+                    ))}
+                  </select>
+              )}
+                {simTarget === 'task' && (
+                  <select
+                    value={simTaskListId}
+                    onChange={(e) => setSimTaskListId(e.target.value)}
+                    className="h-11 sm:h-8 px-2 input-field text-base sm:text-xs bg-panel"
+                    aria-label="Aufgabenliste"
+                  >
+                    <option value="">Ohne Aufgabenliste</option>
+                    {taskLists.map((tl) => (
+                      <option key={tl.id} value={tl.id}>
+                        {tl.icon} {tl.title}
+                      </option>
+                    ))}
+                  </select>
+              )}
+              </div>
 
-        <div className="flex flex-col sm:flex-row gap-2">
-          <input
-            type="text"
-            value={simTitle}
-            onChange={(e) => setSimTitle(e.target.value)}
-            className="flex-1 h-11 sm:h-9 px-3 input-field text-base sm:text-sm"
-          />
-          <button
-            type="button"
-            onClick={handleSimulateWebhook}
-            className="btn-primary h-11 sm:h-9 px-4 text-xs sm:text-sm flex items-center justify-center gap-1.5"
-          >
-            <Zap className="w-4 h-4" />
-            <span>Webhook jetzt abfeuern</span>
-          </button>
-        </div>
+              {simTarget === 'triage' && (
+                <div className="flex flex-wrap gap-1.5 mb-3">
+                  {[
+                    { label: '🧺 Waschmaschine fertig', text: 'Waschmaschine im Keller ist fertig – Wäsche aufhängen!', prio: 'high' as PriorityLevel },
+                    { label: '🚨 Rauchmelder Batterie', text: 'Rauchmelder Dachgeschoss meldet niedrige Batterie (12%)', prio: 'urgent' as PriorityLevel },
+                    { label: '💧 Luftfeuchtigkeit Keller', text: 'Kellerfeuchtigkeit über 70% – Lüften oder Entfeuchter starten', prio: 'urgent' as PriorityLevel },
+                  ].map((preset) => (
+                    <button
+                      key={preset.label}
+                      type="button"
+                      onClick={() => {
+                        setSimTitle(preset.text);
+                        setSimPriority(preset.prio);
+                      }}
+                      className="btn-action text-xs"
+                    >
+                      {preset.label}
+                    </button>
+                  ))}
+                </div>
+            )}
 
-        {simStatus && (
-          <p className={`mt-3 text-xs font-medium ${simStatus.startsWith('❌') ? 'text-status-err' : 'text-status-ok'}`}>{simStatus}</p>
-        )}
+              <div className="flex flex-col sm:flex-row gap-2">
+                <input
+                  type="text"
+                  value={simTitle}
+                  onChange={(e) => setSimTitle(e.target.value)}
+                  className="flex-1 h-11 sm:h-9 px-3 input-field text-base sm:text-sm"
+                />
+                <button
+                  type="button"
+                  onClick={handleSimulateWebhook}
+                  className="btn-primary h-11 sm:h-9 px-4 text-xs sm:text-sm flex items-center justify-center gap-1.5"
+                >
+                  <Zap className="w-4 h-4" />
+                  <span>Webhook jetzt abfeuern</span>
+                </button>
+              </div>
 
-        {/* Code Example Snippets */}
-        <div className="mt-4 space-y-2">
-          <div className="flex items-center gap-2 text-xs font-medium text-muted">
-            <Terminal className="w-3.5 h-3.5 text-accent" />
-            <span>cURL / Home Assistant REST Command:</span>
-          </div>
-          <pre className="p-3 bg-canvas border border-border font-mono text-xs text-main overflow-x-auto">
+              {simStatus && (
+                <p className={`mt-3 text-xs font-medium ${simStatus.startsWith('❌') ? 'text-status-err' : 'text-status-ok'}`}>{simStatus}</p>
+            )}
+
+              {/* Code Example Snippets */}
+              <div className="mt-4 space-y-2">
+                <div className="flex items-center gap-2 text-xs font-medium text-muted">
+                  <Terminal className="w-3.5 h-3.5 text-accent" />
+                  <span>cURL / Home Assistant REST Command:</span>
+                </div>
+                <pre className="p-3 bg-canvas border border-border font-mono text-xs text-main overflow-x-auto">
 {`curl -X POST "${baseUrl}/api/v1/webhooks/ingest" \\
   -H "X-API-Key: ${exampleToken}" \\
   -H "Content-Type: application/json" \\
   -d '${examplePayload}'`}
-          </pre>
-          <p className="text-[11px] text-faint">
-            Der Key gehört in den Header <code className="font-mono">X-API-Key</code>, nicht in die URL, damit er nicht in
-            Proxy-Logs landet. Fehlt dem Key die Berechtigung für das Ziel, antwortet der Server mit 403.
-          </p>
-        </div>
-      </div>
+                </pre>
+                <p className="text-[11px] text-faint">
+                  Der Key gehört in den Header <code className="font-mono">X-API-Key</code>, nicht in die URL, damit er nicht in
+                  Proxy-Logs landet. Fehlt dem Key die Berechtigung für das Ziel, antwortet der Server mit 403.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
 
+        {access === 'mcp' && (
+          <div>
+            <div className="flex items-center gap-3 mb-3">
+              <div className="w-7 h-7 bg-accent text-on-accent flex items-center justify-center flex-shrink-0">
+                <Bot className="w-4 h-4" />
+              </div>
+              <div>
+                <h3 className="text-sm font-bold text-main">KI-Agenten anbinden (MCP)</h3>
+                <p className="text-xs text-muted">
+                  MindSift ist ein MCP-Server: Claude Code, Codex, Claude Desktop, Cursor und eigene Agenten nutzen dieselben
+                  Schlüssel und Rechte wie curl, nur in der Form, die Agenten erwarten.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap gap-1.5 mb-2" role="radiogroup" aria-label="Agent">
+              {(
+                [
+                  ['claude', 'Claude Code'],
+                  ['codex', 'OpenAI Codex'],
+                  ['json', 'Claude Desktop / Cursor'],
+                ] as const
+              ).map(([value, label]) => (
+                <button
+                  key={value}
+                  type="button"
+                  role="radio"
+                  aria-checked={mcpClient === value}
+                  onClick={() => setMcpClient(value)}
+                  className={`h-11 sm:h-8 px-3 rounded-btn border text-xs transition-colors ${
+                    mcpClient === value ? 'border-accent bg-accent/10 text-main' : 'border-border text-muted hover:text-main'
+                  }`}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+            <pre className="p-3 bg-canvas border border-border font-mono text-xs text-main overflow-x-auto">{mcpSnippet}</pre>
+            <p className="mt-2 text-[11px] text-faint">
+              Werkzeuge: <code className="font-mono">list_task_lists</code>, <code className="font-mono">create_task_list</code>,{' '}
+              <code className="font-mono">list_tasks</code>, <code className="font-mono">get_task</code>,{' '}
+              <code className="font-mono">create_task</code>, <code className="font-mono">update_task</code>,{' '}
+              <code className="font-mono">complete_task</code>, <code className="font-mono">delete_task</code>,{' '}
+              <code className="font-mono">list_lists</code>, <code className="font-mono">create_list</code>,{' '}
+              <code className="font-mono">get_list</code>, <code className="font-mono">add_list_item</code>,{' '}
+              <code className="font-mono">check_list_item</code>, <code className="font-mono">update_list_item</code>,{' '}
+              <code className="font-mono">search</code>, <code className="font-mono">capture_to_inbox</code>. Der Agent sieht
+              nur die Werkzeuge, für die der Schlüssel berechtigt ist; Freigaben gelten wie für dich selbst. ChatGPT im Browser und claude.ai brauchen OAuth und
+              werden noch nicht unterstützt.
+            </p>
+          </div>
+        )}
+      </div>
     </div>
   );
 };