fix(studio): make paused project messaging easier to scan DEPR-581 (#47807)

## Problem

The free-plan paused project notice was a dense paragraph, so the key
points (data is safe, resume window, download-after-expiry, upgrade)
were easy to skip.

## Fix

Present those points as a scannable bullet list, keeping the dynamic
day-count tooltip, restore-deadline timestamp, and the existing
Pro-wording variant.

Also adds a "Project Status" tab to the dev toolbar (local and staging
only) with a select for forcing the current project's status, so the
paused state and other statuses are easy to preview without touching the
backend. It overrides the status in the React Query cache and reverts on
close, project navigation, or reset.

## How to test

- Run Studio locally against the platform API
- Open the dev toolbar, go to the Project Status tab, and select
INACTIVE
- Navigate to a project page and confirm the paused screen renders
- On a free-plan org, confirm the notice now shows the details as bullet
points with the day-count tooltip and restore-deadline date intact
- Click "Reset to real data" (or close the toolbar) and confirm the
status reverts

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a development toolbar “Project Status” tab to simulate project
status and pause states in non-production environments.
* Status and pause-state overrides persist locally, can be reset, and
are reflected across project detail and paused-state views.
* **Style**
* Refined paused-project messaging: updated the heading and reworked the
free-plan explanation into bullet points, while keeping paid-plan
messaging paragraph-based for readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx

@@ -59,16 +59,16 @@ export const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
         <PauseCircle size={48} strokeWidth={1} className="text-foreground-lighter shrink-0 mb-4" />
         <div className="flex-1">
           <div>
-            <h2 className="mb-4">The project "{project?.name}" is currently paused</h2>
+            <h2 className="mb-4">Project "{project?.name}" is paused</h2>
             <div className="text-foreground-light max-w-4xl">
               {isLoading && <GenericSkeletonLoader className="mt-3" />}
 
               {isPauseStatusSuccess && !isRestoreDisabled ? (
                 isFreePlan ? (
-                  <>
-                    <p className="text-sm">
-                      All data, including backups and storage objects, remains safe. You can resume
-                      this project from the dashboard within{' '}
+                  <ul className="text-sm list-disc pl-4 space-y-2">
+                    <li>All data, including backups and storage objects, remains safe.</li>
+                    <li>
+                      You can resume this project from the dashboard within{' '}
                       <Tooltip>
                         <TooltipTrigger>
                           <span className={cn(InlineLinkClassName, 'text-foreground')}>
@@ -91,20 +91,42 @@ export const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
                         className="text-sm text-foreground"
                         labelFormat="DD MMM YYYY"
                       />
-                      ). After that, this project will not be resumable, but data will still be
+                      ).
+                    </li>
+                    <li>
+                      After that, this project will not be resumable, but data will still be
                       available for download.
-                    </p>
-                    <p className="text-sm mt-4">
+                    </li>
+                    <li>
                       {enableProBenefitWording === 'variant-a'
                         ? 'Upgrade to Pro to prevent pauses and unlock features like branching, compute upgrades, and daily backups.'
                         : 'To prevent future pauses, consider upgrading to Pro.'}
+                    </li>
+                  </ul>
+                ) : (
+                  <>
+                    <p className="text-sm">
+                      Your project data is safe and available for{' '}
+                      <span className="text-foreground">
+                        {finalDaysRemainingBeforeRestoreDisabled} day
+                        {finalDaysRemainingBeforeRestoreDisabled > 1 ? 's' : ''}
+                      </span>{' '}
+                      (until{' '}
+                      <TimestampInfo
+                        displayAs="local"
+                        utcTimestamp={dayjs()
+                          .utc()
+                          .add(pauseStatus.remaining_days_till_restore_disabled ?? 0, 'day')
+                          .toISOString()}
+                        className="text-sm text-foreground"
+                        labelFormat="DD MMM YYYY"
+                      />
+                      ), but inaccessible while paused.
+                    </p>
+                    <p className="text-sm mt-2">
+                      Once resumed, usage will be billed by compute size and hours active.
                     </p>
                   </>
-                ) : (
-                  <p className="text-sm">
-                    Your project data is safe but inaccessible while paused. Once resumed, usage
-                    will be billed by compute size and hours active.
-                  </p>
                 )
               ) : !isLoading ? (
                 <p className="text-sm">

apps/studio/components/ui/DevToolbar/ProjectStatusTab.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import { useQueryClient } from '@tanstack/react-query'
+import { useParams } from 'common'
+import { useEffect, useState } from 'react'
+import { cn, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'ui'
+
+import { projectKeys } from '@/data/projects/keys'
+import { useSetProjectStatus, type Project } from '@/data/projects/project-detail-query'
+import {
+  clearPauseStatusOverride,
+  getPauseStatusOverride,
+  setPauseStatusOverride,
+  type PauseStateOverride,
+} from '@/data/projects/project-pause-status-override'
+import {
+  clearProjectStatusOverride,
+  getProjectStatusOverride,
+  setProjectStatusOverride,
+} from '@/data/projects/project-status-override'
+import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
+import { PROJECT_STATUS } from '@/lib/constants'
+
+type ProjectStatus = Project['status']
+
+const STATUS_LABELS: Record<ProjectStatus, string> = {
+  INACTIVE: 'Paused',
+  ACTIVE_HEALTHY: 'Active (healthy)',
+  ACTIVE_UNHEALTHY: 'Active (unhealthy)',
+  COMING_UP: 'Coming up',
+  UNKNOWN: 'Unknown',
+  GOING_DOWN: 'Going down',
+  INIT_FAILED: 'Init failed',
+  REMOVED: 'Removed',
+  RESTARTING: 'Restarting',
+  RESTORING: 'Restoring',
+  RESTORE_FAILED: 'Restore failed',
+  UPGRADING: 'Upgrading',
+  PAUSING: 'Pausing',
+  PAUSE_FAILED: 'Pause failed',
+  RESIZING: 'Resizing',
+}
+
+const STATUS_OPTIONS = Object.values(PROJECT_STATUS)
+
+const PAUSE_STATE_VALUE_REAL = 'real'
+
+const PAUSE_STATE_OPTIONS: {
+  value: PauseStateOverride | typeof PAUSE_STATE_VALUE_REAL
+  label: string
+}[] = [
+  { value: PAUSE_STATE_VALUE_REAL, label: 'Real data' },
+  { value: 'restorable', label: 'Restorable (can resume)' },
+  { value: 'restore-disabled', label: 'Restore disabled (90+ days)' },
+]
+
+export const ProjectStatusTab = () => {
+  const { ref } = useParams()
+  const queryClient = useQueryClient()
+  const { setProjectStatus } = useSetProjectStatus()
+  const { data: project } = useSelectedProjectQuery()
+  const { data: selectedOrg } = useSelectedOrganizationQuery()
+  const orgSlug = selectedOrg?.slug
+
+  const [statusOverride, setStatusOverride] = useState<ProjectStatus | undefined>(undefined)
+  const [pauseOverride, setPauseOverride] = useState<PauseStateOverride | undefined>(undefined)
+  useEffect(() => {
+    setStatusOverride(getProjectStatusOverride(ref))
+    setPauseOverride(getPauseStatusOverride(ref))
+  }, [ref])
+
+  const currentStatus = statusOverride ?? project?.status
+  const isPaused = currentStatus === PROJECT_STATUS.INACTIVE
+  const hasOverride = statusOverride !== undefined || pauseOverride !== undefined
+
+  const refetchProjectStatus = () => {
+    queryClient.invalidateQueries({ queryKey: projectKeys.detail(ref) })
+    queryClient.invalidateQueries({ queryKey: projectKeys.infiniteList() })
+    if (orgSlug) {
+      queryClient.invalidateQueries({ queryKey: projectKeys.infiniteListByOrg(orgSlug) })
+    }
+  }
+
+  const handleStatusChange = (status: ProjectStatus) => {
+    if (!ref) return
+    setProjectStatusOverride(ref, status)
+    setStatusOverride(status)
+    setProjectStatus({ ref, slug: orgSlug, status })
+  }
+
+  const handlePauseStateChange = (value: PauseStateOverride | typeof PAUSE_STATE_VALUE_REAL) => {
+    if (!ref) return
+    if (value === PAUSE_STATE_VALUE_REAL) {
+      clearPauseStatusOverride(ref)
+      setPauseOverride(undefined)
+    } else {
+      setPauseStatusOverride(ref, value)
+      setPauseOverride(value)
+    }
+    queryClient.invalidateQueries({ queryKey: projectKeys.pauseStatus(ref) })
+  }
+
+  const handleReset = () => {
+    if (ref) {
+      clearProjectStatusOverride(ref)
+      clearPauseStatusOverride(ref)
+    }
+    setStatusOverride(undefined)
+    setPauseOverride(undefined)
+    refetchProjectStatus()
+    queryClient.invalidateQueries({ queryKey: projectKeys.pauseStatus(ref) })
+  }
+
+  const isDisabled = !ref
+
+  return (
+    <div className="p-6 space-y-4">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-foreground-light">
+          Override the status of the current project. Overrides persist across refetches until
+          reset.
+        </p>
+        <button
+          onClick={handleReset}
+          disabled={isDisabled || !hasOverride}
+          className="text-xs text-foreground-lighter hover:text-foreground transition underline disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          Reset to real data
+        </button>
+      </div>
+
+      {isDisabled && (
+        <p className="text-xs text-foreground-muted">Navigate to a project page to use this tab.</p>
+      )}
+
+      <div className={cn('space-y-3', isDisabled && 'opacity-50 pointer-events-none')}>
+        <div className="flex items-center justify-between">
+          <span className="text-sm text-foreground-light">Status</span>
+          <Select
+            value={currentStatus}
+            onValueChange={(value) => handleStatusChange(value as ProjectStatus)}
+          >
+            <SelectTrigger className="w-64 text-xs">
+              <SelectValue placeholder="Select a status" />
+            </SelectTrigger>
+            <SelectContent>
+              {STATUS_OPTIONS.map((status) => (
+                <SelectItem key={status} value={status} className="text-xs">
+                  {STATUS_LABELS[status]}
+                  <span className="ml-1.5 font-mono text-foreground-lighter">{status}</span>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className={cn('flex items-center justify-between', !isPaused && 'opacity-50')}>
+          <div className="flex flex-col">
+            <span className="text-sm text-foreground-light">Pause state</span>
+            <span className="text-xs text-foreground-muted">Applies when status is Paused</span>
+          </div>
+          <Select
+            value={pauseOverride ?? PAUSE_STATE_VALUE_REAL}
+            onValueChange={(value) =>
+              handlePauseStateChange(value as PauseStateOverride | typeof PAUSE_STATE_VALUE_REAL)
+            }
+          >
+            <SelectTrigger className="w-64 text-xs">
+              <SelectValue placeholder="Select a pause state" />
+            </SelectTrigger>
+            <SelectContent>
+              {PAUSE_STATE_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value} className="text-xs">
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/studio/data/projects/project-detail-query.ts

@@ -5,6 +5,7 @@ import { replicaKeys } from '../read-replicas/keys'
 import { ReadReplicasData } from '../read-replicas/replicas-query'
 import { projectKeys } from './keys'
 import { OrgProjectsResponse } from './org-projects-infinite-query'
+import { getProjectStatusOverride } from './project-status-override'
 import type { components } from '@/data/api'
 import { get, handleError, isValidConnString, post } from '@/data/fetchers'
 import type { ResponseError, UseCustomQueryOptions } from '@/types'
@@ -78,7 +79,13 @@ export async function getProjectDetail(
   }
 
   if (error) handleError(error)
-  return { ...data, connectionString: connectionString } as Project
+
+  const project = { ...data, connectionString: connectionString } as Project
+
+  const statusOverride = getProjectStatusOverride(ref)
+  if (statusOverride) project.status = statusOverride
+
+  return project
 }
 
 export type ProjectDetailData = Awaited<ReturnType<typeof getProjectDetail>>

apps/studio/data/projects/project-pause-status-override.ts

@@ -0,0 +1,58 @@
+import type { components } from '@/data/api'
+
+type PauseStatusResponse = components['schemas']['PauseStatusResponse']
+
+export type PauseStateOverride = 'restorable' | 'restore-disabled'
+
+const STORAGE_KEY = 'devToolbar:pauseStatusOverrides'
+
+const IS_ENABLED =
+  process.env.NEXT_PUBLIC_ENVIRONMENT === 'local' ||
+  process.env.NEXT_PUBLIC_ENVIRONMENT === 'staging'
+
+function readOverrides(): Record<string, PauseStateOverride> {
+  if (!IS_ENABLED || typeof window === 'undefined') return {}
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    return raw ? (JSON.parse(raw) as Record<string, PauseStateOverride>) : {}
+  } catch {
+    return {}
+  }
+}
+
+function writeOverrides(overrides: Record<string, PauseStateOverride>) {
+  if (typeof window === 'undefined') return
+  if (Object.keys(overrides).length > 0) {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(overrides))
+  } else {
+    window.localStorage.removeItem(STORAGE_KEY)
+  }
+}
+
+export function getPauseStatusOverride(ref: string | undefined): PauseStateOverride | undefined {
+  if (!IS_ENABLED || !ref) return undefined
+  return readOverrides()[ref]
+}
+
+export function setPauseStatusOverride(ref: string, override: PauseStateOverride) {
+  if (!IS_ENABLED) return
+  writeOverrides({ ...readOverrides(), [ref]: override })
+}
+
+export function clearPauseStatusOverride(ref: string) {
+  if (!IS_ENABLED) return
+  const overrides = readOverrides()
+  delete overrides[ref]
+  writeOverrides(overrides)
+}
+
+export function buildPauseStatus(override: PauseStateOverride): PauseStatusResponse {
+  const isRestorable = override === 'restorable'
+  return {
+    can_restore: isRestorable,
+    last_paused_on: null,
+    latest_downloadable_backup_id: null,
+    max_days_till_restore_disabled: 90,
+    remaining_days_till_restore_disabled: isRestorable ? 78 : 0,
+  }
+}

apps/studio/data/projects/project-pause-status-query.ts

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 
 import { projectKeys } from './keys'
+import { buildPauseStatus, getPauseStatusOverride } from './project-pause-status-override'
 import { get, handleError } from '@/data/fetchers'
 import type { ResponseError, UseCustomQueryOptions } from '@/types'
 
@@ -12,6 +13,9 @@ export async function getProjectPausedStatus(
 ) {
   if (!ref) throw new Error('Project ref is required')
 
+  const override = getPauseStatusOverride(ref)
+  if (override) return buildPauseStatus(override)
+
   const { data, error } = await get('/platform/projects/{ref}/pause/status', {
     params: { path: { ref } },
     signal,

apps/studio/data/projects/project-status-override.ts

@@ -0,0 +1,45 @@
+import type { components } from '@/data/api'
+
+type ProjectStatus = components['schemas']['ProjectDetailResponse']['status']
+
+const STORAGE_KEY = 'devToolbar:projectStatusOverrides'
+
+const IS_ENABLED =
+  process.env.NEXT_PUBLIC_ENVIRONMENT === 'local' ||
+  process.env.NEXT_PUBLIC_ENVIRONMENT === 'staging'
+
+function readOverrides(): Record<string, ProjectStatus> {
+  if (!IS_ENABLED || typeof window === 'undefined') return {}
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    return raw ? (JSON.parse(raw) as Record<string, ProjectStatus>) : {}
+  } catch {
+    return {}
+  }
+}
+
+function writeOverrides(overrides: Record<string, ProjectStatus>) {
+  if (typeof window === 'undefined') return
+  if (Object.keys(overrides).length > 0) {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(overrides))
+  } else {
+    window.localStorage.removeItem(STORAGE_KEY)
+  }
+}
+
+export function getProjectStatusOverride(ref: string | undefined): ProjectStatus | undefined {
+  if (!IS_ENABLED || !ref) return undefined
+  return readOverrides()[ref]
+}
+
+export function setProjectStatusOverride(ref: string, status: ProjectStatus) {
+  if (!IS_ENABLED) return
+  writeOverrides({ ...readOverrides(), [ref]: status })
+}
+
+export function clearProjectStatusOverride(ref: string) {
+  if (!IS_ENABLED) return
+  const overrides = readOverrides()
+  delete overrides[ref]
+  writeOverrides(overrides)
+}

apps/studio/pages/_app.tsx

@@ -81,8 +81,17 @@ const ResourceWarningsTab = IS_DEV_TOOLBAR_ENABLED
     )
   : () => null
 
+const ProjectStatusTab = IS_DEV_TOOLBAR_ENABLED
+  ? dynamic(() =>
+      import('@/components/ui/DevToolbar/ProjectStatusTab').then((m) => m.ProjectStatusTab)
+    )
+  : () => null
+
 const devToolbarExtraTabs: ExtraTab[] = IS_DEV_TOOLBAR_ENABLED
-  ? [{ id: 'warnings', label: 'Warnings', content: <ResourceWarningsTab /> }]
+  ? [
+      { id: 'warnings', label: 'Warnings', content: <ResourceWarningsTab /> },
+      { id: 'project-status', label: 'Project Status', content: <ProjectStatusTab /> },
+    ]
   : []
 
 const FeatureFlagProviderWithOrgContext = ({

apps/studio/routes/__root.tsx

@@ -122,6 +122,14 @@ const ResourceWarningsTab = IS_DEV_TOOLBAR_ENABLED
     )
   : () => null
 
+const ProjectStatusTab = IS_DEV_TOOLBAR_ENABLED
+  ? lazy(() =>
+      import('@/components/ui/DevToolbar/ProjectStatusTab').then((m) => ({
+        default: m.ProjectStatusTab,
+      }))
+    )
+  : () => null
+
 const devToolbarExtraTabs: ExtraTab[] = IS_DEV_TOOLBAR_ENABLED
   ? [
       {
@@ -133,6 +141,15 @@ const devToolbarExtraTabs: ExtraTab[] = IS_DEV_TOOLBAR_ENABLED
           </Suspense>
         ),
       },
+      {
+        id: 'project-status',
+        label: 'Project Status',
+        content: (
+          <Suspense fallback={null}>
+            <ProjectStatusTab />
+          </Suspense>
+        ),
+      },
     ]
   : []