mirror of
https://github.com/Nezumi-2711/9router.git
synced 2026-09-22 13:38:31 +00:00
enhance API key management UI and improve watcher configuration.
This commit is contained in:
decolua
+6
-2
@@ -40,8 +40,12 @@ const nextConfig = {
|
|||||||
path: false,
|
path: false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
// Exclude logs, .next, gitbook subapp from watcher
|
// Exclude non-source dirs from watcher to reduce inotify load
|
||||||
config.watchOptions = { ...config.watchOptions, ignored: /[\\/](logs|\.next|gitbook|cli)[\\/]/ };
|
config.watchOptions = {
|
||||||
|
...config.watchOptions,
|
||||||
|
aggregateTimeout: 300,
|
||||||
|
ignored: /[\\/](node_modules|\.git|logs|\.next|\.next-cli-build|gitbook|cli|open-sse\.old|tests|docs)[\\/]/,
|
||||||
|
};
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
async rewrites() {
|
async rewrites() {
|
||||||
|
|||||||
@@ -1093,6 +1093,119 @@ export default function APIPageClient({ machineId }) {
|
|||||||
)}
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
{/* API Keys */}
|
||||||
|
<Card id="require-api-key">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h2 className="text-lg font-semibold flex items-center gap-2">
|
||||||
|
<span className="material-symbols-outlined text-primary">vpn_key</span>
|
||||||
|
API Keys
|
||||||
|
</h2>
|
||||||
|
<Button icon="add" onClick={() => setShowAddModal(true)}>
|
||||||
|
Create Key
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between pb-4 mb-4 border-b border-border">
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">Require API key</p>
|
||||||
|
<p className="text-sm text-text-muted">
|
||||||
|
Requests without a valid key will be rejected
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Toggle
|
||||||
|
checked={requireApiKey}
|
||||||
|
onChange={() => handleRequireApiKey(!requireApiKey)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isRemoteHost && !requireApiKey && (
|
||||||
|
<div className="mb-4 -mt-2">
|
||||||
|
<SecurityWarning message="Endpoint is exposed without an API key." />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{keys.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]">vpn_key</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-text-main font-medium mb-1">No API keys yet</p>
|
||||||
|
<p className="text-sm text-text-muted mb-4">Create your first API key to get started</p>
|
||||||
|
<Button icon="add" onClick={() => setShowAddModal(true)}>
|
||||||
|
Create Key
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{keys.map((key) => (
|
||||||
|
<div
|
||||||
|
key={key.id}
|
||||||
|
className={`group flex items-center justify-between py-3 border-b border-black/[0.03] dark:border-white/[0.03] last:border-b-0 ${key.isActive === false ? "opacity-60" : ""}`}
|
||||||
|
>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm font-medium">{key.name}</p>
|
||||||
|
<div className="flex items-center gap-2 mt-1">
|
||||||
|
<code className="text-xs text-text-muted font-mono">
|
||||||
|
{visibleKeys.has(key.id) ? key.key : maskKey(key.key)}
|
||||||
|
</code>
|
||||||
|
<button
|
||||||
|
onClick={() => toggleKeyVisibility(key.id)}
|
||||||
|
className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
|
||||||
|
title={visibleKeys.has(key.id) ? "Hide key" : "Show key"}
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-[14px]">
|
||||||
|
{visibleKeys.has(key.id) ? "visibility_off" : "visibility"}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => copy(key.key, key.id)}
|
||||||
|
className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-[14px]">
|
||||||
|
{copied === key.id ? "check" : "content_copy"}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-text-muted mt-1">
|
||||||
|
Created {new Date(key.createdAt).toLocaleDateString()}
|
||||||
|
</p>
|
||||||
|
{key.isActive === false && (
|
||||||
|
<p className="text-xs text-orange-500 mt-1">Paused</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Toggle
|
||||||
|
size="sm"
|
||||||
|
checked={key.isActive ?? true}
|
||||||
|
onChange={(checked) => {
|
||||||
|
if (key.isActive && !checked) {
|
||||||
|
setConfirmState({
|
||||||
|
title: "Pause API Key",
|
||||||
|
message: `Pause API key "${key.name}"?\n\nThis key will stop working immediately but can be resumed later.`,
|
||||||
|
onConfirm: async () => {
|
||||||
|
setConfirmState(null);
|
||||||
|
handleToggleKey(key.id, checked);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
handleToggleKey(key.id, checked);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
title={key.isActive ? "Pause key" : "Resume key"}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => handleDeleteKey(key.id)}
|
||||||
|
className="p-2 hover:bg-red-500/10 rounded text-red-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-[18px]">delete</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
|
||||||
{/* Token Saver (RTK + Caveman) */}
|
{/* Token Saver (RTK + Caveman) */}
|
||||||
<Card id="rtk">
|
<Card id="rtk">
|
||||||
<div className="flex items-center justify-between mb-2">
|
<div className="flex items-center justify-between mb-2">
|
||||||
@@ -1260,119 +1373,6 @@ export default function APIPageClient({ machineId }) {
|
|||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* API Keys */}
|
|
||||||
<Card id="require-api-key">
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<h2 className="text-lg font-semibold flex items-center gap-2">
|
|
||||||
<span className="material-symbols-outlined text-primary">vpn_key</span>
|
|
||||||
API Keys
|
|
||||||
</h2>
|
|
||||||
<Button icon="add" onClick={() => setShowAddModal(true)}>
|
|
||||||
Create Key
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between pb-4 mb-4 border-b border-border">
|
|
||||||
<div>
|
|
||||||
<p className="font-medium">Require API key</p>
|
|
||||||
<p className="text-sm text-text-muted">
|
|
||||||
Requests without a valid key will be rejected
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Toggle
|
|
||||||
checked={requireApiKey}
|
|
||||||
onChange={() => handleRequireApiKey(!requireApiKey)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isRemoteHost && !requireApiKey && (
|
|
||||||
<div className="mb-4 -mt-2">
|
|
||||||
<SecurityWarning message="Endpoint is exposed without an API key." />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{keys.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]">vpn_key</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-text-main font-medium mb-1">No API keys yet</p>
|
|
||||||
<p className="text-sm text-text-muted mb-4">Create your first API key to get started</p>
|
|
||||||
<Button icon="add" onClick={() => setShowAddModal(true)}>
|
|
||||||
Create Key
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex flex-col">
|
|
||||||
{keys.map((key) => (
|
|
||||||
<div
|
|
||||||
key={key.id}
|
|
||||||
className={`group flex items-center justify-between py-3 border-b border-black/[0.03] dark:border-white/[0.03] last:border-b-0 ${key.isActive === false ? "opacity-60" : ""}`}
|
|
||||||
>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-sm font-medium">{key.name}</p>
|
|
||||||
<div className="flex items-center gap-2 mt-1">
|
|
||||||
<code className="text-xs text-text-muted font-mono">
|
|
||||||
{visibleKeys.has(key.id) ? key.key : maskKey(key.key)}
|
|
||||||
</code>
|
|
||||||
<button
|
|
||||||
onClick={() => toggleKeyVisibility(key.id)}
|
|
||||||
className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
|
|
||||||
title={visibleKeys.has(key.id) ? "Hide key" : "Show key"}
|
|
||||||
>
|
|
||||||
<span className="material-symbols-outlined text-[14px]">
|
|
||||||
{visibleKeys.has(key.id) ? "visibility_off" : "visibility"}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => copy(key.key, key.id)}
|
|
||||||
className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
|
|
||||||
>
|
|
||||||
<span className="material-symbols-outlined text-[14px]">
|
|
||||||
{copied === key.id ? "check" : "content_copy"}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-text-muted mt-1">
|
|
||||||
Created {new Date(key.createdAt).toLocaleDateString()}
|
|
||||||
</p>
|
|
||||||
{key.isActive === false && (
|
|
||||||
<p className="text-xs text-orange-500 mt-1">Paused</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Toggle
|
|
||||||
size="sm"
|
|
||||||
checked={key.isActive ?? true}
|
|
||||||
onChange={(checked) => {
|
|
||||||
if (key.isActive && !checked) {
|
|
||||||
setConfirmState({
|
|
||||||
title: "Pause API Key",
|
|
||||||
message: `Pause API key "${key.name}"?\n\nThis key will stop working immediately but can be resumed later.`,
|
|
||||||
onConfirm: async () => {
|
|
||||||
setConfirmState(null);
|
|
||||||
handleToggleKey(key.id, checked);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
handleToggleKey(key.id, checked);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
title={key.isActive ? "Pause key" : "Resume key"}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={() => handleDeleteKey(key.id)}
|
|
||||||
className="p-2 hover:bg-red-500/10 rounded text-red-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
|
|
||||||
>
|
|
||||||
<span className="material-symbols-outlined text-[18px]">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Add Key Modal */}
|
{/* Add Key Modal */}
|
||||||
<Modal
|
<Modal
|
||||||
isOpen={showAddModal}
|
isOpen={showAddModal}
|
||||||
|
|||||||
@@ -1,19 +1,45 @@
|
|||||||
import { execSync } from "child_process";
|
import { execSync } from "child_process";
|
||||||
|
import path from "path";
|
||||||
|
|
||||||
const EXTENDED_PATH = `/usr/local/bin:/opt/homebrew/bin:/usr/bin:/bin:${process.env.PATH || ""}`;
|
const IS_WIN = process.platform === "win32";
|
||||||
const PYTHON_CANDIDATES = ["python3.13", "python3.12", "python3.11", "python3.10", "python3"];
|
const WHICH_CMD = IS_WIN ? "where" : "which";
|
||||||
|
|
||||||
|
// Extra bin dirs often missing from a packaged/launchd PATH (Python installs headroom here).
|
||||||
|
const EXTRA_BINS = IS_WIN
|
||||||
|
? [
|
||||||
|
`${process.env.LOCALAPPDATA || ""}\\Programs\\Python\\Python313\\Scripts`,
|
||||||
|
`${process.env.LOCALAPPDATA || ""}\\Programs\\Python\\Python312\\Scripts`,
|
||||||
|
`${process.env.LOCALAPPDATA || ""}\\Programs\\Python\\Python311\\Scripts`,
|
||||||
|
`${process.env.LOCALAPPDATA || ""}\\Programs\\Python\\Python310\\Scripts`,
|
||||||
|
`${process.env.APPDATA || ""}\\Python\\Python313\\Scripts`,
|
||||||
|
]
|
||||||
|
: [
|
||||||
|
"/usr/local/bin",
|
||||||
|
"/opt/homebrew/bin",
|
||||||
|
"/Library/Frameworks/Python.framework/Versions/3.13/bin",
|
||||||
|
"/Library/Frameworks/Python.framework/Versions/3.12/bin",
|
||||||
|
"/Library/Frameworks/Python.framework/Versions/3.11/bin",
|
||||||
|
"/Library/Frameworks/Python.framework/Versions/3.10/bin",
|
||||||
|
`${process.env.HOME || ""}/.local/bin`,
|
||||||
|
"/usr/bin",
|
||||||
|
"/bin",
|
||||||
|
];
|
||||||
|
|
||||||
|
const EXTENDED_PATH = [...EXTRA_BINS, process.env.PATH || ""].filter(Boolean).join(path.delimiter);
|
||||||
|
const PYTHON_CANDIDATES = ["python3.13", "python3.12", "python3.11", "python3.10", "python3", "python"];
|
||||||
const MIN_VERSION = [3, 10];
|
const MIN_VERSION = [3, 10];
|
||||||
const HEADROOM_HEALTH_TIMEOUT_MS = 1500;
|
const HEADROOM_HEALTH_TIMEOUT_MS = 1500;
|
||||||
|
|
||||||
// Detect whether the headroom CLI is installed and where its binary lives.
|
// Detect whether the headroom CLI is installed and where its binary lives.
|
||||||
export function findHeadroomBinary() {
|
export function findHeadroomBinary() {
|
||||||
try {
|
try {
|
||||||
const path = execSync("which headroom", {
|
const out = execSync(`${WHICH_CMD} headroom`, {
|
||||||
stdio: ["ignore", "pipe", "ignore"],
|
stdio: ["ignore", "pipe", "ignore"],
|
||||||
windowsHide: true,
|
windowsHide: true,
|
||||||
env: { ...process.env, PATH: EXTENDED_PATH },
|
env: { ...process.env, PATH: EXTENDED_PATH },
|
||||||
}).toString().trim();
|
}).toString().trim();
|
||||||
return path || null;
|
// Windows `where` may return multiple lines — take the first.
|
||||||
|
return out ? out.split(/\r?\n/)[0].trim() : null;
|
||||||
} catch {
|
} catch {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ const VISIBLE_MEDIA_KINDS = ["embedding", "image", "tts", "stt"];
|
|||||||
const COMBINED_WEB_ITEM = { id: "web", label: "Web Fetch & Search", icon: "travel_explore", href: "/dashboard/media-providers/web" };
|
const COMBINED_WEB_ITEM = { id: "web", label: "Web Fetch & Search", icon: "travel_explore", href: "/dashboard/media-providers/web" };
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ href: "/dashboard/endpoint", label: "Endpoint", icon: "api" },
|
{ href: "/dashboard/endpoint", label: "Endpoint & Key", icon: "api" },
|
||||||
{ href: "/dashboard/providers", label: "Providers", icon: "dns" },
|
{ href: "/dashboard/providers", label: "Providers", icon: "dns" },
|
||||||
// { href: "/dashboard/basic-chat", label: "Basic Chat", icon: "chat" }, // Hidden
|
// { href: "/dashboard/basic-chat", label: "Basic Chat", icon: "chat" }, // Hidden
|
||||||
{ href: "/dashboard/combos", label: "Combos", icon: "layers" },
|
{ href: "/dashboard/combos", label: "Combos", icon: "layers" },
|
||||||
|
|||||||
Reference in New Issue
Block a user