Hermes
102 lines
4.2 KiB
TypeScript
102 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { Settings } from "lucide-react";
|
|
import { useConfig, useHealth } from "@/lib/hooks";
|
|
|
|
export default function ConfigPage() {
|
|
const { data: config, isLoading } = useConfig();
|
|
const { data: health } = useHealth();
|
|
|
|
const online = health?.status === "ok";
|
|
const cfg = config?.config || {};
|
|
const terminal = cfg.terminal as Record<string, unknown> | undefined;
|
|
const memory = cfg.memory as Record<string, unknown> | undefined;
|
|
const display = cfg.display as Record<string, unknown> | undefined;
|
|
const tts = cfg.tts as Record<string, unknown> | undefined;
|
|
const platformToolsets = cfg.platform_toolsets as Record<string, string[]> | undefined;
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>Config</h1>
|
|
<div className="flex items-center gap-1.5">
|
|
<div className="w-2 h-2 rounded-full" style={{ background: online ? "#34c759" : "#ff3b30" }} />
|
|
<span className="text-[12px]" style={{ color: online ? "#34c759" : "#ff3b30" }}>
|
|
{online ? "Online" : "Offline"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="space-y-3">
|
|
{[...Array(4)].map((_, i) => (
|
|
<div key={i} className="card p-4 animate-pulse">
|
|
<div className="h-4 rounded w-1/2 mb-2" style={{ background: "var(--bg-hover)" }} />
|
|
<div className="h-3 rounded w-3/4" style={{ background: "var(--bg-hover)" }} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
<Section label="Model" items={[
|
|
["Model", config?.model || "—"],
|
|
["Provider", config?.provider || "custom"],
|
|
["Base URL", config?.base_url || "—"],
|
|
]} />
|
|
<Section label="Terminal" items={[
|
|
["Backend", String(terminal?.backend || "local")],
|
|
["Timeout", String(terminal?.timeout || 180) + "s"],
|
|
["Persistent shell", String(terminal?.persistent_shell ?? true)],
|
|
]} />
|
|
<Section label="Memory" items={[
|
|
["Enabled", String(memory?.memory_enabled ?? true)],
|
|
["Memory limit", String(memory?.memory_char_limit || 2200) + " chars"],
|
|
["User limit", String(memory?.user_char_limit || 1375) + " chars"],
|
|
]} />
|
|
<Section label="Display" items={[
|
|
["Personality", String(display?.personality || "default")],
|
|
["Streaming", String(display?.streaming ?? true)],
|
|
["Skin", String(display?.skin || "default")],
|
|
...(tts ? [["TTS", String(tts.provider || "—")] as [string, string]] : []),
|
|
]} />
|
|
{platformToolsets && Object.keys(platformToolsets).length > 0 && (
|
|
<div className="card p-4">
|
|
<div className="section-label mb-3">Platform Toolsets</div>
|
|
<div className="space-y-3">
|
|
{Object.entries(platformToolsets).map(([platform, tools]) => (
|
|
<div key={platform}>
|
|
<div className="text-[12px] font-medium mb-1" style={{ color: "var(--text-2)" }}>{platform}</div>
|
|
<div className="flex flex-wrap gap-1">
|
|
{(tools as string[]).map((t) => (
|
|
<span key={t} className="text-[11px] px-2 py-0.5 rounded-md font-mono" style={{ background: "var(--bg-hover)", color: "var(--text-3)" }}>
|
|
{t}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Section({ label, items }: { label: string; items: [string, string][] }) {
|
|
return (
|
|
<div className="card p-4">
|
|
<div className="section-label mb-3">{label}</div>
|
|
<div className="space-y-2">
|
|
{items.map(([k, v]) => (
|
|
<div key={k} className="flex justify-between text-[13px]">
|
|
<span style={{ color: "var(--text-2)" }}>{k}</span>
|
|
<span className="font-mono truncate ml-4 max-w-[60%] text-right" style={{ color: "var(--text-1)" }}>{v}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|