sandrodachandClaude Opus 5.5
5c711c2cf7
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m33s
Keys get scopes when created (webhook:triage, webhook:task, webhook:list; default triage, old keys become triage). The webhook ingest learns target task (optional task list) and list_item (needs a list the owner may write to); /inbox checks the scope of its target as well; a missing scope answers 403. Keys can no longer open live streams, which carried all of the owner's events. The visible key UI lived in the account settings while EcosystemView was never rendered; it is replaced by ApiKeysPanel in the settings with scope chips, scope badges per key and a simulator for all three targets. Examples send the key as X-API-Key header, not in the URL. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
381 lines
15 KiB
TypeScript
381 lines
15 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
Key,
|
||
Plus,
|
||
Trash2,
|
||
Copy,
|
||
Check,
|
||
Webhook,
|
||
Zap,
|
||
Terminal,
|
||
} from 'lucide-react';
|
||
import { APIKey, ApiKeyScope, PriorityLevel, SharedList, TaskList } from '../../lib/types';
|
||
import { api, triggerHaptic } from '../../lib/api';
|
||
|
||
interface ApiKeysPanelProps {
|
||
onIngested?: () => void;
|
||
}
|
||
|
||
// What a key may deliver; keys never read anything
|
||
const SCOPES: { id: ApiKeyScope; label: string; hint: string }[] = [
|
||
{ id: 'webhook:triage', label: '📥 Triage / Inbox', hint: 'Gedanken in die Inbox' },
|
||
{ id: 'webhook:task', label: '📋 Aufgaben', hint: 'Aufgaben direkt anlegen' },
|
||
{ id: 'webhook:list', label: '📝 Listeneinträge', hint: 'Einträge zu Listen hinzufügen' },
|
||
];
|
||
const scopeLabel = (id: string) => SCOPES.find((s) => s.id === id)?.label || id;
|
||
|
||
type SimTarget = 'triage' | 'task' | 'list_item';
|
||
|
||
// Personal API keys with scopes, a simulator and copyable examples (settings → Private Webhooks)
|
||
export const ApiKeysPanel: React.FC<ApiKeysPanelProps> = ({ onIngested }) => {
|
||
const [keys, setKeys] = useState<APIKey[]>([]);
|
||
const [newKeyName, setNewKeyName] = useState('');
|
||
const [newKeyScopes, setNewKeyScopes] = useState<ApiKeyScope[]>(['webhook:triage']);
|
||
const [newlyCreatedKey, setNewlyCreatedKey] = useState<string | null>(null);
|
||
const [copiedKey, setCopiedKey] = useState(false);
|
||
|
||
// Live Webhook Simulator State
|
||
const [simTitle, setSimTitle] = useState('Waschmaschine im Keller ist fertig!');
|
||
const [simPriority, setSimPriority] = useState<PriorityLevel>('high');
|
||
const [simTarget, setSimTarget] = useState<SimTarget>('triage');
|
||
const [simListId, setSimListId] = useState('');
|
||
const [simTaskListId, setSimTaskListId] = useState('');
|
||
const [simStatus, setSimStatus] = useState<string | null>(null);
|
||
const [lists, setLists] = useState<SharedList[]>([]);
|
||
const [taskLists, setTaskLists] = useState<TaskList[]>([]);
|
||
|
||
const loadKeys = async () => {
|
||
const k = await api.getAPIKeys();
|
||
setKeys(k);
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadKeys();
|
||
api.getAllLists().then(setLists).catch(() => {});
|
||
api.getTaskLists().then(setTaskLists).catch(() => {});
|
||
}, []);
|
||
|
||
const toggleScope = (id: ApiKeyScope) => {
|
||
setNewKeyScopes((prev) => {
|
||
const next = prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id];
|
||
return next.length > 0 ? next : prev; // at least one
|
||
});
|
||
};
|
||
|
||
const handleCreateKey = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
triggerHaptic(15);
|
||
const created = await api.createAPIKey(newKeyName.trim() || 'Home Assistant', newKeyScopes);
|
||
if (created.rawKey) {
|
||
setNewlyCreatedKey(created.rawKey);
|
||
}
|
||
setNewKeyName('');
|
||
setNewKeyScopes(['webhook:triage']);
|
||
await loadKeys();
|
||
};
|
||
|
||
const handleDeleteKey = async (id: string) => {
|
||
if (!window.confirm('Diesen API-Schlüssel wirklich widerrufen?')) return;
|
||
triggerHaptic(20);
|
||
await api.deleteAPIKey(id);
|
||
await loadKeys();
|
||
};
|
||
|
||
const handleCopy = (text: string) => {
|
||
navigator.clipboard.writeText(text);
|
||
setCopiedKey(true);
|
||
setTimeout(() => setCopiedKey(false), 2000);
|
||
};
|
||
|
||
const handleSimulateWebhook = async () => {
|
||
triggerHaptic(20);
|
||
if (simTarget === 'list_item' && !simListId) {
|
||
setSimStatus('❌ Bitte eine Liste wählen.');
|
||
return;
|
||
}
|
||
try {
|
||
// With a freshly created key the simulator tests exactly that key (and its scopes)
|
||
await api.testWebhookIngest(newlyCreatedKey, {
|
||
title: simTitle,
|
||
priority: simPriority,
|
||
tags: simTarget === 'list_item' ? [] : ['smarthome', 'automation'],
|
||
target: simTarget,
|
||
taskListId: simTarget === 'task' ? simTaskListId || undefined : undefined,
|
||
listId: simTarget === 'list_item' ? simListId : undefined,
|
||
});
|
||
setSimStatus(
|
||
simTarget === 'task'
|
||
? '✅ Webhook erfolgreich ausgelöst! Die Aufgabe ist angelegt.'
|
||
: simTarget === 'list_item'
|
||
? '✅ Webhook erfolgreich ausgelöst! Der Eintrag steht in der Liste.'
|
||
: '✅ Webhook erfolgreich ausgelöst! Neue Karte liegt in deiner Inbox.'
|
||
);
|
||
onIngested?.();
|
||
setTimeout(() => setSimStatus(null), 4000);
|
||
} catch (err: any) {
|
||
setSimStatus(`❌ Fehler: ${err.message}`);
|
||
}
|
||
};
|
||
|
||
const exampleToken = newlyCreatedKey || 'mindsift_sec_dein_api_key';
|
||
const baseUrl = window.location.origin;
|
||
const examplePayload =
|
||
simTarget === 'task'
|
||
? `{
|
||
"target": "task",
|
||
"title": "Filter der Lüftungsanlage wechseln",
|
||
"priority": "high",
|
||
"dueDate": "2026-11-15T09:00"${simTaskListId ? `,\n "taskListId": "${simTaskListId}"` : ''}
|
||
}`
|
||
: simTarget === 'list_item'
|
||
? `{
|
||
"target": "list_item",
|
||
"listId": "${simListId || 'ID_DER_LISTE'}",
|
||
"content": "Hafermilch",
|
||
"quantity": "2"
|
||
}`
|
||
: `{
|
||
"title": "Kellerfeuchtigkeit über 70%",
|
||
"priority": "urgent",
|
||
"tags": ["smarthome", "keller"]
|
||
}`;
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* API keys */}
|
||
<div>
|
||
<div className="flex items-center gap-3 mb-2">
|
||
<div className="w-8 h-8 bg-accent text-on-accent flex items-center justify-center flex-shrink-0">
|
||
<Key className="w-4 h-4" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-sm font-bold text-main">Webhooks & Ingestion API-Schlüssel</h3>
|
||
<p className="text-xs text-muted">
|
||
Verbinde Home Assistant, Zigbee2MQTT, n8n oder eigene Cronjobs mit MindSift. Ein Key kann nur Daten
|
||
einliefern, nie lesen; was genau, legst du pro Key fest.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<form onSubmit={handleCreateKey} className="mt-3 space-y-2">
|
||
<div className="flex flex-col sm:flex-row gap-2">
|
||
<input
|
||
type="text"
|
||
value={newKeyName}
|
||
onChange={(e) => setNewKeyName(e.target.value)}
|
||
placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
|
||
className="w-full sm:flex-1 min-w-0 h-11 sm:h-9 px-3 input-field text-base sm:text-sm"
|
||
/>
|
||
<button type="submit" className="btn-primary h-11 sm:h-9 px-4 text-sm flex items-center justify-center gap-1.5">
|
||
<Plus className="w-4 h-4" />
|
||
<span>API-Key erzeugen</span>
|
||
</button>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2" role="group" aria-label="Berechtigungen des Keys">
|
||
<span className="text-xs text-muted">Darf einliefern:</span>
|
||
{SCOPES.map((sc) => {
|
||
const on = newKeyScopes.includes(sc.id);
|
||
return (
|
||
<button
|
||
key={sc.id}
|
||
type="button"
|
||
role="checkbox"
|
||
aria-checked={on}
|
||
title={sc.hint}
|
||
onClick={() => toggleScope(sc.id)}
|
||
className={`h-11 sm:h-8 px-3 rounded-btn border text-xs inline-flex items-center gap-1.5 transition-colors ${
|
||
on ? 'border-accent bg-accent/10 text-main' : 'border-border text-muted hover:text-main'
|
||
}`}
|
||
>
|
||
{on && <Check className="w-3.5 h-3.5 text-accent" />}
|
||
{sc.label}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</form>
|
||
|
||
{newlyCreatedKey && (
|
||
<div className="mt-3 p-3 bg-accent/15 border border-accent/30 flex flex-wrap items-center justify-between gap-3">
|
||
<div className="min-w-0">
|
||
<p className="text-xs font-semibold text-accent mb-1">Neuer API-Schlüssel erstellt (bitte jetzt kopieren):</p>
|
||
<code className="text-xs sm:text-sm font-mono text-main break-all">{newlyCreatedKey}</code>
|
||
</div>
|
||
<button onClick={() => handleCopy(newlyCreatedKey)} className="btn-primary h-8 px-3 text-xs">
|
||
{copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
|
||
<span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Active Keys List */}
|
||
<div className="mt-3 border border-border divide-y divide-border">
|
||
{keys.length === 0 ? (
|
||
<p className="text-xs text-faint px-3 py-2">Noch keine dedizierten API-Schlüssel hinterlegt.</p>
|
||
) : (
|
||
keys.map((k) => (
|
||
<div key={k.id} className="px-3 py-2 bg-canvas flex items-center justify-between gap-3">
|
||
<div className="min-w-0 flex flex-wrap items-center gap-x-3 gap-y-1">
|
||
<span className="text-sm font-medium text-main">{k.name}</span>
|
||
<span className="text-xs font-mono text-accent">{k.keyPrefix}</span>
|
||
{k.scopes
|
||
.split(',')
|
||
.filter(Boolean)
|
||
.map((sc) => (
|
||
<span key={sc} className="px-1.5 py-0.5 rounded-btn border border-border text-[10px] text-muted">
|
||
{scopeLabel(sc)}
|
||
</span>
|
||
))}
|
||
{k.lastUsedAt && (
|
||
<span className="text-xs text-faint">
|
||
Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<button
|
||
onClick={() => handleDeleteKey(k.id)}
|
||
className="btn-icon btn-icon-danger w-7 h-7 shrink-0"
|
||
aria-label={`API-Key ${k.name} löschen`}
|
||
>
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</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>
|
||
|
||
<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>
|
||
|
||
{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-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>
|
||
|
||
{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>
|
||
|
||
</div>
|
||
);
|
||
};
|