-
-
+
+
-
-
+
+ {locale === "en" ? "EN" : "中文"}
+
);
}
diff --git a/web/src/components/OAuthLoginModal.tsx b/web/src/components/OAuthLoginModal.tsx
index e0e756eca77..66c78139ef3 100644
--- a/web/src/components/OAuthLoginModal.tsx
+++ b/web/src/components/OAuthLoginModal.tsx
@@ -1,5 +1,6 @@
import { useEffect, useRef, useState } from "react";
import { ExternalLink, Copy, X, Check, Loader2 } from "lucide-react";
+import { H2 } from "@nous-research/ui";
import { api, type OAuthProvider, type OAuthStartResponse } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
@@ -12,9 +13,21 @@ interface Props {
onError: (msg: string) => void;
}
-type Phase = "idle" | "starting" | "awaiting_user" | "submitting" | "polling" | "approved" | "error";
+type Phase =
+ | "idle"
+ | "starting"
+ | "awaiting_user"
+ | "submitting"
+ | "polling"
+ | "approved"
+ | "error";
-export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props) {
+export function OAuthLoginModal({
+ provider,
+ onClose,
+ onSuccess,
+ onError,
+}: Props) {
const [phase, setPhase] = useState("starting");
const [start, setStart] = useState(null);
const [pkceCode, setPkceCode] = useState("");
@@ -81,13 +94,15 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
if (!isMounted.current) return;
if (resp.status === "approved") {
setPhase("approved");
- if (pollTimer.current !== null) window.clearInterval(pollTimer.current);
+ if (pollTimer.current !== null)
+ window.clearInterval(pollTimer.current);
onSuccess(`${provider.name} connected`);
window.setTimeout(() => isMounted.current && onClose(), 1500);
} else if (resp.status !== "pending") {
setPhase("error");
setErrorMsg(resp.error_message || `Login ${resp.status}`);
- if (pollTimer.current !== null) window.clearInterval(pollTimer.current);
+ if (pollTimer.current !== null)
+ window.clearInterval(pollTimer.current);
}
} catch (e) {
if (!isMounted.current) return;
@@ -107,7 +122,11 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
setPhase("submitting");
setErrorMsg(null);
try {
- const resp = await api.submitOAuthCode(provider.id, start.session_id, pkceCode.trim());
+ const resp = await api.submitOAuthCode(
+ provider.id,
+ start.session_id,
+ pkceCode.trim(),
+ );
if (!isMounted.current) return;
if (resp.ok && resp.status === "approved") {
setPhase("approved");
@@ -175,14 +194,24 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
).verification_url}
+ href={
+ (
+ start as Extract<
+ OAuthStartResponse,
+ { flow: "device_code" }
+ >
+ ).verification_url
+ }
target="_blank"
rel="noopener noreferrer"
className="text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
@@ -302,21 +361,36 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
setStart(null);
setPkceCode("");
setPhase("starting");
- api.startOAuthLogin(provider.id).then((resp) => {
- if (!isMounted.current) return;
- setStart(resp);
- setSecondsLeft(resp.expires_in);
- setPhase(resp.flow === "device_code" ? "polling" : "awaiting_user");
- if (resp.flow === "pkce") {
- window.open(resp.auth_url, "_blank", "noopener,noreferrer");
- } else {
- window.open(resp.verification_url, "_blank", "noopener,noreferrer");
- }
- }).catch((e) => {
- if (!isMounted.current) return;
- setPhase("error");
- setErrorMsg(`${t.common.retry} failed: ${e}`);
- });
+ api
+ .startOAuthLogin(provider.id)
+ .then((resp) => {
+ if (!isMounted.current) return;
+ setStart(resp);
+ setSecondsLeft(resp.expires_in);
+ setPhase(
+ resp.flow === "device_code"
+ ? "polling"
+ : "awaiting_user",
+ );
+ if (resp.flow === "pkce") {
+ window.open(
+ resp.auth_url,
+ "_blank",
+ "noopener,noreferrer",
+ );
+ } else {
+ window.open(
+ resp.verification_url,
+ "_blank",
+ "noopener,noreferrer",
+ );
+ }
+ })
+ .catch((e) => {
+ if (!isMounted.current) return;
+ setPhase("error");
+ setErrorMsg(`${t.common.retry} failed: ${e}`);
+ });
}}
>
{t.common.retry}
diff --git a/web/src/components/OAuthProvidersCard.tsx b/web/src/components/OAuthProvidersCard.tsx
index a681218ded7..940848787d4 100644
--- a/web/src/components/OAuthProvidersCard.tsx
+++ b/web/src/components/OAuthProvidersCard.tsx
@@ -158,11 +158,11 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
)}
{p.status.logged_in && p.status.token_preview && (
-
-
- Hermes Agent
-
-
+
+
+
-
);
}
+
+interface NavItem {
+ icon: React.ComponentType<{ className?: string }>;
+ label: string;
+ labelKey?: string;
+ path: string;
+}
diff --git a/web/src/components/Backdrop.tsx b/web/src/components/Backdrop.tsx
new file mode 100644
index 00000000000..a48ab0f262d
--- /dev/null
+++ b/web/src/components/Backdrop.tsx
@@ -0,0 +1,77 @@
+import { useGpuTier } from "@nous-research/ui/hooks/use-gpu-tier";
+
+/**
+ * Replicates the visual layer stack of `
+
+
+
+ Hermes
+
+ Agent +
+ |
-
-
-
+
+
+ {t.app.webUi}
+
+ |
+
- + Agent +
-
+
+
+ 
+
+
+
+
+ {gpuTier > 0 && (
+
+ )}
+
+ );
+}
diff --git a/web/src/components/LanguageSwitcher.tsx b/web/src/components/LanguageSwitcher.tsx
index 02f35a9daa8..bf2d300b0c6 100644
--- a/web/src/components/LanguageSwitcher.tsx
+++ b/web/src/components/LanguageSwitcher.tsx
@@ -1,3 +1,4 @@
+import { Typography } from "@nous-research/ui";
import { useI18n } from "@/i18n/context";
/**
@@ -18,10 +19,15 @@ export function LanguageSwitcher() {
aria-label={t.language.switchTo}
>
{/* Show the *current* language's flag — tooltip advertises the click action */}
- {locale === "en" ? "🇬🇧" : "🇨🇳"}
-
- {locale === "en" ? "EN" : "中文"}
+
+ {locale === "en" ? "🇬🇧" : "🇨🇳"}
+
+
-
+
{/* ── starting ───────────────────────────────────── */}
@@ -211,7 +240,10 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
/>
@@ -243,23 +279,46 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
+
{t.oauth.connect} {provider.name}
-
- {secondsLeft !== null && phase !== "approved" && phase !== "error" && (
-
- {t.oauth.sessionExpires.replace("{time}", fmtTime(secondsLeft))} -
- )} + + {secondsLeft !== null && + phase !== "approved" && + phase !== "error" && ( ++ {t.oauth.sessionExpires.replace( + "{time}", + fmtTime(secondsLeft), + )} +
+ )}
- {(start as Extract).user_code}
+ {
+ (
+ start as Extract<
+ OAuthStartResponse,
+ { flow: "device_code" }
+ >
+ ).user_code
+ }
- token{" "}
- {p.status.token_preview}
+
+ token{" "}
+ {p.status.token_preview}
{p.status.source_label && (
-
+
{" "}· {p.status.source_label}
)}
diff --git a/web/src/components/ThemeSwitcher.tsx b/web/src/components/ThemeSwitcher.tsx
index 03801bebf59..b3475bf4600 100644
--- a/web/src/components/ThemeSwitcher.tsx
+++ b/web/src/components/ThemeSwitcher.tsx
@@ -1,53 +1,58 @@
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
import { Palette, Check } from "lucide-react";
-import { useTheme } from "@/themes";
+import { Typography } from "@nous-research/ui";
+import { BUILTIN_THEMES, useTheme } from "@/themes";
import { useI18n } from "@/i18n";
import { cn } from "@/lib/utils";
/**
- * Compact theme picker for the dashboard header.
- * Shows a palette icon + current theme name; opens a dropdown of all
- * available themes with color swatches for instant preview.
+ * Compact theme picker mounted next to the language switcher in the header.
+ * Each dropdown row shows a 3-stop swatch (background / midground / warm
+ * glow) so users can preview the palette before committing. User-defined
+ * themes from `~/.hermes/dashboard-themes/*.yaml` that aren't in
+ * `BUILTIN_THEMES` render without swatches and apply the default palette.
*/
export function ThemeSwitcher() {
const { themeName, availableThemes, setTheme } = useTheme();
const { t } = useI18n();
const [open, setOpen] = useState(false);
- const ref = useRef(null);
+ const wrapperRef = useRef(null);
const close = useCallback(() => setOpen(false), []);
- // Close on outside click.
useEffect(() => {
if (!open) return;
- const handler = (e: MouseEvent) => {
- if (ref.current && !ref.current.contains(e.target as Node)) close();
+ const onMouseDown = (e: MouseEvent) => {
+ if (
+ wrapperRef.current &&
+ !wrapperRef.current.contains(e.target as Node)
+ ) {
+ close();
+ }
};
- document.addEventListener("mousedown", handler);
- return () => document.removeEventListener("mousedown", handler);
- }, [open, close]);
-
- // Close on Escape.
- useEffect(() => {
- if (!open) return;
- const handler = (e: KeyboardEvent) => {
+ const onKey = (e: KeyboardEvent) => {
if (e.key === "Escape") close();
};
- document.addEventListener("keydown", handler);
- return () => document.removeEventListener("keydown", handler);
+ document.addEventListener("mousedown", onMouseDown);
+ document.addEventListener("keydown", onKey);
+ return () => {
+ document.removeEventListener("mousedown", onMouseDown);
+ document.removeEventListener("keydown", onKey);
+ };
}, [open, close]);
- const current = availableThemes.find((t) => t.name === themeName);
+ const current = availableThemes.find((th) => th.name === themeName);
+ const label = current?.label ?? themeName;
return (
-
+
{open && (
-
-
+
+
{t.theme?.title ?? "Theme"}
-
+
- {availableThemes.map((theme) => {
- const isActive = theme.name === themeName;
+ {availableThemes.map((th) => {
+ const isActive = th.name === themeName;
+ const preset = BUILTIN_THEMES[th.name];
+
return (
);
})}
@@ -113,3 +141,28 @@ export function ThemeSwitcher() {
);
}
+
+function ThemeSwatch({ theme }: { theme: string }) {
+ const preset = BUILTIN_THEMES[theme];
+ if (!preset) return ) {
- return ;
+ return ;
}
export function CardContent({ className, ...props }: React.HTMLAttributes) {
diff --git a/web/src/components/ui/label.tsx b/web/src/components/ui/label.tsx
index a18b2e5d43a..a5807e4bd4f 100644
--- a/web/src/components/ui/label.tsx
+++ b/web/src/components/ui/label.tsx
@@ -4,7 +4,7 @@ export function Label({ className, ...props }: React.LabelHTMLAttributes("/api/dashboard/plugins"),
+ rescanPlugins: () =>
+ fetchJSON<{ ok: boolean; count: number }>("/api/dashboard/plugins/rescan"),
+
// Dashboard themes
getThemes: () =>
- fetchJSON("/api/dashboard/themes"),
+ fetchJSON("/api/dashboard/themes"),
setTheme: (name: string) =>
fetchJSON<{ ok: boolean; theme: string }>("/api/dashboard/theme", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name }),
}),
-
- // Dashboard plugins
- getPlugins: () =>
- fetchJSON("/api/dashboard/plugins"),
- rescanPlugins: () =>
- fetchJSON<{ ok: boolean; count: number }>("/api/dashboard/plugins/rescan"),
};
export interface PlatformStatus {
@@ -435,9 +435,15 @@ export interface OAuthPollResponse {
// ── Dashboard theme types ──────────────────────────────────────────────
-export interface ThemeListResponse {
- themes: Array<{ name: string; label: string; description: string }>;
+export interface DashboardThemeSummary {
+ description: string;
+ label: string;
+ name: string;
+}
+
+export interface DashboardThemesResponse {
active: string;
+ themes: DashboardThemeSummary[];
}
// ── Dashboard plugin types ─────────────────────────────────────────────
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 076d746d22d..909e26d2ea6 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -3,8 +3,8 @@ import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import { I18nProvider } from "./i18n";
-import { ThemeProvider } from "./themes";
import { exposePluginSDK } from "./plugins";
+import { ThemeProvider } from "./themes";
// Expose the plugin SDK before rendering so plugins loaded via