fix(audit-wave-9): standardize on Sheet for previews; doctrine in CLAUDE.md

Swap the one outlier (client-interests-tab.tsx) from Vaul Drawer to
Sheet side=right so every detail-preview surface uses the same
primitive. Document the doctrine: Sheet for side panels on both desktop
and mobile; Vaul Drawer reserved for mobile-only bottom-sheet UX
(currently just MoreSheet).

Closes ui/ux M11.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/lib/constants.ts

@@ -195,6 +195,36 @@ function humanizeEnum(raw: string): string {
   return raw.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
 }
 
+/**
+ * Format an arbitrary enum-shaped string ("hot_lead" → "Hot Lead",
+ * "in_progress" → "In Progress"). Centralised so list columns, badge
+ * components, and detail pages render the same value consistently —
+ * replaces the scattered ad-hoc `.replace(/_/g, ' ')` calls flagged
+ * by ui-ux-auditor H1.
+ */
+export function formatEnum(value: string | null | undefined): string {
+  if (!value) return '';
+  return humanizeEnum(value);
+}
+
+/** Format a pipeline stage value. Falls back to formatEnum for unknown values. */
+export function formatStage(value: string | null | undefined): string {
+  if (!value) return '';
+  return STAGE_LABELS[safeStage(value)] ?? formatEnum(value);
+}
+
+/** Format a generic status (eoi_status, contract_status, deposit_status,
+ *  invoice status, document status). Same shape as the enum but kept as
+ *  a separate exported alias so call sites read intentionally. */
+export function formatStatus(value: string | null | undefined): string {
+  return formatEnum(value);
+}
+
+/** Format a priority enum ('low' | 'medium' | 'high' | 'urgent'). */
+export function formatPriority(value: string | null | undefined): string {
+  return formatEnum(value);
+}
+
 export function toSelectOptions<T extends readonly string[]>(
   values: T,
 ): Array<{ value: T[number]; label: string }> {