bfsi-pii-field

name: bfsi-pii-field description: Wraps a data field with PII masking (click-to-reveal) using PIIMaskedDisplay from @react-vault/ui. Use when the user types /bfsi-pii-field, asks to "mask this PAN", "hide the account number", "add masking to Aadhaar", or "make this field a PII field". disable-model-invocation: true argument-hint: allowed-tools: Read Edit Grep

BFSI PII Field

Wraps a value display with <PIIMaskedDisplay type="pan" value={...} /> from @react-vault/ui.

Supported types

What it does

Given a JSX expression like:

<td>{user.pan}</td>

Replaces it with:

<td>
  <PIIMaskedDisplay type="pan" value={user.pan} />
</td>

This adds:

1. Click-to-reveal with an onReveal callback hook (wire your own telemetry if you want)
2. Auto re-mask after the type-specific duration
3. Copy guard — copying the masked text returns "****" not the value
4. a11y — aria-label="masked PAN, click to reveal", screen-reader-friendly

Workflow

Step 1: Locate the field

If the user gives a variable like user.pan, find the occurrences in the current file. If multiple, ask which one.

Step 2: Determine the type

If not provided, infer from the variable name:

• contains pan → pan
• contains aadhaar / uid → aadhaar
• contains account / acc_no → account_number
• contains mobile / phone → mobile
• contains email → email
• contains dob / birth → dob
• otherwise → ask the user.

Step 3: Add the import (if missing)

import { PIIMaskedDisplay } from '@/components/bfsi';

Step 4: Replace + verify

Edit the file. Run npm run typecheck on the changed file. Report success.

When NOT to use

• In a <form> input field. Use <SecureFormField> instead — that handles paste guards and autocomplete prevention for input, not display.
• In exported data. Exports should use the same mask. Don't reveal in CSV without explicit user consent.
• In server-rendered HTML. Masking on the client only is insufficient for SSR contexts — the backend must also mask before sending. Flag this to the user if the file looks like SSR.