feat(studio): spec field labels, async button states, live compile badge

[Taleef7]

Three frontend-only Studio UX fixes. No backend, schema, API-contract, or compliance-logic changes. The Tests tab (TestsTab.tsx) spinner + disabled-while-pending pattern was used as the reference for all async-button work.

Fix 1 — Spec field labels (SpecTab.tsx)

Every spec control was a bare input/textarea with only a placeholder. Added a persistent visible <label> above each of the 8 fields (Description, Eligibility Role Filter, Eligibility Site Filter, Program Enrollment Text, Exclusion Label, Exclusion Criteria Text, Compliance Window, Required Data Elements), associated via htmlFor/id for accessibility. Placeholders retained as hint text. Field order, state, and the save payload are unchanged.

Fix 2 — Async button feedback across Studio

Added a local pending boolean (set before the await, cleared in finally) to every async button that lacked in-flight state, with an inline spinner + verb label and disabled while pending (guards double-submit):

• CqlTab: Compile → "Compiling…"
• SpecTab: AI Draft Spec → "Drafting…", Save Draft → "Saving…"
• ReleaseApprovalTab: Approve → "Approving…", Activate → "Activating…", Deprecate → "Deprecating…"

Spinner markup matches TestsTab for visual consistency. Existing emitToast success/failure calls are unchanged. Note: CqlTab's "AI Draft CQL" button only opens a dialog — its actual async ("Generate CQL Draft") already had the in-flight pattern, so it was left as-is.

Fix 3 — Compile status badge reflects the live result (CqlTab.tsx + studio/[id]/page.tsx)

The badge rendered measure.compileStatus (persisted prop), so it stayed stale (e.g. "NOT COMPILED") after a Compile even though the API returns the new status. The parent now holds a liveCompileStatus override derived from the compile response status field (COMPILED | WARNINGS | ERROR) and passes it to CqlTab, which renders liveCompileStatus ?? measure.compileStatus. The badge flips the moment compile returns — no reload. The override resets on measure navigation. WARNINGS renders amber (distinct from ERROR red), confirmed by compileStatusClass.

Verification

• npm run lint — 0 errors (1 pre-existing warning in test/mocks/next-font.ts, untouched).
• npm run test — 53 passed, including 5 new tests.
• npm run build — TypeScript clean, all routes built.

New Vitest coverage:

• SpecTab.test.tsx — a <label> resolves for each of the 8 spec fields (getByLabelText); Save Draft / AI Draft Spec show in-flight states.
• CqlTab.test.tsx — badge flips NOT_COMPILED → WARNINGS from a mocked compile response without remount (amber, not red); Compile shows "Compiling…" + disabled while pending.

Not merged — deploy is owned by the maintainer.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
workwell-measure-studio	Ready	Preview, Comment	Jun 8, 2026 6:27pm