Send button misstyled on report feedback window

[danthebaker]

Resolves danthebaker/gatewaze-roadmap#31

Gates

• adversarial review: pass
• security: pass
• blast radius: needs_human

Spec

Found a directly related spec (issue #27, same SE module). Let me read it.The prior spec (issue-27) touches the same widget and confirms module conventions. Now let me explore the actual code to ground issue #31 and resolve every review objection. Let me read the key files.The root cause is clear. Now I must nail the test-harness objection precisely. Let me read the test that documents the heroicons peer blocker, the stubs, and the vitest config.Now let me confirm the admin Button (Radix wrapper), the <Theme> scope, the second usage site, and the module's vitest env.Let me confirm the module's vitest env and test command, plus check how @/ and heroicons resolve (host-provided peers).I have everything confirmed. Let me verify one more thing — that no other in-app native primary style should be preferred, then write the spec.All confirmed. The Radix Button is used across many module components, but only TriageCopilot renders in the detached root — so the fix is narrowly scoped to its Send button. Writing the spec now.Now let me log the spec to project memory under specs/ so future runs can build on it.There's no wiki-write tool exposed in this session (only wiki_search/wiki_read) — spec logging to project memory is handled by the run harness, so I've searched, built on the prior spec, and written the deliverable to the workspace root. Done.

Spec drafted → SPEC-issue-31.md

Prior-memory check: No prior spec targets #31. Found and built on specs/issue-27 (same widget/component, establishes the module's two governing conventions) and noted specs/issue-13 (same design system). No contradiction.

Root cause (confirmed in code): The "Send" button is TriageCopilot.tsx:110 — <Button size="sm"> from @/components/ui, which wraps @radix-ui/themes RadixButton (gatewaze/…/Button/index.tsx:3,97). Radix Themes buttons draw all sizing/radius/accent from CSS vars scoped to <Theme>. But admin/index.ts:16-24 self-mounts ReportFeedbackWidget into a detached root on document.body, outside the app's <Theme> (App.tsx:22 → RadixThemeBridge). No theme vars → grey background + collapsed (tall/narrow) geometry. Matches the report exactly, and it surfaces on /people/:id/profile because the widget floats on every admin page.

Approach: Swap the Radix <Button> for a native Tailwind <button> (scope-independent), matching the widget's own primary "Create issue" button (bg-blue-600 … text-white). Can't wrap the root in <Theme> — that needs @radix-ui/themes in a module file, which every CLAUDE.md prohibits.

Writable repo: gatewaze-modules only (SE module). New triageButtonStyles.ts, edit TriageCopilot.tsx, new test.

Every BLOCKED-review objection resolved

• Confirmed the reviewer's facts: Button is Radix-wrapped; detached-root mount is root cause; dual usage (ReportFeedbackWidget.tsx:119 + SoftwareEngineerTab.tsx:707); @radix-ui/themes prohibition; native-swap + R1 note sound.
• The core blocker — infeasible preferred test — is fixed. I verified against vitest.config.ts: environment: 'node' (no jsdom), aliases stub only @gatewaze/shared/modules and express. Importing TriageCopilot pulls @heroicons/react/24/outline (line 16, kept) and @/lib/supabase (line 14) — neither resolves, so the module throws at import time, before any renderToStaticMarkup runs. heroicons isn't in the module's deps (host-provided peer), exactly as projectAvatarUtils.ts:9 / project-avatar.test.ts:6-8 document; test globs are .test.ts only (no JSX lane). The spec discards the render-markup approach and instead follows the module's proven convention: extract the class string into a pure .ts helper and unit-test it (mirroring project-avatar.test.ts). No silent omission of the heroicons peer — it's named as the decisive blocker.

The spec includes test plan, R1–R4 risks, security/CI note, and out-of-scope. No code was implemented.