From 6aae3ba998c8463f5cda6b216c15dec3f1c6a443 Mon Sep 17 00:00:00 2001
From: Tam Nhu Tran <kaitran.ntt@gmail.com>
Date: Wed, 25 Feb 2026 15:54:03 +0700
Subject: [PATCH] feat(ui): surface cliproxy target in provider editor

- pass selected variant target into provider editor context

- show target in sidebar badges and info tab metadata

- add target-aware quick usage command snippets
---
 .../cliproxy/provider-editor/index.tsx        |  2 ++
 .../provider-editor/provider-info-tab.tsx     | 30 +++++++++++++++++--
 .../cliproxy/provider-editor/types.ts         |  4 ++-
 ui/src/pages/cliproxy.tsx                     |  4 +++
 4 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/cliproxy/provider-editor/index.tsx b/ui/src/components/cliproxy/provider-editor/index.tsx
index 5051538b..c02ff4f6 100644
--- a/ui/src/components/cliproxy/provider-editor/index.tsx
+++ b/ui/src/components/cliproxy/provider-editor/index.tsx
@@ -35,6 +35,7 @@ export function ProviderEditor({
   baseProvider,
   isRemoteMode,
   port,
+  defaultTarget,
   onAddAccount,
   onSetDefault,
   onRemoveAccount,
@@ -244,6 +245,7 @@ export function ProviderEditor({
                   <ProviderInfoTab
                     provider={provider}
                     displayName={displayName}
+                    defaultTarget={defaultTarget}
                     data={data}
                     authStatus={authStatus}
                   />
diff --git a/ui/src/components/cliproxy/provider-editor/provider-info-tab.tsx b/ui/src/components/cliproxy/provider-editor/provider-info-tab.tsx
index 20d9e40f..d2e7f4b8 100644
--- a/ui/src/components/cliproxy/provider-editor/provider-info-tab.tsx
+++ b/ui/src/components/cliproxy/provider-editor/provider-info-tab.tsx
@@ -9,16 +9,26 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { Info, Shield } from 'lucide-react';
 import { UsageCommand } from './usage-command';
 import type { SettingsResponse } from './types';
-import type { AuthStatus } from '@/lib/api-client';
+import type { AuthStatus, CliTarget } from '@/lib/api-client';
 
 interface ProviderInfoTabProps {
   provider: string;
   displayName: string;
+  defaultTarget?: CliTarget;
   data?: SettingsResponse;
   authStatus: AuthStatus;
 }
 
-export function ProviderInfoTab({ provider, displayName, data, authStatus }: ProviderInfoTabProps) {
+export function ProviderInfoTab({
+  provider,
+  displayName,
+  defaultTarget,
+  data,
+  authStatus,
+}: ProviderInfoTabProps) {
+  const resolvedTarget = defaultTarget || 'claude';
+  const isDroidTarget = resolvedTarget === 'droid';
+
   return (
     <ScrollArea className="h-full">
       <div className="p-4 space-y-6">
@@ -66,6 +76,10 @@ export function ProviderInfoTab({ provider, displayName, data, authStatus }: Pro
                 </Badge>
               )}
             </div>
+            <div className="grid grid-cols-[100px_1fr] gap-2 text-sm items-center">
+              <span className="font-medium text-muted-foreground">Default Target</span>
+              <span className="font-mono">{resolvedTarget}</span>
+            </div>
           </div>
         </div>
 
@@ -74,6 +88,18 @@ export function ProviderInfoTab({ provider, displayName, data, authStatus }: Pro
           <h3 className="text-sm font-medium mb-3">Quick Usage</h3>
           <div className="space-y-3 bg-card rounded-lg border p-4 shadow-sm">
             <UsageCommand label="Run with prompt" command={`ccs ${provider} "your prompt"`} />
+            <UsageCommand
+              label={isDroidTarget ? 'Droid alias (explicit)' : 'Run on Droid'}
+              command={
+                isDroidTarget
+                  ? `ccsd ${provider} "your prompt"`
+                  : `ccs ${provider} --target droid "your prompt"`
+              }
+            />
+            <UsageCommand
+              label={isDroidTarget ? 'Override to Claude' : 'Override target'}
+              command={`ccs ${provider} --target claude "your prompt"`}
+            />
             <UsageCommand label="Change model" command={`ccs ${provider} --config`} />
             <UsageCommand label="Add account" command={`ccs ${provider} --add`} />
             <UsageCommand label="List accounts" command={`ccs ${provider} --accounts`} />
diff --git a/ui/src/components/cliproxy/provider-editor/types.ts b/ui/src/components/cliproxy/provider-editor/types.ts
index 0c154ca6..e470dcbf 100644
--- a/ui/src/components/cliproxy/provider-editor/types.ts
+++ b/ui/src/components/cliproxy/provider-editor/types.ts
@@ -2,7 +2,7 @@
  * Type definitions for ProviderEditor components
  */
 
-import type { AuthStatus, OAuthAccount } from '@/lib/api-client';
+import type { AuthStatus, OAuthAccount, CliTarget } from '@/lib/api-client';
 import type { ProviderCatalog } from '../provider-model-selector';
 
 export interface SettingsResponse {
@@ -27,6 +27,8 @@ export interface ProviderEditorProps {
   isRemoteMode?: boolean;
   /** Port number for variant (for display in header) */
   port?: number;
+  /** Default execution target for this profile/variant */
+  defaultTarget?: CliTarget;
   onAddAccount: () => void;
   onSetDefault: (accountId: string) => void;
   onRemoveAccount: (accountId: string) => void;
diff --git a/ui/src/pages/cliproxy.tsx b/ui/src/pages/cliproxy.tsx
index 5d12c178..e75d645c 100644
--- a/ui/src/pages/cliproxy.tsx
+++ b/ui/src/pages/cliproxy.tsx
@@ -120,6 +120,9 @@ function VariantSidebarItem({
           <Badge variant="outline" className="text-[9px] h-4 px-1">
             variant
           </Badge>
+          <Badge variant="outline" className="text-[9px] h-4 px-1 uppercase">
+            {variant.target || 'claude'}
+          </Badge>
         </div>
         <div className="flex items-center gap-1.5 mt-0.5">
           {parentAuth?.authenticated ? (
@@ -405,6 +408,7 @@ export function CliproxyPage() {
             catalog={MODEL_CATALOGS[selectedVariantData.provider]}
             logoProvider={selectedVariantData.provider}
             baseProvider={selectedVariantData.provider}
+            defaultTarget={selectedVariantData.target}
             isRemoteMode={isRemoteMode}
             port={selectedVariantData.port}
             onAddAccount={() =>