UI Audit: 186 em-dashes in JSX/copy violate DESIGN.md ban #146

New issue

Closed

opened 2026-05-28 19:29:33 -04:00 by zgaetano · 0 comments

zgaetano commented

2026-05-28 19:29:33 -04:00

Owner

Summary

DESIGN.md explicitly states: "No em dashes in code or copy. Use commas, colons, parentheses, periods."

Audit found 186 em-dash characters in .jsx files across the web-ui.

Counts per screen (visible to users)

Screen	Em-dashes in rendered text
Jobs	86
Recorders	10
Dashboard	6
Settings	5
Tokens	3
Cluster	3
New Recorder modal	2

Sources

Placeholder fallbacks: '—' used as null indicator in tables and stat values (recorder.elapsed, cfg.codec || '—', etc.)
Marketing copy in screens-admin.jsx (Tokens page): "For \"evaluation only\" — definitely not production"
Inline help text: "Recorder can't be reassigned — delete + recreate to change."
Confirm dialogs: "Start time is in the past — recorder will fire immediately when saved."

Recommended fix

Replace placeholder '—' with '·' (DESIGN.md uses · already) or empty string
Sweep .jsx files and replace — with : or . per context
Add lint rule (eslint custom) to fail on em-dash in JSX literals

Files

screens-admin.jsx (50+), screens-ingest.jsx (30+), screens-library.jsx (10+), modal-new-recorder.jsx (2), shell.jsx (4), others.

Discovered during full web-ui audit 2026-05-28.

Fixed in `342b56a`

186 → 0 across all jsx and css. Three-pass sweep:

sed replacement of standalone '—' and "—" placeholders → '·'
sed of // and * comments → ASCII dash
sed of — in JSX/strings → : (default), with manual edits for cases where : didn't read right (option labels, status placeholders, etc.)

Live audit shows zero em-dashes in rendered DOM. Lint rule deferred (separate tooling task).

## Summary `DESIGN.md` explicitly states: *"No em dashes in code or copy. Use commas, colons, parentheses, periods."* Audit found **186 em-dash characters in `.jsx` files** across the web-ui. ## Counts per screen (visible to users) | Screen | Em-dashes in rendered text | |---|---| | Jobs | 86 | | Recorders | 10 | | Dashboard | 6 | | Settings | 5 | | Tokens | 3 | | Cluster | 3 | | New Recorder modal | 2 | ## Sources - Placeholder fallbacks: `'—'` used as null indicator in tables and stat values (`recorder.elapsed`, `cfg.codec || '—'`, etc.) - Marketing copy in `screens-admin.jsx` (Tokens page): `"For \"evaluation only\" — definitely not production"` - Inline help text: `"Recorder can't be reassigned — delete + recreate to change."` - Confirm dialogs: `"Start time is in the past — recorder will fire immediately when saved."` ## Recommended fix 1. Replace placeholder `'—'` with `'·'` (DESIGN.md uses `·` already) or empty string 2. Sweep `.jsx` files and replace ` — ` with `: ` or `. ` per context 3. Add lint rule (eslint custom) to fail on em-dash in JSX literals ## Files `screens-admin.jsx` (50+), `screens-ingest.jsx` (30+), `screens-library.jsx` (10+), `modal-new-recorder.jsx` (2), `shell.jsx` (4), others. Discovered during full web-ui audit 2026-05-28. --- ## Fixed in 342b56a **186 → 0** across all jsx and css. Three-pass sweep: 1. `sed` replacement of standalone `'—'` and `"—"` placeholders → `'·'` 2. `sed` of `// ` and ` * ` comments → ASCII dash 3. `sed` of ` — ` in JSX/strings → `: ` (default), with manual edits for cases where `: ` didn't read right (option labels, status placeholders, etc.) Live audit shows zero em-dashes in rendered DOM. Lint rule deferred (separate tooling task).