From 7320a0fe00772d687a0d34ceb1200e8a6d410d24 Mon Sep 17 00:00:00 2001
From: Satya Patel <satyapatel111@gmail.com>
Date: Wed, 29 Apr 2026 12:12:43 -0700
Subject: [PATCH] feat(pricing): align desktop and marketing comparison tables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Renames Cloud → Remote workspaces, swaps the (Coming Soon) text for
proper Beta/Coming-soon Badges, adds an Automations row (Pro+),
and reorders Features so they read top-to-bottom by surface
(workspaces → automations → mobile → integrations → collab).
The marketing /pricing page mirrors the desktop billing comparison.
---
 .../settings/billing/plans/page.tsx           | 28 ++++++++++++-------
 .../ComparisonTable/ComparisonTable.tsx       | 14 ++++++----
 apps/marketing/src/app/pricing/constants.ts   | 16 ++++-------
 3 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/apps/desktop/src/renderer/routes/_authenticated/settings/billing/plans/page.tsx b/apps/desktop/src/renderer/routes/_authenticated/settings/billing/plans/page.tsx
index 0cd76ee3dad..7ed724627f0 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/settings/billing/plans/page.tsx
+++ b/apps/desktop/src/renderer/routes/_authenticated/settings/billing/plans/page.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@superset/ui/badge";
 import { Button } from "@superset/ui/button";
 import { toast } from "@superset/ui/sonner";
 import { Switch } from "@superset/ui/switch";
@@ -49,7 +50,7 @@ type ComparisonValue = string | boolean | null;
 type ComparisonRow = {
 	label: string;
 	values: ComparisonValue[];
-	comingSoon?: boolean;
+	badge?: { label: string; variant: "default" | "secondary" };
 };
 
 type ComparisonSection = {
@@ -135,18 +136,22 @@ const COMPARISON_SECTIONS: ComparisonSection[] = [
 				values: [true, true, true],
 			},
 			{
-				label: "GitHub integration",
-				values: [true, true, true],
+				label: "Remote workspaces",
+				values: [null, true, true],
+				badge: { label: "Beta", variant: "default" },
 			},
 			{
-				label: "Cloud workspaces",
+				label: "Automations",
 				values: [null, true, true],
-				comingSoon: true,
 			},
 			{
 				label: "Mobile app",
 				values: [null, true, true],
-				comingSoon: true,
+				badge: { label: "Coming soon", variant: "secondary" },
+			},
+			{
+				label: "GitHub integration",
+				values: [true, true, true],
 			},
 			{
 				label: "Linear integration",
@@ -583,10 +588,13 @@ function PlansPage() {
 										<Fragment key={row.label}>
 											<div className="flex items-center gap-1.5 px-2 py-2.5 text-xs text-muted-foreground">
 												{row.label}
-												{row.comingSoon && (
-													<span className="text-[10px] text-muted-foreground/60">
-														(Coming Soon)
-													</span>
+												{row.badge && (
+													<Badge
+														variant={row.badge.variant}
+														className="px-1.5 py-0 text-[10px] font-medium"
+													>
+														{row.badge.label}
+													</Badge>
 												)}
 											</div>
 											{row.values.map((value, valueIndex) => (
diff --git a/apps/marketing/src/app/pricing/components/ComparisonTable/ComparisonTable.tsx b/apps/marketing/src/app/pricing/components/ComparisonTable/ComparisonTable.tsx
index d1583e79c29..74bc5e99675 100644
--- a/apps/marketing/src/app/pricing/components/ComparisonTable/ComparisonTable.tsx
+++ b/apps/marketing/src/app/pricing/components/ComparisonTable/ComparisonTable.tsx
@@ -88,7 +88,7 @@ function DesktopRow({ row }: { row: ComparisonRow }) {
 			<td className="py-4 pr-4 text-sm text-foreground">
 				<div className="flex items-center gap-2">
 					<span>{row.label}</span>
-					{row.comingSoon && <ComingSoonBadge />}
+					{row.badge && <RowBadge badge={row.badge} />}
 				</div>
 			</td>
 			{row.values.map((value, index) => (
@@ -143,7 +143,7 @@ function MobileTable() {
 								>
 									<div className="flex items-center gap-2 text-sm text-foreground">
 										<span>{row.label}</span>
-										{row.comingSoon && <ComingSoonBadge />}
+										{row.badge && <RowBadge badge={row.badge} />}
 									</div>
 									<div className="shrink-0 text-sm text-foreground">
 										<Cell value={row.values[selectedIndex] ?? null} />
@@ -173,14 +173,18 @@ function Cell({ value }: { value: ComparisonRow["values"][number] }) {
 	return <span>{value}</span>;
 }
 
-function ComingSoonBadge() {
+function RowBadge({ badge }: { badge: NonNullable<ComparisonRow["badge"]> }) {
+	const isPrimary = badge.variant === "default";
 	return (
 		<span
 			className={cn(
-				"rounded-sm bg-accent/40 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+				"rounded-sm px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide",
+				isPrimary
+					? "bg-foreground text-background"
+					: "bg-accent/40 text-muted-foreground",
 			)}
 		>
-			Coming soon
+			{badge.label}
 		</span>
 	);
 }
diff --git a/apps/marketing/src/app/pricing/constants.ts b/apps/marketing/src/app/pricing/constants.ts
index 8c49a84abfb..4c0a4f9cbf6 100644
--- a/apps/marketing/src/app/pricing/constants.ts
+++ b/apps/marketing/src/app/pricing/constants.ts
@@ -109,7 +109,7 @@ export interface ComparisonRow {
 		string | boolean | null,
 		string | boolean | null,
 	];
-	comingSoon?: boolean;
+	badge?: { label: string; variant: "default" | "secondary" };
 }
 
 export interface ComparisonSection {
@@ -134,22 +134,18 @@ export const COMPARISON_SECTIONS: ComparisonSection[] = [
 		rows: [
 			{ label: "Desktop app", values: [true, true, true] },
 			{ label: "Local workspaces", values: [true, true, true] },
-			{ label: "GitHub integration", values: [true, true, true] },
-			{
-				label: "CLI",
-				values: [true, true, true],
-				comingSoon: true,
-			},
 			{
 				label: "Remote workspaces",
 				values: [null, true, true],
-				comingSoon: true,
+				badge: { label: "Beta", variant: "default" },
 			},
+			{ label: "Automations", values: [null, true, true] },
 			{
-				label: "Mobile",
+				label: "Mobile app",
 				values: [null, true, true],
-				comingSoon: true,
+				badge: { label: "Coming soon", variant: "secondary" },
 			},
+			{ label: "GitHub integration", values: [true, true, true] },
 			{ label: "Linear integration", values: [null, true, true] },
 			{ label: "Slack integration", values: [null, true, true] },
 			{ label: "Team collaboration", values: [null, true, true] },