zidane-ui 9.1.4 → 9.1.5

package/dist/chat/interactions/InboxPanel.js

@@ -18,6 +18,12 @@ import { useEffect, useState } from "react";
 * card alone keeps the agent waiting. Esc hands the keyboard back
 * (`onEscape`).
 *
+* Under what waits on the user, the session's plans: `inProgress` (the plan
+* being applied, or the stopped one that can resume) and `recent` (closed
+* plans). The app passes them (`zidane-ui/session`'s `PlanTracker` and
+* `RecentPlans`); the sections show only when given. Only "Needs you" asks
+* for attention: the tab's badge counts requests, never steps.
+*
 *   <InboxPanel sessionId={id} focus={focusRequest === INBOX_PANEL_ID} onFocusTaken={takeFocusRequest} />
 */
 /** What a dismissed question tells the agent. */
@@ -27,7 +33,7 @@ const DISMISSED = "dismissed by user";
 *
 * @param props - The {@link InboxPanelProps}.
 */
-function InboxPanel({ sessionId, focus = false, onFocusTaken, onEscape, Markdown, className, style }) {
+function InboxPanel({ sessionId, focus = false, onFocusTaken, onEscape, Markdown, inProgress, recent, className, style }) {
 	const interactions = useChatHost().interactions;
 	const labels = useChatLabels();
 	const pending = usePendingInteractions(sessionId);
@@ -66,57 +72,89 @@ function InboxPanel({ sessionId, focus = false, onFocusTaken, onEscape, Markdown
 		head,
 		onFocusTaken
 	]);
-	if (rows.length === 0) return /* @__PURE__ */ jsx(PanelEmpty, {
+	const hasPlans = Boolean(inProgress) || Boolean(recent);
+	if (rows.length === 0 && !hasPlans) return /* @__PURE__ */ jsx(PanelEmpty, {
 		icon: "i-ph-tray",
 		title: labels.inboxEmpty,
 		className,
 		style
 	});
-	return /* @__PURE__ */ jsx("div", {
-		className: `flex-1 min-h-0 overflow-y-auto${className ? ` ${className}` : ""}`,
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex-1 min-h-0 overflow-y-auto p-3 flex flex-col gap-4${className ? ` ${className}` : ""}`,
 		style,
-		children: /* @__PURE__ */ jsx("ul", {
-			className: "m-0 p-3 list-none flex flex-col gap-2",
-			"aria-label": labels.interactionsLabel,
-			onKeyDown: (e) => {
-				if (e.key === "Escape" && onEscape) {
-					e.preventDefault();
-					e.stopPropagation();
-					onEscape();
-				}
-			},
-			children: rows.map((row) => {
-				const isHead = row === head;
-				const open = isHead || expanded === row.item.requestId;
-				const request = row.item.request;
-				return /* @__PURE__ */ jsxs("li", {
-					"data-state": row.leaving ? "leaving" : "open",
-					"data-testid": "inbox-card",
-					className: "zg-inbox-card zg-raised border rounded-zg-lg overflow-hidden",
-					children: [/* @__PURE__ */ jsx(CardHeader, {
-						request,
-						live: row.item.live !== false,
-						open,
-						collapsible: !isHead,
-						onToggle: () => setExpanded((e) => e === row.item.requestId ? null : row.item.requestId)
-					}), open && !row.leaving && interactions && /* @__PURE__ */ jsx("div", {
-						className: "px-3 pb-3",
-						children: request.kind === "plan" ? /* @__PURE__ */ jsx(PlanCard, {
-							request,
-							autoFocus: isHead && focus,
-							Markdown,
-							onAnswer: (response) => interactions.answer(request.id, response)
-						}) : /* @__PURE__ */ jsx(QuestionForm, {
+		children: [
+			hasPlans && /* @__PURE__ */ jsx(InboxSection, {
+				title: labels.inboxNeedsYou,
+				children: rows.length === 0 && /* @__PURE__ */ jsx("p", {
+					className: "m-0 px-1 zg-meta",
+					children: labels.inboxEmpty
+				})
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: `m-0 p-0 list-none flex flex-col gap-2${rows.length === 0 ? " hidden" : ""}`,
+				"aria-label": labels.interactionsLabel,
+				onKeyDown: (e) => {
+					if (e.key === "Escape" && onEscape) {
+						e.preventDefault();
+						e.stopPropagation();
+						onEscape();
+					}
+				},
+				children: rows.map((row) => {
+					const isHead = row === head;
+					const open = isHead || expanded === row.item.requestId;
+					const request = row.item.request;
+					return /* @__PURE__ */ jsxs("li", {
+						"data-state": row.leaving ? "leaving" : "open",
+						"data-testid": "inbox-card",
+						className: "zg-inbox-card zg-raised border rounded-zg-lg overflow-hidden",
+						children: [/* @__PURE__ */ jsx(CardHeader, {
 							request,
-							autoFocus: isHead && focus,
-							Markdown,
-							onAnswer: (response) => interactions.answer(request.id, response),
-							...interactions.cancel ? { onDismiss: () => interactions.cancel(request.id, DISMISSED) } : {}
-						})
-					})]
-				}, row.item.requestId);
+							live: row.item.live !== false,
+							open,
+							collapsible: !isHead,
+							onToggle: () => setExpanded((e) => e === row.item.requestId ? null : row.item.requestId)
+						}), open && !row.leaving && interactions && /* @__PURE__ */ jsx("div", {
+							className: "px-3 pb-3",
+							children: request.kind === "plan" ? /* @__PURE__ */ jsx(PlanCard, {
+								request,
+								autoFocus: isHead && focus,
+								Markdown,
+								onAnswer: (response) => interactions.answer(request.id, response)
+							}) : /* @__PURE__ */ jsx(QuestionForm, {
+								request,
+								autoFocus: isHead && focus,
+								Markdown,
+								onAnswer: (response) => interactions.answer(request.id, response),
+								...interactions.cancel ? { onDismiss: () => interactions.cancel(request.id, DISMISSED) } : {}
+							})
+						})]
+					}, row.item.requestId);
+				})
+			}),
+			inProgress && /* @__PURE__ */ jsx(InboxSection, {
+				title: labels.inboxInProgress,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "zg-raised border rounded-zg-lg px-1",
+					children: inProgress
+				})
+			}),
+			recent && /* @__PURE__ */ jsx(InboxSection, {
+				title: labels.inboxRecent,
+				children: recent
 			})
-		})
+		]
+	});
+}
+/** A titled part of the Inbox. */
+function InboxSection({ title, children }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: "flex flex-col gap-2",
+		"aria-label": title,
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "zg-section-label m-0 px-1",
+			children: title
+		}), children]
 	});
 }
 function CardHeader({ request, live, open, collapsible, onToggle }) {

package/dist/chat/interactions/PlanCard.d.ts

@@ -1,6 +1,6 @@
 import { MarkdownSlotProps } from "../transcript/renderers.js";
 import { CSSProperties, ComponentType } from "react";
-import { PlanPayload, PlanRequest, PlanResponse } from "zidane/chat";
+import { PlanProposal, PlanRequest, PlanResponse } from "zidane/chat";
 //#region src/chat/interactions/PlanCard.d.ts
 /** Props for {@link PlanCard}. */
 interface PlanCardProps {
@@ -26,7 +26,7 @@ declare function PlanCard({ request, autoFocus, onAnswer, Markdown, className, s
 /** Props for {@link PlanBody}. */
 interface PlanBodyProps {
   /** The plan to show: its markdown and optional numbered steps. */
-  payload: PlanPayload;
+  payload: PlanProposal;
   /** Draws the plan. Defaults to the transcript's `Markdown` slot. */
   Markdown?: ComponentType<MarkdownSlotProps>;
 }

package/dist/chat/interactions/PlanCard.js

@@ -5,7 +5,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 //#region src/chat/interactions/PlanCard.tsx
 /**
-* `present_plan` as a card (the desktop app's inbox, `InteractionCard`). Renders the canonical `PlanPayload` and
+* `present_plan` as a card (the desktop app's inbox, `InteractionCard`). Renders the canonical `PlanProposal` and
 * lets the user approve / revise / reject; the structured `PlanResponse`
 * goes to the host, which serialises it for the model and, on `reject`,
 * aborts the run once the rejection is recorded (the TUI's contract).

package/dist/chat/interactions/QuestionField.d.ts

@@ -3,9 +3,10 @@ import { CSSProperties } from "react";
 import { AnswerValue, Question } from "zidane/chat";
 //#region src/chat/interactions/QuestionField.d.ts
 /**
- * Same defaults as the TUI: select/confirm required, free text optional.
+ * Same defaults as the TUI: select/confirm required, free text optional. A secret needs its value (Decline is the
+ * way out).
  *
- * @param q - The question. `required` wins; otherwise `select` and `confirm` are required and free text is optional.
+ * @param q - The question. `required` wins; otherwise `select`, `confirm` and `secret` are required and free text is optional.
  */
 declare function isRequired(q: Question): boolean;
 /** Props for {@link QuestionField}. */
@@ -24,6 +25,10 @@ interface QuestionFieldProps {
   labels: ChatLabels;
   /** The answered form (transcript): the same card, showing what was picked, nothing editable. */
   readOnly?: boolean;
+  /** Enter in a secret's password field (the form saves). */
+  onSubmit?: () => void;
+  /** Opens the Secrets panel from an answered secret. Absent: no button. */
+  onOpenSecrets?: () => void;
   /** Extra classes on the root element. */
   className?: string;
   /** Inline styles on the root element, merged after the component's own. */
@@ -34,6 +39,6 @@ interface QuestionFieldProps {
  *
  * @param props - Field props: `index`, `question`, `value`, `onChange`, `requestId`, `labels`, and `readOnly`.
  */
-declare function QuestionField({ index, question, value, onChange, requestId, labels, readOnly, className, style }: QuestionFieldProps): import("react").JSX.Element;
+declare function QuestionField({ index, question, value, onChange, requestId, labels, readOnly, onSubmit, onOpenSecrets, className, style }: QuestionFieldProps): import("react").JSX.Element;
 //#endregion
 export { QuestionField, QuestionFieldProps, isRequired };

package/dist/chat/interactions/QuestionField.js

@@ -1,6 +1,9 @@
-import "./card-ui.js";
+import { INPUT } from "./card-ui.js";
+import { secretTimeLeftIso } from "../headless/secrets.js";
+import { SecretInput } from "./SecretInput.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
+import { DEFAULT_SECRET_TTL, isSecretAnswer, isSecretReference } from "zidane/chat/pure";
 //#region src/chat/interactions/QuestionField.tsx
 /**
 * One question of an `ask_user` form as its card: the numbered prompt, its
@@ -9,25 +12,26 @@ import { useRef } from "react";
 * answer given (the transcript's answered form).
 */
 /**
-* Same defaults as the TUI: select/confirm required, free text optional.
+* Same defaults as the TUI: select/confirm required, free text optional. A secret needs its value (Decline is the
+* way out).
 *
-* @param q - The question. `required` wins; otherwise `select` and `confirm` are required and free text is optional.
+* @param q - The question. `required` wins; otherwise `select`, `confirm` and `secret` are required and free text is optional.
 */
 function isRequired(q) {
-	return q.required ?? (q.type === "select" || q.type === "confirm");
+	return q.required ?? (q.type === "select" || q.type === "confirm" || q.type === "secret");
 }
 /**
 * Renders one question of an `ask_user` form as a card: the numbered prompt, its help, and the control its type takes.
 *
 * @param props - Field props: `index`, `question`, `value`, `onChange`, `requestId`, `labels`, and `readOnly`.
 */
-function QuestionField({ index, question, value, onChange, requestId, labels, readOnly = false, className, style }) {
+function QuestionField({ index, question, value, onChange, requestId, labels, readOnly = false, onSubmit, onOpenSecrets, className, style }) {
 	const required = isRequired(question) && !readOnly;
 	const inputId = `ask-${requestId}-${question.id}`;
 	const promptId = `${inputId}-prompt`;
 	const multi = question.type === "select" && question.multi;
 	const describedBy = [question.description && `${inputId}-desc`, multi && `${inputId}-hint`].filter(Boolean).join(" ") || void 0;
-	const labelsInput = !readOnly && (question.type === "text" || question.type === "textarea");
+	const labelsInput = !readOnly && (question.type === "text" || question.type === "textarea" || question.type === "secret");
 	const promptClass = "text-zg-ui font-medium leading-5 text-[var(--zg-text)] zg-balance";
 	const promptText = /* @__PURE__ */ jsxs(Fragment, { children: [question.prompt, required && /* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
@@ -103,7 +107,7 @@ function QuestionField({ index, question, value, onChange, requestId, labels, re
 					placeholder: question.placeholder,
 					"aria-required": required || void 0,
 					"aria-describedby": describedBy,
-					className: `zg-well w-full text-zg-ui px-2.5 placeholder:text-[var(--zg-text-subtle)] h-8`
+					className: `${INPUT} h-8`
 				}),
 				!readOnly && question.type === "textarea" && /* @__PURE__ */ jsx("textarea", {
 					id: inputId,
@@ -113,7 +117,26 @@ function QuestionField({ index, question, value, onChange, requestId, labels, re
 					rows: 3,
 					"aria-required": required || void 0,
 					"aria-describedby": describedBy,
-					className: `zg-well w-full text-zg-ui px-2.5 placeholder:text-[var(--zg-text-subtle)] min-h-20 py-2 resize-y`
+					className: `${INPUT} min-h-20 py-2 resize-y`
+				}),
+				!readOnly && question.type === "secret" && /* @__PURE__ */ jsx(SecretInput, {
+					id: inputId,
+					ttl: isSecretAnswer(value) && value.kind === "secret-value" ? value.ttl : question.ttl ?? DEFAULT_SECRET_TTL,
+					onChange: (typed, ttl) => onChange({
+						kind: "secret-value",
+						value: typed,
+						ttl
+					}),
+					describedBy,
+					required,
+					onSubmit
+				}),
+				readOnly && question.type === "secret" && /* @__PURE__ */ jsx(SecretOutcome, {
+					name: question.name,
+					value,
+					labels,
+					groupProps,
+					onOpenSecrets
 				}),
 				question.type === "select" && /* @__PURE__ */ jsx("div", {
 					className: "flex flex-col gap-1.5",
@@ -179,6 +202,64 @@ function QuestionField({ index, question, value, onChange, requestId, labels, re
 	});
 }
 /**
+* An answered secret, never its value: saved (and when it expires), reused, declined. The answer is the host's
+* `SecretReference`; a raw `SecretAnswer` (not sealed yet) shows only that it was sent.
+*/
+function SecretOutcome({ name, value, labels, groupProps, onOpenSecrets }) {
+	const outcome = secretOutcome(name, value, labels);
+	return /* @__PURE__ */ jsxs("div", {
+		...groupProps,
+		role: "group",
+		className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-zg-ui leading-5",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: `flex items-center gap-1.5 ${outcome.saved ? "text-[var(--zg-text)]" : "text-[var(--zg-text-muted)]"}`,
+			"data-testid": "secret-outcome",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: `${outcome.icon} shrink-0`
+			}), outcome.text]
+		}), outcome.saved && onOpenSecrets && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onOpenSecrets,
+			className: "zg-focus-ring rounded-zg-xs bg-transparent border-0 p-0 cursor-pointer text-zg-ui text-[var(--zg-accent)] hover:underline",
+			children: labels.openSecrets
+		})]
+	});
+}
+function secretOutcome(name, value, labels) {
+	if (isSecretReference(value)) {
+		if ("declined" in value) return {
+			text: labels.secretDeclined(value.secret),
+			icon: "i-ph-minus-circle",
+			saved: false
+		};
+		if (value.reused) return {
+			text: labels.secretReused(value.secret),
+			icon: "i-ph-key",
+			saved: true
+		};
+		return {
+			text: labels.secretSaved(value.secret, secretTimeLeftIso(value.expiresAt, Date.now())),
+			icon: "i-ph-shield-check",
+			saved: true
+		};
+	}
+	if (isSecretAnswer(value)) return value.kind === "secret-declined" ? {
+		text: labels.secretDeclined(name),
+		icon: "i-ph-minus-circle",
+		saved: false
+	} : {
+		text: labels.secretSent(name),
+		icon: "i-ph-shield-check",
+		saved: false
+	};
+	return {
+		text: labels.noAnswer,
+		icon: "i-ph-minus-circle",
+		saved: false
+	};
+}
+/**
 * Radio-group keyboarding (WAI-ARIA APG): one tab stop, on the checked
 * radio or else the first; arrows move focus and pick (wrapping), Home / End
 * jump to the ends. Read-only, the arrows still move focus so every option

package/dist/chat/interactions/QuestionForm.d.ts

@@ -38,6 +38,8 @@ interface AnsweredQuestionsProps {
   id: string;
   /** Draws the intro; defaults to the transcript's `Markdown` slot. */
   Markdown?: ComponentType<MarkdownSlotProps>;
+  /** Opens the Secrets panel from an answered secret. Absent: no button. */
+  onOpenSecrets?: () => void;
   /** Extra classes on the root element. */
   className?: string;
   /** Inline styles on the root element, merged after the component's own. */
@@ -51,7 +53,7 @@ interface AnsweredQuestionsProps {
  *
  * @param props - Component props: the `payload` that was asked, the `answers`, optional `instructions`, a unique `id`, and an optional `Markdown` renderer.
  */
-declare function AnsweredQuestions({ payload, answers, instructions, id, Markdown: MarkdownProp, className, style }: AnsweredQuestionsProps): import("react").JSX.Element;
+declare function AnsweredQuestions({ payload, answers, instructions, id, Markdown: MarkdownProp, onOpenSecrets, className, style }: AnsweredQuestionsProps): import("react").JSX.Element;
 /**
  * Seed the form from the payload: `default` for free text, `selected`
  * pre-ticks for multi-select (an opt-out list arrives already ticked).

package/dist/chat/interactions/QuestionForm.js

@@ -4,6 +4,7 @@ import { BTN_GHOST_LEADING, BTN_PRIMARY, CardError, INPUT, useAutoFocus } from "
 import { QuestionField, isRequired } from "./QuestionField.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState } from "react";
+import { isSecretAnswer } from "zidane/chat/pure";
 //#region src/chat/interactions/QuestionForm.tsx
 /**
 * `ask_user` as a card (the desktop app's inbox, `InteractionCard`). The canonical `QuestionPayload` as a form:
@@ -21,6 +22,13 @@ import { useMemo, useRef, useState } from "react";
 *
 * Two ways out: **Send** answers (`onAnswer`); **Dismiss** (`onDismiss`,
 * shown when given) cancels so the agent moves on without an answer.
+*
+* A `secret` question takes a password field and a TTL (`SecretInput`) and
+* answers with a `SecretAnswer`, which the host saves and swaps for a
+* reference before anything records it. A form with secrets says **Save
+* securely** (only secrets) and offers **Decline** in place of Dismiss: it
+* answers every secret with `secret-declined`. A form of secrets alone has
+* no additional instructions. Nothing here persists the typed value.
 * Leaving the card alone keeps the question pending. Markdown (the intro)
 * draws through the transcript's `Markdown` slot unless `Markdown` is passed.
 */
@@ -40,21 +48,26 @@ function QuestionForm({ request, autoFocus = false, onAnswer, onDismiss, Markdow
 	const [error, setError] = useState(null);
 	const rootRef = useRef(null);
 	useAutoFocus(rootRef, autoFocus);
+	const secretIds = useMemo(() => payload.questions.filter((q) => q.type === "secret").map((q) => q.id), [payload.questions]);
+	const onlySecrets = secretIds.length > 0 && secretIds.length === payload.questions.length;
 	const canSubmit = useMemo(() => payload.questions.every((q) => {
-		if (!isRequired(q)) return true;
 		const value = answers[q.id];
+		if (q.type === "secret") {
+			const typed = isSecretAnswer(value) && value.kind === "secret-value" ? value.value : "";
+			return !isRequired(q) || typed.trim().length > 0;
+		}
+		if (!isRequired(q)) return true;
 		if (q.type === "confirm") return typeof value === "boolean";
 		if (q.type === "select" && q.multi) return Array.isArray(value) && value.length > 0;
 		return typeof value === "string" && value.trim().length > 0;
 	}), [answers, payload.questions]);
-	const submit = async () => {
-		if (busy || !canSubmit) return;
+	const send = async (sent) => {
 		setBusy(true);
 		setError(null);
 		try {
 			await onAnswer({
 				kind: "question",
-				answers,
+				answers: sent,
 				...instructions.trim() ? { instructions: instructions.trim() } : {}
 			});
 		} catch (err) {
@@ -62,6 +75,22 @@ function QuestionForm({ request, autoFocus = false, onAnswer, onDismiss, Markdow
 			setBusy(false);
 		}
 	};
+	const submit = async () => {
+		if (busy || !canSubmit) return;
+		const sent = { ...answers };
+		for (const id of secretIds) {
+			const value = sent[id];
+			if (!isSecretAnswer(value) || value.kind === "secret-value" && value.value.trim() === "") delete sent[id];
+		}
+		await send(sent);
+	};
+	/** Every secret answered as declined; the other answers go as they are. */
+	const decline = async () => {
+		if (busy) return;
+		const sent = { ...answers };
+		for (const id of secretIds) sent[id] = { kind: "secret-declined" };
+		await send(sent);
+	};
 	/** Explicit dismissal: the agent is told there is no answer and continues. */
 	const dismiss = async () => {
 		if (busy || !onDismiss) return;
@@ -100,9 +129,10 @@ function QuestionForm({ request, autoFocus = false, onAnswer, onDismiss, Markdow
 				value: answers[q.id],
 				onChange: (v) => setAnswer(q.id, v),
 				requestId: request.id,
-				labels
+				labels,
+				onSubmit: () => void submit()
 			}, q.id)),
-			/* @__PURE__ */ jsxs("div", {
+			!onlySecrets && /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-1.5",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex items-baseline gap-1.5",
@@ -127,7 +157,14 @@ function QuestionForm({ request, autoFocus = false, onAnswer, onDismiss, Markdow
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 pt-1",
 				children: [
-					onDismiss && /* @__PURE__ */ jsx("button", {
+					secretIds.length > 0 ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => void decline(),
+						disabled: busy,
+						title: labels.declineSecretHint,
+						className: BTN_GHOST_LEADING,
+						children: labels.declineSecret
+					}) : onDismiss && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => void dismiss(),
 						disabled: busy,
@@ -143,7 +180,7 @@ function QuestionForm({ request, autoFocus = false, onAnswer, onDismiss, Markdow
 						disabled: busy || !canSubmit,
 						className: BTN_PRIMARY,
 						"data-testid": "inbox-send",
-						children: labels.sendAnswers(payload.questions.length)
+						children: onlySecrets ? labels.saveSecurely : labels.sendAnswers(payload.questions.length)
 					})
 				]
 			})
@@ -158,7 +195,7 @@ function QuestionForm({ request, autoFocus = false, onAnswer, onDismiss, Markdow
 *
 * @param props - Component props: the `payload` that was asked, the `answers`, optional `instructions`, a unique `id`, and an optional `Markdown` renderer.
 */
-function AnsweredQuestions({ payload, answers, instructions, id, Markdown: MarkdownProp, className, style }) {
+function AnsweredQuestions({ payload, answers, instructions, id, Markdown: MarkdownProp, onOpenSecrets, className, style }) {
 	const labels = useChatLabels();
 	const slots = useTranscriptRenderers();
 	const Markdown = MarkdownProp ?? slots.Markdown;
@@ -177,7 +214,8 @@ function AnsweredQuestions({ payload, answers, instructions, id, Markdown: Markd
 				onChange: () => void 0,
 				requestId: id,
 				labels,
-				readOnly: true
+				readOnly: true,
+				onOpenSecrets
 			}, q.id)),
 			instructions && instructions.trim() !== "" && /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-1",

package/dist/chat/interactions/SecretInput.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties, Ref } from "react";
+import { SecretTtl } from "zidane/chat/pure";
+//#region src/chat/interactions/SecretInput.d.ts
+/** Props for {@link SecretInput}. */
+interface SecretInputProps {
+  /** Id of the password field: a `<label htmlFor>` names it. */
+  id: string;
+  /** The TTL picked. */
+  ttl: SecretTtl;
+  /** Called on every keystroke with the typed value and the picked TTL. Keep the value out of anything logged or saved. */
+  onChange: (value: string, ttl: SecretTtl) => void;
+  /** Ids of the elements that describe the field (the question's help). */
+  describedBy?: string;
+  /** Marks the field required for assistive tech. */
+  required?: boolean;
+  /** Called on Enter in the password field. */
+  onSubmit?: () => void;
+  /** Ref to the password field. */
+  inputRef?: Ref<HTMLInputElement>;
+  /** Extra classes on the root element. */
+  className?: string;
+  /** Inline styles on the root element, merged after the component's own. */
+  style?: CSSProperties;
+}
+/**
+ * Renders a password field, a TTL picker and the note on where the value is kept.
+ *
+ * @param props - The {@link SecretInputProps}.
+ */
+declare function SecretInput({ id, ttl, onChange, describedBy, required, onSubmit, inputRef, className, style }: SecretInputProps): import("react").JSX.Element;
+//#endregion
+export { SecretInput, SecretInputProps };

package/dist/chat/interactions/SecretInput.js

@@ -0,0 +1,72 @@
+import { useChatLabels } from "../useChatLabels.js";
+import { FIELD, INPUT } from "./card-ui.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { SECRET_TTLS } from "zidane/chat/pure";
+//#region src/chat/interactions/SecretInput.tsx
+/**
+* The value half of a secret: a password field that never holds the value in
+* the DOM (uncontrolled, no `value` attribute, no autocomplete), a TTL
+* picker, and the shield note that says where the value goes and for how
+* long. The `ask_user` form's secret question and the Secrets panel's
+* add form both draw it.
+*/
+/**
+* Renders a password field, a TTL picker and the note on where the value is kept.
+*
+* @param props - The {@link SecretInputProps}.
+*/
+function SecretInput({ id, ttl, onChange, describedBy, required = false, onSubmit, inputRef, className, style }) {
+	const labels = useChatLabels();
+	const value = useRef("");
+	const noteId = `${id}-note`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["flex flex-col gap-1.5", className].filter(Boolean).join(" "),
+		style,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				id,
+				type: "password",
+				autoComplete: "off",
+				autoCorrect: "off",
+				autoCapitalize: "off",
+				spellCheck: false,
+				placeholder: labels.secretValuePlaceholder,
+				"aria-required": required || void 0,
+				"aria-describedby": [describedBy, noteId].filter(Boolean).join(" "),
+				"data-secret-input": "",
+				className: `${INPUT} h-8 min-w-0 flex-1`,
+				onChange: (e) => {
+					value.current = e.target.value;
+					onChange(value.current, ttl);
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Enter" && !e.metaKey && !e.ctrlKey && onSubmit) {
+						e.preventDefault();
+						onSubmit();
+					}
+				}
+			}), /* @__PURE__ */ jsx("select", {
+				"aria-label": labels.secretTtlLabel,
+				value: ttl,
+				onChange: (e) => onChange(value.current, e.target.value),
+				className: `${FIELD} h-8 shrink-0`,
+				children: SECRET_TTLS.map((option) => /* @__PURE__ */ jsx("option", {
+					value: option,
+					children: labels.secretTtlName(option)
+				}, option))
+			})]
+		}), /* @__PURE__ */ jsxs("span", {
+			id: noteId,
+			className: "flex items-start gap-1.5 text-zg-meta leading-4 text-[var(--zg-text-muted)] zg-pretty",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "i-ph-shield-check mt-px shrink-0"
+			}), labels.secretNote(ttl)]
+		})]
+	});
+}
+//#endregion
+export { SecretInput };

package/dist/chat/interactions/card-ui.d.ts

@@ -10,8 +10,10 @@ declare const BTN_GHOST: string;
 declare const BTN_GHOST_LEADING: string;
 /** Class names of the danger button in an interaction card: the danger fill. */
 declare const BTN_DANGER: string;
-/** Class names of a text field in an interaction card. */
-declare const INPUT = "zg-well w-full text-zg-ui px-2.5 placeholder:text-[var(--zg-text-subtle)]";
+/** The well of a field in an interaction card, with no width: a select sized to its options. */
+declare const FIELD = "zg-well text-zg-ui px-2.5";
+/** A full-width text field of a card. */
+declare const INPUT = "zg-well text-zg-ui px-2.5 w-full placeholder:text-[var(--zg-text-subtle)]";
 /** Props for {@link CardError}. */
 interface CardErrorProps {
   /** The message to show, or `null` to render nothing. */
@@ -37,4 +39,4 @@ declare function CardError({ error, className, style }: CardErrorProps): import(
  */
 declare function useAutoFocus(root: RefObject<HTMLElement | null>, when: boolean): void;
 //#endregion
-export { BTN, BTN_DANGER, BTN_GHOST, BTN_GHOST_LEADING, BTN_PRIMARY, CardError, CardErrorProps, INPUT, useAutoFocus };
+export { BTN, BTN_DANGER, BTN_GHOST, BTN_GHOST_LEADING, BTN_PRIMARY, CardError, CardErrorProps, FIELD, INPUT, useAutoFocus };

package/dist/chat/interactions/card-ui.js

@@ -20,8 +20,10 @@ const BTN_GHOST_LEADING = buttonClass({
 });
 /** Class names of the danger button in an interaction card: the danger fill. */
 const BTN_DANGER = buttonClass({ variant: "danger-solid" });
-/** Class names of a text field in an interaction card. */
-const INPUT = "zg-well w-full text-zg-ui px-2.5 placeholder:text-[var(--zg-text-subtle)]";
+/** The well of a field in an interaction card, with no width: a select sized to its options. */
+const FIELD = "zg-well text-zg-ui px-2.5";
+/** A full-width text field of a card. */
+const INPUT = `${FIELD} w-full placeholder:text-[var(--zg-text-subtle)]`;
 /**
 * Renders an inline error message, or nothing when there is none.
 *
@@ -60,4 +62,4 @@ function useAutoFocus(root, when) {
 	}, []);
 }
 //#endregion
-export { BTN, BTN_DANGER, BTN_GHOST, BTN_GHOST_LEADING, BTN_PRIMARY, CardError, INPUT, useAutoFocus };
+export { BTN, BTN_DANGER, BTN_GHOST, BTN_GHOST_LEADING, BTN_PRIMARY, CardError, FIELD, INPUT, useAutoFocus };