@@ -184,6 +225,7 @@ export default function APIPageClient({ isAdmin }) {
: requireApiKey
? "Local access is ready and API key enforcement is enabled."
: "Local access is ready. Enable API key enforcement to protect requests.";
+ const hasActiveApiKey = keys.some((key) => key.isActive !== false);
return (
@@ -200,6 +242,12 @@ export default function APIPageClient({ isAdmin }) {
{copied ? "Value copied to clipboard." : ""}
+ {quickStatsLoading ? (
+
+ ) : (
+
+ )}
+
{loadError && (
{loadError}
@@ -225,6 +273,13 @@ export default function APIPageClient({ isAdmin }) {
onCopy={copy}
className={`${styles.routeLocal} ${styles.routeInput}`}
/>
+
diff --git a/src/app/(dashboard)/dashboard/endpoint/components/QuickConnectSnippet.js b/src/app/(dashboard)/dashboard/endpoint/components/QuickConnectSnippet.js
new file mode 100644
index 00000000..a346fed2
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/endpoint/components/QuickConnectSnippet.js
@@ -0,0 +1,123 @@
+"use client";
+
+import { useState } from "react";
+import PropTypes from "prop-types";
+import styles from "../../DashboardPage.module.css";
+
+const SNIPPET_TABS = [
+ { id: "curl", label: "cURL" },
+ { id: "node", label: "Node.js" },
+ { id: "python", label: "Python" },
+];
+
+const normalizeEndpoint = (baseUrl) => (baseUrl || "/v1").replace(/\/+$/, "");
+
+function buildSnippet(language, baseUrl) {
+ const endpoint = normalizeEndpoint(baseUrl);
+
+ switch (language) {
+ case "node":
+ return `import OpenAI from "openai";
+
+const client = new OpenAI({
+ baseURL: ${JSON.stringify(endpoint)},
+ apiKey: process.env.NINEROUTER_API_KEY,
+});
+
+const models = await client.models.list();
+console.log(models.data);`;
+ case "python":
+ return `from openai import OpenAI
+import os
+
+client = OpenAI(
+ base_url=${JSON.stringify(endpoint)},
+ api_key=os.environ["NINEROUTER_API_KEY"],
+)
+
+models = client.models.list()
+print(models.data)`;
+ default:
+ return `export NINEROUTER_API_KEY="sk-your-api-key"
+
+curl -s "${endpoint}/models" \\
+ -H "Authorization: Bearer $NINEROUTER_API_KEY"`;
+ }
+}
+
+export default function QuickConnectSnippet({ baseUrl, hasApiKey, requireApiKey, copied, onCopy }) {
+ const [activeTab, setActiveTab] = useState("curl");
+ const snippet = buildSnippet(activeTab, baseUrl);
+ const activeTabLabel = SNIPPET_TABS.find((tab) => tab.id === activeTab)?.label || "cURL";
+ const copyId = `quick_connect_${activeTab}`;
+ const needsKey = requireApiKey && !hasApiKey;
+
+ return (
+
+
+
+
+ terminal
+
+
+
Make a first request
+
Set your key as an environment variable, then list models to confirm that your client is connected.
+
+
+
+
+ {needsKey ? "Create an API key to connect" : "Connection sample ready"}
+
+
+ {SNIPPET_TABS.map((tab) => (
+
+ ))}
+
+
+
+
{snippet}
+
+
+ Create an active key in the credential registry below, then replace sk-your-api-key before running the sample.
+
+ )}
+
+ );
+}
+
+QuickConnectSnippet.propTypes = {
+ baseUrl: PropTypes.string.isRequired,
+ hasApiKey: PropTypes.bool.isRequired,
+ requireApiKey: PropTypes.bool.isRequired,
+ copied: PropTypes.string,
+ onCopy: PropTypes.func.isRequired,
+};
diff --git a/src/app/(dashboard)/dashboard/endpoint/components/QuickStatsBar.js b/src/app/(dashboard)/dashboard/endpoint/components/QuickStatsBar.js
new file mode 100644
index 00000000..07dbd303
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/endpoint/components/QuickStatsBar.js
@@ -0,0 +1,96 @@
+"use client";
+
+import PropTypes from "prop-types";
+import styles from "../../DashboardPage.module.css";
+
+const integerFormatter = new Intl.NumberFormat("en-US");
+const compactFormatter = new Intl.NumberFormat("en-US", {
+ notation: "compact",
+ maximumFractionDigits: 1,
+});
+
+function toNumber(value) {
+ const number = Number(value);
+ return Number.isFinite(number) ? number : 0;
+}
+
+const statDefinitions = [
+ {
+ key: "requests",
+ label: "Today's requests",
+ icon: "trending_up",
+ description: "Since local midnight",
+ getValue: (stats) => integerFormatter.format(toNumber(stats.totalRequests)),
+ },
+ {
+ key: "input",
+ label: "Input tokens",
+ icon: "input",
+ description: "Prompt volume today",
+ getValue: (stats) => compactFormatter.format(toNumber(stats.totalPromptTokens)),
+ },
+ {
+ key: "output",
+ label: "Output tokens",
+ icon: "output",
+ description: "Completion volume today",
+ getValue: (stats) => compactFormatter.format(toNumber(stats.totalCompletionTokens)),
+ },
+ {
+ key: "providers",
+ label: "Active providers",
+ icon: "dns",
+ description: "Healthy connections",
+ getValue: (_stats, providerSummary) => providerSummary
+ ? `${providerSummary.active} / ${providerSummary.total}`
+ : "—",
+ },
+];
+
+export function QuickStatsBarSkeleton() {
+ return (
+
+ Loading today's gateway statistics.
+ {statDefinitions.map((stat) => (
+
+ ))}
+
+ );
+}
+
+export default function QuickStatsBar({ stats, providerSummary = null }) {
+ if (!stats) return null;
+
+ return (
+
+ Today's gateway overview
+ {statDefinitions.map((stat) => (
+
+ {stat.icon}
+ {stat.label}
+ {stat.getValue(stats, providerSummary)}
+ {stat.description}
+
+ ))}
+
+ );
+}
+
+QuickStatsBar.propTypes = {
+ stats: PropTypes.shape({
+ totalRequests: PropTypes.number,
+ totalPromptTokens: PropTypes.number,
+ totalCompletionTokens: PropTypes.number,
+ }),
+ providerSummary: PropTypes.shape({
+ active: PropTypes.number.isRequired,
+ total: PropTypes.number.isRequired,
+ }),
+};
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 9c4f8bd3..d81ab47d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -207,6 +207,28 @@ body {
-moz-osx-font-smoothing: grayscale;
}
+/* Dashboard canvas: keep the application background in the same restrained
+ slate-and-coral family as its control surfaces. */
+.dashboard-shell {
+ background: var(--color-bg);
+}
+
+.dashboard-main {
+ background: var(--color-bg);
+}
+
+.dark .dashboard-shell {
+ background: #141619;
+}
+
+.dark .dashboard-main {
+ background-color: #141619;
+ background-image:
+ radial-gradient(ellipse 58% 42% at 78% -8%, rgba(241, 112, 82, 0.1), transparent 72%),
+ radial-gradient(ellipse 46% 34% at 8% 110%, rgba(94, 112, 133, 0.08), transparent 74%),
+ linear-gradient(180deg, rgba(24, 27, 31, 0.55), rgba(20, 22, 25, 0));
+}
+
/* Selection - brand-tinted */
::selection {
background-color: rgba(237, 101, 72, 0.25);
@@ -441,6 +463,13 @@ button:disabled,
opacity: 0.16;
}
+.dark .dashboard-main .landing-grid {
+ background-image:
+ linear-gradient(to right, rgba(165, 177, 192, 0.08) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(165, 177, 192, 0.08) 1px, transparent 1px);
+ opacity: 1;
+}
+
/* React Flow controls: match app theme */
.react-flow-controls-custom {
background: var(--color-surface);
diff --git a/src/shared/components/layouts/DashboardLayout.js b/src/shared/components/layouts/DashboardLayout.js
index c41c0d7b..773967c4 100644
--- a/src/shared/components/layouts/DashboardLayout.js
+++ b/src/shared/components/layouts/DashboardLayout.js
@@ -38,7 +38,7 @@ export default function DashboardLayout({ children }) {
const removeNotification = useNotificationStore((state) => state.removeNotification);
return (
-
+
{notifications.map((n) => {
const style = getToastStyle(n.type);
@@ -91,7 +91,7 @@ export default function DashboardLayout({ children }) {
{/* Main content */}
-
+
{/* Faint grid background */}