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
This commit is contained in:
Tam Nhu Tran
2026-02-25 15:54:03 +07:00
parent 543ec5f050
commit 6aae3ba998
4 changed files with 37 additions and 3 deletions
@@ -35,6 +35,7 @@ export function ProviderEditor({
baseProvider, baseProvider,
isRemoteMode, isRemoteMode,
port, port,
defaultTarget,
onAddAccount, onAddAccount,
onSetDefault, onSetDefault,
onRemoveAccount, onRemoveAccount,
@@ -244,6 +245,7 @@ export function ProviderEditor({
<ProviderInfoTab <ProviderInfoTab
provider={provider} provider={provider}
displayName={displayName} displayName={displayName}
defaultTarget={defaultTarget}
data={data} data={data}
authStatus={authStatus} authStatus={authStatus}
/> />
@@ -9,16 +9,26 @@ import { ScrollArea } from '@/components/ui/scroll-area';
import { Info, Shield } from 'lucide-react'; import { Info, Shield } from 'lucide-react';
import { UsageCommand } from './usage-command'; import { UsageCommand } from './usage-command';
import type { SettingsResponse } from './types'; import type { SettingsResponse } from './types';
import type { AuthStatus } from '@/lib/api-client'; import type { AuthStatus, CliTarget } from '@/lib/api-client';
interface ProviderInfoTabProps { interface ProviderInfoTabProps {
provider: string; provider: string;
displayName: string; displayName: string;
defaultTarget?: CliTarget;
data?: SettingsResponse; data?: SettingsResponse;
authStatus: AuthStatus; 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 ( return (
<ScrollArea className="h-full"> <ScrollArea className="h-full">
<div className="p-4 space-y-6"> <div className="p-4 space-y-6">
@@ -66,6 +76,10 @@ export function ProviderInfoTab({ provider, displayName, data, authStatus }: Pro
</Badge> </Badge>
)} )}
</div> </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>
</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> <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"> <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="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="Change model" command={`ccs ${provider} --config`} />
<UsageCommand label="Add account" command={`ccs ${provider} --add`} /> <UsageCommand label="Add account" command={`ccs ${provider} --add`} />
<UsageCommand label="List accounts" command={`ccs ${provider} --accounts`} /> <UsageCommand label="List accounts" command={`ccs ${provider} --accounts`} />
@@ -2,7 +2,7 @@
* Type definitions for ProviderEditor components * 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'; import type { ProviderCatalog } from '../provider-model-selector';
export interface SettingsResponse { export interface SettingsResponse {
@@ -27,6 +27,8 @@ export interface ProviderEditorProps {
isRemoteMode?: boolean; isRemoteMode?: boolean;
/** Port number for variant (for display in header) */ /** Port number for variant (for display in header) */
port?: number; port?: number;
/** Default execution target for this profile/variant */
defaultTarget?: CliTarget;
onAddAccount: () => void; onAddAccount: () => void;
onSetDefault: (accountId: string) => void; onSetDefault: (accountId: string) => void;
onRemoveAccount: (accountId: string) => void; onRemoveAccount: (accountId: string) => void;
+4
View File
@@ -120,6 +120,9 @@ function VariantSidebarItem({
<Badge variant="outline" className="text-[9px] h-4 px-1"> <Badge variant="outline" className="text-[9px] h-4 px-1">
variant variant
</Badge> </Badge>
<Badge variant="outline" className="text-[9px] h-4 px-1 uppercase">
{variant.target || 'claude'}
</Badge>
</div> </div>
<div className="flex items-center gap-1.5 mt-0.5"> <div className="flex items-center gap-1.5 mt-0.5">
{parentAuth?.authenticated ? ( {parentAuth?.authenticated ? (
@@ -405,6 +408,7 @@ export function CliproxyPage() {
catalog={MODEL_CATALOGS[selectedVariantData.provider]} catalog={MODEL_CATALOGS[selectedVariantData.provider]}
logoProvider={selectedVariantData.provider} logoProvider={selectedVariantData.provider}
baseProvider={selectedVariantData.provider} baseProvider={selectedVariantData.provider}
defaultTarget={selectedVariantData.target}
isRemoteMode={isRemoteMode} isRemoteMode={isRemoteMode}
port={selectedVariantData.port} port={selectedVariantData.port}
onAddAccount={() => onAddAccount={() =>