Jul 1, 2025 · Jun 25, 2025 · Jun 26, 2025 · Jun 26, 2025 · Jun 26, 2025 · Jun 26, 2025
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/coderd/database/db2sdk/db2sdk.go b/coderd/database/db2sdk/db2sdk.go
 Placeholder: param.Styling.Placeholder,
 Disabled:    param.Styling.Disabled,
 Label:       param.Styling.Label,
 MaskInput:   param.Styling.MaskInput,
 },
 Mutable:      param.Mutable,
 DefaultValue: PreviewHCLString(param.DefaultValue),
diff --git a/codersdk/parameters.go b/codersdk/parameters.go
 Placeholder *string `json:"placeholder,omitempty"`
 Disabled    *bool   `json:"disabled,omitempty"`
 Label       *string `json:"label,omitempty"`
 MaskInput   *bool   `json:"mask_input,omitempty"`
 }

 type PreviewParameterOption struct {
diff --git a/docs/reference/api/schemas.md b/docs/reference/api/schemas.md
diff --git a/docs/reference/api/templates.md b/docs/reference/api/templates.md
diff --git a/go.mod b/go.mod
 require (
 github.com/coder/agentapi-sdk-go v0.0.0-20250505131810-560d1d88d225
 github.com/coder/aisdk-go v0.0.9
 github.com/coder/preview v1.0.1
 github.com/coder/preview v1.0.2
 github.com/fsnotify/fsnotify v1.9.0
 github.com/mark3labs/mcp-go v0.32.0
 )
diff --git a/go.sum b/go.sum
 github.com/coder/pq v1.10.5-0.20250630052411-a259f96b6102/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
 github.com/coder/pretty v0.0.0-20230908205945-e89ba86370e0 h1:3A0ES21Ke+FxEM8CXx9n47SZOKOpgSE1bbJzlE4qPVs=
 github.com/coder/pretty v0.0.0-20230908205945-e89ba86370e0/go.mod h1:5UuS2Ts+nTToAMeOjNlnHFkPahrtDkmpydBen/3wgZc=
 github.com/coder/preview v1.0.1 h1:f6q+RjNelwnkyXfGbmVlb4dcUOQ0z4mPsb2kuQpFHuU=
 github.com/coder/preview v1.0.1/go.mod h1:efDWGlO/PZPrvdt5QiDhMtTUTkPxejXo9c0wmYYLLjM=
 github.com/coder/preview v1.0.2 h1:ZFfox0PgXcIouB9iWGcZyOtdL0h2a4ju1iPw/dMqsg4=
 github.com/coder/preview v1.0.2/go.mod h1:efDWGlO/PZPrvdt5QiDhMtTUTkPxejXo9c0wmYYLLjM=
 github.com/coder/quartz v0.2.1 h1:QgQ2Vc1+mvzewg2uD/nj8MJ9p9gE+QhGJm+Z+NGnrSE=
 github.com/coder/quartz v0.2.1/go.mod h1:vsiCc+AHViMKH2CQpGIpFgdHIEQsxwm8yCscqKmzbRA=
 github.com/coder/retry v1.5.1 h1:iWu8YnD8YqHs3XwqrqsjoBTAVqT9ml6z9ViJ2wlMiqc=
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.stories.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.stories.tsx
 parameters: {
 layout: "centered",
 },
 args: {
 parameter: MockPreviewParameter,
 onChange: () => {},
 },
 };

 export default meta;
 type Story = StoryObj<typeof DynamicParameter>;

 export const TextInput: Story = {
 args: {
 parameter: {
 ...MockPreviewParameter,
 },
 },
 };
 export const TextInput: Story = {};

 export const TextArea: Story = {
 args: {
 isPreset: true,
 },
 };

 export const MaskedInput: Story = {
 args: {
 parameter: {
 ...MockPreviewParameter,
 form_type: "input",
 styling: {
 ...MockPreviewParameter.styling,
 placeholder: "Tell me a secret",
 mask_input: true,
 },
 },
 },
 };

 export const MaskedTextArea: Story = {
 args: {
 parameter: {
 ...MockPreviewParameter,
 form_type: "textarea",
 styling: {
 ...MockPreviewParameter.styling,
 mask_input: true,
 },
 },
 },
 };
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx
 WorkspaceBuildParameter,
 } from "api/typesGenerated";
 import { Badge } from "components/Badge/Badge";
 import { Button } from "components/Button/Button";
 import { Checkbox } from "components/Checkbox/Checkbox";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Input } from "components/Input/Input";
 SelectValue,
 } from "components/Select/Select";
 import { Slider } from "components/Slider/Slider";
 import { Stack } from "components/Stack/Stack";
 import { Switch } from "components/Switch/Switch";
 import { TagInput } from "components/TagInput/TagInput";
 import { Textarea } from "components/Textarea/Textarea";
 import { useEffectEvent } from "hooks/hookPolyfills";
 import {
 CircleAlert,
 Eye,
 EyeOff,
 Hourglass,
 Info,
 LinkIcon,
 Settings,
 TriangleAlert,
 } from "lucide-react";
 import { type FC, useEffect, useId, useRef, useState } from "react";
 import { cn } from "utils/cn";
 import type { AutofillBuildParameter } from "utils/richParameters";
 import * as Yup from "yup";

 const [localValue, setLocalValue] = useState(
 value !== undefined ? value : validValue(parameter.value),
 );
 const [showMaskedInput, setShowMaskedInput] = useState(false);
 const debouncedLocalValue = useDebouncedValue(localValue, 500);
 const onChangeEvent = useEffectEvent(onChange);
 // prevDebouncedValueRef is to prevent calling the onChangeEvent on the initial render
 switch (parameter.form_type) {
 case "textarea": {
 return (
 <Textarea
 ref={textareaRef}
 id={id}
 className="overflow-y-auto max-h-[500px]"
 value={localValue}
 onChange={(e) => {
 const target = e.currentTarget;
 target.style.height = "auto";
 target.style.height = `${target.scrollHeight}px`;

 setLocalValue(e.target.value);
 }}
 disabled={disabled}
 placeholder={parameter.styling?.placeholder}
 required={parameter.required}
 />
 <Stack direction="row" spacing={0} alignItems="center">
 <Textarea
 ref={textareaRef}
 id={id}
 className={cn(
 "overflow-y-auto max-h-[500px]",
 parameter.styling?.mask_input &&
 !showMaskedInput &&
 "[-webkit-text-security:disc]",
 )}
 value={localValue}
 onChange={(e) => {
 const target = e.currentTarget;
 target.style.height = "auto";
 target.style.height = `${target.scrollHeight}px`;

 setLocalValue(e.target.value);
 }}
 disabled={disabled}
 placeholder={parameter.styling?.placeholder}
 required={parameter.required}
 />
 {parameter.styling?.mask_input && (
 <Button
 type="button"
 variant="subtle"
 size="icon"
 onMouseDown={() => setShowMaskedInput(true)}
 onMouseOut={() => setShowMaskedInput(false)}
 onMouseUp={() => setShowMaskedInput(false)}
 disabled={disabled}
 >
 {showMaskedInput ? (
 <EyeOff className="h-4 w-4" />
 ) : (
 <Eye className="h-4 w-4" />
 )}
 </Button>
 )}
 </Stack>
 );
 }

 case "input": {
 const inputType = parameter.type === "number" ? "number" : "text";
 const inputType =
 parameter.type === "number"
 ? "number"
 : parameter.styling?.mask_input && !showMaskedInput
 ? "password"
 : "text";
 const inputProps: Record<string, unknown> = {};

 if (parameter.type === "number") {
 }

 return (
 <Input
 id={id}
 type={inputType}
 value={localValue}
 onChange={(e) => {
 setLocalValue(e.target.value);
 }}
 disabled={disabled}
 required={parameter.required}
 placeholder={parameter.styling?.placeholder}
 {...inputProps}
 />
 <Stack direction="row" spacing={0} alignItems="center">
 <Input
 id={id}
 type={inputType}
 value={localValue}
 onChange={(e) => {
 setLocalValue(e.target.value);
 }}
 disabled={disabled}
 required={parameter.required}
 placeholder={parameter.styling?.placeholder}
 {...inputProps}
 />
 {parameter.styling?.mask_input && parameter.type !== "number" && (
 <Button
 type="button"
 variant="subtle"
 size="icon"
 onMouseDown={() => setShowMaskedInput(true)}
 onMouseOut={() => setShowMaskedInput(false)}
 onMouseUp={() => setShowMaskedInput(false)}
 disabled={disabled}
 >
 {showMaskedInput ? (
 <EyeOff className="h-4 w-4" />
 ) : (
 <Eye className="h-4 w-4" />
 )}
 </Button>
 )}
 </Stack>
 );
 }
 }

 return (
 <MultiSelectCombobox
 inputProps={{
 id: id,
 }}
 inputProps={{ id }}
 options={options}
 defaultOptions={selectedOptions}
 onChange={(newValues) => {
 if (Array.isArray(parsed)) {
 values = parsed;
 }
 } catch(e){
 } catch {
 return false;
 }

 {diagnostics.map((diagnostic, index) => (
 <div
 key={`diagnostic-${diagnostic.summary}-${index}`}
 className={`text-xs font-semibold flex flex-col rounded-md border px-3.5 py-3.5 border-solid
                        ${
 diagnostic.severity === "error"
 ? "text-content-primary border-border-destructive bg-content-destructive/15"
 : "text-content-primary border-border-warning bg-content-warning/15"
 }`}
 className={cn(
 "text-xs font-semibold flex flex-col rounded-md border px-3.5 py-3.5 border-solid",
 diagnostic.severity === "error"
 ? "text-content-primary border-border-destructive bg-content-destructive/15"
 : "text-content-primary border-border-warning bg-content-warning/15",
 )}
 >
 <div className="flex flex-row items-start">
 {diagnostic.severity === "error" && (
Original file line number	Diff line number	Diff line change
Expand Up		@@ -816,6 +816,7 @@ func PreviewParameter(param previewtypes.Parameter) codersdk.PreviewParameter {
		Placeholder: param.Styling.Placeholder,
		Disabled: param.Styling.Disabled,
		Label: param.Styling.Label,
		MaskInput: param.Styling.MaskInput,
		},
		Mutable: param.Mutable,
		DefaultValue: PreviewHCLString(param.DefaultValue),
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -91,6 +91,7 @@ type PreviewParameterStyling struct {
		Placeholder *string `json:"placeholder,omitempty"`
		Disabled *bool `json:"disabled,omitempty"`
		Label *string `json:"label,omitempty"`
		MaskInput *bool `json:"mask_input,omitempty"`
		}

		type PreviewParameterOption struct {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -483,7 +483,7 @@ require (
		require (
		github.com/coder/agentapi-sdk-go v0.0.0-20250505131810-560d1d88d225
		github.com/coder/aisdk-go v0.0.9
		github.com/coder/preview v1.0.1
		github.com/coder/preview v1.0.2
		github.com/fsnotify/fsnotify v1.9.0
		github.com/mark3labs/mcp-go v0.32.0
		)
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -916,8 +916,8 @@ github.com/coder/pq v1.10.5-0.20250630052411-a259f96b6102 h1:ahTJlTRmTogsubgRVGO
		github.com/coder/pq v1.10.5-0.20250630052411-a259f96b6102/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
		github.com/coder/pretty v0.0.0-20230908205945-e89ba86370e0 h1:3A0ES21Ke+FxEM8CXx9n47SZOKOpgSE1bbJzlE4qPVs=
		github.com/coder/pretty v0.0.0-20230908205945-e89ba86370e0/go.mod h1:5UuS2Ts+nTToAMeOjNlnHFkPahrtDkmpydBen/3wgZc=
		github.com/coder/preview v1.0.1 h1:f6q+RjNelwnkyXfGbmVlb4dcUOQ0z4mPsb2kuQpFHuU=
		github.com/coder/preview v1.0.1/go.mod h1:efDWGlO/PZPrvdt5QiDhMtTUTkPxejXo9c0wmYYLLjM=
		github.com/coder/preview v1.0.2 h1:ZFfox0PgXcIouB9iWGcZyOtdL0h2a4ju1iPw/dMqsg4=
		github.com/coder/preview v1.0.2/go.mod h1:efDWGlO/PZPrvdt5QiDhMtTUTkPxejXo9c0wmYYLLjM=
		github.com/coder/quartz v0.2.1 h1:QgQ2Vc1+mvzewg2uD/nj8MJ9p9gE+QhGJm+Z+NGnrSE=
		github.com/coder/quartz v0.2.1/go.mod h1:vsiCc+AHViMKH2CQpGIpFgdHIEQsxwm8yCscqKmzbRA=
		github.com/coder/retry v1.5.1 h1:iWu8YnD8YqHs3XwqrqsjoBTAVqT9ml6z9ViJ2wlMiqc=
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,18 +8,16 @@ const meta: Meta<typeof DynamicParameter> = {
		parameters: {
		layout: "centered",
		},
		args: {
		parameter: MockPreviewParameter,
		onChange: () => {},
		},
		};

		export default meta;
		type Story = StoryObj<typeof DynamicParameter>;

		export const TextInput: Story = {
		args: {
		parameter: {
		...MockPreviewParameter,
		},
		},
		};
		export const TextInput: Story = {};

		export const TextArea: Story = {
		args: {
Expand DownExpand Up		@@ -230,3 +228,30 @@ export const AllBadges: Story = {
		isPreset: true,
		},
		};

		export const MaskedInput: Story = {
		args: {
		parameter: {
		...MockPreviewParameter,
		form_type: "input",
		styling: {
		...MockPreviewParameter.styling,
		placeholder: "Tell me a secret",
		mask_input: true,
		},
		},
		},
		};

		export const MaskedTextArea: Story = {
		args: {
		parameter: {
		...MockPreviewParameter,
		form_type: "textarea",
		styling: {
		...MockPreviewParameter.styling,
		mask_input: true,
		},
		},
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,6 +5,7 @@ import type {
		WorkspaceBuildParameter,
		} from "api/typesGenerated";
		import { Badge } from "components/Badge/Badge";
		import { Button } from "components/Button/Button";
		import { Checkbox } from "components/Checkbox/Checkbox";
		import { ExternalImage } from "components/ExternalImage/ExternalImage";
		import { Input } from "components/Input/Input";
Expand All		@@ -23,6 +24,7 @@ import {
		SelectValue,
		} from "components/Select/Select";
		import { Slider } from "components/Slider/Slider";
		import { Stack } from "components/Stack/Stack";
		import { Switch } from "components/Switch/Switch";
		import { TagInput } from "components/TagInput/TagInput";
		import { Textarea } from "components/Textarea/Textarea";
Expand All		@@ -36,13 +38,16 @@ import { useDebouncedValue } from "hooks/debounce";
		import { useEffectEvent } from "hooks/hookPolyfills";
		import {
		CircleAlert,
		Eye,
		EyeOff,
		Hourglass,
		Info,
		LinkIcon,
		Settings,
		TriangleAlert,
		} from "lucide-react";
		import { type FC, useEffect, useId, useRef, useState } from "react";
		import { cn } from "utils/cn";
		import type { AutofillBuildParameter } from "utils/richParameters";
		import * as Yup from "yup";

Expand DownExpand Up		@@ -265,6 +270,7 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
		const [localValue, setLocalValue] = useState(
		value !== undefined ? value : validValue(parameter.value),
		);
		const [showMaskedInput, setShowMaskedInput] = useState(false);
		const debouncedLocalValue = useDebouncedValue(localValue, 500);
		const onChangeEvent = useEffectEvent(onChange);
		// prevDebouncedValueRef is to prevent calling the onChangeEvent on the initial render
Expand DownExpand Up		@@ -309,27 +315,56 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
		switch (parameter.form_type) {
		case "textarea": {
		return (
		<Textarea
		ref={textareaRef}
		id={id}
		className="overflow-y-auto max-h-[500px]"
		value={localValue}
		onChange={(e) => {
		const target = e.currentTarget;
		target.style.height = "auto";
		target.style.height = `${target.scrollHeight}px`;

		setLocalValue(e.target.value);
		}}
		disabled={disabled}
		placeholder={parameter.styling?.placeholder}
		required={parameter.required}
		/>
		<Stack direction="row" spacing={0} alignItems="center">
		<Textarea
		ref={textareaRef}
		id={id}
		className={cn(
		"overflow-y-auto max-h-[500px]",
		parameter.styling?.mask_input &&
		!showMaskedInput &&
		"[-webkit-text-security:disc]",
		)}
		value={localValue}
		onChange={(e) => {
		const target = e.currentTarget;
		target.style.height = "auto";
		target.style.height = `${target.scrollHeight}px`;

		setLocalValue(e.target.value);
		}}
		disabled={disabled}
		placeholder={parameter.styling?.placeholder}
		required={parameter.required}
		/>
		{parameter.styling?.mask_input && (
		<Button
		type="button"
		variant="subtle"
		size="icon"
		onMouseDown={() => setShowMaskedInput(true)}
		onMouseOut={() => setShowMaskedInput(false)}
		onMouseUp={() => setShowMaskedInput(false)}
		disabled={disabled}
		>
		{showMaskedInput ? (
		<EyeOff className="h-4 w-4" />
		) : (
		<Eye className="h-4 w-4" />
		)}
		</Button>
		)}
		</Stack>
		);
		}

		case "input": {
		const inputType = parameter.type === "number" ? "number" : "text";
		const inputType =
		parameter.type === "number"
		? "number"
		: parameter.styling?.mask_input && !showMaskedInput
		? "password"
		: "text";
		const inputProps: Record<string, unknown> = {};

		if (parameter.type === "number") {
Expand All		@@ -346,18 +381,37 @@ const DebouncedParameterField: FC<DebouncedParameterFieldProps> = ({
		}

		return (
		<Input
		id={id}
		type={inputType}
		value={localValue}
		onChange={(e) => {
		setLocalValue(e.target.value);
		}}
		disabled={disabled}
		required={parameter.required}
		placeholder={parameter.styling?.placeholder}
		{...inputProps}
		/>
		<Stack direction="row" spacing={0} alignItems="center">
		<Input
		id={id}
		type={inputType}
		value={localValue}
		onChange={(e) => {
		setLocalValue(e.target.value);
		}}
		disabled={disabled}
		required={parameter.required}
		placeholder={parameter.styling?.placeholder}
		{...inputProps}
		/>
		{parameter.styling?.mask_input && parameter.type !== "number" && (
		<Button
		type="button"
		variant="subtle"
		size="icon"
		onMouseDown={() => setShowMaskedInput(true)}
		onMouseOut={() => setShowMaskedInput(false)}
		onMouseUp={() => setShowMaskedInput(false)}
		disabled={disabled}
		>
		{showMaskedInput ? (
		<EyeOff className="h-4 w-4" />
		) : (
		<Eye className="h-4 w-4" />
		)}
		</Button>
		)}
		</Stack>
		);
		}
		}
Expand DownExpand Up		@@ -451,9 +505,7 @@ const ParameterField: FC<ParameterFieldProps> = ({

		return (
		<MultiSelectCombobox
		inputProps={{
		id: id,
		}}
		inputProps={{ id }}
		options={options}
		defaultOptions={selectedOptions}
		onChange={(newValues) => {
Expand DownExpand Up		@@ -698,7 +750,7 @@ const isValidParameterOption = (
		if (Array.isArray(parsed)) {
		values = parsed;
		}
		} catch(e){
		} catch {
		return false;
		}

Expand DownExpand Up		@@ -899,12 +951,12 @@ export const Diagnostics: FC<DiagnosticsProps> = ({ diagnostics }) => {
		{diagnostics.map((diagnostic, index) => (
		<div
		key={`diagnostic-${diagnostic.summary}-${index}`}
		className={`text-xs font-semibold flex flex-col rounded-md border px-3.5 py-3.5 border-solid
		${
		diagnostic.severity === "error"
		? "text-content-primary border-border-destructive bg-content-destructive/15"
		: "text-content-primary border-border-warning bg-content-warning/15"
		}`}
		className={cn(
		"text-xs font-semibold flex flex-col rounded-md border px-3.5 py-3.5 border-solid",
		diagnostic.severity === "error"
		? "text-content-primary border-border-destructive bg-content-destructive/15"
		: "text-content-primary border-border-warning bg-content-warning/15",
		)}
		>
		<div className="flex flex-row items-start">
		{diagnostic.severity === "error" && (
Expand Down