From ab23e1f5f9bfcc594ad25f54f6a39caabe55715e Mon Sep 17 00:00:00 2001
From: ciregenz <EricZeng2002@gmail.com>
Date: Mon, 23 Mar 2026 17:53:13 -0700
Subject: [PATCH] [eric] mark non-Claude subscriptions as coming soon, reorder
 providers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Gemini, ChatGPT, GitHub Copilot marked as preview (dimmed, unclickable)
- Shows "Coming soon" instead of Connect button
- Reordered: Claude → Gemini → ChatGPT → GitHub Copilot
- Applied to both Settings subscription cards and onboarding modal
---
 .../src/app/components/OnboardingModal.tsx    | 19 ++++++++++---------
 frontend/src/app/pages/Settings/Settings.tsx  | 17 +++++++++++------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/components/OnboardingModal.tsx b/frontend/src/app/components/OnboardingModal.tsx
index 02c7fb6f..d046d3ac 100644
--- a/frontend/src/app/components/OnboardingModal.tsx
+++ b/frontend/src/app/components/OnboardingModal.tsx
@@ -5,10 +5,10 @@ import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import { API_BASE } from '@/shared/config';
 
 const SUBSCRIPTION_PROVIDERS = [
-  { id: 'claude', name: 'Claude', desc: 'Sonnet, Opus, Haiku', color: '#E8927A' },
-  { id: 'codex', name: 'ChatGPT', desc: 'GPT-5.4, o3, o4-mini', color: '#74AA9C' },
-  { id: 'github', name: 'GitHub Copilot', desc: 'Claude + GPT models', color: '#8B949E' },
-  { id: 'gemini-cli', name: 'Gemini', desc: 'Gemini 2.5 Pro & Flash', color: '#4285F4' },
+  { id: 'claude', name: 'Claude', desc: 'Sonnet, Opus, Haiku', color: '#E8927A', preview: false },
+  { id: 'gemini-cli', name: 'Gemini', desc: 'Gemini 2.5 Pro & Flash', color: '#4285F4', preview: true },
+  { id: 'codex', name: 'ChatGPT', desc: 'GPT-5.4, o3, o4-mini', color: '#74AA9C', preview: true },
+  { id: 'github', name: 'GitHub Copilot', desc: 'Claude + GPT models', color: '#8B949E', preview: true },
 ];
 
 const OnboardingModal: React.FC = () => {
@@ -165,21 +165,22 @@ const OnboardingModal: React.FC = () => {
           {SUBSCRIPTION_PROVIDERS.map((p) => (
             <Box
               key={p.id}
-              onClick={() => !connecting && handleConnect(p.id)}
+              onClick={() => !p.preview && !connecting && handleConnect(p.id)}
               sx={{
                 display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                 p: 1.5, borderRadius: `${c.radius.md}px`, border: `1px solid ${c.border.subtle}`,
-                cursor: connecting ? 'wait' : 'pointer',
+                cursor: p.preview ? 'default' : connecting ? 'wait' : 'pointer',
+                opacity: p.preview ? 0.5 : 1,
                 transition: 'border-color 0.15s, background 0.15s',
-                '&:hover': { borderColor: c.border.medium, bgcolor: `${c.accent.primary}05` },
+                ...(!p.preview && { '&:hover': { borderColor: c.border.medium, bgcolor: `${c.accent.primary}05` } }),
               }}
             >
               <Box>
                 <Typography sx={{ fontSize: '0.82rem', fontWeight: 600, color: c.text.primary }}>{p.name}</Typography>
                 <Typography sx={{ fontSize: '0.65rem', color: c.text.muted }}>{p.desc}</Typography>
               </Box>
-              <Typography sx={{ fontSize: '0.68rem', color: connecting === p.id ? c.accent.primary : c.text.tertiary }}>
-                {connecting === p.id ? 'Connecting...' : 'Connect →'}
+              <Typography sx={{ fontSize: '0.68rem', color: p.preview ? c.text.ghost : connecting === p.id ? c.accent.primary : c.text.tertiary, fontStyle: p.preview ? 'italic' : 'normal' }}>
+                {p.preview ? 'Coming soon' : connecting === p.id ? 'Connecting...' : 'Connect →'}
               </Typography>
             </Box>
           ))}
diff --git a/frontend/src/app/pages/Settings/Settings.tsx b/frontend/src/app/pages/Settings/Settings.tsx
index adcd5ff1..2abc91ad 100644
--- a/frontend/src/app/pages/Settings/Settings.tsx
+++ b/frontend/src/app/pages/Settings/Settings.tsx
@@ -158,16 +158,17 @@ const CopilotAuthButton: React.FC = () => {
 
 // ── Subscription Provider Card ──
 const SUBSCRIPTION_PROVIDERS = [
-  { id: 'claude', name: 'Claude Pro / Max', desc: 'Sonnet, Opus, Haiku — use your Anthropic subscription', color: '#E8927A' },
-  { id: 'codex', name: 'ChatGPT Plus / Pro', desc: 'GPT-5.4, o3, o4-mini — use your OpenAI subscription', color: '#74AA9C' },
-  { id: 'github', name: 'GitHub Copilot', desc: 'Claude + GPT models via your Copilot subscription', color: '#8B949E' },
-  { id: 'gemini-cli', name: 'Gemini Advanced', desc: 'Gemini 2.5 Pro and Flash — use your Google subscription', color: '#4285F4' },
+  { id: 'claude', name: 'Claude Pro / Max', desc: 'Sonnet, Opus, Haiku — use your Anthropic subscription', color: '#E8927A', preview: false },
+  { id: 'gemini-cli', name: 'Gemini Advanced', desc: 'Gemini 2.5 Pro and Flash — use your Google subscription', color: '#4285F4', preview: true },
+  { id: 'codex', name: 'ChatGPT Plus / Pro', desc: 'GPT-5.4, o3, o4-mini — use your OpenAI subscription', color: '#74AA9C', preview: true },
+  { id: 'github', name: 'GitHub Copilot', desc: 'Claude + GPT models via your Copilot subscription', color: '#8B949E', preview: true },
 ];
 
 const SubscriptionCard: React.FC<{ provider: typeof SUBSCRIPTION_PROVIDERS[0]; connected: boolean; onConnect: () => void; onDisconnect: () => void; connecting: boolean; userCode?: string }> = ({ provider, connected, onConnect, onDisconnect, connecting, userCode }) => {
   const c = useClaudeTokens();
+  const isPreview = (provider as any).preview;
   return (
-    <Box sx={{ p: 1.5, borderRadius: `${c.radius.md}px`, border: `1px solid ${connected ? c.status.success + '30' : c.border.subtle}`, bgcolor: connected ? `${c.status.success}04` : 'transparent' }}>
+    <Box sx={{ p: 1.5, borderRadius: `${c.radius.md}px`, border: `1px solid ${connected ? c.status.success + '30' : c.border.subtle}`, bgcolor: connected ? `${c.status.success}04` : 'transparent', opacity: isPreview ? 0.5 : 1 }}>
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: connected ? c.status.success : c.border.medium, flexShrink: 0 }} />
@@ -176,7 +177,11 @@ const SubscriptionCard: React.FC<{ provider: typeof SUBSCRIPTION_PROVIDERS[0]; c
             <Typography sx={{ fontSize: '0.65rem', color: c.text.muted }}>{provider.desc}</Typography>
           </Box>
         </Box>
-        {connected ? (
+        {isPreview ? (
+          <Typography sx={{ fontSize: '0.65rem', color: c.text.ghost, fontStyle: 'italic' }}>
+            Coming soon
+          </Typography>
+        ) : connected ? (
           <Typography onClick={onDisconnect} sx={{ fontSize: '0.68rem', color: c.text.tertiary, cursor: 'pointer', '&:hover': { color: c.status.error } }}>
             Disconnect
           </Typography>