This commit is contained in:
decolua
2026-04-06 17:32:44 +07:00
parent 7db4b9834e
commit 307be3b63d
18 changed files with 406 additions and 179 deletions
@@ -22,6 +22,8 @@ export default function OpenClawToolCard({
const [message, setMessage] = useState(null);
const [selectedApiKey, setSelectedApiKey] = useState("");
const [selectedModel, setSelectedModel] = useState("");
const [agentModels, setAgentModels] = useState({}); // { [agentId]: modelId }
const [agentModalFor, setAgentModalFor] = useState(null); // agentId opening modal
const [modalOpen, setModalOpen] = useState(false);
const [modelAliases, setModelAliases] = useState({});
const [showManualConfigModal, setShowManualConfigModal] = useState(false);
@@ -74,14 +76,18 @@ export default function OpenClawToolCard({
const provider = openclawStatus.settings?.models?.providers?.["9router"];
if (provider) {
const primaryModel = openclawStatus.settings?.agents?.defaults?.model?.primary;
if (primaryModel) {
const modelId = primaryModel.replace("9router/", "");
setSelectedModel(modelId);
}
if (primaryModel) setSelectedModel(primaryModel.replace("9router/", ""));
if (provider.apiKey && apiKeys?.some(k => k.key === provider.apiKey)) {
setSelectedApiKey(provider.apiKey);
}
}
// Init per-agent models from enriched agents list
const agentList = openclawStatus.agents || [];
const initAgentModels = {};
agentList.forEach((agent) => {
if (agent.currentModel) initAgentModels[agent.id] = agent.currentModel;
});
setAgentModels(initAgentModels);
}
}, [openclawStatus, apiKeys]);
@@ -131,7 +137,8 @@ export default function OpenClawToolCard({
body: JSON.stringify({
baseUrl: getEffectiveBaseUrl(),
apiKey: keyToUse,
model: selectedModel
model: selectedModel,
agentModels,
}),
});
const data = await res.json();
@@ -170,7 +177,12 @@ export default function OpenClawToolCard({
};
const handleModelSelect = (model) => {
setSelectedModel(model.value);
if (agentModalFor) {
setAgentModels(prev => ({ ...prev, [agentModalFor]: model.value }));
setAgentModalFor(null);
} else {
setSelectedModel(model.value);
}
setModalOpen(false);
};
@@ -298,14 +310,31 @@ export default function OpenClawToolCard({
)}
</div>
{/* Model */}
{/* Default Model */}
<div className="flex items-center gap-2">
<span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">Model</span>
<span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right">Default Model</span>
<span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
<input type="text" value={selectedModel} onChange={(e) => setSelectedModel(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={() => setModalOpen(true)} 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 Model</button>
<button onClick={() => { setAgentModalFor(null); setModalOpen(true); }} 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>
{selectedModel && <button onClick={() => setSelectedModel("")} 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>
{/* Per-agent model overrides */}
{(openclawStatus.agents || []).filter(a => a.agentDir).map((agent) => (
<div key={agent.id} className="flex items-center gap-2 pl-4">
<span className="w-32 shrink-0 text-xs text-primary text-right truncate" title={agent.name || agent.id}>Agent {agent.name || agent.id}</span>
<span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
<input
type="text"
value={agentModels[agent.id] || ""}
onChange={(e) => setAgentModels(prev => ({ ...prev, [agent.id]: e.target.value }))}
placeholder={`default (${selectedModel || "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={() => { setAgentModalFor(agent.id); setModalOpen(true); }} 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>
{agentModels[agent.id] && <button onClick={() => setAgentModels(prev => ({ ...prev, [agent.id]: "" }))} 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>
{message && (
@@ -472,7 +472,7 @@ export default function APIPageClient({ machineId }) {
<Input
value={currentEndpoint}
readOnly
className={`flex-1 font-mono text-sm ${tunnelEnabled ? "animate-border-glow" : ""}`}
className={`flex-1 font-mono text-sm`}
/>
<Button
variant="secondary"
@@ -483,6 +483,20 @@ export default function APIPageClient({ machineId }) {
</Button>
</div>
{/* Direct local endpoint */}
<div className="flex items-center gap-2 mt-1">
<span className="text-xs text-text-muted shrink-0">Direct</span>
<span className="material-symbols-outlined text-text-muted text-[12px]">arrow_forward</span>
<code className="flex-1 text-xs text-text-muted font-mono truncate">{baseUrl}/chat/completions</code>
<button
onClick={() => copy(`${baseUrl}/chat/completions`, "direct_url")}
className="p-1 text-text-muted hover:text-primary transition-colors shrink-0"
title="Copy direct endpoint"
>
<span className="material-symbols-outlined text-[14px]">{copied === "direct_url" ? "check" : "content_copy"}</span>
</button>
</div>
{/* Tunnel Status */}
{tunnelStatus && (
<div className={`mt-3 p-2 rounded text-sm ${
@@ -53,6 +53,7 @@ export default function ProviderDetailPage() {
}
: (OAUTH_PROVIDERS[providerId] || APIKEY_PROVIDERS[providerId] || FREE_PROVIDERS[providerId] || FREE_TIER_PROVIDERS[providerId]);
const isOAuth = !!OAUTH_PROVIDERS[providerId] || !!FREE_PROVIDERS[providerId];
const isFreeNoAuth = !!FREE_PROVIDERS[providerId]?.noAuth;
const models = getModelsByProviderId(providerId);
const providerAlias = getProviderAlias(providerId);
@@ -588,7 +589,7 @@ export default function ProviderDetailPage() {
onSetAlias={(alias) => handleSetAlias(model.id, alias, providerStorageAlias)}
onDeleteAlias={() => handleDeleteAlias(existingAlias)}
testStatus={modelTestResults[model.id]}
onTest={connections.length > 0 ? () => handleTestModel(model.id) : undefined}
onTest={connections.length > 0 || isFreeNoAuth ? () => handleTestModel(model.id) : undefined}
isTesting={testingModelId === model.id}
isFree={model.isFree}
/>
@@ -607,7 +608,7 @@ export default function ProviderDetailPage() {
onSetAlias={() => {}}
onDeleteAlias={() => handleDeleteAlias(model.alias)}
testStatus={modelTestResults[model.id]}
onTest={connections.length > 0 ? () => handleTestModel(model.id) : undefined}
onTest={connections.length > 0 || isFreeNoAuth ? () => handleTestModel(model.id) : undefined}
isTesting={testingModelId === model.id}
isCustom
isFree={false}
@@ -808,80 +809,94 @@ export default function ProviderDetailPage() {
)}
{/* Connections */}
<Card>
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold">Connections</h2>
{/* Round Robin toggle */}
<div className="flex items-center gap-2">
<span className="text-xs text-text-muted font-medium">Round Robin</span>
<Toggle
checked={providerStrategy === "round-robin"}
onChange={handleRoundRobinToggle}
/>
{providerStrategy === "round-robin" && (
<div className="flex items-center gap-1.5">
<span className="text-xs text-text-muted">Sticky:</span>
<input
type="number"
min={1}
value={providerStickyLimit}
onChange={(e) => handleStickyLimitChange(e.target.value)}
placeholder="1"
className="w-14 px-2 py-1 text-xs border border-border rounded-md bg-background focus:outline-none focus:border-primary"
/>
</div>
)}
</div>
</div>
{connections.length === 0 ? (
<div className="text-center py-12">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary mb-4">
<span className="material-symbols-outlined text-[32px]">{isOAuth ? "lock" : "key"}</span>
{isFreeNoAuth ? (
<Card>
<div className="flex items-center gap-3">
<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-green-500/10 text-green-500">
<span className="material-symbols-outlined text-[20px]">lock_open</span>
</div>
<div>
<p className="text-sm font-medium">No authentication required</p>
<p className="text-xs text-text-muted">This provider is ready to use.</p>
</div>
<p className="text-text-main font-medium mb-1">No connections yet</p>
<p className="text-sm text-text-muted mb-4">Add your first connection to get started</p>
{!isCompatible && (
<div className="flex gap-2 justify-center">
{providerId === "iflow" && (
<Button icon="cookie" variant="secondary" onClick={() => setShowIFlowCookieModal(true)}>
Cookie Auth
</Button>
)}
<Button icon="add" onClick={() => isOAuth ? setShowOAuthModal(true) : setShowAddApiKeyModal(true)}>
{providerId === "iflow" ? "OAuth" : "Add Connection"}
</Button>
</div>
)}
</div>
) : (
<>
{connectionsList}
{!isCompatible && (
<div className="flex gap-2 mt-4">
{providerId === "iflow" && (
</Card>
) : (
<Card>
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold">Connections</h2>
{/* Round Robin toggle */}
<div className="flex items-center gap-2">
<span className="text-xs text-text-muted font-medium">Round Robin</span>
<Toggle
checked={providerStrategy === "round-robin"}
onChange={handleRoundRobinToggle}
/>
{providerStrategy === "round-robin" && (
<div className="flex items-center gap-1.5">
<span className="text-xs text-text-muted">Sticky:</span>
<input
type="number"
min={1}
value={providerStickyLimit}
onChange={(e) => handleStickyLimitChange(e.target.value)}
placeholder="1"
className="w-14 px-2 py-1 text-xs border border-border rounded-md bg-background focus:outline-none focus:border-primary"
/>
</div>
)}
</div>
</div>
{connections.length === 0 ? (
<div className="text-center py-12">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary mb-4">
<span className="material-symbols-outlined text-[32px]">{isOAuth ? "lock" : "key"}</span>
</div>
<p className="text-text-main font-medium mb-1">No connections yet</p>
<p className="text-sm text-text-muted mb-4">Add your first connection to get started</p>
{!isCompatible && (
<div className="flex gap-2 justify-center">
{providerId === "iflow" && (
<Button icon="cookie" variant="secondary" onClick={() => setShowIFlowCookieModal(true)}>
Cookie Auth
</Button>
)}
<Button icon="add" onClick={() => isOAuth ? setShowOAuthModal(true) : setShowAddApiKeyModal(true)}>
{providerId === "iflow" ? "OAuth" : "Add Connection"}
</Button>
</div>
)}
</div>
) : (
<>
{connectionsList}
{!isCompatible && (
<div className="flex gap-2 mt-4">
{providerId === "iflow" && (
<Button
size="sm"
icon="cookie"
variant="secondary"
onClick={() => setShowIFlowCookieModal(true)}
title="Add connection using browser cookie"
>
Cookie
</Button>
)}
<Button
size="sm"
icon="cookie"
variant="secondary"
onClick={() => setShowIFlowCookieModal(true)}
title="Add connection using browser cookie"
icon="add"
onClick={() => isOAuth ? setShowOAuthModal(true) : setShowAddApiKeyModal(true)}
>
Cookie
Add
</Button>
)}
<Button
size="sm"
icon="add"
onClick={() => isOAuth ? setShowOAuthModal(true) : setShowAddApiKeyModal(true)}
>
Add
</Button>
</div>
)}
</>
)}
</Card>
</div>
)}
</>
)}
</Card>
)}
{/* Models */}
<Card>
@@ -502,6 +502,7 @@ export default function ProvidersPage() {
function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
const { connected, error, errorCode, errorTime, allDisabled } = stats;
const isNoAuth = !!provider.noAuth;
const dotColors = {
free: "bg-green-500",
@@ -553,6 +554,8 @@ function ProviderCard({ providerId, provider, stats, authType, onToggle }) {
Disabled
</span>
</Badge>
) : isNoAuth ? (
<Badge variant="success" size="sm" dot>Ready</Badge>
) : (
<>
{getStatusDisplay(connected, error, errorCode)}
+12 -4
View File
@@ -16,15 +16,23 @@ const getClaudeSettingsPath = () => {
};
// Check if claude CLI is installed
// Check if claude CLI is installed (via which/where or config file exists)
const checkClaudeInstalled = async () => {
try {
const isWindows = os.platform() === "win32";
const command = isWindows ? "where claude" : "command -v claude";
await execAsync(command, { windowsHide: true });
const command = isWindows ? "where claude" : "which claude";
const env = isWindows
? { ...process.env, PATH: `${process.env.APPDATA}\\npm;${process.env.PATH}` }
: process.env;
await execAsync(command, { windowsHide: true, env });
return true;
} catch {
return false;
try {
await fs.access(getClaudeSettingsPath());
return true;
} catch {
return false;
}
}
};
+12 -4
View File
@@ -41,15 +41,23 @@ const deleteNestedSection = (obj, dottedKey) => {
delete cur[keys[keys.length - 1]];
};
// Check if codex CLI is installed
// Check if codex CLI is installed (via which/where or config file exists)
const checkCodexInstalled = async () => {
try {
const isWindows = os.platform() === "win32";
const command = isWindows ? "where codex" : "command -v codex";
await execAsync(command, { windowsHide: true });
const command = isWindows ? "where codex" : "which codex";
const env = isWindows
? { ...process.env, PATH: `${process.env.APPDATA}\\npm;${process.env.PATH}` }
: process.env;
await execAsync(command, { windowsHide: true, env });
return true;
} catch {
return false;
try {
await fs.access(getCodexConfigPath());
return true;
} catch {
return false;
}
}
};
+12 -4
View File
@@ -12,15 +12,23 @@ const execAsync = promisify(exec);
const getDroidDir = () => path.join(os.homedir(), ".factory");
const getDroidSettingsPath = () => path.join(getDroidDir(), "settings.json");
// Check if droid CLI is installed
// Check if droid CLI is installed (via which/where or config file exists)
const checkDroidInstalled = async () => {
try {
const isWindows = os.platform() === "win32";
const command = isWindows ? "where droid" : "command -v droid";
await execAsync(command, { windowsHide: true });
const command = isWindows ? "where droid" : "which droid";
const env = isWindows
? { ...process.env, PATH: `${process.env.APPDATA}\\npm;${process.env.PATH}` }
: process.env;
await execAsync(command, { windowsHide: true, env });
return true;
} catch {
return false;
try {
await fs.access(getDroidSettingsPath());
return true;
} catch {
return false;
}
}
};
+103 -21
View File
@@ -12,15 +12,24 @@ const execAsync = promisify(exec);
const getOpenClawDir = () => path.join(os.homedir(), ".openclaw");
const getOpenClawSettingsPath = () => path.join(getOpenClawDir(), "openclaw.json");
// Check if openclaw CLI is installed
// Check if openclaw CLI is installed (via which/where or config file exists)
const checkOpenClawInstalled = async () => {
try {
const isWindows = os.platform() === "win32";
const command = isWindows ? "where openclaw" : "which openclaw";
await execAsync(command, { windowsHide: true });
// On Windows, inject %APPDATA%\npm into PATH so npm global packages are found
const env = isWindows
? { ...process.env, PATH: `${process.env.APPDATA}\\npm;${process.env.PATH}` }
: process.env;
await execAsync(command, { windowsHide: true, env });
return true;
} catch {
return false;
try {
await fs.access(getOpenClawSettingsPath());
return true;
} catch {
return false;
}
}
};
@@ -42,6 +51,19 @@ const has9RouterConfig = (settings) => {
return !!settings.models.providers["9router"];
};
// Read per-agent models.json and return current model id (without "9router/" prefix)
const readAgentModel = async (agentDir) => {
try {
const modelsPath = path.join(agentDir, "models.json");
const content = await fs.readFile(modelsPath, "utf-8");
const data = JSON.parse(content);
const models = data?.providers?.["9router"]?.models;
return models?.[0]?.id || null;
} catch {
return null;
}
};
// GET - Check openclaw CLI and read current settings
export async function GET() {
try {
@@ -57,9 +79,19 @@ export async function GET() {
const settings = await readSettings();
// Enrich agents list with current per-agent model from models.json
const agentList = settings?.agents?.list || [];
const enrichedAgents = await Promise.all(
agentList.map(async (agent) => {
const agentModel = agent.agentDir ? await readAgentModel(agent.agentDir) : null;
return { ...agent, currentModel: agentModel };
})
);
return NextResponse.json({
installed: true,
settings,
agents: enrichedAgents,
has9Router: has9RouterConfig(settings),
settingsPath: getOpenClawSettingsPath(),
});
@@ -69,10 +101,31 @@ export async function GET() {
}
}
// Write per-agent models.json
const writeAgentModels = async (agentDir, model, baseUrl, apiKey) => {
await fs.mkdir(agentDir, { recursive: true });
const modelsPath = path.join(agentDir, "models.json");
let existing = {};
try {
const content = await fs.readFile(modelsPath, "utf-8");
existing = JSON.parse(content);
} catch { /* No existing */ }
if (!existing.providers) existing.providers = {};
existing.providers["9router"] = {
baseUrl,
apiKey: apiKey || "your_api_key",
api: "openai-completions",
models: [{ id: model, name: model.split("/").pop() || model }],
};
await fs.writeFile(modelsPath, JSON.stringify(existing, null, 2));
};
// POST - Update 9Router settings (merge with existing settings)
export async function POST(request) {
try {
const { baseUrl, apiKey, model } = await request.json();
// agentModels: { [agentId]: modelId } for per-agent override
const { baseUrl, apiKey, model, agentModels = {} } = await request.json();
if (!baseUrl || !model) {
return NextResponse.json({ error: "baseUrl and model are required" }, { status: 400 });
@@ -81,17 +134,14 @@ export async function POST(request) {
const openclawDir = getOpenClawDir();
const settingsPath = getOpenClawSettingsPath();
// Ensure directory exists
await fs.mkdir(openclawDir, { recursive: true });
// Read existing settings or create new
let settings = {};
try {
const existingSettings = await fs.readFile(settingsPath, "utf-8");
settings = JSON.parse(existingSettings);
} catch { /* No existing settings */ }
// Ensure structure exists
if (!settings.agents) settings.agents = {};
if (!settings.agents.defaults) settings.agents.defaults = {};
if (!settings.agents.defaults.model) settings.agents.defaults.model = {};
@@ -99,32 +149,64 @@ export async function POST(request) {
if (!settings.models) settings.models = {};
if (!settings.models.providers) settings.models.providers = {};
// Normalize baseUrl to ensure /v1 suffix
const normalizedBaseUrl = baseUrl.endsWith("/v1") ? baseUrl : `${baseUrl}/v1`;
// Update agents.defaults.model.primary
const fullModelId = `9router/${model}`;
// Remove all old 9router/* entries from agents.defaults.models
Object.keys(settings.agents.defaults.models)
.filter((k) => k.startsWith("9router/"))
.forEach((k) => { delete settings.agents.defaults.models[k]; });
// Update default model
settings.agents.defaults.model.primary = fullModelId;
// IMPORTANT: Add to allowlist in agents.defaults.models
if (!settings.agents.defaults.models[fullModelId]) {
settings.agents.defaults.models[fullModelId] = {};
// Collect all unique models (default + per-agent)
const allModelIds = new Set([model]);
Object.values(agentModels).forEach((m) => { if (m) allModelIds.add(m); });
// Add fresh 9router models to allowlist
allModelIds.forEach((m) => {
settings.agents.defaults.models[`9router/${m}`] = {};
});
// Remove old 9router model from each agent in agents.list
if (settings.agents.list) {
settings.agents.list = settings.agents.list.map((agent) => {
if (agent.model?.startsWith("9router/")) {
const { model: _, ...rest } = agent;
return rest;
}
return agent;
});
}
// Update models.providers.9router
// Update models.providers.9router with all models
settings.models.providers["9router"] = {
baseUrl: normalizedBaseUrl,
apiKey: apiKey || "your_api_key",
api: "openai-completions",
models: [
{
id: model,
name: model.split("/").pop() || model,
},
],
models: [...allModelIds].map((m) => ({ id: m, name: m.split("/").pop() || m })),
};
// Write settings
// Set per-agent model in agents.list and write models.json
if (settings.agents.list) {
settings.agents.list = settings.agents.list.map((agent) => {
const agentModel = agentModels[agent.id];
if (agentModel) return { ...agent, model: `9router/${agentModel}` };
return agent;
});
// Write per-agent models.json for agents with agentDir
await Promise.all(
settings.agents.list.map(async (agent) => {
if (!agent.agentDir) return;
const agentModel = agentModels[agent.id];
const modelToWrite = agentModel || model; // fallback to default
await writeAgentModels(agent.agentDir, modelToWrite, normalizedBaseUrl, apiKey);
})
);
}
await fs.writeFile(settingsPath, JSON.stringify(settings, null, 2));
return NextResponse.json({
@@ -12,14 +12,23 @@ const execAsync = promisify(exec);
const getConfigDir = () => path.join(os.homedir(), ".config", "opencode");
const getConfigPath = () => path.join(getConfigDir(), "opencode.json");
// Check if opencode CLI is installed (via which/where or config file exists)
const checkOpenCodeInstalled = async () => {
try {
const isWindows = os.platform() === "win32";
const command = isWindows ? "where opencode" : "command -v opencode";
await execAsync(command, { windowsHide: true });
const command = isWindows ? "where opencode" : "which opencode";
const env = isWindows
? { ...process.env, PATH: `${process.env.APPDATA}\\npm;${process.env.PATH}` }
: process.env;
await execAsync(command, { windowsHide: true, env });
return true;
} catch {
return false;
try {
await fs.access(getConfigPath());
return true;
} catch {
return false;
}
}
};