From cac958e094f9dbc7ef2fdd2e0622b424889553e6 Mon Sep 17 00:00:00 2001
From: Zbigniew Sobiecki <zbigniew@sobiecki.name>
Date: Sat, 18 Apr 2026 19:21:45 +0000
Subject: [PATCH 1/5] feat(ui): add NativeSelect primitive + DataProps helper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SSR-safe `<select>` wrapper matching shadcn SelectTrigger's utility
classes — shadcn's radix-based Select breaks renderToStaticMarkup,
so the PM wizards need a plain styled select they can use in
createElement paths.

DataProps is a tiny index-signature widener restoring the
`[key: \`data-\${string}\`]: unknown` shape that @types/react 19.1
dropped from HTMLAttributes — it's needed so createElement(Button,
{ 'data-action': 'x' }) typechecks under strict mode.

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
---
 web/src/components/ui/native-select.tsx | 34 +++++++++++++++++++++++++
 web/src/lib/data-props.ts               | 20 +++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 web/src/components/ui/native-select.tsx
 create mode 100644 web/src/lib/data-props.ts

diff --git a/web/src/components/ui/native-select.tsx b/web/src/components/ui/native-select.tsx
new file mode 100644
index 00000000..ede81283
--- /dev/null
+++ b/web/src/components/ui/native-select.tsx
@@ -0,0 +1,34 @@
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+/**
+ * SSR-safe styled `<select>`. Matches the visual language of shadcn
+ * `SelectTrigger` (border, height, focus ring, dark-mode) but renders a
+ * native `<select>` element — so components using it work inside
+ * `renderToStaticMarkup` without the radix-portal / React-instance
+ * mismatch that `ui/select.tsx` would cause in unit tests.
+ *
+ * Used by the PM wizard's shared step components (`steps/*.tsx`) and
+ * provider-specific steps where the form-control is the only visual
+ * concern and a portal-based combobox would be overkill.
+ */
+function NativeSelect({ className, children, ...props }: React.ComponentProps<'select'>) {
+	return (
+		<select
+			data-slot="native-select"
+			className={cn(
+				'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
+				'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+				'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+				'dark:bg-input/30',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</select>
+	);
+}
+
+export { NativeSelect };
diff --git a/web/src/lib/data-props.ts b/web/src/lib/data-props.ts
new file mode 100644
index 00000000..307896e2
--- /dev/null
+++ b/web/src/lib/data-props.ts
@@ -0,0 +1,20 @@
+/**
+ * `data-*` index-signature widener.
+ *
+ * @types/react 19 dropped the implicit `[key: ` + "`data-${string}`" + `]: unknown`
+ * index signature from `HTMLAttributes<T>`. JSX has a separate code path
+ * that still accepts `data-foo="bar"` on intrinsic/component elements,
+ * but `createElement(Component, { 'data-foo': 'bar' })` no longer
+ * typechecks under `strict: true` because the object literal is checked
+ * against `React.ComponentProps<typeof Component>` which lacks the
+ * widening index.
+ *
+ * Cast your props literal to `ComponentProps<typeof C> & DataProps` to
+ * keep the `createElement` call strictly typed for everything else:
+ *
+ *     createElement(Button, {
+ *         type: 'button',
+ *         'data-action': 'create-webhook',
+ *     } as React.ComponentProps<typeof Button> & DataProps)
+ */
+export type DataProps = { [key: `data-${string}`]: unknown };

From 8fa2f2df8879e8a682f546d13c1bf6c2041baf74 Mon Sep 17 00:00:00 2001
From: Zbigniew Sobiecki <zbigniew@sobiecki.name>
Date: Sat, 18 Apr 2026 19:21:56 +0000
Subject: [PATCH 2/5] refactor(ui): extract shared CopyButton to
 ui/copy-button.tsx

Moved the previously cross-file-imported CopyButton from
integration-scm-tab.tsx into its own primitive under ui/copy-button.tsx.
The alerting tab and PM webhook adapters now import from the canonical
location instead of reaching into a sibling tab module.

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
---
 .../projects/integration-alerting-tab.tsx     |  2 +-
 .../projects/integration-scm-tab.tsx          | 32 ++--------------
 web/src/components/ui/copy-button.tsx         | 37 +++++++++++++++++++
 3 files changed, 42 insertions(+), 29 deletions(-)
 create mode 100644 web/src/components/ui/copy-button.tsx

diff --git a/web/src/components/projects/integration-alerting-tab.tsx b/web/src/components/projects/integration-alerting-tab.tsx
index d36745ed..3363f497 100644
--- a/web/src/components/projects/integration-alerting-tab.tsx
+++ b/web/src/components/projects/integration-alerting-tab.tsx
@@ -4,11 +4,11 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Trash2 } from 'lucide-react';
 import { useState } from 'react';
+import { CopyButton } from '@/components/ui/copy-button.js';
 import { Input } from '@/components/ui/input.js';
 import { Label } from '@/components/ui/label.js';
 import { API_URL } from '@/lib/api.js';
 import { trpc, trpcClient } from '@/lib/trpc.js';
-import { CopyButton } from './integration-scm-tab.js';
 import { ProjectSecretField } from './project-secret-field.js';
 
 // ============================================================================
diff --git a/web/src/components/projects/integration-scm-tab.tsx b/web/src/components/projects/integration-scm-tab.tsx
index 81233f54..471eb15c 100644
--- a/web/src/components/projects/integration-scm-tab.tsx
+++ b/web/src/components/projects/integration-scm-tab.tsx
@@ -1,14 +1,13 @@
 /**
  * SCM (GitHub) integration tab components.
- * Contains: CopyButton, GitHubCredentialSlots, GitHubWebhookSection, SCMTab.
- * CopyButton is co-located here and also exported for use by AlertingTab.
+ * Contains: GitHubCredentialSlots, GitHubWebhookSection, SCMTab.
+ * `CopyButton` lives at `@/components/ui/copy-button.js` (extracted during
+ * PM wizard styling restoration).
  */
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
 	AlertCircle,
 	AlertTriangle,
-	Check,
-	Clipboard,
 	ExternalLink,
 	Info,
 	Loader2,
@@ -16,36 +15,13 @@ import {
 	Trash2,
 } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { CopyButton } from '@/components/ui/copy-button.js';
 import { Input } from '@/components/ui/input.js';
 import { Label } from '@/components/ui/label.js';
 import { API_URL } from '@/lib/api.js';
 import { trpc, trpcClient } from '@/lib/trpc.js';
 import { ProjectSecretField } from './project-secret-field.js';
 
-// ============================================================================
-// CopyButton (shared with AlertingTab)
-// ============================================================================
-
-export function CopyButton({ text }: { text: string }) {
-	const [copied, setCopied] = useState(false);
-	const handleCopy = async () => {
-		await navigator.clipboard.writeText(text);
-		setCopied(true);
-		setTimeout(() => setCopied(false), 2000);
-	};
-	return (
-		<button
-			type="button"
-			onClick={handleCopy}
-			className="inline-flex items-center gap-1 shrink-0 rounded px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
-			title="Copy to clipboard"
-		>
-			{copied ? <Check className="h-3 w-3 text-green-600" /> : <Clipboard className="h-3 w-3" />}
-			{copied ? 'Copied' : 'Copy'}
-		</button>
-	);
-}
-
 // ============================================================================
 // GitHub Credential Slots (replaces the old CredentialSelector dropdowns)
 // ============================================================================
diff --git a/web/src/components/ui/copy-button.tsx b/web/src/components/ui/copy-button.tsx
new file mode 100644
index 00000000..332f5ae9
--- /dev/null
+++ b/web/src/components/ui/copy-button.tsx
@@ -0,0 +1,37 @@
+import { Check, Clipboard } from 'lucide-react';
+import { useState } from 'react';
+
+/**
+ * Compact copy-to-clipboard button with a `Copy` → `Copied` state toggle.
+ *
+ * Extracted from `integration-scm-tab.tsx` where it previously lived as a
+ * local `export function CopyButton` imported cross-file by
+ * `integration-alerting-tab.tsx`. Now a proper shared UI primitive:
+ * additional consumers in the PM wizard path
+ * (`pm-providers/steps/webhook-url-display.tsx`, the Trello/JIRA curl
+ * fallbacks) import from here.
+ */
+export function CopyButton({ text }: { text: string }) {
+	const [copied, setCopied] = useState(false);
+
+	const handleCopy = async () => {
+		if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) return;
+		await navigator.clipboard.writeText(text);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	};
+
+	return (
+		<button
+			type="button"
+			onClick={handleCopy}
+			data-slot="copy-button"
+			data-action="copy-to-clipboard"
+			className="inline-flex items-center gap-1 shrink-0 rounded px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+			title="Copy to clipboard"
+		>
+			{copied ? <Check className="h-3 w-3 text-green-600" /> : <Clipboard className="h-3 w-3" />}
+			{copied ? 'Copied' : 'Copy'}
+		</button>
+	);
+}

From 5a5565282292203c04c35cd36141e05e79f4ffe6 Mon Sep 17 00:00:00 2001
From: Zbigniew Sobiecki <zbigniew@sobiecki.name>
Date: Sat, 18 Apr 2026 19:22:13 +0000
Subject: [PATCH 3/5] fix(pm-wizard): apply shadcn primitives to shared step
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swap raw <input>, <button>, <select>, <label> elements — all of which
shipped with pm-wizard-* BEM class names that have zero CSS definitions
anywhere — to shadcn Input/Button/NativeSelect/Label + Tailwind utility
classes across the seven shared StandardStepKind components.

The Linear API-key password field was invisible on the dark theme
because the raw <input> had no border, no padding, and browser-default
transparent background. Status/label/custom-field selects were
borderless. Credentials verify button and Create-label button were
unstyled. This commit brings them back to the legacy pre-spec-010/3
visual baseline without touching SSR-level behavior.

SSR tests in tests/unit/web/steps/ were loosened to match shadcn's
attribute-order-agnostic output and to walk by prop id rather than
raw element tag.

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
---
 tests/unit/web/steps/credentials.test.ts      |   8 +-
 .../web/steps/custom-field-mapping.test.ts    |  14 ++-
 .../web/steps/webhook-url-display.test.ts     |   4 +-
 .../pm-providers/steps/container-pick.tsx     |  37 +++++--
 .../pm-providers/steps/credentials.tsx        |  51 ++++++---
 .../steps/custom-field-mapping.tsx            |  77 +++++++++----
 .../pm-providers/steps/label-mapping.tsx      | 103 ++++++++++++------
 .../pm-providers/steps/project-scope.tsx      |  23 +++-
 .../pm-providers/steps/status-mapping.tsx     |  49 +++++++--
 .../steps/webhook-url-display.tsx             |  46 +++++---
 10 files changed, 294 insertions(+), 118 deletions(-)

diff --git a/tests/unit/web/steps/credentials.test.ts b/tests/unit/web/steps/credentials.test.ts
index ce7d19a0..2811e965 100644
--- a/tests/unit/web/steps/credentials.test.ts
+++ b/tests/unit/web/steps/credentials.test.ts
@@ -56,8 +56,12 @@ describe('CredentialsStep', () => {
 				onChange: () => {},
 			}),
 		);
-		// api_token → password; api_key → text (role doesn't include 'token'/'password')
-		expect(html).toMatch(/id="cred-api_token"[^>]*type="password"/);
+		// api_token → password; api_key → text (role doesn't include 'token'/'password').
+		// Order-agnostic: the <input> element can emit attributes in any order depending
+		// on the wrapper (shadcn Input sets type before spread-in id).
+		expect(html).toMatch(
+			/<input[^>]*id="cred-api_token"[^>]*type="password"|<input[^>]*type="password"[^>]*id="cred-api_token"/,
+		);
 	});
 
 	it('renders verify button when onVerify is supplied', () => {
diff --git a/tests/unit/web/steps/custom-field-mapping.test.ts b/tests/unit/web/steps/custom-field-mapping.test.ts
index deda0fef..5cd0150c 100644
--- a/tests/unit/web/steps/custom-field-mapping.test.ts
+++ b/tests/unit/web/steps/custom-field-mapping.test.ts
@@ -124,13 +124,15 @@ describe('CustomFieldMappingStep', () => {
 		});
 		const elements: ReactElement[] = [];
 		flatten(tree, elements);
-		const selects = elements.filter((el) => el.type === 'select');
-		expect(selects.length).toBe(2);
-		const costSelect = selects.find(
-			(el) => (el.props as { id?: string }).id === 'custom-field-cost',
+		// Post-styling-restoration: the select is wrapped in `NativeSelect`
+		// (shadcn primitive) rather than raw `<select>`. Walk by prop id
+		// instead of element type — the primitive forwards the `id` prop and
+		// `onChange` handler unchanged, so wiring assertions are preserved.
+		const costSelectEl = elements.find(
+			(el) => (el.props as { id?: string } | undefined)?.id === 'custom-field-cost',
 		);
-		expect(costSelect).toBeDefined();
-		const onChange = (costSelect?.props as { onChange?: (e: unknown) => void }).onChange;
+		expect(costSelectEl).toBeDefined();
+		const onChange = (costSelectEl?.props as { onChange?: (e: unknown) => void }).onChange;
 		expect(onChange).toBeTypeOf('function');
 		onChange?.({ target: { value: 'fld-2' } });
 		expect(onMappingChange).toHaveBeenCalledWith('cost', 'fld-2');
diff --git a/tests/unit/web/steps/webhook-url-display.test.ts b/tests/unit/web/steps/webhook-url-display.test.ts
index 9ca15ded..26f5a139 100644
--- a/tests/unit/web/steps/webhook-url-display.test.ts
+++ b/tests/unit/web/steps/webhook-url-display.test.ts
@@ -19,7 +19,9 @@ describe('WebhookUrlDisplayStep', () => {
 				webhookUrl: 'https://router.example.com/trello/webhook',
 			}),
 		);
-		expect(html).toContain('<code>https://router.example.com/trello/webhook</code>');
+		// The <code> element may carry Tailwind classes; match loosely on the
+		// tag + URL + closing tag rather than the exact attribute-free opener.
+		expect(html).toMatch(/<code[^>]*>https:\/\/router\.example\.com\/trello\/webhook<\/code>/);
 		expect(html).toContain('data-url="https://router.example.com/trello/webhook"');
 	});
 
diff --git a/web/src/components/projects/pm-providers/steps/container-pick.tsx b/web/src/components/projects/pm-providers/steps/container-pick.tsx
index dc7105fc..be8929af 100644
--- a/web/src/components/projects/pm-providers/steps/container-pick.tsx
+++ b/web/src/components/projects/pm-providers/steps/container-pick.tsx
@@ -8,6 +8,9 @@
  */
 
 import { createElement } from 'react';
+import { Label } from '@/components/ui/label.js';
+import { NativeSelect } from '@/components/ui/native-select.js';
+import type { DataProps } from '@/lib/data-props.js';
 import type { StandardStep } from '../../../../../../src/integrations/pm/manifest.js';
 import { Combobox, type ComboboxOption } from '../../../ui/combobox.js';
 
@@ -56,13 +59,27 @@ export function ContainerPickStep({
 			'data-step-component': 'container-pick',
 			'data-provider-id': providerId,
 			'data-step-id': step.id,
-			className: 'pm-wizard-step pm-wizard-step-container-pick',
-		},
-		label ? createElement('label', { htmlFor: `container-${step.id}` }, label) : null,
+			className: 'space-y-2',
+		} as React.ComponentProps<'div'> & DataProps,
+		label ? createElement(Label, { htmlFor: `container-${step.id}` }, label) : null,
 		loading
-			? createElement('p', { 'data-state': 'loading' }, 'Loading...')
+			? createElement(
+					'p',
+					{
+						'data-state': 'loading',
+						className: 'text-sm text-muted-foreground',
+					} as React.ComponentProps<'p'> & DataProps,
+					'Loading...',
+				)
 			: error
-				? createElement('p', { 'data-state': 'error' }, `Error: ${error}`)
+				? createElement(
+						'p',
+						{
+							'data-state': 'error',
+							className: 'text-sm text-destructive',
+						} as React.ComponentProps<'p'> & DataProps,
+						`Error: ${error}`,
+					)
 				: searchable
 					? createElement(Combobox, {
 							id: `container-${step.id}`,
@@ -72,18 +89,22 @@ export function ContainerPickStep({
 							emptyLabel: '— Select —',
 						})
 					: createElement(
-							'select',
+							NativeSelect,
 							{
 								id: `container-${step.id}`,
 								value: selectedId ?? '',
 								onChange: (e: React.ChangeEvent<HTMLSelectElement>) => onSelect(e.target.value),
 								'data-action': 'select-container',
-							},
+							} as React.ComponentProps<typeof NativeSelect> & DataProps,
 							createElement('option', { value: '' }, '— Select —'),
 							...options.map((opt) =>
 								createElement(
 									'option',
-									{ key: opt.id, value: opt.id, 'data-detail': opt.url ?? undefined },
+									{
+										key: opt.id,
+										value: opt.id,
+										'data-detail': opt.url ?? undefined,
+									} as React.ComponentProps<'option'> & DataProps,
 									opt.name,
 								),
 							),
diff --git a/web/src/components/projects/pm-providers/steps/credentials.tsx b/web/src/components/projects/pm-providers/steps/credentials.tsx
index a1f6a749..5230090d 100644
--- a/web/src/components/projects/pm-providers/steps/credentials.tsx
+++ b/web/src/components/projects/pm-providers/steps/credentials.tsx
@@ -1,17 +1,21 @@
 /**
- * Shared credentials step component (plan 010/3).
+ * Shared credentials step component (plan 010/3; styling restored
+ * post-spec-012 follow-up).
  *
- * Renders a labeled text input for each credential role declared on the
+ * Renders a labeled input for each credential role declared on the
  * provider's manifest `credentialRoles` slots. Uses `providerHooks` to
  * read current values from wizard state and dispatch changes.
  *
- * This component is **new code for new PM providers going forward**.
- * The three existing providers (Trello/JIRA/Linear) keep using their
- * per-provider step files (`pm-wizard-<provider>-steps.tsx`). A follow-up
- * plan will migrate those.
+ * Restored to use shadcn primitives (`Input`, `Label`, `Button`) matching
+ * the legacy per-provider components. The raw-HTML version shipped
+ * invisible inputs on dark theme.
  */
 
 import { createElement, Fragment } from 'react';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { Label } from '@/components/ui/label.js';
+import type { DataProps } from '@/lib/data-props.js';
 import type { StandardStep } from '../../../../../../src/integrations/pm/manifest.js';
 
 export interface CredentialRoleSpec {
@@ -47,31 +51,32 @@ export function CredentialsStep({
 			'data-step-component': 'credentials',
 			'data-provider-id': providerId,
 			'data-step-id': step.id,
-			className: 'pm-wizard-step pm-wizard-step-credentials',
+			className: 'space-y-4',
 		},
 		createElement(
 			'div',
-			{ className: 'pm-wizard-step-fields' },
+			{ className: 'space-y-4' },
 			...credentialRoles.map((role) =>
 				createElement(
 					'div',
 					{
 						key: role.role,
-						className: 'pm-wizard-field',
+						className: 'space-y-2',
 						'data-role': role.role,
-					},
+					} as React.ComponentProps<'div'> & DataProps,
 					createElement(
-						'label',
+						Label,
 						{ htmlFor: `cred-${role.role}` },
 						`${role.label}${role.optional ? ' (optional)' : ''}`,
 					),
-					createElement('input', {
+					createElement(Input, {
 						id: `cred-${role.role}`,
 						type:
 							role.role.includes('password') || role.role.includes('token') ? 'password' : 'text',
 						value: values[role.role] ?? '',
 						onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
 							onChange(role.role, e.target.value),
+						autoComplete: 'off',
 					}),
 				),
 			),
@@ -79,23 +84,35 @@ export function CredentialsStep({
 		onVerify
 			? createElement(
 					'div',
-					{ className: 'pm-wizard-verify' },
+					{ className: 'flex items-center gap-3 pt-2' },
 					createElement(
-						'button',
-						{ type: 'button', onClick: onVerify, 'data-action': 'verify' },
+						Button,
+						{
+							type: 'button',
+							variant: 'outline',
+							size: 'sm',
+							onClick: onVerify,
+							'data-action': 'verify',
+						} as React.ComponentProps<typeof Button> & DataProps,
 						'Verify credentials',
 					),
 					verificationDisplay
 						? createElement(
 								'p',
-								{ className: 'pm-wizard-verify-success', 'data-verification': 'success' },
+								{
+									className: 'text-sm text-green-600 dark:text-green-400',
+									'data-verification': 'success',
+								} as React.ComponentProps<'p'> & DataProps,
 								`Verified as ${verificationDisplay}`,
 							)
 						: null,
 					verificationError
 						? createElement(
 								'p',
-								{ className: 'pm-wizard-verify-error', 'data-verification': 'error' },
+								{
+									className: 'text-sm text-destructive',
+									'data-verification': 'error',
+								} as React.ComponentProps<'p'> & DataProps,
 								`Verification failed: ${verificationError}`,
 							)
 						: null,
diff --git a/web/src/components/projects/pm-providers/steps/custom-field-mapping.tsx b/web/src/components/projects/pm-providers/steps/custom-field-mapping.tsx
index eed5447b..a8bdb101 100644
--- a/web/src/components/projects/pm-providers/steps/custom-field-mapping.tsx
+++ b/web/src/components/projects/pm-providers/steps/custom-field-mapping.tsx
@@ -1,5 +1,6 @@
 /**
- * Shared custom-field-mapping step component (plan 011/1 — 7th StandardStepKind).
+ * Shared custom-field-mapping step component (plan 011/1 — 7th StandardStepKind;
+ * styling restored post-spec-012 follow-up).
  *
  * Renders one dropdown per CASCADE custom-field slot (e.g. cost, effort)
  * with every discovered provider custom field as an option. When the
@@ -14,6 +15,11 @@
  */
 
 import { createElement, useState } from 'react';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { Label } from '@/components/ui/label.js';
+import { NativeSelect } from '@/components/ui/native-select.js';
+import type { DataProps } from '@/lib/data-props.js';
 import type { StandardStep } from '../../../../../../src/integrations/pm/manifest.js';
 
 export interface ProviderCustomField {
@@ -59,17 +65,20 @@ function CreateCustomFieldForm({
 	const [name, setName] = useState(defaultName ?? '');
 	return createElement(
 		'div',
-		{ className: 'pm-wizard-create-custom-field' },
-		createElement('input', {
+		{ className: 'flex items-center gap-2 pl-32' },
+		createElement(Input, {
 			type: 'text',
 			placeholder: 'New custom field name',
 			value: name,
 			onChange: (e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value),
+			className: 'h-8 text-xs flex-1',
 		}),
 		createElement(
-			'button',
+			Button,
 			{
 				type: 'button',
+				variant: 'outline',
+				size: 'sm',
 				'data-action': 'create-custom-field',
 				'data-slot-key': slotKey,
 				disabled: name.trim() === '',
@@ -79,7 +88,7 @@ function CreateCustomFieldForm({
 					onCreate(slotKey, trimmed);
 					setName('');
 				},
-			},
+			} as React.ComponentProps<typeof Button> & DataProps,
 			'Create',
 		),
 	);
@@ -103,38 +112,58 @@ export function CustomFieldMappingStep({
 			'data-step-component': 'custom-field-mapping',
 			'data-provider-id': providerId,
 			'data-step-id': step.id,
-			className: 'pm-wizard-step pm-wizard-step-custom-field-mapping',
+			className: 'space-y-3',
 		},
 		loading
-			? createElement('p', { 'data-state': 'loading' }, 'Loading custom fields…')
+			? createElement(
+					'p',
+					{ 'data-state': 'loading', className: 'text-sm text-muted-foreground' },
+					'Loading custom fields…',
+				)
 			: error
-				? createElement('p', { 'data-state': 'error' }, `Error: ${error}`)
+				? createElement(
+						'p',
+						{ 'data-state': 'error', className: 'text-sm text-destructive' },
+						`Error: ${error}`,
+					)
 				: createElement(
 						'div',
-						{ className: 'pm-wizard-custom-field-mappings' },
+						{ className: 'space-y-2' },
 						...cascadeSlots.map((slot) =>
 							createElement(
 								'div',
 								{
 									key: slot.key,
-									className: 'pm-wizard-custom-field-row',
+									className: 'space-y-2',
 									'data-cascade-slot': slot.key,
 								},
-								createElement('label', { htmlFor: `custom-field-${slot.key}` }, slot.label),
 								createElement(
-									'select',
-									{
-										id: `custom-field-${slot.key}`,
-										value: mappings[slot.key] ?? '',
-										onChange: (e: React.ChangeEvent<HTMLSelectElement>) =>
-											onMappingChange(slot.key, e.target.value),
-									},
-									createElement('option', { value: '' }, '— Select —'),
-									...providerCustomFields.map((field) =>
-										createElement(
-											'option',
-											{ key: field.id, value: field.id, 'data-type': field.type },
-											field.name,
+									'div',
+									{ className: 'flex items-center gap-3' },
+									createElement(
+										Label,
+										{
+											htmlFor: `custom-field-${slot.key}`,
+											className: 'w-32 shrink-0 text-xs text-muted-foreground',
+										},
+										slot.label,
+									),
+									createElement(
+										NativeSelect,
+										{
+											id: `custom-field-${slot.key}`,
+											value: mappings[slot.key] ?? '',
+											onChange: (e: React.ChangeEvent<HTMLSelectElement>) =>
+												onMappingChange(slot.key, e.target.value),
+											className: 'flex-1',
+										},
+										createElement('option', { value: '' }, '— Select —'),
+										...providerCustomFields.map((field) =>
+											createElement(
+												'option',
+												{ key: field.id, value: field.id, 'data-type': field.type },
+												field.name,
+											),
 										),
 									),
 								),
diff --git a/web/src/components/projects/pm-providers/steps/label-mapping.tsx b/web/src/components/projects/pm-providers/steps/label-mapping.tsx
index 126a3abb..366298f1 100644
--- a/web/src/components/projects/pm-providers/steps/label-mapping.tsx
+++ b/web/src/components/projects/pm-providers/steps/label-mapping.tsx
@@ -1,5 +1,6 @@
 /**
- * Shared label-mapping step component (plan 010/3).
+ * Shared label-mapping step component (plan 010/3; styling restored
+ * post-spec-012 follow-up).
  *
  * Two modes:
  * - When `providerLabels.length > 0` (Trello, Linear): render a dropdown
@@ -12,6 +13,11 @@
  */
 
 import { createElement, useState } from 'react';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { Label } from '@/components/ui/label.js';
+import { NativeSelect } from '@/components/ui/native-select.js';
+import type { DataProps } from '@/lib/data-props.js';
 import type { StandardStep } from '../../../../../../src/integrations/pm/manifest.js';
 
 export interface ProviderLabel {
@@ -73,15 +79,23 @@ export function LabelMappingStep({
 			'data-provider-id': providerId,
 			'data-step-id': step.id,
 			'data-mode': useFreeText ? 'free-text' : 'enum',
-			className: 'pm-wizard-step pm-wizard-step-label-mapping',
+			className: 'space-y-3',
 		},
 		loading
-			? createElement('p', { 'data-state': 'loading' }, 'Loading labels…')
+			? createElement(
+					'p',
+					{ 'data-state': 'loading', className: 'text-sm text-muted-foreground' },
+					'Loading labels…',
+				)
 			: error
-				? createElement('p', { 'data-state': 'error' }, `Error: ${error}`)
+				? createElement(
+						'p',
+						{ 'data-state': 'error', className: 'text-sm text-destructive' },
+						`Error: ${error}`,
+					)
 				: createElement(
 						'div',
-						{ className: 'pm-wizard-label-mappings' },
+						{ className: 'space-y-2' },
 						...labelSlots.map((slot) => {
 							const currentValue = mappings[slot.key] ?? '';
 							const fieldId = `label-${slot.key}`;
@@ -89,59 +103,86 @@ export function LabelMappingStep({
 							if (useFreeText) {
 								return createElement(
 									'div',
-									{ key: slot.key, className: 'pm-wizard-label-row', 'data-slot': slot.key },
-									createElement('label', { htmlFor: fieldId }, slot.label),
-									createElement('input', {
+									{
+										key: slot.key,
+										className: 'flex items-center gap-3',
+										'data-slot': slot.key,
+									},
+									createElement(
+										Label,
+										{
+											htmlFor: fieldId,
+											className: 'w-32 shrink-0 text-xs text-muted-foreground',
+										},
+										slot.label,
+									),
+									createElement(Input, {
 										id: fieldId,
 										type: 'text',
 										value: currentValue,
 										onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
 											onMappingChange(slot.key, e.target.value),
 										placeholder: 'Label name',
+										className: 'flex-1',
 									}),
 								);
 							}
 
 							return createElement(
 								'div',
-								{ key: slot.key, className: 'pm-wizard-label-row', 'data-slot': slot.key },
-								createElement('label', { htmlFor: fieldId }, slot.label),
+								{ key: slot.key, className: 'space-y-2', 'data-slot': slot.key },
 								createElement(
-									'select',
-									{
-										id: fieldId,
-										value: currentValue,
-										onChange: (e: React.ChangeEvent<HTMLSelectElement>) =>
-											onMappingChange(slot.key, e.target.value),
-									},
-									createElement('option', { value: '' }, '— Select —'),
-									...providerLabels.map((label) =>
-										createElement(
-											'option',
-											{
-												key: label.id,
-												value: label.id,
-												'data-color': label.color ?? undefined,
-											},
-											label.name,
+									'div',
+									{ className: 'flex items-center gap-3' },
+									createElement(
+										Label,
+										{
+											htmlFor: fieldId,
+											className: 'w-32 shrink-0 text-xs text-muted-foreground',
+										},
+										slot.label,
+									),
+									createElement(
+										NativeSelect,
+										{
+											id: fieldId,
+											value: currentValue,
+											onChange: (e: React.ChangeEvent<HTMLSelectElement>) =>
+												onMappingChange(slot.key, e.target.value),
+											className: 'flex-1',
+										},
+										createElement('option', { value: '' }, '— Select —'),
+										...providerLabels.map((label) =>
+											createElement(
+												'option',
+												{
+													key: label.id,
+													value: label.id,
+													'data-color': label.color ?? undefined,
+												},
+												label.name,
+											),
 										),
 									),
 								),
 								onCreateLabel
 									? createElement(
 											'div',
-											{ className: 'pm-wizard-create-label' },
-											createElement('input', {
+											{ className: 'flex items-center gap-2 pl-32' },
+											createElement(Input, {
 												type: 'text',
 												placeholder: 'New label name',
 												value: newLabelNames[slot.key] ?? '',
 												onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
 													setNewLabelNames((prev) => ({ ...prev, [slot.key]: e.target.value })),
+												className: 'h-8 text-xs flex-1',
 											}),
 											createElement(
-												'button',
+												Button,
 												{
 													type: 'button',
+													variant: 'outline',
+													size: 'sm',
 													onClick: () => {
 														const name = newLabelNames[slot.key];
 														if (name) {
@@ -152,7 +193,7 @@ export function LabelMappingStep({
 													},
 													'data-action': 'create-label',
 													'data-create-color': labelDefaults?.[slot.key]?.color,
-												},
+												} as React.ComponentProps<typeof Button> & DataProps,
 												'Create label',
 											),
 										)
diff --git a/web/src/components/projects/pm-providers/steps/project-scope.tsx b/web/src/components/projects/pm-providers/steps/project-scope.tsx
index 8292368c..90deacde 100644
--- a/web/src/components/projects/pm-providers/steps/project-scope.tsx
+++ b/web/src/components/projects/pm-providers/steps/project-scope.tsx
@@ -8,6 +8,9 @@
  */
 
 import { createElement } from 'react';
+import { Label } from '@/components/ui/label.js';
+import { NativeSelect } from '@/components/ui/native-select.js';
+import type { DataProps } from '@/lib/data-props.js';
 import type { StandardStep } from '../../../../../../src/integrations/pm/manifest.js';
 import { Combobox, type ComboboxOption } from '../../../ui/combobox.js';
 
@@ -47,17 +50,25 @@ export function ProjectScopeStep({
 			'data-step-component': 'project-scope',
 			'data-provider-id': providerId,
 			'data-step-id': step.id,
-			className: 'pm-wizard-step pm-wizard-step-project-scope',
+			className: 'space-y-2',
 		},
 		createElement(
-			'label',
+			Label,
 			{ htmlFor: `project-scope-${step.id}` },
 			'Optional: narrow scope to a project',
 		),
 		loading
-			? createElement('p', { 'data-state': 'loading' }, 'Loading projects…')
+			? createElement(
+					'p',
+					{ 'data-state': 'loading', className: 'text-sm text-muted-foreground' },
+					'Loading projects…',
+				)
 			: error
-				? createElement('p', { 'data-state': 'error' }, `Error: ${error}`)
+				? createElement(
+						'p',
+						{ 'data-state': 'error', className: 'text-sm text-destructive' },
+						`Error: ${error}`,
+					)
 				: searchable
 					? createElement(Combobox, {
 							id: `project-scope-${step.id}`,
@@ -67,14 +78,14 @@ export function ProjectScopeStep({
 							emptyLabel: 'No project scope',
 						})
 					: createElement(
-							'select',
+							NativeSelect,
 							{
 								id: `project-scope-${step.id}`,
 								value: selectedProjectId ?? '',
 								onChange: (e: React.ChangeEvent<HTMLSelectElement>) =>
 									onSelect(e.target.value === '' ? null : e.target.value),
 								'data-action': 'select-project-scope',
-							},
+							} as React.ComponentProps<typeof NativeSelect> & DataProps,
 							createElement('option', { value: '' }, 'No project scope'),
 							...projects.map((p) => createElement('option', { key: p.id, value: p.id }, p.name)),
 						),
diff --git a/web/src/components/projects/pm-providers/steps/status-mapping.tsx b/web/src/components/projects/pm-providers/steps/status-mapping.tsx
index db559b96..1f2072ec 100644
--- a/web/src/components/projects/pm-providers/steps/status-mapping.tsx
+++ b/web/src/components/projects/pm-providers/steps/status-mapping.tsx
@@ -7,6 +7,9 @@
  */
 
 import { createElement } from 'react';
+import { Label } from '@/components/ui/label.js';
+import { NativeSelect } from '@/components/ui/native-select.js';
+import type { DataProps } from '@/lib/data-props.js';
 import type { StandardStep } from '../../../../../../src/integrations/pm/manifest.js';
 
 export interface ProviderState {
@@ -42,37 +45,63 @@ export function StatusMappingStep({
 			'data-step-component': 'status-mapping',
 			'data-provider-id': providerId,
 			'data-step-id': step.id,
-			className: 'pm-wizard-step pm-wizard-step-status-mapping',
-		},
+			className: 'space-y-3',
+		} as React.ComponentProps<'div'> & DataProps,
 		loading
-			? createElement('p', { 'data-state': 'loading' }, 'Loading states…')
+			? createElement(
+					'p',
+					{
+						'data-state': 'loading',
+						className: 'text-sm text-muted-foreground',
+					} as React.ComponentProps<'p'> & DataProps,
+					'Loading states…',
+				)
 			: error
-				? createElement('p', { 'data-state': 'error' }, `Error: ${error}`)
+				? createElement(
+						'p',
+						{
+							'data-state': 'error',
+							className: 'text-sm text-destructive',
+						} as React.ComponentProps<'p'> & DataProps,
+						`Error: ${error}`,
+					)
 				: createElement(
 						'div',
-						{ className: 'pm-wizard-status-mappings' },
+						{ className: 'space-y-2' },
 						...cascadeStatuses.map((cascade) =>
 							createElement(
 								'div',
 								{
 									key: cascade.key,
-									className: 'pm-wizard-status-row',
+									className: 'flex items-center gap-3',
 									'data-cascade-status': cascade.key,
-								},
-								createElement('label', { htmlFor: `status-${cascade.key}` }, cascade.label),
+								} as React.ComponentProps<'div'> & DataProps,
 								createElement(
-									'select',
+									Label,
+									{
+										htmlFor: `status-${cascade.key}`,
+										className: 'w-32 shrink-0 text-xs text-muted-foreground',
+									},
+									cascade.label,
+								),
+								createElement(
+									NativeSelect,
 									{
 										id: `status-${cascade.key}`,
 										value: mappings[cascade.key] ?? '',
 										onChange: (e: React.ChangeEvent<HTMLSelectElement>) =>
 											onMappingChange(cascade.key, e.target.value),
+										className: 'flex-1',
 									},
 									createElement('option', { value: '' }, '— Select —'),
 									...providerStates.map((state) =>
 										createElement(
 											'option',
-											{ key: state.id, value: state.id, 'data-category': state.category },
+											{
+												key: state.id,
+												value: state.id,
+												'data-category': state.category,
+											} as React.ComponentProps<'option'> & DataProps,
 											state.name,
 										),
 									),
diff --git a/web/src/components/projects/pm-providers/steps/webhook-url-display.tsx b/web/src/components/projects/pm-providers/steps/webhook-url-display.tsx
index 649a1b9c..d849c9a1 100644
--- a/web/src/components/projects/pm-providers/steps/webhook-url-display.tsx
+++ b/web/src/components/projects/pm-providers/steps/webhook-url-display.tsx
@@ -1,13 +1,24 @@
 /**
- * Shared webhook-url-display step component (plan 010/3).
+ * Shared webhook-url-display step component (plan 010/3; styling restored
+ * post-spec-012 follow-up).
  *
  * Displays the provider's webhook URL constructed from the CASCADE router
  * base URL + the manifest's `webhookRoute`. Includes a copy-to-clipboard
  * button and optional per-provider setup instructions pulled from
  * `step.config?.instructions`.
+ *
+ * Copy button uses `Button` + inline clipboard handler rather than the
+ * shared `CopyButton` primitive because it emits a wizard-specific
+ * `data-action="copy-webhook-url"` that downstream callers may depend on
+ * (e.g. operator guides that reference the webhook-url row).
  */
 
+import { Check, Clipboard } from 'lucide-react';
 import { createElement, useState } from 'react';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { Label } from '@/components/ui/label.js';
+import type { DataProps } from '@/lib/data-props.js';
 import type { StandardStep } from '../../../../../../src/integrations/pm/manifest.js';
 
 export interface WebhookUrlDisplayStepProps {
@@ -54,17 +65,22 @@ export function WebhookUrlDisplayStep({
 			'data-step-component': 'webhook-url-display',
 			'data-provider-id': providerId,
 			'data-step-id': step.id,
-			className: 'pm-wizard-step pm-wizard-step-webhook-url-display',
+			className: 'space-y-3',
 		},
-		createElement('h4', null, 'Webhook URL'),
+		createElement('h4', { className: 'text-sm font-medium' }, 'Webhook URL'),
 		createElement(
 			'div',
-			{ className: 'pm-wizard-webhook-url', 'data-url': webhookUrl },
-			createElement('code', null, webhookUrl),
+			{
+				className: 'flex items-center gap-2 rounded-md border bg-muted px-3 py-2',
+				'data-url': webhookUrl,
+			},
+			createElement('code', { className: 'flex-1 font-mono text-xs break-all' }, webhookUrl),
 			createElement(
-				'button',
+				Button,
 				{
 					type: 'button',
+					variant: 'outline',
+					size: 'sm',
 					'data-action': 'copy-webhook-url',
 					onClick: () => {
 						if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
@@ -74,32 +90,36 @@ export function WebhookUrlDisplayStep({
 							});
 						}
 					},
-				},
+				} as React.ComponentProps<typeof Button> & DataProps,
+				copied
+					? createElement(Check, { className: 'h-3 w-3 text-green-600' })
+					: createElement(Clipboard, { className: 'h-3 w-3' }),
 				copied ? 'Copied!' : 'Copy',
 			),
 		),
 		cfgInstructions
-			? createElement('p', { className: 'pm-wizard-webhook-instructions' }, cfgInstructions)
+			? createElement('p', { className: 'text-xs text-muted-foreground' }, cfgInstructions)
 			: null,
 		showSecretField
 			? createElement(
 					'div',
 					{
-						className: 'pm-wizard-webhook-secret',
+						className: 'space-y-2',
 						'data-secret-role': secretFieldRole,
-					},
+					} as React.ComponentProps<'div'> & DataProps,
 					createElement(
-						'label',
+						Label,
 						{ htmlFor: `webhook-secret-${step.id}` },
 						secretLabel ?? secretFieldRole,
 					),
-					createElement('input', {
+					createElement(Input, {
 						id: `webhook-secret-${step.id}`,
 						type: 'password',
 						'data-role': secretFieldRole,
 						value: secretValue ?? '',
 						onChange: (e: React.ChangeEvent<HTMLInputElement>) => onSecretChange?.(e.target.value),
-					}),
+						autoComplete: 'off',
+					} as React.ComponentProps<typeof Input> & DataProps),
 				)
 			: null,
 	);

From 02632cfd3fa15aa83f222ecf110662c9d28b471e Mon Sep 17 00:00:00 2001
From: Zbigniew Sobiecki <zbigniew@sobiecki.name>
Date: Sat, 18 Apr 2026 19:22:28 +0000
Subject: [PATCH 4/5] fix(pm-wizard): apply shadcn primitives to provider
 webhook adapters

Swap raw <button>, <select>, <label>, <input> elements to shadcn
primitives + Tailwind utility classes across the Trello, JIRA, and
Linear webhook-step adapters plus the JIRA issue-type step.

Visible fix: active-webhooks list now has bordered rows, delete button
is a real ghost-icon Button with a Trash2 icon, Create Webhook is a
primary Button with a spinner during creation, the curl fallback sits
inside a styled <details>/<summary> block, and the Linear info banner
uses the themed blue surface from the legacy component instead of raw
divs.

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
---
 .../pm-providers/jira/issue-type-step.tsx     |  32 ++++--
 .../pm-providers/jira/webhook-step.tsx        | 100 +++++++++++++-----
 .../pm-providers/linear/webhook-step.tsx      |  59 +++++++----
 .../pm-providers/trello/webhook-step.tsx      | 100 +++++++++++++-----
 4 files changed, 205 insertions(+), 86 deletions(-)

diff --git a/web/src/components/projects/pm-providers/jira/issue-type-step.tsx b/web/src/components/projects/pm-providers/jira/issue-type-step.tsx
index 1e0b1916..e021e0a1 100644
--- a/web/src/components/projects/pm-providers/jira/issue-type-step.tsx
+++ b/web/src/components/projects/pm-providers/jira/issue-type-step.tsx
@@ -16,6 +16,8 @@
  */
 
 import { createElement } from 'react';
+import { Label } from '@/components/ui/label.js';
+import { NativeSelect } from '@/components/ui/native-select.js';
 import type { CustomStep } from '../../../../../../src/integrations/pm/manifest.js';
 
 export interface JiraIssueType {
@@ -53,15 +55,23 @@ export function IssueTypeMappingStep({
 			'data-step-component': 'issue-type-mapping',
 			'data-provider-id': providerId,
 			'data-step-id': step.id,
-			className: 'pm-wizard-step pm-wizard-step-issue-type-mapping',
+			className: 'space-y-3',
 		},
 		loading
-			? createElement('p', { 'data-state': 'loading' }, 'Loading issue types…')
+			? createElement(
+					'p',
+					{ 'data-state': 'loading', className: 'text-sm text-muted-foreground' },
+					'Loading issue types…',
+				)
 			: error
-				? createElement('p', { 'data-state': 'error' }, `Error: ${error}`)
+				? createElement(
+						'p',
+						{ 'data-state': 'error', className: 'text-sm text-destructive' },
+						`Error: ${error}`,
+					)
 				: createElement(
 						'div',
-						{ className: 'pm-wizard-issue-type-mappings' },
+						{ className: 'space-y-2' },
 						...ROLES.map((role) => {
 							const fieldId = `issue-type-${role.key}`;
 							const filtered = issueTypes.filter((t) => t.subtask === role.subtaskFlag);
@@ -70,17 +80,25 @@ export function IssueTypeMappingStep({
 								'div',
 								{
 									key: role.key,
-									className: 'pm-wizard-issue-type-row',
+									className: 'flex items-center gap-3',
 									'data-role': role.key,
 								},
-								createElement('label', { htmlFor: fieldId }, role.label),
 								createElement(
-									'select',
+									Label,
+									{
+										htmlFor: fieldId,
+										className: 'w-32 shrink-0 text-xs text-muted-foreground',
+									},
+									role.label,
+								),
+								createElement(
+									NativeSelect,
 									{
 										id: fieldId,
 										value: currentValue,
 										onChange: (e: React.ChangeEvent<HTMLSelectElement>) =>
 											onMappingChange(role.key, e.target.value),
+										className: 'flex-1',
 									},
 									createElement('option', { value: '' }, '— Select —'),
 									...filtered.map((t) =>
diff --git a/web/src/components/projects/pm-providers/jira/webhook-step.tsx b/web/src/components/projects/pm-providers/jira/webhook-step.tsx
index 7e966009..bf560f37 100644
--- a/web/src/components/projects/pm-providers/jira/webhook-step.tsx
+++ b/web/src/components/projects/pm-providers/jira/webhook-step.tsx
@@ -1,10 +1,10 @@
 /**
- * JIRA webhook step adapter (plan 012/2).
+ * JIRA webhook step adapter (plan 012/2; styling restored post-spec-012
+ * follow-up).
  *
- * Replaces the JIRA branch of the legacy `WebhookStep` (plan 012/4
- * deletes that). Fragment composing the shared `WebhookUrlDisplayStep`
- * (URL + copy) with JIRA-specific UX: active-webhooks list,
- * programmatic "Create Webhook" button, delete buttons, curl fallback.
+ * Fragment composing the shared `WebhookUrlDisplayStep` (URL + copy) with
+ * JIRA-specific UX: active-webhooks list, programmatic "Create Webhook"
+ * button, delete buttons, curl fallback.
  *
  * The `jiraEnsureLabels` side-effect (adds + removes CASCADE labels to
  * seed autocomplete on first webhook creation) runs server-side inside
@@ -12,7 +12,11 @@
  * preserve it.
  */
 
+import { Loader2, Trash2 } from 'lucide-react';
 import { createElement, Fragment, type ReactElement } from 'react';
+import { Button } from '@/components/ui/button.js';
+import { CopyButton } from '@/components/ui/copy-button.js';
+import type { DataProps } from '@/lib/data-props.js';
 import { WebhookUrlDisplayStep } from '../steps/webhook-url-display.js';
 import type { ProviderWizardStepProps } from '../types.js';
 
@@ -66,6 +70,7 @@ export function JiraWebhookAdapter({
 }: ProviderWizardStepProps): ReactElement {
 	const h = asJiraWebhookHooks(providerHooks);
 	const createDisabled = !h.callbackBaseUrl || h.createLoading;
+	const curlCommand = buildJiraCurl(state.jiraBaseUrl ?? '', h.callbackBaseUrl);
 
 	return createElement(
 		Fragment,
@@ -87,35 +92,52 @@ export function JiraWebhookAdapter({
 		// Active-webhooks list.
 		createElement(
 			'div',
-			{ className: 'pm-wizard-webhook-active-list', 'data-section': 'active-webhooks' },
+			{
+				className: 'space-y-2',
+				'data-section': 'active-webhooks',
+			},
 			h.webhooksLoading
-				? createElement('p', { 'data-state': 'loading' }, 'Loading webhooks…')
+				? createElement(
+						'p',
+						{
+							'data-state': 'loading',
+							className: 'flex items-center gap-2 text-sm text-muted-foreground',
+						},
+						createElement(Loader2, { className: 'h-4 w-4 animate-spin' }),
+						'Loading webhooks…',
+					)
 				: h.activeJiraWebhooks.length === 0
 					? createElement(
 							'p',
-							{ className: 'pm-wizard-webhook-empty' },
+							{ className: 'text-sm text-amber-600 dark:text-amber-400' },
 							'No JIRA webhooks configured for this project.',
 						)
 					: createElement(
 							'ul',
-							{ className: 'pm-wizard-webhook-list' },
+							{ className: 'space-y-1' },
 							...h.activeJiraWebhooks.map((wh) =>
 								createElement(
 									'li',
-									{ key: wh.id, className: 'pm-wizard-webhook-row', 'data-webhook-id': wh.id },
+									{
+										key: wh.id,
+										className: 'flex items-center justify-between rounded-md border px-3 py-2',
+										'data-webhook-id': wh.id,
+									},
 									createElement(
-										'span',
-										{
-											className: 'pm-wizard-webhook-status',
+										'div',
+										{ className: 'flex items-center gap-2 text-sm' },
+										createElement('span', {
+											className: `inline-block h-2 w-2 rounded-full ${wh.active ? 'bg-green-500 dark:bg-green-400' : 'bg-amber-500 dark:bg-amber-400'}`,
 											'data-active': wh.active ? 'true' : 'false',
-										},
-										wh.active ? '●' : '○',
+										}),
+										createElement('code', { className: 'font-mono text-xs break-all' }, wh.url),
 									),
-									createElement('code', { className: 'pm-wizard-webhook-url' }, wh.url),
 									createElement(
-										'button',
+										Button,
 										{
 											type: 'button',
+											variant: 'ghost',
+											size: 'icon-sm',
 											'data-action': 'delete-webhook',
 											'data-webhook-id': wh.id,
 											disabled: h.deleteLoading,
@@ -123,8 +145,9 @@ export function JiraWebhookAdapter({
 												const base = wh.url.replace(/\/jira\/webhook$/, '');
 												h.deleteJiraWebhook(base);
 											},
-										},
-										'Delete',
+											title: 'Delete webhook',
+										} as React.ComponentProps<typeof Button> & DataProps,
+										createElement(Trash2, { className: 'h-4 w-4' }),
 									),
 								),
 							),
@@ -134,21 +157,23 @@ export function JiraWebhookAdapter({
 		// Create button.
 		createElement(
 			'div',
-			{ className: 'pm-wizard-webhook-create' },
+			{ className: 'space-y-2' },
 			createElement(
-				'button',
+				Button,
 				{
 					type: 'button',
+					variant: 'default',
 					'data-action': 'create-webhook',
 					disabled: createDisabled,
 					onClick: () => h.createJiraWebhook(),
-				},
+				} as React.ComponentProps<typeof Button> & DataProps,
+				h.createLoading ? createElement(Loader2, { className: 'h-4 w-4 animate-spin' }) : null,
 				h.createLoading ? 'Creating…' : 'Create Webhook',
 			),
 			h.createError
 				? createElement(
 						'p',
-						{ className: 'pm-wizard-webhook-error', 'data-state': 'error' },
+						{ className: 'text-sm text-destructive', 'data-state': 'error' },
 						h.createError,
 					)
 				: null,
@@ -157,16 +182,33 @@ export function JiraWebhookAdapter({
 		// Curl fallback.
 		createElement(
 			'details',
-			{ className: 'pm-wizard-webhook-curl' },
+			{
+				className:
+					'rounded-md border border-blue-200 bg-blue-50 px-3 py-2 dark:border-blue-900/50 dark:bg-blue-900/20',
+			},
 			createElement(
 				'summary',
-				null,
-				'Manual webhook creation (alternative: if the button above doesn\u0027t work)',
+				{
+					className:
+						'cursor-pointer select-none text-xs text-blue-700 dark:text-blue-300 font-medium',
+				},
+				"Manual webhook creation (alternative: if the button above doesn't work)",
 			),
 			createElement(
-				'pre',
-				{ className: 'pm-wizard-webhook-curl-command' },
-				buildJiraCurl(state.jiraBaseUrl ?? '', h.callbackBaseUrl),
+				'div',
+				{ className: 'mt-2 relative rounded-md bg-muted border' },
+				createElement(
+					'div',
+					{ className: 'absolute top-2 right-2' },
+					createElement(CopyButton, { text: curlCommand }),
+				),
+				createElement(
+					'pre',
+					{
+						className: 'text-xs font-mono whitespace-pre-wrap break-all p-3 pr-16 overflow-x-auto',
+					},
+					curlCommand,
+				),
 			),
 		),
 	);
diff --git a/web/src/components/projects/pm-providers/linear/webhook-step.tsx b/web/src/components/projects/pm-providers/linear/webhook-step.tsx
index b8ef8250..8fecce8e 100644
--- a/web/src/components/projects/pm-providers/linear/webhook-step.tsx
+++ b/web/src/components/projects/pm-providers/linear/webhook-step.tsx
@@ -1,13 +1,11 @@
 /**
- * Linear webhook step adapter (plan 012/3).
+ * Linear webhook step adapter (plan 012/3; styling restored post-spec-012
+ * follow-up).
  *
  * Linear has no programmatic webhook registration — Linear's API forbids
- * it. This adapter replaces the legacy `LinearWebhookInfoPanel` (plan
- * 012/4 deletes it) and the inlined `LinearWebhookDisplayAdapter` that
- * plan 011/4 staged in `linear/wizard.ts`. Composition: shared
- * `WebhookUrlDisplayStep` (URL + copy) + info banner + 5-step manual
- * setup instructions + `ProjectSecretField` bound to
- * `LINEAR_WEBHOOK_SECRET`.
+ * it. Fragment composition: shared `WebhookUrlDisplayStep` (URL + copy) +
+ * info banner + 5-step manual setup instructions + `ProjectSecretField`
+ * bound to `LINEAR_WEBHOOK_SECRET`.
  *
  * The secret field is NOT a controlled input — `ProjectSecretField`
  * manages its own server round-trip via the project-credentials API.
@@ -16,6 +14,7 @@
  * a controlled secretValue + onSecretChange pattern).
  */
 
+import { Info } from 'lucide-react';
 import { createElement, Fragment, type ReactElement } from 'react';
 import { type ProjectCredentialMeta, ProjectSecretField } from '../../project-secret-field.js';
 import { WebhookUrlDisplayStep } from '../steps/webhook-url-display.js';
@@ -42,16 +41,31 @@ export function LinearWebhookAdapter({ providerHooks }: ProviderWizardStepProps)
 		// Info banner — manual setup required.
 		createElement(
 			'div',
-			{ className: 'pm-wizard-linear-webhook-info', 'data-section': 'info-banner' },
-			createElement(
-				'p',
-				{ className: 'pm-wizard-linear-webhook-info-title' },
-				'Manual Webhook Setup Required',
-			),
+			{
+				className:
+					'rounded-md border border-blue-200 bg-blue-50 px-4 py-3 dark:border-blue-900/50 dark:bg-blue-900/20',
+				'data-section': 'info-banner',
+			},
 			createElement(
-				'p',
-				{ className: 'pm-wizard-linear-webhook-info-body' },
-				'Linear webhooks must be configured manually in your Linear team settings. CASCADE cannot create them programmatically.',
+				'div',
+				{ className: 'flex items-start gap-2' },
+				createElement(Info, {
+					className: 'h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5',
+				}),
+				createElement(
+					'div',
+					{ className: 'space-y-1' },
+					createElement(
+						'p',
+						{ className: 'text-sm font-medium text-blue-700 dark:text-blue-300' },
+						'Manual Webhook Setup Required',
+					),
+					createElement(
+						'p',
+						{ className: 'text-xs text-blue-600 dark:text-blue-400' },
+						'Linear webhooks must be configured manually in your Linear team settings. CASCADE cannot create them programmatically.',
+					),
+				),
 			),
 		),
 
@@ -87,15 +101,17 @@ export function LinearWebhookAdapter({ providerHooks }: ProviderWizardStepProps)
 		// LinearWebhookInfoPanel).
 		createElement(
 			'div',
-			{ className: 'pm-wizard-linear-webhook-instructions' },
+			{ className: 'space-y-2' },
 			createElement(
 				'p',
-				{ className: 'pm-wizard-linear-webhook-instructions-heading' },
+				{ className: 'text-xs text-muted-foreground font-medium' },
 				'Setup instructions:',
 			),
 			createElement(
 				'ol',
-				{ className: 'pm-wizard-linear-webhook-steps' },
+				{
+					className: 'list-decimal list-inside space-y-1 text-xs text-muted-foreground pl-1',
+				},
 				createElement(
 					'li',
 					null,
@@ -106,6 +122,7 @@ export function LinearWebhookAdapter({ providerHooks }: ProviderWizardStepProps)
 							href: 'https://linear.app/settings/api',
 							target: '_blank',
 							rel: 'noopener noreferrer',
+							className: 'underline hover:text-foreground',
 						},
 						'linear.app/settings/api',
 					),
@@ -119,7 +136,7 @@ export function LinearWebhookAdapter({ providerHooks }: ProviderWizardStepProps)
 					'Enable these events (each maps to a CASCADE trigger handler):',
 					createElement(
 						'ul',
-						{ className: 'pm-wizard-linear-webhook-events' },
+						{ className: 'list-disc list-inside ml-4 mt-1 space-y-0.5' },
 						createElement(
 							'li',
 							null,
@@ -152,7 +169,7 @@ export function LinearWebhookAdapter({ providerHooks }: ProviderWizardStepProps)
 		// Project-scope cross-reference (identical copy to legacy).
 		createElement(
 			'p',
-			{ className: 'pm-wizard-linear-webhook-scope-note' },
+			{ className: 'text-xs text-muted-foreground' },
 			'If you also set a Linear ',
 			createElement('strong', null, 'project scope'),
 			' in the Board / Project Selection step, CASCADE applies that filter on its side after receiving each webhook — your Linear webhook configuration stays team-scoped and unchanged.',
diff --git a/web/src/components/projects/pm-providers/trello/webhook-step.tsx b/web/src/components/projects/pm-providers/trello/webhook-step.tsx
index 27f290d0..1d295346 100644
--- a/web/src/components/projects/pm-providers/trello/webhook-step.tsx
+++ b/web/src/components/projects/pm-providers/trello/webhook-step.tsx
@@ -1,10 +1,10 @@
 /**
- * Trello webhook step adapter (plan 012/1).
+ * Trello webhook step adapter (plan 012/1; styling restored post-spec-012
+ * follow-up).
  *
- * Replaces the Trello branch of the legacy `WebhookStep` (plan 012/4
- * deletes that). Fragment composing the shared `WebhookUrlDisplayStep`
- * (URL + copy) with Trello-specific UX: active-webhooks list,
- * programmatic "Create Webhook" button, delete buttons, curl fallback.
+ * Fragment composing the shared `WebhookUrlDisplayStep` (URL + copy) with
+ * Trello-specific UX: active-webhooks list, programmatic "Create Webhook"
+ * button, delete buttons, curl fallback.
  *
  * Rendered as the Trello wizard's `trello-webhook` step Component via the
  * manifest path. All tRPC wiring (webhooks.list/create/delete with
@@ -12,7 +12,11 @@
  * component just renders what it receives.
  */
 
+import { Loader2, Trash2 } from 'lucide-react';
 import { createElement, Fragment, type ReactElement } from 'react';
+import { Button } from '@/components/ui/button.js';
+import { CopyButton } from '@/components/ui/copy-button.js';
+import type { DataProps } from '@/lib/data-props.js';
 import { WebhookUrlDisplayStep } from '../steps/webhook-url-display.js';
 import type { ProviderWizardStepProps } from '../types.js';
 
@@ -62,6 +66,7 @@ export function TrelloWebhookAdapter({
 }: ProviderWizardStepProps): ReactElement {
 	const h = asTrelloWebhookHooks(providerHooks);
 	const createDisabled = !h.callbackBaseUrl || h.createLoading;
+	const curlCommand = buildTrelloCurl(state.trelloBoardId ?? '', h.callbackBaseUrl);
 
 	return createElement(
 		Fragment,
@@ -83,35 +88,52 @@ export function TrelloWebhookAdapter({
 		// Active-webhooks list.
 		createElement(
 			'div',
-			{ className: 'pm-wizard-webhook-active-list', 'data-section': 'active-webhooks' },
+			{
+				className: 'space-y-2',
+				'data-section': 'active-webhooks',
+			},
 			h.webhooksLoading
-				? createElement('p', { 'data-state': 'loading' }, 'Loading webhooks…')
+				? createElement(
+						'p',
+						{
+							'data-state': 'loading',
+							className: 'flex items-center gap-2 text-sm text-muted-foreground',
+						},
+						createElement(Loader2, { className: 'h-4 w-4 animate-spin' }),
+						'Loading webhooks…',
+					)
 				: h.activeTrelloWebhooks.length === 0
 					? createElement(
 							'p',
-							{ className: 'pm-wizard-webhook-empty' },
+							{ className: 'text-sm text-amber-600 dark:text-amber-400' },
 							'No Trello webhooks configured for this project.',
 						)
 					: createElement(
 							'ul',
-							{ className: 'pm-wizard-webhook-list' },
+							{ className: 'space-y-1' },
 							...h.activeTrelloWebhooks.map((wh) =>
 								createElement(
 									'li',
-									{ key: wh.id, className: 'pm-wizard-webhook-row', 'data-webhook-id': wh.id },
+									{
+										key: wh.id,
+										className: 'flex items-center justify-between rounded-md border px-3 py-2',
+										'data-webhook-id': wh.id,
+									},
 									createElement(
-										'span',
-										{
-											className: 'pm-wizard-webhook-status',
+										'div',
+										{ className: 'flex items-center gap-2 text-sm' },
+										createElement('span', {
+											className: `inline-block h-2 w-2 rounded-full ${wh.active ? 'bg-green-500 dark:bg-green-400' : 'bg-amber-500 dark:bg-amber-400'}`,
 											'data-active': wh.active ? 'true' : 'false',
-										},
-										wh.active ? '●' : '○',
+										}),
+										createElement('code', { className: 'font-mono text-xs break-all' }, wh.url),
 									),
-									createElement('code', { className: 'pm-wizard-webhook-url' }, wh.url),
 									createElement(
-										'button',
+										Button,
 										{
 											type: 'button',
+											variant: 'ghost',
+											size: 'icon-sm',
 											'data-action': 'delete-webhook',
 											'data-webhook-id': wh.id,
 											disabled: h.deleteLoading,
@@ -121,8 +143,9 @@ export function TrelloWebhookAdapter({
 												const base = wh.url.replace(/\/trello\/webhook$/, '');
 												h.deleteTrelloWebhook(base);
 											},
-										},
-										'Delete',
+											title: 'Delete webhook',
+										} as React.ComponentProps<typeof Button> & DataProps,
+										createElement(Trash2, { className: 'h-4 w-4' }),
 									),
 								),
 							),
@@ -132,21 +155,23 @@ export function TrelloWebhookAdapter({
 		// Create button.
 		createElement(
 			'div',
-			{ className: 'pm-wizard-webhook-create' },
+			{ className: 'space-y-2' },
 			createElement(
-				'button',
+				Button,
 				{
 					type: 'button',
+					variant: 'default',
 					'data-action': 'create-webhook',
 					disabled: createDisabled,
 					onClick: () => h.createTrelloWebhook(),
-				},
+				} as React.ComponentProps<typeof Button> & DataProps,
+				h.createLoading ? createElement(Loader2, { className: 'h-4 w-4 animate-spin' }) : null,
 				h.createLoading ? 'Creating…' : 'Create Webhook',
 			),
 			h.createError
 				? createElement(
 						'p',
-						{ className: 'pm-wizard-webhook-error', 'data-state': 'error' },
+						{ className: 'text-sm text-destructive', 'data-state': 'error' },
 						h.createError,
 					)
 				: null,
@@ -155,16 +180,33 @@ export function TrelloWebhookAdapter({
 		// Curl fallback.
 		createElement(
 			'details',
-			{ className: 'pm-wizard-webhook-curl' },
+			{
+				className:
+					'rounded-md border border-blue-200 bg-blue-50 px-3 py-2 dark:border-blue-900/50 dark:bg-blue-900/20',
+			},
 			createElement(
 				'summary',
-				null,
-				'Manual webhook creation (alternative: if the button above doesn\u0027t work)',
+				{
+					className:
+						'cursor-pointer select-none text-xs text-blue-700 dark:text-blue-300 font-medium',
+				},
+				"Manual webhook creation (alternative: if the button above doesn't work)",
 			),
 			createElement(
-				'pre',
-				{ className: 'pm-wizard-webhook-curl-command' },
-				buildTrelloCurl(state.trelloBoardId ?? '', h.callbackBaseUrl),
+				'div',
+				{ className: 'mt-2 relative rounded-md bg-muted border' },
+				createElement(
+					'div',
+					{ className: 'absolute top-2 right-2' },
+					createElement(CopyButton, { text: curlCommand }),
+				),
+				createElement(
+					'pre',
+					{
+						className: 'text-xs font-mono whitespace-pre-wrap break-all p-3 pr-16 overflow-x-auto',
+					},
+					curlCommand,
+				),
 			),
 		),
 	);

From fb432212c50580a21646ccace22b9177d9387acb Mon Sep 17 00:00:00 2001
From: Zbigniew Sobiecki <zbigniew@sobiecki.name>
Date: Sat, 18 Apr 2026 19:22:41 +0000
Subject: [PATCH 5/5] test(pm-wizard): guard against raw HTML interactive
 elements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New regression test walks every .tsx under pm-providers/** and fails
CI if any file contains createElement('input'|'button'|'select'|'label')
or <input/<button/<select/<label in JSX. Comments are stripped before
matching to avoid false positives on JSDoc prose.

This is the structural guard that was missing when specs 010/3, 011,
and 012 silently stripped the PM wizard styling — root tsc and SSR
tests passed because neither asserts visual output.

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
---
 .../unit/web/pm-wizard-styling-guard.test.ts  | 98 +++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 tests/unit/web/pm-wizard-styling-guard.test.ts

diff --git a/tests/unit/web/pm-wizard-styling-guard.test.ts b/tests/unit/web/pm-wizard-styling-guard.test.ts
new file mode 100644
index 00000000..40483167
--- /dev/null
+++ b/tests/unit/web/pm-wizard-styling-guard.test.ts
@@ -0,0 +1,98 @@
+/**
+ * Regression guard: PM wizard component files must not render raw HTML
+ * interactive elements (<input>, <button>, <select>, <label>) directly.
+ * They must route through the shadcn/ui primitives (`Input`, `Button`,
+ * `NativeSelect`, `Label`) so the dashboard theme + Tailwind reset apply.
+ *
+ * The original regression (specs 010/3 + 011 + 012) shipped raw elements
+ * with BEM-style class names (`pm-wizard-*`) that were defined nowhere in
+ * the CSS bundle — on the dark theme the Linear API-key input rendered as
+ * an invisible <input type="password"> because there was no border, no
+ * padding, and browser-default transparent background. Root `tsc` and the
+ * SSR tests passed because neither asserted visual output.
+ *
+ * This test greps every `.tsx` source under pm-providers/** for
+ * `createElement('input' | 'button' | 'select' | 'label', ...)` and JSX
+ * `<input | <button | <select | <label` patterns, asserting zero matches.
+ */
+
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const REPO_ROOT = resolve(__dirname, '..', '..', '..');
+const WIZARD_ROOT = resolve(REPO_ROOT, 'web/src/components/projects/pm-providers');
+
+// Files allowed to use a raw element, with a reason. Empty by design — add
+// entries only with justification.
+const ALLOWLIST = new Set<string>([]);
+
+const RAW_HTML_ELEMENTS = ['input', 'button', 'select', 'label'] as const;
+
+function walkTsx(dir: string, out: string[] = []): string[] {
+	for (const entry of readdirSync(dir)) {
+		const full = join(dir, entry);
+		const st = statSync(full);
+		if (st.isDirectory()) {
+			if (entry === 'node_modules' || entry === 'dist') continue;
+			walkTsx(full, out);
+		} else if (entry.endsWith('.tsx')) {
+			out.push(full);
+		}
+	}
+	return out;
+}
+
+/**
+ * Strip block comments (`/* ... *\/`) and line comments (`// ...`) so that
+ * mentions of raw elements in JSDoc prose don't trigger false positives.
+ */
+function stripComments(source: string): string {
+	// Block comments — non-greedy, multi-line.
+	let out = source.replace(/\/\*[\s\S]*?\*\//g, '');
+	// Line comments — everything from `//` to EOL. Naive but sufficient here:
+	// the wizard files never embed `//` inside string literals in a way that
+	// would confuse this (URLs use template literals / string concat).
+	out = out.replace(/\/\/[^\n]*/g, '');
+	return out;
+}
+
+function findViolations(source: string): string[] {
+	const stripped = stripComments(source);
+	const violations: string[] = [];
+	for (const tag of RAW_HTML_ELEMENTS) {
+		const createElementRe = new RegExp(`createElement\\(\\s*['"]${tag}['"]`, 'g');
+		for (const m of stripped.matchAll(createElementRe)) {
+			violations.push(`createElement('${tag}'): index ${m.index}`);
+		}
+		const jsxRe = new RegExp(`<${tag}(?=[\\s/>])`, 'g');
+		for (const m of stripped.matchAll(jsxRe)) {
+			violations.push(`<${tag}: index ${m.index}`);
+		}
+	}
+	return violations;
+}
+
+describe('pm-wizard styling guard', () => {
+	const files = walkTsx(WIZARD_ROOT)
+		.map((abs) => relative(REPO_ROOT, abs))
+		.sort();
+
+	it('finds wizard component files to audit', () => {
+		expect(files.length).toBeGreaterThan(0);
+	});
+
+	it.each(files)('%s uses shadcn primitives, not raw HTML interactive elements', (relPath) => {
+		if (ALLOWLIST.has(relPath)) return;
+		const source = readFileSync(resolve(REPO_ROOT, relPath), 'utf8');
+		const violations = findViolations(source);
+		expect(
+			violations,
+			`${relPath} must route interactive elements through shadcn primitives ` +
+				`(Input, Button, NativeSelect, Label). Found raw HTML: ${violations.join(', ')}`,
+		).toEqual([]);
+	});
+});