feat(studio): refresh environments page UI

[iipanda]

Summary

• Replace plain bordered list with Card components in a responsive grid (1/2/3 columns)
• Each card shows a contextual icon (Shield for production, GitBranch for others) and human-readable dates
• Active environment gets an "Active" badge and ring highlight; inactive cards show a "Switch to" button
• Delete action moved from inline button to a context menu dropdown (three-dot menu)

Test plan

• Visit /admin/environments and verify card layout renders correctly
• Confirm active environment shows "Active" badge and no switch button
• Click "Switch to" on another card and verify environment switches
• Open three-dot menu on non-default environment and verify delete option works
• Confirm production card has no context menu or delete option
• Check responsive layout at different viewport widths
• Verify dark mode styling looks correct

Summary by CodeRabbit

• New Features

  • Environment switching functionality
  • Active environment indicator badge

• UI/Style

  • Restructured environment list layout with improved card design
  • Added visual icons to distinguish environment types
  • Enhanced responsive grid layout for better mobile experience

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
mdcms-studio-review	Ready	Preview, Comment	Apr 10, 2026 10:27am

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

[coderabbitai]

📝 Walkthrough

Walkthrough

Updated the environments management page component to support active environment indication and switching. Restructured environment list items from simple articles to Card layouts with status badges, default/non-default icons, and conditional actions based on environment state.

Changes

Cohort / File(s)	Summary
Environment Management UI packages/studio/src/lib/runtime-ui/app/admin/environments-page.tsx	Added activeEnvironment and onSwitchEnvironment props to enable environment switching. Reworked list items to use Card components with "Active" badges, Shield/GitBranch icons for default/non-default environments, and conditional action buttons. Updated grid layout responsiveness and date display formatting.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 The burrows now shine with environment grace,
Cards and badges mark each special place!
Active badges glow, icons guide the way,
Switch between homes with a hop and a day!
Shield and branch dancing in perfect array ✨

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'feat(studio): refresh environments page UI' directly aligns with the main objective of updating the environments page UI with new Card components, responsive grid layout, and improved visual presentation.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/environments-page-ui-refresh

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/studio/src/lib/runtime-ui/app/admin/environments-page.tsx (1)

159-182: Replace hardcoded month abbreviations with a locale-aware formatter to match codebase patterns.

The hardcoded MONTH_ABBREV array duplicates formatting logic already used elsewhere in the codebase. Other admin pages (mock-data.ts, trash-page.tsx, page.tsx, content/[type]/page.tsx) use toLocaleDateString("en-US", { month: "short", day: "numeric" }) for consistent date display. Standardize formatDisplayDate() to use the same pattern for consistency and better i18n support.

♻️ Suggested refactor

-const MONTH_ABBREV = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "Apr",
-  "May",
-  "Jun",
-  "Jul",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec",
-];
-
 function formatDisplayDate(value: string): string {
   const date = new Date(value);

   if (Number.isNaN(date.getTime())) {
     return value;
   }

-  return `${MONTH_ABBREV[date.getUTCMonth()]} ${date.getUTCDate()}, ${date.getUTCFullYear()}`;
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" });
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/studio/src/lib/runtime-ui/app/admin/environments-page.tsx` around
lines 159 - 182, The function formatDisplayDate currently uses a hardcoded
MONTH_ABBREV array; replace that with a locale-aware formatter to match other
admin pages: remove MONTH_ABBREV and change formatDisplayDate to parse the input
into a Date, return the original value if date.getTime() is NaN, otherwise use
date.toLocaleDateString("en-US", { month: "short", day: "numeric" }) and append
the UTC year (e.g. `, ${date.getUTCFullYear()}`) to preserve the previous output
format; update references to formatDisplayDate accordingly.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/studio/src/lib/runtime-ui/app/admin/environments-page.tsx`:
- Around line 159-182: The function formatDisplayDate currently uses a hardcoded
MONTH_ABBREV array; replace that with a locale-aware formatter to match other
admin pages: remove MONTH_ABBREV and change formatDisplayDate to parse the input
into a Date, return the original value if date.getTime() is NaN, otherwise use
date.toLocaleDateString("en-US", { month: "short", day: "numeric" }) and append
the UTC year (e.g. `, ${date.getUTCFullYear()}`) to preserve the previous output
format; update references to formatDisplayDate accordingly.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7e91a2d2-0dda-4f9a-9852-77d41871ae4b

📥 Commits

Reviewing files that changed from the base of the PR and between 958a481 and 91d1da0.

📒 Files selected for processing (1)

• packages/studio/src/lib/runtime-ui/app/admin/environments-page.tsx