feat--frontend-overhaul

[grutt]

Description

A complete rework of the Hatchet frontend UI/UX to support a more consistent, scalable, and navigable developer experience.

Fixes # (issue)

Type of change

• 🚨 Refactor (major structural/UI overhaul)

Goals

This PR addresses core UX and structural issues that have grown with the platform:

• Establish consistent layout and component structure across pages
• Improve clarity and traceability of parent-child workflow runs
• Simplify navigation across services and settings
• Enhance maintainability for contributors by reducing ad-hoc patterns

---

Structural Changes

• Feature hooks
  • use-alerter.ts notification component (top right) -- right now only invites
  • use-api-meta.ts api metadata for capabilities -- bundles cloud and oss calls
  • use-api-tokens.ts api token crud
  • use-billing.ts cloud only billing state
  • use-breadcrumbs.tsx breadcrumb state for navigation
  • use-can.ts permission based on user and tenant state
  • use-cloud-feature-flags.ts cloud feature flags
  • use-crons.ts cron run crud
  • use-definitions.ts definition crud
  • use-docs-sheet.ts doc sidebar state
  • use-filters.tsx sharable filter state
  • use-managed-compute.ts cloud managed compute state
  • use-members.tsx tenant member state and invite crud
  • use-mobile.tsx is mobile
  • use-pagination.tsx sharable page state
  • use-ratelimits.ts ratelimit crud
  • use-run-detail.tsx detailed view for workflow and task runs
  • use-runs.tsx run list and actions for runs
  • use-schedules.ts schedules crud
  • use-support-chat.ts cloud chat helpers
  • use-tenant.ts tenant crud
  • use-timeline-context.tsx state for the waterfall
  • use-user.ts user crud
  • use-workers.ts worker crud
• Initial sharable filter and pagination hooks and components
• Replace all routes and links with route builder utility
• Replace doc links with exported doc link generation
• Add can package for consistent authorization checks
• Introduce breadcrumbs across relevant pages
• Consistent layout structure and ShadCN UI usage
• Add /next routing namespace for new UI shell
• Add CodeBlock component for docs-like code consistency
• Standardized filter component design
• Error boundaries on hook mutation failure
• Initial loading state ... cmd + f loading...

---

Pages Ready to Rock ✅

As we burn page design and layout ✅ when it is confirmed to be feature complete and responsive

Auth

• /next/auth/login
• /next/auth/register
• /next/auth/verify-email

Onboarding

• /next/onboarding/new
• /next/onboarding/invites

Runs

• /next/runs
• /next/runs/:runId
• /next/runs/:runId/:taskId

Scheduled

• /next/scheduled

Crons

• /next/crons

Tasks

• /next/tasks

Services

• /next/services
• /next/services/:serviceName
• /next/services/:serviceName/:workerName

Rate Limits

• /next/rate-limits

Settings

• /next/settings/api-tokens
• /next/settings/team
• /next/settings/overview
• /next/settings/github
• /next/settings/resource-limits
• /next/settings/alerting
• /next/settings/ingestors

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
hatchet-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 21, 2025 8:44pm
hatchet-v0-docs	🛑 Canceled (Inspect)			Apr 21, 2025 8:44pm

[Copilot]

Copilot reviewed 221 out of 222 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

• frontend/app/package.json: Language not supported

Comments suppressed due to low confidence (1)

frontend/app/src/next/components/runs/runs-histogram.tsx:18

• The useQuery hook is used but not imported. Ensure you import useQuery from the appropriate library (e.g., react-query) to avoid runtime errors.

const workflowRunEventsMetricsQuery = useQuery({

[grutt]

Copilot reviewed 221 out of 222 changed files in this pull request and generated 2 comments.

Files not reviewed (1)
Comments suppressed due to low confidence (1)

wow im not sure if the rewrite is not bad or if copilot is bad....

[Copilot]

Copilot reviewed 220 out of 221 changed files in this pull request and generated no comments.

Files not reviewed (1)

• frontend/app/package.json: Language not supported

Comments suppressed due to low confidence (2)

frontend/app/src/next/components/runs/run-output-card.tsx:77

• Wrap the JSON.parse(error) call in a try/catch block to prevent the component from throwing an exception if the error string is not valid JSON. For example, default to displaying the raw error string if parsing fails.

error ? JSON.stringify(JSON.parse(error), null, 2) : JSON.stringify(output, null, 2)

frontend/app/src/next/components/providers/support-chat.provider.tsx:58

• Check if the script element is still present in the DOM before calling removeChild in the cleanup function to avoid possible errors.

document.body.removeChild(script);

[mrkaye97]

I know we do this a lot - I think it's more Tailwind-y to use data attribute variants for this sort of thing. It's not blocking or anything, but I think at some point we should do this