# Provider Form Controls Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Make provider categories fully clickable and aligned, remove the requirements guide from login only, and style every native provider selector consistently with MyCode.

**Architecture:** Keep category state and validation in the existing viewmodel while changing only the semantic DOM produced by the category view. Keep browser-native inputs and selects for accessibility; CSS supplies layout and visual states. The login exception remains a Blade concern and does not change validation behavior.

**Tech Stack:** Laravel Blade, modular vanilla JavaScript, CSS, Node assertion tests, PHPUnit Feature tests, Laravel Mix.

---

### Task 1: Exclude the login requirements guide

**Files:**
- Modify: `tests/Feature/ProviderPortalRequirementsGuidanceTest.php`
- Modify: `resources/views/provider/partials/account.blade.php`

- [ ] **Step 1: Write the failing Feature assertion**

Change the account guidance test so the registration response must not contain `provider-login-requirements`, while still requiring all other guide identifiers:

```php
$response->assertOk()
    ->assertDontSee('provider-login-requirements', false)
    ->assertSee('provider-register-requirements', false);
```

- [ ] **Step 2: Run the focused test and verify RED**

Run: `vendor/bin/phpunit --do-not-cache-result tests/Feature/ProviderPortalRequirementsGuidanceTest.php --colors=never`

Expected: FAIL because the login guide is still rendered.

- [ ] **Step 3: Remove only the login guide include**

Delete the `provider.partials.requirements-guide` include immediately after the login heading. Preserve the `required` and `minlength` attributes on email and password.

- [ ] **Step 4: Run the focused test and verify GREEN**

Run: `vendor/bin/phpunit --do-not-cache-result tests/Feature/ProviderPortalRequirementsGuidanceTest.php --colors=never`

Expected: PASS.

### Task 2: Make category choices semantic and fully clickable

**Files:**
- Modify: `tests/js/provider-payloads.test.js`
- Modify: `resources/js/provider/07-categories-view.js`
- Modify: `public/css/provider/portal/05-forms.css`
- Modify: `public/css/provider/portal/06-responsive.css`

- [ ] **Step 1: Write failing category structure and interaction assertions**

After rendering one selected primary category, assert that the row has two label zones, that each label contains its native input, and that changing the checkbox invokes the existing callback:

```javascript
const row = list.children[0].children[0].children[0];
assert.strictEqual(row.children.length, 2);
assert.match(row.className, /is-selected/);
assert.match(row.className, /is-primary/);
assert.strictEqual(row.children[0].tagName, 'LABEL');
assert.strictEqual(row.children[0].children[0].type, 'checkbox');
assert.strictEqual(row.children[1].children[0].type, 'radio');
```

- [ ] **Step 2: Run the JavaScript test and verify RED**

Run: `node tests/js/provider-payloads.test.js`

Expected: FAIL because the row currently exposes four separate children and no selected-state class.

- [ ] **Step 3: Render two native label zones**

Update `providerCategoryRow()` so the left label wraps checkbox plus a text span, and the right label wraps radio plus `Principal`. Add `is-selected` and `is-primary` classes from the rendered state. Retain the existing `change` listeners and identifiers.

- [ ] **Step 4: Add aligned and selected visual states**

Use a two-column row (`minmax(0, 1fr) auto`), reset the generic label margin inside category rows, stretch both labels as click targets, center their contents, and apply blue selected plus coral primary states. Keep child indentation and use a single-column stacked layout only where the mobile width requires it.

- [ ] **Step 5: Run the JavaScript test and verify GREEN**

Run: `node tests/js/provider-payloads.test.js`

Expected: PASS.

### Task 3: Style native provider selectors

**Files:**
- Create: `tests/js/provider-control-css.test.js`
- Modify: `public/css/provider/portal/05-forms.css`
- Modify: `package.json`

- [ ] **Step 1: Write a failing CSS contract test**

Read `05-forms.css` and assert that provider editor and operation selects define native appearance removal, additional right padding, a custom background arrow, and disabled styling:

```javascript
assert.match(css, /appearance:\s*none/);
assert.match(css, /background-image:/);
assert.match(css, /select:disabled/);
assert.match(css, /cursor:\s*not-allowed/);
```

Register the focused test in `test:provider`.

- [ ] **Step 2: Run the CSS contract and verify RED**

Run: `node tests/js/provider-control-css.test.js`

Expected: FAIL because portal selectors still use the browser default appearance.

- [ ] **Step 3: Implement the native select visual system**

Apply `appearance: none`, MyCode spacing and radius, a CSS-gradient coral chevron, blue hover/focus borders, and a muted disabled state. Do not replace the native select or add JavaScript.

- [ ] **Step 4: Run the CSS contract and portal tests**

Run: `node tests/js/provider-control-css.test.js && npm run test:provider`

Expected: PASS.

### Task 4: Build, regress and integrate

**Files:**
- Generated: `public/js/provider/app.js`
- Generated: `public/css/*` only where the existing build updates tracked assets
- Modify through hook: `VERSION`

- [ ] **Step 1: Build production assets**

Run: `npm run production`

Expected: successful Laravel Mix build with the category JavaScript included in `public/js/provider/app.js`.

- [ ] **Step 2: Run all verification**

Run:

```bash
vendor/bin/phpunit --do-not-cache-result --colors=never
npm run test:provider
php artisan architecture:audit --strict
git diff --check
```

Expected: 466 or more PHP tests pass, all provider tests pass, architecture reports compliance, and no whitespace errors are reported.

- [ ] **Step 3: Review graph impact and changed source**

Update the knowledge graph, run change detection and affected-flow analysis, and inspect the focused diff for category interaction, login rendering and CSS scope.

- [ ] **Step 4: Commit with the patch version selected by the hook**

Stage only this plan, its spec, tests, source, CSS and generated provider bundle. Commit with `fix: align provider form controls`, select the next patch version, then fast-forward `master` and push it to `origin`.