mirror of
https://github.com/tiennm99/ccs.git
synced 2026-09-02 14:19:56 +00:00
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:
@@ -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;
|
||||||
|
|||||||
@@ -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={() =>
|
||||||
|
|||||||
Reference in New Issue
Block a user