From a38ca880e731642f53e63cc74dd5b761710a1700 Mon Sep 17 00:00:00 2001
From: Aarav Sharma <iamcoder18@gmail.com>
Date: Tue, 2 Jun 2026 19:22:39 -0600
Subject: [PATCH 1/2] feat(web): show deprecated badge for orchestrator in
 ModeCombobox

Add a deprecated?: boolean field to ModeOption, mark the built-in
orchestrator mode as deprecated in NEXT_MODE_OPTIONS, and render a
yellow pill Badge next to deprecated modes in ModeComboboxGroups.

Also introduce a warning Badge variant for consistent warning-style
badges in the web app.
---
 apps/web/src/components/shared/ModeCombobox.tsx | 14 ++++++++++++--
 apps/web/src/components/ui/badge.tsx            |  2 ++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/shared/ModeCombobox.tsx b/apps/web/src/components/shared/ModeCombobox.tsx
index c1356c84c5..650ab84dcb 100644
--- a/apps/web/src/components/shared/ModeCombobox.tsx
+++ b/apps/web/src/components/shared/ModeCombobox.tsx
@@ -14,6 +14,7 @@ import {
 } from '@/components/ui/command';
 import { ChevronsUpDown, Check } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
 
 /**
  * Mode option type for customizable mode lists.
@@ -22,6 +23,7 @@ export type ModeOption<T extends string = string> = {
   value: T;
   label: string;
   description: string;
+  deprecated?: boolean;
 };
 
 /**
@@ -44,7 +46,12 @@ export const NEXT_MODE_OPTIONS: ModeOption<'code' | 'plan' | 'debug' | 'orchestr
   { value: 'code', label: 'Code', description: 'Write and modify code' },
   { value: 'plan', label: 'Plan', description: 'Plan and design solutions' },
   { value: 'debug', label: 'Debug', description: 'Find and fix issues' },
-  { value: 'orchestrator', label: 'Orchestrator', description: 'Coordinate complex tasks' },
+  {
+    value: 'orchestrator',
+    label: 'Orchestrator',
+    description: 'Coordinate complex tasks',
+    deprecated: true,
+  },
   { value: 'ask', label: 'Ask', description: 'Get answers and explanations' },
 ];
 
@@ -214,7 +221,10 @@ function ModeComboboxGroups<T extends string>({
       className="flex items-center gap-2"
     >
       <div className="flex min-w-0 flex-1 flex-col">
-        <span className="truncate">{mode.label}</span>
+        <div className="flex items-center gap-2">
+          <span className="truncate">{mode.label}</span>
+          {mode.deprecated && <Badge variant="warning">Deprecated</Badge>}
+        </div>
         {mode.description && (
           <span className="text-muted-foreground truncate text-xs">{mode.description}</span>
         )}
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
index 789f95d54e..5273e16390 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/apps/web/src/components/ui/badge.tsx
@@ -18,6 +18,8 @@ const badgeVariants = cva(
         outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
         beta: 'rounded-full bg-blue-500/10 px-3 py-1 font-semibold text-blue-400 ring-1 ring-blue-500/20 border-transparent',
         new: 'rounded-full bg-green-500/10 px-3 py-1 font-semibold text-green-400 ring-1 ring-green-500/20 border-transparent',
+        warning:
+          'rounded-full bg-yellow-500/10 px-3 py-1 font-semibold text-yellow-400 ring-1 ring-yellow-500/20 border-transparent',
       },
     },
     defaultVariants: {

From 6835b9bc5edce602811e570355055e20be29560e Mon Sep 17 00:00:00 2001
From: Evgeny Shurakov <eshurakov@users.noreply.github.com>
Date: Thu, 4 Jun 2026 21:54:19 +0200
Subject: [PATCH 2/2] fix(web): derive deprecated mode label from flag

---
 apps/web/src/components/shared/ModeCombobox.tsx | 17 ++++++++++-------
 apps/web/src/components/ui/badge.tsx            |  2 --
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/shared/ModeCombobox.tsx b/apps/web/src/components/shared/ModeCombobox.tsx
index 650ab84dcb..0fbff8dded 100644
--- a/apps/web/src/components/shared/ModeCombobox.tsx
+++ b/apps/web/src/components/shared/ModeCombobox.tsx
@@ -14,7 +14,6 @@ import {
 } from '@/components/ui/command';
 import { ChevronsUpDown, Check } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { Badge } from '@/components/ui/badge';
 
 /**
  * Mode option type for customizable mode lists.
@@ -221,12 +220,16 @@ function ModeComboboxGroups<T extends string>({
       className="flex items-center gap-2"
     >
       <div className="flex min-w-0 flex-1 flex-col">
-        <div className="flex items-center gap-2">
-          <span className="truncate">{mode.label}</span>
-          {mode.deprecated && <Badge variant="warning">Deprecated</Badge>}
-        </div>
-        {mode.description && (
-          <span className="text-muted-foreground truncate text-xs">{mode.description}</span>
+        <span className="truncate">{mode.label}</span>
+        {(mode.deprecated || mode.description) && (
+          <span
+            className={cn(
+              'truncate text-xs',
+              mode.deprecated ? 'text-amber-400/80' : 'text-muted-foreground'
+            )}
+          >
+            {mode.deprecated ? 'Deprecated' : mode.description}
+          </span>
         )}
       </div>
       <Check
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
index 5273e16390..789f95d54e 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/apps/web/src/components/ui/badge.tsx
@@ -18,8 +18,6 @@ const badgeVariants = cva(
         outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
         beta: 'rounded-full bg-blue-500/10 px-3 py-1 font-semibold text-blue-400 ring-1 ring-blue-500/20 border-transparent',
         new: 'rounded-full bg-green-500/10 px-3 py-1 font-semibold text-green-400 ring-1 ring-green-500/20 border-transparent',
-        warning:
-          'rounded-full bg-yellow-500/10 px-3 py-1 font-semibold text-yellow-400 ring-1 ring-yellow-500/20 border-transparent',
       },
     },
     defaultVariants: {