diff --git a/frontend/src/v1/README.md b/frontend/src/v1/README.md
index 59a7ae7f19..2e3dd02302 100644
--- a/frontend/src/v1/README.md
+++ b/frontend/src/v1/README.md
@@ -114,6 +114,24 @@ is convention.
 - `CodeEditor` uses Monaco from its default CDN, as v0 does. Never call
   `loader.config()` in v1: the loader is shared with v0.
 
+## Text inputs
+
+- Text controls come from `components/ui/form/` (`Input`, `Textarea`,
+  `PromptTextarea`, `SearchField`, `SecretField`) inside a `Field`, which
+  ties the label, helper and error text to the control. A control the Field
+  cannot name with `<label for>` (a radiogroup) takes `labelId` from
+  `useFieldControl` as `aria-labelledby`. A trigger that is itself the frame
+  (a select) uses `fieldFrameVariants({ focus: "self" })`.
+- A Field holds one form control. Every control under it that reads the
+  Field's context takes the same id and description, and a control that does
+  not read it (a native `<select>`) is left unlabelled. Give a min/max pair a
+  Field each.
+- A control's own `invalid`, `disabled` and `readOnly` win over its Field's.
+- An overlay (Dialog, Popover, Menu) that can hold a `SearchField` must call
+  `event.preventDefault()` in `onEscapeKeyDown` when
+  `isEscapeClearTarget(event)` is true, so Escape clears the search before it
+  closes the overlay.
+
 ## Version switch and route registry
 
 v0's router (`routes/Router.jsx`) wraps its routes in `VersionSwitch`, which
diff --git a/frontend/src/v1/components/ui/form/ErrorText.tsx b/frontend/src/v1/components/ui/form/ErrorText.tsx
new file mode 100644
index 0000000000..7d58f91e20
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/ErrorText.tsx
@@ -0,0 +1,19 @@
+import { cn } from "@v1/lib/cn";
+import type { ComponentProps, JSX } from "react";
+
+export type ErrorTextProps = ComponentProps<"p">;
+
+/** A validation message. role="alert" makes screen readers announce it when it is rendered, so render it only while there is an error. */
+export function ErrorText({
+  className,
+  ...props
+}: ErrorTextProps): JSX.Element {
+  return (
+    <p
+      role="alert"
+      data-slot="error-text"
+      className={cn("ui:text-caption ui:text-destructive", className)}
+      {...props}
+    />
+  );
+}
diff --git a/frontend/src/v1/components/ui/form/Field.test.tsx b/frontend/src/v1/components/ui/form/Field.test.tsx
new file mode 100644
index 0000000000..6db4c6c15b
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/Field.test.tsx
@@ -0,0 +1,210 @@
+import { screen } from "@testing-library/react";
+import { renderV1 } from "@v1/test";
+import type { JSX } from "react";
+import { expect, it } from "vitest";
+import { ErrorText } from "./ErrorText";
+import { Field } from "./Field";
+import { fieldFrameVariants } from "./FieldFrame";
+import { useFieldControl } from "./field-context";
+import { Input } from "./Input";
+import { Label } from "./Label";
+import { PromptTextarea } from "./PromptTextarea";
+import { SearchField } from "./SearchField";
+import { SecretField } from "./SecretField";
+import { Textarea } from "./Textarea";
+
+/** Every text control, rendered with the given props. */
+const CONTROLS: [string, (props: ControlProps) => JSX.Element][] = [
+  ["Input", (p) => <Input {...p} />],
+  ["Textarea", (p) => <Textarea {...p} />],
+  ["PromptTextarea", (p) => <PromptTextarea {...p} />],
+  ["SearchField", (p) => <SearchField {...p} />],
+  ["SecretField", (p) => <SecretField {...p} />],
+];
+
+type ControlProps = Readonly<{
+  invalid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  "aria-label"?: string;
+}>;
+
+const frameOf = (control: HTMLElement) =>
+  control.closest("[data-slot=field-frame]") as HTMLElement;
+
+it.each(CONTROLS)("associates the Field label with a %s", (_, make) => {
+  renderV1(<Field label="Name">{make({})}</Field>);
+  const named = screen.getByLabelText("Name");
+  expect(named.dataset.slot).toBe("control");
+});
+
+it.each(
+  CONTROLS,
+)("wires a %s to the Field's error, helper and states", (_, make) => {
+  renderV1(
+    <Field label="Name" id="name" helperText="Help" error="Bad" disabled>
+      {make({})}
+    </Field>,
+  );
+  const control = screen.getByLabelText("Name") as HTMLInputElement;
+  expect(control.getAttribute("aria-invalid")).toBe("true");
+  expect(control.getAttribute("aria-describedby")).toBe(
+    "name-helper name-error",
+  );
+  expect(control.disabled).toBe(true);
+  expect(frameOf(control).hasAttribute("data-invalid")).toBe(true);
+  expect(frameOf(control).hasAttribute("data-disabled")).toBe(true);
+});
+
+it.each(
+  CONTROLS,
+)("marks a standalone %s from its own state props", (_, make) => {
+  const { rerender } = renderV1(make({ "aria-label": "C" }));
+  const control = () => screen.getByLabelText("C") as HTMLInputElement;
+  expect(control().hasAttribute("aria-invalid")).toBe(false);
+  for (const flag of ["data-invalid", "data-disabled", "data-readonly"]) {
+    expect(frameOf(control()).hasAttribute(flag)).toBe(false);
+  }
+  rerender(make({ "aria-label": "C", invalid: true, readOnly: true }));
+  expect(control().getAttribute("aria-invalid")).toBe("true");
+  expect(control().readOnly).toBe(true);
+  expect(frameOf(control()).hasAttribute("data-invalid")).toBe(true);
+  expect(frameOf(control()).hasAttribute("data-readonly")).toBe(true);
+  rerender(make({ "aria-label": "C", disabled: true }));
+  expect(control().disabled).toBe(true);
+  expect(frameOf(control()).hasAttribute("data-disabled")).toBe(true);
+});
+
+it.each([
+  ["Input", <Input key="i" id="own" />],
+  ["Textarea", <Textarea key="t" id="own" />],
+])("names a %s that has its own id: the Field's id wins", (_, control) => {
+  renderV1(<Field label="Name">{control}</Field>);
+  const named = screen.getByLabelText("Name");
+  expect(named.id).not.toBe("own");
+  expect(document.querySelector("label")?.htmlFor).toBe(named.id);
+});
+
+it("associates a standalone Label through htmlFor", () => {
+  renderV1(
+    <>
+      <Label htmlFor="api-key">API key</Label>
+      <Input id="api-key" />
+    </>,
+  );
+  expect(screen.getByLabelText("API key").id).toBe("api-key");
+});
+
+it("describes the control by its helper text, and adds the error when it appears", () => {
+  const { rerender } = renderV1(
+    <Field label="Name" helperText="As shown on invoices">
+      <Input />
+    </Field>,
+  );
+  const input = screen.getByLabelText("Name");
+  const helper = screen.getByText("As shown on invoices");
+  expect(input.getAttribute("aria-describedby")).toBe(helper.id);
+  expect(input.hasAttribute("aria-invalid")).toBe(false);
+  expect(screen.queryByRole("alert")).toBeNull();
+
+  rerender(
+    <Field label="Name" helperText="As shown on invoices" error="Required">
+      <Input />
+    </Field>,
+  );
+  const alert = screen.getByRole("alert");
+  expect(alert.textContent).toBe("Required");
+  expect(input.getAttribute("aria-invalid")).toBe("true");
+  expect(input.getAttribute("aria-describedby")).toBe(
+    `${helper.id} ${alert.id}`,
+  );
+  expect(
+    input.closest("[data-slot=field-frame]")?.hasAttribute("data-invalid"),
+  ).toBe(true);
+});
+
+it("keeps the control's own description after the field's", () => {
+  renderV1(
+    <Field label="Name" helperText="Help" id="name">
+      <Input aria-describedby="extra" />
+    </Field>,
+  );
+  const input = screen.getByLabelText("Name");
+  expect(input.id).toBe("name");
+  expect(input.getAttribute("aria-describedby")).toMatch(/ extra$/);
+});
+
+it("passes disabled and read-only from the field to the control and frame", () => {
+  renderV1(
+    <>
+      <Field label="Off" disabled>
+        <Input />
+      </Field>
+      <Field label="Fixed" readOnly>
+        <Textarea />
+      </Field>
+    </>,
+  );
+  const off = screen.getByLabelText("Off") as HTMLInputElement;
+  const fixed = screen.getByLabelText("Fixed") as HTMLTextAreaElement;
+  expect(off.disabled).toBe(true);
+  expect(off.parentElement?.hasAttribute("data-disabled")).toBe(true);
+  expect(fixed.readOnly).toBe(true);
+  expect(fixed.parentElement?.hasAttribute("data-readonly")).toBe(true);
+});
+
+it("renders ErrorText as an alert so it is announced", () => {
+  renderV1(<ErrorText>Bad value</ErrorText>);
+  expect(screen.getByRole("alert").textContent).toBe("Bad value");
+});
+
+// FormField (P1-T06) passes `error` into Field, so this precedence is what a form control gets.
+it.each(
+  CONTROLS,
+)("a %s's own invalid, disabled and readOnly win over its Field's", (_, make) => {
+  renderV1(
+    <Field label="Name" error="x" disabled readOnly>
+      {make({ invalid: false, disabled: false, readOnly: false })}
+    </Field>,
+  );
+  const control = screen.getByLabelText("Name") as HTMLInputElement;
+  expect(control).not.toHaveAttribute("aria-invalid");
+  expect(control).toBeEnabled();
+  expect(control.readOnly).toBe(false);
+  expect(frameOf(control)).not.toHaveAttribute("data-invalid");
+});
+
+it("invalid={false} on a Field keeps its error text but not the invalid mark", () => {
+  renderV1(
+    <Field label="Name" error="Taken" invalid={false}>
+      <Input />
+    </Field>,
+  );
+  const control = screen.getByLabelText("Name");
+  expect(control).not.toHaveAttribute("aria-invalid");
+  expect(screen.getByText("Taken")).toBeInTheDocument();
+});
+
+it("gives the label an id that useFieldControl hands to a group control", () => {
+  function Group() {
+    const { labelId } = useFieldControl({});
+    return <div role="radiogroup" aria-labelledby={labelId} />;
+  }
+  renderV1(
+    <Field id="plan" label="Plan">
+      <Group />
+    </Field>,
+  );
+  expect(screen.getByRole("radiogroup", { name: "Plan" })).toBeInTheDocument();
+  expect(screen.getByText("Plan")).toHaveAttribute("id", "plan-label");
+});
+
+it("fieldFrameVariants: focus within rings on the control, focus self on the frame", () => {
+  expect(fieldFrameVariants()).toContain(
+    "ui:has-[[data-slot=control]:focus-visible]:focus-ring",
+  );
+  const self = fieldFrameVariants({ focus: "self" });
+  expect(self).toContain("ui:focus-visible:focus-ring");
+  expect(self).not.toContain("has-[[data-slot=control]");
+  expect(self).toContain("ui:data-readonly:bg-muted");
+});
diff --git a/frontend/src/v1/components/ui/form/Field.tsx b/frontend/src/v1/components/ui/form/Field.tsx
new file mode 100644
index 0000000000..5caed380df
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/Field.tsx
@@ -0,0 +1,77 @@
+import { cn } from "@v1/lib/cn";
+import { type JSX, type ReactNode, useId, useMemo } from "react";
+import { ErrorText } from "./ErrorText";
+import { FieldContext, type FieldContextValue } from "./field-context";
+import { HelperText } from "./HelperText";
+import { Label } from "./Label";
+
+export type FieldProps = Readonly<{
+  label: ReactNode;
+  helperText?: ReactNode;
+  /** Shown as ErrorText and marks the control invalid unless `invalid` says otherwise. */
+  error?: ReactNode;
+  invalid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /** The control's id, which replaces any id on the control itself; generated when omitted. */
+  id?: string;
+  className?: string;
+  /**
+   * One form control. The Field gives its id, description and state to every
+   * control that reads its context, so two controls would share one id, and a
+   * control that does not read it (a native `<select>`) is not labelled.
+   */
+  children: ReactNode;
+}>;
+
+/** Label, control, helper and error text, wired together: the label names the control and the control is described by the texts. */
+export function Field({
+  label,
+  helperText,
+  error,
+  invalid,
+  disabled = false,
+  readOnly = false,
+  id,
+  className,
+  children,
+}: FieldProps): JSX.Element {
+  const generatedId = useId();
+  const controlId = id ?? `${generatedId}control`;
+  // Derived from the control id, so a caller that passes `id` gets stable ids.
+  const labelId = `${controlId}-label`;
+  const helperId = helperText ? `${controlId}-helper` : undefined;
+  const errorId = error ? `${controlId}-error` : undefined;
+  const isInvalid = invalid ?? Boolean(error);
+
+  const context = useMemo<FieldContextValue>(
+    () => ({
+      controlId,
+      labelId,
+      describedBy: [helperId, errorId].filter(Boolean).join(" ") || undefined,
+      invalid: isInvalid,
+      disabled,
+      readOnly,
+    }),
+    [controlId, labelId, helperId, errorId, isInvalid, disabled, readOnly],
+  );
+
+  return (
+    <FieldContext value={context}>
+      <div data-slot="field" className={cn("ui:grid ui:gap-1.5", className)}>
+        <Label
+          id={labelId}
+          htmlFor={controlId}
+          data-disabled={disabled ? "" : undefined}
+        >
+          {label}
+        </Label>
+        {children}
+        {helperText ? (
+          <HelperText id={helperId}>{helperText}</HelperText>
+        ) : null}
+        {error ? <ErrorText id={errorId}>{error}</ErrorText> : null}
+      </div>
+    </FieldContext>
+  );
+}
diff --git a/frontend/src/v1/components/ui/form/FieldAction.test.tsx b/frontend/src/v1/components/ui/form/FieldAction.test.tsx
new file mode 100644
index 0000000000..bea337ce39
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/FieldAction.test.tsx
@@ -0,0 +1,21 @@
+import { screen } from "@testing-library/react";
+import { renderV1 } from "@v1/test";
+import { expect, it, vi } from "vitest";
+import { FieldAction } from "./FieldAction";
+
+it("is a named button that does not submit its form", async () => {
+  const onSubmit = vi.fn((event: { preventDefault: () => void }) =>
+    event.preventDefault(),
+  );
+  const onClick = vi.fn();
+  const { user } = renderV1(
+    <form onSubmit={onSubmit}>
+      <FieldAction label="Copy" onClick={onClick} />
+    </form>,
+  );
+  const button = screen.getByRole("button", { name: "Copy" });
+  expect(button.getAttribute("title")).toBe("Copy");
+  await user.click(button);
+  expect(onClick).toHaveBeenCalledOnce();
+  expect(onSubmit).not.toHaveBeenCalled();
+});
diff --git a/frontend/src/v1/components/ui/form/FieldAction.tsx b/frontend/src/v1/components/ui/form/FieldAction.tsx
new file mode 100644
index 0000000000..3fde05d650
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/FieldAction.tsx
@@ -0,0 +1,30 @@
+import { cn } from "@v1/lib/cn";
+import type { ComponentProps, JSX } from "react";
+
+export type FieldActionProps = Omit<ComponentProps<"button">, "aria-label"> &
+  Readonly<{
+    /** The accessible name; also shown as the tooltip, since the button shows only an icon. */
+    label: string;
+  }>;
+
+/** An icon button inside a field frame, such as Reveal, Copy or Clear. */
+export function FieldAction({
+  label,
+  className,
+  type = "button",
+  ...props
+}: FieldActionProps): JSX.Element {
+  return (
+    <button
+      type={type}
+      aria-label={label}
+      title={label}
+      data-slot="field-action"
+      className={cn(
+        "ui:inline-flex ui:size-6 ui:shrink-0 ui:cursor-pointer ui:items-center ui:justify-center ui:rounded-sm ui:border-0 ui:bg-transparent ui:p-0 ui:text-muted-foreground ui:hover:bg-accent ui:hover:text-foreground ui:focus-visible:focus-ring ui:aria-pressed:text-foreground ui:disabled:pointer-events-none ui:disabled:opacity-50 ui:[&>svg]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/frontend/src/v1/components/ui/form/FieldFrame.tsx b/frontend/src/v1/components/ui/form/FieldFrame.tsx
new file mode 100644
index 0000000000..af2e8306ef
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/FieldFrame.tsx
@@ -0,0 +1,68 @@
+import { cn } from "@v1/lib/cn";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps, JSX } from "react";
+
+/*
+ * The one border, radius, padding and focus treatment for every text control.
+ * By default the ring follows the control (data-slot="control"), not the whole
+ * frame, so tabbing to an adornment button rings only that button. A trigger
+ * that is itself the frame (a select) takes `focus: "self"`. Invalid swaps the
+ * ring colour, so an invalid field keeps a destructive ring while focused.
+ */
+export const fieldFrameVariants = cva(
+  [
+    "ui:box-border ui:flex ui:w-full ui:min-w-0 ui:gap-1.5 ui:rounded-md ui:border ui:border-input ui:bg-background ui:text-body ui:text-foreground ui:transition-[border-color,box-shadow]",
+    "ui:hover:border-muted-foreground",
+    "ui:data-readonly:border-input ui:data-readonly:bg-muted",
+    "ui:data-invalid:border-destructive ui:data-invalid:[--ring:var(--destructive)]",
+    "ui:data-disabled:pointer-events-none ui:data-disabled:opacity-50",
+  ],
+  {
+    variants: {
+      focus: {
+        within: "ui:has-[[data-slot=control]:focus-visible]:focus-ring",
+        self: "ui:outline-none ui:focus-visible:focus-ring",
+      },
+      multiline: {
+        false: "ui:h-8 ui:items-center ui:px-2.5",
+        true: "ui:items-stretch",
+      },
+    },
+    defaultVariants: { focus: "within", multiline: false },
+  },
+);
+
+/** Classes for the native input or textarea inside a frame; the frame draws the box. */
+export const fieldControlClass =
+  "ui:min-w-0 ui:flex-1 ui:border-0 ui:bg-transparent ui:p-0 ui:text-body ui:text-foreground ui:outline-none ui:placeholder:text-muted-foreground ui:disabled:cursor-not-allowed";
+
+export type FieldFrameProps = ComponentProps<"div"> &
+  VariantProps<typeof fieldFrameVariants> &
+  Readonly<{
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+  }>;
+
+const flag = (on: boolean | undefined) => (on ? "" : undefined);
+
+export function FieldFrame({
+  invalid,
+  disabled,
+  readOnly,
+  multiline,
+  focus,
+  className,
+  ...props
+}: FieldFrameProps): JSX.Element {
+  return (
+    <div
+      data-slot="field-frame"
+      data-invalid={flag(invalid)}
+      data-disabled={flag(disabled)}
+      data-readonly={flag(readOnly)}
+      className={cn(fieldFrameVariants({ focus, multiline }), className)}
+      {...props}
+    />
+  );
+}
diff --git a/frontend/src/v1/components/ui/form/HelperText.tsx b/frontend/src/v1/components/ui/form/HelperText.tsx
new file mode 100644
index 0000000000..b353282c47
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/HelperText.tsx
@@ -0,0 +1,18 @@
+import { cn } from "@v1/lib/cn";
+import type { ComponentProps, JSX } from "react";
+
+export type HelperTextProps = ComponentProps<"p">;
+
+/** Guidance under a control; the control points at its id through aria-describedby. */
+export function HelperText({
+  className,
+  ...props
+}: HelperTextProps): JSX.Element {
+  return (
+    <p
+      data-slot="helper-text"
+      className={cn("ui:text-caption ui:text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
diff --git a/frontend/src/v1/components/ui/form/Input.test.tsx b/frontend/src/v1/components/ui/form/Input.test.tsx
new file mode 100644
index 0000000000..2f6fec92cf
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/Input.test.tsx
@@ -0,0 +1,107 @@
+import { screen } from "@testing-library/react";
+import { renderV1 } from "@v1/test";
+import { expect, it } from "vitest";
+import { Field } from "./Field";
+import { Input } from "./Input";
+import { Textarea } from "./Textarea";
+
+it("renders adornments around the control in order", () => {
+  renderV1(
+    <Input
+      aria-label="URL"
+      leading={<svg data-testid="icon" />}
+      prefix="https://"
+      suffix=".com"
+      trailing={<button type="button">Go</button>}
+    />,
+  );
+  const frame = screen.getByLabelText("URL").parentElement as HTMLElement;
+  const slots = [...frame.children].map(
+    (el) => (el as HTMLElement).dataset.slot,
+  );
+  expect(slots).toEqual([
+    "field-leading",
+    "field-prefix",
+    "control",
+    "field-suffix",
+    "field-trailing",
+  ]);
+  expect(screen.getByRole("button", { name: "Go" })).toBeTruthy();
+});
+
+it("is 32 tall and takes the single focus treatment from its frame", () => {
+  renderV1(<Input aria-label="Name" />);
+  const frame = screen.getByLabelText("Name").parentElement as HTMLElement;
+  expect(frame.dataset.slot).toBe("field-frame");
+  expect(frame.className).toContain("ui:h-8");
+  expect(frame.className).toContain(
+    "ui:has-[[data-slot=control]:focus-visible]:focus-ring",
+  );
+});
+
+it.each([
+  ["invalid", { invalid: true }, "data-invalid"],
+  ["disabled", { disabled: true }, "data-disabled"],
+  ["read-only", { readOnly: true }, "data-readonly"],
+])("marks the frame %s", (_, props, attribute) => {
+  renderV1(<Input aria-label="Name" {...props} />);
+  const input = screen.getByLabelText("Name");
+  expect(input.parentElement?.hasAttribute(attribute)).toBe(true);
+});
+
+it("sets aria-invalid only when invalid", () => {
+  const { rerender } = renderV1(<Input aria-label="Name" />);
+  expect(screen.getByLabelText("Name").hasAttribute("aria-invalid")).toBe(
+    false,
+  );
+  rerender(<Input aria-label="Name" invalid />);
+  expect(screen.getByLabelText("Name").getAttribute("aria-invalid")).toBe(
+    "true",
+  );
+});
+
+it("describes the control by its prefix and suffix text, after the Field's", () => {
+  renderV1(
+    <Field label="Endpoint" helperText="Your API host">
+      <Input prefix="https://" suffix="/v1" />
+    </Field>,
+  );
+  expect(screen.getByLabelText("Endpoint")).toHaveAccessibleDescription(
+    "Your API host https:// /v1",
+  );
+});
+
+it("describes a standalone control by its suffix, keeping its own description", () => {
+  renderV1(
+    <>
+      <span id="hint">Up to 100</span>
+      <Input aria-label="Pages" aria-describedby="hint" suffix="pages" />
+    </>,
+  );
+  expect(screen.getByLabelText("Pages")).toHaveAccessibleDescription(
+    "Up to 100 pages",
+  );
+});
+
+it.each([
+  ["Input", (p: object) => <Input {...p} />],
+  ["Textarea", (p: object) => <Textarea {...p} />],
+])("marks a %s frame invalid from a spread aria-invalid, so frame and ARIA agree", (_, make) => {
+  const { rerender } = renderV1(
+    <Field label="Name">{make({ "aria-invalid": true })}</Field>,
+  );
+  const control = () => screen.getByLabelText("Name");
+  expect(control()).toHaveAttribute("aria-invalid", "true");
+  expect(control().closest("[data-slot=field-frame]")).toHaveAttribute(
+    "data-invalid",
+  );
+  rerender(
+    <Field label="Name" error="Taken">
+      {make({ "aria-invalid": false })}
+    </Field>,
+  );
+  expect(control()).toHaveAttribute("aria-invalid", "true");
+  expect(control().closest("[data-slot=field-frame]")).toHaveAttribute(
+    "data-invalid",
+  );
+});
diff --git a/frontend/src/v1/components/ui/form/Input.tsx b/frontend/src/v1/components/ui/form/Input.tsx
new file mode 100644
index 0000000000..5fd6a988e6
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/Input.tsx
@@ -0,0 +1,99 @@
+import { cn } from "@v1/lib/cn";
+import { type ComponentProps, type JSX, type ReactNode, useId } from "react";
+import { FieldFrame, fieldControlClass } from "./FieldFrame";
+import { joinIds, useFieldControl } from "./field-context";
+
+export type InputProps = Omit<ComponentProps<"input">, "prefix"> &
+  Readonly<{
+    /** Icon before the value. */
+    leading?: ReactNode;
+    /** Icon or FieldAction after the value. */
+    trailing?: ReactNode;
+    /** Text before the value, such as "https://". */
+    prefix?: ReactNode;
+    /** Text after the value, such as "pages". */
+    suffix?: ReactNode;
+    invalid?: boolean;
+    /** Classes for the native input; `className` styles the frame. */
+    controlClassName?: string;
+  }>;
+
+const iconSlot =
+  "ui:flex ui:shrink-0 ui:items-center ui:text-muted-foreground ui:[&>svg]:size-4";
+const textSlot =
+  "ui:shrink-0 ui:whitespace-nowrap ui:text-muted-foreground ui:select-none";
+
+/** A single-line text control, 32 tall, with optional adornments. */
+export function Input({
+  leading,
+  trailing,
+  prefix,
+  suffix,
+  invalid,
+  disabled,
+  readOnly,
+  id,
+  className,
+  controlClassName,
+  "aria-describedby": describedBy,
+  "aria-invalid": ariaInvalid,
+  ...props
+}: InputProps): JSX.Element {
+  const control = useFieldControl({
+    id,
+    "aria-describedby": describedBy,
+    "aria-invalid": ariaInvalid,
+    invalid,
+    disabled,
+    readOnly,
+  });
+  // The prefix and suffix are part of the value ("https://", "pages"), so the
+  // control is described by them; they are not in its accessible name.
+  const generatedId = useId();
+  const slotId = control.id ?? generatedId;
+  const prefixId = prefix ? `${slotId}-prefix` : undefined;
+  const suffixId = suffix ? `${slotId}-suffix` : undefined;
+  return (
+    <FieldFrame
+      invalid={control.invalid}
+      disabled={control.disabled}
+      readOnly={control.readOnly}
+      className={className}
+    >
+      {leading ? (
+        <span data-slot="field-leading" className={iconSlot}>
+          {leading}
+        </span>
+      ) : null}
+      {prefix ? (
+        <span id={prefixId} data-slot="field-prefix" className={textSlot}>
+          {prefix}
+        </span>
+      ) : null}
+      <input
+        data-slot="control"
+        id={control.id}
+        aria-describedby={joinIds(
+          control["aria-describedby"],
+          prefixId,
+          suffixId,
+        )}
+        aria-invalid={control["aria-invalid"]}
+        disabled={control.disabled}
+        readOnly={control.readOnly}
+        className={cn(fieldControlClass, "ui:h-full", controlClassName)}
+        {...props}
+      />
+      {suffix ? (
+        <span id={suffixId} data-slot="field-suffix" className={textSlot}>
+          {suffix}
+        </span>
+      ) : null}
+      {trailing ? (
+        <span data-slot="field-trailing" className={iconSlot}>
+          {trailing}
+        </span>
+      ) : null}
+    </FieldFrame>
+  );
+}
diff --git a/frontend/src/v1/components/ui/form/Label.tsx b/frontend/src/v1/components/ui/form/Label.tsx
new file mode 100644
index 0000000000..195964d384
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/Label.tsx
@@ -0,0 +1,19 @@
+import { cn } from "@v1/lib/cn";
+import { Label as LabelPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+export type LabelProps = ComponentProps<typeof LabelPrimitive.Root>;
+
+/** A control's visible name; pair it with the control through `htmlFor`, or let Field do it. */
+export function Label({ className, ...props }: LabelProps): JSX.Element {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "ui:text-body-small ui:font-medium ui:text-foreground ui:select-none ui:data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/frontend/src/v1/components/ui/form/PromptTextarea.test.tsx b/frontend/src/v1/components/ui/form/PromptTextarea.test.tsx
new file mode 100644
index 0000000000..4364df3911
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/PromptTextarea.test.tsx
@@ -0,0 +1,209 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { installResizeObserver, renderV1 } from "@v1/test";
+import { type JSX, useState } from "react";
+import { expect, it, vi } from "vitest";
+import { Field } from "./Field";
+import { PromptTextarea } from "./PromptTextarea";
+
+function setup(onSubmit = vi.fn()) {
+  const { user } = renderV1(
+    <PromptTextarea aria-label="Prompt" onSubmit={onSubmit} />,
+  );
+  return {
+    user,
+    onSubmit,
+    textarea: screen.getByLabelText("Prompt") as HTMLTextAreaElement,
+  };
+}
+
+it("submits the text on Enter without inserting a line break", async () => {
+  const { user, onSubmit, textarea } = setup();
+  await user.type(textarea, "Summarise{Enter}");
+  expect(onSubmit).toHaveBeenCalledExactlyOnceWith("Summarise");
+  expect(textarea.value).toBe("Summarise");
+});
+
+it("inserts a line break on Shift+Enter and does not submit", async () => {
+  const { user, onSubmit, textarea } = setup();
+  await user.type(textarea, "one{Shift>}{Enter}{/Shift}two");
+  expect(onSubmit).not.toHaveBeenCalled();
+  expect(textarea.value).toBe("one\ntwo");
+});
+
+it("does not submit an Enter that ends an IME composition", () => {
+  const { onSubmit, textarea } = setup();
+  fireEvent.change(textarea, { target: { value: "かな" } });
+  fireEvent.keyDown(textarea, { key: "Enter", isComposing: true });
+  // Safari: composition already ended, only keyCode 229 marks it.
+  fireEvent.keyDown(textarea, { key: "Enter", keyCode: 229 });
+  expect(onSubmit).not.toHaveBeenCalled();
+  fireEvent.keyDown(textarea, { key: "Enter" });
+  expect(onSubmit).toHaveBeenCalledExactlyOnceWith("かな");
+});
+
+it("lets the caller's onKeyDown cancel the submit", () => {
+  const onSubmit = vi.fn();
+  renderV1(
+    <PromptTextarea
+      aria-label="Prompt"
+      onSubmit={onSubmit}
+      onKeyDown={(event) => event.preventDefault()}
+    />,
+  );
+  fireEvent.keyDown(screen.getByLabelText("Prompt"), { key: "Enter" });
+  expect(onSubmit).not.toHaveBeenCalled();
+});
+
+it("does nothing on Enter when the box is empty or only whitespace", async () => {
+  const { user, onSubmit, textarea } = setup();
+  await user.type(textarea, "{Enter}");
+  expect(textarea.value).toBe("");
+  await user.type(textarea, "  {Enter}");
+  expect(textarea.value).toBe("  ");
+  expect(onSubmit).not.toHaveBeenCalled();
+});
+
+it("labels the Enter key send on a touch keyboard only when Enter submits", () => {
+  const { textarea } = setup();
+  expect(textarea).toHaveAttribute("enterkeyhint", "send");
+  renderV1(<PromptTextarea aria-label="Note" />);
+  expect(screen.getByLabelText("Note")).not.toHaveAttribute("enterkeyhint");
+});
+
+it("inserts a line break on Enter when there is no onSubmit", async () => {
+  const { user } = renderV1(<PromptTextarea aria-label="Prompt" />);
+  const textarea = screen.getByLabelText("Prompt") as HTMLTextAreaElement;
+  await user.type(textarea, "a{Enter}b");
+  expect(textarea.value).toBe("a\nb");
+});
+
+it("starts at 104, grows with content, and scrolls past its maximum", () => {
+  const { textarea } = setup();
+  expect(textarea.parentElement?.className).toContain("ui:min-h-26");
+  expect(textarea.className).toContain("ui:field-sizing-content");
+  expect(textarea.className).toContain("ui:max-h-60");
+  expect(textarea.className).toContain("ui:overflow-y-auto");
+});
+
+it("sizes itself from scrollHeight where field-sizing is unsupported", () => {
+  vi.stubGlobal("CSS", { supports: () => false });
+  const { textarea } = setup();
+  Object.defineProperty(textarea, "scrollHeight", { value: 180 });
+  fireEvent.input(textarea, { target: { value: "long text" } });
+  expect(textarea.style.getPropertyValue("--prompt-height")).toBe("180px");
+});
+
+/** Makes scrollHeight follow the text, as a laid-out textarea would. */
+function measureByLength(textarea: HTMLTextAreaElement) {
+  Object.defineProperty(textarea, "scrollHeight", {
+    configurable: true,
+    get: () => (textarea.value === "" ? 104 : 104 + textarea.value.length),
+  });
+}
+
+it("re-fits a controlled value cleared after submit, without an input event", async () => {
+  vi.stubGlobal("CSS", { supports: () => false });
+  function Controlled() {
+    const [value, setValue] = useState("");
+    return (
+      <PromptTextarea
+        aria-label="Prompt"
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        onSubmit={() => setValue("")}
+      />
+    );
+  }
+  const { user } = renderV1(<Controlled />);
+  const textarea = screen.getByLabelText("Prompt") as HTMLTextAreaElement;
+  measureByLength(textarea);
+  await user.type(textarea, "twelve chars");
+  expect(textarea.style.getPropertyValue("--prompt-height")).toBe("116px");
+  await user.keyboard("{Enter}");
+  expect(textarea.value).toBe("");
+  expect(textarea.style.getPropertyValue("--prompt-height")).toBe("104px");
+});
+
+it("re-fits an uncontrolled value after its form resets", async () => {
+  vi.stubGlobal("CSS", { supports: () => false });
+  renderV1(
+    <form>
+      <PromptTextarea aria-label="Prompt" defaultValue="" />
+    </form>,
+  );
+  const textarea = screen.getByLabelText("Prompt") as HTMLTextAreaElement;
+  measureByLength(textarea);
+  fireEvent.input(textarea, { target: { value: "abcd" } });
+  expect(textarea.style.getPropertyValue("--prompt-height")).toBe("108px");
+  // A browser dispatches "reset" before it restores the values (happy-dom
+  // restores first), so dispatch the event while the old text is still there.
+  fireEvent.reset(textarea.form as HTMLFormElement);
+  textarea.value = "";
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+  expect(textarea.style.getPropertyValue("--prompt-height")).toBe("104px");
+});
+
+it("keeps the height automatic while there is no layout to measure", () => {
+  vi.stubGlobal("CSS", { supports: () => false });
+  const { textarea } = setup();
+  Object.defineProperty(textarea, "scrollHeight", { value: 0 });
+  fireEvent.input(textarea, { target: { value: "hidden" } });
+  expect(textarea.style.getPropertyValue("--prompt-height")).toBe("");
+});
+
+it("re-fits when a hidden textarea is shown or its width changes", () => {
+  vi.stubGlobal("CSS", { supports: () => false });
+  const size = installResizeObserver();
+  const { textarea } = setup();
+  let laidOut = false;
+  Object.defineProperty(textarea, "scrollHeight", {
+    configurable: true,
+    get: () => (laidOut ? 104 + textarea.value.length : 0),
+  });
+  fireEvent.input(textarea, { target: { value: "hidden text" } });
+  expect(textarea.style.getPropertyValue("--prompt-height")).toBe("");
+  laidOut = true;
+  size.resize(textarea, { width: 300, height: 104 });
+  expect(textarea.style.getPropertyValue("--prompt-height")).toBe("115px");
+  textarea.value = "hidden text, wrapped";
+  size.resize(textarea, { width: 200, height: 115 });
+  expect(textarea.style.getPropertyValue("--prompt-height")).toBe("124px");
+});
+
+it("ignores height-only resizes, which its own fit causes", () => {
+  vi.stubGlobal("CSS", { supports: () => false });
+  const size = installResizeObserver();
+  const { textarea } = setup();
+  measureByLength(textarea);
+  size.resize(textarea, { width: 300, height: 104 });
+  textarea.style.setProperty("--prompt-height", "999px");
+  size.resize(textarea, { width: 300, height: 999 });
+  expect(textarea.style.getPropertyValue("--prompt-height")).toBe("999px");
+});
+
+it("does not observe where field-sizing does the work", () => {
+  vi.stubGlobal("CSS", { supports: () => true });
+  const size = installResizeObserver();
+  setup();
+  expect(size.observed()).toEqual([]);
+});
+
+it.each([
+  ["prop", (node: JSX.Element) => node, { readOnly: true }],
+  [
+    "Field",
+    (node: JSX.Element) => (
+      <Field label="Prompt" readOnly>
+        {node}
+      </Field>
+    ),
+    {},
+  ],
+])("does not submit when read-only by %s", (_, wrap, props) => {
+  const onSubmit = vi.fn();
+  renderV1(
+    wrap(<PromptTextarea aria-label="Prompt" onSubmit={onSubmit} {...props} />),
+  );
+  fireEvent.keyDown(screen.getByLabelText("Prompt"), { key: "Enter" });
+  expect(onSubmit).not.toHaveBeenCalled();
+});
diff --git a/frontend/src/v1/components/ui/form/PromptTextarea.tsx b/frontend/src/v1/components/ui/form/PromptTextarea.tsx
new file mode 100644
index 0000000000..36919f5975
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/PromptTextarea.tsx
@@ -0,0 +1,150 @@
+import { cn } from "@v1/lib/cn";
+import { mergeRefs } from "@v1/lib/merge-refs";
+import {
+  type JSX,
+  type KeyboardEvent,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { useFieldControl } from "./field-context";
+import { isComposing } from "./keyboard";
+import { Textarea, type TextareaProps } from "./Textarea";
+
+export type PromptTextareaProps = Omit<TextareaProps, "onSubmit"> &
+  Readonly<{
+    /** Called with the text on Enter; Enter on an empty or whitespace-only box does nothing. Without it, Enter inserts a line break as in a Textarea. */
+    onSubmit?: (value: string) => void;
+  }>;
+
+function supportsFieldSizing(): boolean {
+  return (
+    typeof CSS !== "undefined" &&
+    typeof CSS.supports === "function" &&
+    CSS.supports("field-sizing", "content")
+  );
+}
+
+/*
+ * Where field-sizing is missing, size the textarea from its scrollHeight. The
+ * height travels as a custom property that a class reads (styling rule S1);
+ * min-h and max-h still clamp it.
+ */
+function fitToContent(element: HTMLTextAreaElement | null): void {
+  if (!element || supportsFieldSizing()) {
+    return;
+  }
+  element.style.setProperty("--prompt-height", "auto");
+  // 0 means no layout yet (hidden or detached); keep auto until it has one.
+  if (element.scrollHeight === 0) {
+    element.style.removeProperty("--prompt-height");
+    return;
+  }
+  element.style.setProperty("--prompt-height", `${element.scrollHeight}px`);
+}
+
+/** The prompt box: at least 104 tall, grows with its text to a maximum, then scrolls. Enter submits; Shift+Enter breaks the line. */
+export function PromptTextarea({
+  onSubmit,
+  onKeyDown,
+  onInput,
+  value,
+  ref,
+  readOnly,
+  className,
+  controlClassName,
+  ...props
+}: PromptTextareaProps): JSX.Element {
+  const state = useFieldControl({ readOnly });
+  const innerRef = useRef<HTMLTextAreaElement>(null);
+  const textareaRef = useMemo(() => mergeRefs(innerRef, ref), [ref]);
+
+  // A controlled value can change without an input event (cleared after submit).
+  // biome-ignore lint/correctness/useExhaustiveDependencies: value is the trigger, read through the ref.
+  useLayoutEffect(() => {
+    fitToContent(innerRef.current);
+  }, [value]);
+
+  // A form reset changes an uncontrolled value without an input event. The
+  // reset event fires before the values change, so fit on the next frame.
+  useEffect(() => {
+    const form = innerRef.current?.form;
+    if (!form) {
+      return undefined;
+    }
+    let frame = 0;
+    const onReset = () => {
+      frame = requestAnimationFrame(() => fitToContent(innerRef.current));
+    };
+    form.addEventListener("reset", onReset);
+    return () => {
+      form.removeEventListener("reset", onReset);
+      cancelAnimationFrame(frame);
+    };
+  }, []);
+
+  // Shown after being hidden, or narrowed so the text wraps differently: no
+  // input event, so re-fit on a width change. Height-only changes are this
+  // component's own fit, and re-fitting on them would loop.
+  useEffect(() => {
+    const element = innerRef.current;
+    if (
+      !element ||
+      supportsFieldSizing() ||
+      typeof ResizeObserver === "undefined"
+    ) {
+      return undefined;
+    }
+    let width = -1;
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry && entry.contentRect.width !== width) {
+        width = entry.contentRect.width;
+        fitToContent(element);
+      }
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    onKeyDown?.(event);
+    if (
+      event.defaultPrevented ||
+      event.key !== "Enter" ||
+      event.shiftKey ||
+      !onSubmit ||
+      state.readOnly ||
+      isComposing(event)
+    ) {
+      return;
+    }
+    event.preventDefault();
+    const text = event.currentTarget.value;
+    if (text.trim() !== "") {
+      onSubmit(text);
+    }
+  };
+
+  return (
+    <Textarea
+      ref={textareaRef}
+      value={value}
+      readOnly={readOnly}
+      onKeyDown={handleKeyDown}
+      // Touch keyboards have no Shift+Enter; the label tells the user Enter sends.
+      enterKeyHint={onSubmit ? "send" : undefined}
+      onInput={(event) => {
+        onInput?.(event);
+        fitToContent(event.currentTarget);
+      }}
+      className={cn("ui:min-h-26", className)}
+      controlClassName={cn(
+        // No Figma frame gives the maximum yet; 240 (ui:max-h-60) is a placeholder on the spacing scale.
+        "ui:h-(--prompt-height) ui:py-2.5 ui:max-h-60 ui:min-h-0 ui:resize-none ui:overflow-y-auto ui:field-sizing-content",
+        controlClassName,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/frontend/src/v1/components/ui/form/SearchField.test.tsx b/frontend/src/v1/components/ui/form/SearchField.test.tsx
new file mode 100644
index 0000000000..a50b1f9249
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/SearchField.test.tsx
@@ -0,0 +1,443 @@
+import { act, fireEvent, screen } from "@testing-library/react";
+import { renderV1 } from "@v1/test";
+import { Dialog } from "radix-ui";
+import { type ChangeEvent, type KeyboardEvent, useState } from "react";
+import { type UseFormReturn, useForm } from "react-hook-form";
+import { expect, it, onTestFinished, vi } from "vitest";
+import { Field } from "./Field";
+import { isEscapeClearTarget } from "./keyboard";
+import { SearchField, type SearchFieldProps } from "./SearchField";
+
+/** Counts the Escapes that bubble up to the document. */
+function recordDocumentEscapes() {
+  const escapes = vi.fn();
+  const onKeyDown = (event: globalThis.KeyboardEvent) => {
+    if (event.key === "Escape") {
+      escapes();
+    }
+  };
+  document.addEventListener("keydown", onKeyDown);
+  onTestFinished(() => document.removeEventListener("keydown", onKeyDown));
+  return escapes;
+}
+
+/** Renders the field and records the Escapes that bubble up to the document. */
+function setup(props: SearchFieldProps = {}) {
+  const parentEscape = recordDocumentEscapes();
+  const { user, unmount } = renderV1(
+    <SearchField aria-label="Search" {...props} />,
+  );
+  return {
+    user,
+    unmount,
+    parentEscape,
+    input: screen.getByLabelText("Search") as HTMLInputElement,
+  };
+}
+
+it("clears on Escape when it has a value, and keeps the Escape from bubbling", async () => {
+  const onValueChange = vi.fn();
+  const { user, input, parentEscape } = setup({ onValueChange });
+  await user.type(input, "invoice");
+  await user.keyboard("{Escape}");
+  expect(input.value).toBe("");
+  expect(onValueChange).toHaveBeenLastCalledWith("");
+  expect(parentEscape).not.toHaveBeenCalled();
+  expect(document.activeElement).toBe(input);
+});
+
+it("lets Escape bubble when the field is empty, so a dialog can close", async () => {
+  const { user, input, parentEscape } = setup();
+  await user.click(input);
+  await user.keyboard("{Escape}");
+  expect(parentEscape).toHaveBeenCalledOnce();
+});
+
+it("lets Escape bubble from a read-only field with a value", () => {
+  const { input, parentEscape } = setup({ defaultValue: "x", readOnly: true });
+  fireEvent.keyDown(input, { key: "Escape" });
+  expect(input.value).toBe("x");
+  expect(parentEscape).toHaveBeenCalledOnce();
+});
+
+it("does not clear on an Escape that cancels an IME composition", () => {
+  const { input } = setup({ defaultValue: "かな" });
+  fireEvent.keyDown(input, { key: "Escape", isComposing: true });
+  expect(input.value).toBe("かな");
+});
+
+/** What an overlay's onEscapeKeyDown would see for a key on this input. */
+function escapeClears(input: HTMLInputElement): boolean {
+  let clears = false;
+  const listener = (event: Event) => {
+    clears = isEscapeClearTarget(event);
+  };
+  document.addEventListener("keydown", listener, true);
+  fireEvent.keyDown(input, { key: "Shift" });
+  document.removeEventListener("keydown", listener, true);
+  return clears;
+}
+
+it("tells an overlay when Escape would clear the field", async () => {
+  const { user, input } = setup();
+  expect(escapeClears(input)).toBe(false);
+  await user.type(input, "a");
+  expect(escapeClears(input)).toBe(true);
+});
+
+it("does not claim Escape on a disabled or read-only field", () => {
+  for (const props of [{ disabled: true }, { readOnly: true }]) {
+    const { input, unmount } = setup({ defaultValue: "x", ...props });
+    expect(escapeClears(input)).toBe(false);
+    unmount();
+  }
+});
+
+it("clears a controlled field through onValueChange", async () => {
+  function Controlled() {
+    const [value, setValue] = useState("draft");
+    return (
+      <SearchField aria-label="Search" value={value} onValueChange={setValue} />
+    );
+  }
+  const { user } = renderV1(<Controlled />);
+  const input = screen.getByLabelText("Search") as HTMLInputElement;
+  await user.click(input);
+  await user.keyboard("{Escape}");
+  expect(input.value).toBe("");
+});
+
+it("offers a named Clear button while it has a value, and refocuses the field", async () => {
+  const { user, input } = setup();
+  expect(screen.queryByRole("button", { name: "Clear search" })).toBeNull();
+  await user.type(input, "abc");
+  await user.click(screen.getByRole("button", { name: "Clear search" }));
+  expect(input.value).toBe("");
+  expect(document.activeElement).toBe(input);
+});
+
+it("is a searchbox", () => {
+  setup();
+  expect(screen.getByRole("searchbox", { name: "Search" })).toBeTruthy();
+});
+
+/** A Radix dialog that follows the documented contract: skip dismissal while Escape would clear. */
+function SearchDialog({
+  onOpenChange,
+  onKeyDown,
+}: {
+  onOpenChange: (open: boolean) => void;
+  onKeyDown?: SearchFieldProps["onKeyDown"];
+}) {
+  return (
+    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Content
+          onEscapeKeyDown={(event) => {
+            if (isEscapeClearTarget(event)) {
+              event.preventDefault();
+            }
+          }}
+        >
+          <Dialog.Title>Find a document</Dialog.Title>
+          <Dialog.Description>Search by name</Dialog.Description>
+          <SearchField aria-label="Search" onKeyDown={onKeyDown} />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+it("inside a Radix dialog, Escape clears a value without closing, then closes when empty", async () => {
+  const onOpenChange = vi.fn();
+  const { user } = renderV1(<SearchDialog onOpenChange={onOpenChange} />);
+  const input = screen.getByLabelText("Search") as HTMLInputElement;
+  await user.type(input, "invoice");
+
+  await user.keyboard("{Escape}");
+  expect(input.value).toBe("");
+  expect(onOpenChange).not.toHaveBeenCalled();
+  expect(screen.getByRole("dialog")).toBeTruthy();
+
+  await user.keyboard("{Escape}");
+  expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
+});
+
+it("inside a Radix dialog, the caller's onKeyDown can still cancel the clear", async () => {
+  const onOpenChange = vi.fn();
+  const { user } = renderV1(
+    <SearchDialog
+      onOpenChange={onOpenChange}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+        }
+      }}
+    />,
+  );
+  const input = screen.getByLabelText("Search") as HTMLInputElement;
+  await user.type(input, "invoice");
+  await user.keyboard("{Escape}");
+  expect(input.value).toBe("invoice");
+  expect(onOpenChange).not.toHaveBeenCalled();
+});
+
+it("returns an uncontrolled field to its defaultValue when its form resets, and reports it", async () => {
+  const onValueChange = vi.fn();
+  const { user } = renderV1(
+    <form>
+      <SearchField
+        aria-label="Search"
+        defaultValue="draft"
+        onValueChange={onValueChange}
+      />
+    </form>,
+  );
+  const input = screen.getByLabelText("Search") as HTMLInputElement;
+  await user.type(input, " edited");
+  expect(input.value).toBe("draft edited");
+  onValueChange.mockClear();
+  fireEvent.reset(input.form as HTMLFormElement);
+  await vi.waitFor(() => expect(input.value).toBe("draft"));
+  expect(onValueChange).toHaveBeenCalledExactlyOnceWith("draft");
+});
+
+it("keeps the text when the form cancels its reset", async () => {
+  const { user } = renderV1(
+    <form onReset={(event) => event.preventDefault()}>
+      <SearchField aria-label="Search" defaultValue="draft" />
+    </form>,
+  );
+  const input = screen.getByLabelText("Search") as HTMLInputElement;
+  await user.type(input, " edited");
+  fireEvent.reset(input.form as HTMLFormElement);
+  await new Promise((resolve) => setTimeout(resolve, 10));
+  expect(input.value).toBe("draft edited");
+});
+
+it("keeps its own change handler when a caller spreads an onChange", async () => {
+  // The react-hook-form pattern: `<SearchField {...field} />`. onChange is not
+  // in the type, but a JSX spread is not checked for excess props.
+  const spread = { onChange: vi.fn() } as Partial<SearchFieldProps>;
+  const onValueChange = vi.fn();
+  const { user } = renderV1(
+    <SearchField
+      aria-label="Search"
+      onValueChange={onValueChange}
+      {...spread}
+    />,
+  );
+  const input = screen.getByLabelText("Search") as HTMLInputElement;
+  await user.type(input, "ab");
+  expect(input.value).toBe("ab");
+  expect(onValueChange.mock.calls).toEqual([["a"], ["ab"]]);
+  await user.keyboard("{Escape}");
+  expect(input.value).toBe("");
+});
+
+it("types, clears and escapes through a spread { value, onChange } with no onValueChange", async () => {
+  // `<SearchField {...field} />` from useController.
+  function Controlled() {
+    const [value, setValue] = useState("");
+    const field = {
+      value,
+      onChange: (event: ChangeEvent<HTMLInputElement>) =>
+        setValue(event.target.value),
+    } as Partial<SearchFieldProps>;
+    return <SearchField aria-label="Search" {...field} />;
+  }
+  const { user } = renderV1(<Controlled />);
+  const input = screen.getByLabelText("Search") as HTMLInputElement;
+  await user.type(input, "ab");
+  expect(input.value).toBe("ab");
+  await user.click(screen.getByRole("button", { name: "Clear search" }));
+  expect(input.value).toBe("");
+  await user.type(input, "cd");
+  await user.keyboard("{Escape}");
+  expect(input.value).toBe("");
+});
+
+it("reports typing and clearing to react-hook-form through a register() spread", async () => {
+  function Form() {
+    const { register, watch } = useForm({ defaultValues: { q: "" } });
+    return (
+      <>
+        <SearchField aria-label="Search" {...register("q")} />
+        <output aria-label="Watched">{watch("q")}</output>
+      </>
+    );
+  }
+  const { user } = renderV1(<Form />);
+  const watched = screen.getByLabelText("Watched");
+  await user.type(screen.getByLabelText("Search"), "ab");
+  expect(watched.textContent).toBe("ab");
+  await user.click(screen.getByRole("button", { name: "Clear search" }));
+  expect(watched.textContent).toBe("");
+});
+
+/** A react-hook-form form with a register() spread, and a button that re-renders it. */
+function renderRegisteredForm() {
+  const form: { current?: UseFormReturn<{ q: string }> } = {};
+  function Form() {
+    form.current = useForm({ defaultValues: { q: "seed" } });
+    const [, setRenders] = useState(0);
+    return (
+      <>
+        <SearchField aria-label="Search" {...form.current.register("q")} />
+        <button type="button" onClick={() => setRenders((n) => n + 1)}>
+          Re-render
+        </button>
+      </>
+    );
+  }
+  const { user } = renderV1(<Form />);
+  return {
+    user,
+    form: () => form.current as UseFormReturn<{ q: string }>,
+    input: screen.getByLabelText("Search") as HTMLInputElement,
+    rerender: () =>
+      user.click(screen.getByRole("button", { name: "Re-render" })),
+  };
+}
+
+it("shows react-hook-form's defaultValues through a register() spread", () => {
+  const { input } = renderRegisteredForm();
+  expect(input.value).toBe("seed");
+  expect(screen.getByRole("button", { name: "Clear search" })).toBeTruthy();
+});
+
+it("keeps a value set by react-hook-form's setValue across a parent re-render", async () => {
+  const { form, input, rerender } = renderRegisteredForm();
+  act(() => form().setValue("q", "set"));
+  await rerender();
+  expect(input.value).toBe("set");
+  expect(form().getValues("q")).toBe("set");
+});
+
+it("clears a value written to the DOM on Escape, before any re-render", async () => {
+  const parentEscape = recordDocumentEscapes();
+  const { user, form, input } = renderRegisteredForm();
+  await user.clear(input);
+  // What setValue does, without the re-render it may or may not cause.
+  input.value = "set";
+  await user.keyboard("{Escape}");
+  expect(input.value).toBe("");
+  expect(form().getValues("q")).toBe("");
+  expect(parentEscape).not.toHaveBeenCalled();
+});
+
+it("tells an overlay Escape will clear a value written to the DOM, before any re-render", async () => {
+  const { user, input } = renderRegisteredForm();
+  await user.clear(input);
+  expect(escapeClears(input)).toBe(false);
+  // What setValue does, without the re-render it may or may not cause.
+  input.value = "set";
+  expect(escapeClears(input)).toBe(true);
+});
+
+it("drops a stale Clear button once focus returns after setValue empties the field", async () => {
+  const { user, form, input } = renderRegisteredForm();
+  act(() => form().setValue("q", ""));
+  await user.click(input);
+  expect(screen.queryByRole("button", { name: "Clear search" })).toBeNull();
+  expect(escapeClears(input)).toBe(false);
+});
+
+it("shows Clear once focus returns after setValue fills an empty field", async () => {
+  const { user, form, input } = renderRegisteredForm();
+  await user.clear(input);
+  act(() => input.blur());
+  act(() => form().setValue("q", "set"));
+  await user.click(input);
+  expect(screen.getByRole("button", { name: "Clear search" })).toBeTruthy();
+});
+
+it("hides a stale Clear button when it is pressed on a field setValue emptied", async () => {
+  const { user, form } = renderRegisteredForm();
+  act(() => form().setValue("q", ""));
+  await user.click(screen.getByRole("button", { name: "Clear search" }));
+  expect(screen.queryByRole("button", { name: "Clear search" })).toBeNull();
+  expect(form().getValues("q")).toBe("");
+});
+
+it("shows the value react-hook-form's reset restores", async () => {
+  const { user, form, input } = renderRegisteredForm();
+  await user.type(input, " typed");
+  expect(form().getValues("q")).toBe("seed typed");
+  act(() => form().reset());
+  expect(input.value).toBe("seed");
+  act(() => form().reset({ q: "next" }));
+  expect(input.value).toBe("next");
+  expect(screen.getByRole("button", { name: "Clear search" })).toBeTruthy();
+});
+
+it("lets the caller's onKeyDown cancel the clear, and reports typing through onValueChange", async () => {
+  const onValueChange = vi.fn();
+  const onKeyDown = vi.fn((event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+    }
+  });
+  const { user, input } = setup({ onValueChange, onKeyDown });
+  await user.type(input, "ab");
+  expect(onValueChange.mock.calls).toEqual([["a"], ["ab"]]);
+  await user.keyboard("{Escape}");
+  expect(onKeyDown).toHaveBeenLastCalledWith(
+    expect.objectContaining({ key: "Escape" }),
+  );
+  expect(input.value).toBe("ab");
+});
+
+it("calls onValueChange when a controlled field's Clear button is used", async () => {
+  const onValueChange = vi.fn();
+  const { user } = renderV1(
+    <SearchField
+      aria-label="Search"
+      value="draft"
+      onValueChange={onValueChange}
+    />,
+  );
+  await user.click(screen.getByRole("button", { name: "Clear search" }));
+  expect(onValueChange).toHaveBeenCalledExactlyOnceWith("");
+});
+
+it("lets Escape through from a controlled field that has no onValueChange, without the native clear", () => {
+  const parentEscape = recordDocumentEscapes();
+  renderV1(<SearchField aria-label="Search" value="fixed" />);
+  const notPrevented = fireEvent.keyDown(screen.getByLabelText("Search"), {
+    key: "Escape",
+  });
+  expect(parentEscape).toHaveBeenCalledOnce();
+  // false: default prevented, so the browser's own search clear does not run.
+  expect(notPrevented).toBe(false);
+});
+
+it("leaves onChange out of the type, so onValueChange is the documented API", () => {
+  // @ts-expect-error onChange is not a SearchField prop.
+  const props: SearchFieldProps = { onChange: () => undefined };
+  expect(props).toBeDefined();
+});
+
+it("leaves the native Escape alone on an empty field", () => {
+  renderV1(<SearchField aria-label="Search" />);
+  expect(
+    fireEvent.keyDown(screen.getByLabelText("Search"), { key: "Escape" }),
+  ).toBe(true);
+});
+
+it.each([
+  ["disabled", { disabled: true }],
+  ["read-only", { readOnly: true }],
+])("does not clear inside a %s Field", (_, fieldProps) => {
+  const parentEscape = recordDocumentEscapes();
+  renderV1(
+    <Field label="Search" {...fieldProps}>
+      <SearchField defaultValue="q" />
+    </Field>,
+  );
+  const input = screen.getByLabelText("Search") as HTMLInputElement;
+  fireEvent.keyDown(input, { key: "Escape" });
+  expect(input.value).toBe("q");
+  expect(parentEscape).toHaveBeenCalledOnce();
+  expect(screen.queryByRole("button", { name: "Clear search" })).toBeNull();
+});
diff --git a/frontend/src/v1/components/ui/form/SearchField.tsx b/frontend/src/v1/components/ui/form/SearchField.tsx
new file mode 100644
index 0000000000..3ca9c50f9b
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/SearchField.tsx
@@ -0,0 +1,239 @@
+import { cn } from "@v1/lib/cn";
+import { mergeRefs } from "@v1/lib/merge-refs";
+import { Search, X } from "lucide-react";
+import {
+  type ChangeEvent,
+  type JSX,
+  type KeyboardEvent,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { FieldAction } from "./FieldAction";
+import { useFieldControl } from "./field-context";
+import { Input, type InputProps } from "./Input";
+import { isComposing } from "./keyboard";
+
+// onChange is left out of the type: onValueChange is the documented way to
+// hear a change. A spread (`{...field}`, `{...register()}`) still carries one,
+// and the field calls it on typing and on clear. A spread onChange without a
+// value (`{...register()}`) leaves the input uncontrolled, so the value the
+// form library writes to the DOM stays on screen.
+export type SearchFieldProps = Omit<
+  InputProps,
+  "type" | "value" | "defaultValue" | "onChange" | "leading" | "trailing"
+> &
+  Readonly<{
+    value?: string;
+    defaultValue?: string;
+    /** Called on typing and on clear (Escape or the Clear button); a controlled field must update `value` from it. */
+    onValueChange?: (value: string) => void;
+    clearLabel?: string;
+  }>;
+
+/**
+ * Runs the caller's onKeyDown and reports whether it called preventDefault
+ * itself. A Radix layer may have prevented the event already, so the event's
+ * prevented flag alone cannot say who cancelled it.
+ */
+function callerPreventsDefault(
+  event: KeyboardEvent<HTMLInputElement>,
+  onKeyDown: SearchFieldProps["onKeyDown"],
+): boolean {
+  if (!onKeyDown) {
+    return false;
+  }
+  const preventDefault = event.preventDefault;
+  let called = false;
+  // Wraps the method for the call only, then puts the original back.
+  event.preventDefault = () => {
+    called = true;
+    preventDefault.call(event);
+  };
+  try {
+    onKeyDown(event);
+  } finally {
+    event.preventDefault = preventDefault;
+  }
+  return called;
+}
+
+/**
+ * A search box with a Clear button. Escape clears the field when it has a
+ * value, and stops there; on an empty field Escape bubbles so a dialog or menu
+ * can close. Radix layers see Escape on the document in the capture phase,
+ * before this handler, so an overlay that holds a SearchField calls
+ * preventDefault in onEscapeKeyDown when `isEscapeClearTarget(event)`
+ * (keyboard.ts) is true. The clear therefore ignores a preventDefault made
+ * before it; only a preventDefault called from the caller's own onKeyDown
+ * cancels it.
+ */
+export function SearchField({
+  value,
+  defaultValue = "",
+  onValueChange,
+  onKeyDown,
+  clearLabel = "Clear search",
+  disabled,
+  readOnly,
+  ref,
+  controlClassName,
+  ...rest
+}: SearchFieldProps): JSX.Element {
+  const { onChange: spreadOnChange, ...props } = rest as typeof rest & {
+    onChange?: InputProps["onChange"];
+  };
+  // `{...register()}`: the form library sets the DOM value itself (defaults,
+  // setValue, reset), so the input is left uncontrolled and `uncontrolled`
+  // follows the DOM instead of driving it.
+  const domOwned = value === undefined && spreadOnChange !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const current = value ?? uncontrolled;
+  const inputRef = useRef<HTMLInputElement>(null);
+  const composedRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
+  const onValueChangeRef = useRef(onValueChange);
+  const state = useFieldControl({ disabled, readOnly });
+
+  useLayoutEffect(() => {
+    onValueChangeRef.current = onValueChange;
+  });
+
+  // Pick up a value written straight to the DOM, so the Clear button matches it.
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (domOwned && input && input.value !== uncontrolled) {
+      setUncontrolled(input.value);
+    }
+  });
+
+  // A controlled field without onValueChange or a spread onChange cannot be
+  // cleared, so it lets Escape through.
+  const canClear =
+    value === undefined ||
+    onValueChange !== undefined ||
+    spreadOnChange !== undefined;
+  const clearable =
+    canClear && current !== "" && !state.disabled && !state.readOnly;
+
+  // A form reset restores the DOM value, not this state, so restore it here.
+  // A listener later in the dispatch (React's onReset) may cancel the reset,
+  // so wait for the dispatch to finish and check.
+  useEffect(() => {
+    const form = inputRef.current?.form;
+    if (!form || value !== undefined) {
+      return undefined;
+    }
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const onReset = (event: Event) => {
+      timer = setTimeout(() => {
+        if (event.defaultPrevented) {
+          return;
+        }
+        const restored = domOwned
+          ? (inputRef.current?.value ?? defaultValue)
+          : defaultValue;
+        setUncontrolled(restored);
+        onValueChangeRef.current?.(restored);
+      });
+    };
+    form.addEventListener("reset", onReset);
+    return () => {
+      form.removeEventListener("reset", onReset);
+      clearTimeout(timer);
+    };
+  }, [value, defaultValue, domOwned]);
+
+  const update = (next: string) => {
+    if (value === undefined) {
+      setUncontrolled(next);
+    }
+    onValueChange?.(next);
+  };
+
+  const clear = () => {
+    const input = inputRef.current;
+    if (!(spreadOnChange && input)) {
+      update("");
+      return;
+    }
+    // A spread onChange reads a real event (react-hook-form's register reads
+    // event.target), so clear the way typing does: set the DOM value and fire
+    // input, which reaches the onChange below.
+    Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      "value",
+    )?.set?.call(input, "");
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    const callerCancelled = callerPreventsDefault(event, onKeyDown);
+    if (callerCancelled || event.key !== "Escape" || isComposing(event)) {
+      return;
+    }
+    // A DOM-owned value may have been set (setValue) since the last render.
+    const shown = domOwned ? event.currentTarget.value : current;
+    const editable = shown !== "" && !state.disabled && !state.readOnly;
+    if (editable) {
+      // Chromium and WebKit clear a non-empty type="search" input on Escape
+      // themselves, bypassing `update`; only this component clears it.
+      event.preventDefault();
+    }
+    if (!(canClear && editable)) {
+      return;
+    }
+    event.stopPropagation();
+    clear();
+  };
+
+  return (
+    <Input
+      // First, so nothing in a spread replaces the handlers this field owns.
+      {...props}
+      ref={composedRef}
+      type="search"
+      {...(domOwned ? { defaultValue } : { value: current })}
+      disabled={disabled}
+      readOnly={readOnly}
+      // Marks a field Escape can clear; isEscapeClearTarget reads the live
+      // value, which a form library may have written without a render.
+      data-escape-clears={
+        canClear && !state.disabled && !state.readOnly ? "" : undefined
+      }
+      onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        update(event.target.value);
+        spreadOnChange?.(event);
+      }}
+      onKeyDown={handleKeyDown}
+      // A form library's setValue writes the DOM without a render, so the
+      // Clear button can be stale until the field next renders or takes focus.
+      // The Clear button refocuses the field, so pressing a stale one hides it.
+      onFocus={(event) => {
+        if (domOwned) {
+          setUncontrolled(event.currentTarget.value);
+        }
+        props.onFocus?.(event);
+      }}
+      leading={<Search aria-hidden />}
+      trailing={
+        clearable ? (
+          <FieldAction
+            label={clearLabel}
+            onClick={() => {
+              clear();
+              inputRef.current?.focus();
+            }}
+          >
+            <X aria-hidden />
+          </FieldAction>
+        ) : null
+      }
+      controlClassName={cn(
+        "ui:[&::-webkit-search-cancel-button]:appearance-none ui:[&::-webkit-search-decoration]:appearance-none",
+        controlClassName,
+      )}
+    />
+  );
+}
diff --git a/frontend/src/v1/components/ui/form/SecretField.test.tsx b/frontend/src/v1/components/ui/form/SecretField.test.tsx
new file mode 100644
index 0000000000..a3d37837af
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/SecretField.test.tsx
@@ -0,0 +1,178 @@
+import { screen } from "@testing-library/react";
+import type { CopyResult } from "@v1/lib/code/clipboard";
+import * as notify from "@v1/lib/notify";
+import { renderV1 } from "@v1/test";
+import type { JSX } from "react";
+import { expect, it, vi } from "vitest";
+import { Field } from "./Field";
+import { SecretField } from "./SecretField";
+
+// renderV1's userEvent installs a working clipboard on navigator; failures are
+// simulated by spying on it after render (restored by restoreMocks).
+
+const button = (name: string) =>
+  screen.getByRole("button", { name }) as HTMLButtonElement;
+const input = () => screen.getByLabelText("API key") as HTMLInputElement;
+
+it("is masked by default and Reveal toggles the mask with aria-pressed", async () => {
+  const { user } = renderV1(
+    <SecretField aria-label="API key" defaultValue="sk-123" />,
+  );
+  expect(input().type).toBe("password");
+  expect(button("Reveal").getAttribute("aria-pressed")).toBe("false");
+
+  await user.click(button("Reveal"));
+  expect(input().type).toBe("text");
+  expect(button("Reveal").getAttribute("aria-pressed")).toBe("true");
+
+  await user.click(button("Reveal"));
+  expect(input().type).toBe("password");
+});
+
+it("masks a revealed value again when the field becomes disabled", async () => {
+  const { user, rerender } = renderV1(
+    <SecretField aria-label="API key" defaultValue="sk-123" />,
+  );
+  await user.click(button("Reveal"));
+  expect(input().type).toBe("text");
+  rerender(<SecretField aria-label="API key" defaultValue="sk-123" disabled />);
+  expect(input().type).toBe("password");
+  expect(button("Reveal").getAttribute("aria-pressed")).toBe("false");
+});
+
+it("copies the real value while masked and confirms through the toast", async () => {
+  const success = vi.spyOn(notify.toast, "success");
+  const onCopy = vi.fn();
+  const { user } = renderV1(
+    <SecretField aria-label="API key" defaultValue="sk-123" onCopy={onCopy} />,
+  );
+  await user.click(button("Copy"));
+  await vi.waitFor(() => expect(onCopy).toHaveBeenCalledWith("copied"));
+  await expect(navigator.clipboard.readText()).resolves.toBe("sk-123");
+  expect(success).toHaveBeenCalledWith("Copied to clipboard");
+});
+
+it("reports a refused copy as an error toast, not a confirmation", async () => {
+  const success = vi.spyOn(notify.toast, "success");
+  const error = vi.spyOn(notify.toast, "error");
+  const onCopy = vi.fn();
+  const { user } = renderV1(
+    <SecretField aria-label="API key" defaultValue="sk-123" onCopy={onCopy} />,
+  );
+  vi.spyOn(navigator.clipboard, "writeText").mockRejectedValue(
+    new Error("denied"),
+  );
+  await user.click(button("Copy"));
+  await vi.waitFor(() => expect(onCopy).toHaveBeenCalledWith("failed"));
+  expect(error).toHaveBeenCalledWith("Could not copy", expect.anything());
+  expect(success).not.toHaveBeenCalled();
+});
+
+it("reports a missing clipboard as unavailable, as CopyButton does", async () => {
+  const error = vi.spyOn(notify.toast, "error");
+  const onCopy = vi.fn();
+  const { user } = renderV1(
+    <SecretField aria-label="API key" defaultValue="sk-123" onCopy={onCopy} />,
+  );
+  vi.spyOn(navigator, "clipboard", "get").mockReturnValue(
+    undefined as unknown as Clipboard,
+  );
+  await user.click(button("Copy"));
+  await vi.waitFor(() => expect(onCopy).toHaveBeenCalledWith("unavailable"));
+  expect(error).toHaveBeenCalledWith(
+    "Copy is not available",
+    expect.anything(),
+  );
+});
+
+it("does not write an empty value; it says so and skips onCopy", async () => {
+  const error = vi.spyOn(notify.toast, "error");
+  const onCopy = vi.fn();
+  const { user } = renderV1(
+    <SecretField aria-label="API key" onCopy={onCopy} />,
+  );
+  const write = vi.spyOn(navigator.clipboard, "writeText");
+  await user.click(button("Copy"));
+  await vi.waitFor(() => expect(error).toHaveBeenCalledWith("Nothing to copy"));
+  expect(write).not.toHaveBeenCalled();
+  expect(onCopy).not.toHaveBeenCalled();
+});
+
+it.each([
+  ["prop", (node: JSX.Element) => node, { disabled: true }],
+  [
+    "Field",
+    (node: JSX.Element) => (
+      <Field label="API key" disabled>
+        {node}
+      </Field>
+    ),
+    {},
+  ],
+])("disables Reveal and Copy when disabled by %s", (_, wrap, props) => {
+  renderV1(wrap(<SecretField aria-label="API key" value="sk-1" {...props} />));
+  expect(button("Reveal").disabled).toBe(true);
+  expect(button("Copy").disabled).toBe(true);
+});
+
+it.each([
+  ["prop", (node: JSX.Element) => node, { readOnly: true }],
+  [
+    "Field",
+    (node: JSX.Element) => (
+      <Field label="API key" readOnly>
+        {node}
+      </Field>
+    ),
+    {},
+  ],
+])("keeps Reveal and Copy usable when read-only by %s", async (_, wrap, props) => {
+  const onCopy = vi.fn();
+  const { user } = renderV1(
+    wrap(
+      <SecretField
+        aria-label="API key"
+        value="sk-1"
+        onCopy={onCopy}
+        {...props}
+      />,
+    ),
+  );
+  expect(input().readOnly).toBe(true);
+  await user.click(button("Reveal"));
+  expect(input().type).toBe("text");
+  await user.click(button("Copy"));
+  await vi.waitFor(() => expect(onCopy).toHaveBeenCalledWith("copied"));
+});
+
+it("keeps password managers and spellcheck off, whatever the caller passes", () => {
+  // Cast: the props type omits these, but a spread of untyped props could still carry them.
+  const override = {
+    autoComplete: "on",
+    spellCheck: true,
+    type: "text",
+  } as object;
+  renderV1(
+    <SecretField aria-label="API key" defaultValue="sk-1" {...override} />,
+  );
+  expect(input().type).toBe("password");
+  expect(input().autocomplete).toBe("new-password");
+  expect(input().getAttribute("spellcheck")).toBe("false");
+  expect(input().getAttribute("autocapitalize")).toBe("off");
+  expect(input().hasAttribute("data-1p-ignore")).toBe(true);
+  expect(input().getAttribute("data-lpignore")).toBe("true");
+});
+
+it("hands onCopy the copy outcome only, not the native clipboard event", async () => {
+  const seen: CopyResult[] = [];
+  const { user } = renderV1(
+    <SecretField
+      aria-label="API key"
+      defaultValue="sk-1"
+      // Fails typecheck:v1 if the argument widens to ClipboardEvent | CopyResult.
+      onCopy={(result) => seen.push(result)}
+    />,
+  );
+  await user.click(button("Copy"));
+  await vi.waitFor(() => expect(seen).toEqual(["copied"]));
+});
diff --git a/frontend/src/v1/components/ui/form/SecretField.tsx b/frontend/src/v1/components/ui/form/SecretField.tsx
new file mode 100644
index 0000000000..5eba011e76
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/SecretField.tsx
@@ -0,0 +1,113 @@
+import { type CopyResult, copyText } from "@v1/lib/code/clipboard";
+import { mergeRefs } from "@v1/lib/merge-refs";
+import { toast } from "@v1/lib/notify";
+import { Copy, Eye, EyeOff } from "lucide-react";
+import { type JSX, useMemo, useRef, useState } from "react";
+import { FieldAction } from "./FieldAction";
+import { useFieldControl } from "./field-context";
+import { Input, type InputProps } from "./Input";
+
+// onCopy is replaced: the native clipboard-event handler would otherwise widen
+// the callback's argument to ClipboardEvent | CopyResult.
+export type SecretFieldProps = Omit<
+  InputProps,
+  | "type"
+  | "trailing"
+  | "autoComplete"
+  | "spellCheck"
+  | "autoCapitalize"
+  | "onCopy"
+> &
+  Readonly<{
+    /** Hears each copy's outcome; the field raises the toast itself. Not called for an empty field. */
+    onCopy?: (result: CopyResult) => void;
+    revealLabel?: string;
+    copyLabel?: string;
+  }>;
+
+/**
+ * Copies the node's value, so a controlled and an uncontrolled field copy the
+ * same way, and confirms through the toast as CopyButton does.
+ */
+async function copyValue(
+  input: HTMLInputElement | null,
+): Promise<CopyResult | undefined> {
+  const text = input?.value ?? "";
+  if (text === "") {
+    toast.error("Nothing to copy");
+    return undefined;
+  }
+  const outcome = await copyText(text);
+  if (outcome === "copied") {
+    toast.success("Copied to clipboard");
+  } else if (outcome === "unavailable") {
+    toast.error("Copy is not available", {
+      description: "This browser does not allow clipboard access here.",
+    });
+  } else {
+    toast.error("Could not copy", {
+      description: "Try again, or select the text and copy it.",
+    });
+  }
+  return outcome;
+}
+
+/*
+ * A masked value, such as an API key, with Reveal and Copy. Copy writes the
+ * real value, masked or not. Both stay usable when the field is read-only,
+ * the usual way to show a key, and are disabled with the field.
+ */
+export function SecretField({
+  onCopy,
+  revealLabel = "Reveal",
+  copyLabel = "Copy",
+  disabled,
+  ref,
+  ...props
+}: SecretFieldProps): JSX.Element {
+  const [revealed, setRevealed] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const composedRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
+  const state = useFieldControl({ disabled });
+  // A disabled field disables Reveal too, so a shown value is masked again.
+  const shown = revealed && !state.disabled;
+
+  return (
+    <Input
+      ref={composedRef}
+      disabled={disabled}
+      trailing={
+        <>
+          <FieldAction
+            label={revealLabel}
+            aria-pressed={shown}
+            disabled={state.disabled}
+            onClick={() => setRevealed((shown) => !shown)}
+          >
+            {shown ? <EyeOff aria-hidden /> : <Eye aria-hidden />}
+          </FieldAction>
+          <FieldAction
+            label={copyLabel}
+            disabled={state.disabled}
+            onClick={() => {
+              void copyValue(inputRef.current).then(
+                (outcome) => outcome && onCopy?.(outcome),
+              );
+            }}
+          >
+            <Copy aria-hidden />
+          </FieldAction>
+        </>
+      }
+      {...props}
+      // After the spread, so a caller cannot turn masking or the privacy hints off.
+      type={shown ? "text" : "password"}
+      autoComplete="new-password"
+      spellCheck={false}
+      autoCapitalize="off"
+      autoCorrect="off"
+      data-1p-ignore=""
+      data-lpignore="true"
+    />
+  );
+}
diff --git a/frontend/src/v1/components/ui/form/Textarea.tsx b/frontend/src/v1/components/ui/form/Textarea.tsx
new file mode 100644
index 0000000000..d52f00cd1d
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/Textarea.tsx
@@ -0,0 +1,57 @@
+import { cn } from "@v1/lib/cn";
+import type { ComponentProps, JSX } from "react";
+import { FieldFrame, fieldControlClass } from "./FieldFrame";
+import { useFieldControl } from "./field-context";
+
+export type TextareaProps = ComponentProps<"textarea"> &
+  Readonly<{
+    invalid?: boolean;
+    /** Classes for the native textarea; `className` styles the frame. */
+    controlClassName?: string;
+  }>;
+
+/** A multi-line text control the user can resize vertically. */
+export function Textarea({
+  invalid,
+  disabled,
+  readOnly,
+  id,
+  className,
+  controlClassName,
+  "aria-describedby": describedBy,
+  "aria-invalid": ariaInvalid,
+  ...props
+}: TextareaProps): JSX.Element {
+  const control = useFieldControl({
+    id,
+    "aria-describedby": describedBy,
+    "aria-invalid": ariaInvalid,
+    invalid,
+    disabled,
+    readOnly,
+  });
+  return (
+    <FieldFrame
+      multiline
+      invalid={control.invalid}
+      disabled={control.disabled}
+      readOnly={control.readOnly}
+      className={className}
+    >
+      <textarea
+        data-slot="control"
+        id={control.id}
+        aria-describedby={control["aria-describedby"]}
+        aria-invalid={control["aria-invalid"]}
+        disabled={control.disabled}
+        readOnly={control.readOnly}
+        className={cn(
+          fieldControlClass,
+          "ui:min-h-16 ui:resize-y ui:px-3 ui:py-2",
+          controlClassName,
+        )}
+        {...props}
+      />
+    </FieldFrame>
+  );
+}
diff --git a/frontend/src/v1/components/ui/form/__snapshots__/markup.md b/frontend/src/v1/components/ui/form/__snapshots__/markup.md
new file mode 100644
index 0000000000..4e9fa8d510
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/__snapshots__/markup.md
@@ -0,0 +1,164 @@
+# Text input markup
+
+Generated by `markup.test.tsx`; update with `vitest -u`.
+
+## Input, default
+
+```html
+<div data-slot="field" class="ui:grid ui:gap-1.5">
+<label data-slot="label" class="ui:text-body-small ui:font-medium ui:text-foreground ui:select-none ui:data-disabled:opacity-50" id="g-default-label" for="g-default">Name</label>
+<div data-slot="field-frame" class="ui:box-border ui:flex ui:w-full ui:min-w-0 ui:gap-1.5 ui:rounded-md ui:border ui:border-input ui:bg-background ui:text-body ui:text-foreground ui:transition-[border-color,box-shadow] ui:hover:border-muted-foreground ui:data-readonly:border-input ui:data-readonly:bg-muted ui:data-invalid:border-destructive ui:data-invalid:[--ring:var(--destructive)] ui:data-disabled:pointer-events-none ui:data-disabled:opacity-50 ui:has-[[data-slot=control]:focus-visible]:focus-ring ui:h-8 ui:items-center ui:px-2.5">
+<input data-slot="control" id="g-default" class="ui:min-w-0 ui:flex-1 ui:border-0 ui:bg-transparent ui:p-0 ui:text-body ui:text-foreground ui:outline-none ui:placeholder:text-muted-foreground ui:disabled:cursor-not-allowed ui:h-full" placeholder="Acme invoices">
+</div>
+</div>
+```
+
+## Input with adornments
+
+```html
+<div data-slot="field" class="ui:grid ui:gap-1.5">
+<label data-slot="label" class="ui:text-body-small ui:font-medium ui:text-foreground ui:select-none ui:data-disabled:opacity-50" id="g-adorned-label" for="g-adorned">Site</label>
+<div data-slot="field-frame" class="ui:box-border ui:flex ui:w-full ui:min-w-0 ui:gap-1.5 ui:rounded-md ui:border ui:border-input ui:bg-background ui:text-body ui:text-foreground ui:transition-[border-color,box-shadow] ui:hover:border-muted-foreground ui:data-readonly:border-input ui:data-readonly:bg-muted ui:data-invalid:border-destructive ui:data-invalid:[--ring:var(--destructive)] ui:data-disabled:pointer-events-none ui:data-disabled:opacity-50 ui:has-[[data-slot=control]:focus-visible]:focus-ring ui:h-8 ui:items-center ui:px-2.5">
+<span data-slot="field-leading" class="ui:flex ui:shrink-0 ui:items-center ui:text-muted-foreground ui:[&amp;>svg]:size-4">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true">
+<path d="m21 21-4.34-4.34">
+</path>
+<circle cx="11" cy="11" r="8">
+</circle>
+</svg>
+</span>
+<span id="g-adorned-prefix" data-slot="field-prefix" class="ui:shrink-0 ui:whitespace-nowrap ui:text-muted-foreground ui:select-none">https://</span>
+<input data-slot="control" id="g-adorned" aria-describedby="g-adorned-prefix g-adorned-suffix" class="ui:min-w-0 ui:flex-1 ui:border-0 ui:bg-transparent ui:p-0 ui:text-body ui:text-foreground ui:outline-none ui:placeholder:text-muted-foreground ui:disabled:cursor-not-allowed ui:h-full">
+<span id="g-adorned-suffix" data-slot="field-suffix" class="ui:shrink-0 ui:whitespace-nowrap ui:text-muted-foreground ui:select-none">.com</span>
+</div>
+</div>
+```
+
+## Input, invalid with error
+
+```html
+<div data-slot="field" class="ui:grid ui:gap-1.5">
+<label data-slot="label" class="ui:text-body-small ui:font-medium ui:text-foreground ui:select-none ui:data-disabled:opacity-50" id="g-invalid-label" for="g-invalid">Name</label>
+<div data-slot="field-frame" data-invalid="" class="ui:box-border ui:flex ui:w-full ui:min-w-0 ui:gap-1.5 ui:rounded-md ui:border ui:border-input ui:bg-background ui:text-body ui:text-foreground ui:transition-[border-color,box-shadow] ui:hover:border-muted-foreground ui:data-readonly:border-input ui:data-readonly:bg-muted ui:data-invalid:border-destructive ui:data-invalid:[--ring:var(--destructive)] ui:data-disabled:pointer-events-none ui:data-disabled:opacity-50 ui:has-[[data-slot=control]:focus-visible]:focus-ring ui:h-8 ui:items-center ui:px-2.5">
+<input data-slot="control" id="g-invalid" aria-describedby="g-invalid-error" aria-invalid="true" class="ui:min-w-0 ui:flex-1 ui:border-0 ui:bg-transparent ui:p-0 ui:text-body ui:text-foreground ui:outline-none ui:placeholder:text-muted-foreground ui:disabled:cursor-not-allowed ui:h-full">
+</div>
+<p role="alert" data-slot="error-text" class="ui:text-caption ui:text-destructive" id="g-invalid-error">Enter a name</p>
+</div>
+```
+
+## Input, disabled
+
+```html
+<div data-slot="field" class="ui:grid ui:gap-1.5">
+<label data-slot="label" class="ui:text-body-small ui:font-medium ui:text-foreground ui:select-none ui:data-disabled:opacity-50" id="g-disabled-label" for="g-disabled" data-disabled="">Name</label>
+<div data-slot="field-frame" data-disabled="" class="ui:box-border ui:flex ui:w-full ui:min-w-0 ui:gap-1.5 ui:rounded-md ui:border ui:border-input ui:bg-background ui:text-body ui:text-foreground ui:transition-[border-color,box-shadow] ui:hover:border-muted-foreground ui:data-readonly:border-input ui:data-readonly:bg-muted ui:data-invalid:border-destructive ui:data-invalid:[--ring:var(--destructive)] ui:data-disabled:pointer-events-none ui:data-disabled:opacity-50 ui:has-[[data-slot=control]:focus-visible]:focus-ring ui:h-8 ui:items-center ui:px-2.5">
+<input data-slot="control" id="g-disabled" disabled="" class="ui:min-w-0 ui:flex-1 ui:border-0 ui:bg-transparent ui:p-0 ui:text-body ui:text-foreground ui:outline-none ui:placeholder:text-muted-foreground ui:disabled:cursor-not-allowed ui:h-full" value="Acme">
+</div>
+</div>
+```
+
+## Input, read-only
+
+```html
+<div data-slot="field" class="ui:grid ui:gap-1.5">
+<label data-slot="label" class="ui:text-body-small ui:font-medium ui:text-foreground ui:select-none ui:data-disabled:opacity-50" id="g-readonly-label" for="g-readonly">Name</label>
+<div data-slot="field-frame" data-readonly="" class="ui:box-border ui:flex ui:w-full ui:min-w-0 ui:gap-1.5 ui:rounded-md ui:border ui:border-input ui:bg-background ui:text-body ui:text-foreground ui:transition-[border-color,box-shadow] ui:hover:border-muted-foreground ui:data-readonly:border-input ui:data-readonly:bg-muted ui:data-invalid:border-destructive ui:data-invalid:[--ring:var(--destructive)] ui:data-disabled:pointer-events-none ui:data-disabled:opacity-50 ui:has-[[data-slot=control]:focus-visible]:focus-ring ui:h-8 ui:items-center ui:px-2.5">
+<input data-slot="control" id="g-readonly" readonly="" class="ui:min-w-0 ui:flex-1 ui:border-0 ui:bg-transparent ui:p-0 ui:text-body ui:text-foreground ui:outline-none ui:placeholder:text-muted-foreground ui:disabled:cursor-not-allowed ui:h-full" value="Acme">
+</div>
+</div>
+```
+
+## Field with helper and error
+
+```html
+<div data-slot="field" class="ui:grid ui:gap-1.5">
+<label data-slot="label" class="ui:text-body-small ui:font-medium ui:text-foreground ui:select-none ui:data-disabled:opacity-50" id="g-helper-label" for="g-helper">Webhook URL</label>
+<div data-slot="field-frame" data-invalid="" class="ui:box-border ui:flex ui:w-full ui:min-w-0 ui:gap-1.5 ui:rounded-md ui:border ui:border-input ui:bg-background ui:text-body ui:text-foreground ui:transition-[border-color,box-shadow] ui:hover:border-muted-foreground ui:data-readonly:border-input ui:data-readonly:bg-muted ui:data-invalid:border-destructive ui:data-invalid:[--ring:var(--destructive)] ui:data-disabled:pointer-events-none ui:data-disabled:opacity-50 ui:has-[[data-slot=control]:focus-visible]:focus-ring ui:h-8 ui:items-center ui:px-2.5">
+<input data-slot="control" id="g-helper" aria-describedby="g-helper-helper g-helper-error" aria-invalid="true" class="ui:min-w-0 ui:flex-1 ui:border-0 ui:bg-transparent ui:p-0 ui:text-body ui:text-foreground ui:outline-none ui:placeholder:text-muted-foreground ui:disabled:cursor-not-allowed ui:h-full">
+</div>
+<p data-slot="helper-text" class="ui:text-caption ui:text-muted-foreground" id="g-helper-helper">We post each result here.</p>
+<p role="alert" data-slot="error-text" class="ui:text-caption ui:text-destructive" id="g-helper-error">Enter a URL</p>
+</div>
+```
+
+## Textarea
+
+```html
+<div data-slot="field" class="ui:grid ui:gap-1.5">
+<label data-slot="label" class="ui:text-body-small ui:font-medium ui:text-foreground ui:select-none ui:data-disabled:opacity-50" id="g-textarea-label" for="g-textarea">Notes</label>
+<div data-slot="field-frame" class="ui:box-border ui:flex ui:w-full ui:min-w-0 ui:gap-1.5 ui:rounded-md ui:border ui:border-input ui:bg-background ui:text-body ui:text-foreground ui:transition-[border-color,box-shadow] ui:hover:border-muted-foreground ui:data-readonly:border-input ui:data-readonly:bg-muted ui:data-invalid:border-destructive ui:data-invalid:[--ring:var(--destructive)] ui:data-disabled:pointer-events-none ui:data-disabled:opacity-50 ui:has-[[data-slot=control]:focus-visible]:focus-ring ui:items-stretch">
+<textarea data-slot="control" id="g-textarea" class="ui:min-w-0 ui:flex-1 ui:border-0 ui:bg-transparent ui:p-0 ui:text-body ui:text-foreground ui:outline-none ui:placeholder:text-muted-foreground ui:disabled:cursor-not-allowed ui:min-h-16 ui:resize-y ui:px-3 ui:py-2">
+</textarea>
+</div>
+</div>
+```
+
+## Prompt textarea
+
+```html
+<div data-slot="field" class="ui:grid ui:gap-1.5">
+<label data-slot="label" class="ui:text-body-small ui:font-medium ui:text-foreground ui:select-none ui:data-disabled:opacity-50" id="g-prompt-label" for="g-prompt">Prompt</label>
+<div data-slot="field-frame" class="ui:box-border ui:flex ui:w-full ui:min-w-0 ui:gap-1.5 ui:rounded-md ui:border ui:border-input ui:bg-background ui:text-body ui:text-foreground ui:transition-[border-color,box-shadow] ui:hover:border-muted-foreground ui:data-readonly:border-input ui:data-readonly:bg-muted ui:data-invalid:border-destructive ui:data-invalid:[--ring:var(--destructive)] ui:data-disabled:pointer-events-none ui:data-disabled:opacity-50 ui:has-[[data-slot=control]:focus-visible]:focus-ring ui:items-stretch ui:min-h-26">
+<textarea data-slot="control" id="g-prompt" class="ui:min-w-0 ui:flex-1 ui:border-0 ui:bg-transparent ui:p-0 ui:text-body ui:text-foreground ui:outline-none ui:placeholder:text-muted-foreground ui:disabled:cursor-not-allowed ui:px-3 ui:h-(--prompt-height) ui:py-2.5 ui:max-h-60 ui:min-h-0 ui:resize-none ui:overflow-y-auto ui:field-sizing-content">
+</textarea>
+</div>
+</div>
+```
+
+## Search field with a value
+
+```html
+<div data-slot="field" class="ui:grid ui:gap-1.5">
+<label data-slot="label" class="ui:text-body-small ui:font-medium ui:text-foreground ui:select-none ui:data-disabled:opacity-50" id="g-search-label" for="g-search">Search</label>
+<div data-slot="field-frame" class="ui:box-border ui:flex ui:w-full ui:min-w-0 ui:gap-1.5 ui:rounded-md ui:border ui:border-input ui:bg-background ui:text-body ui:text-foreground ui:transition-[border-color,box-shadow] ui:hover:border-muted-foreground ui:data-readonly:border-input ui:data-readonly:bg-muted ui:data-invalid:border-destructive ui:data-invalid:[--ring:var(--destructive)] ui:data-disabled:pointer-events-none ui:data-disabled:opacity-50 ui:has-[[data-slot=control]:focus-visible]:focus-ring ui:h-8 ui:items-center ui:px-2.5">
+<span data-slot="field-leading" class="ui:flex ui:shrink-0 ui:items-center ui:text-muted-foreground ui:[&amp;>svg]:size-4">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true">
+<path d="m21 21-4.34-4.34">
+</path>
+<circle cx="11" cy="11" r="8">
+</circle>
+</svg>
+</span>
+<input data-slot="control" id="g-search" class="ui:min-w-0 ui:flex-1 ui:border-0 ui:bg-transparent ui:p-0 ui:text-body ui:text-foreground ui:outline-none ui:placeholder:text-muted-foreground ui:disabled:cursor-not-allowed ui:h-full ui:[&amp;::-webkit-search-cancel-button]:appearance-none ui:[&amp;::-webkit-search-decoration]:appearance-none" data-escape-clears="" type="search" value="invoices">
+<span data-slot="field-trailing" class="ui:flex ui:shrink-0 ui:items-center ui:text-muted-foreground ui:[&amp;>svg]:size-4">
+<button type="button" aria-label="Clear search" title="Clear search" data-slot="field-action" class="ui:inline-flex ui:size-6 ui:shrink-0 ui:cursor-pointer ui:items-center ui:justify-center ui:rounded-sm ui:border-0 ui:bg-transparent ui:p-0 ui:text-muted-foreground ui:hover:bg-accent ui:hover:text-foreground ui:focus-visible:focus-ring ui:aria-pressed:text-foreground ui:disabled:pointer-events-none ui:disabled:opacity-50 ui:[&amp;>svg]:size-4">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
+<path d="M18 6 6 18">
+</path>
+<path d="m6 6 12 12">
+</path>
+</svg>
+</button>
+</span>
+</div>
+</div>
+```
+
+## Secret field, read-only
+
+```html
+<div data-slot="field" class="ui:grid ui:gap-1.5">
+<label data-slot="label" class="ui:text-body-small ui:font-medium ui:text-foreground ui:select-none ui:data-disabled:opacity-50" id="g-secret-label" for="g-secret">API key</label>
+<div data-slot="field-frame" data-readonly="" class="ui:box-border ui:flex ui:w-full ui:min-w-0 ui:gap-1.5 ui:rounded-md ui:border ui:border-input ui:bg-background ui:text-body ui:text-foreground ui:transition-[border-color,box-shadow] ui:hover:border-muted-foreground ui:data-readonly:border-input ui:data-readonly:bg-muted ui:data-invalid:border-destructive ui:data-invalid:[--ring:var(--destructive)] ui:data-disabled:pointer-events-none ui:data-disabled:opacity-50 ui:has-[[data-slot=control]:focus-visible]:focus-ring ui:h-8 ui:items-center ui:px-2.5">
+<input data-slot="control" id="g-secret" readonly="" class="ui:min-w-0 ui:flex-1 ui:border-0 ui:bg-transparent ui:p-0 ui:text-body ui:text-foreground ui:outline-none ui:placeholder:text-muted-foreground ui:disabled:cursor-not-allowed ui:h-full" autocomplete="new-password" spellcheck="false" autocapitalize="off" autocorrect="off" data-1p-ignore="" data-lpignore="true" type="password" value="sk-test-1234">
+<span data-slot="field-trailing" class="ui:flex ui:shrink-0 ui:items-center ui:text-muted-foreground ui:[&amp;>svg]:size-4">
+<button type="button" aria-label="Reveal" title="Reveal" data-slot="field-action" class="ui:inline-flex ui:size-6 ui:shrink-0 ui:cursor-pointer ui:items-center ui:justify-center ui:rounded-sm ui:border-0 ui:bg-transparent ui:p-0 ui:text-muted-foreground ui:hover:bg-accent ui:hover:text-foreground ui:focus-visible:focus-ring ui:aria-pressed:text-foreground ui:disabled:pointer-events-none ui:disabled:opacity-50 ui:[&amp;>svg]:size-4" aria-pressed="false">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye" aria-hidden="true">
+<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0">
+</path>
+<circle cx="12" cy="12" r="3">
+</circle>
+</svg>
+</button>
+<button type="button" aria-label="Copy" title="Copy" data-slot="field-action" class="ui:inline-flex ui:size-6 ui:shrink-0 ui:cursor-pointer ui:items-center ui:justify-center ui:rounded-sm ui:border-0 ui:bg-transparent ui:p-0 ui:text-muted-foreground ui:hover:bg-accent ui:hover:text-foreground ui:focus-visible:focus-ring ui:aria-pressed:text-foreground ui:disabled:pointer-events-none ui:disabled:opacity-50 ui:[&amp;>svg]:size-4">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true">
+<rect width="14" height="14" x="8" y="8" rx="2" ry="2">
+</rect>
+<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2">
+</path>
+</svg>
+</button>
+</span>
+</div>
+</div>
+```
diff --git a/frontend/src/v1/components/ui/form/field-context.ts b/frontend/src/v1/components/ui/form/field-context.ts
new file mode 100644
index 0000000000..d451255fd0
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/field-context.ts
@@ -0,0 +1,74 @@
+import { type AriaAttributes, createContext, useContext } from "react";
+
+export type FieldContextValue = Readonly<{
+  controlId: string;
+  /** The label's id, for controls named by `aria-labelledby` (a radiogroup cannot use `<label for>`). */
+  labelId: string;
+  /** Ids of the helper and error text that are rendered, space-separated. */
+  describedBy: string | undefined;
+  invalid: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+}>;
+
+export const FieldContext = createContext<FieldContextValue | null>(null);
+
+/** The enclosing Field, or null for a control used on its own. */
+export function useFieldContext(): FieldContextValue | null {
+  return useContext(FieldContext);
+}
+
+export type FieldControlInput = Readonly<{
+  id?: string;
+  "aria-describedby"?: string;
+  /** A spread `aria-invalid` (react-hook-form, a validation library); a true value marks the control invalid. */
+  "aria-invalid"?: AriaAttributes["aria-invalid"];
+  invalid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+}>;
+
+export type FieldControlState = Readonly<{
+  id: string | undefined;
+  /** The enclosing Field's label id; undefined outside a Field. */
+  labelId: string | undefined;
+  "aria-describedby": string | undefined;
+  "aria-invalid": true | undefined;
+  invalid: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+}>;
+
+/** Joins the given ids into one space-separated list, skipping empty ones. */
+export function joinIds(...ids: (string | undefined)[]): string | undefined {
+  const joined = ids.filter(Boolean).join(" ");
+  return joined === "" ? undefined : joined;
+}
+
+/**
+ * Resolves a control's id, description, and state. The enclosing Field's id
+ * wins, since its label points at it (set `id` on the Field). The description
+ * joins the Field's ids, then the control's; for state, the control's own
+ * props win, then the Field's. A true `aria-invalid` counts as `invalid`, so
+ * the frame and the ARIA state agree.
+ */
+export function useFieldControl(props: FieldControlInput): FieldControlState {
+  const field = useFieldContext();
+  const ariaInvalid = props["aria-invalid"];
+  const ownInvalid =
+    ariaInvalid !== undefined &&
+    ariaInvalid !== false &&
+    ariaInvalid !== "false"
+      ? true
+      : props.invalid;
+  const invalid = ownInvalid ?? field?.invalid ?? false;
+  return {
+    id: field?.controlId ?? props.id,
+    labelId: field?.labelId,
+    "aria-describedby": joinIds(field?.describedBy, props["aria-describedby"]),
+    "aria-invalid": invalid ? true : undefined,
+    invalid,
+    disabled: props.disabled ?? field?.disabled ?? false,
+    readOnly: props.readOnly ?? field?.readOnly ?? false,
+  };
+}
diff --git a/frontend/src/v1/components/ui/form/form.gallery.tsx b/frontend/src/v1/components/ui/form/form.gallery.tsx
new file mode 100644
index 0000000000..491ab74011
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/form.gallery.tsx
@@ -0,0 +1,111 @@
+import { Search } from "lucide-react";
+import type { ReactElement } from "react";
+import { Field } from "./Field";
+import { Input } from "./Input";
+import { PromptTextarea } from "./PromptTextarea";
+import { SearchField } from "./SearchField";
+import { SecretField } from "./SecretField";
+import { Textarea } from "./Textarea";
+
+/*
+ * Every variant and state of the text inputs, for the component gallery
+ * (P1-T01, not merged yet: register these there, where each entry is shown in
+ * Light, Dark and Unstract). Until then markup.test.tsx renders each one,
+ * snapshots its markup and runs axe on it. Hover and focus are CSS-only
+ * (`hover:` and `has-[...:focus-visible]` classes), so they show in the
+ * gallery, not here; the snapshot pins the classes that draw them.
+ */
+
+export type GalleryEntry = Readonly<{ name: string; element: ReactElement }>;
+
+export const FORM_GALLERY: readonly GalleryEntry[] = [
+  {
+    name: "Input, default",
+    element: (
+      <Field id="g-default" label="Name">
+        <Input placeholder="Acme invoices" />
+      </Field>
+    ),
+  },
+  {
+    name: "Input with adornments",
+    element: (
+      <Field id="g-adorned" label="Site">
+        <Input
+          leading={<Search aria-hidden />}
+          prefix="https://"
+          suffix=".com"
+        />
+      </Field>
+    ),
+  },
+  {
+    name: "Input, invalid with error",
+    element: (
+      <Field id="g-invalid" label="Name" error="Enter a name">
+        <Input />
+      </Field>
+    ),
+  },
+  {
+    name: "Input, disabled",
+    element: (
+      <Field id="g-disabled" label="Name" disabled>
+        <Input defaultValue="Acme" />
+      </Field>
+    ),
+  },
+  {
+    name: "Input, read-only",
+    element: (
+      <Field id="g-readonly" label="Name" readOnly>
+        <Input value="Acme" />
+      </Field>
+    ),
+  },
+  {
+    name: "Field with helper and error",
+    element: (
+      <Field
+        id="g-helper"
+        label="Webhook URL"
+        helperText="We post each result here."
+        error="Enter a URL"
+      >
+        <Input />
+      </Field>
+    ),
+  },
+  {
+    name: "Textarea",
+    element: (
+      <Field id="g-textarea" label="Notes">
+        <Textarea />
+      </Field>
+    ),
+  },
+  {
+    name: "Prompt textarea",
+    element: (
+      <Field id="g-prompt" label="Prompt">
+        <PromptTextarea />
+      </Field>
+    ),
+  },
+  {
+    name: "Search field with a value",
+    element: (
+      <Field id="g-search" label="Search">
+        <SearchField defaultValue="invoices" />
+      </Field>
+    ),
+  },
+  {
+    name: "Secret field, read-only",
+    element: (
+      <Field id="g-secret" label="API key" readOnly>
+        <SecretField value="sk-test-1234" />
+      </Field>
+    ),
+  },
+];
diff --git a/frontend/src/v1/components/ui/form/index.ts b/frontend/src/v1/components/ui/form/index.ts
new file mode 100644
index 0000000000..fdb5ba19ba
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/index.ts
@@ -0,0 +1,24 @@
+export { ErrorText, type ErrorTextProps } from "./ErrorText";
+export { Field, type FieldProps } from "./Field";
+export { FieldAction, type FieldActionProps } from "./FieldAction";
+export {
+  FieldFrame,
+  type FieldFrameProps,
+  fieldControlClass,
+  fieldFrameVariants,
+} from "./FieldFrame";
+export {
+  type FieldContextValue,
+  type FieldControlInput,
+  type FieldControlState,
+  useFieldContext,
+  useFieldControl,
+} from "./field-context";
+export { HelperText, type HelperTextProps } from "./HelperText";
+export { Input, type InputProps } from "./Input";
+export { isEscapeClearTarget } from "./keyboard";
+export { Label, type LabelProps } from "./Label";
+export { PromptTextarea, type PromptTextareaProps } from "./PromptTextarea";
+export { SearchField, type SearchFieldProps } from "./SearchField";
+export { SecretField, type SecretFieldProps } from "./SecretField";
+export { Textarea, type TextareaProps } from "./Textarea";
diff --git a/frontend/src/v1/components/ui/form/keyboard.ts b/frontend/src/v1/components/ui/form/keyboard.ts
new file mode 100644
index 0000000000..cd7e2166f5
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/keyboard.ts
@@ -0,0 +1,24 @@
+import type { KeyboardEvent } from "react";
+
+/*
+ * True while an IME composition owns the key. Safari fires the keydown that
+ * ends a composition after compositionend, with isComposing already false;
+ * keyCode 229 is the only mark it leaves.
+ */
+export function isComposing(event: KeyboardEvent): boolean {
+  return event.nativeEvent.isComposing || event.keyCode === 229;
+}
+
+/**
+ * For an overlay's `onEscapeKeyDown` (Dialog, Popover, Menu): true when the
+ * Escape belongs to a SearchField that will clear its value, so the overlay
+ * calls `preventDefault()` and stays open. Radix sees Escape on the document
+ * in the capture phase, before the field does, so the overlay must ask.
+ */
+export function isEscapeClearTarget(event: Event): boolean {
+  const field =
+    event.target instanceof Element
+      ? event.target.closest("[data-escape-clears]")
+      : null;
+  return field instanceof HTMLInputElement && field.value !== "";
+}
diff --git a/frontend/src/v1/components/ui/form/markup.test.tsx b/frontend/src/v1/components/ui/form/markup.test.tsx
new file mode 100644
index 0000000000..8ec3e212ff
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/markup.test.tsx
@@ -0,0 +1,40 @@
+import { render } from "@testing-library/react";
+import { expect, it } from "vitest";
+import { FORM_GALLERY } from "./form.gallery";
+
+/*
+ * One file for every gallery variant, so a markup or class change shows in
+ * review. Markdown rather than a `.snap`, as in code/markup.test.tsx.
+ */
+it("matches the committed markup of every variant", async () => {
+  const sections = FORM_GALLERY.map(({ name, element }) => {
+    const { container, unmount } = render(element);
+    const html = (container.firstChild as HTMLElement).outerHTML;
+    unmount();
+    return [name, html] as const;
+  });
+  const doc = [
+    "# Text input markup",
+    "",
+    "Generated by `markup.test.tsx`; update with `vitest -u`.",
+    ...sections.flatMap(([name, html]) => [
+      "",
+      `## ${name}`,
+      "",
+      "```html",
+      html.replaceAll("><", ">\n<"),
+      "```",
+    ]),
+    "",
+  ].join("\n");
+  await expect(doc).toMatchFileSnapshot("./__snapshots__/markup.md");
+});
+
+// The automated check that every input is tied to its label (P1-T03 acceptance).
+it("every gallery variant passes axe", async () => {
+  for (const { name, element } of FORM_GALLERY) {
+    const { container, unmount } = render(element);
+    await expect(container, name).toHaveNoA11yViolations();
+    unmount();
+  }
+});
diff --git a/frontend/src/v1/components/ui/form/refs.test.tsx b/frontend/src/v1/components/ui/form/refs.test.tsx
new file mode 100644
index 0000000000..09723582d1
--- /dev/null
+++ b/frontend/src/v1/components/ui/form/refs.test.tsx
@@ -0,0 +1,30 @@
+import { screen } from "@testing-library/react";
+import { renderV1 } from "@v1/test";
+import { createRef, type JSX, type Ref } from "react";
+import { expect, it, vi } from "vitest";
+import { PromptTextarea } from "./PromptTextarea";
+import { SearchField } from "./SearchField";
+import { SecretField } from "./SecretField";
+
+// These three keep their own ref to the node, so the caller's ref goes through mergeRefs.
+const COMPOSED: [string, (ref: Ref<never>) => JSX.Element][] = [
+  ["PromptTextarea", (ref) => <PromptTextarea aria-label="C" ref={ref} />],
+  ["SearchField", (ref) => <SearchField aria-label="C" ref={ref} />],
+  ["SecretField", (ref) => <SecretField aria-label="C" ref={ref} />],
+];
+
+it.each(COMPOSED)("forwards an object ref to the %s control", (_, make) => {
+  const ref = createRef<HTMLElement>();
+  const { unmount } = renderV1(make(ref as Ref<never>));
+  expect(ref.current).toBe(screen.getByLabelText("C"));
+  unmount();
+  expect(ref.current).toBeNull();
+});
+
+it.each(COMPOSED)("forwards a callback ref to the %s control", (_, make) => {
+  const ref = vi.fn();
+  const { unmount } = renderV1(make(ref));
+  expect(ref).toHaveBeenCalledWith(screen.getByLabelText("C"));
+  unmount();
+  expect(ref).toHaveBeenLastCalledWith(null);
+});
diff --git a/frontend/src/v1/lib/merge-refs.test.ts b/frontend/src/v1/lib/merge-refs.test.ts
new file mode 100644
index 0000000000..79fc4ef9df
--- /dev/null
+++ b/frontend/src/v1/lib/merge-refs.test.ts
@@ -0,0 +1,31 @@
+import { createRef } from "react";
+import { expect, it, vi } from "vitest";
+import { mergeRefs } from "./merge-refs";
+
+it("sets object refs and calls callback refs, skipping missing ones", () => {
+  const objectRef = createRef<string>();
+  const callbackRef = vi.fn();
+  const ref = mergeRefs<string>(objectRef, undefined, callbackRef, null);
+  ref("node");
+  expect(objectRef.current).toBe("node");
+  expect(callbackRef).toHaveBeenCalledWith("node");
+});
+
+it("runs a ref's own cleanup on detach, and nulls the refs that have none", () => {
+  const objectRef = createRef<string>();
+  const plainCallback = vi.fn();
+  const ownCleanup = vi.fn();
+  const cleanupRef = vi.fn(() => ownCleanup);
+  const detach = mergeRefs<string>(
+    objectRef,
+    plainCallback,
+    cleanupRef,
+  )("node");
+  expect(typeof detach).toBe("function");
+
+  (detach as () => void)();
+  expect(ownCleanup).toHaveBeenCalledOnce();
+  expect(cleanupRef).not.toHaveBeenCalledWith(null);
+  expect(plainCallback).toHaveBeenLastCalledWith(null);
+  expect(objectRef.current).toBeNull();
+});
diff --git a/frontend/src/v1/lib/merge-refs.ts b/frontend/src/v1/lib/merge-refs.ts
new file mode 100644
index 0000000000..1febfd82da
--- /dev/null
+++ b/frontend/src/v1/lib/merge-refs.ts
@@ -0,0 +1,41 @@
+import type { Ref, RefCallback } from "react";
+
+type Cleanup = () => void;
+
+function setRef<T>(ref: Ref<T> | undefined, node: T | null): Cleanup | null {
+  if (typeof ref === "function") {
+    const cleanup = ref(node);
+    return typeof cleanup === "function" ? cleanup : null;
+  }
+  if (ref) {
+    ref.current = node;
+  }
+  return null;
+}
+
+/*
+ * One ref callback that feeds every given ref, for a component that needs its
+ * node and also forwards the caller's ref. It returns a cleanup, so React 19
+ * calls that instead of the callback with null: a ref that returned its own
+ * cleanup gets it run, every other ref is set to null.
+ *
+ * Radix has the same helper, but only under `radix-ui/internal`, which is not
+ * a public API and can change in any release, so v1 keeps its own copy.
+ */
+export function mergeRefs<T>(
+  ...refs: readonly (Ref<T> | undefined)[]
+): RefCallback<T> {
+  return (node) => {
+    const cleanups = refs.map((ref) => setRef(ref, node));
+    return () => {
+      refs.forEach((ref, index) => {
+        const cleanup = cleanups[index];
+        if (cleanup) {
+          cleanup();
+        } else {
+          setRef(ref, null);
+        }
+      });
+    };
+  };
+}