From 8c9fb0015daf20e57aa375a0510e5c767a130f13 Mon Sep 17 00:00:00 2001
From: Ehab Younes <ehab@coder.com>
Date: Tue, 15 Sep 2026 15:24:13 +0000
Subject: [PATCH] feat: add dynamic workspace update parameter editor

---
 packages/shared/src/index.ts                  |   2 +
 packages/shared/src/workspaceUpdate/api.ts    |  34 +
 packages/workspace-update/package.json        |  29 +
 packages/workspace-update/src/App.tsx         |  24 +
 .../WorkspaceUpdateForm.stories.tsx           | 125 ++++
 .../src/components/WorkspaceUpdateForm.tsx    | 458 ++++++++++++++
 packages/workspace-update/src/css.d.ts        |   1 +
 .../src/hooks/useWorkspaceUpdate.ts           |  21 +
 packages/workspace-update/src/index.css       |  76 +++
 packages/workspace-update/src/index.tsx       |  21 +
 .../workspace-update/storybook.preview.ts     |   1 +
 packages/workspace-update/tsconfig.json       |  11 +
 packages/workspace-update/vite.config.ts      |   6 +
 pnpm-lock.yaml                                |  43 ++
 src/api/axios.d.ts                            |   5 +
 src/api/dynamicUpdateSession.ts               | 483 ++++++++++++++
 src/commands.ts                               |  15 +
 src/core/container.ts                         |  11 +
 src/logging/httpLogger.ts                     |  30 +-
 src/remote/workspaceStateMachine.ts           |  10 +-
 .../workspaceUpdatePanelFactory.ts            | 179 ++++++
 test/unit/api/dynamicUpdateSession.test.ts    | 587 ++++++++++++++++++
 .../command/updateWorkspace.telemetry.test.ts |  39 +-
 test/unit/commands.netcheck.test.ts           |   1 +
 test/unit/commands.supportBundle.test.ts      |   1 +
 test/unit/commands.telemetry.test.ts          |   4 +
 test/unit/logging/httpLogger.test.ts          |  53 +-
 .../unit/remote/workspaceStateMachine.test.ts | 123 +++-
 .../workspaceUpdatePanelFactory.test.ts       | 163 +++++
 .../WorkspaceUpdateForm.test.ts               | 266 ++++++++
 30 files changed, 2797 insertions(+), 25 deletions(-)
 create mode 100644 packages/shared/src/workspaceUpdate/api.ts
 create mode 100644 packages/workspace-update/package.json
 create mode 100644 packages/workspace-update/src/App.tsx
 create mode 100644 packages/workspace-update/src/components/WorkspaceUpdateForm.stories.tsx
 create mode 100644 packages/workspace-update/src/components/WorkspaceUpdateForm.tsx
 create mode 100644 packages/workspace-update/src/css.d.ts
 create mode 100644 packages/workspace-update/src/hooks/useWorkspaceUpdate.ts
 create mode 100644 packages/workspace-update/src/index.css
 create mode 100644 packages/workspace-update/src/index.tsx
 create mode 100644 packages/workspace-update/storybook.preview.ts
 create mode 100644 packages/workspace-update/tsconfig.json
 create mode 100644 packages/workspace-update/vite.config.ts
 create mode 100644 src/api/dynamicUpdateSession.ts
 create mode 100644 src/webviews/workspaceUpdate/workspaceUpdatePanelFactory.ts
 create mode 100644 test/unit/api/dynamicUpdateSession.test.ts
 create mode 100644 test/unit/webviews/workspaceUpdate/workspaceUpdatePanelFactory.test.ts
 create mode 100644 test/webview/workspace-update/WorkspaceUpdateForm.test.ts

diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 684e49e72e..b004b66007 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -33,3 +33,5 @@ export type {
 // Workspaces types and API
 export * from "./workspaces/types";
 export { WorkspacesApi } from "./workspaces/api";
+
+export * from "./workspaceUpdate/api";
diff --git a/packages/shared/src/workspaceUpdate/api.ts b/packages/shared/src/workspaceUpdate/api.ts
new file mode 100644
index 0000000000..bb15381ed3
--- /dev/null
+++ b/packages/shared/src/workspaceUpdate/api.ts
@@ -0,0 +1,34 @@
+import { defineCommand, defineNotification } from "../ipc/protocol";
+
+import type {
+	PreviewParameter,
+	FriendlyDiagnostic,
+} from "coder/site/src/api/typesGenerated";
+
+export interface WorkspaceUpdateState {
+	readonly workspaceName: string;
+	readonly templateVersionId: string;
+	readonly revision: number;
+	readonly status:
+		"loading" | "evaluating" | "ready" | "submitting" | "success" | "error";
+	readonly parameters: readonly PreviewParameter[];
+	readonly inputs: Readonly<Record<string, string>>;
+	readonly locked: readonly string[];
+	readonly diagnostics: readonly FriendlyDiagnostic[];
+	readonly error?: string;
+	readonly canSubmit: boolean;
+	readonly canRetry?: boolean;
+}
+
+export const WorkspaceUpdateApi = {
+	stateChanged: defineNotification<WorkspaceUpdateState>(
+		"workspaceUpdate/stateChanged",
+	),
+	ready: defineCommand<void>("workspaceUpdate/ready"),
+	change: defineCommand<{ name: string; value: string }>(
+		"workspaceUpdate/change",
+	),
+	retry: defineCommand<void>("workspaceUpdate/retry"),
+	submit: defineCommand<{ revision: number }>("workspaceUpdate/submit"),
+	cancel: defineCommand<void>("workspaceUpdate/cancel"),
+} as const;
diff --git a/packages/workspace-update/package.json b/packages/workspace-update/package.json
new file mode 100644
index 0000000000..f68bf44aeb
--- /dev/null
+++ b/packages/workspace-update/package.json
@@ -0,0 +1,29 @@
+{
+	"name": "@repo/workspace-update",
+	"version": "1.0.0",
+	"description": "Coder workspace update parameter form webview",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite build --watch",
+		"typecheck": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@repo/shared": "workspace:*",
+		"@repo/ui": "workspace:*",
+		"@repo/webview-shared": "workspace:*",
+		"react": "catalog:",
+		"react-dom": "catalog:"
+	},
+	"devDependencies": {
+		"@repo/storybook-utils": "workspace:*",
+		"@rolldown/plugin-babel": "catalog:",
+		"@types/react": "catalog:",
+		"@types/react-dom": "catalog:",
+		"@vitejs/plugin-react": "catalog:",
+		"babel-plugin-react-compiler": "catalog:",
+		"typescript": "catalog:",
+		"vite": "catalog:"
+	}
+}
diff --git a/packages/workspace-update/src/App.tsx b/packages/workspace-update/src/App.tsx
new file mode 100644
index 0000000000..1c7558fbfd
--- /dev/null
+++ b/packages/workspace-update/src/App.tsx
@@ -0,0 +1,24 @@
+import { WorkspaceUpdateForm } from "./components/WorkspaceUpdateForm";
+import { useWorkspaceUpdate } from "./hooks/useWorkspaceUpdate";
+
+export default function App(): React.JSX.Element {
+	const { api, state } = useWorkspaceUpdate();
+
+	if (!state) {
+		return (
+			<div className="workspace-update-app__loading">
+				Loading workspace update…
+			</div>
+		);
+	}
+
+	return (
+		<WorkspaceUpdateForm
+			state={state}
+			onChange={api.change}
+			onCancel={api.cancel}
+			onRetry={api.retry}
+			onSubmit={(revision) => api.submit({ revision })}
+		/>
+	);
+}
diff --git a/packages/workspace-update/src/components/WorkspaceUpdateForm.stories.tsx b/packages/workspace-update/src/components/WorkspaceUpdateForm.stories.tsx
new file mode 100644
index 0000000000..b799057f16
--- /dev/null
+++ b/packages/workspace-update/src/components/WorkspaceUpdateForm.stories.tsx
@@ -0,0 +1,125 @@
+import { useState } from "react";
+
+import { WorkspaceUpdateForm } from "./WorkspaceUpdateForm";
+
+import type { WorkspaceUpdateState } from "@repo/shared";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const parameter = (
+	name: string,
+	formType: WorkspaceUpdateState["parameters"][number]["form_type"],
+	options: ReadonlyArray<{
+		name: string;
+		value: string;
+		description?: string;
+	}> = [],
+): WorkspaceUpdateState["parameters"][number] => ({
+	name,
+	display_name: name,
+	description: `Configure ${name}.`,
+	type: formType === "slider" ? "number" : "string",
+	form_type: formType,
+	styling: {},
+	mutable: true,
+	default_value: { valid: false, value: "" },
+	value: { valid: false, value: "" },
+	icon: "",
+	options: options.map((option) => ({
+		name: option.name,
+		description: option.description ?? "",
+		value: { valid: true, value: option.value },
+		icon: "",
+	})),
+	validations: [],
+	required: false,
+	order: 0,
+	ephemeral: false,
+	diagnostics: [],
+});
+
+const state: WorkspaceUpdateState = {
+	workspaceName: "dev",
+	templateVersionId: "template-version-1",
+	revision: 3,
+	status: "ready",
+	inputs: {
+		region: "us-east",
+		autoscale: "true",
+		cores: "4",
+		tags: '["team,blue", "staging"]',
+		features: '["metrics"]',
+	},
+	locked: ["locked"],
+	diagnostics: [],
+	canSubmit: true,
+	parameters: [
+		parameter("region", "radio", [
+			{ name: "US East", value: "us-east" },
+			{ name: "Europe", value: "eu-west", description: "Frankfurt" },
+		]),
+		parameter("autoscale", "switch"),
+		parameter("cores", "slider"),
+		parameter("notes", "textarea"),
+		parameter("features", "multi-select", [
+			{ name: "Metrics", value: "metrics" },
+			{ name: "Tracing", value: "tracing" },
+		]),
+		parameter("tags", "tag-select"),
+		{ ...parameter("token", "input"), styling: { mask_input: true } },
+		{ ...parameter("locked", "input"), mutable: false },
+	],
+};
+
+function InteractiveForm(): React.JSX.Element {
+	const [inputs, setInputs] = useState(state.inputs);
+	return (
+		<WorkspaceUpdateForm
+			state={{ ...state, inputs }}
+			onChange={({ name, value }) =>
+				setInputs((current) => ({ ...current, [name]: value }))
+			}
+			onCancel={() => undefined}
+			onRetry={() => undefined}
+			onSubmit={() => undefined}
+		/>
+	);
+}
+
+const meta: Meta<typeof InteractiveForm> = {
+	title: "Workspace Update/Form",
+	component: InteractiveForm,
+};
+
+export default meta;
+type Story = StoryObj<typeof InteractiveForm>;
+
+export const Ready: Story = {};
+
+export const Evaluating: Story = {
+	render: () => (
+		<WorkspaceUpdateForm
+			state={{ ...state, status: "evaluating" }}
+			onChange={() => undefined}
+			onCancel={() => undefined}
+			onRetry={() => undefined}
+			onSubmit={() => undefined}
+		/>
+	),
+};
+
+export const Error: Story = {
+	render: () => (
+		<WorkspaceUpdateForm
+			state={{
+				...state,
+				status: "error",
+				parameters: [],
+				error: "The template is unavailable.",
+			}}
+			onChange={() => undefined}
+			onCancel={() => undefined}
+			onRetry={() => undefined}
+			onSubmit={() => undefined}
+		/>
+	),
+};
diff --git a/packages/workspace-update/src/components/WorkspaceUpdateForm.tsx b/packages/workspace-update/src/components/WorkspaceUpdateForm.tsx
new file mode 100644
index 0000000000..0bce74c333
--- /dev/null
+++ b/packages/workspace-update/src/components/WorkspaceUpdateForm.tsx
@@ -0,0 +1,458 @@
+import {
+	Button,
+	Checkbox,
+	ErrorState,
+	Field,
+	Input,
+	LoadingState,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+	Textarea,
+} from "@repo/ui";
+import { useId, useState } from "react";
+
+import type { WorkspaceUpdateState } from "@repo/shared";
+import type { PreviewParameter } from "coder/site/src/api/typesGenerated";
+
+export interface WorkspaceUpdateFormProps {
+	state: WorkspaceUpdateState;
+	onCancel: () => void;
+	onChange: (change: { name: string; value: string }) => void;
+	onRetry: () => void;
+	onSubmit: (revision: number) => void;
+}
+
+const TAG_SELECT_HELP =
+	'Enter a JSON string array, for example ["us-east", "team,blue"]. This preserves items containing commas.';
+
+/** Parse a tag-select value without treating commas as separators. */
+export function parseTagSelectValue(value: string): string[] | undefined {
+	try {
+		const parsed: unknown = JSON.parse(value);
+		return Array.isArray(parsed) &&
+			parsed.every((item) => typeof item === "string")
+			? parsed
+			: undefined;
+	} catch {
+		return undefined;
+	}
+}
+
+function parameterValue(
+	parameter: PreviewParameter,
+	inputs: Readonly<Record<string, string>>,
+): string {
+	return (
+		inputs[parameter.name] ??
+		(parameter.value.valid ? parameter.value.value : "")
+	);
+}
+
+function parameterLabel(parameter: PreviewParameter): string {
+	return `${parameter.styling.label || parameter.display_name || parameter.name}${parameter.required ? " (required)" : ""}`;
+}
+
+function formatDiagnostics(parameter: PreviewParameter): string | undefined {
+	const errors = parameter.diagnostics
+		.filter((diagnostic) => diagnostic.severity === "error")
+		.map((diagnostic) =>
+			[diagnostic.summary, diagnostic.detail].filter(Boolean).join(" — "),
+		)
+		.filter(Boolean);
+	return errors.length > 0 ? errors.join(" ") : undefined;
+}
+
+function parameterDescription(
+	parameter: PreviewParameter,
+	locked: boolean,
+): string | undefined {
+	const description = [
+		parameter.description,
+		parameter.form_type === "tag-select" ? TAG_SELECT_HELP : undefined,
+		locked
+			? "This parameter is locked."
+			: !parameter.mutable
+				? "This value cannot be changed after this update."
+				: undefined,
+		parameter.ephemeral
+			? "This value resets to its default on the next build."
+			: undefined,
+	]
+		.filter(Boolean)
+		.join(" ");
+	return description || undefined;
+}
+
+function range(parameter: PreviewParameter): { min?: number; max?: number } {
+	const min = parameter.validations.find(
+		(validation) => validation.validation_min !== null,
+	)?.validation_min;
+	const max = parameter.validations.find(
+		(validation) => validation.validation_max !== null,
+	)?.validation_max;
+	return {
+		...(min !== null && min !== undefined ? { min } : {}),
+		...(max !== null && max !== undefined ? { max } : {}),
+	};
+}
+
+interface ParameterFieldProps {
+	disabled: boolean;
+	parameter: PreviewParameter;
+	value: string;
+	onChange: (value: string) => void;
+}
+
+function ParameterField({
+	disabled,
+	parameter,
+	value,
+	onChange,
+}: ParameterFieldProps): React.JSX.Element {
+	const id = useId();
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const error = formatDiagnostics(parameter);
+	const description = parameterDescription(parameter, disabled);
+	const options = parameter.options.filter((option) => option.value.valid);
+	const formType =
+		parameter.form_type ||
+		(parameter.type === "bool"
+			? "checkbox"
+			: parameter.type === "list(string)"
+				? "tag-select"
+				: options.length
+					? "dropdown"
+					: "input");
+	const describedBy = [description && descriptionId, error && errorId]
+		.filter(Boolean)
+		.join(" ");
+	const common = {
+		disabled,
+		"aria-describedby": describedBy || undefined,
+		"aria-invalid": error ? true : undefined,
+	};
+
+	if (formType === "error") {
+		return (
+			<Field
+				label={parameterLabel(parameter)}
+				error={error ?? parameter.description}
+			>
+				<div role="alert" className="workspace-update-form__parameter-error">
+					This parameter cannot be configured.
+				</div>
+			</Field>
+		);
+	}
+
+	if (formType === "checkbox" || formType === "switch") {
+		return (
+			<Field
+				label={parameterLabel(parameter)}
+				description={description}
+				descriptionId={descriptionId}
+				error={error}
+				errorId={errorId}
+			>
+				<Checkbox
+					aria-label={parameterLabel(parameter)}
+					{...common}
+					checked={value === "true"}
+					onChange={(checked) => onChange(String(checked))}
+				>
+					{value === "true" ? "Enabled" : "Disabled"}
+				</Checkbox>
+			</Field>
+		);
+	}
+
+	if (formType === "multi-select") {
+		const selected = parseTagSelectValue(value) ?? [];
+		return (
+			<Field
+				label={parameterLabel(parameter)}
+				description={description}
+				descriptionId={descriptionId}
+				error={error}
+				errorId={errorId}
+			>
+				<div className="workspace-update-form__options" {...common}>
+					{options.map((option) => {
+						const optionValue = option.value.valid ? option.value.value : "";
+						const checked = selected.includes(optionValue);
+						return (
+							<Checkbox
+								key={`${option.name}-${optionValue}`}
+								disabled={disabled}
+								checked={checked}
+								onChange={(nextChecked) => {
+									const next = nextChecked
+										? [...selected, optionValue]
+										: selected.filter((item) => item !== optionValue);
+									onChange(JSON.stringify(next));
+								}}
+							>
+								<span>{option.name || optionValue}</span>
+								{option.description ? (
+									<span className="workspace-update-form__option-description">
+										{option.description}
+									</span>
+								) : null}
+							</Checkbox>
+						);
+					})}
+				</div>
+			</Field>
+		);
+	}
+
+	if (formType === "dropdown" || formType === "radio") {
+		const selectedIndex = options.findIndex(
+			(option) => (option.value.valid ? option.value.value : "") === value,
+		);
+		return (
+			<Field
+				label={parameterLabel(parameter)}
+				description={description}
+				descriptionId={descriptionId}
+				error={error}
+				errorId={errorId}
+			>
+				<Select
+					disabled={disabled}
+					value={selectedIndex >= 0 ? String(selectedIndex) : ""}
+					onValueChange={(index) => {
+						const option = options[Number(index)];
+						if (option) onChange(option.value.valid ? option.value.value : "");
+					}}
+				>
+					<SelectTrigger {...common} aria-label={parameterLabel(parameter)}>
+						<SelectValue placeholder="Select an option" />
+					</SelectTrigger>
+					<SelectContent>
+						{options.map((option, index) => (
+							<SelectItem
+								key={`${option.name}-${option.value.value}`}
+								value={String(index)}
+								description={option.description || undefined}
+							>
+								{option.name || (option.value.valid ? option.value.value : "")}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+			</Field>
+		);
+	}
+
+	const tagSelectInvalid =
+		formType === "tag-select" && !parseTagSelectValue(value)
+			? "Enter a JSON array of strings."
+			: undefined;
+	const numeric = formType === "slider" || parameter.type === "number";
+	return (
+		<Field
+			label={parameterLabel(parameter)}
+			htmlFor={id}
+			description={description}
+			descriptionId={descriptionId}
+			error={tagSelectInvalid ?? error}
+			errorId={errorId}
+		>
+			{formType === "textarea" ? (
+				<Textarea
+					{...common}
+					id={id}
+					value={value}
+					onChange={onChange}
+					placeholder={parameter.styling.placeholder}
+				/>
+			) : (
+				<Input
+					{...common}
+					id={id}
+					type={
+						parameter.styling.mask_input
+							? "password"
+							: numeric
+								? "number"
+								: "text"
+					}
+					value={value}
+					onChange={onChange}
+					placeholder={parameter.styling.placeholder}
+					{...(numeric ? range(parameter) : {})}
+				/>
+			)}
+		</Field>
+	);
+}
+
+export function WorkspaceUpdateForm({
+	state,
+	onCancel,
+	onChange,
+	onRetry,
+	onSubmit,
+}: WorkspaceUpdateFormProps): React.JSX.Element {
+	const [drafts, setDrafts] = useState<Record<string, string>>({});
+
+	const [lastInputs, setLastInputs] = useState(state.inputs);
+	if (lastInputs !== state.inputs) {
+		setLastInputs(state.inputs);
+		setDrafts((current) =>
+			Object.fromEntries(
+				Object.entries(current).filter(
+					([name, value]) =>
+						state.parameters.some((parameter) => parameter.name === name) &&
+						state.inputs[name] !== value,
+				),
+			),
+		);
+	}
+	const editing = Object.entries(drafts).some(
+		([name, value]) => state.inputs[name] !== value,
+	);
+	const invalidList = state.parameters.some(
+		(parameter) =>
+			(parameter.form_type === "tag-select" ||
+				(!parameter.form_type && parameter.type === "list(string)")) &&
+			!parseTagSelectValue(
+				drafts[parameter.name] ?? parameterValue(parameter, state.inputs),
+			),
+	);
+	const formDisabled =
+		state.status === "submitting" ||
+		(state.status === "error" && !state.canRetry);
+	const submitDisabled =
+		formDisabled ||
+		editing ||
+		invalidList ||
+		state.status !== "ready" ||
+		!state.canSubmit;
+
+	const change = (name: string, value: string) => {
+		setDrafts((current) => ({ ...current, [name]: value }));
+		onChange({ name, value });
+	};
+
+	if (state.status === "loading" && state.parameters.length === 0) {
+		return (
+			<LoadingState
+				label="Loading workspace parameters"
+				title="Loading parameters"
+			/>
+		);
+	}
+
+	if (state.status === "success") {
+		return (
+			<div className="workspace-update-form__terminal">
+				<h1>Workspace updated</h1>
+				<p>{state.workspaceName} is running the selected template version.</p>
+			</div>
+		);
+	}
+
+	if (state.status === "error" && state.parameters.length === 0) {
+		return (
+			<ErrorState
+				title="Could not prepare workspace update"
+				description={state.error}
+				action={
+					<div className="workspace-update-form__actions">
+						<Button variant="secondary" onClick={onCancel}>
+							Cancel
+						</Button>
+						{state.canRetry && <Button onClick={onRetry}>Try again</Button>}
+					</div>
+				}
+			/>
+		);
+	}
+
+	return (
+		<form
+			className="workspace-update-form"
+			onSubmit={(event) => {
+				event.preventDefault();
+				if (!submitDisabled) onSubmit(state.revision);
+			}}
+		>
+			<header className="workspace-update-form__header">
+				<h1>Update {state.workspaceName}</h1>
+				<p>Review the parameters before updating your workspace.</p>
+				<p>
+					Updating restarts the workspace, stops running processes, and may
+					discard unsaved work.
+				</p>
+				{state.status === "submitting" && (
+					<p role="status">
+						Closing this tab does not cancel a build that has already started.
+					</p>
+				)}
+			</header>
+			{state.error ? (
+				<div role="alert" className="workspace-update-form__error">
+					{state.error}
+				</div>
+			) : null}
+			{state.diagnostics.length > 0 ? (
+				<div role="alert" className="workspace-update-form__diagnostics">
+					{state.diagnostics.map((diagnostic) => (
+						<p
+							key={`${diagnostic.severity}-${diagnostic.summary}-${diagnostic.detail}`}
+						>
+							{[diagnostic.summary, diagnostic.detail]
+								.filter(Boolean)
+								.join(" — ")}
+						</p>
+					))}
+				</div>
+			) : null}
+			{state.status === "evaluating" ? (
+				<p className="workspace-update-form__evaluating" role="status">
+					Evaluating parameters…
+				</p>
+			) : null}
+			<div className="workspace-update-form__fields">
+				{state.parameters.map((parameter) => {
+					const locked =
+						state.locked.includes(parameter.name) ||
+						parameter.styling.disabled === true;
+					return (
+						<ParameterField
+							key={parameter.name}
+							parameter={parameter}
+							value={
+								drafts[parameter.name] ??
+								parameterValue(parameter, state.inputs)
+							}
+							disabled={formDisabled || locked}
+							onChange={(value) => change(parameter.name, value)}
+						/>
+					);
+				})}
+			</div>
+			<footer className="workspace-update-form__actions">
+				<Button
+					variant="secondary"
+					onClick={onCancel}
+					disabled={state.status === "submitting"}
+				>
+					Cancel
+				</Button>
+				{state.status === "error" && state.canRetry && (
+					<Button onClick={onRetry}>Try again</Button>
+				)}
+				<Button type="submit" disabled={submitDisabled}>
+					{state.status === "submitting" ? "Updating…" : "Update and Restart"}
+				</Button>
+			</footer>
+		</form>
+	);
+}
diff --git a/packages/workspace-update/src/css.d.ts b/packages/workspace-update/src/css.d.ts
new file mode 100644
index 0000000000..cbe652dbe0
--- /dev/null
+++ b/packages/workspace-update/src/css.d.ts
@@ -0,0 +1 @@
+declare module "*.css";
diff --git a/packages/workspace-update/src/hooks/useWorkspaceUpdate.ts b/packages/workspace-update/src/hooks/useWorkspaceUpdate.ts
new file mode 100644
index 0000000000..80ad471ca3
--- /dev/null
+++ b/packages/workspace-update/src/hooks/useWorkspaceUpdate.ts
@@ -0,0 +1,21 @@
+import {
+	buildApiHook,
+	WorkspaceUpdateApi,
+	type WorkspaceUpdateState,
+} from "@repo/shared";
+import { useIpc } from "@repo/webview-shared/react";
+import { useEffect, useState } from "react";
+
+/** Subscribes to the extension-owned update session and requests its initial state. */
+export function useWorkspaceUpdate() {
+	const api = buildApiHook(WorkspaceUpdateApi, useIpc());
+	const [state, setState] = useState<WorkspaceUpdateState | undefined>();
+
+	useEffect(() => {
+		const unsubscribe = api.onStateChanged(setState);
+		api.ready();
+		return unsubscribe;
+	}, []);
+
+	return { api, state };
+}
diff --git a/packages/workspace-update/src/index.css b/packages/workspace-update/src/index.css
new file mode 100644
index 0000000000..9f8e88e510
--- /dev/null
+++ b/packages/workspace-update/src/index.css
@@ -0,0 +1,76 @@
+@import "@repo/ui/tokens.css";
+@import "@repo/ui/codicon.css";
+
+:root {
+	color: var(--ui-foreground);
+	background: var(--ui-panel-background);
+	font-family: var(--ui-font-family);
+	font-size: var(--ui-font-size);
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	background: var(--ui-panel-background);
+}
+
+.workspace-update-app__loading,
+.workspace-update-form {
+	max-width: 760px;
+	margin: 0 auto;
+	padding: 24px;
+}
+
+.workspace-update-form {
+	display: grid;
+	gap: 20px;
+}
+.workspace-update-form__header h1,
+.workspace-update-form__terminal h1 {
+	margin: 0;
+	font-size: 1.5em;
+}
+.workspace-update-form__header p,
+.workspace-update-form__terminal p {
+	margin: 8px 0 0;
+	color: var(--ui-description-foreground);
+}
+.workspace-update-form__fields {
+	display: grid;
+	gap: 18px;
+}
+.workspace-update-form__actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+}
+.workspace-update-form__options {
+	display: grid;
+	gap: 8px;
+}
+.workspace-update-form__option-description {
+	display: block;
+	margin-left: 8px;
+	color: var(--ui-description-foreground);
+}
+.workspace-update-form__error,
+.workspace-update-form__diagnostics,
+.workspace-update-form__parameter-error {
+	color: var(--vscode-errorForeground);
+}
+.workspace-update-form__diagnostics p {
+	margin: 0;
+}
+.workspace-update-form__evaluating {
+	margin: 0;
+	color: var(--ui-description-foreground);
+}
+.workspace-update-form__terminal {
+	max-width: 760px;
+	margin: 72px auto;
+	padding: 24px;
+	text-align: center;
+}
diff --git a/packages/workspace-update/src/index.tsx b/packages/workspace-update/src/index.tsx
new file mode 100644
index 0000000000..c6dbba4305
--- /dev/null
+++ b/packages/workspace-update/src/index.tsx
@@ -0,0 +1,21 @@
+import { ErrorBoundary } from "@repo/webview-shared/react";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+import "./index.css";
+
+const root = document.getElementById("root");
+if (!root) {
+	throw new Error(
+		"Failed to find root element. The webview HTML must contain an element with id='root'.",
+	);
+}
+
+createRoot(root).render(
+	<StrictMode>
+		<ErrorBoundary>
+			<App />
+		</ErrorBoundary>
+	</StrictMode>,
+);
diff --git a/packages/workspace-update/storybook.preview.ts b/packages/workspace-update/storybook.preview.ts
new file mode 100644
index 0000000000..c01b6f9c8d
--- /dev/null
+++ b/packages/workspace-update/storybook.preview.ts
@@ -0,0 +1 @@
+import "./src/index.css";
diff --git a/packages/workspace-update/tsconfig.json b/packages/workspace-update/tsconfig.json
new file mode 100644
index 0000000000..edb289b062
--- /dev/null
+++ b/packages/workspace-update/tsconfig.json
@@ -0,0 +1,11 @@
+{
+	"extends": "../tsconfig.packages.json",
+	"compilerOptions": {
+		"paths": {
+			"@repo/shared": ["../shared/src"],
+			"@repo/ui": ["../ui/src"],
+			"@repo/webview-shared": ["../webview-shared/src"]
+		}
+	},
+	"include": ["src", "storybook.preview.ts"]
+}
diff --git a/packages/workspace-update/vite.config.ts b/packages/workspace-update/vite.config.ts
new file mode 100644
index 0000000000..4982de88ba
--- /dev/null
+++ b/packages/workspace-update/vite.config.ts
@@ -0,0 +1,6 @@
+import { createReactWebviewConfig } from "../webview-shared/createWebviewConfig.ts";
+
+export default createReactWebviewConfig(
+	"workspace-update",
+	import.meta.dirname,
+);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f37a02c0d..2456c3debd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -621,6 +621,49 @@ importers:
         specifier: 'catalog:'
         version: 6.0.3
 
+  packages/workspace-update:
+    dependencies:
+      '@repo/shared':
+        specifier: workspace:*
+        version: link:../shared
+      '@repo/ui':
+        specifier: workspace:*
+        version: link:../ui
+      '@repo/webview-shared':
+        specifier: workspace:*
+        version: link:../webview-shared
+      react:
+        specifier: 'catalog:'
+        version: 19.2.8
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.2.8(react@19.2.8)
+    devDependencies:
+      '@repo/storybook-utils':
+        specifier: workspace:*
+        version: link:../storybook-utils
+      '@rolldown/plugin-babel':
+        specifier: 'catalog:'
+        version: 0.2.3(@babel/core@7.29.7)(@babel/runtime@7.29.7)(rolldown@1.2.5)(vite@8.2.2)
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.2.18
+      '@types/react-dom':
+        specifier: 'catalog:'
+        version: 19.2.7(@types/react@19.2.18)
+      '@vitejs/plugin-react':
+        specifier: 'catalog:'
+        version: 6.1.1(@rolldown/plugin-babel@0.2.3)(babel-plugin-react-compiler@1.0.0)(vite@8.2.2)
+      babel-plugin-react-compiler:
+        specifier: 'catalog:'
+        version: 1.0.0
+      typescript:
+        specifier: 'catalog:'
+        version: 6.0.3
+      vite:
+        specifier: 'catalog:'
+        version: 8.2.2(@types/node@22.20.1)(esbuild@0.28.2)
+
   packages/workspaces:
     dependencies:
       '@repo/shared':
diff --git a/src/api/axios.d.ts b/src/api/axios.d.ts
index ac76309294..8da47c89ac 100644
--- a/src/api/axios.d.ts
+++ b/src/api/axios.d.ts
@@ -1,6 +1,11 @@
 import "axios";
 
 declare module "axios" {
+	interface AxiosRequestConfig {
+		/** Suppress request/response bodies and server error details containing parameter values. */
+		sensitive?: boolean;
+	}
+
 	interface InternalAxiosRequestConfig {
 		/** Set once the OAuth-refresh or interactive re-auth path has run. */
 		_retryAttempted?: boolean;
diff --git a/src/api/dynamicUpdateSession.ts b/src/api/dynamicUpdateSession.ts
new file mode 100644
index 0000000000..c7295af7e5
--- /dev/null
+++ b/src/api/dynamicUpdateSession.ts
@@ -0,0 +1,483 @@
+import { setTimeout as delayTimer } from "node:timers/promises";
+
+import type { AxiosInstance } from "axios";
+import type {
+	DynamicParametersResponse,
+	FriendlyDiagnostic,
+	PreviewParameter,
+	Workspace,
+	WorkspaceBuild,
+	WorkspaceBuildParameter,
+} from "coder/site/src/api/typesGenerated";
+
+import type { WorkspaceUpdateState } from "@repo/shared";
+
+import type { CoderApi } from "./coderApi";
+
+const EVALUATION_DEBOUNCE_MS = 250;
+const BUILD_POLL_INTERVAL_MS = 1_000;
+
+/**
+ * Keeps a dynamic-parameter update form in sync with Coder's authoritative
+ * evaluator. It does not create a build until submit succeeds its guards.
+ */
+export class DynamicUpdateSession {
+	public state: WorkspaceUpdateState;
+
+	private readonly axios: AxiosInstance;
+	private readonly sourceBuild: WorkspaceBuild;
+	private readonly targetVersionId: string;
+	private previousInputs: Readonly<Record<string, string>> = {};
+	private evaluationInputs: Readonly<Record<string, string>> = {};
+	private timer: ReturnType<typeof setTimeout> | undefined;
+	private evaluationController: AbortController | undefined;
+	private evaluationGeneration = 0;
+	private lastSuccessfulRevision = 0;
+	private retryAllowed = false;
+	private initialized = false;
+	private resetEphemeral = true;
+	private priorDiagnostics: readonly FriendlyDiagnostic[] = [];
+	private finished = false;
+	private readonly lifetime = new AbortController();
+	private disposed = false;
+	private submitting = false;
+
+	constructor(
+		client: CoderApi,
+		private readonly workspace: Workspace,
+		private readonly onState: (state: WorkspaceUpdateState) => void,
+	) {
+		this.axios = client.getAxiosInstance();
+		this.sourceBuild = workspace.latest_build;
+		this.targetVersionId = workspace.template_active_version_id;
+		this.state = {
+			workspaceName: `${workspace.owner_name}/${workspace.name}`,
+			templateVersionId: this.targetVersionId,
+			revision: 0,
+			status: "loading",
+			parameters: [],
+			inputs: {},
+			locked: [],
+			diagnostics: [],
+			canSubmit: false,
+		};
+	}
+
+	/** Loads saved parameters and evaluates the pinned target template version. */
+	public async initialize(): Promise<void> {
+		if (this.disposed) return;
+		this.publish({ status: "loading", error: undefined, canSubmit: false });
+		try {
+			const response = await this.axios.get<WorkspaceBuildParameter[]>(
+				`/api/v2/workspacebuilds/${this.sourceBuild.id}/parameters`,
+				{ sensitive: true },
+			);
+			if (this.disposed) return;
+
+			const previous = Object.fromEntries(
+				response.data.map((parameter) => [parameter.name, parameter.value]),
+			);
+			this.previousInputs = previous;
+			this.evaluationInputs = previous;
+			this.initialized = true;
+			await this.evaluate(previous, true);
+		} catch {
+			this.evaluationFailed();
+		}
+	}
+
+	/** Changes an editable value and evaluates it after a short debounce. */
+	public change(name: string, value: string): void {
+		if (
+			this.disposed ||
+			this.submitting ||
+			this.finished ||
+			this.state.locked.includes(name) ||
+			!this.state.parameters.some(
+				(parameter) =>
+					parameter.name === name &&
+					!parameter.styling.disabled &&
+					parameter.form_type !== "error",
+			)
+		) {
+			return;
+		}
+		this.evaluationGeneration++;
+		this.evaluationController?.abort();
+		this.evaluationInputs = { ...this.evaluationInputs, [name]: value };
+		this.publish({
+			inputs: { ...this.state.inputs, [name]: value },
+			status: "evaluating",
+			error: undefined,
+			canSubmit: false,
+		});
+		clearTimeout(this.timer);
+		this.timer = setTimeout(() => {
+			this.timer = undefined;
+			void this.evaluate(this.evaluationInputs, false);
+		}, EVALUATION_DEBOUNCE_MS);
+	}
+
+	/** Retries a failed evaluation. Build submission failures are intentionally not retried. */
+	public async retry(): Promise<void> {
+		if (
+			this.disposed ||
+			this.submitting ||
+			this.state.status !== "error" ||
+			!this.retryAllowed
+		) {
+			return;
+		}
+		this.retryAllowed = false;
+		if (!this.initialized) {
+			await this.initialize();
+			return;
+		}
+		this.publish({ status: "evaluating", error: undefined, canSubmit: false });
+		await this.evaluate(this.evaluationInputs, this.resetEphemeral);
+	}
+
+	/**
+	 * Stops a running source build, starts the exact target version, and waits for
+	 * its completion. A build failure is ambiguous, so the session cannot retry it.
+	 */
+	public async submit(revision: number): Promise<boolean> {
+		if (
+			this.disposed ||
+			this.submitting ||
+			revision !== this.lastSuccessfulRevision ||
+			!this.state.canSubmit
+		) {
+			return false;
+		}
+		this.submitting = true;
+		this.finished = true;
+		this.publish({ status: "submitting", error: undefined, canSubmit: false });
+		try {
+			const current = await this.getCurrentWorkspace();
+			if (
+				current.latest_build.id !== this.sourceBuild.id ||
+				current.template_active_version_id !== this.targetVersionId
+			) {
+				throw new SafeSubmitError(
+					"The workspace changed. Reopen the update form.",
+				);
+			}
+			const builds = await this.getWorkspaceBuilds();
+			if (builds[0]?.id !== this.sourceBuild.id) {
+				throw new SafeSubmitError(
+					"Another workspace build is in progress. Reopen the update form.",
+				);
+			}
+			if (
+				!["running", "stopped", "failed"].includes(current.latest_build.status)
+			) {
+				throw new SafeSubmitError(
+					"Wait for the current build to finish, then reopen the update form.",
+				);
+			}
+			if (current.latest_build.status === "running") {
+				const stopBuild = await this.postBuild({ transition: "stop" });
+				await this.waitForSucceededBuild(stopBuild);
+			}
+
+			const startBuild = await this.postBuild({
+				transition: "start",
+				template_version_id: this.targetVersionId,
+				rich_parameter_values: parameterValues(this.state.inputs),
+				reason: "vscode_connection",
+			});
+			await this.waitForSucceededBuild(startBuild);
+			const updated = await this.getCurrentWorkspace();
+			if (
+				updated.latest_build.id !== startBuild.id ||
+				updated.latest_build.template_version_id !== this.targetVersionId
+			) {
+				throw new SafeSubmitError(
+					"The workspace changed while the update was running. Reopen the update form.",
+				);
+			}
+			this.retryAllowed = false;
+			this.publish({ status: "success", error: undefined, canSubmit: false });
+			return true;
+		} catch (error) {
+			const message =
+				error instanceof SafeSubmitError
+					? error.message
+					: "The workspace update may have started. Reopen the update form before trying again.";
+			this.retryAllowed = false;
+			this.publish({ status: "error", error: message, canSubmit: false });
+			return false;
+		} finally {
+			this.submitting = false;
+		}
+	}
+
+	public dispose(): void {
+		this.disposed = true;
+		this.lifetime.abort();
+		this.previousInputs = {};
+		this.evaluationInputs = {};
+		this.priorDiagnostics = [];
+		this.state = { ...this.state, inputs: {}, parameters: [], diagnostics: [] };
+		clearTimeout(this.timer);
+		this.timer = undefined;
+		this.evaluationController?.abort();
+		this.evaluationController = undefined;
+	}
+
+	private async evaluate(
+		inputs: Readonly<Record<string, string>>,
+		stripPreviousEphemeral: boolean,
+	): Promise<void> {
+		if (this.disposed || this.submitting) return;
+		const generation = ++this.evaluationGeneration;
+		this.evaluationController?.abort();
+		const controller = new AbortController();
+		this.evaluationController = controller;
+		this.publish({ status: "evaluating", error: undefined, canSubmit: false });
+		try {
+			const result = await this.requestEvaluation(
+				inputs,
+				controller.signal,
+				generation,
+			);
+			if (
+				this.disposed ||
+				controller.signal.aborted ||
+				generation !== this.evaluationGeneration
+			) {
+				return;
+			}
+			if (stripPreviousEphemeral) {
+				this.priorDiagnostics = result.diagnostics;
+				const ephemeral = new Set(
+					result.parameters
+						.filter((parameter) => parameter.ephemeral)
+						.map((parameter) => parameter.name),
+				);
+				const withoutEphemeral = omitKeys(inputs, ephemeral);
+				this.evaluationInputs = withoutEphemeral;
+				if (
+					Object.keys(withoutEphemeral).length !== Object.keys(inputs).length
+				) {
+					this.resetEphemeral = false;
+					await this.evaluate(withoutEphemeral, false);
+					return;
+				}
+			}
+			this.resetEphemeral = false;
+			this.applyEvaluation(result, inputs);
+		} catch {
+			if (
+				!this.disposed &&
+				!controller.signal.aborted &&
+				generation === this.evaluationGeneration
+			) {
+				this.evaluationFailed();
+			}
+		} finally {
+			if (this.evaluationController === controller) {
+				this.evaluationController = undefined;
+			}
+		}
+	}
+
+	private async requestEvaluation(
+		inputs: Readonly<Record<string, string>>,
+		signal: AbortSignal,
+		generation: number,
+	): Promise<DynamicParametersResponse> {
+		const response = await this.axios.post<DynamicParametersResponse>(
+			`/api/v2/templateversions/${this.targetVersionId}/dynamic-parameters/evaluate`,
+			{ id: generation, owner_id: this.workspace.owner_id, inputs },
+			{ sensitive: true, signal },
+		);
+		return {
+			...response.data,
+			parameters: response.data.parameters ?? [],
+			diagnostics: response.data.diagnostics ?? [],
+		};
+	}
+
+	private applyEvaluation(
+		result: DynamicParametersResponse,
+		requestedInputs: Readonly<Record<string, string>>,
+	): void {
+		const parameters = result.parameters.map((parameter) => {
+			const previous = this.previousInputs[parameter.name];
+			const monotonic =
+				previous !== undefined &&
+				parameter.type === "number" &&
+				parameter.value.valid &&
+				parameter.validations.some(
+					(validation) =>
+						(validation.validation_monotonic === "increasing" &&
+							Number(parameter.value.value) < Number(previous)) ||
+						(validation.validation_monotonic === "decreasing" &&
+							Number(parameter.value.value) > Number(previous)),
+				);
+			return monotonic
+				? {
+						...parameter,
+						diagnostics: [
+							...parameter.diagnostics,
+							{
+								severity: "error" as const,
+								summary: "Value violates the template's monotonic constraint.",
+								detail:
+									"Choose a value that respects the direction allowed relative to the previous build.",
+								extra: { code: "monotonic" },
+							},
+						],
+					}
+				: parameter;
+		});
+		const diagnostics = [
+			...new Map(
+				[
+					...this.priorDiagnostics,
+					...allDiagnostics({ ...result, parameters }),
+				].map((diagnostic) => [JSON.stringify(diagnostic), diagnostic]),
+			).values(),
+		];
+		const locked = parameters.flatMap((parameter) =>
+			parameter.styling.disabled ||
+			(!parameter.mutable && Object.hasOwn(this.previousInputs, parameter.name))
+				? [parameter.name]
+				: [],
+		);
+		const inputs = inputsFromParameters(parameters, requestedInputs);
+		this.lastSuccessfulRevision++;
+		this.retryAllowed = false;
+		this.publish({
+			revision: this.lastSuccessfulRevision,
+			status: "ready",
+			parameters,
+			inputs,
+			locked,
+			diagnostics,
+			error: undefined,
+			canSubmit:
+				!hasErrors(diagnostics) &&
+				parameters.every(
+					(parameter) =>
+						parameter.form_type !== "error" && parameter.value.valid,
+				),
+		});
+	}
+
+	private evaluationFailed(): void {
+		this.retryAllowed = true;
+		this.publish({
+			status: "error",
+			error: "Could not evaluate workspace parameters. Try again.",
+			canSubmit: false,
+		});
+	}
+
+	private async getCurrentWorkspace(): Promise<Workspace> {
+		const response = await this.axios.get<Workspace>(
+			`/api/v2/users/${this.workspace.owner_name}/workspace/${this.workspace.name}`,
+			{ sensitive: true },
+		);
+		return response.data;
+	}
+
+	private async getWorkspaceBuilds(): Promise<readonly WorkspaceBuild[]> {
+		const response = await this.axios.get<WorkspaceBuild[]>(
+			`/api/v2/workspaces/${this.workspace.id}/builds?limit=1`,
+			{ sensitive: true },
+		);
+		return response.data;
+	}
+
+	private async postBuild(data: {
+		readonly transition: "start" | "stop";
+		readonly template_version_id?: string;
+		readonly rich_parameter_values?: readonly WorkspaceBuildParameter[];
+		readonly reason?: "vscode_connection";
+	}): Promise<WorkspaceBuild> {
+		this.lifetime.signal.throwIfAborted();
+		const response = await this.axios.post<WorkspaceBuild>(
+			`/api/v2/workspaces/${this.workspace.id}/builds`,
+			data,
+			{ sensitive: true },
+		);
+		return response.data;
+	}
+
+	private async waitForSucceededBuild(build: WorkspaceBuild): Promise<void> {
+		while (true) {
+			this.lifetime.signal.throwIfAborted();
+			const response = await this.axios.get<WorkspaceBuild>(
+				`/api/v2/users/${build.workspace_owner_name}/workspace/${build.workspace_name}/builds/${build.build_number}`,
+				{ sensitive: true },
+			);
+			this.lifetime.signal.throwIfAborted();
+			if (response.data.job.status === "succeeded") return;
+			if (["failed", "canceled"].includes(response.data.job.status)) {
+				throw new Error("Build did not succeed");
+			}
+			await delay(BUILD_POLL_INTERVAL_MS, this.lifetime.signal);
+		}
+	}
+
+	private publish(change: Partial<WorkspaceUpdateState>): void {
+		if (this.disposed) return;
+		this.state = { ...this.state, ...change, canRetry: this.retryAllowed };
+		this.onState(this.state);
+	}
+}
+
+class SafeSubmitError extends Error {}
+
+function inputsFromParameters(
+	parameters: readonly PreviewParameter[],
+	requested: Readonly<Record<string, string>>,
+): Readonly<Record<string, string>> {
+	const values: Record<string, string> = Object.create(null) as Record<
+		string,
+		string
+	>;
+	for (const parameter of parameters) {
+		if (Object.hasOwn(requested, parameter.name)) {
+			values[parameter.name] = requested[parameter.name];
+		} else if (parameter.value.valid) {
+			values[parameter.name] = parameter.value.value;
+		}
+	}
+	return values;
+}
+
+function allDiagnostics(
+	result: DynamicParametersResponse,
+): readonly FriendlyDiagnostic[] {
+	return [
+		...result.diagnostics,
+		...result.parameters.flatMap((parameter) => parameter.diagnostics),
+	];
+}
+
+function hasErrors(diagnostics: readonly FriendlyDiagnostic[]): boolean {
+	return diagnostics.some((diagnostic) => diagnostic.severity === "error");
+}
+
+function parameterValues(
+	inputs: Readonly<Record<string, string>>,
+): readonly WorkspaceBuildParameter[] {
+	return Object.entries(inputs).map(([name, value]) => ({ name, value }));
+}
+
+function omitKeys(
+	values: Readonly<Record<string, string>>,
+	keys: ReadonlySet<string>,
+): Readonly<Record<string, string>> {
+	return Object.fromEntries(
+		Object.entries(values).filter(([name]) => !keys.has(name)),
+	);
+}
+
+async function delay(milliseconds: number, signal: AbortSignal): Promise<void> {
+	await delayTimer(milliseconds, undefined, { signal });
+}
diff --git a/src/commands.ts b/src/commands.ts
index 3ce889b52e..cae17e063c 100644
--- a/src/commands.ts
+++ b/src/commands.ts
@@ -89,6 +89,7 @@ import type { LoginCoordinator, LoginMethod } from "./login/loginCoordinator";
 import type { TelemetryService } from "./telemetry/service";
 import type { NetcheckPanelFactory } from "./webviews/netcheck/netcheckPanelFactory";
 import type { SpeedtestPanelFactory } from "./webviews/speedtest/speedtestPanelFactory";
+import type { WorkspaceUpdatePanelFactory } from "./webviews/workspaceUpdate/workspaceUpdatePanelFactory";
 import type {
 	DuplicateWorkspaceIpc,
 	PongMessage,
@@ -163,6 +164,7 @@ export class Commands {
 	private readonly loginCoordinator: LoginCoordinator;
 	private readonly duplicateWorkspaceIpc: DuplicateWorkspaceIpc;
 	private readonly speedtestPanelFactory: SpeedtestPanelFactory;
+	private readonly workspaceUpdatePanelFactory: WorkspaceUpdatePanelFactory;
 	private readonly netcheckPanelFactory: NetcheckPanelFactory;
 	private readonly telemetryService: TelemetryService;
 	private readonly authTelemetry: AuthTelemetry;
@@ -200,6 +202,8 @@ export class Commands {
 		this.loginCoordinator = serviceContainer.getLoginCoordinator();
 		this.duplicateWorkspaceIpc = serviceContainer.getDuplicateWorkspaceIpc();
 		this.speedtestPanelFactory = serviceContainer.getSpeedtestPanelFactory();
+		this.workspaceUpdatePanelFactory =
+			serviceContainer.getWorkspaceUpdatePanelFactory();
 		this.netcheckPanelFactory = serviceContainer.getNetcheckPanelFactory();
 	}
 
@@ -1324,6 +1328,17 @@ export class Commands {
 			showUpToDate();
 			return;
 		}
+		if (this.workspace.template_use_classic_parameter_flow === false) {
+			const updated = await this.workspaceUpdatePanelFactory.show(
+				this.remoteWorkspaceClient,
+				this.workspace,
+			);
+			if (updated) {
+				await this.mementoManager.setStartupMode("start");
+				await vscode.commands.executeCommand("workbench.action.reloadWindow");
+			}
+			return;
+		}
 		const workspaceName = createWorkspaceIdentifier(this.workspace);
 		const operationTelemetry = new WorkspaceOperationTelemetry(
 			this.telemetryService,
diff --git a/src/core/container.ts b/src/core/container.ts
index 56cd0edf83..cd94dd358c 100644
--- a/src/core/container.ts
+++ b/src/core/container.ts
@@ -10,6 +10,7 @@ import { TelemetryService } from "../telemetry/service";
 import { LocalJsonlSink } from "../telemetry/sinks/localJsonlSink";
 import { NetcheckPanelFactory } from "../webviews/netcheck/netcheckPanelFactory";
 import { SpeedtestPanelFactory } from "../webviews/speedtest/speedtestPanelFactory";
+import { WorkspaceUpdatePanelFactory } from "../webviews/workspaceUpdate/workspaceUpdatePanelFactory";
 import { DuplicateWorkspaceIpc } from "../workspace/duplicateWorkspaceIpc";
 
 import { CliCredentialManager } from "./cliCredentialManager";
@@ -40,6 +41,7 @@ export class ServiceContainer implements vscode.Disposable {
 	private readonly duplicateWorkspaceIpc: DuplicateWorkspaceIpc;
 	private readonly oauthCallback: OAuthCallback;
 	private readonly speedtestPanelFactory: SpeedtestPanelFactory;
+	private readonly workspaceUpdatePanelFactory: WorkspaceUpdatePanelFactory;
 	private readonly netcheckPanelFactory: NetcheckPanelFactory;
 	private readonly telemetryService: TelemetryService;
 	private readonly commandManager: CommandManager;
@@ -124,6 +126,10 @@ export class ServiceContainer implements vscode.Disposable {
 			context.extensionUri,
 			this.logger,
 		);
+		this.workspaceUpdatePanelFactory = new WorkspaceUpdatePanelFactory(
+			context.extensionUri,
+			this.logger,
+		);
 		this.netcheckPanelFactory = new NetcheckPanelFactory(
 			context.extensionUri,
 			this.logger,
@@ -176,6 +182,10 @@ export class ServiceContainer implements vscode.Disposable {
 		return this.speedtestPanelFactory;
 	}
 
+	getWorkspaceUpdatePanelFactory(): WorkspaceUpdatePanelFactory {
+		return this.workspaceUpdatePanelFactory;
+	}
+
 	getNetcheckPanelFactory(): NetcheckPanelFactory {
 		return this.netcheckPanelFactory;
 	}
@@ -190,6 +200,7 @@ export class ServiceContainer implements vscode.Disposable {
 
 	/** Dispose logger last so telemetry teardown warnings still reach it. */
 	async dispose(): Promise<void> {
+		this.workspaceUpdatePanelFactory.dispose();
 		this.commandManager.dispose();
 		this.contextManager.dispose();
 		this.loginCoordinator.dispose();
diff --git a/src/logging/httpLogger.ts b/src/logging/httpLogger.ts
index f780342aa5..191ba7c2ec 100644
--- a/src/logging/httpLogger.ts
+++ b/src/logging/httpLogger.ts
@@ -48,8 +48,10 @@ export function logRequest(
 		`→ [request ${shortId(requestId)}] ${method} ${url} ${requestSize}`,
 		...buildExtraLogs(
 			config.headers,
-			config.data,
-			logLevel,
+			config.sensitive ? undefined : config.data,
+			config.sensitive
+				? Math.min(logLevel, HttpClientLogLevel.HEADERS)
+				: logLevel,
 			config.headerCommandKeys,
 		),
 	];
@@ -76,8 +78,10 @@ export function logResponse(
 		`← [request ${shortId(requestId)}] ${response.status} ${method} ${url} ${responseSize} ${time}`,
 		...buildExtraLogs(
 			response.headers,
-			response.data,
-			logLevel,
+			response.config.sensitive ? undefined : response.data,
+			response.config.sensitive
+				? Math.min(logLevel, HttpClientLogLevel.HEADERS)
+				: logLevel,
 			response.config.headerCommandKeys,
 		),
 	];
@@ -98,8 +102,10 @@ export function logError(
 		const config = error.config as RequestConfigWithMeta | undefined;
 		const { requestId, method, url, time } = parseConfig(config);
 
-		const errMsg = getErrorMessage(error, "");
-		const detail = getErrorDetail(error) ?? "";
+		const errMsg = config?.sensitive
+			? "Parameter request failed"
+			: getErrorMessage(error, "");
+		const detail = config?.sensitive ? "" : (getErrorDetail(error) ?? "");
 		const errorParts = [errMsg, detail]
 			.map((part) => part.trim())
 			.filter(Boolean);
@@ -118,8 +124,10 @@ export function logError(
 			logPrefix = `← [request ${shortId(requestId)}] ${error.response.status} ${method} ${url} ${time}`;
 			extraLines = buildExtraLogs(
 				error.response.headers,
-				error.response.data,
-				logLevel,
+				config?.sensitive ? undefined : error.response.data,
+				config?.sensitive
+					? Math.min(logLevel, HttpClientLogLevel.HEADERS)
+					: logLevel,
 				config?.headerCommandKeys,
 			);
 		} else {
@@ -129,8 +137,10 @@ export function logError(
 			logPrefix = `✗ [request ${shortId(requestId)}] ${method} ${url} ${time}`;
 			extraLines = buildExtraLogs(
 				error?.config?.headers ?? {},
-				error.config?.data,
-				logLevel,
+				config?.sensitive ? undefined : error.config?.data,
+				config?.sensitive
+					? Math.min(logLevel, HttpClientLogLevel.HEADERS)
+					: logLevel,
 				config?.headerCommandKeys,
 			);
 		}
diff --git a/src/remote/workspaceStateMachine.ts b/src/remote/workspaceStateMachine.ts
index fc4242d967..a42963a32a 100644
--- a/src/remote/workspaceStateMachine.ts
+++ b/src/remote/workspaceStateMachine.ts
@@ -58,7 +58,7 @@ export class WorkspaceStateMachine implements vscode.Disposable {
 		private readonly binaryPath: string,
 		private readonly featureSet: FeatureSet,
 		private readonly cliAuth: CliAuth,
-		container: ServiceContainer,
+		private readonly container: ServiceContainer,
 	) {
 		this.logger = container.getLogger();
 		this.terminal = new TerminalOutputChannel("Coder: Workspace Build");
@@ -302,6 +302,14 @@ export class WorkspaceStateMachine implements vscode.Disposable {
 		this.logger.info(`Updating ${workspaceName}`, {
 			status: workspace.latest_build.status,
 		});
+		if (workspace.template_use_classic_parameter_flow === false) {
+			const updated = await this.container
+				.getWorkspaceUpdatePanelFactory()
+				.show(this.workspaceClient, workspace);
+			if (!updated) throw new WorkspaceUpdateCancelledError();
+			this.workspace = await this.workspaceClient.getWorkspace(workspace.id);
+			return this.workspace;
+		}
 		try {
 			const parameters = await this.operationTelemetry.traceParametersPrompt(
 				() => collectUpdateParameters(this.workspaceClient, workspace),
diff --git a/src/webviews/workspaceUpdate/workspaceUpdatePanelFactory.ts b/src/webviews/workspaceUpdate/workspaceUpdatePanelFactory.ts
new file mode 100644
index 0000000000..37505304c2
--- /dev/null
+++ b/src/webviews/workspaceUpdate/workspaceUpdatePanelFactory.ts
@@ -0,0 +1,179 @@
+import * as vscode from "vscode";
+
+import {
+	buildCommandHandlers,
+	buildRequestHandlers,
+	WorkspaceUpdateApi,
+} from "@repo/shared";
+
+import { DynamicUpdateSession } from "../../api/dynamicUpdateSession";
+import {
+	dispatchWebviewMessage,
+	onWhileVisible,
+	notifyWebview,
+} from "../dispatch";
+import { getWebviewHtml } from "../html";
+
+import type { Workspace } from "coder/site/src/api/typesGenerated";
+
+import type { CoderApi } from "../../api/coderApi";
+import type { Logger } from "../../logging/logger";
+
+interface UpdatePanel {
+	readonly panel: vscode.WebviewPanel;
+	readonly result: Promise<boolean>;
+}
+
+/** Owns in-memory update forms; closing a form cancels any unsubmitted update. */
+export class WorkspaceUpdatePanelFactory implements vscode.Disposable {
+	private readonly panels = new Map<CoderApi, Map<string, UpdatePanel>>();
+
+	constructor(
+		private readonly extensionUri: vscode.Uri,
+		private readonly logger: Logger,
+	) {}
+
+	show(client: CoderApi, workspace: Workspace): Promise<boolean> {
+		let clientPanels = this.panels.get(client);
+		if (!clientPanels) {
+			clientPanels = new Map();
+			this.panels.set(client, clientPanels);
+		}
+		const existing = clientPanels.get(workspace.id);
+		if (existing) {
+			existing.panel.reveal();
+			return existing.result;
+		}
+
+		const panel = vscode.window.createWebviewPanel(
+			"coder.workspaceUpdate",
+			`Update: ${workspace.owner_name}/${workspace.name}`,
+			vscode.ViewColumn.One,
+			{
+				enableScripts: true,
+				localResourceRoots: [
+					vscode.Uri.joinPath(
+						this.extensionUri,
+						"dist",
+						"webviews",
+						"workspace-update",
+					),
+				],
+			},
+		);
+		let finish!: (success: boolean) => void;
+		let closed = false;
+		const readyTimeout = setTimeout(() => {
+			vscode.window.showErrorMessage(
+				"The workspace update editor could not load. Please try again.",
+			);
+			panel.dispose();
+		}, 30_000);
+		const result = new Promise<boolean>((resolve) => {
+			finish = resolve;
+		});
+		const session = new DynamicUpdateSession(client, workspace, (state) => {
+			notifyWebview(panel.webview, WorkspaceUpdateApi.stateChanged, state);
+		});
+		const sendState = () =>
+			notifyWebview(
+				panel.webview,
+				WorkspaceUpdateApi.stateChanged,
+				session.state,
+			);
+		const commands = buildCommandHandlers(WorkspaceUpdateApi, {
+			ready: () => {
+				clearTimeout(readyTimeout);
+				sendState();
+			},
+			change: ({ name, value }) => {
+				if (typeof name === "string" && typeof value === "string")
+					session.change(name, value);
+			},
+			retry: () => session.retry(),
+			submit: async ({ revision }) => {
+				if (!Number.isSafeInteger(revision)) return;
+				if ((await session.submit(revision)) && !closed) {
+					finish(true);
+					panel.dispose();
+				}
+			},
+			cancel: () => {
+				panel.dispose();
+			},
+		});
+		const requests = buildRequestHandlers(WorkspaceUpdateApi, {});
+		const subscriptions = [
+			onWhileVisible(panel, panel.onDidChangeViewState, sendState),
+			onWhileVisible(
+				panel,
+				vscode.window.onDidChangeActiveColorTheme,
+				sendState,
+			),
+			panel.webview.onDidReceiveMessage((message: unknown) => {
+				if (!isUpdateMessage(message)) return;
+				void dispatchWebviewMessage(
+					message,
+					{ commands, requests },
+					panel.webview,
+					{ logger: this.logger },
+				);
+			}),
+		];
+		clientPanels.set(workspace.id, { panel, result });
+		panel.onDidDispose(() => {
+			closed = true;
+			clearTimeout(readyTimeout);
+			session.dispose();
+			for (const subscription of subscriptions) subscription.dispose();
+			clientPanels.delete(workspace.id);
+			if (clientPanels.size === 0) this.panels.delete(client);
+			finish(false);
+		});
+		panel.webview.html = getWebviewHtml(
+			panel.webview,
+			this.extensionUri,
+			"workspace-update",
+			"Update Workspace",
+		);
+		void session.initialize();
+		return result;
+	}
+
+	dispose(): void {
+		for (const panels of this.panels.values()) {
+			for (const { panel } of panels.values()) panel.dispose();
+		}
+		this.panels.clear();
+	}
+}
+
+function isUpdateMessage(message: unknown): boolean {
+	if (!message || typeof message !== "object" || !("method" in message))
+		return false;
+	if (message.method === WorkspaceUpdateApi.change.method) {
+		return (
+			"params" in message &&
+			!!message.params &&
+			typeof message.params === "object" &&
+			"name" in message.params &&
+			typeof message.params.name === "string" &&
+			"value" in message.params &&
+			typeof message.params.value === "string"
+		);
+	}
+	if (message.method === WorkspaceUpdateApi.submit.method) {
+		return (
+			"params" in message &&
+			!!message.params &&
+			typeof message.params === "object" &&
+			"revision" in message.params &&
+			Number.isSafeInteger(message.params.revision)
+		);
+	}
+	return [
+		WorkspaceUpdateApi.ready.method,
+		WorkspaceUpdateApi.retry.method,
+		WorkspaceUpdateApi.cancel.method,
+	].some((method) => method === message.method);
+}
diff --git a/test/unit/api/dynamicUpdateSession.test.ts b/test/unit/api/dynamicUpdateSession.test.ts
new file mode 100644
index 0000000000..13b734d6e8
--- /dev/null
+++ b/test/unit/api/dynamicUpdateSession.test.ts
@@ -0,0 +1,587 @@
+import axiosClient from "axios";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { DynamicUpdateSession } from "@/api/dynamicUpdateSession";
+
+import type {
+	DynamicParametersResponse,
+	PreviewParameter,
+	Workspace,
+	WorkspaceBuild,
+	WorkspaceBuildParameter,
+} from "coder/site/src/api/typesGenerated";
+
+import type { CoderApi } from "@/api/coderApi";
+
+function build(overrides: Partial<WorkspaceBuild> = {}): WorkspaceBuild {
+	return {
+		id: "source-build",
+		created_at: "2026-01-01T00:00:00Z",
+		updated_at: "2026-01-01T00:00:00Z",
+		workspace_id: "workspace-id",
+		workspace_name: "workspace",
+		workspace_owner_id: "owner-id",
+		workspace_owner_name: "owner",
+		template_version_id: "old-version",
+		template_version_name: "old",
+		build_number: 1,
+		transition: "start",
+		initiator_id: "user-id",
+		initiator_name: "user",
+		job: { status: "succeeded" } as WorkspaceBuild["job"],
+		reason: "dashboard",
+		resources: [],
+		status: "running",
+		daily_cost: 0,
+		template_version_preset_id: null,
+		...overrides,
+	};
+}
+
+function workspace(latest_build = build()): Workspace {
+	return {
+		id: "workspace-id",
+		owner_id: "owner-id",
+		owner_name: "owner",
+		name: "workspace",
+		template_active_version_id: "target-version",
+		latest_build,
+	} as Workspace;
+}
+
+function parameter(
+	name: string,
+	overrides: Partial<PreviewParameter> = {},
+): PreviewParameter {
+	return {
+		name,
+		display_name: name,
+		description: "",
+		type: "string",
+		form_type: "",
+		styling: {},
+		mutable: true,
+		default_value: { valid: false, value: "" },
+		icon: "",
+		options: [],
+		validations: [],
+		required: false,
+		order: 0,
+		ephemeral: false,
+		value: { valid: true, value: "" },
+		diagnostics: [],
+		...overrides,
+	};
+}
+
+function evaluation(
+	parameters: readonly PreviewParameter[],
+): DynamicParametersResponse {
+	return { id: 0, diagnostics: [], parameters };
+}
+
+function response<T>(data: T) {
+	return { data };
+}
+
+function context(latestBuild = build()) {
+	const axios = axiosClient.create();
+	vi.spyOn(axios, "get");
+	vi.spyOn(axios, "post");
+	const client = {
+		getAxiosInstance: () => axios,
+	} as Pick<CoderApi, "getAxiosInstance">;
+	const states: Array<DynamicUpdateSession["state"]> = [];
+	const session = new DynamicUpdateSession(
+		client as CoderApi,
+		workspace(latestBuild),
+		(state) => states.push(state),
+	);
+	return {
+		axios: { get: vi.mocked(axios.get), post: vi.mocked(axios.post) },
+		session,
+		states,
+	};
+}
+
+afterEach(() => vi.useRealTimers());
+
+describe("DynamicUpdateSession", () => {
+	it("removes stored ephemeral values after the first evaluation and locks existing immutable values", async () => {
+		const { axios, session } = context();
+		axios.get.mockResolvedValueOnce(
+			response<WorkspaceBuildParameter[]>([
+				{ name: "immutable", value: "saved" },
+				{ name: "token", value: "old-secret" },
+			]),
+		);
+		axios.post
+			.mockResolvedValueOnce(
+				response(
+					evaluation([
+						parameter("immutable", {
+							mutable: false,
+							value: { valid: true, value: "saved" },
+						}),
+						parameter("token", {
+							ephemeral: true,
+							value: { valid: true, value: "old-secret" },
+						}),
+						parameter("new-immutable", {
+							mutable: false,
+							value: { valid: true, value: "choose" },
+						}),
+					]),
+				),
+			)
+			.mockResolvedValueOnce(
+				response(
+					evaluation([
+						parameter("immutable", {
+							mutable: false,
+							value: { valid: true, value: "saved" },
+						}),
+						parameter("token", { ephemeral: true }),
+						parameter("new-immutable", {
+							mutable: false,
+							value: { valid: true, value: "choose" },
+						}),
+					]),
+				),
+			);
+
+		await session.initialize();
+
+		expect(axios.get).toHaveBeenCalledWith(
+			"/api/v2/workspacebuilds/source-build/parameters",
+			{ sensitive: true },
+		);
+		expect(axios.post.mock.calls[0]?.[1]).toMatchObject({
+			id: 1,
+			owner_id: "owner-id",
+			inputs: { immutable: "saved", token: "old-secret" },
+		});
+		expect(axios.post.mock.calls[1]?.[1]).toMatchObject({
+			id: 2,
+			inputs: { immutable: "saved" },
+		});
+		expect(session.state).toMatchObject({
+			status: "ready",
+			locked: ["immutable"],
+			inputs: { immutable: "saved", "new-immutable": "choose" },
+			canSubmit: true,
+		});
+	});
+
+	it("uses local generations because the REST evaluator always responds with id zero", async () => {
+		vi.useFakeTimers();
+		const { axios, session } = context();
+		axios.get.mockResolvedValue(response<WorkspaceBuildParameter[]>([]));
+		axios.post.mockResolvedValue(response(evaluation([parameter("region")])));
+		await session.initialize();
+
+		let resolveFirst:
+			| ((
+					value: ReturnType<typeof response<DynamicParametersResponse>>,
+			  ) => void)
+			| undefined;
+		let resolveSecond:
+			| ((
+					value: ReturnType<typeof response<DynamicParametersResponse>>,
+			  ) => void)
+			| undefined;
+		axios.post
+			.mockImplementationOnce(
+				() =>
+					new Promise((resolve) => {
+						resolveFirst = resolve;
+					}),
+			)
+			.mockImplementationOnce(
+				() =>
+					new Promise((resolve) => {
+						resolveSecond = resolve;
+					}),
+			);
+
+		session.change("region", "first");
+		await vi.advanceTimersByTimeAsync(250);
+		session.change("region", "second");
+		await vi.advanceTimersByTimeAsync(250);
+		resolveSecond?.(
+			response(
+				evaluation([
+					parameter("region", { value: { valid: true, value: "second" } }),
+				]),
+			),
+		);
+		await Promise.resolve();
+		resolveFirst?.(
+			response(
+				evaluation([
+					parameter("region", { value: { valid: true, value: "first" } }),
+				]),
+			),
+		);
+		await Promise.resolve();
+
+		expect(session.state.inputs).toEqual({ region: "second" });
+		expect(session.state.revision).toBe(2);
+	});
+
+	it("cancels evaluation and does not publish after disposal", async () => {
+		vi.useFakeTimers();
+		const { axios, session, states } = context();
+		axios.get.mockResolvedValue(response<WorkspaceBuildParameter[]>([]));
+		axios.post.mockResolvedValue(response(evaluation([parameter("region")])));
+		await session.initialize();
+		axios.post.mockImplementationOnce(
+			(_url, _body, config) =>
+				new Promise((resolve, reject) => {
+					(config as { signal: AbortSignal }).signal.addEventListener(
+						"abort",
+						() => reject(new Error("aborted")),
+					);
+					setTimeout(
+						() => resolve(response(evaluation([parameter("region")]))),
+						1_000,
+					);
+				}),
+		);
+
+		session.change("region", "later");
+		await vi.advanceTimersByTimeAsync(250);
+		const beforeDispose = states.length;
+		session.dispose();
+		await vi.advanceTimersByTimeAsync(1_000);
+
+		expect(states).toHaveLength(beforeDispose);
+		expect(axios.post.mock.calls.at(-1)?.[2]).toMatchObject({
+			sensitive: true,
+		});
+	});
+
+	it("blocks submit for diagnostics and never creates a build", async () => {
+		const { axios, session } = context();
+		axios.get.mockResolvedValue(response<WorkspaceBuildParameter[]>([]));
+		axios.post.mockResolvedValue(
+			response({
+				...evaluation([parameter("region")]),
+				diagnostics: [
+					{ severity: "error", summary: "Invalid", detail: "bad", extra: {} },
+				],
+			}),
+		);
+		await session.initialize();
+
+		expect(await session.submit(session.state.revision)).toBe(false);
+		expect(axios.post).toHaveBeenCalledTimes(1);
+	});
+
+	it("stops only a running source build, starts the pinned target version, and verifies success", async () => {
+		vi.useFakeTimers();
+		const source = build({ status: "running" });
+		const stop = build({
+			id: "stop",
+			build_number: 2,
+			transition: "stop",
+			job: { status: "pending" } as WorkspaceBuild["job"],
+		});
+		const start = build({
+			id: "start",
+			build_number: 3,
+			template_version_id: "target-version",
+			job: { status: "pending" } as WorkspaceBuild["job"],
+		});
+		const { axios, session } = context(source);
+		axios.get
+			.mockResolvedValueOnce(
+				response<WorkspaceBuildParameter[]>([
+					{ name: "region", value: "west" },
+				]),
+			)
+			.mockResolvedValueOnce(response(workspace(source)))
+			.mockResolvedValueOnce(response([source]))
+			.mockResolvedValueOnce(
+				response({
+					...stop,
+					job: { status: "succeeded" } as WorkspaceBuild["job"],
+				}),
+			)
+			.mockResolvedValueOnce(
+				response({
+					...start,
+					job: { status: "succeeded" } as WorkspaceBuild["job"],
+				}),
+			)
+			.mockResolvedValueOnce(
+				response(
+					workspace({
+						...start,
+						job: { status: "succeeded" } as WorkspaceBuild["job"],
+					}),
+				),
+			);
+		axios.post
+			.mockResolvedValueOnce(
+				response(
+					evaluation([
+						parameter("region", { value: { valid: true, value: "west" } }),
+					]),
+				),
+			)
+			.mockResolvedValueOnce(response(stop))
+			.mockResolvedValueOnce(response(start));
+		await session.initialize();
+
+		const submitting = session.submit(session.state.revision);
+		await vi.runAllTimersAsync();
+		expect(await submitting).toBe(true);
+		expect(axios.post.mock.calls.slice(1)).toEqual([
+			[
+				"/api/v2/workspaces/workspace-id/builds",
+				{ transition: "stop" },
+				{ sensitive: true },
+			],
+			[
+				"/api/v2/workspaces/workspace-id/builds",
+				{
+					transition: "start",
+					template_version_id: "target-version",
+					rich_parameter_values: [{ name: "region", value: "west" }],
+					reason: "vscode_connection",
+				},
+				{ sensitive: true },
+			],
+		]);
+		expect(session.state.status).toBe("success");
+	});
+
+	it("rejects a stale revision and concurrent build before creating side effects", async () => {
+		const source = build({ status: "stopped" });
+		const { axios, session } = context(source);
+		axios.get
+			.mockResolvedValueOnce(response<WorkspaceBuildParameter[]>([]))
+			.mockResolvedValueOnce(
+				response(workspace(build({ id: "new-build", status: "running" }))),
+			);
+		axios.post.mockResolvedValueOnce(
+			response(evaluation([parameter("region")])),
+		);
+		await session.initialize();
+
+		expect(await session.submit(session.state.revision - 1)).toBe(false);
+		expect(await session.submit(session.state.revision)).toBe(false);
+		expect(session.state).toMatchObject({
+			status: "error",
+			canSubmit: false,
+			error: "The workspace changed. Reopen the update form.",
+		});
+		expect(axios.post).toHaveBeenCalledTimes(1);
+	});
+});
+
+describe("dynamic update safety", () => {
+	it("invalidates an evaluation immediately when an edit arrives during the debounce window", async () => {
+		vi.useFakeTimers();
+		const { axios, session } = context();
+		axios.get.mockResolvedValue(response<WorkspaceBuildParameter[]>([]));
+		axios.post.mockResolvedValue(response(evaluation([parameter("region")])));
+		await session.initialize();
+		let resolveOld!: (
+			result: ReturnType<typeof response<DynamicParametersResponse>>,
+		) => void;
+		axios.post.mockImplementationOnce(
+			() =>
+				new Promise((resolve) => {
+					resolveOld = resolve;
+				}),
+		);
+		session.change("region", "first");
+		await vi.advanceTimersByTimeAsync(250);
+		session.change("region", "second");
+		resolveOld(
+			response(
+				evaluation([
+					parameter("region", { value: { valid: true, value: "first" } }),
+				]),
+			),
+		);
+		await vi.advanceTimersByTimeAsync(0);
+		expect(session.state.inputs.region).toBe("second");
+		expect(session.state.status).toBe("evaluating");
+		expect(session.state.canSubmit).toBe(false);
+		expect(await session.submit(session.state.revision)).toBe(false);
+		session.dispose();
+	});
+
+	it("retries loading saved values rather than evaluating empty inputs after initialization fails", async () => {
+		const { axios, session } = context();
+		axios.get
+			.mockRejectedValueOnce(new Error("network"))
+			.mockResolvedValueOnce(response([{ name: "region", value: "saved" }]));
+		axios.post.mockResolvedValue(response(evaluation([parameter("region")])));
+		await session.initialize();
+		expect(session.state.canRetry).toBe(true);
+		await session.retry();
+		expect(axios.get).toHaveBeenCalledTimes(2);
+		expect(axios.post.mock.calls[0][1]).toMatchObject({
+			inputs: { region: "saved" },
+		});
+	});
+
+	it("blocks immutable and disabled edits but allows first-use immutable values", async () => {
+		const { axios, session } = context();
+		axios.get.mockResolvedValue(
+			response([{ name: "existing", value: "saved" }]),
+		);
+		axios.post.mockResolvedValue(
+			response(
+				evaluation([
+					parameter("existing", { mutable: false }),
+					parameter("introduced", { mutable: false }),
+					parameter("disabled", { styling: { disabled: true } }),
+				]),
+			),
+		);
+		await session.initialize();
+		session.change("existing", "changed");
+		session.change("disabled", "changed");
+		expect(session.state.inputs).toMatchObject({
+			existing: "saved",
+			disabled: "",
+		});
+		session.change("introduced", "choice");
+		expect(session.state.inputs.introduced).toBe("choice");
+		session.dispose();
+	});
+
+	it("retains fatal prior-state diagnostics even if edited inputs render successfully", async () => {
+		vi.useFakeTimers();
+		const { axios, session } = context();
+		axios.get.mockResolvedValue(response([]));
+		axios.post
+			.mockResolvedValueOnce(
+				response({
+					...evaluation([parameter("region")]),
+					diagnostics: [
+						{
+							severity: "error",
+							summary: "Incompatible historical values",
+							detail: "Contact the template administrator",
+							extra: { code: "invalid" },
+						},
+					],
+				}),
+			)
+			.mockResolvedValueOnce(response(evaluation([parameter("region")])));
+		await session.initialize();
+		session.change("region", "valid");
+		await vi.advanceTimersByTimeAsync(250);
+		expect(session.state.canSubmit).toBe(false);
+		expect(session.state.diagnostics).toContainEqual(
+			expect.objectContaining({ summary: "Incompatible historical values" }),
+		);
+	});
+
+	it("prevents a monotonic value decrease before stopping the workspace", async () => {
+		const { axios, session } = context();
+		axios.get.mockResolvedValue(response([{ name: "size", value: "10" }]));
+		axios.post.mockResolvedValue(
+			response(
+				evaluation([
+					parameter("size", {
+						type: "number",
+						value: { valid: true, value: "5" },
+						validations: [
+							{
+								validation_monotonic: "increasing",
+								validation_error: "",
+								validation_min: null,
+								validation_max: null,
+								validation_regex: null,
+							},
+						],
+					}),
+				]),
+			),
+		);
+		await session.initialize();
+		expect(session.state.canSubmit).toBe(false);
+		expect(session.state.parameters[0].diagnostics).toContainEqual(
+			expect.objectContaining({ extra: { code: "monotonic" } }),
+		);
+		expect(await session.submit(session.state.revision)).toBe(false);
+	});
+
+	it.each(["failed", "canceled"] as const)(
+		"does not start a build after the stop job is %s",
+		async (status) => {
+			const { axios, session } = context();
+			axios.get
+				.mockResolvedValueOnce(response([]))
+				.mockResolvedValueOnce(response(workspace()))
+				.mockResolvedValueOnce(response([build()]))
+				.mockResolvedValueOnce(
+					response(build({ job: { ...build().job, status } })),
+				);
+			axios.post
+				.mockResolvedValueOnce(response(evaluation([])))
+				.mockResolvedValueOnce(response(build({ id: "stop" })));
+			await session.initialize();
+			expect(await session.submit(session.state.revision)).toBe(false);
+			expect(axios.post).toHaveBeenCalledTimes(2);
+			expect(session.state.canRetry).toBe(false);
+			await session.retry();
+			expect(axios.post).toHaveBeenCalledTimes(2);
+		},
+	);
+
+	it("does not start after the form is closed while a stop request is in flight", async () => {
+		const { axios, session } = context();
+		axios.get
+			.mockResolvedValueOnce(response([]))
+			.mockResolvedValueOnce(response(workspace()))
+			.mockResolvedValueOnce(response([build()]));
+		let resolveStop!: (
+			result: ReturnType<typeof response<WorkspaceBuild>>,
+		) => void;
+		axios.post
+			.mockResolvedValueOnce(response(evaluation([])))
+			.mockImplementationOnce(
+				() =>
+					new Promise((resolve) => {
+						resolveStop = resolve;
+					}),
+			);
+		await session.initialize();
+		const submitting = session.submit(session.state.revision);
+		await vi.waitFor(() => expect(axios.post).toHaveBeenCalledTimes(2));
+		session.dispose();
+		resolveStop(response(build({ id: "stop" })));
+		expect(await submitting).toBe(false);
+		expect(axios.post).toHaveBeenCalledTimes(2);
+		expect(session.state.inputs).toEqual({});
+	});
+
+	it("does not automatically retry an ambiguous start request or accept edits afterward", async () => {
+		vi.useFakeTimers();
+		const source = build({ status: "stopped" });
+		const { axios, session } = context(source);
+		axios.get
+			.mockResolvedValueOnce(response([]))
+			.mockResolvedValueOnce(response(workspace(source)))
+			.mockResolvedValueOnce(response([source]));
+		axios.post
+			.mockResolvedValueOnce(response(evaluation([parameter("region")])))
+			.mockRejectedValueOnce(new Error("secret server detail"));
+		await session.initialize();
+		expect(await session.submit(session.state.revision)).toBe(false);
+		expect(session.state.error).not.toContain("secret server detail");
+		session.change("region", "retry");
+		await session.retry();
+		await vi.advanceTimersByTimeAsync(500);
+		expect(axios.post).toHaveBeenCalledTimes(2);
+		expect(session.state.canSubmit).toBe(false);
+	});
+});
diff --git a/test/unit/command/updateWorkspace.telemetry.test.ts b/test/unit/command/updateWorkspace.telemetry.test.ts
index a1776668c9..9b51e228a0 100644
--- a/test/unit/command/updateWorkspace.telemetry.test.ts
+++ b/test/unit/command/updateWorkspace.telemetry.test.ts
@@ -19,6 +19,7 @@ function setup() {
 	const { sink, service } = createTelemetryHarness();
 	const mementoManager = new MementoManager(new InMemoryMemento());
 	const logger = createMockLogger();
+	const showUpdate = vi.fn().mockResolvedValue(false);
 	const container = {
 		getTelemetryService: () => service,
 		getLogger: () => logger,
@@ -29,6 +30,7 @@ function setup() {
 		getLoginCoordinator: () => ({}),
 		getDuplicateWorkspaceIpc: () => ({}),
 		getSpeedtestPanelFactory: () => ({}),
+		getWorkspaceUpdatePanelFactory: () => ({ show: showUpdate }),
 		getNetcheckPanelFactory: () => ({}),
 	} as unknown as ServiceContainer;
 	const commands = new Commands(
@@ -36,9 +38,12 @@ function setup() {
 		{} as CoderApi,
 		{} as DeploymentManager,
 	);
-	commands.workspace = workspace({ outdated: true });
+	commands.workspace = workspace({
+		outdated: true,
+		template_use_classic_parameter_flow: true,
+	});
 	commands.remoteWorkspaceClient = {} as CoderApi;
-	return { commands, sink };
+	return { commands, sink, showUpdate };
 }
 
 describe("Commands.updateWorkspace", () => {
@@ -81,3 +86,33 @@ describe("Commands.updateWorkspace", () => {
 		);
 	});
 });
+
+describe("dynamic workspace updates", () => {
+	beforeEach(() => vi.resetAllMocks());
+	it("opens the parameter editor without reloading or the classic confirmation", async () => {
+		const { commands, showUpdate } = setup();
+		commands.workspace = workspace({
+			outdated: true,
+			template_use_classic_parameter_flow: false,
+		});
+		await commands.updateWorkspace();
+		expect(showUpdate).toHaveBeenCalledWith(
+			commands.remoteWorkspaceClient,
+			commands.workspace,
+		);
+		expect(vscode.window.showWarningMessage).not.toHaveBeenCalled();
+		expect(vscode.commands.executeCommand).not.toHaveBeenCalled();
+	});
+	it("reloads only after a successful dynamic update", async () => {
+		const { commands, showUpdate } = setup();
+		commands.workspace = workspace({
+			outdated: true,
+			template_use_classic_parameter_flow: false,
+		});
+		showUpdate.mockResolvedValue(true);
+		await commands.updateWorkspace();
+		expect(vscode.commands.executeCommand).toHaveBeenCalledWith(
+			"workbench.action.reloadWindow",
+		);
+	});
+});
diff --git a/test/unit/commands.netcheck.test.ts b/test/unit/commands.netcheck.test.ts
index 9704f5da00..0c728c7a14 100644
--- a/test/unit/commands.netcheck.test.ts
+++ b/test/unit/commands.netcheck.test.ts
@@ -38,6 +38,7 @@ function setup(options: { extensionBaseUrl?: string } = {}) {
 		getLoginCoordinator: () => ({}),
 		getDuplicateWorkspaceIpc: () => ({}),
 		getSpeedtestPanelFactory: () => ({}),
+		getWorkspaceUpdatePanelFactory: () => ({ show: vi.fn() }),
 		getNetcheckPanelFactory: () => ({}) as NetcheckPanelFactory,
 	} as unknown as ServiceContainer;
 
diff --git a/test/unit/commands.supportBundle.test.ts b/test/unit/commands.supportBundle.test.ts
index d473b2f764..0dfb65e53d 100644
--- a/test/unit/commands.supportBundle.test.ts
+++ b/test/unit/commands.supportBundle.test.ts
@@ -97,6 +97,7 @@ function setup(options: { cliVersion?: string } = {}) {
 		getLoginCoordinator: () => ({}),
 		getDuplicateWorkspaceIpc: () => ({}),
 		getSpeedtestPanelFactory: () => ({}),
+		getWorkspaceUpdatePanelFactory: () => ({ show: vi.fn() }),
 		getNetcheckPanelFactory: () => ({}),
 	} as unknown as ServiceContainer;
 
diff --git a/test/unit/commands.telemetry.test.ts b/test/unit/commands.telemetry.test.ts
index ffb0d1c892..7b9de04958 100644
--- a/test/unit/commands.telemetry.test.ts
+++ b/test/unit/commands.telemetry.test.ts
@@ -119,6 +119,10 @@ function setup(options: SetupOptions = {}) {
 		getLoginCoordinator: () => loginCoordinator,
 		getDuplicateWorkspaceIpc: () => ({}) as DuplicateWorkspaceIpc,
 		getSpeedtestPanelFactory: () => ({}) as SpeedtestPanelFactory,
+		getWorkspaceUpdatePanelFactory: () =>
+			Object.create(null) as ReturnType<
+				ServiceContainer["getWorkspaceUpdatePanelFactory"]
+			>,
 		getNetcheckPanelFactory: () => ({}) as NetcheckPanelFactory,
 	} as ServiceContainer;
 
diff --git a/test/unit/logging/httpLogger.test.ts b/test/unit/logging/httpLogger.test.ts
index 84ccb9485b..6e73b36683 100644
--- a/test/unit/logging/httpLogger.test.ts
+++ b/test/unit/logging/httpLogger.test.ts
@@ -1,4 +1,4 @@
-import { AxiosError, type AxiosHeaders, type AxiosResponse } from "axios";
+import { AxiosError, AxiosHeaders, type AxiosResponse } from "axios";
 import { describe, expect, it, vi } from "vitest";
 
 import {
@@ -200,3 +200,54 @@ describe("REST HTTP Logger", () => {
 		});
 	});
 });
+
+describe("sensitive parameter requests", () => {
+	it("keeps parameter values out of request, response and error logs at BODY level", () => {
+		const logger = createMockLogger();
+		const config: RequestConfigWithMeta = {
+			url: "/api/v2/templateversions/version/dynamic-parameters/evaluate",
+			method: "post",
+			headers: new AxiosHeaders(),
+			sensitive: true,
+			data: { inputs: { password: "secret-value" } },
+		};
+		const response: AxiosResponse = {
+			config,
+			status: 400,
+			statusText: "Bad Request",
+			headers: {},
+			data: {
+				message: "secret-value",
+				detail: "secret-value",
+				value: "secret-value",
+			},
+		};
+		logRequest(logger, config, HttpClientLogLevel.BODY);
+		logResponse(logger, response, HttpClientLogLevel.BODY);
+		logError(
+			logger,
+			new AxiosError(
+				"secret-value",
+				"ERR_BAD_REQUEST",
+				config,
+				undefined,
+				response,
+			),
+			HttpClientLogLevel.BODY,
+		);
+		logError(
+			logger,
+			new AxiosError("secret-value", "ERR_NETWORK", config),
+			HttpClientLogLevel.BODY,
+		);
+		expect(JSON.stringify(vi.mocked(logger.trace).mock.calls)).not.toContain(
+			"secret-value",
+		);
+		expect(JSON.stringify(vi.mocked(logger.error).mock.calls)).not.toContain(
+			"secret-value",
+		);
+		expect(logger.error).toHaveBeenCalledWith(
+			expect.stringContaining("Parameter request failed"),
+		);
+	});
+});
diff --git a/test/unit/remote/workspaceStateMachine.test.ts b/test/unit/remote/workspaceStateMachine.test.ts
index cc1e970ecf..57e8699bef 100644
--- a/test/unit/remote/workspaceStateMachine.test.ts
+++ b/test/unit/remote/workspaceStateMachine.test.ts
@@ -13,6 +13,7 @@ import {
 } from "@/api/workspace";
 import { maybeAskAgent } from "@/promptUtils";
 import { WorkspaceStateMachine } from "@/remote/workspaceStateMachine";
+import { WorkspaceUpdatePanelFactory } from "@/webviews/workspaceUpdate/workspaceUpdatePanelFactory";
 
 import {
 	agent as createAgent,
@@ -89,6 +90,7 @@ function runningWorkspace(
 	agentOverrides: Partial<WorkspaceAgent> = {},
 ): Workspace {
 	return createWorkspace({
+		template_use_classic_parameter_flow: true,
 		latest_build: {
 			status: "running",
 			resources: [createResource({ agents: [createAgent(agentOverrides)] })],
@@ -200,7 +202,10 @@ describe("WorkspaceStateMachine", () => {
 		for (const status of ["stopped", "failed"] as const) {
 			it(`auto-starts '${status}' workspace`, async () => {
 				const { sm, progress } = setup("start");
-				const ws = createWorkspace({ latest_build: { status } });
+				const ws = createWorkspace({
+					template_use_classic_parameter_flow: true,
+					latest_build: { status },
+				});
 
 				expect(await sm.processWorkspace(ws, progress)).toBe(false);
 				expect(startWorkspace).toHaveBeenCalledOnce();
@@ -209,7 +214,10 @@ describe("WorkspaceStateMachine", () => {
 
 		it("triggers update instead of start when mode is 'update'", async () => {
 			const { sm, progress } = setup("update");
-			const ws = createWorkspace({ latest_build: { status: "stopped" } });
+			const ws = createWorkspace({
+				template_use_classic_parameter_flow: true,
+				latest_build: { status: "stopped" },
+			});
 
 			expect(await sm.processWorkspace(ws, progress)).toBe(false);
 			expect(updateWorkspace).toHaveBeenCalledOnce();
@@ -218,7 +226,10 @@ describe("WorkspaceStateMachine", () => {
 		it("falls through to the agent check after an update completes", async () => {
 			vi.mocked(updateWorkspace).mockResolvedValueOnce(runningWorkspace());
 			const { sm, progress } = setup("update");
-			const ws = createWorkspace({ latest_build: { status: "stopped" } });
+			const ws = createWorkspace({
+				template_use_classic_parameter_flow: true,
+				latest_build: { status: "stopped" },
+			});
 
 			expect(await sm.processWorkspace(ws, progress)).toBe(true);
 			expect(updateWorkspace).toHaveBeenCalledOnce();
@@ -230,7 +241,10 @@ describe("WorkspaceStateMachine", () => {
 				new Error("template not found"),
 			);
 			const { sm, progress } = setup("update");
-			const ws = createWorkspace({ latest_build: { status: "stopped" } });
+			const ws = createWorkspace({
+				template_use_classic_parameter_flow: true,
+				latest_build: { status: "stopped" },
+			});
 
 			expect(await sm.processWorkspace(ws, progress)).toBe(false);
 			expect(updateWorkspace).toHaveBeenCalledOnce();
@@ -245,7 +259,10 @@ describe("WorkspaceStateMachine", () => {
 				new WorkspaceUpdateCancelledError(),
 			);
 			const { sm, progress } = setup("update");
-			const ws = createWorkspace({ latest_build: { status: "stopped" } });
+			const ws = createWorkspace({
+				template_use_classic_parameter_flow: true,
+				latest_build: { status: "stopped" },
+			});
 
 			expect(await sm.processWorkspace(ws, progress)).toBe(false);
 			expect(updateWorkspace).not.toHaveBeenCalled();
@@ -256,7 +273,10 @@ describe("WorkspaceStateMachine", () => {
 		it("prompts user when mode is 'none' and user picks 'Start'", async () => {
 			const { sm, progress, userInteraction } = setup("none");
 			userInteraction.setResponse(CONFIRM_MESSAGE, "Start");
-			const ws = createWorkspace({ latest_build: { status: "stopped" } });
+			const ws = createWorkspace({
+				template_use_classic_parameter_flow: true,
+				latest_build: { status: "stopped" },
+			});
 
 			expect(await sm.processWorkspace(ws, progress)).toBe(false);
 			expect(startWorkspace).toHaveBeenCalledOnce();
@@ -267,6 +287,7 @@ describe("WorkspaceStateMachine", () => {
 			const { sm, progress, userInteraction } = setup("none");
 			userInteraction.setResponse(CONFIRM_MESSAGE, "Update and Start");
 			const ws = createWorkspace({
+				template_use_classic_parameter_flow: true,
 				outdated: true,
 				latest_build: { status: "stopped" },
 			});
@@ -285,6 +306,7 @@ describe("WorkspaceStateMachine", () => {
 			const { sm, progress, userInteraction } = setup("none");
 			userInteraction.setResponse(CONFIRM_MESSAGE, "Start");
 			const ws = createWorkspace({
+				template_use_classic_parameter_flow: true,
 				outdated: false,
 				latest_build: { status: "stopped" },
 			});
@@ -299,7 +321,10 @@ describe("WorkspaceStateMachine", () => {
 		it("throws when user declines the prompt", async () => {
 			const { sm, progress, userInteraction } = setup("none");
 			userInteraction.setResponse(CONFIRM_MESSAGE, undefined);
-			const ws = createWorkspace({ latest_build: { status: "stopped" } });
+			const ws = createWorkspace({
+				template_use_classic_parameter_flow: true,
+				latest_build: { status: "stopped" },
+			});
 
 			await expect(sm.processWorkspace(ws, progress)).rejects.toThrow(
 				"Workspace start cancelled",
@@ -311,7 +336,10 @@ describe("WorkspaceStateMachine", () => {
 		for (const status of ["pending", "starting", "stopping"] as const) {
 			it(`returns false and streams build logs for '${status}'`, async () => {
 				const { sm, progress } = setup();
-				const ws = createWorkspace({ latest_build: { status } });
+				const ws = createWorkspace({
+					template_use_classic_parameter_flow: true,
+					latest_build: { status },
+				});
 
 				expect(await sm.processWorkspace(ws, progress)).toBe(false);
 				expect(streamBuildLogs).toHaveBeenCalledOnce();
@@ -328,7 +356,10 @@ describe("WorkspaceStateMachine", () => {
 		] as const) {
 			it(`throws for '${status}'`, async () => {
 				const { sm, progress } = setup();
-				const ws = createWorkspace({ latest_build: { status } });
+				const ws = createWorkspace({
+					template_use_classic_parameter_flow: true,
+					latest_build: { status },
+				});
 				await expect(sm.processWorkspace(ws, progress)).rejects.toThrow(status);
 			});
 		}
@@ -400,7 +431,10 @@ describe("WorkspaceStateMachine", () => {
 
 	describe("telemetry", () => {
 		const stoppedWorkspace = () =>
-			createWorkspace({ latest_build: { status: "stopped" } });
+			createWorkspace({
+				template_use_classic_parameter_flow: true,
+				latest_build: { status: "stopped" },
+			});
 
 		it.each<{
 			name: string;
@@ -453,6 +487,7 @@ describe("WorkspaceStateMachine", () => {
 			await sm.processWorkspace(runningWorkspace(), progress);
 
 			const wsNoAgents = createWorkspace({
+				template_use_classic_parameter_flow: true,
 				latest_build: { status: "running", resources: [] },
 			});
 			await expect(sm.processWorkspace(wsNoAgents, progress)).rejects.toThrow(
@@ -464,7 +499,10 @@ describe("WorkspaceStateMachine", () => {
 	describe("progress reporting", () => {
 		it("reports starting for stopped workspace", async () => {
 			const { sm, progress } = setup("start");
-			const ws = createWorkspace({ latest_build: { status: "stopped" } });
+			const ws = createWorkspace({
+				template_use_classic_parameter_flow: true,
+				latest_build: { status: "stopped" },
+			});
 			await sm.processWorkspace(ws, progress);
 
 			expect(progress.report).toHaveBeenCalledWith(
@@ -506,3 +544,66 @@ describe("WorkspaceStateMachine", () => {
 		});
 	});
 });
+
+describe("dynamic update connection flow", () => {
+	function dynamicSetup(success: boolean) {
+		const updated = runningWorkspace();
+		const show = vi.fn().mockResolvedValue(success);
+		const client = { getWorkspace: vi.fn().mockResolvedValue(updated) } as Pick<
+			CoderApi,
+			"getWorkspace"
+		>;
+		const container = createMockServiceContainer();
+		const factory = new WorkspaceUpdatePanelFactory(
+			vscode.Uri.file("/ext"),
+			createMockLogger(),
+		);
+		vi.spyOn(factory, "show").mockImplementation(show);
+		container.getWorkspaceUpdatePanelFactory = () => factory;
+		const sm = new WorkspaceStateMachine(
+			DEFAULT_PARTS,
+			client as CoderApi,
+			"update",
+			"/usr/bin/coder",
+			{} as FeatureSet,
+			{
+				store: "cli",
+				url: "https://test.coder.com",
+				useKeyring: undefined,
+				allowRedirects: false,
+			},
+			container,
+		);
+		return { sm, show, client, updated };
+	}
+
+	it("uses the parameter editor and does not run a second CLI update", async () => {
+		vi.clearAllMocks();
+		const { sm, show } = dynamicSetup(true);
+		const ws = createWorkspace({
+			template_use_classic_parameter_flow: false,
+			latest_build: { status: "stopped" },
+		});
+		await sm.processWorkspace(ws, new MockProgress());
+		expect(show).toHaveBeenCalledOnce();
+		expect(collectUpdateParameters).not.toHaveBeenCalled();
+		expect(updateWorkspace).not.toHaveBeenCalled();
+		expect(startWorkspace).not.toHaveBeenCalled();
+		sm.dispose();
+	});
+
+	it("does not start the old template when the dynamic editor is canceled", async () => {
+		vi.clearAllMocks();
+		const { sm } = dynamicSetup(false);
+		const ws = createWorkspace({
+			template_use_classic_parameter_flow: false,
+			latest_build: { status: "stopped" },
+		});
+		await expect(sm.processWorkspace(ws, new MockProgress())).rejects.toThrow(
+			WorkspaceUpdateCancelledError,
+		);
+		expect(startWorkspace).not.toHaveBeenCalled();
+		expect(updateWorkspace).not.toHaveBeenCalled();
+		sm.dispose();
+	});
+});
diff --git a/test/unit/webviews/workspaceUpdate/workspaceUpdatePanelFactory.test.ts b/test/unit/webviews/workspaceUpdate/workspaceUpdatePanelFactory.test.ts
new file mode 100644
index 0000000000..6cdc6cf47b
--- /dev/null
+++ b/test/unit/webviews/workspaceUpdate/workspaceUpdatePanelFactory.test.ts
@@ -0,0 +1,163 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import * as vscode from "vscode";
+
+import { DynamicUpdateSession } from "@/api/dynamicUpdateSession";
+import { WorkspaceUpdatePanelFactory } from "@/webviews/workspaceUpdate/workspaceUpdatePanelFactory";
+
+import { workspace } from "@repo/mocks";
+import { WorkspaceUpdateApi, type WorkspaceUpdateState } from "@repo/shared";
+
+import {
+	createMockLogger,
+	createMockWebviewPanel,
+	setActiveColorTheme,
+} from "../../../mocks/testHelpers";
+
+import type { CoderApi } from "@/api/coderApi";
+
+vi.mock("@/api/dynamicUpdateSession");
+
+function setup() {
+	const built = createMockWebviewPanel(
+		"coder.workspaceUpdate",
+		"Update workspace",
+		vscode.ViewColumn.One,
+		{},
+	);
+	vi.mocked(vscode.window.createWebviewPanel).mockReturnValue(built.panel);
+	const state: WorkspaceUpdateState = {
+		workspaceName: "test",
+		templateVersionId: "version",
+		revision: 1,
+		status: "ready",
+		parameters: [],
+		inputs: {},
+		locked: [],
+		diagnostics: [],
+		canSubmit: true,
+	};
+	const session = Object.assign(
+		Object.create(DynamicUpdateSession.prototype) as DynamicUpdateSession,
+		{
+			state,
+			initialize: vi.fn().mockResolvedValue(undefined),
+			change: vi.fn(),
+			retry: vi.fn().mockResolvedValue(undefined),
+			submit: vi.fn().mockResolvedValue(true),
+			dispose: vi.fn(),
+		},
+	);
+	vi.mocked(DynamicUpdateSession).mockImplementation(function () {
+		return session;
+	});
+	const factory = new WorkspaceUpdatePanelFactory(
+		vscode.Uri.file("/ext"),
+		createMockLogger(),
+	);
+	const client = {} as CoderApi;
+	const ws = workspace();
+	const result = factory.show(client, ws);
+	return { ...built, session, factory, client, ws, result };
+}
+
+describe("WorkspaceUpdatePanelFactory", () => {
+	beforeEach(() => {
+		vi.resetAllMocks();
+	});
+
+	it("resends its in-memory state when the webview is ready", () => {
+		const { hooks, session, panel } = setup();
+		hooks.sendFromWebview({ method: WorkspaceUpdateApi.ready.method });
+		expect(hooks.postedMessages).toContainEqual({
+			type: WorkspaceUpdateApi.stateChanged.method,
+			data: session.state,
+		});
+		expect(panel.webview.html).toContain("workspace-update/index.js");
+		panel.dispose();
+	});
+
+	it("reveals the same workspace form rather than starting another session", () => {
+		const { factory, client, ws, panel, result } = setup();
+		expect(factory.show(client, ws)).toBe(result);
+		expect(vscode.window.createWebviewPanel).toHaveBeenCalledTimes(1);
+		panel.dispose();
+	});
+
+	it("cancels without submitting when the editor is closed", async () => {
+		const { panel, session, result } = setup();
+		panel.dispose();
+		expect(await result).toBe(false);
+		expect(session.submit).not.toHaveBeenCalled();
+		expect(session.dispose).toHaveBeenCalledOnce();
+	});
+
+	it("routes edits and submits the acknowledged revision", async () => {
+		const { hooks, session, result } = setup();
+		hooks.sendFromWebview({
+			method: WorkspaceUpdateApi.change.method,
+			params: { name: "region", value: "west" },
+		});
+		expect(session.change).toHaveBeenCalledWith("region", "west");
+		hooks.sendFromWebview({
+			method: WorkspaceUpdateApi.submit.method,
+			params: { revision: 1 },
+		});
+		expect(await result).toBe(true);
+		expect(session.submit).toHaveBeenCalledWith(1);
+	});
+
+	it("keeps a failed update open for the user to inspect", async () => {
+		const { hooks, panel, session } = setup();
+		session.submit.mockResolvedValue(false);
+		hooks.sendFromWebview({
+			method: WorkspaceUpdateApi.submit.method,
+			params: { revision: 1 },
+		});
+		await vi.waitFor(() => expect(session.submit).toHaveBeenCalled());
+		expect(session.dispose).not.toHaveBeenCalled();
+		panel.dispose();
+	});
+});
+
+describe("update editor lifecycle", () => {
+	it("resends state on visibility and theme changes", () => {
+		const { hooks, panel } = setup();
+		hooks.setVisible(false);
+		const count = hooks.postedMessages.length;
+		setActiveColorTheme(vscode.ColorThemeKind.Dark);
+		expect(hooks.postedMessages).toHaveLength(count);
+		hooks.setVisible(true);
+		expect(hooks.postedMessages).toHaveLength(count + 1);
+		setActiveColorTheme(vscode.ColorThemeKind.Light);
+		expect(hooks.postedMessages).toHaveLength(count + 2);
+		panel.dispose();
+	});
+
+	it("ignores malformed messages rather than logging parameter data", () => {
+		const { hooks, panel, session } = setup();
+		hooks.sendFromWebview({ secret: "do not log" });
+		hooks.sendFromWebview({
+			method: WorkspaceUpdateApi.change.method,
+			params: null,
+		});
+		hooks.sendFromWebview({
+			method: WorkspaceUpdateApi.submit.method,
+			params: { revision: "1" },
+		});
+		expect(session.change).not.toHaveBeenCalled();
+		expect(session.submit).not.toHaveBeenCalled();
+		panel.dispose();
+	});
+
+	it("settles a form whose renderer never loads", async () => {
+		vi.useFakeTimers();
+		try {
+			const { result, session } = setup();
+			await vi.advanceTimersByTimeAsync(30_000);
+			expect(await result).toBe(false);
+			expect(session.dispose).toHaveBeenCalled();
+		} finally {
+			vi.useRealTimers();
+		}
+	});
+});
diff --git a/test/webview/workspace-update/WorkspaceUpdateForm.test.ts b/test/webview/workspace-update/WorkspaceUpdateForm.test.ts
new file mode 100644
index 0000000000..babf24a641
--- /dev/null
+++ b/test/webview/workspace-update/WorkspaceUpdateForm.test.ts
@@ -0,0 +1,266 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createElement } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+	parseTagSelectValue,
+	WorkspaceUpdateForm,
+} from "../../../packages/workspace-update/src/components/WorkspaceUpdateForm";
+
+import type { WorkspaceUpdateState } from "@repo/shared";
+function parameter(
+	name: string,
+	form_type: WorkspaceUpdateState["parameters"][number]["form_type"],
+	options: ReadonlyArray<{
+		name: string;
+		value: string;
+	}> = [],
+): WorkspaceUpdateState["parameters"][number] {
+	return {
+		name,
+		display_name: name,
+		description: `${name} description`,
+		type: form_type === "slider" ? "number" : "string",
+		form_type,
+		styling: {},
+		mutable: true,
+		default_value: { valid: false, value: "" },
+		value: { valid: false, value: "" },
+		icon: "",
+		options: options.map((option) => ({
+			...option,
+			description: "",
+			value: { valid: true, value: option.value },
+			icon: "",
+		})),
+		validations: [],
+		required: false,
+		order: 0,
+		ephemeral: false,
+		diagnostics: [],
+	};
+}
+function state(
+	overrides: Partial<WorkspaceUpdateState> = {},
+): WorkspaceUpdateState {
+	return {
+		workspaceName: "dev",
+		templateVersionId: "version-1",
+		revision: 4,
+		status: "ready",
+		parameters: [parameter("region", "input")],
+		inputs: { region: "east" },
+		locked: [],
+		diagnostics: [],
+		canSubmit: true,
+		...overrides,
+	};
+}
+function renderForm(current = state()) {
+	const onChange = vi.fn();
+	const onSubmit = vi.fn();
+	const onCancel = vi.fn();
+	const onRetry = vi.fn();
+	const view = render(
+		createElement(WorkspaceUpdateForm, {
+			state: current,
+			onChange: onChange,
+			onSubmit: onSubmit,
+			onCancel: onCancel,
+			onRetry: onRetry,
+		}),
+	);
+	return { ...view, onChange, onSubmit, onCancel, onRetry };
+}
+describe("WorkspaceUpdateForm", () => {
+	it("keeps a local draft until the extension reflects it and submits the reflected revision", () => {
+		const initial = state();
+		const { onChange, onSubmit, rerender } = renderForm(initial);
+		const input = screen.getByRole("textbox", { name: "region" });
+		fireEvent.change(input, { target: { value: "west" } });
+		expect(input).toHaveValue("west");
+		expect(onChange).toHaveBeenCalledWith({ name: "region", value: "west" });
+		expect(
+			screen.getByRole("button", { name: "Update and Restart" }),
+		).toBeDisabled();
+		rerender(
+			createElement(WorkspaceUpdateForm, {
+				state: { ...initial, revision: 5, inputs: { region: "west" } },
+				onChange: onChange,
+				onSubmit: onSubmit,
+				onCancel: vi.fn(),
+				onRetry: vi.fn(),
+			}),
+		);
+		fireEvent.click(screen.getByRole("button", { name: "Update and Restart" }));
+		expect(onSubmit).toHaveBeenCalledWith(5);
+	});
+	it("does not overwrite a newer local draft with a stale extension notification", () => {
+		const { onChange, rerender } = renderForm();
+		const input = screen.getByRole("textbox", { name: "region" });
+		fireEvent.change(input, { target: { value: "west" } });
+		rerender(
+			createElement(WorkspaceUpdateForm, {
+				state: state({
+					revision: 5,
+					inputs: { region: "east" },
+					status: "evaluating",
+				}),
+				onChange: onChange,
+				onSubmit: vi.fn(),
+				onCancel: vi.fn(),
+				onRetry: vi.fn(),
+			}),
+		);
+		expect(screen.getByRole("textbox", { name: "region" })).toHaveValue("west");
+	});
+	it("maps radios to Select, switches to Checkbox, sliders to number input, and multi-select to checkboxes", () => {
+		renderForm(
+			state({
+				inputs: {
+					region: "east",
+					enabled: "true",
+					cores: "2",
+					features: '["metrics"]',
+				},
+				parameters: [
+					parameter("region", "radio", [
+						{ name: "East", value: "east" },
+						{ name: "West", value: "west" },
+					]),
+					parameter("enabled", "switch"),
+					parameter("cores", "slider"),
+					parameter("features", "multi-select", [
+						{ name: "Metrics", value: "metrics" },
+						{ name: "Tracing", value: "tracing" },
+					]),
+				],
+			}),
+		);
+		expect(
+			screen.getByRole("combobox", { name: "region" }),
+		).toBeInTheDocument();
+		expect(screen.getByRole("checkbox", { name: "enabled" })).toBeChecked();
+		expect(screen.getByRole("spinbutton", { name: "cores" })).toHaveValue(2);
+		expect(screen.getByRole("checkbox", { name: /Metrics/ })).toBeChecked();
+		expect(screen.getByRole("checkbox", { name: /Tracing/ })).not.toBeChecked();
+	});
+	it("uses a password input for masked values and disables locked fields", () => {
+		renderForm(
+			state({
+				inputs: { token: "secret", frozen: "value" },
+				locked: ["frozen"],
+				parameters: [
+					{ ...parameter("token", "input"), styling: { mask_input: true } },
+					parameter("frozen", "input"),
+				],
+			}),
+		);
+		expect(screen.getByLabelText("token")).toHaveAttribute("type", "password");
+		expect(screen.getByRole("textbox", { name: "frozen" })).toBeDisabled();
+	});
+	it("renders server diagnostics as safe text and preserves tag-select values as JSON", () => {
+		renderForm(
+			state({
+				inputs: { tags: '["team,blue"]' },
+				parameters: [
+					{
+						...parameter("tags", "tag-select"),
+						description: "<strong>Do not render HTML</strong>",
+						diagnostics: [
+							{
+								severity: "error",
+								summary: "Tags are invalid",
+								detail: "",
+								extra: { code: "invalid" },
+							},
+						],
+					},
+				],
+			}),
+		);
+		expect(screen.getByText("Tags are invalid")).toBeInTheDocument();
+		expect(
+			screen.getByText(/<strong>Do not render HTML<\/strong>/),
+		).toBeInTheDocument();
+		expect(
+			screen.queryByText("Do not render HTML", { selector: "strong" }),
+		).toBeNull();
+		expect(screen.getByRole("textbox", { name: "tags" })).toHaveValue(
+			'["team,blue"]',
+		);
+	});
+	it("renders terminal success without actions", () => {
+		renderForm(state({ status: "success" }));
+		expect(
+			screen.getByRole("heading", { name: "Workspace updated" }),
+		).toBeInTheDocument();
+		expect(screen.queryByRole("button")).toBeNull();
+	});
+});
+describe("parseTagSelectValue", () => {
+	it("accepts arbitrary strings including commas and rejects lossy input", () => {
+		expect(parseTagSelectValue('["team,blue", "prod"]')).toEqual([
+			"team,blue",
+			"prod",
+		]);
+		expect(parseTagSelectValue("team,blue,prod")).toBeUndefined();
+	});
+});
+
+describe("dynamic form review regressions", () => {
+	it("allows a new immutable value while keeping existing immutable values locked", () => {
+		renderForm(
+			state({
+				parameters: [
+					{ ...parameter("existing", "input"), mutable: false },
+					{
+						...parameter("introduced", "input"),
+						mutable: false,
+						required: true,
+					},
+				],
+				locked: ["existing"],
+				inputs: { existing: "saved", introduced: "" },
+			}),
+		);
+		expect(screen.getByRole("textbox", { name: "existing" })).toBeDisabled();
+		expect(
+			screen.getByRole("textbox", { name: "introduced (required)" }),
+		).toBeEnabled();
+	});
+
+	it("rejects invalid tag arrays even when the previous server state was valid", () => {
+		renderForm(
+			state({
+				parameters: [parameter("tags", "tag-select")],
+				inputs: { tags: "not an array" },
+			}),
+		);
+		expect(
+			screen.getByRole("button", { name: "Update and Restart" }),
+		).toBeDisabled();
+	});
+
+	it("provides retry after evaluation errors but not ambiguous build errors", () => {
+		const { rerender } = renderForm(
+			state({ status: "error", error: "Network error", canRetry: true }),
+		);
+		expect(screen.getByRole("button", { name: "Try again" })).toBeEnabled();
+		rerender(
+			createElement(WorkspaceUpdateForm, {
+				state: state({
+					status: "error",
+					error: "Check build status",
+					canRetry: false,
+				}),
+				onChange: vi.fn(),
+				onCancel: vi.fn(),
+				onRetry: vi.fn(),
+				onSubmit: vi.fn(),
+			}),
+		);
+		expect(screen.queryByRole("button", { name: "Try again" })).toBeNull();
+		expect(screen.getByRole("textbox", { name: "region" })).toBeDisabled();
+	});
+});