feat(antigravity): integrate Antigravity tool with MITM support and update CLI tools

This commit is contained in:
decolua
2026-02-08 16:28:13 +07:00
parent 18712b24cf
commit 2e854bd4c9
21 changed files with 1680 additions and 20 deletions
@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback } from "react";
import { Card, CardSkeleton } from "@/shared/components";
import { CLI_TOOLS } from "@/shared/constants/cliTools";
import { PROVIDER_MODELS, getModelsByProviderId, PROVIDER_ID_TO_ALIAS } from "@/shared/constants/models";
import { ClaudeToolCard, CodexToolCard, DroidToolCard, OpenClawToolCard, DefaultToolCard } from "./components";
import { ClaudeToolCard, CodexToolCard, DroidToolCard, OpenClawToolCard, DefaultToolCard, AntigravityToolCard } from "./components";
const CLOUD_URL = process.env.NEXT_PUBLIC_CLOUD_URL;
@@ -160,6 +160,8 @@ export default function CLIToolsPageClient({ machineId }) {
return <DroidToolCard key={toolId} {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} />;
case "openclaw":
return <OpenClawToolCard key={toolId} {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} />;
case "antigravity":
return <AntigravityToolCard key={toolId} {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} />;
default:
return <DefaultToolCard key={toolId} toolId={toolId} {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} />;
}
@@ -0,0 +1,414 @@
"use client";
import { useState, useEffect } from "react";
import { Card, Button, Badge, Modal, Input, ModelSelectModal } from "@/shared/components";
import Image from "next/image";
export default function AntigravityToolCard({
tool,
isExpanded,
onToggle,
baseUrl,
apiKeys,
activeProviders,
hasActiveProviders,
cloudEnabled,
}) {
const [status, setStatus] = useState(null);
const [loading, setLoading] = useState(false);
const [showPasswordModal, setShowPasswordModal] = useState(false);
const [sudoPassword, setSudoPassword] = useState("");
const [selectedApiKey, setSelectedApiKey] = useState("");
const [message, setMessage] = useState(null);
const [modelMappings, setModelMappings] = useState({});
const [modalOpen, setModalOpen] = useState(false);
const [currentEditingAlias, setCurrentEditingAlias] = useState(null);
useEffect(() => {
if (apiKeys?.length > 0 && !selectedApiKey) {
setSelectedApiKey(apiKeys[0].key);
}
}, [apiKeys, selectedApiKey]);
useEffect(() => {
if (isExpanded && !status) {
fetchStatus();
loadSavedMappings();
}
}, [isExpanded, status]);
const loadSavedMappings = async () => {
try {
const res = await fetch("/api/cli-tools/antigravity-mitm/alias?tool=antigravity");
if (res.ok) {
const data = await res.json();
const aliases = data.aliases || {};
if (Object.keys(aliases).length > 0) {
setModelMappings(aliases);
}
}
} catch (error) {
console.log("Error loading saved mappings:", error);
}
};
const fetchStatus = async () => {
try {
const res = await fetch("/api/cli-tools/antigravity-mitm");
if (res.ok) {
const data = await res.json();
setStatus(data);
}
} catch (error) {
console.log("Error fetching status:", error);
setStatus({ running: false });
}
};
// Windows uses UAC dialog, no sudo needed
const isWindows = typeof navigator !== "undefined" && navigator.userAgent?.includes("Windows");
const handleStart = () => {
if (isWindows || status?.hasCachedPassword) {
doStart("");
} else {
setShowPasswordModal(true);
setMessage(null);
}
};
const handleStop = () => {
if (isWindows || status?.hasCachedPassword) {
doStop("");
} else {
setShowPasswordModal(true);
setMessage(null);
}
};
const doStart = async (password) => {
setLoading(true);
setMessage(null);
try {
const keyToUse = selectedApiKey?.trim()
|| (apiKeys?.length > 0 ? apiKeys[0].key : null)
|| (!cloudEnabled ? "sk_9router" : null);
const res = await fetch("/api/cli-tools/antigravity-mitm", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ apiKey: keyToUse, sudoPassword: password }),
});
const data = await res.json();
if (res.ok) {
setMessage({ type: "success", text: "MITM started" });
setShowPasswordModal(false);
setSudoPassword("");
fetchStatus();
} else {
setMessage({ type: "error", text: data.error || "Failed to start" });
}
} catch (error) {
setMessage({ type: "error", text: error.message });
} finally {
setLoading(false);
}
};
const doStop = async (password) => {
setLoading(true);
setMessage(null);
try {
const res = await fetch("/api/cli-tools/antigravity-mitm", {
method: "DELETE",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ sudoPassword: password }),
});
const data = await res.json();
if (res.ok) {
setMessage({ type: "success", text: "MITM stopped" });
setShowPasswordModal(false);
setSudoPassword("");
fetchStatus();
} else {
setMessage({ type: "error", text: data.error || "Failed to stop" });
}
} catch (error) {
setMessage({ type: "error", text: error.message });
} finally {
setLoading(false);
}
};
const handleConfirmPassword = () => {
if (!sudoPassword.trim()) {
setMessage({ type: "error", text: "Sudo password is required" });
return;
}
if (status?.running) {
doStop(sudoPassword);
} else {
doStart(sudoPassword);
}
};
const openModelSelector = (alias) => {
setCurrentEditingAlias(alias);
setModalOpen(true);
};
const handleModelSelect = (model) => {
if (currentEditingAlias) {
setModelMappings(prev => ({
...prev,
[currentEditingAlias]: model.value,
}));
}
};
const handleModelMappingChange = (alias, value) => {
setModelMappings(prev => ({
...prev,
[alias]: value,
}));
};
const handleSaveMappings = async () => {
setLoading(true);
setMessage(null);
try {
const res = await fetch("/api/cli-tools/antigravity-mitm/alias", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ tool: "antigravity", mappings: modelMappings }),
});
if (!res.ok) {
const data = await res.json();
throw new Error(data.error || "Failed to save mappings");
}
setMessage({ type: "success", text: "Mappings saved!" });
} catch (error) {
setMessage({ type: "error", text: error.message });
} finally {
setLoading(false);
}
};
const isRunning = status?.running;
return (
<Card padding="sm" className="overflow-hidden">
<div className="flex items-center justify-between hover:cursor-pointer" onClick={onToggle}>
<div className="flex items-center gap-3">
<div className="size-8 flex items-center justify-center shrink-0">
<Image
src="/providers/antigravity.png"
alt={tool.name}
width={32}
height={32}
className="size-8 object-contain rounded-lg"
sizes="32px"
onError={(e) => { e.target.style.display = "none"; }}
/>
</div>
<div className="min-w-0">
<div className="flex items-center gap-2">
<h3 className="font-medium text-sm">{tool.name}</h3>
{isRunning ? (
<Badge variant="success" size="sm">Active</Badge>
) : (
<Badge variant="default" size="sm">Inactive</Badge>
)}
</div>
<p className="text-xs text-text-muted truncate">{tool.description}</p>
</div>
</div>
<span className={`material-symbols-outlined text-text-muted text-[20px] transition-transform ${isExpanded ? "rotate-180" : ""}`}>expand_more</span>
</div>
{isExpanded && (
<div className="mt-4 pt-4 border-t border-border flex flex-col gap-4">
{/* Start/Stop Button - always on top */}
<div className="flex items-center gap-2">
{isRunning ? (
<button
onClick={handleStop}
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"
>
<span className="material-symbols-outlined text-[18px]">stop_circle</span>
Stop MITM
</button>
) : (
<button
onClick={handleStart}
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"
>
<span className="material-symbols-outlined text-[18px]">play_circle</span>
Start MITM
</button>
)}
</div>
{message?.type === "error" && (
<div className="flex items-center gap-2 px-2 py-1.5 rounded text-xs bg-red-500/10 text-red-600">
<span className="material-symbols-outlined text-[14px]">error</span>
<span>{message.text}</span>
</div>
)}
{/* When running: API Key + Model Mappings */}
{isRunning && (
<>
<div className="flex items-center gap-2">
<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>
{apiKeys.length > 0 ? (
<select
value={selectedApiKey}
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"
>
{apiKeys.map((key) => <option key={key.id} value={key.key}>{key.key}</option>)}
</select>
) : (
<span className="flex-1 text-xs text-text-muted px-2 py-1.5">
{cloudEnabled ? "No API keys - Create one in Keys page" : "sk_9router (default)"}
</span>
)}
</div>
{tool.defaultModels.map((model) => (
<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="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
<input
type="text"
value={modelMappings[model.alias] || ""}
onChange={(e) => handleModelMappingChange(model.alias, e.target.value)}
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"
/>
<button
onClick={() => openModelSelector(model.alias)}
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"}`}
>
Select
</button>
{modelMappings[model.alias] && (
<button
onClick={() => handleModelMappingChange(model.alias, "")}
className="p-1 text-text-muted hover:text-red-500 rounded transition-colors"
title="Clear"
>
<span className="material-symbols-outlined text-[14px]">close</span>
</button>
)}
</div>
))}
<div className="flex items-center gap-2">
<Button
variant="primary"
size="sm"
onClick={handleSaveMappings}
disabled={loading || Object.keys(modelMappings).length === 0}
>
<span className="material-symbols-outlined text-[14px] mr-1">save</span>
Save Mappings
</Button>
</div>
</>
)}
{/* When stopped: how it works */}
{!isRunning && (
<div className="flex flex-col gap-1.5 px-1">
<p className="text-xs text-text-muted">
<span className="font-medium text-text-main">How it works:</span> Intercepts Antigravity traffic via DNS redirect, letting you reroute models through 9Router.
</p>
<div className="flex flex-col gap-0.5 text-[11px] text-text-muted">
<span>1. Generates SSL cert & adds to system keychain</span>
<span>2. Redirects <code className="text-[10px] bg-surface px-1 rounded">daily-cloudcode-pa.googleapis.com</code> → localhost</span>
<span>3. Maps Antigravity models to any provider via 9Router</span>
</div>
</div>
)}
</div>
)}
{/* Password Modal */}
<Modal
isOpen={showPasswordModal}
onClose={() => {
setShowPasswordModal(false);
setSudoPassword("");
setMessage(null);
}}
title="Sudo Password Required"
size="sm"
>
<div className="flex flex-col gap-4">
<div className="flex items-start gap-3 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
<span className="material-symbols-outlined text-yellow-500 text-[20px]">warning</span>
<p className="text-xs text-text-muted">Required for SSL certificate and DNS configuration</p>
</div>
<Input
type="password"
placeholder="Enter sudo password"
value={sudoPassword}
onChange={(e) => setSudoPassword(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && !loading) handleConfirmPassword();
}}
/>
{message && (
<div className={`flex items-center gap-2 px-2 py-1.5 rounded text-xs ${message.type === "success" ? "bg-green-500/10 text-green-600" : "bg-red-500/10 text-red-600"}`}>
<span className="material-symbols-outlined text-[14px]">{message.type === "success" ? "check_circle" : "error"}</span>
<span>{message.text}</span>
</div>
)}
<div className="flex items-center justify-end gap-2">
<Button
variant="ghost"
size="sm"
onClick={() => { setShowPasswordModal(false); setSudoPassword(""); setMessage(null); }}
disabled={loading}
>
Cancel
</Button>
<Button
variant="primary"
size="sm"
onClick={handleConfirmPassword}
loading={loading}
>
Confirm
</Button>
</div>
</div>
</Modal>
{/* Model Select Modal */}
<ModelSelectModal
isOpen={modalOpen}
onClose={() => setModalOpen(false)}
onSelect={handleModelSelect}
selectedModel={currentEditingAlias ? modelMappings[currentEditingAlias] : null}
activeProviders={activeProviders}
title={`Select model for ${currentEditingAlias}`}
/>
</Card>
);
}
@@ -3,4 +3,5 @@ export { default as CodexToolCard } from "./CodexToolCard";
export { default as DroidToolCard } from "./DroidToolCard";
export { default as OpenClawToolCard } from "./OpenClawToolCard";
export { default as DefaultToolCard } from "./DefaultToolCard";
export { default as AntigravityToolCard } from "./AntigravityToolCard";
@@ -0,0 +1,41 @@
"use server";
import { NextResponse } from "next/server";
import { getMitmAlias, setMitmAliasAll } from "@/models";
// GET - Get MITM aliases for a tool
export async function GET(request) {
try {
const { searchParams } = new URL(request.url);
const toolName = searchParams.get("tool");
const aliases = await getMitmAlias(toolName || undefined);
return NextResponse.json({ aliases });
} catch (error) {
console.log("Error fetching MITM aliases:", error.message);
return NextResponse.json({ error: "Failed to fetch aliases" }, { status: 500 });
}
}
// PUT - Save MITM aliases for a specific tool
export async function PUT(request) {
try {
const { tool, mappings } = await request.json();
if (!tool || !mappings || typeof mappings !== "object") {
return NextResponse.json({ error: "tool and mappings required" }, { status: 400 });
}
const filtered = {};
for (const [alias, model] of Object.entries(mappings)) {
if (model && model.trim()) {
filtered[alias] = model.trim();
}
}
await setMitmAliasAll(tool, filtered);
return NextResponse.json({ success: true, aliases: filtered });
} catch (error) {
console.log("Error saving MITM aliases:", error.message);
return NextResponse.json({ error: "Failed to save aliases" }, { status: 500 });
}
}
@@ -0,0 +1,70 @@
"use server";
import { NextResponse } from "next/server";
import { getMitmStatus, startMitm, stopMitm, getCachedPassword, setCachedPassword } from "@/mitm/manager";
// GET - Check MITM status
export async function GET() {
try {
const status = await getMitmStatus();
return NextResponse.json({
running: status.running,
pid: status.pid || null,
dnsConfigured: status.dnsConfigured || false,
certExists: status.certExists || false,
hasCachedPassword: !!getCachedPassword(),
});
} catch (error) {
console.log("Error getting MITM status:", error.message);
return NextResponse.json({ error: "Failed to get MITM status" }, { status: 500 });
}
}
// POST - Start MITM proxy
export async function POST(request) {
try {
const { apiKey, sudoPassword } = await request.json();
const isWin = process.platform === "win32";
const pwd = sudoPassword || getCachedPassword() || "";
if (!apiKey || (!isWin && !pwd)) {
return NextResponse.json(
{ error: isWin ? "Missing apiKey" : "Missing apiKey or sudoPassword" },
{ status: 400 }
);
}
const result = await startMitm(apiKey, pwd);
if (!isWin) setCachedPassword(pwd);
return NextResponse.json({
success: true,
running: result.running,
pid: result.pid,
});
} catch (error) {
console.log("Error starting MITM:", error.message);
return NextResponse.json({ error: error.message || "Failed to start MITM proxy" }, { status: 500 });
}
}
// DELETE - Stop MITM proxy
export async function DELETE(request) {
try {
const { sudoPassword } = await request.json();
const isWin = process.platform === "win32";
const pwd = sudoPassword || getCachedPassword() || "";
if (!isWin && !pwd) {
return NextResponse.json({ error: "Missing sudoPassword" }, { status: 400 });
}
await stopMitm(pwd);
if (!isWin && sudoPassword) setCachedPassword(sudoPassword);
return NextResponse.json({ success: true, running: false });
} catch (error) {
console.log("Error stopping MITM:", error.message);
return NextResponse.json({ error: error.message || "Failed to stop MITM proxy" }, { status: 500 });
}
}
-16
View File
@@ -24,22 +24,6 @@ export async function PUT(request) {
return NextResponse.json({ error: "Model and alias required" }, { status: 400 });
}
const aliases = await getModelAliases();
// Check if alias already used by different model
const existingModel = aliases[alias];
if (existingModel && existingModel !== model) {
return NextResponse.json({
error: `Alias '${alias}' already in use for model '${existingModel}'`
}, { status: 400 });
}
// Delete old alias for this model (if exists and different from new alias)
const oldAlias = Object.entries(aliases).find(([a, m]) => m === model && a !== alias)?.[0];
if (oldAlias) {
await deleteModelAlias(oldAlias);
}
await setModelAlias(alias, model);
await syncToCloudIfEnabled();