@opengeni/react 3.1.0 → 3.1.3-canary.38890816741001

package/src/components/human-input-form.tsx

@@ -1,69 +1,52 @@
 import type {
   HumanInputAnswer,
   HumanInputQuestion,
+  HumanInputSecretAnswer,
+  HumanInputSecretSaveTo,
+  HumanInputSecretSpec,
+  SkillRecord,
   SessionHumanInputRequest,
   SubmitHumanInputResponseRequest,
 } from "@opengeni/sdk";
 import { ChevronDownIcon, ChevronUpIcon, MessageCircleQuestionIcon } from "lucide-react";
-import { useEffect, useId, useRef, useState, type FormEvent, type ReactNode } from "react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type FormEvent,
+  type ReactNode,
+} from "react";
 import { cn } from "../lib/cn";
+import { useErrorMessage } from "../lib/error-message";
+import {
+  answersFromDrafts,
+  defaultHumanInputFormMessages,
+  emptyDraft,
+  initialDrafts,
+  secretAnswerFromReading,
+  type HumanInputAnswerDraft,
+  type HumanInputFormMessages,
+} from "../human-input-model";
+import { SecretQuestionField, type SecretFieldHandle } from "./secret-question-field";
+import { linkifyText } from "./linkified-text";
 
-export type HumanInputAnswerDraft = {
-  values: string[];
-  other: string;
-  otherSelected: boolean;
+export {
+  answersFromDrafts,
+  defaultHumanInputFormMessages,
+  type HumanInputAnswerDraft,
+  type HumanInputFormMessages,
 };
 
-export type HumanInputFormMessages = {
-  title: string;
-  description: string;
-  submit: string;
-  skip: string;
-  submitting: string;
-  other: string;
-  deadlineLabel: string;
-  formatDeadline: (value: string) => string;
-  required: string;
-  otherRequired: string;
-  minSelections: (count: number) => string;
-  maxSelections: (count: number) => string;
-  optional: string;
-  /** Shown when the question list overflows the card and more content is below. */
-  moreBelow: string;
-  questionCount: (count: number) => string;
-  collapse: string;
-  expand: string;
-  selectionHint: (min: number | null | undefined, max: number | null | undefined) => string | null;
-};
-
-export const defaultHumanInputFormMessages: HumanInputFormMessages = {
-  title: "Input required",
-  /** Multi-question chrome has no default subtitle; hosts may still override. */
-  description: "",
-  submit: "Send answers",
-  skip: "Skip",
-  submitting: "Submitting…",
-  other: "Other",
-  deadlineLabel: "Expires",
-  formatDeadline,
-  required: "This question is required.",
-  otherRequired: "Enter a value for Other.",
-  minSelections: (count) => `Choose at least ${count} option${count === 1 ? "" : "s"}.`,
-  maxSelections: (count) => `Choose no more than ${count} option${count === 1 ? "" : "s"}.`,
-  optional: "Optional",
-  moreBelow: "More below",
-  questionCount: (count) => `${count} questions`,
-  collapse: "Collapse",
-  expand: "Expand",
-  selectionHint: (min, max) => {
-    if (min != null && max != null) return `Choose ${min}–${max}.`;
-    if (min != null) return `Choose at least ${min}.`;
-    if (max != null) return `Choose up to ${max}.`;
-    return null;
-  },
-};
+class SkillReviewVerificationError extends Error {}
 
 export type HumanInputFormProps = {
+  /** Scoped immutable revision reader. Saving a Skill fails closed without its full preview. */
+  loadSkillReview?:
+    | ((reference: NonNullable<HumanInputQuestion["skillReview"]>) => Promise<SkillRecord>)
+    | undefined;
   request: Pick<SessionHumanInputRequest, "id" | "questions" | "allowSkip" | "expiresAt">;
   onSubmit: (response: SubmitHumanInputResponseRequest) => void | Promise<void>;
   submitting?: boolean | undefined;
@@ -78,6 +61,18 @@ export type HumanInputFormProps = {
   autoFocus?: boolean | undefined;
   /** Start collapsed to a compact bar (drafts still retained). */
   defaultCollapsed?: boolean | undefined;
+  /**
+   * Answer a yes/no decision (one required choice between an accept and a
+   * decline option, without Other) with two buttons instead of a radio list.
+   * Off by default; embedded conversations turn it on.
+   */
+  decisionButtons?: boolean | undefined;
+  /**
+   * Where this person may save an answer to a secret question. A request for
+   * a target outside this list falls back to the most private allowed one,
+   * with a note. Defaults to Only me, This task and This workspace.
+   */
+  allowedSaveTo?: readonly HumanInputSecretSaveTo[] | undefined;
   className?: string | undefined;
 };
 
@@ -98,6 +93,7 @@ export function HumanInputForm(props: HumanInputFormProps) {
 function HumanInputRequestForm({
   request,
   onSubmit,
+  loadSkillReview,
   submitting = false,
   error,
   title,
@@ -108,10 +104,15 @@ function HumanInputRequestForm({
   messages: messageOverrides,
   autoFocus = true,
   defaultCollapsed = false,
+  decisionButtons = false,
+  allowedSaveTo,
   className,
 }: HumanInputFormProps) {
+  const formatError = useErrorMessage();
   const messages = { ...defaultHumanInputFormMessages, ...messageOverrides };
   const singleQuestion = request.questions.length === 1 ? request.questions[0]! : null;
+  const decision = decisionButtons ? binaryDecision(request.questions) : null;
+  const [decisionChoice, setDecisionChoice] = useState<string | null>(null);
   const resolvedTitle =
     title === undefined
       ? singleQuestion
@@ -141,7 +142,152 @@ function HumanInputRequestForm({
   const [collapsed, setCollapsed] = useState(defaultCollapsed);
   const submissionInFlight = useRef(false);
   const submissionGeneration = useRef(0);
+  // Secret answers stay in their uncontrolled inputs until submit.
+  const secretHandles = useRef(new Map<string, SecretFieldHandle>());
+  const secretRegistrars = useMemo(
+    () => new Map<string, (handle: SecretFieldHandle | null) => void>(),
+    [],
+  );
+  const registerSecret = useCallback(
+    (questionId: string) => {
+      let registrar = secretRegistrars.get(questionId);
+      if (!registrar) {
+        registrar = (handle) => {
+          if (handle) secretHandles.current.set(questionId, handle);
+          else secretHandles.current.delete(questionId);
+        };
+        secretRegistrars.set(questionId, registrar);
+      }
+      return registrar;
+    },
+    [secretRegistrars],
+  );
   const busy = submitting || submittingInternally;
+  const reviewIdentity = JSON.stringify(
+    request.questions
+      .filter((question) => question.skillReview)
+      .map((question) => ({
+        id: question.id,
+        reference: {
+          sourceOperationId: question.skillReview!.sourceOperationId,
+          skillId: question.skillReview!.skillId,
+          revisionId: question.skillReview!.revisionId,
+          expectedRevisionId: question.skillReview!.expectedRevisionId,
+          expectedScopeVersion: question.skillReview!.expectedScopeVersion,
+          ...(question.skillReview!.removalOperationId
+            ? { removalOperationId: question.skillReview!.removalOperationId }
+            : {}),
+        },
+      })),
+  );
+  const [reviewReload, setReviewReload] = useState(0);
+  const [reviews, setReviews] = useState<{
+    loader: typeof loadSkillReview;
+    identity: string;
+    records: Record<string, SkillRecord>;
+    error: string | null;
+  } | null>(null);
+  useEffect(() => {
+    let current = true;
+    const questions = JSON.parse(reviewIdentity) as Array<{
+      id: string;
+      reference: NonNullable<HumanInputQuestion["skillReview"]>;
+    }>;
+    if (!questions.length) return;
+    setReviews(null);
+    void Promise.all(
+      questions.map(async (question) => {
+        if (!loadSkillReview)
+          throw new Error(
+            "This client cannot preview Skill files. Ask your administrator for a review-capable client.",
+          );
+        const reference = question.reference;
+        const record = await loadSkillReview(reference);
+        if (
+          record.id !== reference.skillId ||
+          record.revisionId !== reference.revisionId ||
+          (record.removalOperationId ?? undefined) !== reference.removalOperationId ||
+          !record.files.some((file) => file.path === "SKILL.md")
+        ) {
+          throw new SkillReviewVerificationError(
+            "The requested Skill revision could not be verified.",
+          );
+        }
+        return [question.id, record] as const;
+      }),
+    )
+      .then((records) => {
+        if (current)
+          setReviews({
+            loader: loadSkillReview,
+            identity: reviewIdentity,
+            records: Object.fromEntries(records),
+            error: null,
+          });
+      })
+      .catch((cause) => {
+        if (current)
+          setReviews({
+            loader: loadSkillReview,
+            identity: reviewIdentity,
+            records: {},
+            error: formatError(
+              cause,
+              cause instanceof SkillReviewVerificationError
+                ? cause.message
+                : !loadSkillReview
+                  ? "This client cannot preview Skill files. Ask your administrator for a review-capable client."
+                  : undefined,
+            ),
+          });
+      });
+    return () => {
+      current = false;
+    };
+  }, [loadSkillReview, reviewIdentity, reviewReload, formatError]);
+  const visibleReviews =
+    reviews?.loader === loadSkillReview && reviews?.identity === reviewIdentity ? reviews : null;
+  const preview = (question: HumanInputQuestion) => {
+    if (!question.skillReview) return null;
+    const record = visibleReviews?.records[question.id];
+    return (
+      <div className="mb-3 min-w-0 space-y-2" data-skill-review="">
+        {record ? (
+          <>
+            <p className="text-og-sm">
+              {record.title ?? "Skill"} · {record.scope} · {record.files.length} files
+            </p>
+            <p className="text-og-xs text-og-fg-muted">
+              {question.skillReview.removalOperationId
+                ? "Permanently deletes this Skill and all stored revisions. This cannot be undone; conversations remain unchanged."
+                : "Saving activates these exact files. No additional review is required."}
+            </p>
+            {record.files.map((file) => (
+              <details key={file.path} open={file.path === "SKILL.md"}>
+                <summary className="cursor-pointer break-all text-og-sm">{file.path}</summary>
+                <pre className="max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-og-md bg-og-surface-1 p-2 text-og-xs">
+                  {file.content}
+                </pre>
+              </details>
+            ))}
+          </>
+        ) : visibleReviews?.error ? (
+          <>
+            <p role="alert" className="text-og-sm">
+              {visibleReviews.error}
+            </p>
+            <button type="button" onClick={() => setReviewReload((value) => value + 1)}>
+              Retry preview
+            </button>
+          </>
+        ) : (
+          <p role="status" className="text-og-sm">
+            Loading the exact Skill files…
+          </p>
+        )}
+      </div>
+    );
+  };
 
   useEffect(() => {
     if (collapsed) {
@@ -187,18 +333,29 @@ function HumanInputRequestForm({
     });
   };
 
-  const submitResponse = async (response: SubmitHumanInputResponseRequest): Promise<void> => {
-    if (busy || submissionInFlight.current) return;
+  const clearValidationError = (questionId: string): void =>
+    setValidationErrors((current) => {
+      if (!(questionId in current)) return current;
+      const next = { ...current };
+      delete next[questionId];
+      return next;
+    });
+
+  /** Resolves true when the host accepted the response. */
+  const submitResponse = async (response: SubmitHumanInputResponseRequest): Promise<boolean> => {
+    if (busy || submissionInFlight.current) return false;
     const generation = submissionGeneration.current;
     submissionInFlight.current = true;
     setSubmissionError(null);
     setSubmittingInternally(true);
     try {
       await onSubmit(response);
+      return true;
     } catch (cause) {
       if (generation === submissionGeneration.current) {
-        setSubmissionError(cause instanceof Error ? cause.message : String(cause));
+        setSubmissionError(formatError(cause));
       }
+      return false;
     } finally {
       if (generation === submissionGeneration.current) {
         submissionInFlight.current = false;
@@ -223,6 +380,21 @@ function HumanInputRequestForm({
   const submit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
     event.preventDefault();
     const result = answersFromDrafts(request.questions, drafts, messages);
+    const secretAnswers: HumanInputSecretAnswer[] = [];
+    const secretPublicAnswers = new Map<string, HumanInputAnswer>();
+    for (const question of request.questions) {
+      if (question.kind !== "secret") continue;
+      const handle = secretHandles.current.get(question.id);
+      if (!handle) continue;
+      const secret = secretAnswerFromReading(question, handle.read(), messages);
+      if (!secret) continue;
+      if ("error" in secret) {
+        result.errors[question.id] = secret.error;
+        continue;
+      }
+      secretAnswers.push(secret.secretAnswer);
+      secretPublicAnswers.set(question.id, secret.answer);
+    }
     if (Object.keys(result.errors).length > 0) {
       setValidationErrors(result.errors);
       const firstInvalid = request.questions.find((question) => question.id in result.errors);
@@ -232,7 +404,34 @@ function HumanInputRequestForm({
       }
       return;
     }
-    await submitResponse({ outcome: "answered", answers: result.answers });
+    const unreviewedSave = request.questions.find(
+      (question) =>
+        question.skillReview &&
+        !visibleReviews?.records[question.id] &&
+        result.answers.some(
+          (answer) => answer.questionId === question.id && answer.values.includes("save"),
+        ),
+    );
+    if (unreviewedSave) {
+      setValidationErrors({
+        [unreviewedSave.id]: unreviewedSave.skillReview?.removalOperationId
+          ? "Load the exact Skill proposal before approving permanent deletion."
+          : "Load the exact Skill files before saving.",
+      });
+      return;
+    }
+    // Keep the request's question order across drafted and secret answers.
+    const drafted = new Map(result.answers.map((answer) => [answer.questionId, answer]));
+    const answers = request.questions.flatMap((question) => {
+      const answer = drafted.get(question.id) ?? secretPublicAnswers.get(question.id);
+      return answer ? [answer] : [];
+    });
+    const accepted = await submitResponse({
+      outcome: "answered",
+      answers,
+      ...(secretAnswers.length > 0 ? { secretAnswers } : {}),
+    });
+    if (accepted) for (const handle of secretHandles.current.values()) handle.clear();
   };
 
   const metaBits = [
@@ -305,9 +504,12 @@ function HumanInputRequestForm({
           </span>
           <div className="min-w-0 flex-1">
             <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
-              <h2 id={titleId} className="text-og-md font-semibold text-og-fg">
-                {resolvedTitle}
-                {singleQuestion?.required && !request.allowSkip ? (
+              <h2
+                id={titleId}
+                className="min-w-0 text-og-md font-semibold text-og-fg [overflow-wrap:anywhere]"
+              >
+                {linkifyText(resolvedTitle)}
+                {singleQuestion?.required && !request.allowSkip && !decision ? (
                   <span aria-hidden className="ml-1 text-og-status-failed">
                     *
                   </span>
@@ -325,7 +527,9 @@ function HumanInputRequestForm({
               ) : null}
             </div>
             {resolvedDescription ? (
-              <div className="mt-0.5 text-og-sm text-og-fg-muted">{resolvedDescription}</div>
+              <div className="mt-0.5 text-og-sm text-og-fg-muted [overflow-wrap:anywhere]">
+                {linkifyText(resolvedDescription)}
+              </div>
             ) : null}
             {request.expiresAt ? (
               <p className="mt-1 text-og-xs text-og-fg-subtle">
@@ -354,106 +558,247 @@ function HumanInputRequestForm({
         </div>
       </header>
 
-      <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
-        <div
-          ref={scrollRef}
-          className="min-h-0 flex-1 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]"
-        >
-          <fieldset disabled={busy} className="min-w-0 space-y-4 px-4 py-3">
-            {request.questions.map((question, index) => {
-              if (singleQuestion) {
-                // Title already carries the question; only render the control + help extras.
-                return (
-                  <div key={question.id} data-human-input-question={question.id}>
-                    <QuestionControls
-                      question={question}
-                      questionNumber={null}
-                      labelledBy={titleId}
-                      draft={drafts[question.id] ?? emptyDraft()}
-                      fieldId={`${formId}-${index}`}
-                      error={validationErrors[question.id]}
-                      messages={messages}
-                      autoFocus={autoFocus}
-                      firstOption
-                      showPromptChrome={false}
-                      allowSkip={request.allowSkip}
-                      busy={busy}
-                      onUpdate={(apply) => update(question.id, apply)}
-                    />
-                  </div>
-                );
-              }
+      {decision ? (
+        <>
+          {decision.question.helpText ||
+          decision.accept.description ||
+          decision.decline.description ? (
+            <div className="shrink-0 space-y-1 px-4 pt-3 text-og-sm text-og-fg-muted [overflow-wrap:anywhere]">
+              {decision.question.label && decision.question.helpText ? (
+                <p>{linkifyText(decision.question.helpText)}</p>
+              ) : null}
+              {[decision.accept, decision.decline].map((option) =>
+                option.description ? (
+                  <p key={option.id}>
+                    <span className="font-medium text-og-fg">{option.label}</span>
+                    {" · "}
+                    {option.description}
+                  </p>
+                ) : null,
+              )}
+            </div>
+          ) : null}
+          {(error ?? submissionError) ? (
+            <p role="alert" className="shrink-0 px-4 pt-3 text-og-sm text-og-status-failed">
+              {error ?? submissionError}
+            </p>
+          ) : null}
+          <footer
+            className="flex shrink-0 flex-wrap items-center justify-end gap-2 px-4 py-3"
+            data-human-input-decision=""
+          >
+            {request.allowSkip ? (
+              <button
+                type="button"
+                disabled={busy}
+                onClick={() => void submitResponse({ outcome: "skipped" })}
+                className="mr-auto inline-flex min-h-9 items-center rounded-og-md px-2 py-1.5 text-og-sm font-medium text-og-fg-muted transition-colors hover:bg-og-hover hover:text-og-fg disabled:opacity-50 pointer-coarse:min-h-11"
+              >
+                {resolvedSkipLabel}
+              </button>
+            ) : null}
+            {[decision.decline, decision.accept].map((option) => {
+              const primary = option === decision.accept;
               return (
-                <div
-                  key={question.id}
-                  data-human-input-question={question.id}
-                  className="flex flex-col gap-1.5"
+                <button
+                  key={option.id}
+                  type="button"
+                  disabled={busy}
+                  ref={
+                    !primary && autoFocus
+                      ? (node) => {
+                          if (node && !node.dataset.ogFocused) {
+                            node.dataset.ogFocused = "";
+                            node.focus({ preventScroll: true });
+                          }
+                        }
+                      : undefined
+                  }
+                  data-human-input-choice={option.id}
+                  onClick={() => {
+                    setDecisionChoice(option.id);
+                    void submitResponse({
+                      outcome: "answered",
+                      answers: [{ questionId: decision.question.id, values: [option.id] }],
+                    });
+                  }}
+                  className={cn(
+                    "inline-flex min-h-9 items-center rounded-og-md border px-3.5 py-1.5 text-og-sm font-medium transition disabled:opacity-50 pointer-coarse:min-h-11",
+                    primary
+                      ? "border-og-primary-border bg-og-primary text-og-primary-fg hover:bg-og-primary-hover"
+                      : "border-og-border bg-og-surface-1 text-og-fg hover:bg-og-surface-2",
+                  )}
                 >
-                  <QuestionControls
-                    question={question}
-                    questionNumber={index + 1}
-                    labelledBy={undefined}
-                    draft={drafts[question.id] ?? emptyDraft()}
-                    fieldId={`${formId}-${index}`}
-                    error={validationErrors[question.id]}
-                    messages={messages}
-                    autoFocus={autoFocus && index === 0}
-                    firstOption={index === 0}
-                    showPromptChrome
-                    allowSkip={request.allowSkip}
-                    busy={busy}
-                    onUpdate={(apply) => update(question.id, apply)}
-                  />
-                </div>
+                  {busy && decisionChoice === option.id ? messages.submitting : option.label}
+                </button>
               );
             })}
-          </fieldset>
-        </div>
-        {overflowBelow ? (
-          <div
-            className="pointer-events-none absolute inset-x-0 bottom-0 z-[1] flex flex-col items-center"
-            aria-hidden="true"
-          >
-            <div className="h-10 w-full bg-gradient-to-t from-og-surface-1 via-og-surface-1/85 to-transparent" />
-            <span className="-mt-5 mb-1 rounded-og-full bg-og-surface-1 px-2.5 py-0.5 text-og-xs font-medium text-og-fg-muted shadow-og-sm ring-1 ring-og-border/60">
-              {messages.moreBelow}
-            </span>
+          </footer>
+        </>
+      ) : (
+        <>
+          <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
+            <div
+              ref={scrollRef}
+              className="min-h-0 flex-1 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]"
+            >
+              <fieldset disabled={busy} className="min-w-0 space-y-4 px-4 py-3">
+                {request.questions.map((question, index) => {
+                  if (singleQuestion) {
+                    // Title already carries the question; only render the control + help extras.
+                    return (
+                      <div key={question.id} data-human-input-question={question.id}>
+                        {preview(question)}
+                        <QuestionControls
+                          question={question}
+                          questionNumber={null}
+                          labelledBy={titleId}
+                          draft={drafts[question.id] ?? emptyDraft()}
+                          fieldId={`${formId}-${index}`}
+                          error={validationErrors[question.id]}
+                          messages={messages}
+                          autoFocus={autoFocus}
+                          firstOption
+                          showPromptChrome={false}
+                          allowSkip={request.allowSkip}
+                          busy={busy}
+                          allowedSaveTo={allowedSaveTo}
+                          registerSecret={registerSecret(question.id)}
+                          onSecretEdited={() => clearValidationError(question.id)}
+                          onUpdate={(apply) => update(question.id, apply)}
+                        />
+                      </div>
+                    );
+                  }
+                  return (
+                    <div
+                      key={question.id}
+                      data-human-input-question={question.id}
+                      className="flex flex-col gap-1.5"
+                    >
+                      {preview(question)}
+                      <QuestionControls
+                        question={question}
+                        questionNumber={index + 1}
+                        labelledBy={undefined}
+                        draft={drafts[question.id] ?? emptyDraft()}
+                        fieldId={`${formId}-${index}`}
+                        error={validationErrors[question.id]}
+                        messages={messages}
+                        autoFocus={autoFocus && index === 0}
+                        firstOption={index === 0}
+                        showPromptChrome
+                        allowSkip={request.allowSkip}
+                        busy={busy}
+                        allowedSaveTo={allowedSaveTo}
+                        registerSecret={registerSecret(question.id)}
+                        onSecretEdited={() => clearValidationError(question.id)}
+                        onUpdate={(apply) => update(question.id, apply)}
+                      />
+                    </div>
+                  );
+                })}
+              </fieldset>
+            </div>
+            {overflowBelow ? (
+              <div
+                className="pointer-events-none absolute inset-x-0 bottom-0 z-[1] flex flex-col items-center"
+                aria-hidden="true"
+              >
+                <div className="h-10 w-full bg-gradient-to-t from-og-surface-1 via-og-surface-1/85 to-transparent" />
+                <span className="-mt-5 mb-1 rounded-og-full bg-og-surface-1 px-2.5 py-0.5 text-og-xs font-medium text-og-fg-muted shadow-og-sm ring-1 ring-og-border/60">
+                  {messages.moreBelow}
+                </span>
+              </div>
+            ) : null}
           </div>
-        ) : null}
-      </div>
 
-      {(error ?? submissionError) ? (
-        <p
-          role="alert"
-          className="relative z-10 shrink-0 px-4 pb-1 text-og-sm text-og-status-failed"
-        >
-          {error ?? submissionError}
-        </p>
-      ) : null}
+          {(error ?? submissionError) ? (
+            <p
+              role="alert"
+              className="relative z-10 shrink-0 px-4 pb-1 text-og-sm text-og-status-failed"
+            >
+              {error ?? submissionError}
+            </p>
+          ) : null}
 
-      <footer className="relative z-10 flex shrink-0 items-center justify-end gap-2 border-t border-og-status-waiting/20 bg-og-surface-1/95 px-4 py-3 backdrop-blur-[2px]">
-        {request.allowSkip ? (
-          <button
-            type="button"
-            disabled={busy}
-            onClick={() => void submitResponse({ outcome: "skipped" })}
-            className="inline-flex min-h-9 items-center rounded-og-md border border-og-border px-3 py-1.5 text-og-sm font-medium text-og-fg-muted transition-colors hover:bg-og-surface-1 hover:text-og-fg disabled:opacity-50"
-          >
-            {resolvedSkipLabel}
-          </button>
-        ) : null}
-        <button
-          type="submit"
-          disabled={busy}
-          className="inline-flex min-h-9 items-center rounded-og-md bg-og-accent-deep px-3 py-1.5 text-og-sm font-medium text-og-accent-fg transition hover:brightness-110 disabled:opacity-50"
-        >
-          {busy ? messages.submitting : resolvedSubmitLabel}
-        </button>
-      </footer>
+          <footer className="relative z-10 flex shrink-0 items-center justify-end gap-2 border-t border-og-status-waiting/20 bg-og-surface-1/95 px-4 py-3 backdrop-blur-[2px]">
+            {request.allowSkip ? (
+              <button
+                type="button"
+                disabled={busy}
+                onClick={() => void submitResponse({ outcome: "skipped" })}
+                className="inline-flex min-h-9 items-center rounded-og-md border border-og-border px-3 py-1.5 text-og-sm font-medium text-og-fg-muted transition-colors hover:bg-og-surface-1 hover:text-og-fg disabled:opacity-50"
+              >
+                {resolvedSkipLabel}
+              </button>
+            ) : null}
+            <button
+              type="submit"
+              disabled={busy}
+              className="inline-flex min-h-9 items-center rounded-og-md border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-1.5 text-og-sm font-medium transition hover:bg-og-primary-hover disabled:opacity-50"
+            >
+              {busy ? messages.submitting : resolvedSubmitLabel}
+            </button>
+          </footer>
+        </>
+      )}
     </form>
   );
 }
 
+// Unambiguous approve/decline verbs only: "Continue with A" vs "Keep B" is a
+// real choice between two options, not a yes/no decision.
+const ACCEPT_WORDS = new Set(["approve", "approved", "yes", "confirm", "allow", "accept"]);
+const DECLINE_WORDS = new Set(["cancel", "decline", "reject", "deny", "no", "don't", "dont"]);
+
+function firstWord(label: string): string {
+  return (
+    label
+      .trim()
+      .toLowerCase()
+      .replace(/[’]/g, "'")
+      .split(/[\s,.:;!?()]+/)[0] ?? ""
+  );
+}
+
+/**
+ * A yes/no decision (an approval asked as a question): one required
+ * single-choice question with exactly an accept and a decline option. It is
+ * answered with two buttons; an "Other" free-text answer has no meaning for it,
+ * and the composer still accepts a different instruction.
+ */
+export function binaryDecision(questions: readonly HumanInputQuestion[]): {
+  question: HumanInputQuestion;
+  accept: HumanInputQuestion["options"][number];
+  decline: HumanInputQuestion["options"][number];
+} | null {
+  if (questions.length !== 1) return null;
+  const question = questions[0]!;
+  if (
+    question.kind !== "single_select" ||
+    question.skillReview ||
+    // The runtime marks every choice question `allowOther`, so it is not a
+    // signal here; a different answer goes through the composer instead.
+    !question.required ||
+    question.options.length !== 2
+  )
+    return null;
+  const [first, second] = question.options as [
+    HumanInputQuestion["options"][number],
+    HumanInputQuestion["options"][number],
+  ];
+  const kind = (option: HumanInputQuestion["options"][number]) => {
+    const word = firstWord(option.label);
+    return ACCEPT_WORDS.has(word) ? "accept" : DECLINE_WORDS.has(word) ? "decline" : null;
+  };
+  const a = kind(first);
+  const b = kind(second);
+  if (a === "accept" && b === "decline") return { question, accept: first, decline: second };
+  if (a === "decline" && b === "accept") return { question, accept: second, decline: first };
+  return null;
+}
+
 function QuestionControls({
   question,
   questionNumber,
@@ -467,6 +812,9 @@ function QuestionControls({
   showPromptChrome,
   allowSkip,
   busy,
+  allowedSaveTo,
+  registerSecret,
+  onSecretEdited,
   onUpdate,
 }: {
   question: HumanInputQuestion;
@@ -481,6 +829,9 @@ function QuestionControls({
   showPromptChrome: boolean;
   allowSkip: boolean;
   busy: boolean;
+  allowedSaveTo: readonly HumanInputSecretSaveTo[] | undefined;
+  registerSecret: (handle: SecretFieldHandle | null) => void;
+  onSecretEdited: () => void;
   onUpdate: (apply: (draft: HumanInputAnswerDraft) => HumanInputAnswerDraft) => void;
 }) {
   const errorId = `${fieldId}-error`;
@@ -521,13 +872,13 @@ function QuestionControls({
             <label
               id={labelId}
               htmlFor={question.kind === "text" ? fieldId : undefined}
-              className="text-og-sm font-medium text-og-fg"
+              className="min-w-0 text-og-sm font-medium text-og-fg [overflow-wrap:anywhere]"
             >
               {questionNumber === null ? null : (
                 <span className="mr-1.5 tabular-nums text-og-fg-muted">{questionNumber}.</span>
               )}
               {questionNumber === null ? null : " "}
-              {visibleLabel}
+              {linkifyText(visibleLabel)}
               {question.required && !allowSkip ? (
                 <span aria-hidden className="ml-1 text-og-status-failed">
                   *
@@ -540,13 +891,13 @@ function QuestionControls({
             </label>
           </div>
           {question.label ? (
-            <p id={promptId} className="text-og-sm text-og-fg-muted">
-              {question.prompt}
+            <p id={promptId} className="text-og-sm text-og-fg-muted [overflow-wrap:anywhere]">
+              {linkifyText(question.prompt)}
             </p>
           ) : null}
           {question.helpText ? (
-            <p id={helpId} className="text-og-xs text-og-fg-subtle">
-              {question.helpText}
+            <p id={helpId} className="text-og-xs text-og-fg-subtle [overflow-wrap:anywhere]">
+              {linkifyText(question.helpText)}
             </p>
           ) : null}
           {hint ? (
@@ -561,8 +912,8 @@ function QuestionControls({
             <p className="text-og-xs text-og-fg-subtle">{messages.optional}</p>
           ) : null}
           {question.helpText && question.label ? (
-            <p id={helpId} className="mb-1.5 text-og-xs text-og-fg-subtle">
-              {question.helpText}
+            <p id={helpId} className="mb-1.5 text-og-xs text-og-fg-subtle [overflow-wrap:anywhere]">
+              {linkifyText(question.helpText)}
             </p>
           ) : null}
           {hint ? (
@@ -573,7 +924,30 @@ function QuestionControls({
         </>
       )}
 
-      {question.kind === "text" ? (
+      {question.kind === "secret" ? (
+        question.secret ? (
+          <SecretQuestionField
+            question={question as HumanInputQuestion & { secret: HumanInputSecretSpec }}
+            fieldId={fieldId}
+            messages={messages}
+            autoFocus={autoFocus}
+            allowedSaveTo={allowedSaveTo}
+            error={error}
+            describedBy={
+              [
+                question.label && showPromptChrome ? promptId : null,
+                question.helpText && showPromptChrome ? helpId : null,
+              ]
+                .filter(Boolean)
+                .join(" ") || undefined
+            }
+            register={registerSecret}
+            onEdited={onSecretEdited}
+          />
+        ) : (
+          <p className="text-og-sm text-og-fg-muted">This question can't be answered here.</p>
+        )
+      ) : question.kind === "text" ? (
         <textarea
           id={fieldId}
           value={draft.values[0] ?? ""}
@@ -643,65 +1017,68 @@ function QuestionControls({
               </label>
             );
           })}
-          <div
-            className={cn(
-              "flex items-start gap-2.5 rounded-og-md px-2.5 py-2 transition-colors",
-              draft.otherSelected
-                ? "bg-og-status-waiting/12 text-og-fg"
-                : "text-og-fg hover:bg-og-surface-1/80",
-            )}
-          >
-            <input
-              id={otherChoiceId}
-              type={question.kind === "single_select" ? "radio" : "checkbox"}
-              name={question.kind === "single_select" ? fieldId : undefined}
-              aria-labelledby={otherLabelId}
-              checked={draft.otherSelected}
-              autoFocus={autoFocus && firstOption && question.options.length === 0}
-              onChange={(event) =>
-                onUpdate((current) => ({
-                  ...current,
-                  otherSelected: event.target.checked,
-                  ...(question.kind === "single_select" && event.target.checked
-                    ? { values: [] }
-                    : {}),
-                }))
-              }
-              className="mt-2 accent-og-accent"
-            />
-            <span className="min-w-0 flex-1">
-              <label
-                id={otherLabelId}
-                htmlFor={otherChoiceId}
-                className="block text-og-sm font-medium"
-              >
-                {messages.other}
-              </label>
-              <label htmlFor={otherTextId} className="sr-only">
-                {messages.other} answer for {visibleLabel}
-              </label>
+          {!question.skillReview ? (
+            <div
+              className={cn(
+                "flex items-start gap-2.5 rounded-og-md px-2.5 py-2 transition-colors",
+                draft.otherSelected
+                  ? "bg-og-status-waiting/12 text-og-fg"
+                  : "text-og-fg hover:bg-og-surface-1/80",
+              )}
+            >
               <input
-                id={otherTextId}
-                type="text"
-                value={draft.other}
-                disabled={busy}
-                placeholder="Type a value…"
-                onClick={() => onUpdate(selectOtherDraft)}
-                onFocus={() => onUpdate(selectOtherDraft)}
-                onChange={(event) => {
-                  const other = event.target.value;
+                id={otherChoiceId}
+                type={question.kind === "single_select" ? "radio" : "checkbox"}
+                name={question.kind === "single_select" ? fieldId : undefined}
+                aria-labelledby={otherLabelId}
+                checked={draft.otherSelected}
+                autoFocus={autoFocus && firstOption && question.options.length === 0}
+                onChange={(event) =>
                   onUpdate((current) => ({
-                    ...selectOtherDraft(current),
-                    other,
-                  }));
-                }}
-                className="mt-1.5 w-full rounded-og-sm border border-og-border bg-og-surface-1 px-2 py-1.5 text-og-sm text-og-fg outline-hidden focus:border-og-accent disabled:opacity-50"
+                    ...current,
+                    otherSelected: event.target.checked,
+                    ...(question.kind === "single_select" && event.target.checked
+                      ? { values: [] }
+                      : {}),
+                  }))
+                }
+                className="mt-2 accent-og-accent"
               />
-            </span>
-          </div>
+              <span className="min-w-0 flex-1">
+                <label
+                  id={otherLabelId}
+                  htmlFor={otherChoiceId}
+                  className="block text-og-sm font-medium"
+                >
+                  {messages.other}
+                </label>
+                <label htmlFor={otherTextId} className="sr-only">
+                  {messages.other} answer for {visibleLabel}
+                </label>
+                <input
+                  id={otherTextId}
+                  type="text"
+                  value={draft.other}
+                  disabled={busy}
+                  placeholder="Type a value…"
+                  onClick={() => onUpdate(selectOtherDraft)}
+                  onFocus={() => onUpdate(selectOtherDraft)}
+                  onChange={(event) => {
+                    const other = event.target.value;
+                    onUpdate((current) => ({
+                      ...selectOtherDraft(current),
+                      other,
+                    }));
+                  }}
+                  className="mt-1.5 w-full rounded-og-sm border border-og-border bg-og-surface-1 px-2 py-1.5 text-og-sm text-og-fg outline-hidden focus:border-og-accent disabled:opacity-50"
+                />
+              </span>
+            </div>
+          ) : null}
         </div>
       )}
-      {error ? (
+      {/* A secret field shows its error under the input, above Save to. */}
+      {error && !(question.kind === "secret" && question.secret) ? (
         <p id={errorId} role="alert" className="text-og-xs text-og-status-failed">
           {error}
         </p>
@@ -709,73 +1086,3 @@ function QuestionControls({
     </>
   );
 }
-
-export function answersFromDrafts(
-  questions: HumanInputQuestion[],
-  drafts: Record<string, HumanInputAnswerDraft>,
-  messageOverrides: Partial<HumanInputFormMessages> = {},
-): { answers: HumanInputAnswer[]; errors: Record<string, string> } {
-  const messages = { ...defaultHumanInputFormMessages, ...messageOverrides };
-  const answers: HumanInputAnswer[] = [];
-  const errors: Record<string, string> = {};
-  for (const question of questions) {
-    const draft = drafts[question.id] ?? emptyDraft();
-    const values = question.kind === "text" ? draft.values.filter(Boolean) : draft.values;
-    const other = draft.otherSelected ? draft.other : "";
-    const hasOther = Boolean(other.trim());
-    const supplied = values.length + (hasOther ? 1 : 0);
-
-    // Other-selected-but-empty must win over generic "required" — otherwise the
-    // user sees the wrong diagnosis next to a clearly selected control.
-    if (question.kind !== "text" && draft.otherSelected && !hasOther) {
-      errors[question.id] = messages.otherRequired;
-      continue;
-    }
-
-    if (question.required && supplied === 0) {
-      errors[question.id] = messages.required;
-      continue;
-    }
-    if (question.kind !== "text") {
-      const min = question.validation?.minSelections;
-      const max = question.kind === "single_select" ? 1 : question.validation?.maxSelections;
-      if (min != null && supplied < min) {
-        errors[question.id] = messages.minSelections(min);
-        continue;
-      }
-      if (max != null && supplied > max) {
-        errors[question.id] = messages.maxSelections(max);
-        continue;
-      }
-    }
-    if (supplied > 0) {
-      answers.push({
-        questionId: question.id,
-        values,
-        ...(hasOther ? { other } : {}),
-      });
-    }
-  }
-  return { answers, errors };
-}
-
-function initialDrafts(questions: HumanInputQuestion[]): Record<string, HumanInputAnswerDraft> {
-  return Object.fromEntries(questions.map((question) => [question.id, emptyDraft()]));
-}
-
-function emptyDraft(): HumanInputAnswerDraft {
-  return { values: [], other: "", otherSelected: false };
-}
-
-function formatDeadline(value: string): string {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return value;
-  const ms = date.getTime() - Date.now();
-  if (ms <= 0) return "deadline passed";
-  const minutes = Math.round(ms / 60_000);
-  if (minutes < 1) return "in under a minute";
-  if (minutes < 60) return `in ${minutes}m`;
-  const hours = Math.round(minutes / 60);
-  if (hours < 48) return `in ${hours}h`;
-  return date.toLocaleString();
-}