refactor(ext/shared): rename REQUIRED_PILL → REQUIRED_PILL_HTML

Code-review feedback on Task 1: the _HTML suffix makes the 'this is raw
HTML, do not escape' contract obvious at every call site. Cheap to do
now (zero consumers); would be 8 diffs once Tasks 4-6 wire the constant
into the type forms.

Plan updated in lockstep so Task 4 references the new name.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

docs/superpowers/plans/2026-04-30-fullscreen-ux-phase-1-visual-foundation.md

@@ -4,7 +4,7 @@
 
 **Goal:** Establish the shared visual language (glyph constants, color tokens, focus ring, required pill, header subtitle) and clean up vestigial popup-only UI in the fullscreen vault. No structural or behavioral changes; pure visual foundation that the next three phases will build on.
 
-**Architecture:** A new `extension/src/shared/glyphs.ts` module exports unicode glyph constants and a `REQUIRED_PILL` HTML snippet, consumed by both popup and fullscreen surfaces. CSS custom properties added to `popup/styles.css` and `vault/vault.css` provide the shared color/focus tokens. All eight type forms migrate from `<span class="req">*</span>` to the pill; sidebar nav buttons replace emoji with glyph constants; the popout-to-tab button is gated behind `!isInTab()` so it disappears in fullscreen. Fullscreen forms gain a static "esc to cancel" subtitle (dynamic dirty-state lands in Phase 3).
+**Architecture:** A new `extension/src/shared/glyphs.ts` module exports unicode glyph constants and a `REQUIRED_PILL_HTML` HTML snippet, consumed by both popup and fullscreen surfaces. CSS custom properties added to `popup/styles.css` and `vault/vault.css` provide the shared color/focus tokens. All eight type forms migrate from `<span class="req">*</span>` to the pill; sidebar nav buttons replace emoji with glyph constants; the popout-to-tab button is gated behind `!isInTab()` so it disappears in fullscreen. Fullscreen forms gain a static "esc to cancel" subtitle (dynamic dirty-state lands in Phase 3).
 
 **Tech stack:** TypeScript, vanilla DOM (no framework), Vitest + happy-dom for unit tests. No new runtime dependencies.
 
@@ -39,8 +39,8 @@ describe('glyphs', () => {
     expect(glyphs.GLYPH_LOCK).toBe('⏻');
   });
 
-  it('exports REQUIRED_PILL as an HTML snippet', () => {
-    expect(glyphs.REQUIRED_PILL).toBe('<span class="req-pill">required</span>');
+  it('exports REQUIRED_PILL_HTML as an HTML snippet', () => {
+    expect(glyphs.REQUIRED_PILL_HTML).toBe('<span class="req-pill">required</span>');
   });
 });
 ```
@@ -74,8 +74,8 @@ export const GLYPH_SETTINGS      = '⚙';   // sidebar settings nav
 export const GLYPH_LOCK          = '⏻';   // sidebar lock nav
 
 /// Inline HTML snippet for the required-field pill. Use after a label's text:
-///   `<label class="label" for="f-title">title ${REQUIRED_PILL}</label>`
-export const REQUIRED_PILL = '<span class="req-pill">required</span>';
+///   `<label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>`
+export const REQUIRED_PILL_HTML = '<span class="req-pill">required</span>';
 ```
 
 - [ ] **Step 4: Run test to verify it passes**
@@ -90,7 +90,7 @@ git -C /home/alee/Sources/relicario add extension/src/shared/glyphs.ts extension
 git -C /home/alee/Sources/relicario commit -m "feat(ext/shared): glyph constants module for unified icon language
 
 Centralizes the unicode glyphs used by sidebar nav and form action buttons
-so popup and fullscreen surfaces stay in sync. Includes the REQUIRED_PILL
+so popup and fullscreen surfaces stay in sync. Includes the REQUIRED_PILL_HTML
 snippet used to replace the trailing-asterisk required-field marker.
 
 Plan 2026-04-30 fullscreen UX phase 1 task 1.
@@ -330,7 +330,7 @@ Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>"
 
 ---
 
-## Task 4: Migrate required-marker sites to REQUIRED_PILL
+## Task 4: Migrate required-marker sites to REQUIRED_PILL_HTML
 
 **Files (10 sites across 7 files):**
 - Modify: `extension/src/popup/components/types/card.ts:182`
@@ -392,7 +392,7 @@ In `extension/src/popup/components/types/login.ts`:
 Add an import near the top (after the existing imports):
 
 ```typescript
-import { REQUIRED_PILL } from '../../../shared/glyphs';
+import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';
 ```
 
 Find line 252:
@@ -402,7 +402,7 @@ Find line 252:
 
 Replace with:
 ```typescript
-      <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL}</label>
+      <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
 ```
 
 - [ ] **Step 4: Run the test to verify it passes for login**
@@ -413,8 +413,8 @@ Expected: PASS.
 - [ ] **Step 5: Migrate the remaining six files**
 
 Apply the same pattern to each of these six files. For each:
-1. Add `import { REQUIRED_PILL } from '../../../shared/glyphs';`
-2. Replace each `<span class="req">*</span>` with `${REQUIRED_PILL}`
+1. Add `import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';`
+2. Replace each `<span class="req">*</span>` with `${REQUIRED_PILL_HTML}`
 
 | File | Line(s) |
 |---|---|
@@ -444,10 +444,10 @@ Expected: `compiled with 2 warnings`.
 
 ```bash
 git -C /home/alee/Sources/relicario add extension/src/popup/components/types/ extension/src/shared/
-git -C /home/alee/Sources/relicario commit -m "refactor(ext/popup): migrate required-field markers to REQUIRED_PILL
+git -C /home/alee/Sources/relicario commit -m "refactor(ext/popup): migrate required-field markers to REQUIRED_PILL_HTML
 
 Replaces ten <span class=\"req\">*</span> sites across all seven type
-forms with the shared REQUIRED_PILL snippet ('required' badge). Adds a
+forms with the shared REQUIRED_PILL_HTML snippet ('required' badge). Adds a
 regression test pinning the new HTML in the login form.
 
 Plan 2026-04-30 fullscreen UX phase 1 task 4.

extension/src/shared/__tests__/glyphs.test.ts

@@ -15,7 +15,7 @@ describe('glyphs', () => {
     expect(glyphs.GLYPH_LOCK).toBe('⏻');
   });
 
-  it('exports REQUIRED_PILL as an HTML snippet', () => {
-    expect(glyphs.REQUIRED_PILL).toBe('<span class="req-pill">required</span>');
+  it('exports REQUIRED_PILL_HTML as an HTML snippet', () => {
+    expect(glyphs.REQUIRED_PILL_HTML).toBe('<span class="req-pill">required</span>');
   });
 });

extension/src/shared/glyphs.ts

@@ -18,5 +18,8 @@ export const GLYPH_SETTINGS      = '⚙';   // sidebar settings nav
 export const GLYPH_LOCK          = '⏻';   // sidebar lock nav
 
 /// Inline HTML snippet for the required-field pill. Use after a label's text:
-///   `<label class="label" for="f-title">title ${REQUIRED_PILL}</label>`
-export const REQUIRED_PILL = '<span class="req-pill">required</span>';
+///   `<label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>`
+///
+/// Requires the `.req-pill` CSS rule (added in Tasks 2 and 3 to popup/styles.css
+/// and vault/vault.css respectively).
+export const REQUIRED_PILL_HTML = '<span class="req-pill">required</span>';