mirror of
https://github.com/Nezumi-2711/9router.git
synced 2026-09-22 13:38:31 +00:00
decolua
cbabf5547c
- Added new observability settings in the dashboard for max records, batch size, flush interval, and max JSON size. - Introduced `extractRequestConfig` function to capture full request configurations. - Enhanced error handling by saving detailed request information on failures. - Updated usage tracking to include new token metrics. - Modified streaming functions to support detailed content and reasoning tracking.
452 lines
17 KiB
JavaScript
452 lines
17 KiB
JavaScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Card, Button, Badge, Toggle, Input } from "@/shared/components";
|
|
import { useTheme } from "@/shared/hooks/useTheme";
|
|
import { cn } from "@/shared/utils/cn";
|
|
import { APP_CONFIG } from "@/shared/constants/config";
|
|
|
|
export default function ProfilePage() {
|
|
const { theme, setTheme, isDark } = useTheme();
|
|
const [settings, setSettings] = useState({ fallbackStrategy: "fill-first" });
|
|
const [loading, setLoading] = useState(true);
|
|
const [passwords, setPasswords] = useState({ current: "", new: "", confirm: "" });
|
|
const [passStatus, setPassStatus] = useState({ type: "", message: "" });
|
|
const [passLoading, setPassLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetch("/api/settings")
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
setSettings(data);
|
|
setLoading(false);
|
|
})
|
|
.catch((err) => {
|
|
console.error("Failed to fetch settings:", err);
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
const handlePasswordChange = async (e) => {
|
|
e.preventDefault();
|
|
if (passwords.new !== passwords.confirm) {
|
|
setPassStatus({ type: "error", message: "Passwords do not match" });
|
|
return;
|
|
}
|
|
|
|
setPassLoading(true);
|
|
setPassStatus({ type: "", message: "" });
|
|
|
|
try {
|
|
const res = await fetch("/api/settings", {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
currentPassword: passwords.current,
|
|
newPassword: passwords.new,
|
|
}),
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (res.ok) {
|
|
setPassStatus({ type: "success", message: "Password updated successfully" });
|
|
setPasswords({ current: "", new: "", confirm: "" });
|
|
} else {
|
|
setPassStatus({ type: "error", message: data.error || "Failed to update password" });
|
|
}
|
|
} catch (err) {
|
|
setPassStatus({ type: "error", message: "An error occurred" });
|
|
} finally {
|
|
setPassLoading(false);
|
|
}
|
|
};
|
|
|
|
const updateFallbackStrategy = async (strategy) => {
|
|
try {
|
|
const res = await fetch("/api/settings", {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ fallbackStrategy: strategy }),
|
|
});
|
|
if (res.ok) {
|
|
setSettings(prev => ({ ...prev, fallbackStrategy: strategy }));
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to update settings:", err);
|
|
}
|
|
};
|
|
|
|
const updateStickyLimit = async (limit) => {
|
|
const numLimit = parseInt(limit);
|
|
if (isNaN(numLimit) || numLimit < 1) return;
|
|
|
|
try {
|
|
const res = await fetch("/api/settings", {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ stickyRoundRobinLimit: numLimit }),
|
|
});
|
|
if (res.ok) {
|
|
setSettings(prev => ({ ...prev, stickyRoundRobinLimit: numLimit }));
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to update sticky limit:", err);
|
|
}
|
|
};
|
|
|
|
const updateRequireLogin = async (requireLogin) => {
|
|
try {
|
|
const res = await fetch("/api/settings", {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ requireLogin }),
|
|
});
|
|
if (res.ok) {
|
|
setSettings(prev => ({ ...prev, requireLogin }));
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to update require login:", err);
|
|
}
|
|
};
|
|
|
|
const updateObservabilitySetting = async (key, value) => {
|
|
const numValue = parseInt(value);
|
|
if (isNaN(numValue) || numValue < 1) return;
|
|
|
|
try {
|
|
const res = await fetch("/api/settings", {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ [key]: numValue }),
|
|
});
|
|
if (res.ok) {
|
|
setSettings(prev => ({ ...prev, [key]: numValue }));
|
|
}
|
|
} catch (err) {
|
|
console.error(`Failed to update ${key}:`, err);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="flex flex-col gap-6">
|
|
{/* Local Mode Info */}
|
|
<Card>
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<div className="size-12 rounded-lg bg-green-500/10 text-green-500 flex items-center justify-center">
|
|
<span className="material-symbols-outlined text-2xl">computer</span>
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-semibold">Local Mode</h2>
|
|
<p className="text-text-muted">Running on your machine</p>
|
|
</div>
|
|
</div>
|
|
<div className="pt-4 border-t border-border">
|
|
<p className="text-sm text-text-muted">
|
|
All data is stored locally in the <code className="bg-sidebar px-1 rounded">~/.9router/db.json</code> file.
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Security */}
|
|
<Card>
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-2 rounded-lg bg-primary/10 text-primary">
|
|
<span className="material-symbols-outlined text-[20px]">shield</span>
|
|
</div>
|
|
<h3 className="text-lg font-semibold">Security</h3>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium">Require login</p>
|
|
<p className="text-sm text-text-muted">
|
|
When ON, dashboard requires password. When OFF, access without login.
|
|
</p>
|
|
</div>
|
|
<Toggle
|
|
checked={settings.requireLogin === true}
|
|
onChange={() => updateRequireLogin(!settings.requireLogin)}
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
{settings.requireLogin === true && (
|
|
<form onSubmit={handlePasswordChange} className="flex flex-col gap-4 pt-4 border-t border-border/50">
|
|
{settings.hasPassword && (
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium">Current Password</label>
|
|
<Input
|
|
type="password"
|
|
placeholder="Enter current password"
|
|
value={passwords.current}
|
|
onChange={(e) => setPasswords({ ...passwords, current: e.target.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
)}
|
|
{/* {!settings.hasPassword && (
|
|
<div className="p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
|
|
<p className="text-sm text-blue-600 dark:text-blue-400">
|
|
Setting password for the first time. Leave current password empty or use default: <code className="bg-blue-500/20 px-1 rounded">123456</code>
|
|
</p>
|
|
</div>
|
|
)} */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium">New Password</label>
|
|
<Input
|
|
type="password"
|
|
placeholder="Enter new password"
|
|
value={passwords.new}
|
|
onChange={(e) => setPasswords({ ...passwords, new: e.target.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-sm font-medium">Confirm New Password</label>
|
|
<Input
|
|
type="password"
|
|
placeholder="Confirm new password"
|
|
value={passwords.confirm}
|
|
onChange={(e) => setPasswords({ ...passwords, confirm: e.target.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{passStatus.message && (
|
|
<p className={`text-sm ${passStatus.type === "error" ? "text-red-500" : "text-green-500"}`}>
|
|
{passStatus.message}
|
|
</p>
|
|
)}
|
|
|
|
<div className="pt-2">
|
|
<Button type="submit" variant="primary" loading={passLoading}>
|
|
{settings.hasPassword ? "Update Password" : "Set Password"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Routing Preferences */}
|
|
<Card>
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-2 rounded-lg bg-blue-500/10 text-blue-500">
|
|
<span className="material-symbols-outlined text-[20px]">route</span>
|
|
</div>
|
|
<h3 className="text-lg font-semibold">Routing Strategy</h3>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium">Round Robin</p>
|
|
<p className="text-sm text-text-muted">
|
|
Cycle through accounts to distribute load
|
|
</p>
|
|
</div>
|
|
<Toggle
|
|
checked={settings.fallbackStrategy === "round-robin"}
|
|
onChange={() => updateFallbackStrategy(settings.fallbackStrategy === "round-robin" ? "fill-first" : "round-robin")}
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
{/* Sticky Round Robin Limit */}
|
|
{settings.fallbackStrategy === "round-robin" && (
|
|
<div className="flex items-center justify-between pt-2 border-t border-border/50">
|
|
<div>
|
|
<p className="font-medium">Sticky Limit</p>
|
|
<p className="text-sm text-text-muted">
|
|
Calls per account before switching
|
|
</p>
|
|
</div>
|
|
<Input
|
|
type="number"
|
|
min="1"
|
|
max="10"
|
|
value={settings.stickyRoundRobinLimit || 3}
|
|
onChange={(e) => updateStickyLimit(e.target.value)}
|
|
disabled={loading}
|
|
className="w-20 text-center"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<p className="text-xs text-text-muted italic pt-2 border-t border-border/50">
|
|
{settings.fallbackStrategy === "round-robin"
|
|
? `Currently distributing requests across all available accounts with ${settings.stickyRoundRobinLimit || 3} calls per account.`
|
|
: "Currently using accounts in priority order (Fill First)."}
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Theme Preferences */}
|
|
<Card>
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-2 rounded-lg bg-purple-500/10 text-purple-500">
|
|
<span className="material-symbols-outlined text-[20px]">palette</span>
|
|
</div>
|
|
<h3 className="text-lg font-semibold">Appearance</h3>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium">Dark Mode</p>
|
|
<p className="text-sm text-text-muted">
|
|
Switch between light and dark themes
|
|
</p>
|
|
</div>
|
|
<Toggle
|
|
checked={isDark}
|
|
onChange={() => setTheme(isDark ? "light" : "dark")}
|
|
/>
|
|
</div>
|
|
|
|
{/* Theme Options */}
|
|
<div className="pt-4 border-t border-border">
|
|
<div className="inline-flex p-1 rounded-lg bg-black/5 dark:bg-white/5">
|
|
{["light", "dark", "system"].map((option) => (
|
|
<button
|
|
key={option}
|
|
type="button"
|
|
onClick={() => setTheme(option)}
|
|
className={cn(
|
|
"flex items-center gap-2 px-4 py-2 rounded-md font-medium transition-all",
|
|
theme === option
|
|
? "bg-white dark:bg-white/10 text-text-main shadow-sm"
|
|
: "text-text-muted hover:text-text-main"
|
|
)}
|
|
>
|
|
<span className="material-symbols-outlined text-[20px]">
|
|
{option === "light" ? "light_mode" : option === "dark" ? "dark_mode" : "contrast"}
|
|
</span>
|
|
<span className="capitalize">{option}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Data Management */}
|
|
<Card>
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-2 rounded-lg bg-green-500/10 text-green-500">
|
|
<span className="material-symbols-outlined text-[20px]">database</span>
|
|
</div>
|
|
<h3 className="text-lg font-semibold">Data</h3>
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center justify-between p-4 rounded-lg bg-bg border border-border">
|
|
<div>
|
|
<p className="font-medium">Database Location</p>
|
|
<p className="text-sm text-text-muted font-mono">~/.9router/db.json</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Observability Settings */}
|
|
<Card>
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-2 rounded-lg bg-orange-500/10 text-orange-500">
|
|
<span className="material-symbols-outlined text-[20px]">monitoring</span>
|
|
</div>
|
|
<h3 className="text-lg font-semibold">Observability</h3>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium">Max Records</p>
|
|
<p className="text-sm text-text-muted">
|
|
Maximum request detail records to keep (older records are auto-deleted)
|
|
</p>
|
|
</div>
|
|
<Input
|
|
type="number"
|
|
min="100"
|
|
max="10000"
|
|
step="100"
|
|
value={settings.observabilityMaxRecords || 1000}
|
|
onChange={(e) => updateObservabilitySetting("observabilityMaxRecords", parseInt(e.target.value))}
|
|
disabled={loading}
|
|
className="w-28 text-center"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium">Batch Size</p>
|
|
<p className="text-sm text-text-muted">
|
|
Number of items to accumulate before writing to database (higher = better performance)
|
|
</p>
|
|
</div>
|
|
<Input
|
|
type="number"
|
|
min="5"
|
|
max="100"
|
|
step="5"
|
|
value={settings.observabilityBatchSize || 20}
|
|
onChange={(e) => updateObservabilitySetting("observabilityBatchSize", parseInt(e.target.value))}
|
|
disabled={loading}
|
|
className="w-28 text-center"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium">Flush Interval (ms)</p>
|
|
<p className="text-sm text-text-muted">
|
|
Maximum time to wait before flushing buffer (prevents data loss during low traffic)
|
|
</p>
|
|
</div>
|
|
<Input
|
|
type="number"
|
|
min="1000"
|
|
max="30000"
|
|
step="1000"
|
|
value={settings.observabilityFlushIntervalMs || 5000}
|
|
onChange={(e) => updateObservabilitySetting("observabilityFlushIntervalMs", parseInt(e.target.value))}
|
|
disabled={loading}
|
|
className="w-28 text-center"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-medium">Max JSON Size (KB)</p>
|
|
<p className="text-sm text-text-muted">
|
|
Maximum size for each JSON field (request/response) before truncation
|
|
</p>
|
|
</div>
|
|
<Input
|
|
type="number"
|
|
min="100"
|
|
max="10240"
|
|
step="100"
|
|
value={settings.observabilityMaxJsonSize || 1024}
|
|
onChange={(e) => updateObservabilitySetting("observabilityMaxJsonSize", parseInt(e.target.value))}
|
|
disabled={loading}
|
|
className="w-28 text-center"
|
|
/>
|
|
</div>
|
|
|
|
<p className="text-xs text-text-muted italic pt-2 border-t border-border/50">
|
|
Current: Keeps {settings.observabilityMaxRecords || 1000} records, batches every {settings.observabilityBatchSize || 20} requests, max {settings.observabilityMaxJsonSize || 1024}KB per field
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* App Info */}
|
|
<div className="text-center text-sm text-text-muted py-4">
|
|
<p>{APP_CONFIG.name} v{APP_CONFIG.version}</p>
|
|
<p className="mt-1">Local Mode - All data stored on your machine</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|