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,
isRemoteMode,
port,
defaultTarget,
onAddAccount,
onSetDefault,
onRemoveAccount,
@@ -244,6 +245,7 @@ export function ProviderEditor({
<ProviderInfoTab
provider={provider}
displayName={displayName}
defaultTarget={defaultTarget}
data={data}
authStatus={authStatus}
/>
@@ -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`} />
@@ -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;
+4
View File
@@ -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={() =>