luulam/9router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: v0.4.41 - cli-tools UI redesign + jcode integration

Browse Source 
- Add jcode CLI tool (#1047) with auto-configuration
- Redesign CLI Tools dashboard: grid 1/2/3 cols + per-tool detail page
- Sync DeepSeek TUI card style + resize icon 1024->128
- Add official logos: amp, jcode, qwen
- Bump version 0.4.39 -> 0.4.41

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
decolua
2026-05-14 10:46:11 +07:00
parent da00a25eef
commit 2190ff062d
16 changed files with 1202 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
CHANGELOG.md
View File

@@ -1,3 +1,27 @@
# v0.4.41 (2026-05-14)
## Features
- Add jcode CLI tool integration with auto-configuration (#1047)
- Redesign CLI Tools dashboard: grid layout (1/2/3 cols) + dedicated detail page per tool
- Add drag-and-drop reordering for combo models (#1108)
- Add Today period option to Usage & Analytics (#1063)
- Add DeepSeek V4 Pro effort aliases (#950)
## Fixes
- fix(autostart): work on nvm + npm 9/10, actually register with launchctl (#1104, fixes #1082)
- Fix Ollama usage not tracked/shown in UI (#1102)
- fix(opencode): preserve DeepSeek reasoning content (#1099, fixes #1093)
## Improvements
- Sync DeepSeek TUI card style with other CLI tools (badges, layout, manual config modal)
- Add official logos for Amp CLI, jcode, Qwen Code (replace generic icons)
- Resize deepseek-tui icon 1024→128 with padding for visual consistency
# v0.4.39 (2026-05-14)
## Fixes
- fix(docker): restore `/app/server.js` (v0.4.38 regression)
# v0.4.38 (2026-05-13) # v0.4.38 (2026-05-13)
## Features ## Features

2
cli/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "9router", "name": "9router",
"version": "0.4.39", "version": "0.4.41",
"description": "9Router CLI - Start and manage 9Router server", "description": "9Router CLI - Start and manage 9Router server",
"bin": { "bin": {
"9router": "./cli.js" "9router": "./cli.js"

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "9router-app", "name": "9router-app",
"version": "0.4.39", "version": "0.4.41",
"description": "9Router web dashboard", "description": "9Router web dashboard",
"private": true, "private": true,
"scripts": { "scripts": {

BIN
public/providers/amp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
public/providers/deepseek-tui.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 620 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
public/providers/jcode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

223
src/app/(dashboard)/dashboard/cli-tools/CLIToolsPageClient.js
View File

@@ -1,130 +1,38 @@
"use client"; "use client";
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect } from "react";
import { Card, CardSkeleton } from "@/shared/components"; import { CardSkeleton } from "@/shared/components";
import { CLI_TOOLS } from "@/shared/constants/cliTools"; import { CLI_TOOLS, MITM_TOOLS } from "@/shared/constants/cliTools";
import { getModelsByProviderId, PROVIDER_ID_TO_ALIAS } from "@/shared/constants/models"; import { MitmLinkCard } from "./components";
import { ClaudeToolCard, CodexToolCard, DroidToolCard, OpenClawToolCard, HermesToolCard, DefaultToolCard, OpenCodeToolCard, CoworkToolCard, CopilotToolCard, ClineToolCard, KiloToolCard, DeepSeekTuiToolCard, MitmLinkCard } from "./components"; import ToolSummaryCard from "./components/ToolSummaryCard";
import { MITM_TOOLS } from "@/shared/constants/cliTools";
const CLOUD_URL = process.env.NEXT_PUBLIC_CLOUD_URL;
const ALL_STATUSES_URL = "/api/cli-tools/all-statuses"; const ALL_STATUSES_URL = "/api/cli-tools/all-statuses";
export default function CLIToolsPageClient({ machineId }) { export default function CLIToolsPageClient({ machineId }) {
const [connections, setConnections] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [expandedTool, setExpandedTool] = useState(null);
const [modelMappings, setModelMappings] = useState({});
const [cloudEnabled, setCloudEnabled] = useState(false);
const [tunnelEnabled, setTunnelEnabled] = useState(false);
const [tunnelPublicUrl, setTunnelPublicUrl] = useState("");
const [tailscaleEnabled, setTailscaleEnabled] = useState(false);
const [tailscaleUrl, setTailscaleUrl] = useState("");
const [apiKeys, setApiKeys] = useState([]);
const [toolStatuses, setToolStatuses] = useState({}); const [toolStatuses, setToolStatuses] = useState({});
const fetchAllStatuses = async () => {
try {
const res = await fetch(ALL_STATUSES_URL);
if (res.ok) setToolStatuses(await res.json());
} catch (error) {
console.log("Error fetching tool statuses:", error);
}
};
const loadCloudSettings = async () => {
try {
const [settingsRes, tunnelRes] = await Promise.all([
fetch("/api/settings"),
fetch("/api/tunnel/status"),
]);
if (settingsRes.ok) {
const data = await settingsRes.json();
setCloudEnabled(data.cloudEnabled || false);
}
if (tunnelRes.ok) {
const data = await tunnelRes.json();
setTunnelEnabled(!!(data.tunnel?.enabled || data.tunnel?.settingsEnabled));
setTunnelPublicUrl(data.tunnel?.publicUrl || "");
setTailscaleEnabled(!!(data.tailscale?.enabled || data.tailscale?.settingsEnabled));
setTailscaleUrl(data.tailscale?.tunnelUrl || "");
}
} catch (error) {
console.log("Error loading settings:", error);
}
};
const fetchApiKeys = async () => {
try {
const res = await fetch("/api/keys");
if (res.ok) {
const data = await res.json();
setApiKeys(data.keys || []);
}
} catch (error) {
console.log("Error fetching API keys:", error);
}
};
const fetchConnections = async () => {
try {
const res = await fetch("/api/providers");
const data = await res.json();
if (res.ok) {
setConnections(data.connections || []);
}
} catch (error) {
console.log("Error fetching connections:", error);
} finally {
setLoading(false);
}
};
useEffect(() => { useEffect(() => {
fetchConnections(); let mounted = true;
loadCloudSettings(); (async () => {
fetchApiKeys(); try {
fetchAllStatuses(); const res = await fetch(ALL_STATUSES_URL);
if (res.ok && mounted) setToolStatuses(await res.json());
} catch (error) {
console.log("Error fetching tool statuses:", error);
} finally {
if (mounted) setLoading(false);
}
})();
return () => { mounted = false; };
}, []); }, []);
const getActiveProviders = () => connections.filter(c => c.isActive !== false);
const getAllAvailableModels = () => {
const activeProviders = getActiveProviders();
const models = [];
const seenModels = new Set();
activeProviders.forEach(conn => {
const alias = PROVIDER_ID_TO_ALIAS[conn.provider] || conn.provider;
const providerModels = getModelsByProviderId(conn.provider);
providerModels.forEach(m => {
const modelValue = `${alias}/${m.id}`;
if (!seenModels.has(modelValue)) {
seenModels.add(modelValue);
models.push({ value: modelValue, label: `${alias}/${m.id}`, provider: conn.provider, alias, connectionName: conn.name, modelId: m.id });
}
});
});
return models;
};
const handleModelMappingChange = useCallback((toolId, modelAlias, targetModel) => {
setModelMappings(prev => {
if (prev[toolId]?.[modelAlias] === targetModel) return prev;
return { ...prev, [toolId]: { ...prev[toolId], [modelAlias]: targetModel } };
});
}, []);
const getBaseUrl = () => {
if (tunnelEnabled && tunnelPublicUrl) return tunnelPublicUrl;
if (cloudEnabled && CLOUD_URL) return CLOUD_URL;
if (typeof window !== "undefined") return window.location.origin;
return "http://localhost:20128";
};
if (loading) { if (loading) {
return ( return (
<div className="flex flex-col gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton /> <CardSkeleton />
<CardSkeleton /> <CardSkeleton />
<CardSkeleton /> <CardSkeleton />
@@ -132,95 +40,26 @@ export default function CLIToolsPageClient({ machineId }) {
); );
} }
const availableModels = getAllAvailableModels();
const hasActiveProviders = availableModels.length > 0;
const renderToolCard = (toolId, tool) => {
const commonProps = {
tool,
isExpanded: expandedTool === toolId,
onToggle: () => setExpandedTool(expandedTool === toolId ? null : toolId),
baseUrl: getBaseUrl(),
apiKeys,
tunnelEnabled,
tunnelPublicUrl,
tailscaleEnabled,
tailscaleUrl,
};
switch (toolId) {
case "claude":
return (
<ClaudeToolCard
key={toolId}
{...commonProps}
activeProviders={getActiveProviders()}
modelMappings={modelMappings[toolId] || {}}
onModelMappingChange={(alias, target) => handleModelMappingChange(toolId, alias, target)}
hasActiveProviders={hasActiveProviders}
cloudEnabled={cloudEnabled}
initialStatus={toolStatuses.claude}
/>
);
case "codex":
return <CodexToolCard key={toolId} {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} initialStatus={toolStatuses.codex} />;
case "opencode":
return <OpenCodeToolCard key={toolId} {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} initialStatus={toolStatuses.opencode} />;
case "cowork":
return (
<CoworkToolCard
key={toolId}
{...commonProps}
activeProviders={getActiveProviders()}
hasActiveProviders={hasActiveProviders}
cloudEnabled={cloudEnabled}
cloudUrl={CLOUD_URL}
tunnelEnabled={tunnelEnabled}
tunnelPublicUrl={tunnelPublicUrl}
tailscaleEnabled={tailscaleEnabled}
tailscaleUrl={tailscaleUrl}
initialStatus={toolStatuses.cowork}
/>
);
case "droid":
return <DroidToolCard key={toolId} {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} initialStatus={toolStatuses.droid} />;
case "openclaw":
return <OpenClawToolCard key={toolId} {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} initialStatus={toolStatuses.openclaw} />;
case "hermes":
return <HermesToolCard key={toolId} {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} initialStatus={toolStatuses.hermes} />;
case "copilot":
return <CopilotToolCard key={toolId} {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} initialStatus={toolStatuses.copilot} />;
case "cline":
return <ClineToolCard key={toolId} {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} initialStatus={toolStatuses.cline} />;
case "kilo":
return <KiloToolCard key={toolId} {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} initialStatus={toolStatuses.kilo} />;
case "deepseek-tui":
return <DeepSeekTuiToolCard key={toolId} {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} initialStatus={toolStatuses["deepseek-tui"]} />;
default:
return <DefaultToolCard key={toolId} toolId={toolId} {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} tunnelEnabled={tunnelEnabled} />;
}
};
const regularTools = Object.entries(CLI_TOOLS); const regularTools = Object.entries(CLI_TOOLS);
const mitmTools = Object.entries(MITM_TOOLS); const mitmTools = Object.entries(MITM_TOOLS);
return ( return (
<div className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-1 sm:px-0"> <div className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-1 sm:px-0">
<div className="flex flex-col gap-1"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
<h1 className="text-xl font-semibold text-text-main sm:text-2xl">CLI Tools</h1> {regularTools.map(([toolId, tool]) => (
<p className="text-sm text-text-muted">Configure local coding tools to use your 9Router providers.</p> <ToolSummaryCard key={toolId} toolId={toolId} tool={tool} status={toolStatuses[toolId]} />
))}
</div> </div>
<div className="grid gap-3 sm:gap-4"> <div className="flex flex-col gap-3 sm:gap-4">
{regularTools.map(([toolId, tool]) => renderToolCard(toolId, tool))}
</div>
<div className="grid gap-3 sm:gap-4">
<div className="flex items-center gap-2 px-1"> <div className="flex items-center gap-2 px-1">
<span className="material-symbols-outlined text-[18px] text-primary">security</span> <span className="material-symbols-outlined text-[18px] text-primary">security</span>
<h2 className="text-sm font-semibold text-text-main">MITM Tools</h2> <h2 className="text-sm font-semibold text-text-main">MITM Tools</h2>
</div> </div>
{mitmTools.map(([toolId, tool]) => ( <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
<MitmLinkCard key={toolId} tool={tool} /> {mitmTools.map(([toolId, tool]) => (
))} <MitmLinkCard key={toolId} tool={tool} />
))}
</div>
</div> </div>
</div> </div>
); );

160
src/app/(dashboard)/dashboard/cli-tools/[toolId]/ToolDetailClient.js Normal file
View File

@@ -0,0 +1,160 @@
"use client";
import { useState, useEffect, useCallback } from "react";
import Link from "next/link";
import { CardSkeleton } from "@/shared/components";
import { CLI_TOOLS } from "@/shared/constants/cliTools";
import { getModelsByProviderId, PROVIDER_ID_TO_ALIAS } from "@/shared/constants/models";
import {
ClaudeToolCard, CodexToolCard, DroidToolCard, OpenClawToolCard,
HermesToolCard, DefaultToolCard, OpenCodeToolCard, CoworkToolCard,
CopilotToolCard, ClineToolCard, KiloToolCard, DeepSeekTuiToolCard,
JcodeToolCard,
} from "../components";
const CLOUD_URL = process.env.NEXT_PUBLIC_CLOUD_URL;
export default function ToolDetailClient({ toolId, machineId }) {
const tool = CLI_TOOLS[toolId];
const [connections, setConnections] = useState([]);
const [loading, setLoading] = useState(true);
const [modelMappings, setModelMappings] = useState({});
const [cloudEnabled, setCloudEnabled] = useState(false);
const [tunnelEnabled, setTunnelEnabled] = useState(false);
const [tunnelPublicUrl, setTunnelPublicUrl] = useState("");
const [tailscaleEnabled, setTailscaleEnabled] = useState(false);
const [tailscaleUrl, setTailscaleUrl] = useState("");
const [apiKeys, setApiKeys] = useState([]);
useEffect(() => {
let mounted = true;
(async () => {
try {
const [provRes, settingsRes, tunnelRes, keysRes] = await Promise.all([
fetch("/api/providers"),
fetch("/api/settings"),
fetch("/api/tunnel/status"),
fetch("/api/keys"),
]);
if (!mounted) return;
if (provRes.ok) {
const data = await provRes.json();
setConnections(data.connections || []);
}
if (settingsRes.ok) {
const data = await settingsRes.json();
setCloudEnabled(data.cloudEnabled || false);
}
if (tunnelRes.ok) {
const data = await tunnelRes.json();
setTunnelEnabled(!!(data.tunnel?.enabled || data.tunnel?.settingsEnabled));
setTunnelPublicUrl(data.tunnel?.publicUrl || "");
setTailscaleEnabled(!!(data.tailscale?.enabled || data.tailscale?.settingsEnabled));
setTailscaleUrl(data.tailscale?.tunnelUrl || "");
}
if (keysRes.ok) {
const data = await keysRes.json();
setApiKeys(data.keys || []);
}
} catch (error) {
console.log("Error loading tool data:", error);
} finally {
if (mounted) setLoading(false);
}
})();
return () => { mounted = false; };
}, []);
const getActiveProviders = () => connections.filter(c => c.isActive !== false);
const getAllAvailableModels = () => {
const activeProviders = getActiveProviders();
const models = [];
const seenModels = new Set();
activeProviders.forEach(conn => {
const alias = PROVIDER_ID_TO_ALIAS[conn.provider] || conn.provider;
const providerModels = getModelsByProviderId(conn.provider);
providerModels.forEach(m => {
const modelValue = `${alias}/${m.id}`;
if (!seenModels.has(modelValue)) {
seenModels.add(modelValue);
models.push({ value: modelValue, label: `${alias}/${m.id}`, provider: conn.provider, alias, connectionName: conn.name, modelId: m.id });
}
});
});
return models;
};
const handleModelMappingChange = useCallback((tId, alias, target) => {
setModelMappings(prev => {
if (prev[tId]?.[alias] === target) return prev;
return { ...prev, [tId]: { ...prev[tId], [alias]: target } };
});
}, []);
const getBaseUrl = () => {
if (tunnelEnabled && tunnelPublicUrl) return tunnelPublicUrl;
if (cloudEnabled && CLOUD_URL) return CLOUD_URL;
if (typeof window !== "undefined") return window.location.origin;
return "http://localhost:20128";
};
const renderToolCard = () => {
const availableModels = getAllAvailableModels();
const hasActiveProviders = availableModels.length > 0;
const commonProps = {
tool,
isExpanded: true,
onToggle: () => {},
baseUrl: getBaseUrl(),
apiKeys,
tunnelEnabled,
tunnelPublicUrl,
tailscaleEnabled,
tailscaleUrl,
};
switch (toolId) {
case "claude":
return <ClaudeToolCard {...commonProps} activeProviders={getActiveProviders()} modelMappings={modelMappings[toolId] || {}} onModelMappingChange={(a, t) => handleModelMappingChange(toolId, a, t)} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} />;
case "codex":
return <CodexToolCard {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} />;
case "opencode":
return <OpenCodeToolCard {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} />;
case "cowork":
return <CoworkToolCard {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} cloudUrl={CLOUD_URL} tunnelEnabled={tunnelEnabled} tunnelPublicUrl={tunnelPublicUrl} tailscaleEnabled={tailscaleEnabled} tailscaleUrl={tailscaleUrl} />;
case "droid":
return <DroidToolCard {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} />;
case "openclaw":
return <OpenClawToolCard {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} />;
case "hermes":
return <HermesToolCard {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} />;
case "copilot":
return <CopilotToolCard {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} />;
case "cline":
return <ClineToolCard {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} />;
case "kilo":
return <KiloToolCard {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} />;
case "deepseek-tui":
return <DeepSeekTuiToolCard {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} />;
case "jcode":
return <JcodeToolCard {...commonProps} activeProviders={getActiveProviders()} hasActiveProviders={hasActiveProviders} cloudEnabled={cloudEnabled} />;
default:
return <DefaultToolCard toolId={toolId} {...commonProps} activeProviders={getActiveProviders()} cloudEnabled={cloudEnabled} tunnelEnabled={tunnelEnabled} />;
}
};
return (
<div className="mx-auto flex w-full max-w-5xl flex-col gap-4 px-1 sm:px-0">
<Link href="/dashboard/cli-tools" className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-primary w-fit">
<span className="material-symbols-outlined text-[18px]">arrow_back</span>
Back to CLI Tools
</Link>
<div className="flex flex-col gap-1">
<h1 className="text-xl font-semibold text-text-main sm:text-2xl">{tool.name}</h1>
<p className="text-sm text-text-muted">{tool.description}</p>
</div>
{loading ? <CardSkeleton /> : renderToolCard()}
</div>
);
}

11
src/app/(dashboard)/dashboard/cli-tools/[toolId]/page.js Normal file
View File

@@ -0,0 +1,11 @@
import { notFound } from "next/navigation";
import { CLI_TOOLS } from "@/shared/constants/cliTools";
import { getMachineId } from "@/shared/utils/machine";
import ToolDetailClient from "./ToolDetailClient";
export default async function ToolDetailPage({ params }) {
const { toolId } = await params;
if (!CLI_TOOLS[toolId]) notFound();
const machineId = await getMachineId();
return <ToolDetailClient toolId={toolId} machineId={machineId} />;
}

653
src/app/(dashboard)/dashboard/cli-tools/components/DeepSeekTuiToolCard.js
View File

@@ -1,7 +1,7 @@
"use client"; "use client";
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import { Card, Button, ModelSelectModal } from "@/shared/components"; import { Card, Button, ModelSelectModal, ManualConfigModal } from "@/shared/components";
import Image from "next/image"; import Image from "next/image";
import BaseUrlSelect from "./BaseUrlSelect"; import BaseUrlSelect from "./BaseUrlSelect";
import ApiKeySelect from "./ApiKeySelect"; import ApiKeySelect from "./ApiKeySelect";
@@ -10,378 +10,329 @@ import { matchKnownEndpoint } from "./cliEndpointMatch";
const ENDPOINT = "/api/cli-tools/deepseek-tui-settings"; const ENDPOINT = "/api/cli-tools/deepseek-tui-settings";
export default function DeepSeekTuiToolCard({ export default function DeepSeekTuiToolCard({
tool, tool,
isExpanded, isExpanded,
onToggle, onToggle,
baseUrl, baseUrl,
hasActiveProviders, hasActiveProviders,
apiKeys, apiKeys,
activeProviders, activeProviders,
cloudEnabled, cloudEnabled,
initialStatus, initialStatus,
tunnelEnabled, tunnelEnabled,
tunnelPublicUrl, tunnelPublicUrl,
tailscaleEnabled, tailscaleEnabled,
tailscaleUrl, tailscaleUrl,
}) { }) {
const [deepseekStatus, setDeepseekStatus] = useState(initialStatus || null); const [deepseekStatus, setDeepseekStatus] = useState(initialStatus || null);
const [checking, setChecking] = useState(false); const [checking, setChecking] = useState(false);
const [applying, setApplying] = useState(false); const [applying, setApplying] = useState(false);
const [restoring, setRestoring] = useState(false); const [restoring, setRestoring] = useState(false);
const [message, setMessage] = useState(null); const [message, setMessage] = useState(null);
const [selectedApiKey, setSelectedApiKey] = useState(""); const [selectedApiKey, setSelectedApiKey] = useState("");
const [selectedModel, setSelectedModel] = useState(""); const [selectedModel, setSelectedModel] = useState("");
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [modelAliases, setModelAliases] = useState({}); const [modelAliases, setModelAliases] = useState({});
const [customBaseUrl, setCustomBaseUrl] = useState(""); const [showManualConfigModal, setShowManualConfigModal] = useState(false);
const hasInitializedModel = useRef(false); const [customBaseUrl, setCustomBaseUrl] = useState("");
const hasInitializedModel = useRef(false);
const getConfigStatus = () => { const getConfigStatus = () => {
if (!deepseekStatus?.installed) return null; if (!deepseekStatus?.installed) return null;
const cfg = deepseekStatus.settings; const openaiSection = deepseekStatus.settings?.["providers.openai"];
if (!cfg) return "not_configured"; if (!openaiSection?.base_url) return "not_configured";
const openaiSection = cfg["providers.openai"]; if (matchKnownEndpoint(openaiSection.base_url, { tunnelPublicUrl, tailscaleUrl })) return "configured";
if (!openaiSection?.base_url) return "not_configured"; return "other";
if (matchKnownEndpoint(openaiSection.base_url, { tunnelPublicUrl, tailscaleUrl })) return "configured"; };
return "other";
};
const configStatus = getConfigStatus(); const configStatus = getConfigStatus();
useEffect(() => { useEffect(() => {
if (apiKeys?.length > 0 && !selectedApiKey) { if (apiKeys?.length > 0 && !selectedApiKey) {
setSelectedApiKey(apiKeys[0].key); setSelectedApiKey(apiKeys[0].key);
} }
}, [apiKeys, selectedApiKey]); }, [apiKeys, selectedApiKey]);
useEffect(() => { useEffect(() => {
if (initialStatus) setDeepseekStatus(initialStatus); if (initialStatus) setDeepseekStatus(initialStatus);
}, [initialStatus]); }, [initialStatus]);
useEffect(() => { useEffect(() => {
if (isExpanded && !deepseekStatus) { if (isExpanded && !deepseekStatus) {
checkStatus(); checkStatus();
fetchModelAliases(); fetchModelAliases();
} }
if (isExpanded) fetchModelAliases(); if (isExpanded) fetchModelAliases();
}, [isExpanded]); }, [isExpanded]);
const fetchModelAliases = async () => { const fetchModelAliases = async () => {
try { try {
const res = await fetch("/api/models/alias"); const res = await fetch("/api/models/alias");
const data = await res.json(); const data = await res.json();
if (res.ok) setModelAliases(data.aliases || {}); if (res.ok) setModelAliases(data.aliases || {});
} catch (error) { } catch (error) {
console.log("Error fetching model aliases:", error); console.log("Error fetching model aliases:", error);
} }
}; };
useEffect(() => { useEffect(() => {
if (deepseekStatus?.installed && !hasInitializedModel.current) { if (deepseekStatus?.installed && !hasInitializedModel.current) {
hasInitializedModel.current = true; hasInitializedModel.current = true;
const cfg = deepseekStatus.settings; const openaiSection = deepseekStatus.settings?.["providers.openai"];
const openaiSection = cfg?.["providers.openai"]; if (openaiSection?.model) setSelectedModel(openaiSection.model);
if (openaiSection?.model) setSelectedModel(openaiSection.model); }
} }, [deepseekStatus]);
}, [deepseekStatus]);
const checkStatus = async () => { const checkStatus = async () => {
setChecking(true); setChecking(true);
try { try {
const res = await fetch(ENDPOINT); const res = await fetch(ENDPOINT);
const data = await res.json(); const data = await res.json();
setDeepseekStatus(data); setDeepseekStatus(data);
} catch (error) { } catch (error) {
setDeepseekStatus({ installed: false, error: error.message }); setDeepseekStatus({ installed: false, error: error.message });
} finally { } finally {
setChecking(false); setChecking(false);
} }
}; };
const normalizeLocalhost = (url) => url.replace("://localhost", "://127.0.0.1"); const normalizeLocalhost = (url) => url.replace("://localhost", "://127.0.0.1");
const getLocalBaseUrl = () => { const getLocalBaseUrl = () => {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
return normalizeLocalhost(window.location.origin); return normalizeLocalhost(window.location.origin);
} }
return "http://127.0.0.1:20128"; return "http://127.0.0.1:20128";
}; };
const getEffectiveBaseUrl = () => { const getEffectiveBaseUrl = () => {
const url = customBaseUrl || getLocalBaseUrl(); const url = customBaseUrl || getLocalBaseUrl();
return url.endsWith("/v1") ? url : `${url}/v1`; return url.endsWith("/v1") ? url : `${url}/v1`;
}; };
const handleApply = async () => { const handleApply = async () => {
setApplying(true); setApplying(true);
setMessage(null); setMessage(null);
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);
const res = await fetch(ENDPOINT, { const res = await fetch(ENDPOINT, {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ body: JSON.stringify({
baseUrl: getEffectiveBaseUrl(), baseUrl: getEffectiveBaseUrl(),
apiKey: keyToUse, apiKey: keyToUse,
model: selectedModel, model: selectedModel,
}), }),
}); });
const data = await res.json(); const data = await res.json();
if (res.ok) { if (res.ok) {
setMessage({ type: "success", text: "Settings applied successfully!" }); setMessage({ type: "success", text: "Settings applied successfully!" });
checkStatus(); checkStatus();
} else { } else {
setMessage({ type: "error", text: data.error || "Failed to apply settings" }); setMessage({ type: "error", text: data.error || "Failed to apply settings" });
} }
} catch (error) { } catch (error) {
setMessage({ type: "error", text: error.message }); setMessage({ type: "error", text: error.message });
} finally { } finally {
setApplying(false); setApplying(false);
} }
}; };
const handleReset = async () => { const handleReset = async () => {
setRestoring(true); setRestoring(true);
setMessage(null); setMessage(null);
try { try {
const res = await fetch(ENDPOINT, { method: "DELETE" }); const res = await fetch(ENDPOINT, { method: "DELETE" });
const data = await res.json(); const data = await res.json();
if (res.ok) { if (res.ok) {
setMessage({ type: "success", text: "Settings reset to defaults!" }); setMessage({ type: "success", text: "Settings reset successfully!" });
checkStatus(); setSelectedModel("");
} else { checkStatus();
setMessage({ type: "error", text: data.error || "Failed to reset settings" }); } else {
} setMessage({ type: "error", text: data.error || "Failed to reset settings" });
} catch (error) { }
setMessage({ type: "error", text: error.message }); } catch (error) {
} finally { setMessage({ type: "error", text: error.message });
setRestoring(false); } finally {
} setRestoring(false);
}; }
};
const handleSelectModel = (model) => { const handleModelSelect = (model) => {
setSelectedModel(model.value); setSelectedModel(model.value);
setModalOpen(false); setModalOpen(false);
}; };
const renderIcon = () => { const getManualConfigs = () => {
if (tool.image) { const keyToUse = (selectedApiKey && selectedApiKey.trim())
return ( ? selectedApiKey
<Image : (!cloudEnabled ? "sk_9router" : "<API_KEY_FROM_DASHBOARD>");
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"; }}
/>
);
}
if (tool.icon) {
return <span className="material-symbols-outlined text-xl" style={{ color: tool.color }}>{tool.icon}</span>;
}
return (
<Image
src={`/providers/${tool.id}.png`}
alt={tool.name}
width={32}
height={32}
className="size-8 object-contain rounded-lg"
sizes="32px"
onError={(e) => { e.target.style.display = "none"; }}
/>
);
};
const renderStatusBadge = () => { const tomlContent = `[providers.openai]
if (!deepseekStatus?.installed) { base_url = "${getEffectiveBaseUrl()}"
return ( api_key = "${keyToUse}"
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20"> model = "${selectedModel || "provider/model-id"}"
<span className="material-symbols-outlined text-sm">close</span> `;
Not Installed
</span>
);
}
if (configStatus === "configured") {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20">
<span className="material-symbols-outlined text-sm">check_circle</span>
Configured
</span>
);
}
if (configStatus === "other") {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border border-yellow-500/20">
<span className="material-symbols-outlined text-sm">settings</span>
Other Config
</span>
);
}
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20">
<span className="material-symbols-outlined text-sm">info</span>
Not Configured
</span>
);
};
return ( return [
<Card padding="xs" className="overflow-hidden overflow-x-hidden"> { filename: "~/.deepseek/config.toml", content: tomlContent },
<div className="flex items-center justify-between hover:cursor-pointer" onClick={onToggle}> ];
<div className="flex items-center gap-3"> };
<div className="size-8 rounded-lg flex items-center justify-center shrink-0">
{renderIcon()} return (
</div> <Card padding="xs" className="overflow-hidden">
<div className="min-w-0"> <div className="flex items-start justify-between gap-3 hover:cursor-pointer sm:items-center" onClick={onToggle}>
<div className="flex items-center gap-2"> <div className="flex min-w-0 items-center gap-3">
<h3 className="font-medium text-sm">{tool.name}</h3> <div className="size-8 flex items-center justify-center shrink-0">
{renderStatusBadge()} <Image src={tool.image || "/providers/deepseek-tui.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>
<p className="text-xs text-text-muted truncate">{tool.description}</p> <div className="min-w-0">
</div> <div className="flex min-w-0 flex-wrap items-center gap-2">
</div> <h3 className="font-medium text-sm">{tool.name}</h3>
<span className={`material-symbols-outlined text-text-muted text-[20px] transition-transform ${isExpanded ? "rotate-180" : ""}`}>expand_more</span> {configStatus === "configured" && <span className="px-1.5 py-0.5 text-[10px] font-medium bg-green-500/10 text-green-600 dark:text-green-400 rounded-full">Connected</span>}
{configStatus === "not_configured" && <span className="px-1.5 py-0.5 text-[10px] font-medium bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 rounded-full">Not configured</span>}
{configStatus === "other" && <span className="px-1.5 py-0.5 text-[10px] font-medium bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-full">Other</span>}
</div> </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 && ( {isExpanded && (
<div className="mt-6 pt-6 border-t border-border"> <div className="mt-4 pt-4 border-t border-border flex flex-col gap-4">
{/* Notes */} {checking && (
{tool.notes && tool.notes.length > 0 && ( <div className="flex items-center gap-2 text-text-muted">
<div className="flex flex-col gap-2 mb-4"> <span className="material-symbols-outlined animate-spin">progress_activity</span>
{tool.notes.map((note, index) => { <span>Checking DeepSeek TUI...</span>
const isWarning = note.type === "warning"; </div>
const isError = note.type === "error"; )}
let bgClass = "bg-blue-500/10 border-blue-500/30";
let textClass = "text-blue-600 dark:text-blue-400";
let iconClass = "text-blue-500";
let icon = "info";
if (isWarning) { {!checking && deepseekStatus && !deepseekStatus.installed && (
bgClass = "bg-yellow-500/10 border-yellow-500/30"; <div className="flex flex-col gap-4">
textClass = "text-yellow-600 dark:text-yellow-400"; <div className="flex flex-col gap-3 p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
iconClass = "text-yellow-500"; <div className="flex items-start gap-3">
icon = "warning"; <span className="material-symbols-outlined text-yellow-500">warning</span>
} else if (isError) { <div className="flex-1">
bgClass = "bg-red-500/10 border-red-500/30"; <p className="font-medium text-yellow-600 dark:text-yellow-400">DeepSeek TUI not detected locally</p>
textClass = "text-red-600 dark:text-red-400"; <p className="text-sm text-text-muted mt-1">Install via npm:</p>
iconClass = "text-red-500"; <code className="block mt-2 p-2 bg-black/20 rounded text-xs font-mono">npm install -g deepseek-tui</code>
icon = "error"; <p className="text-sm text-text-muted mt-2">Manual configuration is still available if 9router is deployed on a remote server.</p>
} </div>
return (
<div key={index} className={`flex items-start gap-3 p-3 rounded-lg border ${bgClass}`}>
<span className={`material-symbols-outlined text-lg ${iconClass}`}>{icon}</span>
<p className={`text-sm ${textClass}`}>{note.text}</p>
</div>
);
})}
</div>
)}
{/* Install check */}
{!deepseekStatus?.installed && (
<div className="flex flex-col gap-3">
<p className="text-sm text-text-muted">DeepSeek TUI is not detected on your system.</p>
<div className="p-3 bg-bg-secondary rounded-lg border border-border">
<p className="text-xs text-text-muted mb-2">Install via npm:</p>
<code className="text-sm font-mono">npm install -g deepseek-tui</code>
</div>
<Button onClick={checkStatus} disabled={checking} variant="secondary" size="sm">
{checking ? "Checking..." : "Check Again"}
</Button>
</div>
)}
{/* Config section */}
{deepseekStatus?.installed && (
<div className="flex flex-col gap-4">
{/* Config path */}
<div className="flex items-center gap-2 text-xs text-text-muted">
<span className="material-symbols-outlined text-sm">folder</span>
<code className="px-2 py-0.5 bg-bg-secondary rounded text-xs font-mono">{deepseekStatus.configPath}</code>
</div>
{/* Base URL */}
<div>
<label className="text-xs font-medium text-text-muted mb-1 block">Base URL</label>
<BaseUrlSelect
value={customBaseUrl}
onChange={setCustomBaseUrl}
baseUrl={baseUrl}
tunnelEnabled={tunnelEnabled}
tunnelPublicUrl={tunnelPublicUrl}
tailscaleEnabled={tailscaleEnabled}
tailscaleUrl={tailscaleUrl}
/>
</div>
{/* API Key */}
<div>
<label className="text-xs font-medium text-text-muted mb-1 block">API Key</label>
<ApiKeySelect value={selectedApiKey} onChange={setSelectedApiKey} apiKeys={apiKeys} cloudEnabled={cloudEnabled} className="w-full" />
</div>
{/* Model */}
<div>
<label className="text-xs font-medium text-text-muted mb-1 block">Model</label>
<div className="flex flex-col sm:flex-row sm:items-center gap-2">
<input
type="text"
value={selectedModel}
onChange={(e) => setSelectedModel(e.target.value)}
placeholder="ollama/gpt-oss:120b"
className="w-full sm:w-auto flex-1 px-3 py-2 bg-bg-secondary rounded-lg text-sm border border-border focus:outline-none focus:ring-1 focus:ring-primary/50"
/>
<button
onClick={() => setModalOpen(true)}
disabled={!hasActiveProviders}
className={`shrink-0 px-3 py-2 rounded-lg border text-sm transition-colors ${hasActiveProviders
? "bg-bg-secondary border-border text-text-main hover:border-primary cursor-pointer"
: "opacity-50 cursor-not-allowed border-border"
}`}
>
Select Model
</button>
</div>
</div>
{/* Message */}
{message && (
<div className={`p-3 rounded-lg border text-sm ${message.type === "success"
? "bg-green-500/10 border-green-500/30 text-green-600 dark:text-green-400"
: "bg-red-500/10 border-red-500/30 text-red-600 dark:text-red-400"
}`}>
{message.text}
</div>
)}
{/* Actions */}
<div className="flex items-center gap-2">
<Button onClick={handleApply} disabled={applying || !selectedModel} variant="primary" size="sm">
{applying ? "Applying..." : "Apply 9Router Config"}
</Button>
<Button onClick={handleReset} disabled={restoring} variant="secondary" size="sm">
{restoring ? "Resetting..." : "Reset to Defaults"}
</Button>
</div>
</div>
)}
</div> </div>
)} <div className="flex items-center gap-2 pl-9">
<Button variant="secondary" size="sm" onClick={() => setShowManualConfigModal(true)} className="!bg-yellow-500/20 !border-yellow-500/40 !text-yellow-700 dark:!text-yellow-300 hover:!bg-yellow-500/30">
<span className="material-symbols-outlined text-[18px] mr-1">content_copy</span>
Manual Config
</Button>
</div>
</div>
</div>
)}
<ModelSelectModal {!checking && deepseekStatus?.installed && (
isOpen={modalOpen} <>
onClose={() => setModalOpen(false)} <div className="flex flex-col gap-2">
onSelect={handleSelectModel} {tool.notes && tool.notes.length > 0 && (
selectedModel={selectedModel} <div className="flex flex-col gap-2 mb-2">
activeProviders={activeProviders} {tool.notes.map((note, idx) => (
title="Select Model" <div key={idx} className={`flex items-start gap-2 p-2 rounded text-xs ${
/> note.type === "warning" ? "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400" :
</Card> note.type === "error" ? "bg-red-500/10 text-red-600 dark:text-red-400" :
); "bg-blue-500/10 text-blue-600 dark:text-blue-400"
}`}>
<span className="material-symbols-outlined text-[14px] mt-0.5">
{note.type === "warning" ? "warning" : note.type === "error" ? "error" : "info"}
</span>
<span>{note.text}</span>
</div>
))}
</div>
)}
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr] sm:items-center sm:gap-2">
<span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Select Endpoint</span>
<span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
<BaseUrlSelect
value={customBaseUrl || getEffectiveBaseUrl()}
onChange={setCustomBaseUrl}
requiresExternalUrl={tool.requiresExternalUrl}
tunnelEnabled={tunnelEnabled}
tunnelPublicUrl={tunnelPublicUrl}
tailscaleEnabled={tailscaleEnabled}
tailscaleUrl={tailscaleUrl}
/>
</div>
{deepseekStatus?.settings?.["providers.openai"]?.base_url && (
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
<span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Current</span>
<span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
<span className="min-w-0 truncate rounded bg-surface/40 px-2 py-2 text-xs text-text-muted sm:py-1.5">
{deepseekStatus.settings["providers.openai"].base_url}
</span>
</div>
)}
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
<span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">API Key</span>
<span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
<ApiKeySelect value={selectedApiKey} onChange={setSelectedApiKey} apiKeys={apiKeys} cloudEnabled={cloudEnabled} />
</div>
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
<span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Default Model</span>
<span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
<div className="relative w-full min-w-0">
<input type="text" value={selectedModel} onChange={(e) => setSelectedModel(e.target.value)} placeholder="provider/model-id" className="w-full min-w-0 pl-2 pr-7 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5" />
{selectedModel && <button onClick={() => setSelectedModel("")} className="absolute right-1 top-1/2 -translate-y-1/2 p-0.5 text-text-muted hover:text-red-500 rounded transition-colors" title="Clear"><span className="material-symbols-outlined text-[14px]">close</span></button>}
</div>
<button onClick={() => setModalOpen(true)} disabled={!hasActiveProviders} className={`w-full sm:w-auto rounded border px-2 py-2 text-xs transition-colors sm:py-1.5 whitespace-nowrap sm:shrink-0 ${hasActiveProviders ? "bg-surface border-border text-text-main hover:border-primary cursor-pointer" : "opacity-50 cursor-not-allowed border-border"}`}>Select</button>
</div>
</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>
)}
<div className="grid grid-cols-1 gap-2 sm:flex sm:items-center">
<Button variant="primary" size="sm" onClick={handleApply} disabled={!selectedModel} loading={applying}>
<span className="material-symbols-outlined text-[14px] mr-1">save</span>Apply
</Button>
<Button variant="outline" size="sm" onClick={handleReset} disabled={!deepseekStatus?.has9Router} loading={restoring}>
<span className="material-symbols-outlined text-[14px] mr-1">restore</span>Reset
</Button>
<Button variant="ghost" size="sm" onClick={() => setShowManualConfigModal(true)}>
<span className="material-symbols-outlined text-[14px] mr-1">content_copy</span>Manual Config
</Button>
</div>
</>
)}
</div>
)}
<ModelSelectModal
isOpen={modalOpen}
onClose={() => setModalOpen(false)}
onSelect={handleModelSelect}
selectedModel={selectedModel}
activeProviders={activeProviders}
modelAliases={modelAliases}
title="Select Model for DeepSeek TUI"
/>
<ManualConfigModal
isOpen={showManualConfigModal}
onClose={() => setShowManualConfigModal(false)}
title="DeepSeek TUI - Manual Configuration"
configs={getManualConfigs()}
/>
</Card>
);
} }

380
src/app/(dashboard)/dashboard/cli-tools/components/JcodeToolCard.js Normal file
View File

@@ -0,0 +1,380 @@
"use client";
import { useState, useEffect, useRef } from "react";
import { Card, Button, ModelSelectModal, ManualConfigModal } from "@/shared/components";
import Image from "next/image";
import BaseUrlSelect from "./BaseUrlSelect";
import ApiKeySelect from "./ApiKeySelect";
import { matchKnownEndpoint } from "./cliEndpointMatch";
export default function JcodeToolCard({
tool,
isExpanded,
onToggle,
baseUrl,
hasActiveProviders,
apiKeys,
activeProviders,
cloudEnabled,
initialStatus,
tunnelEnabled,
tunnelPublicUrl,
tailscaleEnabled,
tailscaleUrl,
}) {
const [jcodeStatus, setJcodeStatus] = useState(initialStatus || null);
const [checkingJcode, setCheckingJcode] = useState(false);
const [applying, setApplying] = useState(false);
const [restoring, setRestoring] = useState(false);
const [message, setMessage] = useState(null);
const [selectedApiKey, setSelectedApiKey] = useState("");
const [selectedModel, setSelectedModel] = useState("");
const [modalOpen, setModalOpen] = useState(false);
const [modelAliases, setModelAliases] = useState({});
const [showManualConfigModal, setShowManualConfigModal] = useState(false);
const [customBaseUrl, setCustomBaseUrl] = useState("");
const hasInitializedModel = useRef(false);
const getConfigStatus = () => {
if (!jcodeStatus?.installed) return null;
if (!jcodeStatus?.has9Router) return "not_configured";
const currentProvider = jcodeStatus.config?.providers?.["9router"];
if (!currentProvider) return "not_configured";
return matchKnownEndpoint(currentProvider.base_url, { tunnelPublicUrl, tailscaleUrl }) ? "configured" : "other";
};
const configStatus = getConfigStatus();
useEffect(() => {
if (apiKeys?.length > 0 && !selectedApiKey) {
setSelectedApiKey(apiKeys[0].key);
}
}, [apiKeys, selectedApiKey]);
useEffect(() => {
if (initialStatus) setJcodeStatus(initialStatus);
}, [initialStatus]);
useEffect(() => {
if (isExpanded && !jcodeStatus) {
checkJcodeStatus();
fetchModelAliases();
}
if (isExpanded) fetchModelAliases();
}, [isExpanded]);
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);
}
};
useEffect(() => {
if (jcodeStatus?.installed && !hasInitializedModel.current) {
hasInitializedModel.current = true;
const provider = jcodeStatus.config?.providers?.["9router"];
if (provider) {
if (provider.default_model) {
setSelectedModel(provider.default_model);
}
// Try to match API key from env file
const envApiKey = jcodeStatus.envApiKey;
if (envApiKey && apiKeys?.some(k => k.key === envApiKey)) {
setSelectedApiKey(envApiKey);
}
}
}
}, [jcodeStatus, apiKeys]);
const checkJcodeStatus = async () => {
setCheckingJcode(true);
try {
const res = await fetch("/api/cli-tools/jcode-settings");
const data = await res.json();
setJcodeStatus(data);
} catch (error) {
setJcodeStatus({ installed: false, error: error.message });
} finally {
setCheckingJcode(false);
}
};
const normalizeLocalhost = (url) => url.replace("://localhost", "://127.0.0.1");
const getLocalBaseUrl = () => {
if (typeof window !== "undefined") {
return normalizeLocalhost(window.location.origin);
}
return "http://127.0.0.1:20128";
};
const getEffectiveBaseUrl = () => {
const url = customBaseUrl || getLocalBaseUrl();
return url.endsWith("/v1") ? url : `${url}/v1`;
};
const getDisplayUrl = () => {
const url = customBaseUrl || getLocalBaseUrl();
return url.endsWith("/v1") ? url : `${url}/v1`;
};
const handleApplySettings = async () => {
setApplying(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/jcode-settings", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
baseUrl: getEffectiveBaseUrl(),
apiKey: keyToUse,
models: selectedModel ? [selectedModel] : [],
}),
});
const data = await res.json();
if (res.ok) {
setMessage({ type: "success", text: "Settings applied successfully!" });
checkJcodeStatus();
} else {
setMessage({ type: "error", text: data.error || "Failed to apply settings" });
}
} catch (error) {
setMessage({ type: "error", text: error.message });
} finally {
setApplying(false);
}
};
const handleResetSettings = async () => {
setRestoring(true);
setMessage(null);
try {
const res = await fetch("/api/cli-tools/jcode-settings", { method: "DELETE" });
const data = await res.json();
if (res.ok) {
setMessage({ type: "success", text: "Settings reset successfully!" });
setSelectedModel("");
setSelectedApiKey("");
checkJcodeStatus();
} else {
setMessage({ type: "error", text: data.error || "Failed to reset settings" });
}
} catch (error) {
setMessage({ type: "error", text: error.message });
} finally {
setRestoring(false);
}
};
const handleModelSelect = (model) => {
setSelectedModel(model.value);
setModalOpen(false);
};
const getManualConfigs = () => {
const keyToUse = (selectedApiKey && selectedApiKey.trim())
? selectedApiKey
: (!cloudEnabled ? "sk_9router" : "<API_KEY_FROM_DASHBOARD>");
const configToml = `[providers.9router]
type = "openai-compatible"
base_url = "${getEffectiveBaseUrl()}"
auth = "bearer"
api_key_env = "JCODE_9ROUTER_API_KEY"
env_file = "provider-9router.env"
default_model = "${selectedModel || "cc/claude-opus-4-7"}"
requires_api_key = true
[[providers.9router.models]]
id = "${selectedModel || "cc/claude-opus-4-7"}"`;
const envContent = `JCODE_9ROUTER_API_KEY="${keyToUse}"`;
return [
{
filename: "~/.jcode/config.toml",
content: configToml,
},
{
filename: "~/.config/jcode/provider-9router.env",
content: envContent,
},
];
};
return (
<Card padding="xs" className="overflow-hidden">
<div className="flex items-start justify-between gap-3 hover:cursor-pointer sm:items-center" onClick={onToggle}>
<div className="flex min-w-0 items-center gap-3">
<div className="size-8 flex items-center justify-center shrink-0">
<Image src={tool.image || "/providers/jcode.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 min-w-0 flex-wrap items-center gap-2">
<h3 className="font-medium text-sm">{tool.name}</h3>
{configStatus === "configured" && <span className="px-1.5 py-0.5 text-[10px] font-medium bg-green-500/10 text-green-600 dark:text-green-400 rounded-full">Connected</span>}
{configStatus === "not_configured" && <span className="px-1.5 py-0.5 text-[10px] font-medium bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 rounded-full">Not configured</span>}
{configStatus === "other" && <span className="px-1.5 py-0.5 text-[10px] font-medium bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-full">Other</span>}
</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">
{checkingJcode && (
<div className="flex items-center gap-2 text-text-muted">
<span className="material-symbols-outlined animate-spin">progress_activity</span>
<span>Checking jcode CLI...</span>
</div>
)}
{!checkingJcode && jcodeStatus && !jcodeStatus.installed && (
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-3 p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
<div className="flex items-start gap-3">
<span className="material-symbols-outlined text-yellow-500">warning</span>
<div className="flex-1">
<p className="font-medium text-yellow-600 dark:text-yellow-400">jcode CLI not detected locally</p>
<p className="text-sm text-text-muted mt-1">Install jcode to enable automatic configuration:</p>
<code className="block mt-2 p-2 bg-black/20 rounded text-xs font-mono">
curl -fsSL https://raw.githubusercontent.com/1jehuang/jcode/master/scripts/install.sh | bash
</code>
<p className="text-sm text-text-muted mt-2">Manual configuration is still available if 9router is deployed on a remote server.</p>
</div>
</div>
<div className="flex items-center gap-2 pl-9">
<Button variant="secondary" size="sm" onClick={() => setShowManualConfigModal(true)} className="!bg-yellow-500/20 !border-yellow-500/40 !text-yellow-700 dark:!text-yellow-300 hover:!bg-yellow-500/30">
<span className="material-symbols-outlined text-[18px] mr-1">content_copy</span>
Manual Config
</Button>
</div>
</div>
</div>
)}
{!checkingJcode && jcodeStatus?.installed && (
<>
<div className="flex flex-col gap-2">
{/* Info notes */}
{tool.notes && tool.notes.length > 0 && (
<div className="flex flex-col gap-2 mb-2">
{tool.notes.map((note, idx) => (
<div key={idx} className={`flex items-start gap-2 p-2 rounded text-xs ${
note.type === "info" ? "bg-blue-500/10 text-blue-600 dark:text-blue-400" :
note.type === "warning" ? "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400" :
"bg-gray-500/10 text-text-muted"
}`}>
<span className="material-symbols-outlined text-[14px] mt-0.5">
{note.type === "info" ? "info" : note.type === "warning" ? "warning" : "help"}
</span>
<span>{note.text}</span>
</div>
))}
</div>
)}
{/* Endpoint (selector) */}
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr] sm:items-center sm:gap-2">
<span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Select Endpoint</span>
<span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
<BaseUrlSelect
value={customBaseUrl || getDisplayUrl()}
onChange={setCustomBaseUrl}
requiresExternalUrl={tool.requiresExternalUrl}
tunnelEnabled={tunnelEnabled}
tunnelPublicUrl={tunnelPublicUrl}
tailscaleEnabled={tailscaleEnabled}
tailscaleUrl={tailscaleUrl}
/>
</div>
{/* Current configured */}
{jcodeStatus?.config?.providers?.["9router"]?.base_url && (
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
<span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Current</span>
<span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
<span className="min-w-0 truncate rounded bg-surface/40 px-2 py-2 text-xs text-text-muted sm:py-1.5">
{jcodeStatus.config.providers["9router"].base_url}
</span>
</div>
)}
{/* API Key */}
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
<span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">API Key</span>
<span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
<ApiKeySelect value={selectedApiKey} onChange={setSelectedApiKey} apiKeys={apiKeys} cloudEnabled={cloudEnabled} />
</div>
{/* Default Model */}
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-[8rem_auto_1fr_auto] sm:items-center sm:gap-2">
<span className="text-xs font-semibold text-text-main sm:text-right sm:text-sm">Default Model</span>
<span className="material-symbols-outlined hidden text-text-muted text-[14px] sm:inline">arrow_forward</span>
<div className="relative w-full min-w-0">
<input type="text" value={selectedModel} onChange={(e) => setSelectedModel(e.target.value)} placeholder="cc/claude-opus-4-7" className="w-full min-w-0 pl-2 pr-7 py-2 bg-surface rounded border border-border text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 sm:py-1.5" />
{selectedModel && <button onClick={() => setSelectedModel("")} className="absolute right-1 top-1/2 -translate-y-1/2 p-0.5 text-text-muted hover:text-red-500 rounded transition-colors" title="Clear"><span className="material-symbols-outlined text-[14px]">close</span></button>}
</div>
<button onClick={() => setModalOpen(true)} disabled={!hasActiveProviders} className={`w-full sm:w-auto rounded border px-2 py-2 text-xs transition-colors sm:py-1.5 whitespace-nowrap sm:shrink-0 ${hasActiveProviders ? "bg-surface border-border text-text-main hover:border-primary cursor-pointer" : "opacity-50 cursor-not-allowed border-border"}`}>Select</button>
</div>
{/* Usage hint */}
<div className="flex flex-col gap-1 p-3 bg-blue-500/5 border border-blue-500/20 rounded-lg">
<p className="text-xs font-medium text-blue-600 dark:text-blue-400">Usage:</p>
<code className="text-xs font-mono text-text-muted">jcode --provider-profile 9router</code>
<code className="text-xs font-mono text-text-muted">jcode --provider-profile 9router --model {selectedModel || "cc/claude-opus-4-7"}</code>
</div>
</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>
)}
<div className="grid grid-cols-1 gap-2 sm:flex sm:items-center">
<Button variant="primary" size="sm" onClick={handleApplySettings} disabled={!selectedModel} loading={applying}>
<span className="material-symbols-outlined text-[14px] mr-1">save</span>Apply
</Button>
<Button variant="outline" size="sm" onClick={handleResetSettings} disabled={!jcodeStatus?.has9Router} loading={restoring}>
<span className="material-symbols-outlined text-[14px] mr-1">restore</span>Reset
</Button>
<Button variant="ghost" size="sm" onClick={() => setShowManualConfigModal(true)}>
<span className="material-symbols-outlined text-[14px] mr-1">content_copy</span>Manual Config
</Button>
</div>
</>
)}
</div>
)}
<ModelSelectModal
isOpen={modalOpen}
onClose={() => setModalOpen(false)}
onSelect={handleModelSelect}
selectedModel={selectedModel}
activeProviders={activeProviders}
modelAliases={modelAliases}
title="Select Model for jcode"
/>
<ManualConfigModal
isOpen={showManualConfigModal}
onClose={() => setShowManualConfigModal(false)}
title="jcode - Manual Configuration"
configs={getManualConfigs()}
/>
</Card>
);
}

40
src/app/(dashboard)/dashboard/cli-tools/components/ToolSummaryCard.js Normal file
View File

@@ -0,0 +1,40 @@
"use client";
import Link from "next/link";
import Image from "next/image";
import { Card } from "@/shared/components";
// Derive simple connected/configured/not-installed status from API payload
function getStatus(status) {
if (!status) return { label: "Unknown", cls: "bg-gray-500/10 text-gray-500" };
if (!status.installed) return { label: "Not installed", cls: "bg-red-500/10 text-red-600 dark:text-red-400" };
if (status.has9Router) return { label: "Connected", cls: "bg-green-500/10 text-green-600 dark:text-green-400" };
return { label: "Not configured", cls: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400" };
}
export default function ToolSummaryCard({ toolId, tool, status }) {
const s = getStatus(status);
return (
<Link href={`/dashboard/cli-tools/${toolId}`} className="block">
<Card padding="sm" className="h-full overflow-hidden hover:border-primary/50 transition-colors cursor-pointer">
<div className="flex h-full flex-col gap-2">
<div className="flex items-start gap-3">
<div className="size-8 flex items-center justify-center shrink-0">
{tool.image ? (
<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"; }} />
) : tool.icon ? (
<span className="material-symbols-outlined text-[28px]" style={{ color: tool.color }}>{tool.icon}</span>
) : null}
</div>
<div className="min-w-0 flex-1">
<h3 className="font-medium text-sm truncate">{tool.name}</h3>
<span className={`inline-block mt-0.5 px-1.5 py-0.5 text-[10px] font-medium rounded-full ${s.cls}`}>{s.label}</span>
</div>
<span className="material-symbols-outlined text-text-muted text-[18px] shrink-0">chevron_right</span>
</div>
<p className="text-xs text-text-muted line-clamp-2">{tool.description}</p>
</div>
</Card>
</Link>
);
}

1
src/app/(dashboard)/dashboard/cli-tools/components/index.js
View File

@@ -11,6 +11,7 @@ export { default as CopilotToolCard } from "./CopilotToolCard";
export { default as ClineToolCard } from "./ClineToolCard"; export { default as ClineToolCard } from "./ClineToolCard";
export { default as KiloToolCard } from "./KiloToolCard"; export { default as KiloToolCard } from "./KiloToolCard";
export { default as DeepSeekTuiToolCard } from "./DeepSeekTuiToolCard"; export { default as DeepSeekTuiToolCard } from "./DeepSeekTuiToolCard";
export { default as JcodeToolCard } from "./JcodeToolCard";
export { default as MitmServerCard } from "./MitmServerCard"; export { default as MitmServerCard } from "./MitmServerCard";
export { default as MitmToolCard } from "./MitmToolCard"; export { default as MitmToolCard } from "./MitmToolCard";
export { default as MitmLinkCard } from "./MitmLinkCard"; export { default as MitmLinkCard } from "./MitmLinkCard";

2
src/app/api/cli-tools/all-statuses/route.js
View File

@@ -12,6 +12,7 @@ import { GET as copilotGet } from "../copilot-settings/route";
import { GET as clineGet } from "../cline-settings/route"; import { GET as clineGet } from "../cline-settings/route";
import { GET as kiloGet } from "../kilo-settings/route"; import { GET as kiloGet } from "../kilo-settings/route";
import { GET as deepseekTuiGet } from "../deepseek-tui-settings/route"; import { GET as deepseekTuiGet } from "../deepseek-tui-settings/route";
import { GET as jcodeGet } from "../jcode-settings/route";
const STATUS_GETTERS = { const STATUS_GETTERS = {
claude: claudeGet, claude: claudeGet,
@@ -25,6 +26,7 @@ const STATUS_GETTERS = {
cline: clineGet, cline: clineGet,
kilo: kiloGet, kilo: kiloGet,
"deepseek-tui": deepseekTuiGet, "deepseek-tui": deepseekTuiGet,
jcode: jcodeGet,
}; };
// Batch endpoint: gather all CLI tool statuses in one round-trip // Batch endpoint: gather all CLI tool statuses in one round-trip

216
src/app/api/cli-tools/jcode-settings/route.js Normal file
View File

@@ -0,0 +1,216 @@
"use server";
import { NextResponse } from "next/server";
import fs from "fs/promises";
import path from "path";
import os from "os";
import { exec } from "child_process";
import { promisify } from "util";
import { parseTOML, stringifyTOML } from "confbox";
const execAsync = promisify(exec);
const getJcodeConfigDir = () => path.join(os.homedir(), ".jcode");
const getConfigPath = () => path.join(getJcodeConfigDir(), "config.toml");
const getProviderEnvPath = () => {
const configDir = process.env.XDG_CONFIG_HOME || path.join(os.homedir(), ".config");
return path.join(configDir, "jcode", "provider-9router.env");
};
const checkJcodeInstalled = async () => {
try {
const isWindows = os.platform() === "win32";
const command = isWindows ? "where jcode" : "which jcode";
await execAsync(command, { windowsHide: true });
return true;
} catch {
try {
await fs.access(getJcodeConfigDir());
return true;
} catch {
return false;
}
}
};
const readConfig = async () => {
try {
const configPath = getConfigPath();
const content = await fs.readFile(configPath, "utf-8");
return parseTOML(content);
} catch (error) {
return { providers: {} };
}
};
const has9RouterConfig = (config) => {
if (!config || !config.providers) return false;
const providers = config.providers;
if (providers["9router"]) return true;
for (const [name, provider] of Object.entries(providers)) {
if (provider.base_url && provider.base_url.includes("localhost:20128")) {
return true;
}
}
return false;
};
const writeConfig = async (config) => {
const configPath = getConfigPath();
const content = stringifyTOML(config);
await fs.writeFile(configPath, content, "utf-8");
};
const readProviderEnv = async () => {
try {
const envPath = getProviderEnvPath();
const content = await fs.readFile(envPath, "utf-8");
const env = {};
for (const line of content.split("\n")) {
const trimmed = line.trim();
if (!trimmed || trimmed.startsWith("#")) continue;
const eqIndex = trimmed.indexOf("=");
if (eqIndex > 0) {
const key = trimmed.slice(0, eqIndex).trim();
let value = trimmed.slice(eqIndex + 1).trim();
if ((value.startsWith('"') && value.endsWith('"')) ||
(value.startsWith("'") && value.endsWith("'"))) {
value = value.slice(1, -1);
}
env[key] = value;
}
}
return env;
} catch {
return {};
}
};
const writeProviderEnv = async (env) => {
const envPath = getProviderEnvPath();
let content = "# jcode provider environment variables\n";
for (const [key, value] of Object.entries(env)) {
content += `${key}="${value}"\n`;
}
await fs.writeFile(envPath, content, "utf-8");
};
export async function GET() {
const isInstalled = await checkJcodeInstalled();
if (!isInstalled) {
return NextResponse.json({
installed: false,
message: "jcode not installed. Install via: curl -fsSL https://raw.githubusercontent.com/1jehuang/jcode/master/scripts/install.sh | bash",
});
}
const config = await readConfig();
const has9Router = has9RouterConfig(config);
return NextResponse.json({
installed: true,
config,
has9Router,
configPath: getConfigPath(),
});
}
export async function POST(request) {
try {
const { baseUrl, apiKey, models } = await request.json();
if (!baseUrl || !apiKey) {
return NextResponse.json(
{ error: "baseUrl and apiKey are required" },
{ status: 400 }
);
}
const normalizedBaseUrl = baseUrl.endsWith("/v1")
? baseUrl
: `${baseUrl}/v1`;
let config = await readConfig();
if (!config.providers) {
config.providers = {};
}
config.providers["9router"] = {
type: "openai-compatible",
base_url: normalizedBaseUrl,
auth: "bearer",
api_key_env: "JCODE_9ROUTER_API_KEY",
env_file: "provider-9router.env",
default_model: models && models.length > 0 ? models[0] : "cc/claude-opus-4-7",
requires_api_key: true,
};
const configDir = getJcodeConfigDir();
await fs.mkdir(configDir, { recursive: true });
await writeConfig(config);
const xdgConfigDir = process.env.XDG_CONFIG_HOME || path.join(os.homedir(), ".config");
const jcodeConfigDir = path.join(xdgConfigDir, "jcode");
await fs.mkdir(jcodeConfigDir, { recursive: true });
const env = await readProviderEnv();
env.JCODE_9ROUTER_API_KEY = apiKey;
await writeProviderEnv(env);
return NextResponse.json({
success: true,
message: "jcode configured successfully. Use: jcode --provider-profile 9router",
configPath: getConfigPath(),
});
} catch (error) {
console.error("Error configuring jcode:", error);
return NextResponse.json(
{ error: error.message },
{ status: 500 }
);
}
}
export async function DELETE() {
try {
const config = await readConfig();
if (!config.providers) {
return NextResponse.json({ success: true, message: "No configuration to remove" });
}
delete config.providers["9router"];
await writeConfig(config);
const env = await readProviderEnv();
delete env.JCODE_9ROUTER_API_KEY;
await writeProviderEnv(env);
return NextResponse.json({
success: true,
message: "9router configuration removed from jcode",
});
} catch (error) {
console.error("Error removing jcode configuration:", error);
return NextResponse.json(
{ error: error.message },
{ status: 500 }
);
}
}

35
src/shared/constants/cliTools.js
View File

@@ -71,7 +71,7 @@ export const CLI_TOOLS = {
claude: { claude: {
id: "claude", id: "claude",
name: "Claude Code", name: "Claude Code",
icon: "terminal", image: "/providers/claude.png",
color: "#D97757", color: "#D97757",
description: "Anthropic Claude Code CLI", description: "Anthropic Claude Code CLI",
configType: "env", configType: "env",
@@ -217,7 +217,7 @@ export const CLI_TOOLS = {
amp: { amp: {
id: "amp", id: "amp",
name: "Amp CLI", name: "Amp CLI",
icon: "terminal", image: "/providers/amp.png",
color: "#F97316", color: "#F97316",
description: "Sourcegraph Amp coding assistant CLI", description: "Sourcegraph Amp coding assistant CLI",
docsUrl: "/docs?section=cli-tools&tool=amp", docsUrl: "/docs?section=cli-tools&tool=amp",
@@ -248,7 +248,7 @@ amp --model "{{model}}"
qwen: { qwen: {
id: "qwen", id: "qwen",
name: "Qwen Code", name: "Qwen Code",
icon: "psychology", image: "/providers/qwen.png",
color: "#10B981", color: "#10B981",
description: "Alibaba Qwen Code CLI — supports OpenAI, Anthropic & Gemini providers via 9Router", description: "Alibaba Qwen Code CLI — supports OpenAI, Anthropic & Gemini providers via 9Router",
docsUrl: "https://qwenlm.github.io/qwen-code-docs/en/users/configuration/model-providers/", docsUrl: "https://qwenlm.github.io/qwen-code-docs/en/users/configuration/model-providers/",
@@ -314,6 +314,35 @@ amp --model "{{model}}"
{ type: "warning", text: "Config path: Linux/macOS ~/.deepseek/config.toml • Windows %USERPROFILE%\\.deepseek\\config.toml" }, { type: "warning", text: "Config path: Linux/macOS ~/.deepseek/config.toml • Windows %USERPROFILE%\\.deepseek\\config.toml" },
], ],
}, },
jcode: {
id: "jcode",
name: "jcode",
image: "/providers/jcode.png",
color: "#FF6B35",
description: "High-performance Rust-based coding agent harness",
configType: "custom",
docsUrl: "https://github.com/1jehuang/jcode",
notes: [
{
type: "info",
text: "jcode is a Rust-based coding agent with semantic memory, multi-agent swarms, and extreme performance (27.8 MB RAM, 14ms boot)."
},
{
type: "info",
text: "Configure 9router as an OpenAI-compatible provider to route all jcode requests through 9router's optimization layer."
},
{
type: "warning",
text: "Requires jcode installed. Install via: curl -fsSL https://raw.githubusercontent.com/1jehuang/jcode/master/scripts/install.sh | bash"
},
],
defaultModels: [
{ id: "claude-opus-4-7", name: "Claude Opus 4.7", alias: "opus", defaultValue: "cc/claude-opus-4-7" },
{ id: "claude-sonnet-4-6", name: "Claude Sonnet 4.6", alias: "sonnet", defaultValue: "cc/claude-sonnet-4-6" },
{ id: "gpt-5.5", name: "GPT 5.5", alias: "gpt5", defaultValue: "cx/gpt-5.5" },
{ id: "gemini-3.1-pro", name: "Gemini 3.1 Pro", alias: "gemini", defaultValue: "gemini/gemini-3.1-pro" },
],
},
// HIDDEN: gemini-cli // HIDDEN: gemini-cli
// "gemini-cli": { // "gemini-cli": {
// id: "gemini-cli", // id: "gemini-cli",