nezumi/9router
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/9router.git synced 2026-09-23 04:09:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: show API Key Compatible providers in Antigravity CLI Tools model selector (#241)

Browse Source
This commit is contained in:
maskeen
2026-03-05 14:47:22 +07:00
committed by GitHub
parent 573b0f0241
commit 85ddb4753c
1 changed files with 64 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(dashboard)/dashboard/cli-tools/components/AntigravityToolCard.js
+64 -48
View File
@@ -25,6 +25,7 @@ export default function AntigravityToolCard({
const [modelMappings, setModelMappings] = useState({}); const [modelMappings, setModelMappings] = useState({});
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [currentEditingAlias, setCurrentEditingAlias] = useState(null); const [currentEditingAlias, setCurrentEditingAlias] = useState(null);
const [modelAliases, setModelAliases] = useState({});
useEffect(() => { useEffect(() => {
if (apiKeys?.length > 0 && !selectedApiKey) { if (apiKeys?.length > 0 && !selectedApiKey) {
@@ -40,8 +41,12 @@ export default function AntigravityToolCard({
if (isExpanded && !status) { if (isExpanded && !status) {
fetchStatus(); fetchStatus();
loadSavedMappings(); loadSavedMappings();
fetchModelAliases();
}
if (isExpanded) {
loadSavedMappings();
fetchModelAliases();
} }
if (isExpanded) loadSavedMappings();
}, [isExpanded]); }, [isExpanded]);
const loadSavedMappings = async () => { const loadSavedMappings = async () => {
@@ -50,7 +55,7 @@ export default function AntigravityToolCard({
if (res.ok) { if (res.ok) {
const data = await res.json(); const data = await res.json();
const aliases = data.aliases || {}; const aliases = data.aliases || {};
if (Object.keys(aliases).length > 0) { if (Object.keys(aliases).length > 0) {
setModelMappings(aliases); setModelMappings(aliases);
} }
@@ -60,6 +65,16 @@ export default function AntigravityToolCard({
} }
}; };
const fetchModelAliases = async () => {
try {
const res = await fetch("/api/models/alias");
const data = await res.json();
if (res.ok) setModelAliases(data.aliases || {});
} catch (error) {
console.log("Error fetching model aliases:", error);
}
};
const fetchStatus = async () => { const fetchStatus = async () => {
try { try {
const res = await fetch("/api/cli-tools/antigravity-mitm"); const res = await fetch("/api/cli-tools/antigravity-mitm");
@@ -100,7 +115,7 @@ export default function AntigravityToolCard({
// Show steps progressing in order // Show steps progressing in order
setStartingStep("cert"); setStartingStep("cert");
try { try {
const keyToUse = selectedApiKey?.trim() const keyToUse = selectedApiKey?.trim()
|| (apiKeys?.length > 0 ? apiKeys[0].key : null) || (apiKeys?.length > 0 ? apiKeys[0].key : null)
|| (!cloudEnabled ? "sk_9router" : null); || (!cloudEnabled ? "sk_9router" : null);
@@ -219,14 +234,14 @@ export default function AntigravityToolCard({
<div className="flex items-center justify-between hover:cursor-pointer" onClick={onToggle}> <div className="flex items-center justify-between hover:cursor-pointer" onClick={onToggle}>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="size-8 flex items-center justify-center shrink-0"> <div className="size-8 flex items-center justify-center shrink-0">
<Image <Image
src="/providers/antigravity.png" src="/providers/antigravity.png"
alt={tool.name} alt={tool.name}
width={32} width={32}
height={32} height={32}
className="size-8 object-contain rounded-lg" className="size-8 object-contain rounded-lg"
sizes="32px" sizes="32px"
onError={(e) => { e.target.style.display = "none"; }} onError={(e) => { e.target.style.display = "none"; }}
/> />
</div> </div>
<div className="min-w-0"> <div className="min-w-0">
@@ -249,9 +264,9 @@ export default function AntigravityToolCard({
{/* Status indicators — ordered: Cert → Server → DNS */} {/* Status indicators — ordered: Cert → Server → DNS */}
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{[ {[
{ key: "cert", label: "Cert", ok: status?.certExists }, { key: "cert", label: "Cert", ok: status?.certExists },
{ key: "server", label: "Server", ok: status?.running }, { key: "server", label: "Server", ok: status?.running },
{ key: "dns", label: "DNS", ok: status?.dnsConfigured }, { key: "dns", label: "DNS", ok: status?.dnsConfigured },
].map(({ key, label, ok }, i) => { ].map(({ key, label, ok }, i) => {
const isLoading = startingStep === key; const isLoading = startingStep === key;
return ( return (
@@ -277,8 +292,8 @@ export default function AntigravityToolCard({
{/* Start/Stop Button */} {/* Start/Stop Button */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{isRunning ? ( {isRunning ? (
<button <button
onClick={handleStop} onClick={handleStop}
disabled={loading} disabled={loading}
className="px-4 py-2 rounded-lg bg-red-500/10 border border-red-500/30 text-red-500 font-medium text-sm flex items-center gap-2 hover:bg-red-500/20 transition-colors disabled:opacity-50" className="px-4 py-2 rounded-lg bg-red-500/10 border border-red-500/30 text-red-500 font-medium text-sm flex items-center gap-2 hover:bg-red-500/20 transition-colors disabled:opacity-50"
> >
@@ -286,8 +301,8 @@ export default function AntigravityToolCard({
Stop MITM Stop MITM
</button> </button>
) : ( ) : (
<button <button
onClick={handleStart} onClick={handleStart}
disabled={loading || !hasActiveProviders} disabled={loading || !hasActiveProviders}
className="px-4 py-2 rounded-lg bg-primary/10 border border-primary/30 text-primary font-medium text-sm flex items-center gap-2 hover:bg-primary/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" className="px-4 py-2 rounded-lg bg-primary/10 border border-primary/30 text-primary font-medium text-sm flex items-center gap-2 hover:bg-primary/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
> >
@@ -311,9 +326,9 @@ export default function AntigravityToolCard({
<span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">API Key</span> <span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">API Key</span>
<span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span> <span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
{apiKeys.length > 0 ? ( {apiKeys.length > 0 ? (
<select <select
value={selectedApiKey} value={selectedApiKey}
onChange={(e) => setSelectedApiKey(e.target.value)} onChange={(e) => setSelectedApiKey(e.target.value)}
className="flex-1 px-2 py-1.5 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50" className="flex-1 px-2 py-1.5 bg-surface rounded text-xs border border-border focus:outline-none focus:ring-1 focus:ring-primary/50"
> >
{apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)} {apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)}
@@ -329,24 +344,24 @@ export default function AntigravityToolCard({
<div key={model.alias} className="flex items-center gap-2"> <div key={model.alias} className="flex items-center gap-2">
<span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">{model.name}</span> <span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">{model.name}</span>
<span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span> <span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
<input <input
type="text" type="text"
value={modelMappings[model.alias] || ""} value={modelMappings[model.alias] || ""}
onChange={(e) => handleModelMappingChange(model.alias, e.target.value)} onChange={(e) => handleModelMappingChange(model.alias, e.target.value)}
placeholder="provider/model-id" placeholder="provider/model-id"
className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50" className="flex-1 px-2 py-1.5 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50"
/> />
<button <button
onClick={() => openModelSelector(model.alias)} onClick={() => openModelSelector(model.alias)}
disabled={!hasActiveProviders} disabled={!hasActiveProviders}
className={`px-2 py-1.5 rounded border text-xs transition-colors shrink-0 whitespace-nowrap ${hasActiveProviders ? "bg-surface border-border text-text-main hover:border-primary cursor-pointer" : "opacity-50 cursor-not-allowed border-border"}`} className={`px-2 py-1.5 rounded border text-xs transition-colors shrink-0 whitespace-nowrap ${hasActiveProviders ? "bg-surface border-border text-text-main hover:border-primary cursor-pointer" : "opacity-50 cursor-not-allowed border-border"}`}
> >
Select Select
</button> </button>
{modelMappings[model.alias] && ( {modelMappings[model.alias] && (
<button <button
onClick={() => handleModelMappingChange(model.alias, "")} onClick={() => handleModelMappingChange(model.alias, "")}
className="p-1 text-text-muted hover:text-red-500 rounded transition-colors" className="p-1 text-text-muted hover:text-red-500 rounded transition-colors"
title="Clear" title="Clear"
> >
<span className="material-symbols-outlined text-[14px]">close</span> <span className="material-symbols-outlined text-[14px]">close</span>
@@ -356,9 +371,9 @@ export default function AntigravityToolCard({
))} ))}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <Button
variant="primary" variant="primary"
size="sm" size="sm"
onClick={handleSaveMappings} onClick={handleSaveMappings}
disabled={loading || Object.keys(modelMappings).length === 0} disabled={loading || Object.keys(modelMappings).length === 0}
> >
@@ -428,17 +443,17 @@ export default function AntigravityToolCard({
)} )}
<div className="flex items-center justify-end gap-2"> <div className="flex items-center justify-end gap-2">
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => { setShowPasswordModal(false); setSudoPassword(""); setMessage(null); }} onClick={() => { setShowPasswordModal(false); setSudoPassword(""); setMessage(null); }}
disabled={loading} disabled={loading}
> >
Cancel Cancel
</Button> </Button>
<Button <Button
variant="primary" variant="primary"
size="sm" size="sm"
onClick={handleConfirmPassword} onClick={handleConfirmPassword}
loading={loading} loading={loading}
> >
@@ -449,13 +464,14 @@ export default function AntigravityToolCard({
</Modal> </Modal>
{/* Model Select Modal */} {/* Model Select Modal */}
<ModelSelectModal <ModelSelectModal
isOpen={modalOpen} isOpen={modalOpen}
onClose={() => setModalOpen(false)} onClose={() => setModalOpen(false)}
onSelect={handleModelSelect} onSelect={handleModelSelect}
selectedModel={currentEditingAlias ? modelMappings[currentEditingAlias] : null} selectedModel={currentEditingAlias ? modelMappings[currentEditingAlias] : null}
activeProviders={activeProviders} activeProviders={activeProviders}
title={`Select model for ${currentEditingAlias}`} modelAliases={modelAliases}
title={`Select model for ${currentEditingAlias}`}
/> />
</Card> </Card>
); );