Freigabe (Human-in-the-Loop) — UI-Kit-Galerie

Beispiele

Folgenreiche Aktion — Zustimmen oder Ablehnen (Entscheidung bleibt sichtbar)

Erinnerungen an 2 Kunden senden?

Der Agent möchte E-Mails an die überfälligen Aufträge verschicken.

Werkzeug: smtp__send
Empfänger: Beispiel AG, Muster GmbH
Vorlage: zahlungserinnerung-freundlich

Bereits zugestimmt

Bericht erzeugen?

Eigenschaften

Prop	Typ	Default	Builder-Label
title *	string	—	Frage
text	string	""	Erläuterung
details	array	[]	Details (Schlüssel/Wert)
approveLabel	string	"Zustimmen"	Zustimmen-Text
denyLabel	string	"Ablehnen"	Ablehnen-Text
tone	string: default \| danger	"default"	Ton (danger = folgenreich)
decision	string: open \| approved \| denied	"open"	Vorbelegte Entscheidung

* Pflicht-Prop

Events & Slots

Events: ⚡ approve⚡ deny — im Surface per on: {<event>: {action, params}} verdrahtbar.

Genutzte Design-Tokens

border.hairlinecolor.action.on-primarycolor.action.on-secondarycolor.action.primarycolor.action.secondarycolor.action.secondary-bordercolor.border.strongcolor.status.dangercolor.status.successcolor.surface.defaultcolor.text.defaultcolor.text.inversecolor.text.mutedfont.family.defaultfont.family.monoleading.baseradius.controlsize.2size.24size.4text.mdtext.smtext.xsweight.semibold

LLM-Notizen

component.confirmation

Human-in-the-Loop: Rückfrage, bevor ein Agent etwas Folgenreiches tut (E-Mails senden, löschen, buchen).

Wann nutzen

IMMER vor Aktionen mit side_effect: write|external. Der Agent pausiert, bis der Mensch entschieden hat.
tone: danger für unumkehrbare Aktionen.

Wichtige Props

title*, text, details = [{label, value}] (Werkzeug, Empfänger, Vorlage …), approveLabel, denyLabel, decision (open|approved|denied).

Beispiel-Node


{
  "definition": "component.confirmation",
  "props": {"title": "Erinnerungen senden?", "tone": "danger", "details": [{"label": "Werkzeug", "value": "smtp__send"}]},
  "on": {
    "approve": {"action": "action.notify.show", "params": {"title": "Freigegeben", "tone": "success"}},
    "deny": {"action": "action.notify.show", "params": {"title": "Abgelehnt"}}
  }
}

Hinweise

Nach der Wahl verschwinden die Knöpfe, die Entscheidung bleibt sichtbar (Nachvollziehbarkeit).
Emittiert approve bzw. deny.