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
spacing	string: default \| none \| sm \| md \| lg \| xl	"default"	Eigenabstand

* Pflicht-Prop

Events & Slots

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

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--confirmation-action-on-primary`	`var(--color-action-on-primary)`
`--confirmation-action-on-secondary`	`var(--color-action-on-secondary)`
`--confirmation-action-primary`	`var(--color-action-primary)`
`--confirmation-action-secondary`	`var(--color-action-secondary)`
`--confirmation-action-secondary-border`	`var(--color-action-secondary-border)`
`--confirmation-border-strong`	`var(--color-border-strong)`
`--confirmation-radius-control`	`var(--radius-control)`
`--confirmation-status-danger`	`var(--color-status-danger)`
`--confirmation-status-success`	`var(--color-status-success)`
`--confirmation-surface-default`	`var(--color-surface-default)`
`--confirmation-text-default`	`var(--color-text-default)`
`--confirmation-text-inverse`	`var(--color-text-inverse)`
`--confirmation-text-muted`	`var(--color-text-muted)`

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.12size.2size.24size.4size.6size.8text.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.