- Refines the overall structure of the CLI tools and MITM server functionalities.

- Add buildQwenBaseUrl function to construct URLs for Qwen resources.
- Update buildProviderUrl to support Qwen model requests.
- Enhance token refresh logic to include provider-specific data for Qwen.
- Refactor CLI Tools page to exclude MITM tools and streamline model retrieval.
- Introduce new components for MITM server management.
- Update API routes to handle Qwen-specific resource URLs and improve error handling.
This commit is contained in:
decolua
2026-03-05 11:25:03 +07:00
parent 40a53fbd33
commit 573b0f0241
29 changed files with 1490 additions and 438 deletions
@@ -0,0 +1,245 @@
"use client";
import { useState, useEffect } from "react";
import { Card, Button, Badge, Input } from "@/shared/components";
/**
* Shared MITM infrastructure card — manages SSL cert + server start/stop.
* DNS per-tool is handled separately in MitmToolCard.
*/
export default function MitmServerCard({ apiKeys, cloudEnabled, onStatusChange }) {
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 [pendingAction, setPendingAction] = useState(null); // "start" | "stop"
const isWindows = typeof navigator !== "undefined" && navigator.userAgent?.includes("Windows");
useEffect(() => {
if (apiKeys?.length > 0 && !selectedApiKey) {
setSelectedApiKey(apiKeys[0].key);
}
}, [apiKeys, selectedApiKey]);
useEffect(() => {
fetchStatus();
}, []);
const fetchStatus = async () => {
try {
const res = await fetch("/api/cli-tools/antigravity-mitm");
if (res.ok) {
const data = await res.json();
setStatus(data);
onStatusChange?.(data);
}
} catch {
setStatus({ running: false, certExists: false, dnsStatus: {} });
}
};
const handleAction = (action) => {
if (isWindows || status?.hasCachedPassword) {
doAction(action, "");
} else {
setPendingAction(action);
setShowPasswordModal(true);
setMessage(null);
}
};
const doAction = async (action, password) => {
setLoading(true);
setMessage(null);
try {
if (action === "start") {
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: "Server started" });
} else {
setMessage({ type: "error", text: data.error || "Failed to start server" });
}
} else {
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: "Server stopped — all DNS cleared" });
} else {
setMessage({ type: "error", text: data.error || "Failed to stop server" });
}
}
setShowPasswordModal(false);
setSudoPassword("");
await fetchStatus();
} catch (error) {
setMessage({ type: "error", text: error.message });
} finally {
setLoading(false);
setPendingAction(null);
}
};
const handleConfirmPassword = () => {
if (!sudoPassword.trim()) {
setMessage({ type: "error", text: "Sudo password is required" });
return;
}
doAction(pendingAction, sudoPassword);
};
const isRunning = status?.running;
return (
<>
<Card padding="sm" className="border-primary/20 bg-primary/5">
<div className="flex flex-col gap-3">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-primary text-[20px]">security</span>
<span className="font-semibold text-sm text-text-main">MITM Server</span>
{isRunning ? (
<Badge variant="success" size="sm">Running</Badge>
) : (
<Badge variant="default" size="sm">Stopped</Badge>
)}
</div>
<div className="flex items-center gap-1 text-xs text-text-muted">
{[
{ label: "Cert", ok: status?.certExists },
{ label: "Server", ok: isRunning },
].map(({ label, ok }) => (
<span key={label} className={`flex items-center gap-0.5 px-1.5 py-0.5 rounded ${ok ? "text-green-600" : "text-text-muted"}`}>
<span className={`material-symbols-outlined text-[12px]`}>
{ok ? "check_circle" : "radio_button_unchecked"}
</span>
{label}
</span>
))}
</div>
</div>
{/* Mechanism explanation */}
<div className="px-2 py-2 rounded-lg bg-surface/50 border border-border/50">
<p className="text-[11px] text-text-muted leading-relaxed">
<span className="font-medium text-text-main">How it works:</span> MITM server runs an HTTPS proxy on port 443.
When you enable DNS for a tool, its API domain redirects to localhost.
The proxy intercepts requests, applies your model mappings, and forwards to 9Router.
</p>
</div>
{/* API Key selector (only when stopped, to pick key for start) */}
{!isRunning && (
<div className="flex items-center gap-2">
<span className="text-xs text-text-muted shrink-0">API Key</span>
{apiKeys?.length > 0 ? (
<select
value={selectedApiKey}
onChange={(e) => setSelectedApiKey(e.target.value)}
className="flex-1 px-2 py-1 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="text-xs text-text-muted">
{cloudEnabled ? "No API keys — create one in Keys page" : "sk_9router (default)"}
</span>
)}
</div>
)}
{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>
)}
{/* Action button */}
<div className="flex items-center gap-2">
{isRunning ? (
<button
onClick={() => handleAction("stop")}
disabled={loading}
className="px-4 py-1.5 rounded-lg bg-red-500/10 border border-red-500/30 text-red-500 font-medium text-xs flex items-center gap-1.5 hover:bg-red-500/20 transition-colors disabled:opacity-50"
>
<span className="material-symbols-outlined text-[16px]">stop_circle</span>
Stop Server
</button>
) : (
<button
onClick={() => handleAction("start")}
disabled={loading}
className="px-4 py-1.5 rounded-lg bg-primary/10 border border-primary/30 text-primary font-medium text-xs flex items-center gap-1.5 hover:bg-primary/20 transition-colors disabled:opacity-50"
>
<span className="material-symbols-outlined text-[16px]">play_circle</span>
Start Server
</button>
)}
{isRunning && (
<p className="text-xs text-text-muted">Enable DNS per tool below to activate interception</p>
)}
</div>
{/* Windows admin warning */}
{!isRunning && isWindows && (
<div className="flex items-center gap-2 px-2 py-1.5 rounded text-xs bg-yellow-500/10 text-yellow-600 border border-yellow-500/20">
<span className="material-symbols-outlined text-[14px]">warning</span>
<span>Windows: Run 9Router terminal as Administrator</span>
</div>
)}
</div>
</Card>
{/* Password Modal */}
{showPasswordModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div className="bg-surface border border-border rounded-xl p-6 w-full max-w-sm flex flex-col gap-4 shadow-xl">
<h3 className="font-semibold text-text-main">Sudo Password Required</h3>
<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 server startup</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 bg-red-500/10 text-red-600">
<span className="material-symbols-outlined text-[14px]">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>
</div>
)}
</>
);
}
@@ -0,0 +1,307 @@
"use client";
import { useState, useEffect, useCallback } from "react";
import { Card, Button, Badge, Input, ModelSelectModal } from "@/shared/components";
import Image from "next/image";
/**
* Per-tool MITM card — shows DNS status + model mappings.
* - Auto-saves model mapping on blur or modal select
* - Start/Stop DNS replaces Save Mappings button
* - Toggle switch removed; status badge is display-only
* - Skips sudo modal if password is already cached
*/
export default function MitmToolCard({
tool,
isExpanded,
onToggle,
serverRunning,
dnsActive,
certCovered,
hasCachedPassword,
apiKeys,
activeProviders,
hasActiveProviders,
cloudEnabled,
onDnsChange,
}) {
const [loading, setLoading] = useState(false);
const [message, setMessage] = useState(null);
const [showPasswordModal, setShowPasswordModal] = useState(false);
const [sudoPassword, setSudoPassword] = useState("");
const [pendingDnsAction, setPendingDnsAction] = useState(null);
const [modelMappings, setModelMappings] = useState({});
const [modalOpen, setModalOpen] = useState(false);
const [currentEditingAlias, setCurrentEditingAlias] = useState(null);
const isWindows = typeof navigator !== "undefined" && navigator.userAgent?.includes("Windows");
useEffect(() => {
if (isExpanded) loadSavedMappings();
}, [isExpanded]);
const loadSavedMappings = async () => {
try {
const res = await fetch(`/api/cli-tools/antigravity-mitm/alias?tool=${tool.id}`);
if (res.ok) {
const data = await res.json();
if (Object.keys(data.aliases || {}).length > 0) setModelMappings(data.aliases);
}
} catch { /* ignore */ }
};
const saveMappings = useCallback(async (mappings) => {
try {
await fetch("/api/cli-tools/antigravity-mitm/alias", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ tool: tool.id, mappings }),
});
} catch { /* ignore */ }
}, [tool.id]);
const handleMappingBlur = (alias, value) => {
saveMappings({ ...modelMappings, [alias]: value });
};
const handleModelMappingChange = (alias, value) => {
setModelMappings(prev => ({ ...prev, [alias]: value }));
};
const openModelSelector = (alias) => {
setCurrentEditingAlias(alias);
setModalOpen(true);
};
const handleModelSelect = (model) => {
if (!currentEditingAlias) return;
const updated = { ...modelMappings, [currentEditingAlias]: model.value };
setModelMappings(updated);
saveMappings(updated);
};
// DNS toggle logic
const handleDnsToggle = () => {
if (!serverRunning) return;
const action = dnsActive ? "disable" : "enable";
if (isWindows || hasCachedPassword) {
doDnsAction(action, "");
} else {
setPendingDnsAction(action);
setShowPasswordModal(true);
setMessage(null);
}
};
const doDnsAction = async (action, password) => {
setLoading(true);
setMessage(null);
try {
const res = await fetch("/api/cli-tools/antigravity-mitm", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ tool: tool.id, action, sudoPassword: password }),
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || "Failed to toggle DNS");
setMessage({
type: "success",
text: action === "enable" ? "DNS enabled — traffic intercepted" : "DNS disabled — traffic restored",
});
setShowPasswordModal(false);
setSudoPassword("");
onDnsChange?.(data);
} catch (error) {
setMessage({ type: "error", text: error.message });
} finally {
setLoading(false);
setPendingDnsAction(null);
}
};
const handleConfirmPassword = () => {
if (!sudoPassword.trim()) {
setMessage({ type: "error", text: "Sudo password is required" });
return;
}
doDnsAction(pendingDnsAction, sudoPassword);
};
return (
<>
<Card padding="xs" 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={tool.image}
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>
{!serverRunning ? (
<Badge variant="default" size="sm">Server off</Badge>
) : dnsActive ? (
<Badge variant="success" size="sm">Active</Badge>
) : (
<Badge variant="warning" size="sm">DNS off</Badge>
)}
</div>
<p className="text-xs text-text-muted truncate">{tool.mitmDomain}</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">
{/* Info */}
<div className="flex flex-col gap-0.5 text-[11px] text-text-muted px-1">
<p>
<span className="font-medium text-text-main">Domain:</span>{" "}
<code className="text-[10px] bg-surface px-1 rounded">{tool.mitmDomain}</code>
{certCovered !== undefined && (
<span className={`ml-1.5 ${certCovered ? "text-green-600" : "text-red-500"}`}>
<span className="material-symbols-outlined text-[11px] align-middle">
{certCovered ? "verified" : "warning"}
</span>
{certCovered ? " cert OK" : " cert missing domain"}
</span>
)}
</p>
<p>Toggle DNS to redirect {tool.name} traffic through 9Router via MITM.</p>
</div>
{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>
)}
{/* Model Mappings */}
{tool.defaultModels?.length > 0 && (
<div className="flex flex-col gap-2">
{tool.defaultModels.map((model) => (
<div key={model.alias} className="flex items-center gap-2">
<span className="w-36 shrink-0 text-xs 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)}
onBlur={(e) => handleMappingBlur(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 ${hasActiveProviders ? "bg-surface border-border hover:border-primary cursor-pointer" : "opacity-50 cursor-not-allowed border-border"}`}
>
Select
</button>
{modelMappings[model.alias] && (
<button
onClick={() => {
handleModelMappingChange(model.alias, "");
saveMappings({ ...modelMappings, [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>
)}
{tool.defaultModels?.length === 0 && (
<p className="text-xs text-text-muted px-1">Model mappings will be available soon.</p>
)}
{/* Start / Stop DNS button */}
<div>
{dnsActive ? (
<button
onClick={handleDnsToggle}
disabled={!serverRunning || loading}
className="px-4 py-1.5 rounded-lg bg-red-500/10 border border-red-500/30 text-red-500 font-medium text-xs flex items-center gap-1.5 hover:bg-red-500/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
<span className="material-symbols-outlined text-[16px]">stop_circle</span>
Stop DNS
</button>
) : (
<Button
variant="primary"
size="sm"
onClick={handleDnsToggle}
loading={loading}
disabled={!serverRunning || loading}
>
<span className="material-symbols-outlined text-[14px] mr-1">play_circle</span>
Start DNS
</Button>
)}
</div>
</div>
)}
</Card>
{/* Password Modal */}
{showPasswordModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div className="bg-surface border border-border rounded-xl p-6 w-full max-w-sm flex flex-col gap-4 shadow-xl">
<h3 className="font-semibold text-text-main">Sudo Password Required</h3>
<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 to modify /etc/hosts and flush DNS cache</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 bg-red-500/10 text-red-600">
<span className="material-symbols-outlined text-[14px]">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>
</div>
)}
{/* Model Select Modal */}
<ModelSelectModal
isOpen={modalOpen}
onClose={() => setModalOpen(false)}
onSelect={handleModelSelect}
selectedModel={currentEditingAlias ? modelMappings[currentEditingAlias] : null}
activeProviders={activeProviders}
title={`Select model for ${currentEditingAlias}`}
/>
</>
);
}
@@ -6,4 +6,6 @@ export { default as DefaultToolCard } from "./DefaultToolCard";
export { default as AntigravityToolCard } from "./AntigravityToolCard";
export { default as OpenCodeToolCard } from "./OpenCodeToolCard";
export { default as CopilotToolCard } from "./CopilotToolCard";
export { default as MitmServerCard } from "./MitmServerCard";
export { default as MitmToolCard } from "./MitmToolCard";