From 5bcd317ec6ffe6993dbeb429aacf627a6da5d8d2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 13 Aug 2026 13:08:08 +0000
Subject: [PATCH] feat(studio): reorder Terminal tab; move Private Alpha badge
 to sidebar header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Terminal (disabled) now sits second to last: Overview / Logs / Terminal / Settings.
- Move the "Private Alpha" badge off the Workers list title and onto the product
  menu sidebar header, next to the "Workers" title. Threaded via an optional
  productMenuBadge/titleBadge prop through ProjectLayout → ProductMenuBar
  (additive, no change for other products).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XQ5b58nwfCGsifA7PCheQb
---
 .../Workers/WorkerDetail/WorkerDetail.tsx     | 46 +++++++++++--------
 .../layouts/Navigation/ProductMenuBar.tsx     | 10 +++-
 .../layouts/ProjectLayout/index.tsx           |  9 +++-
 .../layouts/WorkersLayout/WorkersLayout.tsx   |  2 +
 .../pages/project/[ref]/workers/index.tsx     |  8 +---
 5 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx
index 00a64f4dcf5..fc2137dc23a 100644
--- a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx
+++ b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx
@@ -52,6 +52,9 @@ import {
 type WorkerTab = 'overview' | 'logs' | 'settings'
 const WORKER_TABS: WorkerTab[] = ['overview', 'logs', 'settings']
 
+// Display order for the nav — Terminal is a disabled placeholder second to last.
+const TAB_ORDER: Array<WorkerTab | 'terminal'> = ['overview', 'logs', 'terminal', 'settings']
+
 const TAB_LABEL: Record<WorkerTab, string> = {
   overview: 'Overview',
   logs: 'Logs',
@@ -197,26 +200,29 @@ export const WorkerDetail = () => {
 
         <PageHeaderNavigationTabs>
           <NavMenu>
-            {WORKER_TABS.map((item) => (
-              <NavMenuItem key={item} active={tab === item}>
-                <button type="button" onClick={() => setTab(item)}>
-                  {TAB_LABEL[item]}
-                </button>
-              </NavMenuItem>
-            ))}
-            <NavMenuItem active={false}>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="flex h-full cursor-not-allowed items-center gap-1.5 text-foreground-muted">
-                    Terminal
-                    <span className="rounded-full border border-strong px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-foreground-lighter">
-                      Soon
-                    </span>
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent side="bottom">Coming soon in private alpha</TooltipContent>
-              </Tooltip>
-            </NavMenuItem>
+            {TAB_ORDER.map((item) =>
+              item === 'terminal' ? (
+                <NavMenuItem key="terminal" active={false}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span className="flex h-full cursor-not-allowed items-center gap-1.5 text-foreground-muted">
+                        Terminal
+                        <span className="rounded-full border border-strong px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-foreground-lighter">
+                          Soon
+                        </span>
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Coming soon in private alpha</TooltipContent>
+                  </Tooltip>
+                </NavMenuItem>
+              ) : (
+                <NavMenuItem key={item} active={tab === item}>
+                  <button type="button" onClick={() => setTab(item)}>
+                    {TAB_LABEL[item]}
+                  </button>
+                </NavMenuItem>
+              )
+            )}
           </NavMenu>
         </PageHeaderNavigationTabs>
       </PageHeader>
diff --git a/apps/studio/components/layouts/Navigation/ProductMenuBar.tsx b/apps/studio/components/layouts/Navigation/ProductMenuBar.tsx
index f36c6d8c4d9..11f6f3c2bd7 100644
--- a/apps/studio/components/layouts/Navigation/ProductMenuBar.tsx
+++ b/apps/studio/components/layouts/Navigation/ProductMenuBar.tsx
@@ -1,15 +1,18 @@
 import { useFlag, useParams } from 'common'
 import Link from 'next/link'
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import { Button, cn } from 'ui'
 
 interface ProductMenuBarProps {
   title: string
+  /** Optional node rendered next to the title, e.g. a status badge. */
+  titleBadge?: ReactNode
   className?: string
 }
 
 export const ProductMenuBar = ({
   title,
+  titleBadge,
   children,
   className,
 }: PropsWithChildren<ProductMenuBarProps>) => {
@@ -30,7 +33,10 @@ export const ProductMenuBar = ({
       )}
     >
       <div className="border-default flex min-h-(--header-height) items-center border-b px-6 justify-between">
-        <h4 className="text-lg">{title}</h4>
+        <div className="flex items-center gap-2">
+          <h4 className="text-lg">{title}</h4>
+          {titleBadge}
+        </div>
         {showExplorerCTA && (
           <Button asChild variant="default">
             <Link href={`/project/${ref}/explorer`}>Explorer</Link>
diff --git a/apps/studio/components/layouts/ProjectLayout/index.tsx b/apps/studio/components/layouts/ProjectLayout/index.tsx
index d9d487962d3..7e36f11ecb8 100644
--- a/apps/studio/components/layouts/ProjectLayout/index.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/index.tsx
@@ -106,6 +106,8 @@ export interface ProjectLayoutProps {
   isLoading?: boolean
   isBlocking?: boolean
   product?: string
+  /** Optional node rendered next to the product title in the menu bar header. */
+  productMenuBadge?: ReactNode
   productMenu?: ReactNode
   browserTitle?: {
     entity?: string
@@ -124,6 +126,7 @@ export const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<Projec
       isLoading = false,
       isBlocking = true,
       product = '',
+      productMenuBadge,
       productMenu,
       browserTitle,
       children,
@@ -298,7 +301,11 @@ export const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<Projec
                       isBlocking={isBlocking}
                       productMenu={productMenu}
                     >
-                      <ProductMenuBar title={product} className={productMenuClassName}>
+                      <ProductMenuBar
+                        title={product}
+                        titleBadge={productMenuBadge}
+                        className={productMenuClassName}
+                      >
                         {productMenu}
                       </ProductMenuBar>
                     </MenuBarWrapper>
diff --git a/apps/studio/components/layouts/WorkersLayout/WorkersLayout.tsx b/apps/studio/components/layouts/WorkersLayout/WorkersLayout.tsx
index cc431dd5c8a..a58e21d5638 100644
--- a/apps/studio/components/layouts/WorkersLayout/WorkersLayout.tsx
+++ b/apps/studio/components/layouts/WorkersLayout/WorkersLayout.tsx
@@ -1,6 +1,7 @@
 import { useParams } from 'common'
 import { useRouter } from 'next/router'
 import { useMemo, type PropsWithChildren } from 'react'
+import { Badge } from 'ui'
 
 import { ProjectLayout } from '../ProjectLayout'
 import { ProductMenu } from '@/components/ui/ProductMenu'
@@ -43,6 +44,7 @@ const WorkersLayout = ({ children, title }: PropsWithChildren<WorkersLayoutProps
   return (
     <ProjectLayout
       product="Workers"
+      productMenuBadge={<Badge variant="warning">Private Alpha</Badge>}
       productMenu={<WorkersProductMenu />}
       isBlocking={false}
       browserTitle={{ entity: 'Workers', section: title }}
diff --git a/apps/studio/pages/project/[ref]/workers/index.tsx b/apps/studio/pages/project/[ref]/workers/index.tsx
index c01795c8765..79ba30fa28b 100644
--- a/apps/studio/pages/project/[ref]/workers/index.tsx
+++ b/apps/studio/pages/project/[ref]/workers/index.tsx
@@ -1,6 +1,5 @@
 import { useParams } from 'common'
 import { useEffect, useState } from 'react'
-import { Badge } from 'ui'
 import { PageContainer } from 'ui-patterns/PageContainer'
 import {
   PageHeader,
@@ -35,12 +34,7 @@ const WorkersPage: NextPageWithLayout = () => {
       <PageHeader size="large">
         <PageHeaderMeta>
           <PageHeaderSummary>
-            <PageHeaderTitle>
-              <span className="flex items-center gap-3">
-                Workers
-                <Badge variant="warning">Private Alpha</Badge>
-              </span>
-            </PageHeaderTitle>
+            <PageHeaderTitle>Workers</PageHeaderTitle>
             <PageHeaderDescription>
               Run managed compute in microVMs next to your database
             </PageHeaderDescription>