e.stopPropagation()}> {/* Header */}

Claim Mapping Rules

Map JWT claims to Cameleer roles and groups. Evaluated on every OIDC login.

{/* Body */}

{isLoading ? (

) : sorted.length === 0 ? (

No claim mapping rules configured.
Rules let you assign roles and groups based on JWT claims.

) : ( {sorted.map((rule, idx) => { const isEditing = editingId === rule.id; const isMatched = matchedRuleIds.has(rule.id); return ( {isEditing ? ( <> ) : ( <> )} ); })}

#	Claim	Match	Value	Action	Target
{idx + 1}	setEditForm({ ...editForm, claim: e.target.value })} className={styles.claimInput} />		setEditForm({ ...editForm, matchValue: e.target.value })} />		setEditForm({ ...editForm, target: e.target.value })} />		`{rule.claim}`	{rule.matchType}	{rule.matchValue}	{actionLabel(rule.action)}	{rule.target}	{isMatched ? ( ) : ( )}

)} {/* Add row */}

setAddForm({ ...addForm, claim: e.target.value })} className={styles.claimInput} /> setAddForm({ ...addForm, matchValue: e.target.value })} className={styles.valueInput} /> setAddForm({ ...addForm, target: e.target.value })} className={styles.targetInput} />

{/* Test panel */}

setTestOpen(!testOpen)}> {testOpen ? '\u25B2' : '\u25BC'} Test Rules Paste a decoded JWT to preview which rules would fire

{testOpen && (

setTestInput(e.target.value)}
                />
                <Button size="sm" variant="secondary" onClick={handleTest} loading={testRules.isPending}>
                  Test
                </Button>
              </div>
              <div className={styles.testResults}>
                <div className={styles.testResultsTitle}>Result</div>
                {testError && <div className={styles.testError}>{testError}</div>}
                {!testResult && !testError && <div className={styles.testEmpty}>Paste claims and click Test</div>}
                {testResult && testResult.fallback && (
                  <div className={styles.testFallback}>No rules matched — would fall back to default roles</div>
                )}
                {testResult && !testResult.fallback && (
                  <>
                    {testResult.matchedRules.map((m) => (
                      <div key={m.ruleId} className={styles.testMatch}>
                        <div className={styles.testMatchLabel}>✓ Rule #{sorted.findIndex((r) => r.id === m.ruleId) + 1} matched</div>
                        <div className={styles.testMatchDetail}>
                          <code className={styles.claimCode}>{m.claim}</code>{' '}
                          {m.matchType} <code>{m.matchValue}</code>{' '}
                          → {actionLabel(m.action)} <strong>{m.target}</strong>
                        </div>
                      </div>
                    ))}
                    <div className={styles.testEffective}>
                      {testResult.effectiveRoles.length > 0 && (
                        <div>Roles: <span className={styles.testEffectiveValues}>{testResult.effectiveRoles.join(', ')}</span></div>
                      )}
                      {testResult.effectiveGroups.length > 0 && (
                        <div>Groups: <span className={styles.testEffectiveValues}>{testResult.effectiveGroups.join(', ')}</span></div>
                      )}
                    </div>
                  </>
                )}
              </div>
            </div>
          )}
        </div>

{/* Footer */}
        <div className={styles.footer}>
          Rules are evaluated top-to-bottom by priority on every OIDC login. If no rules match, the server falls back to roles from the token, then to default roles.
        </div>
      </div>

<ConfirmDialog
        open={deleteTarget !== null}
        onClose={() => setDeleteTarget(null)}
        onConfirm={confirmDelete}
        message={`Delete this rule? (${deleteTarget?.claim} ${deleteTarget?.matchType} "${deleteTarget?.matchValue}")`}
        confirmText="delete"
        loading={deleteRule.isPending}
      />
    </div>
  );
}
```

- [ ] **Step 3: Verify TypeScript compiles**

Run: `cd ui && npx tsc --noEmit`
Expected: no errors

- [ ] **Step 4: Commit**

```bash
git add ui/src/pages/Admin/ClaimMappingRulesModal.tsx ui/src/pages/Admin/ClaimMappingRulesModal.module.css
git commit -m "feat: add claim mapping rules editor modal component"
```

---

### Task 4: Frontend — Wire modal into OIDC config page

**Files:**
- Modify: `ui/src/pages/Admin/OidcConfigPage.tsx`

- [ ] **Step 1: Add imports and state**

At the top of `OidcConfigPage.tsx`, add after the existing imports (line 8):

```tsx
import ClaimMappingRulesModal from './ClaimMappingRulesModal';
import { useClaimMappingRules } from '../../api/queries/admin/claim-mappings';
```

Inside the `OidcConfigPage` component function, after the existing state declarations (after line 52), add:

```tsx
const [rulesModalOpen, setRulesModalOpen] = useState(false);
const { data: claimRules = [] } = useClaimMappingRules();
```

- [ ] **Step 2: Add the trigger button to the Claim Mapping section**

After the Display Name Claim `FormField` closing tag (after line 273), add the trigger button and modal before the `</section>` closing tag:

```tsx
        <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--border)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <span style={{ fontSize: 13, color: 'var(--text-secondary, var(--text-muted))' }}>Advanced Rules</span>
              {claimRules.length > 0 && (
                <span style={{ fontSize: 11, color: 'var(--text-muted)', marginLeft: 8 }}>
                  {claimRules.length} active rule{claimRules.length !== 1 ? 's' : ''}
                </span>
              )}
            </div>
            <Button size="sm" variant="secondary" onClick={() => setRulesModalOpen(true)}>
              Edit Rules
            </Button>
          </div>
        </div>
        <ClaimMappingRulesModal open={rulesModalOpen} onClose={() => setRulesModalOpen(false)} />
```

- [ ] **Step 3: Verify TypeScript compiles**

Run: `cd ui && npx tsc --noEmit`
Expected: no errors

- [ ] **Step 4: Commit**

```bash
git add ui/src/pages/Admin/OidcConfigPage.tsx
git commit -m "feat: wire claim mapping rules modal into OIDC config page"
```

---

### Task 5: Compile, verify, and push

**Files:** (none — verification only)

- [ ] **Step 1: Full backend compilation**

Run: `mvn clean compile test-compile`
Expected: BUILD SUCCESS

- [ ] **Step 2: Frontend type check**

Run: `cd ui && npx tsc --noEmit`
Expected: no errors

- [ ] **Step 3: Push**

```bash
git push
```