mirror of
https://github.com/decolua/9router.git
synced 2026-05-08 12:01:28 +00:00
feat: multi-model support for OpenCode CLI config with subagent integration
- Allow selecting multiple models for 9router provider - Merge models instead of overwriting (backwards-compatible) - Support setting active model via click or Apply - Click active model to clear default (model = '') - Remove individual models via X button (persists to config) - Add PATCH endpoint for clearing active model - Update GET to return normalized model list - Preserve subagent model configuration for explorer subagent Made-with: Cursor
This commit is contained in:
decolua
@@ -19,6 +19,8 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
|
||||
const [modelAliases, setModelAliases] = useState({});
|
||||
const [showManualConfigModal, setShowManualConfigModal] = useState(false);
|
||||
const [customBaseUrl, setCustomBaseUrl] = useState("");
|
||||
const [selectedModels, setSelectedModels] = useState([]);
|
||||
const [activeModel, setActiveModel] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (apiKeys?.length > 0 && !selectedApiKey) {
|
||||
@@ -38,10 +40,13 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
|
||||
if (isExpanded) fetchModelAliases();
|
||||
}, [isExpanded]);
|
||||
|
||||
// Sync model and subagent model from existing config
|
||||
// Sync models from existing config
|
||||
useEffect(() => {
|
||||
if (status?.config?.model?.startsWith("9router/")) {
|
||||
setSelectedModel(status.config.model.replace("9router/", ""));
|
||||
if (status?.opencode?.models) {
|
||||
setSelectedModels(status.opencode.models);
|
||||
}
|
||||
if (status?.opencode?.activeModel) {
|
||||
setActiveModel(status.opencode.activeModel);
|
||||
}
|
||||
|
||||
// Parse subagent settings from agent.explorer if exists
|
||||
@@ -104,8 +109,9 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
|
||||
body: JSON.stringify({
|
||||
baseUrl: getEffectiveBaseUrl(),
|
||||
apiKey: keyToUse,
|
||||
model: selectedModel,
|
||||
subagentModel: subagentModel || selectedModel
|
||||
models: selectedModels,
|
||||
activeModel: activeModel === "" ? "" : (activeModel || selectedModels[0]),
|
||||
subagentModel: subagentModel
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
@@ -132,6 +138,8 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
|
||||
setMessage({ type: "success", text: "Settings reset successfully!" });
|
||||
setSelectedModel("");
|
||||
setSubagentModel("");
|
||||
setSelectedModels([]);
|
||||
setActiveModel("");
|
||||
checkStatus();
|
||||
} else {
|
||||
setMessage({ type: "error", text: data.error || "Failed to reset settings" });
|
||||
@@ -148,7 +156,14 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
|
||||
? selectedApiKey
|
||||
: (!cloudEnabled ? "sk_9router" : "<API_KEY_FROM_DASHBOARD>");
|
||||
|
||||
const effectiveSubagentModel = subagentModel || selectedModel;
|
||||
const modelsToShow = selectedModels.length > 0 ? selectedModels : ["provider/model-id"];
|
||||
const activeModelToShow = activeModel || selectedModels[0] || modelsToShow[0];
|
||||
const effectiveSubagentModel = subagentModel || activeModelToShow;
|
||||
|
||||
const modelsObj = {};
|
||||
modelsToShow.forEach(m => {
|
||||
modelsObj[m] = { name: m };
|
||||
});
|
||||
|
||||
return [{
|
||||
filename: "~/.config/opencode/opencode.json",
|
||||
@@ -157,13 +172,10 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
|
||||
"9router": {
|
||||
npm: "@ai-sdk/openai-compatible",
|
||||
options: { baseURL: getEffectiveBaseUrl(), apiKey: keyToUse },
|
||||
models: {
|
||||
[selectedModel || "provider/model-id"]: { name: selectedModel || "provider/model-id" },
|
||||
[effectiveSubagentModel]: { name: effectiveSubagentModel }
|
||||
},
|
||||
models: modelsObj,
|
||||
},
|
||||
},
|
||||
model: `9router/${selectedModel || "provider/model-id"}`,
|
||||
model: `9router/${activeModelToShow}`,
|
||||
agent: {
|
||||
explorer: {
|
||||
description: "Fast explorer subagent for codebase exploration",
|
||||
@@ -279,13 +291,84 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 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="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={!activeProviders?.length} className={`px-2 py-1.5 rounded border text-xs transition-colors shrink-0 whitespace-nowrap ${activeProviders?.length ? "bg-surface border-border text-text-main hover:border-primary cursor-pointer" : "opacity-50 cursor-not-allowed border-border"}`}>Select Model</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>}
|
||||
{/* Models */}
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="w-32 shrink-0 text-sm font-semibold text-text-main text-right pt-1">Models</span>
|
||||
<span className="material-symbols-outlined text-text-muted text-[14px] mt-1.5">arrow_forward</span>
|
||||
<div className="flex-1 flex flex-col gap-2">
|
||||
<div className="flex flex-wrap gap-1.5 min-h-[28px] px-2 py-1.5 bg-surface rounded border border-border">
|
||||
{selectedModels.length === 0 ? (
|
||||
<span className="text-xs text-text-muted">No models selected</span>
|
||||
) : (
|
||||
selectedModels.map((model) => (
|
||||
<span
|
||||
key={model}
|
||||
onClick={async () => {
|
||||
if (model === activeModel) {
|
||||
try {
|
||||
const res = await fetch("/api/cli-tools/opencode-settings", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ clearActiveModel: true }),
|
||||
});
|
||||
if (res.ok) {
|
||||
setActiveModel("");
|
||||
checkStatus();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Error clearing active model:", error);
|
||||
}
|
||||
} else {
|
||||
setActiveModel(model);
|
||||
}
|
||||
}}
|
||||
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs cursor-pointer transition-colors ${
|
||||
model === activeModel
|
||||
? "bg-primary/10 text-primary border border-primary"
|
||||
: "bg-black/5 dark:bg-white/5 text-text-muted border border-transparent hover:border-border"
|
||||
}`}
|
||||
title={model === activeModel ? "Click to clear active model" : "Click to set as active"}
|
||||
>
|
||||
{model === activeModel && <span className="material-symbols-outlined text-[10px]">star</span>}
|
||||
{model}
|
||||
<button
|
||||
onClick={async (e) => {
|
||||
e.stopPropagation();
|
||||
try {
|
||||
const res = await fetch(`/api/cli-tools/opencode-settings?model=${encodeURIComponent(model)}`, { method: "DELETE" });
|
||||
if (res.ok) {
|
||||
const newModels = selectedModels.filter((m) => m !== model);
|
||||
setSelectedModels(newModels);
|
||||
if (activeModel === model) {
|
||||
setActiveModel("");
|
||||
}
|
||||
checkStatus();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Error removing model:", error);
|
||||
}
|
||||
}}
|
||||
className="ml-0.5 hover:text-red-500"
|
||||
>
|
||||
<span className="material-symbols-outlined text-[12px]">close</span>
|
||||
</button>
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={() => setModalOpen(true)} disabled={!activeProviders?.length} className={`px-2 py-1 rounded border text-xs transition-colors ${activeProviders?.length ? "bg-surface border-border text-text-main hover:border-primary cursor-pointer" : "opacity-50 cursor-not-allowed border-border"}`}>Add Model</button>
|
||||
<span className="text-xs text-text-muted">
|
||||
{selectedModels.length > 0 && activeModel ? (
|
||||
<>Active: <span className="text-primary">{activeModel}</span></>
|
||||
) : selectedModels.length > 0 ? (
|
||||
<span className="text-yellow-500">Click a model to set/clear active</span>
|
||||
) : (
|
||||
"Select models to add"
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subagent Model */}
|
||||
@@ -326,7 +409,7 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="primary" size="sm" onClick={handleApply} disabled={!selectedModel} loading={applying}>
|
||||
<Button variant="primary" size="sm" onClick={handleApply} disabled={selectedModels.length === 0 || !selectedModel} loading={applying}>
|
||||
<span className="material-symbols-outlined text-[14px] mr-1">save</span>Apply
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={handleReset} disabled={!status.has9Router} loading={restoring}>
|
||||
@@ -345,17 +428,16 @@ export default function OpenCodeToolCard({ tool, isExpanded, onToggle, baseUrl,
|
||||
isOpen={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
onSelect={(model) => {
|
||||
setSelectedModel(model.value);
|
||||
// Auto-set subagent model if not set
|
||||
if (!subagentModel) {
|
||||
setSubagentModel(model.value);
|
||||
if (!selectedModels.includes(model.value)) {
|
||||
setSelectedModels([...selectedModels, model.value]);
|
||||
if (!activeModel) setActiveModel(model.value);
|
||||
}
|
||||
setModalOpen(false);
|
||||
setModalOpen(false);
|
||||
}}
|
||||
selectedModel={selectedModel}
|
||||
selectedModel={null}
|
||||
activeProviders={activeProviders}
|
||||
modelAliases={modelAliases}
|
||||
title="Select Model for OpenCode"
|
||||
title="Add Model for OpenCode"
|
||||
/>
|
||||
|
||||
<ModelSelectModal
|
||||
|
||||
@@ -61,12 +61,19 @@ export async function GET() {
|
||||
}
|
||||
|
||||
const config = await readConfig();
|
||||
const providerConfig = config?.provider?.["9router"];
|
||||
const modelMap = providerConfig?.models || {};
|
||||
|
||||
return NextResponse.json({
|
||||
installed: true,
|
||||
config,
|
||||
has9Router: has9RouterConfig(config),
|
||||
configPath: getConfigPath(),
|
||||
opencode: {
|
||||
models: Object.keys(modelMap),
|
||||
activeModel: config?.model?.startsWith("9router/") ? config.model.replace(/^9router\//, "") : null,
|
||||
baseURL: providerConfig?.options?.baseURL || null,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("Error checking opencode settings:", error);
|
||||
@@ -74,13 +81,16 @@ export async function GET() {
|
||||
}
|
||||
}
|
||||
|
||||
// POST - Apply 9Router as openai-compatible provider
|
||||
// POST - Apply 9Router as openai-compatible provider (multi-model support)
|
||||
export async function POST(request) {
|
||||
try {
|
||||
const { baseUrl, apiKey, model, subagentModel } = await request.json();
|
||||
const { baseUrl, apiKey, model, models, activeModel, subagentModel } = await request.json();
|
||||
|
||||
if (!baseUrl || !model) {
|
||||
return NextResponse.json({ error: "baseUrl and model are required" }, { status: 400 });
|
||||
// Accept either `model` (string, legacy) or `models` (array of strings)
|
||||
const modelsArray = Array.isArray(models) ? models.slice() : (typeof model === "string" ? [model] : []);
|
||||
|
||||
if (!baseUrl || modelsArray.length === 0) {
|
||||
return NextResponse.json({ error: "baseUrl and at least one model are required" }, { status: 400 });
|
||||
}
|
||||
|
||||
const configDir = getConfigDir();
|
||||
@@ -97,24 +107,43 @@ export async function POST(request) {
|
||||
|
||||
const normalizedBaseUrl = baseUrl.endsWith("/v1") ? baseUrl : `${baseUrl}/v1`;
|
||||
const keyToUse = apiKey || "sk_9router";
|
||||
const effectiveSubagentModel = subagentModel || model;
|
||||
const effectiveSubagentModel = subagentModel || modelsArray[0];
|
||||
|
||||
// Merge 9router provider
|
||||
// Ensure provider object
|
||||
if (!config.provider) config.provider = {};
|
||||
config.provider["9router"] = {
|
||||
npm: "@ai-sdk/openai-compatible",
|
||||
options: {
|
||||
baseURL: normalizedBaseUrl,
|
||||
apiKey: keyToUse,
|
||||
},
|
||||
models: {
|
||||
[model]: { name: model },
|
||||
[effectiveSubagentModel]: { name: effectiveSubagentModel },
|
||||
},
|
||||
|
||||
// Preserve any existing 9router provider entry and its models
|
||||
const existingProvider = config.provider["9router"] || { npm: "@ai-sdk/openai-compatible", options: {}, models: {} };
|
||||
|
||||
// Merge options (overwrite baseURL/apiKey)
|
||||
existingProvider.options = {
|
||||
...existingProvider.options,
|
||||
baseURL: normalizedBaseUrl,
|
||||
apiKey: keyToUse,
|
||||
};
|
||||
|
||||
// Set as active model
|
||||
config.model = `9router/${model}`;
|
||||
// Ensure models map exists
|
||||
existingProvider.models = existingProvider.models || {};
|
||||
|
||||
// Add or update entries for all requested models
|
||||
for (const m of modelsArray) {
|
||||
if (!m || typeof m !== "string") continue;
|
||||
existingProvider.models[m] = { name: m };
|
||||
}
|
||||
|
||||
// Save merged provider back
|
||||
config.provider["9router"] = existingProvider;
|
||||
|
||||
// Set the active model: prefer explicit activeModel, else first of modelsArray
|
||||
// If activeModel is explicitly empty string, clear the model
|
||||
if (activeModel === "") {
|
||||
config.model = "";
|
||||
} else {
|
||||
const finalActive = activeModel || modelsArray[0];
|
||||
if (finalActive) {
|
||||
config.model = `9router/${finalActive}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Add subagent configuration
|
||||
if (!config.agent) config.agent = {};
|
||||
@@ -132,14 +161,52 @@ export async function POST(request) {
|
||||
configPath,
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("Error updating opencode settings:", error);
|
||||
return NextResponse.json({ error: "Failed to update opencode settings" }, { status: 500 });
|
||||
console.log("Error applying opencode settings:", error);
|
||||
return NextResponse.json({ error: "Failed to apply settings" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
// DELETE - Remove 9Router provider from config
|
||||
export async function DELETE() {
|
||||
// PATCH - Update specific settings (e.g., clear active model)
|
||||
export async function PATCH(request) {
|
||||
try {
|
||||
const { clearActiveModel } = await request.json();
|
||||
const configPath = getConfigPath();
|
||||
|
||||
let config = {};
|
||||
try {
|
||||
const existing = await fs.readFile(configPath, "utf-8");
|
||||
config = JSON.parse(existing);
|
||||
} catch (error) {
|
||||
if (error.code === "ENOENT") {
|
||||
return NextResponse.json({ success: true, message: "No config file found" });
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
|
||||
if (clearActiveModel === true) {
|
||||
// Clear active model but keep models in the list
|
||||
if (config.model?.startsWith("9router/")) {
|
||||
config.model = "";
|
||||
}
|
||||
}
|
||||
|
||||
await fs.writeFile(configPath, JSON.stringify(config, null, 2));
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: "Settings updated",
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("Error patching opencode settings:", error);
|
||||
return NextResponse.json({ error: "Failed to patch settings" }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
// DELETE - Remove 9Router provider or specific models from config
|
||||
export async function DELETE(request) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const modelToRemove = searchParams.get("model");
|
||||
const configPath = getConfigPath();
|
||||
|
||||
let config = {};
|
||||
@@ -153,11 +220,24 @@ export async function DELETE() {
|
||||
throw error;
|
||||
}
|
||||
|
||||
// Remove 9router provider
|
||||
if (config.provider) delete config.provider["9router"];
|
||||
|
||||
// Reset model if it was pointing to 9router
|
||||
if (config.model?.startsWith("9router/")) delete config.model;
|
||||
// If specific model provided, remove just that model
|
||||
if (modelToRemove && config.provider?.["9router"]?.models) {
|
||||
delete config.provider["9router"].models[modelToRemove];
|
||||
|
||||
// If no models left, remove the provider
|
||||
if (Object.keys(config.provider["9router"].models).length === 0) {
|
||||
delete config.provider["9router"];
|
||||
if (config.model?.startsWith("9router/")) delete config.model;
|
||||
} else if (config.model === `9router/${modelToRemove}`) {
|
||||
// If removed model was active, switch to first remaining model
|
||||
const remainingModels = Object.keys(config.provider["9router"].models);
|
||||
config.model = `9router/${remainingModels[0]}`;
|
||||
}
|
||||
} else {
|
||||
// No specific model - remove entire 9router provider
|
||||
if (config.provider) delete config.provider["9router"];
|
||||
if (config.model?.startsWith("9router/")) delete config.model;
|
||||
}
|
||||
|
||||
// Remove subagent configuration
|
||||
if (config.agent?.explorer?.model?.startsWith("9router/")) {
|
||||
@@ -170,7 +250,7 @@ export async function DELETE() {
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: "9Router settings removed from OpenCode",
|
||||
message: modelToRemove ? `Model "${modelToRemove}" removed` : "9Router settings removed from OpenCode",
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("Error resetting opencode settings:", error);
|
||||
|
||||
Reference in New Issue
Block a user