fix(web): resolve issues #1087, #1071, #1079, and #1069

[fhayvy]

Closes #1069
Closes #1071
Closes #1079
Closes #1087

This Pull Request implements frontend UX and visual feedback improvements across the Surety and Signup flows to resolve multiple frontend bugs:

1. Back Navigation Visual Affordance:

   • Problem: The only way back from the surety importer detail page to the portfolio list was a small text link styled identically to body copy, easily overlooked on screens dense with financial information.
   • Solution: Re-styled the back navigation link using an inline-flex layout with a standard Next.js <Link>. It now displays as a polished, button-like component with a custom border, card background, hover transition, and an SVG back chevron icon. This highlights it as a primary navigation path without affecting layouts below it.

2. Accrue & Clawback Success Path Confirmations:

   • Problem: Actions on the surety importer detail page (accruing yield and emergency clawback) simply ran act() and refreshed the view, forcing administrators to check for changes in balance numbers to infer whether they completed successfully.
   • Solution: Introduced successMessage React state inside apps/web/app/surety/[id]/page.tsx that sets a success alert upon successful resolves. Banners display with checkmark icon layouts. Banners disappear automatically after 5 seconds using custom useEffect timers, clear immediately on starting any subsequent action inside the act() wrapper, and feature a manual "Dismiss" action.

3. **Signup Role Choice Consequence Explanations **:

   • Problem: The registration role selector lacked any explanation that the choice determines workspace dashboard routing and permissions, exposing users to making wrong role choices blindly.
   • Solution: Added descriptive dynamic explanations under the role select element inside apps/web/app/signup/page.tsx. Selection text dynamically updates depending on the choice (Importer vs. Surety Admin) to list capabilities, and clearly states that the role choice cannot be changed post-registration without contacting customer support.

4. Surety Portfolio Dashboard Skeletons:

   • Problem: The surety dashboard rendered a raw text Loading... paragraph during initial load phases, contrasting poorly with the high-fidelity route skeletons of the importer dashboard.
   • Solution: Swapped out the raw text for twin skeleton structures matching the eventual page layout:
     • Added internal-page conditional loading blocks in apps/web/app/surety/page.tsx that show metric grid and portfolio item skeletons with Tailwind animate-pulse animations when importers === null.
     • Created apps/web/app/surety/loading.tsx to handle route-level suspense boundaries during Next.js server streaming.

Changed

• apps/web/app/surety/[id]/page.tsx: Modified the navigation back link structure and introduced local success state, useEffect timers, and alerts for accrual/clawback results.
• apps/web/app/signup/page.tsx: Added dynamic helper descriptions detailing role permissions and constraints under the signup select tag.
• apps/web/app/surety/page.tsx: Replaced raw loading text with grid layout and item-list skeleton loaders under importers === null.
• apps/web/app/surety/loading.tsx [NEW]: Created route suspense skeleton layout to streamline page transition phases.
• apps/api/package.json: Restored OpenTelemetry dependencies to their valid versions from the lockfile.
• package.json & package-lock.json: Configured local workspace packages to use lightningcss.

[drips-wave]

@fhayvy Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[vercel]

Deployment failed for project tariff-shield-web with the following error:

The `vercel.json` schema validation failed with the following message: should NOT have additional property `rootDirectory`

Learn More: https://vercel.com/docs/concepts/projects/project-configuration

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
tariff-shield-web	Error		Aug 27, 2026 4:24pm

[vercel]

Deployment failed for project tariff-shield-web with the following error:

The `vercel.json` schema validation failed with the following message: should NOT have additional property `rootDirectory`

Learn More: https://vercel.com/docs/concepts/projects/project-configuration