[IAmJSD]

The sidebar draws Feather-style SVG icons, but row actions, toasts, sort arrows, column filters, tooltips and expanders used Unicode glyphs (▶ ⏸ ⏵ ✎ ✕ ↻ ⚠ ↕ ▲ ▼ ⛛ ⓘ ⚙︎). Their size and weight come from whatever font the platform has, ⏸ / ⏵ / ⚠ can render as color emoji on macOS, and the money-triggering "Run now" action was only a small blue ▶. This PR adds one SVG icon module, uses it for those glyphs and for the admin page's row actions, and makes Run now a labeled button.

Refs #751
Partial: the issue's suggested overflow menu (⋯) for row actions is not added (Run now became a labeled button instead; the menu is left as a design decision), and glyphs inside plain text strings, <option> labels and CSS ::before content are unchanged because SVG cannot go there.

What changed

• New frontend/src/icons.ts: one typed name-to-shape table (Feather shapes, plus Lucide's chevrons-up-down) on the sidebar's 24px grid, 2px round stroke, currentColor. It exports iconSvg() for template-literal renderers and createIcon() for DOM-built ones that avoid innerHTML; both mark the icon aria-hidden and focusable="false". New frontend/src/styles/icons.css sizes icons in em.
• Glyphs replaced (59e696d):
  • plans.ts: row actions and column filter; Run now is a labeled button (play icon + "Run now").
  • toast.ts: kind icons and close.
  • recommendations.ts: sort indicators, column filter, expand chevrons, lookback info tooltip.
  • riexchange.ts (column filters, remove-target x), lib/history-filter-popover.ts (filter), history.ts (Retry, override, ops hint, lineage), users/userList.ts (expand chevron), federation.ts (download), confirmDialog.ts and ladder.ts (close x), settings.ts (copy tick).
  • index.html: 10 info tooltips, the Exchange settings gear, a modal close.
• Admin row actions as compact icon-only buttons (eaa0363, 8fe39de):
  • API keys (apikeys.ts): Revoke (slash, .btn-warning) and Delete (trash, .btn-danger) sit side by side in a non-wrapping .row-actions group instead of stacking.
  • Group editor (groups/groupModals.ts): the permission Remove is a trash icon button pinned to the row bottom at the selects' height, instead of stretching to label + select.
  • Users table (users/userList.ts) Edit / Delete and group cards (groups/groupList.ts) Edit / Duplicate / Delete use pencil / copy / trash icon buttons, keeping the danger variant on Delete.
  • Every icon button has an aria-label ("Revoke API key", "Delete API key", "Remove permission", Edit user <email>, Edit group <name>, ...) and a title tooltip. Handlers, confirm dialogs, classes and data attributes are unchanged.
  • New icons copy, slash, trash-2 (Feather). New CSS: button.icon-btn (1.75rem square, no padding), .row-actions, and .permission-item .form-row > .remove-permission-btn.
• Tests: new src/__tests__/icons.test.ts, src/__tests__/row-action-icons.test.ts and tests-e2e/admin-row-actions.spec.ts; plans-permissions.test.ts, groups.test.ts and group-edit-unrepresentable-permissions.test.ts updated.

Why this approach

A typed name-to-shape table with two renderers keeps one source of truth, matches the inline SVG the sidebar already uses, and adds no dependency (no icon font or npm package). Icons inherit currentColor, so the existing color, hover and active rules keep working. A labeled Run now button fixes the weak affordance without adding a new menu widget and its keyboard handling. Using the same icon buttons for all row actions on the admin page keeps the API key, user and group actions consistent with each other.

Screenshots

Before is main (a14dc8f2), after is this branch. Both are headless Chromium at 1440x900 against the repo's mocked e2e API. They were taken on Linux, where the glyphs do not turn into emoji, so the pairs show the style mismatch and its fix rather than emoji rendering.

Before	After

• Planned purchases: main uses glyph row actions (▶ ⏸ ⏵ ✎ ✕) of mismatched sizes, a bare ▶ for Run now and ⛛ column filters; this branch uses SVG play / pause / pencil / x icons, a labeled Run now and funnel filter icons.
• Success toast: ✓ and × glyphs become check-circle and x icons in the same colors.
• Opportunities header: ↕ / ▼ sort glyphs and ⛛ filters become chevron sort indicators (the active column shows a blue chevron-down) and funnel icons.
• Purchase history: ↻ Retry, ⚠ Retried 5×, the ⚠ ops hint and ↻ Retry #2 use rotate-cw and alert-triangle icons with the same text, and the filters use funnels.
• API keys: Revoke and Delete text buttons stacked in the Actions column become slash (amber) and trash (red) icon buttons side by side. A revoked key shows Delete only.
• Group editor with two permissions: each Remove button stretched to label + select height; it is now a small trash icon button aligned with the Action / Resource selects.
• Users table and group cards: Edit / Duplicate / Delete text buttons become pencil, copy and trash icon buttons. The signed-in user's own row stays disabled as before.

Verification

Run on this branch's head 8fe39de1 on top of main a14dc8f2:

• npm run lint: 0 errors (142 pre-existing warnings). Typecheck and build pass.
• Jest: 111 suites, 3533 passed, 1 skipped.
• New icons.test.ts: every icon renders a decorative currentColor SVG, createIcon matches iconSvg, toasts use SVG kind and close icons, and a source guard fails if any of the replaced glyphs return in UI code. plans-permissions.test.ts asserts every row action has an SVG icon and that Run now has a text label.
• New row-action-icons.test.ts (5 tests): finds each button by getByRole name and checks the SVG icon, empty visible text, title, color variant and data attributes, and that Revoke / Delete still confirm and then call the API and Remove still drops its row.
• groups.test.ts: the XSS case now checks the DOM (no script / img element, text round-trips, the aria-label holds the raw name with no extra attributes), because serialized innerHTML leaves < and > unescaped inside the new aria-label. The group-edit-unrepresentable-permissions injection guards ignore svg.icon, the Remove button's own icon.
• Playwright via e2e-local.sh: 159 passed. New admin-row-actions.spec.ts: Revoke and Delete share one row (same top, under 8px apart), and Remove matches the selects' top and height to within 1px.
• Secrets scan clean (planted key flagged); scripts/test-git-secrets-allowlist.sh: 137 PASS, 0 FAIL.

Notes for review

• The labeled Run now button widens the Actions column, so other columns in the planned-purchases table wrap more (see the first pair). An overflow menu (⋯), as the issue suggested, is the alternative.
• Resume and Run now both use the play icon; Run now is set apart by its label and primary color.
• Sort indicator SVGs are 1.25em inside the existing 0.75em .sort-indicator; the size is a judgment call.
• Not converted: ⚠ inside text strings (the approval-details "Account deleted" cell, a groupModals <option>), the "Columns ▾" button text, Archera's "← Back", CSS ::before glyphs (util-green/yellow/red ▲■▼, ✓ in components.css, ▸ in modals.css), the auth password checklist ○ / ✓, permission-matrix ✓ cells, and → arrows in prose.
• Icon shapes are copied from Feather (MIT) and Lucide (ISC) and credited in the icons.ts header; the repo may want a third-party notice file.
• aria-label coverage on the remaining icon-only actions is tracked separately in fix(frontend): icon-only row actions (Plans, RI Exchange) lack labels, tooltips and aria-names #184.

Overlaps

• fix(history): keep the lineage link on failed rows that show an ops hint #1040 and SUP-03: Two escaping-convention gaps in innerHTML templates (defense-in-depth only) #37 edit the same history.ts lineage / Retry lines and keep ↻ / ⚠. They conflict with this branch, and the icons.test.ts source guard will flag ↻ if their version wins.
• fix(frontend): History and Approval Queue filter popovers collide on shared column ids #281 edits the same return line in lib/history-filter-popover.ts (adds data-filter-scope), a textual conflict.
• fix(frontend): ladder config asks for a raw account UUID and hides auto-approve impact #742 moves the ladder modal markup from ladder.ts into ladder-config-modal.ts, so this branch's close-icon change in ladder.ts conflicts and has to be reapplied in the new file.
• fix(frontend): Admin Users/Groups/Permission Overview show no existing entries (missing lists or empty states) #182 also edits users/userList.ts and groups/groupList.ts; a merge-tree check shows no textual conflict.
• Many other branches touch plans.ts, recommendations.ts, riexchange.ts and index.html elsewhere.

Note for the UI owner

This changes UI code that @cristim owns. IAmJSD reviewed the before/after screenshots and asked for it to be merged; any design point you disagree with can be a follow-up.

🤖 Generated with Claude Code

[coderabbitai]

Caution

Review failed

The pull request is closed.

Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

[IAmJSD]

Applied the review's non-blocking suggestion in 83fd08d5: icons.css now uses var(--cudly-fs-md) instead of the literal 1rem. The computed size is the same, and #741's typography guard no longer fails once both PRs land. I verified this in the combined tree of this merge wave. Lint, build and the full jest suite (4171 passed) pass on this head, and the approval above carries over to 83fd08d5.

[IAmJSD]

Independent review (IAmJSD's agent, fresh context, given only the diff, the issue and the PR text): APPROVE e8dbf2f867992b9bee310698641efbefd31bb247 (the head before the one-line token follow-up below)

Blocking:

• none
  Non-blocking:
• frontend/src/styles/icons.css:44: font-size: 1rem; in button.icon-btn duplicates --cudly-fs-md. Open chore(frontend): add typography foundation for text, headings, controls #1378 (issue 741) adds a jest guard that bans exactly this. I merged both heads (tree 2996200e) and typography.test.ts fails on icons.css, so whichever PR lands second breaks main's jest. Change it to var(--cudly-fs-md) (the token is already on main) before landing.
• frontend/src/plans.ts:1293: the plan editor's account-chip remove button still uses the × glyph (removeBtn.textContent = '×', with no aria-label). The equivalent riexchange remove-target button was converted to createIcon('x'). This predates the branch, but it is inconsistent and is not in the body's "Not converted" list.
• frontend/src/tests/group-edit-unrepresentable-permissions.test.ts:256,490: svg:not(.icon) narrows the injection guard. The current payloads ('><svg onload=...>, <img onerror>) carry no class, so the guard still catches them. A tighter assertion would be "every svg is inside .remove-permission-btn" or "no [onload]/[onerror] attribute".
  Attacked: Diffed origin/main...HEAD (HEAD^2 == origin/main 19534fc). The new markup interpolates only iconSvg() constants. Every name or email in an aria-label/title goes through escapeHtml, which escapes " and '. createIcon is used on the DOM paths. No style= attributes, so no CSP issue. Every icon-only button has an aria-label. Handlers bind per button and read btn.dataset (not e.target), and .icon has pointer-events:none. Merges: in groupList, main's fix(frontend): hide Edit and Delete on system-managed groups #1392 system-group lock (badge, no Edit/Delete) is kept inside .row-actions. history.ts keeps main's renderLineageLinks (fix(history): keep the lineage link on failed rows with an ops hint #1394) and its Number(retry_attempt_n)||0 coercion. history-filter-popover keeps data-filter-scope and escapeHtmlAttr (fix(frontend): scope the Purchases tab filter popovers per table #1342). groupModals keeps permissionOptions (moved on main). The ladder.ts close icon sits next to main's openModal import. Main has added no unconverted icon glyphs since the first re-merge (only × multiplication signs). On coarse pointers the 44px touch-target rule still overrides the 1.75rem icon-btn.

[IAmJSD]

Local verification at 83fd08d5 merged onto current main (da896f42; merge-tree ab77aa6e; Linux, Node, headless Chromium):

• This branch's own checks passed at this head: lint, typecheck, build, the full jest suite, the full Playwright e2e suite, and the git-secrets checks (see Verification in the PR body).
• The combined tree of every UI PR in this merge wave (tree ab77aa6e, main plus 5 PRs) passes npm ci, lint, typecheck, build, jest (1 skipped, 4248 passed, 4249 total), and the full Playwright suite (247 passed).
• CI is green on 83fd08d5 (CI Success, Run pre-commit hooks).
• The independent review above approves this exact head.
• Nothing was applied to any cloud.

[IAmJSD]

Marked ready and merged by IAmJSD's agent, at IAmJSD's request (IAmJSD reviewed the before/after screenshots; cristim is traveling), after the independent review and local verification above, all at 83fd08d5.