mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-06-10 08:32:09 +00:00
487c398dcf
Removes the global `uppercase` + `font-mondwest` from the App.tsx root
that forced every page to opt-out, replaces stacked-alpha text colors
with semantic tokens for WCAG-AA contrast across all 7 themes, and
applies the new `text-display` utility from @nous-research/ui@0.16.0
on intentional brand chrome (page titles, sidebar headings, segmented
filters) only. Bumps every sub-12px arbitrary text size to text-xs.
Also widens the dashboard plugin routes (/api/dashboard/agent-plugins/
{name:path}/...) so category-namespaced plugins like observability/
langfuse and image_gen/openai can be enable/disabled from the dashboard
— previously the FE encodeURIComponent-ed the slash and the backend
{name} route rejected it. _validate_plugin_name still blocks .. and
backslash, and strips leading/trailing slash.
Touches sessions/env/keys page chrome and adds two new i18n keys
(`overview`, `showMore`/`showLess`) across all 18 locales.
Squashes 19 commits from PR #28832.
Co-authored-by: Hermes <noreply@nousresearch.com>
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { useSyncExternalStore } from "react";
|
|
import { Spinner } from "@nous-research/ui/ui/components/spinner";
|
|
import {
|
|
getPluginComponent,
|
|
getPluginLoadError,
|
|
onPluginRegistered,
|
|
} from "./registry";
|
|
import { useI18n } from "@/i18n";
|
|
import { cn } from "@/lib/utils";
|
|
import type { Translations } from "@/i18n/types";
|
|
|
|
/** Renders a plugin tab once its bundle has called `register()`. */
|
|
export function PluginPage({ name }: { name: string }) {
|
|
const { t } = useI18n();
|
|
// Subscribe in render (via useSyncExternalStore) so we never miss
|
|
// `register()` if the script loads before a useEffect would run.
|
|
const Component = useSyncExternalStore(
|
|
(onChange) => onPluginRegistered(onChange),
|
|
() => getPluginComponent(name) ?? null,
|
|
() => null,
|
|
);
|
|
const loadError = useSyncExternalStore(
|
|
(onChange) => onPluginRegistered(onChange),
|
|
() => getPluginLoadError(name) ?? null,
|
|
() => null,
|
|
);
|
|
|
|
if (Component) {
|
|
return <Component />;
|
|
}
|
|
|
|
if (loadError) {
|
|
const message = formatPluginError(loadError, t);
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"max-w-lg p-4",
|
|
"font-mondwest text-sm tracking-[0.08em] text-text-secondary",
|
|
)}
|
|
role="alert"
|
|
>
|
|
{message}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex items-center gap-2 p-4",
|
|
"font-mondwest text-sm tracking-[0.1em] text-text-tertiary",
|
|
)}
|
|
>
|
|
<Spinner className="shrink-0" />
|
|
<span>{t.common.loading}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function formatPluginError(code: string, t: Translations): string {
|
|
if (code === "LOAD_FAILED") return t.common.pluginLoadFailed;
|
|
if (code === "NO_REGISTER") return t.common.pluginNotRegistered;
|
|
return code;
|
|
}
|