From 144e417d9c6c425dd2083b747ad8b7396da62b64 Mon Sep 17 00:00:00 2001
From: Zbigniew Sobiecki <zbigniew@sobiecki.name>
Date: Sat, 18 Apr 2026 20:11:58 +0000
Subject: [PATCH 1/5] feat(ui): add color swatch to ComboboxOption
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Optional `swatch` field on ComboboxOption. When set, the Combobox
renders a 12×12 rounded dot before the label in both the trigger
(selected value) and every option row in the dropdown. Accepts any
CSS color value — hex/rgb/named. Additive; existing callers that
don't set `swatch` are unchanged.

PM wizard label picker (next commit) uses this so operators can
distinguish `cascade-*` labels at a glance.

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
---
 web/src/components/ui/combobox.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ui/combobox.tsx b/web/src/components/ui/combobox.tsx
index 787fccb6..8883a9d2 100644
--- a/web/src/components/ui/combobox.tsx
+++ b/web/src/components/ui/combobox.tsx
@@ -12,6 +12,12 @@ export interface ComboboxOption {
 	detail?: string;
 	/** Optional group for organizing options */
 	group?: string;
+	/**
+	 * Optional color swatch shown as an 8x8 rounded dot before the label.
+	 * Any CSS color (hex, rgb(), named) works. Used by the PM-wizard label
+	 * pickers so operators can tell `cascade-*` labels apart at a glance.
+	 */
+	swatch?: string;
 }
 
 interface ComboboxProps {
@@ -85,8 +91,17 @@ export function Combobox({
 					disabled={disabled}
 					className={cn('w-full justify-between font-normal', className)}
 				>
-					<span className="truncate text-left">
-						{displayValue || <span className="text-muted-foreground">{emptyLabel}</span>}
+					<span className="flex min-w-0 flex-1 items-center gap-2 text-left">
+						{selectedOption?.swatch && (
+							<span
+								aria-hidden="true"
+								className="inline-block h-3 w-3 shrink-0 rounded-full border border-black/10 dark:border-white/10"
+								style={{ backgroundColor: selectedOption.swatch }}
+							/>
+						)}
+						<span className="truncate">
+							{displayValue || <span className="text-muted-foreground">{emptyLabel}</span>}
+						</span>
 					</span>
 					<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 				</Button>
@@ -137,6 +152,13 @@ export function Combobox({
 													value === option.value ? 'opacity-100' : 'opacity-0',
 												)}
 											/>
+											{option.swatch && (
+												<span
+													aria-hidden="true"
+													className="mr-2 inline-block h-3 w-3 shrink-0 rounded-full border border-black/10 dark:border-white/10"
+													style={{ backgroundColor: option.swatch }}
+												/>
+											)}
 											<span className="flex-1 truncate">{option.label}</span>
 											{option.detail && (
 												<span className="ml-2 shrink-0 text-xs text-muted-foreground">

From b4bbb99b63bef087db91f8a8c565472a5dfb35c0 Mon Sep 17 00:00:00 2001
From: Zbigniew Sobiecki <zbigniew@sobiecki.name>
Date: Sat, 18 Apr 2026 20:12:19 +0000
Subject: [PATCH 2/5] feat(pm-wizard): redesign label-mapping step UX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Labels step shipped with three controls per row — a dropdown, a
text input pre-filled with the SAME value as the dropdown, and a
Create button — repeated for every slot whether mapped or not.
Confusing, noisy, and makes fresh setup a 5-click chore.

This rewrite:

- **Searchable Combobox** replaces the plain <select> for enum-mode
  rows (Linear + Trello). Each label shows a color swatch so
  `cascade-*` labels are visually distinguishable.
- **Bulk-create banner** at the top: when ≥1 slot has a default but
  no mapping, one click creates every missing label with canonical
  defaults (5 clicks → 1). Hidden when every slot is mapped or when
  the provider doesn't declare `createLabel`. Wires the existing but
  previously unused `createMissingLabelsMutation` hook.
- **Per-row Create form** now renders only when the slot is unmapped.
  Mapped rows show a single clean Combobox. Cuts visual clutter ~50%.

Free-text mode (JIRA) is unchanged — plain Input per slot.

The Trello and Linear `useProviderHooks` expose the new
`onCreateMissingLabels` + `creatingMissingLabels` values; the
adapters pass them through. JIRA doesn't declare `createLabel` so
the banner stays hidden automatically.

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
---
 .../projects/pm-providers/linear/wizard.ts    |  20 +
 .../pm-providers/steps/label-mapping.tsx      | 424 ++++++++++++------
 .../projects/pm-providers/trello/wizard.ts    |  19 +
 3 files changed, 314 insertions(+), 149 deletions(-)

diff --git a/web/src/components/projects/pm-providers/linear/wizard.ts b/web/src/components/projects/pm-providers/linear/wizard.ts
index c8a80a90..36fca642 100644
--- a/web/src/components/projects/pm-providers/linear/wizard.ts
+++ b/web/src/components/projects/pm-providers/linear/wizard.ts
@@ -99,6 +99,10 @@ interface LinearProviderHooks {
 		readonly color?: string;
 	}>;
 	readonly onCreateLabel: (slotKey: string, name: string, color?: string) => void;
+	readonly onCreateMissingLabels: (
+		slots: ReadonlyArray<{ slot: string; name: string; color?: string }>,
+	) => void;
+	readonly creatingMissingLabels: boolean;
 	readonly projectOptions: ReadonlyArray<{ readonly id: string; readonly name: string }>;
 	readonly projectsLoading: boolean;
 	readonly projectsError: string | undefined;
@@ -173,6 +177,8 @@ function LinearLabelMappingAdapter({
 		mappings: state.linearLabels,
 		onMappingChange: (key, value) => dispatch({ type: 'SET_LINEAR_LABEL', key, value }),
 		onCreateLabel: h.onCreateLabel,
+		onCreateMissingLabels: h.onCreateMissingLabels,
+		creatingMissing: h.creatingMissingLabels,
 		labelDefaults: LINEAR_LABEL_DEFAULTS,
 		loading: h.teamDetailsLoading,
 	});
@@ -275,6 +281,18 @@ export const linearProviderWizard: ProviderWizardDefinition = {
 			);
 		};
 
+		const onCreateMissingLabels = (
+			slots: ReadonlyArray<{ slot: string; name: string; color?: string }>,
+		) => {
+			// Resolve default colors for any entry that didn't carry one.
+			const resolved = slots.map((s) => ({
+				slot: s.slot,
+				name: s.name,
+				color: s.color ?? LINEAR_LABEL_DEFAULTS[s.slot]?.color ?? '#0284C7',
+			}));
+			labels.createMissingLabelsMutation.mutate(resolved);
+		};
+
 		const webhookUrl = projectId ? `${window.location.origin}/webhooks/${projectId}/linear` : '';
 
 		const details = state.linearTeamDetails;
@@ -290,6 +308,8 @@ export const linearProviderWizard: ProviderWizardDefinition = {
 			providerStates: details?.states ?? [],
 			providerLabels: details?.labels ?? [],
 			onCreateLabel,
+			onCreateMissingLabels,
+			creatingMissingLabels: labels.createMissingLabelsMutation.isPending,
 			projectOptions: state.linearProjects.map((p) => ({ id: p.id, name: p.name })),
 			projectsLoading: discovery.linearProjectsMutation.isPending,
 			projectsError: discovery.linearProjectsMutation.isError
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 366298f1..5db6895d 100644
--- a/web/src/components/projects/pm-providers/steps/label-mapping.tsx
+++ b/web/src/components/projects/pm-providers/steps/label-mapping.tsx
@@ -1,22 +1,28 @@
 /**
- * Shared label-mapping step component (plan 010/3; styling restored
- * post-spec-012 follow-up).
+ * Shared label-mapping step component.
  *
  * Two modes:
- * - When `providerLabels.length > 0` (Trello, Linear): render a dropdown
- *   per CASCADE label slot (processing / processed / error / ready).
- * - When `providerLabels` is empty (JIRA — free-form): render text inputs
- *   that accept any label name.
+ * - **Enum mode** (Trello, Linear — when `providerLabels.length > 0`):
+ *   renders a searchable `Combobox` per CASCADE slot with color swatches
+ *   next to each label. A bulk-create banner at the top fires
+ *   `onCreateMissingLabels` for every slot that has a `labelDefaults`
+ *   entry but no existing mapping — one click covers the common
+ *   fresh-setup case. When a slot is already mapped, only the picker
+ *   renders; the per-row create input collapses to de-clutter the step.
+ * - **Free-text mode** (JIRA — when `providerLabels` is empty): renders
+ *   plain `Input` fields per slot. Unchanged from earlier shape.
  *
- * When `onCreateLabel` is supplied (provider declares `createLabel` hook),
- * a "Create new label" button appears next to each dropdown.
+ * SSR note: enum mode uses the shared `Combobox` (radix Popover + cmdk).
+ * `renderToStaticMarkup` tests can't traverse through that — new tests
+ * use the React-element-tree pattern established by
+ * `tests/unit/web/steps/container-pick.test.ts`.
  */
 
-import { createElement, useState } from 'react';
+import { createElement, type ReactNode, useState } from 'react';
 import { Button } from '@/components/ui/button.js';
+import { Combobox, type ComboboxOption } from '@/components/ui/combobox.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';
 
@@ -34,15 +40,27 @@ export interface LabelMappingStepProps {
 	readonly mappings: Readonly<Record<string, string>>;
 	readonly onMappingChange: (slotKey: string, labelValue: string) => void;
 	readonly onCreateLabel?: (slotKey: string, name: string, color?: string) => void;
+	/**
+	 * Fires bulk creation of every slot that has a `labelDefaults` entry
+	 * but no existing mapping. Omitting the prop hides the bulk banner.
+	 * Called with the subset of slots that need creating; the provider's
+	 * hook translates each into a `pm.discovery.createLabel` call.
+	 */
+	readonly onCreateMissingLabels?: (
+		slots: ReadonlyArray<{ slot: string; name: string; color?: string }>,
+	) => void;
 	readonly loading?: boolean;
 	readonly error?: string;
+	/** True while an `onCreateMissingLabels` call is in flight. */
+	readonly creatingMissing?: boolean;
 	/**
-	 * Plan 011/1 (forward-edit for 011/2 Trello migration): when the provider
-	 * has canonical per-slot default names/colors (Trello: `cascade-ready`,
-	 * `cascade-processing`, etc.), this pre-populates the inline Create
-	 * form's text input. User can still override. The `color` is passed
-	 * through to `onCreateLabel(slot, name, color)`. Omitting the prop
-	 * keeps the existing "user types everything" UX unchanged.
+	 * Canonical per-slot default names + colors (e.g. Linear:
+	 * `cascade-ready` @ `#0284C7`). Drives three affordances:
+	 *  - Pre-fills the per-row Create input with the default name.
+	 *  - Passes `color` through to `onCreateLabel(slot, name, color)`.
+	 *  - Enables the bulk-create banner for slots that have a default
+	 *    but no mapping yet.
+	 * Omitting the prop keeps the "user types everything" UX unchanged.
 	 */
 	readonly labelDefaults?: Readonly<
 		Record<string, { readonly name: string; readonly color?: string }>
@@ -57,149 +75,257 @@ export function LabelMappingStep({
 	mappings,
 	onMappingChange,
 	onCreateLabel,
+	onCreateMissingLabels,
 	loading,
 	error,
+	creatingMissing,
 	labelDefaults,
 }: LabelMappingStepProps) {
-	// Seed the create-form text with labelDefaults[slot].name when supplied.
-	const [newLabelNames, setNewLabelNames] = useState<Record<string, string>>(() => {
-		if (!labelDefaults) return {};
-		const seed: Record<string, string> = {};
-		for (const [slot, def] of Object.entries(labelDefaults)) {
-			seed[slot] = def.name;
-		}
-		return seed;
-	});
 	const useFreeText = providerLabels.length === 0;
 
+	const rootProps = {
+		'data-step-component': 'label-mapping',
+		'data-provider-id': providerId,
+		'data-step-id': step.id,
+		'data-mode': useFreeText ? 'free-text' : 'enum',
+		className: 'space-y-3',
+	};
+
+	if (loading) {
+		return createElement(
+			'div',
+			rootProps,
+			createElement(
+				'p',
+				{ 'data-state': 'loading', className: 'text-sm text-muted-foreground' },
+				'Loading labels…',
+			),
+		);
+	}
+	if (error) {
+		return createElement(
+			'div',
+			rootProps,
+			createElement(
+				'p',
+				{ 'data-state': 'error', className: 'text-sm text-destructive' },
+				`Error: ${error}`,
+			),
+		);
+	}
+
+	// Slots that have a labelDefaults entry and no current mapping — the
+	// bulk-create banner acts on exactly these.
+	const missingSlots = labelDefaults
+		? labelSlots
+				.filter((slot) => !mappings[slot.key] && labelDefaults[slot.key])
+				.map((slot) => ({
+					slot: slot.key,
+					name: labelDefaults[slot.key].name,
+					color: labelDefaults[slot.key].color,
+				}))
+		: [];
+	const showBulkBanner =
+		!useFreeText && !!onCreateMissingLabels && !!onCreateLabel && missingSlots.length >= 1;
+
+	const comboboxOptions: ComboboxOption[] = providerLabels.map((label) => ({
+		value: label.id,
+		label: label.name,
+		swatch: label.color,
+	}));
+
 	return createElement(
 		'div',
-		{
-			'data-step-component': 'label-mapping',
-			'data-provider-id': providerId,
-			'data-step-id': step.id,
-			'data-mode': useFreeText ? 'free-text' : 'enum',
-			className: 'space-y-3',
-		},
-		loading
-			? createElement(
-					'p',
-					{ 'data-state': 'loading', className: 'text-sm text-muted-foreground' },
-					'Loading labels…',
-				)
-			: error
-				? createElement(
-						'p',
-						{ 'data-state': 'error', className: 'text-sm text-destructive' },
-						`Error: ${error}`,
-					)
-				: createElement(
-						'div',
-						{ className: 'space-y-2' },
-						...labelSlots.map((slot) => {
-							const currentValue = mappings[slot.key] ?? '';
-							const fieldId = `label-${slot.key}`;
+		rootProps,
+		showBulkBanner
+			? renderBulkBanner(missingSlots, onCreateMissingLabels, !!creatingMissing)
+			: null,
+		createElement(
+			'div',
+			{ className: 'space-y-2' },
+			...labelSlots.map((slot) => {
+				const currentValue = mappings[slot.key] ?? '';
+				const fieldId = `label-${slot.key}`;
 
-							if (useFreeText) {
-								return createElement(
-									'div',
-									{
-										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: 'space-y-2', 'data-slot': slot.key },
-								createElement(
-									'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: '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,
-												{
-													type: 'button',
-													variant: 'outline',
-													size: 'sm',
-													onClick: () => {
-														const name = newLabelNames[slot.key];
-														if (name) {
-															const color = labelDefaults?.[slot.key]?.color;
-															onCreateLabel(slot.key, name, color);
-															setNewLabelNames((prev) => ({ ...prev, [slot.key]: '' }));
-														}
-													},
-													'data-action': 'create-label',
-													'data-create-color': labelDefaults?.[slot.key]?.color,
-												} as React.ComponentProps<typeof Button> & DataProps,
-												'Create label',
-											),
-										)
-									: null,
-							);
+				if (useFreeText) {
+					return createElement(
+						'div',
+						{
+							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',
 						}),
+					);
+				}
+
+				const isMapped = !!currentValue && providerLabels.some((l) => l.id === currentValue);
+				const labelDefault = labelDefaults?.[slot.key];
+				const showCreateForm = !!onCreateLabel && !isMapped;
+				return createElement(
+					'div',
+					{
+						key: slot.key,
+						className: 'space-y-2',
+						'data-slot': slot.key,
+						'data-mapped': isMapped ? 'true' : 'false',
+						'data-has-create-form': showCreateForm ? 'true' : 'false',
+					} as React.ComponentProps<'div'> & DataProps,
+					createElement(
+						'div',
+						{ className: 'flex items-center gap-3' },
+						createElement(
+							Label,
+							{
+								htmlFor: fieldId,
+								className: 'w-32 shrink-0 text-xs text-muted-foreground',
+							},
+							slot.label,
+						),
+						createElement(
+							'div',
+							{ className: 'flex-1' },
+							createElement(Combobox, {
+								id: fieldId,
+								value: currentValue,
+								onChange: (value: string) => onMappingChange(slot.key, value),
+								options: comboboxOptions,
+								emptyLabel: '— Select —',
+								placeholder: 'Search labels…',
+							}),
+						),
 					),
+					// Per-row Create form: shown only when the slot is NOT yet
+					// mapped and the provider supports label creation. Collapsed
+					// once mapped so the step stays visually clean. The form owns
+					// its own input state so the parent step is a pure function
+					// (testable via direct call + element-tree traversal).
+					showCreateForm && onCreateLabel
+						? createElement(CreateLabelForm, {
+								slotKey: slot.key,
+								defaultName: labelDefault?.name,
+								defaultColor: labelDefault?.color,
+								onCreate: onCreateLabel,
+							})
+						: null,
+				) as ReactNode;
+			}),
+		),
+	);
+}
+
+// ────────────────────────────────────────────────────────────────────────
+// Helper components — broken out so the main function stays small and so
+// the render output is easier to reason about in React DevTools.
+// ────────────────────────────────────────────────────────────────────────
+
+/**
+ * Bulk-create banner: stateless, inlined as a helper (not a component)
+ * so its `data-*` attributes live directly in `LabelMappingStep`'s
+ * returned tree. Tests traverse the element tree without a renderer
+ * and need to see the banner without drilling into a nested component.
+ */
+function renderBulkBanner(
+	missingSlots: ReadonlyArray<{ slot: string; name: string; color?: string }>,
+	onCreate:
+		| ((slots: ReadonlyArray<{ slot: string; name: string; color?: string }>) => void)
+		| undefined,
+	busy: boolean,
+): ReactNode {
+	const count = missingSlots.length;
+	return createElement(
+		'div',
+		{
+			'data-bulk-create-banner': 'true',
+			'data-missing-count': String(count),
+			className:
+				'flex flex-wrap items-center gap-3 rounded-md border border-primary/30 bg-primary/5 px-3 py-2',
+		} as React.ComponentProps<'div'> & DataProps,
+		createElement(
+			'div',
+			{ className: 'flex-1 text-sm' },
+			createElement(
+				'p',
+				{ className: 'font-medium' },
+				`Create ${count} missing CASCADE ${count === 1 ? 'label' : 'labels'} with defaults`,
+			),
+			createElement(
+				'p',
+				{ className: 'mt-0.5 text-xs text-muted-foreground' },
+				missingSlots.map((s) => s.name).join(' · '),
+			),
+		),
+		createElement(
+			Button,
+			{
+				type: 'button',
+				variant: 'default',
+				size: 'sm',
+				'data-action': 'create-missing-labels',
+				disabled: busy,
+				onClick: () => onCreate?.(missingSlots),
+			} as React.ComponentProps<typeof Button> & DataProps,
+			busy ? 'Creating…' : 'Create all',
+		),
+	);
+}
+
+interface CreateLabelFormProps {
+	readonly slotKey: string;
+	readonly defaultName?: string;
+	readonly defaultColor?: string;
+	readonly onCreate: (slotKey: string, name: string, color?: string) => void;
+}
+
+/**
+ * Per-slot inline "Create label" form. Owns its input state so the
+ * parent `LabelMappingStep` function stays pure — tests call the step
+ * directly and traverse the returned tree without a React renderer.
+ */
+function CreateLabelForm({ slotKey, defaultName, defaultColor, onCreate }: CreateLabelFormProps) {
+	const [newLabelName, setNewLabelName] = useState(defaultName ?? '');
+	return createElement(
+		'div',
+		{ className: 'flex items-center gap-2 pl-32' },
+		createElement(Input, {
+			type: 'text',
+			placeholder: 'New label name',
+			value: newLabelName,
+			onChange: (e: React.ChangeEvent<HTMLInputElement>) => setNewLabelName(e.target.value),
+			className: 'h-8 text-xs flex-1',
+		}),
+		createElement(
+			Button,
+			{
+				type: 'button',
+				variant: 'outline',
+				size: 'sm',
+				onClick: () => {
+					if (newLabelName) {
+						onCreate(slotKey, newLabelName, defaultColor);
+						setNewLabelName('');
+					}
+				},
+				'data-action': 'create-label',
+				'data-create-color': defaultColor,
+			} as React.ComponentProps<typeof Button> & DataProps,
+			'Create',
+		),
 	);
 }
diff --git a/web/src/components/projects/pm-providers/trello/wizard.ts b/web/src/components/projects/pm-providers/trello/wizard.ts
index e28c8f96..7c34f795 100644
--- a/web/src/components/projects/pm-providers/trello/wizard.ts
+++ b/web/src/components/projects/pm-providers/trello/wizard.ts
@@ -111,6 +111,10 @@ interface TrelloProviderHooks {
 		readonly type: string;
 	}>;
 	readonly onCreateLabel: (slotKey: string, name: string, color?: string) => void;
+	readonly onCreateMissingLabels: (
+		slots: ReadonlyArray<{ slot: string; name: string; color?: string }>,
+	) => void;
+	readonly creatingMissingLabels: boolean;
 	readonly onCreateCustomField: (slotKey: string, name: string) => void;
 	readonly webhookUrl: string;
 	readonly creatingSlot: string | null;
@@ -184,6 +188,8 @@ function TrelloLabelMappingAdapter({
 		mappings: state.trelloLabelMappings,
 		onMappingChange: (key, value) => dispatch({ type: 'SET_TRELLO_LABEL_MAPPING', key, value }),
 		onCreateLabel: h.onCreateLabel,
+		onCreateMissingLabels: h.onCreateMissingLabels,
+		creatingMissing: h.creatingMissingLabels,
 		labelDefaults: TRELLO_LABEL_DEFAULTS,
 		loading: h.boardDetailsLoading,
 	});
@@ -290,6 +296,17 @@ export const trelloProviderWizard: ProviderWizardDefinition = {
 			);
 		};
 
+		const onCreateMissingLabels = (
+			slots: ReadonlyArray<{ slot: string; name: string; color?: string }>,
+		) => {
+			const resolved = slots.map((s) => ({
+				slot: s.slot,
+				name: s.name,
+				color: s.color ?? TRELLO_LABEL_DEFAULTS[s.slot]?.color ?? 'sky',
+			}));
+			labels.createMissingLabelsMutation.mutate(resolved);
+		};
+
 		const onCreateCustomField = (_slotKey: string, name: string) => {
 			customField.createCustomFieldMutation.mutate({ name });
 		};
@@ -354,6 +371,8 @@ export const trelloProviderWizard: ProviderWizardDefinition = {
 			providerLabels: boardDetails?.labels ?? [],
 			providerCustomFields: boardDetails?.customFields.filter((f) => f.type === 'number') ?? [],
 			onCreateLabel,
+			onCreateMissingLabels,
+			creatingMissingLabels: labels.createMissingLabelsMutation.isPending,
 			onCreateCustomField,
 			webhookUrl,
 			creatingSlot,

From bcb82482c13798ba656789a9e4cabc0ea8abbc4e Mon Sep 17 00:00:00 2001
From: Zbigniew Sobiecki <zbigniew@sobiecki.name>
Date: Sat, 18 Apr 2026 20:12:36 +0000
Subject: [PATCH 3/5] test(pm-wizard): cover redesigned label-mapping step
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Migrates the test strategy: enum mode uses element-tree traversal
(same pattern as container-pick.test.ts) because the new Combobox-
based rendering can't SSR through radix Popover. Free-text mode stays
on renderToStaticMarkup.

Adds coverage for the new UX contracts:
- Each slot renders a Combobox with `swatch` mapped from label.color.
- Mapped rows get `data-mapped="true"` and `data-has-create-form="false"`.
- Bulk banner renders when missing-with-defaults ≥ 1 and both
  onCreateLabel + onCreateMissingLabels are supplied; hides otherwise.

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
---
 tests/unit/web/steps/label-mapping.test.ts | 314 ++++++++++++++-------
 1 file changed, 210 insertions(+), 104 deletions(-)

diff --git a/tests/unit/web/steps/label-mapping.test.ts b/tests/unit/web/steps/label-mapping.test.ts
index 8cbadf1f..dabbbc7c 100644
--- a/tests/unit/web/steps/label-mapping.test.ts
+++ b/tests/unit/web/steps/label-mapping.test.ts
@@ -1,12 +1,18 @@
 /**
- * Tests for the shared LabelMappingStep (plan 010/3 task 1).
+ * Tests for the shared LabelMappingStep.
+ *
+ * Enum-mode rows render the shared `Combobox`, so we traverse the React
+ * element tree (same pattern as `container-pick.test.ts`) instead of
+ * `renderToStaticMarkup` — radix-ui's Popover breaks SSR in tests.
+ * Free-text mode (JIRA) stays plain HTML and keeps using SSR assertions.
  */
 
-import { createElement } from 'react';
+import { createElement, isValidElement, type ReactElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, expect, it } from 'vitest';
 import type { StandardStep } from '../../../../src/integrations/pm/manifest.js';
 import { LabelMappingStep } from '../../../../web/src/components/projects/pm-providers/steps/label-mapping.js';
+import { Combobox, type ComboboxOption } from '../../../../web/src/components/ui/combobox.js';
 
 const step: StandardStep = { kind: 'label-mapping', id: 'labels' };
 
@@ -16,130 +22,230 @@ const labelSlots = [
 ];
 
 const providerLabels = [
-	{ id: 'lbl-processing', name: 'cascade-processing', color: 'blue' },
-	{ id: 'lbl-error', name: 'cascade-error', color: 'red' },
+	{ id: 'lbl-processing', name: 'cascade-processing', color: '#2563EB' },
+	{ id: 'lbl-error', name: 'cascade-error', color: '#DC2626' },
 ];
 
-describe('LabelMappingStep', () => {
-	it('renders dropdowns when providerLabels is populated (enum mode)', () => {
-		const html = renderToStaticMarkup(
-			createElement(LabelMappingStep, {
-				step,
-				providerId: 'trello',
-				labelSlots,
-				providerLabels,
-				mappings: {},
-				onMappingChange: () => {},
-			}),
-		);
-		expect(html).toContain('data-mode="enum"');
-		expect(html).toContain('cascade-processing');
-		expect(html).toContain('cascade-error');
+/**
+ * Walk the element tree and collect every `[data-slot=<slotKey>]` row
+ * along with the Combobox it contains (if any). Used by the enum-mode
+ * tests because SSR-through-Combobox is out.
+ */
+function collectSlotRows(
+	element: ReactElement,
+): Array<{ slotKey: string; row: ReactElement; combobox: ReactElement | null }> {
+	const rows: Array<{ slotKey: string; row: ReactElement; combobox: ReactElement | null }> = [];
+	function visit(node: unknown) {
+		if (!isValidElement(node)) return;
+		const props = node.props as Record<string, unknown>;
+		const slotKey = props['data-slot'];
+		if (typeof slotKey === 'string') {
+			rows.push({ slotKey, row: node, combobox: findComboboxDescendant(node) });
+		}
+		const children = props.children;
+		if (Array.isArray(children)) {
+			for (const child of children) visit(child);
+		} else {
+			visit(children);
+		}
+	}
+	visit(element);
+	return rows;
+}
+
+function findComboboxDescendant(element: ReactElement): ReactElement | null {
+	if (!isValidElement(element)) return null;
+	if (element.type === Combobox) return element;
+	const children = (element.props as { children?: unknown }).children;
+	if (Array.isArray(children)) {
+		for (const child of children) {
+			const found = isValidElement(child) ? findComboboxDescendant(child) : null;
+			if (found) return found;
+		}
+	} else if (isValidElement(children)) {
+		return findComboboxDescendant(children);
+	}
+	return null;
+}
+
+/** Find the bulk-create banner div via `data-bulk-create-banner`. */
+function findBulkBanner(element: ReactElement): ReactElement | null {
+	if (!isValidElement(element)) return null;
+	const props = element.props as Record<string, unknown>;
+	if (props['data-bulk-create-banner'] === 'true') return element;
+	const children = props.children;
+	if (Array.isArray(children)) {
+		for (const child of children) {
+			const found = isValidElement(child) ? findBulkBanner(child) : null;
+			if (found) return found;
+		}
+	} else if (isValidElement(children)) {
+		return findBulkBanner(children);
+	}
+	return null;
+}
+
+describe('LabelMappingStep — enum mode', () => {
+	it('renders one Combobox per slot with labels mapped to ComboboxOption[] including color swatch', () => {
+		const tree = LabelMappingStep({
+			step,
+			providerId: 'linear',
+			labelSlots,
+			providerLabels,
+			mappings: {},
+			onMappingChange: () => {},
+		});
+		const rows = collectSlotRows(tree);
+		expect(rows.map((r) => r.slotKey)).toEqual(['processing', 'error']);
+		for (const { combobox } of rows) {
+			expect(combobox).not.toBeNull();
+			const options = (combobox?.props as { options: ComboboxOption[] }).options;
+			expect(options).toEqual([
+				{ value: 'lbl-processing', label: 'cascade-processing', swatch: '#2563EB' },
+				{ value: 'lbl-error', label: 'cascade-error', swatch: '#DC2626' },
+			]);
+		}
 	});
 
-	it('renders text inputs when providerLabels is empty (free-text mode, e.g. JIRA)', () => {
-		const html = renderToStaticMarkup(
-			createElement(LabelMappingStep, {
-				step,
-				providerId: 'jira',
-				labelSlots,
-				providerLabels: [],
-				mappings: { processing: 'cascade-processing' },
-				onMappingChange: () => {},
-			}),
-		);
-		expect(html).toContain('data-mode="free-text"');
-		expect(html).toContain('placeholder="Label name"');
-		expect(html).toMatch(/id="label-processing"[^>]*value="cascade-processing"/);
+	it('marks the root as data-mode="enum" when providerLabels is non-empty', () => {
+		const tree = LabelMappingStep({
+			step,
+			providerId: 'linear',
+			labelSlots,
+			providerLabels,
+			mappings: {},
+			onMappingChange: () => {},
+		});
+		expect((tree.props as Record<string, unknown>)['data-mode']).toBe('enum');
 	});
 
-	it('shows "Create label" button when onCreateLabel is supplied', () => {
-		const html = renderToStaticMarkup(
-			createElement(LabelMappingStep, {
-				step,
-				providerId: 'trello',
-				labelSlots,
-				providerLabels,
-				mappings: {},
-				onMappingChange: () => {},
-				onCreateLabel: () => {},
-			}),
-		);
-		expect(html).toContain('data-action="create-label"');
+	it('collapses the per-row Create input once a slot is mapped', () => {
+		const tree = LabelMappingStep({
+			step,
+			providerId: 'linear',
+			labelSlots,
+			providerLabels,
+			mappings: { processing: 'lbl-processing' },
+			onMappingChange: () => {},
+			onCreateLabel: () => {},
+		});
+		const rows = collectSlotRows(tree);
+		const processing = rows.find((r) => r.slotKey === 'processing');
+		const error = rows.find((r) => r.slotKey === 'error');
+		expect(processing).toBeDefined();
+		expect(error).toBeDefined();
+		const processingProps = processing?.row.props as Record<string, unknown>;
+		const errorProps = error?.row.props as Record<string, unknown>;
+		expect(processingProps['data-mapped']).toBe('true');
+		expect(processingProps['data-has-create-form']).toBe('false');
+		expect(errorProps['data-mapped']).toBe('false');
+		expect(errorProps['data-has-create-form']).toBe('true');
 	});
 
-	it('hides "Create label" button when onCreateLabel is not supplied', () => {
-		const html = renderToStaticMarkup(
-			createElement(LabelMappingStep, {
-				step,
-				providerId: 'linear',
-				labelSlots,
-				providerLabels,
-				mappings: {},
-				onMappingChange: () => {},
-			}),
-		);
-		expect(html).not.toContain('data-action="create-label"');
+	it('hides the per-row Create button entirely when onCreateLabel is not supplied', () => {
+		const tree = LabelMappingStep({
+			step,
+			providerId: 'linear',
+			labelSlots,
+			providerLabels,
+			mappings: {},
+			onMappingChange: () => {},
+		});
+		const rows = collectSlotRows(tree);
+		for (const { row } of rows) {
+			expect((row.props as Record<string, unknown>)['data-has-create-form']).toBe('false');
+		}
 	});
+});
 
-	it('renders label row with color metadata', () => {
-		const html = renderToStaticMarkup(
-			createElement(LabelMappingStep, {
-				step,
-				providerId: 'trello',
-				labelSlots,
-				providerLabels,
-				mappings: {},
-				onMappingChange: () => {},
-			}),
-		);
-		expect(html).toContain('data-color="blue"');
-		expect(html).toContain('data-color="red"');
+describe('LabelMappingStep — bulk-create banner', () => {
+	it('renders when onCreateMissingLabels is supplied and ≥1 slot is unmapped with a default', () => {
+		const tree = LabelMappingStep({
+			step,
+			providerId: 'linear',
+			labelSlots,
+			providerLabels,
+			mappings: {},
+			onMappingChange: () => {},
+			onCreateLabel: () => {},
+			onCreateMissingLabels: () => {},
+			labelDefaults: {
+				processing: { name: 'cascade-processing', color: '#2563EB' },
+				error: { name: 'cascade-error', color: '#DC2626' },
+			},
+		});
+		const banner = findBulkBanner(tree);
+		expect(banner).not.toBeNull();
+		expect((banner?.props as Record<string, unknown>)['data-missing-count']).toBe('2');
 	});
 
-	// ── Plan 011/1 (forward-edit for 011/2): labelDefaults pre-populates Create input ──
+	it('hides when every slot with a default is already mapped', () => {
+		const tree = LabelMappingStep({
+			step,
+			providerId: 'linear',
+			labelSlots,
+			providerLabels,
+			mappings: { processing: 'lbl-processing', error: 'lbl-error' },
+			onMappingChange: () => {},
+			onCreateLabel: () => {},
+			onCreateMissingLabels: () => {},
+			labelDefaults: {
+				processing: { name: 'cascade-processing', color: '#2563EB' },
+				error: { name: 'cascade-error', color: '#DC2626' },
+			},
+		});
+		expect(findBulkBanner(tree)).toBeNull();
+	});
 
-	it('pre-populates the Create input with labelDefaults[slotKey].name when supplied', () => {
-		const html = renderToStaticMarkup(
-			createElement(LabelMappingStep, {
-				step,
-				providerId: 'trello',
-				labelSlots,
-				providerLabels,
-				mappings: {},
-				onMappingChange: () => {},
-				onCreateLabel: () => {},
-				labelDefaults: {
-					processing: { name: 'cascade-processing', color: 'blue' },
-					error: { name: 'cascade-error', color: 'red' },
-				},
-			}),
-		);
-		// Each Create row's text input starts with the default name.
-		expect(html).toMatch(/placeholder="New label name"[^>]*value="cascade-processing"/);
-		expect(html).toMatch(/placeholder="New label name"[^>]*value="cascade-error"/);
+	it('hides when onCreateMissingLabels is omitted (even if defaults + unmapped slots)', () => {
+		const tree = LabelMappingStep({
+			step,
+			providerId: 'linear',
+			labelSlots,
+			providerLabels,
+			mappings: {},
+			onMappingChange: () => {},
+			onCreateLabel: () => {},
+			labelDefaults: {
+				processing: { name: 'cascade-processing', color: '#2563EB' },
+				error: { name: 'cascade-error', color: '#DC2626' },
+			},
+		});
+		expect(findBulkBanner(tree)).toBeNull();
 	});
 
-	it('exposes the labelDefaults color on the Create button via data-create-color', () => {
-		// The onClick handler reads color from labelDefaults; we pin the wire-
-		// through via a data attribute (SSR-observable) rather than RTL.
+	it('hides when labelDefaults is omitted', () => {
+		const tree = LabelMappingStep({
+			step,
+			providerId: 'linear',
+			labelSlots,
+			providerLabels,
+			mappings: {},
+			onMappingChange: () => {},
+			onCreateLabel: () => {},
+			onCreateMissingLabels: () => {},
+		});
+		expect(findBulkBanner(tree)).toBeNull();
+	});
+});
+
+// ── Free-text mode (JIRA) — unchanged plain-HTML shape, SSR-testable ──
+
+describe('LabelMappingStep — free-text mode', () => {
+	it('renders text inputs when providerLabels is empty', () => {
 		const html = renderToStaticMarkup(
 			createElement(LabelMappingStep, {
 				step,
-				providerId: 'trello',
+				providerId: 'jira',
 				labelSlots,
-				providerLabels,
-				mappings: {},
+				providerLabels: [],
+				mappings: { processing: 'cascade-processing' },
 				onMappingChange: () => {},
-				onCreateLabel: () => {},
-				labelDefaults: {
-					processing: { name: 'cascade-processing', color: 'sky' },
-					error: { name: 'cascade-error', color: 'red' },
-				},
 			}),
 		);
-		expect(html).toContain('data-create-color="sky"');
-		expect(html).toContain('data-create-color="red"');
+		expect(html).toContain('data-mode="free-text"');
+		expect(html).toContain('placeholder="Label name"');
+		expect(html).toMatch(/id="label-processing"[^>]*value="cascade-processing"/);
 	});
 
 	it('renders loading and error states', () => {

From 56aeae0b76d6f614ad68afb56f001611b568f4df Mon Sep 17 00:00:00 2001
From: Maksymilian Majer <1215868+maksymilian-majer@users.noreply.github.com>
Date: Wed, 22 Apr 2026 17:45:56 +0200
Subject: [PATCH 4/5] fix(router): clear linear work item locks by canonical id

---
 src/router/worker-env.ts             |  1 +
 tests/unit/router/worker-env.test.ts | 14 ++++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/router/worker-env.ts b/src/router/worker-env.ts
index 64c3c932..134699d0 100644
--- a/src/router/worker-env.ts
+++ b/src/router/worker-env.ts
@@ -170,6 +170,7 @@ export function extractWorkItemId(data: CascadeJob): string | undefined {
 	if (jobData.type === 'trello' && jobData.workItemId) return jobData.workItemId;
 	if (jobData.type === 'jira' && jobData.issueKey) return jobData.issueKey;
 	if (jobData.type === 'github') return jobData.triggerResult?.workItemId;
+	if (jobData.type === 'linear') return jobData.triggerResult?.workItemId ?? jobData.workItemId;
 	// Dashboard jobs (manual-run, retry-run, debug-analysis)
 	if (jobData.workItemId) return jobData.workItemId;
 	return undefined;
diff --git a/tests/unit/router/worker-env.test.ts b/tests/unit/router/worker-env.test.ts
index 7c98b0e8..e4d2964e 100644
--- a/tests/unit/router/worker-env.test.ts
+++ b/tests/unit/router/worker-env.test.ts
@@ -225,6 +225,20 @@ describe('extractWorkItemId', () => {
 		expect(extractWorkItemId(job)).toBe('gh-wi-1');
 	});
 
+	it('returns triggerResult.workItemId for linear jobs when present', () => {
+		const job = {
+			type: 'linear',
+			workItemId: 'linear-issue-uuid',
+			triggerResult: { workItemId: 'TEAM-123' },
+		} as unknown as CascadeJob;
+		expect(extractWorkItemId(job)).toBe('TEAM-123');
+	});
+
+	it('falls back to top-level workItemId for linear jobs without triggerResult work item', () => {
+		const job = { type: 'linear', workItemId: 'linear-issue-uuid' } as unknown as CascadeJob;
+		expect(extractWorkItemId(job)).toBe('linear-issue-uuid');
+	});
+
 	it('returns workItemId from dashboard jobs', () => {
 		const job = { type: 'manual-run', workItemId: 'wi-dash' } as unknown as CascadeJob;
 		expect(extractWorkItemId(job)).toBe('wi-dash');

From 476adae2c6ad2cf3cfdb20037d5d257d1baec721 Mon Sep 17 00:00:00 2001
From: Zbigniew Sobiecki <zbigniew@sobiecki.name>
Date: Thu, 23 Apr 2026 09:08:55 +0000
Subject: [PATCH 5/5] fix(combobox): data-[disabled=true] to prevent cmdk
 false-positive greyout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

cmdk v1+ always sets data-disabled="false" on every non-disabled
CommandItem. The bare Tailwind variant data-[disabled]: generates the
CSS selector [data-disabled], which matches any element that *has* the
attribute — including data-disabled="false". This caused every option
in every PM-wizard combobox (team picker, label picker, project-scope
picker) to receive pointer-events-none + opacity-50, making all
options visually greyed-out and impossible to click.

Fix: data-[disabled=true]: generates [data-disabled="true"], which
only fires on explicitly disabled items.

Also:
- Make renderBulkBanner's onCreate param required (always guarded at
  call site by showBulkBanner check)
- Add seed-once comment to CreateLabelForm to document intentional
  useState(defaultName) behaviour
- Add structural regression test that pins both Tailwind class strings
  so the fix can't be silently reverted

Tally: 3 files changed, 57 insertions(+), 5 deletions(-)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 tests/unit/web/combobox.test.ts               | 52 +++++++++++++++++++
 .../pm-providers/steps/label-mapping.tsx      |  8 +--
 web/src/components/ui/combobox.tsx            |  2 +-
 3 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 tests/unit/web/combobox.test.ts

diff --git a/tests/unit/web/combobox.test.ts b/tests/unit/web/combobox.test.ts
new file mode 100644
index 00000000..c9b35130
--- /dev/null
+++ b/tests/unit/web/combobox.test.ts
@@ -0,0 +1,52 @@
+/**
+ * Structural regression guard for the shared Combobox component.
+ *
+ * cmdk v1+ always sets `data-disabled="false"` on every non-disabled
+ * CommandItem. Tailwind's bare `data-[disabled]:` variant generates the
+ * CSS selector `[data-disabled]`, which matches any element that *has* the
+ * attribute — including `data-disabled="false"`. This caused every option
+ * in every cascade dashboard combobox to receive `pointer-events-none` and
+ * `opacity-50`, making them visually greyed-out and impossible to click.
+ *
+ * The fix is `data-[disabled=true]:` which generates `[data-disabled="true"]`
+ * and only activates when the item is explicitly disabled.
+ *
+ * This test reads the source directly (Combobox uses React hooks so it
+ * cannot be called as a plain function outside a React rendering context,
+ * and the unit environment has no jsdom). The source-read pattern follows
+ * the precedent in `pm-wizard-styling-guard.test.ts`.
+ */
+
+import { readFileSync } from 'node:fs';
+import { dirname, 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 COMBOBOX_PATH = resolve(REPO_ROOT, 'web/src/components/ui/combobox.tsx');
+
+describe('Combobox — disabled-item CSS regression guard', () => {
+	it('uses data-[disabled=true] not bare data-[disabled] for pointer-events', () => {
+		const source = readFileSync(COMBOBOX_PATH, 'utf8');
+		// Must NOT have the bare attribute selector — it matches data-disabled="false".
+		expect(source, 'bare data-[disabled]: matches data-disabled="false" set by cmdk').not.toMatch(
+			/data-\[disabled\]:pointer-events-none/,
+		);
+		// Must use the value-qualified selector — only fires when actually disabled.
+		expect(source, 'data-[disabled=true]: must be present').toContain(
+			'data-[disabled=true]:pointer-events-none',
+		);
+	});
+
+	it('uses data-[disabled=true] not bare data-[disabled] for opacity', () => {
+		const source = readFileSync(COMBOBOX_PATH, 'utf8');
+		expect(source, 'bare data-[disabled]: matches data-disabled="false" set by cmdk').not.toMatch(
+			/data-\[disabled\]:opacity-50/,
+		);
+		expect(source, 'data-[disabled=true]: must be present').toContain(
+			'data-[disabled=true]:opacity-50',
+		);
+	});
+});
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 5db6895d..2db04c46 100644
--- a/web/src/components/projects/pm-providers/steps/label-mapping.tsx
+++ b/web/src/components/projects/pm-providers/steps/label-mapping.tsx
@@ -243,9 +243,7 @@ export function LabelMappingStep({
  */
 function renderBulkBanner(
 	missingSlots: ReadonlyArray<{ slot: string; name: string; color?: string }>,
-	onCreate:
-		| ((slots: ReadonlyArray<{ slot: string; name: string; color?: string }>) => void)
-		| undefined,
+	onCreate: (slots: ReadonlyArray<{ slot: string; name: string; color?: string }>) => void,
 	busy: boolean,
 ): ReactNode {
 	const count = missingSlots.length;
@@ -279,7 +277,7 @@ function renderBulkBanner(
 				size: 'sm',
 				'data-action': 'create-missing-labels',
 				disabled: busy,
-				onClick: () => onCreate?.(missingSlots),
+				onClick: () => onCreate(missingSlots),
 			} as React.ComponentProps<typeof Button> & DataProps,
 			busy ? 'Creating…' : 'Create all',
 		),
@@ -299,6 +297,8 @@ interface CreateLabelFormProps {
  * directly and traverse the returned tree without a React renderer.
  */
 function CreateLabelForm({ slotKey, defaultName, defaultColor, onCreate }: CreateLabelFormProps) {
+	// Intentionally seeded once from defaultName — the user may edit the field
+	// freely, and resetting it mid-edit when team details load would be jarring.
 	const [newLabelName, setNewLabelName] = useState(defaultName ?? '');
 	return createElement(
 		'div',
diff --git a/web/src/components/ui/combobox.tsx b/web/src/components/ui/combobox.tsx
index 8883a9d2..3c682204 100644
--- a/web/src/components/ui/combobox.tsx
+++ b/web/src/components/ui/combobox.tsx
@@ -144,7 +144,7 @@ export function Combobox({
 											key={option.value}
 											value={option.value}
 											onSelect={() => handleSelect(option.value)}
-											className="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground"
+											className="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground"
 										>
 											<Check
 												className={cn(