mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-04-25 00:51:20 +00:00
feat: add internationalization (i18n) to web dashboard — English + Chinese (#9453)
Add a lightweight i18n system to the web dashboard with English (default) and Chinese language support. A language switcher with flag icons is placed in the header bar, allowing users to toggle between languages. The choice persists to localStorage. Implementation: - src/i18n/ — types, translation files (en.ts, zh.ts), React context + hook - LanguageSwitcher component shows the *other* language's flag as the toggle - I18nProvider wraps the app in main.tsx - All 8 pages + OAuth components updated to use t() translation calls - Zero new dependencies — pure React context + localStorage
This commit is contained in:
Teknium
GitHub
parent
19199cd38d
commit
a2ea237db2
19 changed files with 1715 additions and 977 deletions
13
web/package-lock.json
generated
13
web/package-lock.json
generated
|
|
@ -64,7 +64,6 @@
|
|||
"integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.29.0",
|
||||
"@babel/generator": "^7.29.0",
|
||||
|
|
@ -1639,7 +1638,6 @@
|
|||
"integrity": "sha512-GYDxsZi3ChgmckRT9HPU0WEhKLP08ev/Yfcq2AstjrDASOYCSXeyjDsHg4v5t4jOj7cyDX3vmprafKlWIG9MXQ==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~7.16.0"
|
||||
}
|
||||
|
|
@ -1650,7 +1648,6 @@
|
|||
"integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.2.2"
|
||||
}
|
||||
|
|
@ -1710,7 +1707,6 @@
|
|||
"integrity": "sha512-XZzOmihLIr8AD1b9hL9ccNMzEMWt/dE2u7NyTY9jJG6YNiNthaD5XtUHVF2uCXZ15ng+z2hT3MVuxnUYhq6k1g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "8.57.0",
|
||||
"@typescript-eslint/types": "8.57.0",
|
||||
|
|
@ -1988,7 +1984,6 @@
|
|||
"integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
|
|
@ -2097,7 +2092,6 @@
|
|||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.9.0",
|
||||
"caniuse-lite": "^1.0.30001759",
|
||||
|
|
@ -2374,7 +2368,6 @@
|
|||
"integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.8.0",
|
||||
"@eslint-community/regexpp": "^4.12.1",
|
||||
|
|
@ -3338,7 +3331,6 @@
|
|||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
|
|
@ -3399,7 +3391,6 @@
|
|||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
|
||||
"integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -3409,7 +3400,6 @@
|
|||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
|
||||
"integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.27.0"
|
||||
},
|
||||
|
|
@ -3676,7 +3666,6 @@
|
|||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
|
|
@ -3762,7 +3751,6 @@
|
|||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
|
||||
"integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.27.0",
|
||||
"fdir": "^6.5.0",
|
||||
|
|
@ -3884,7 +3872,6 @@
|
|||
"integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/colinhacks"
|
||||
}
|
||||
|
|
|
|||
127
web/src/App.tsx
127
web/src/App.tsx
|
|
@ -1,4 +1,4 @@
|
|||
import { Routes, Route, NavLink, Navigate } from "react-router-dom";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Activity, BarChart3, Clock, FileText, KeyRound, MessageSquare, Package, Settings } from "lucide-react";
|
||||
import StatusPage from "@/pages/StatusPage";
|
||||
import ConfigPage from "@/pages/ConfigPage";
|
||||
|
|
@ -8,89 +8,118 @@ import LogsPage from "@/pages/LogsPage";
|
|||
import AnalyticsPage from "@/pages/AnalyticsPage";
|
||||
import CronPage from "@/pages/CronPage";
|
||||
import SkillsPage from "@/pages/SkillsPage";
|
||||
import { LanguageSwitcher } from "@/components/LanguageSwitcher";
|
||||
import { useI18n } from "@/i18n";
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ path: "/", label: "Status", icon: Activity },
|
||||
{ path: "/sessions", label: "Sessions", icon: MessageSquare },
|
||||
{ path: "/analytics", label: "Analytics", icon: BarChart3 },
|
||||
{ path: "/logs", label: "Logs", icon: FileText },
|
||||
{ path: "/cron", label: "Cron", icon: Clock },
|
||||
{ path: "/skills", label: "Skills", icon: Package },
|
||||
{ path: "/config", label: "Config", icon: Settings },
|
||||
{ path: "/env", label: "Keys", icon: KeyRound },
|
||||
{ id: "status", labelKey: "status" as const, icon: Activity },
|
||||
{ id: "sessions", labelKey: "sessions" as const, icon: MessageSquare },
|
||||
{ id: "analytics", labelKey: "analytics" as const, icon: BarChart3 },
|
||||
{ id: "logs", labelKey: "logs" as const, icon: FileText },
|
||||
{ id: "cron", labelKey: "cron" as const, icon: Clock },
|
||||
{ id: "skills", labelKey: "skills" as const, icon: Package },
|
||||
{ id: "config", labelKey: "config" as const, icon: Settings },
|
||||
{ id: "env", labelKey: "keys" as const, icon: KeyRound },
|
||||
] as const;
|
||||
|
||||
type PageId = (typeof NAV_ITEMS)[number]["id"];
|
||||
|
||||
const PAGE_COMPONENTS: Record<PageId, React.FC> = {
|
||||
status: StatusPage,
|
||||
sessions: SessionsPage,
|
||||
analytics: AnalyticsPage,
|
||||
logs: LogsPage,
|
||||
cron: CronPage,
|
||||
skills: SkillsPage,
|
||||
config: ConfigPage,
|
||||
env: EnvPage,
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
const [page, setPage] = useState<PageId>("status");
|
||||
const [animKey, setAnimKey] = useState(0);
|
||||
const initialRef = useRef(true);
|
||||
const { t } = useI18n();
|
||||
|
||||
useEffect(() => {
|
||||
// Skip the animation key bump on initial mount to avoid re-mounting
|
||||
// the default page component (which causes duplicate API requests).
|
||||
if (initialRef.current) {
|
||||
initialRef.current = false;
|
||||
return;
|
||||
}
|
||||
setAnimKey((k) => k + 1);
|
||||
}, [page]);
|
||||
|
||||
const PageComponent = PAGE_COMPONENTS[page];
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-background text-foreground overflow-x-hidden">
|
||||
{/* Global grain + warm glow (matches landing page) */}
|
||||
<div className="noise-overlay" />
|
||||
<div className="warm-glow" />
|
||||
|
||||
<header className="fixed top-0 left-0 right-0 z-40 border-b border-border bg-background/90 backdrop-blur-sm">
|
||||
{/* ---- Header with grid-border nav ---- */}
|
||||
<header className="sticky top-0 z-40 border-b border-border bg-background/90 backdrop-blur-sm">
|
||||
<div className="mx-auto flex h-12 max-w-[1400px] items-stretch">
|
||||
{/* Brand — abbreviated on mobile */}
|
||||
<div className="flex items-center border-r border-border px-3 sm:px-5 shrink-0">
|
||||
<span className="font-collapse text-lg sm:text-xl font-bold tracking-wider uppercase blend-lighter">
|
||||
H<span className="hidden sm:inline">ermes </span>A<span className="hidden sm:inline">gent</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Nav — icons only on mobile, icon+label on sm+ */}
|
||||
<nav className="flex items-stretch overflow-x-auto scrollbar-none">
|
||||
{NAV_ITEMS.map(({ path, label, icon: Icon }) => (
|
||||
<NavLink
|
||||
key={path}
|
||||
to={path}
|
||||
end={path === "/"}
|
||||
className={({ isActive }) =>
|
||||
`group relative inline-flex items-center gap-1 sm:gap-1.5 border-r border-border px-2.5 sm:px-4 py-2 font-display text-[0.65rem] sm:text-[0.8rem] tracking-[0.12em] uppercase whitespace-nowrap transition-colors cursor-pointer shrink-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
|
||||
isActive
|
||||
? "text-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
}`
|
||||
}
|
||||
{NAV_ITEMS.map(({ id, labelKey, icon: Icon }) => (
|
||||
<button
|
||||
key={id}
|
||||
type="button"
|
||||
onClick={() => setPage(id)}
|
||||
className={`group relative inline-flex items-center gap-1 sm:gap-1.5 border-r border-border px-2.5 sm:px-4 py-2 font-display text-[0.65rem] sm:text-[0.8rem] tracking-[0.12em] uppercase whitespace-nowrap transition-colors cursor-pointer shrink-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
|
||||
page === id
|
||||
? "text-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<Icon className="h-4 w-4 sm:h-3.5 sm:w-3.5 shrink-0" />
|
||||
<span className="hidden sm:inline">{label}</span>
|
||||
<span className="absolute inset-0 bg-foreground pointer-events-none transition-opacity duration-150 group-hover:opacity-5 opacity-0" />
|
||||
{isActive && (
|
||||
<span className="absolute bottom-0 left-0 right-0 h-px bg-foreground" />
|
||||
)}
|
||||
</>
|
||||
<Icon className="h-4 w-4 sm:h-3.5 sm:w-3.5 shrink-0" />
|
||||
<span className="hidden sm:inline">{t.app.nav[labelKey]}</span>
|
||||
{/* Hover highlight */}
|
||||
<span className="absolute inset-0 bg-foreground pointer-events-none transition-opacity duration-150 group-hover:opacity-5 opacity-0" />
|
||||
{/* Active indicator */}
|
||||
{page === id && (
|
||||
<span className="absolute bottom-0 left-0 right-0 h-px bg-foreground" />
|
||||
)}
|
||||
</NavLink>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="ml-auto hidden sm:flex items-center px-4 text-muted-foreground">
|
||||
<span className="font-display text-[0.7rem] tracking-[0.15em] uppercase opacity-50">
|
||||
Web UI
|
||||
{/* Right side: language switcher + version badge */}
|
||||
<div className="ml-auto flex items-center gap-2 px-2 sm:px-4">
|
||||
<LanguageSwitcher />
|
||||
<span className="hidden sm:inline font-display text-[0.7rem] tracking-[0.15em] uppercase opacity-50">
|
||||
{t.app.webUi}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="relative z-2 mx-auto w-full max-w-[1400px] flex-1 px-3 sm:px-6 pt-16 sm:pt-20 pb-4 sm:pb-8">
|
||||
<Routes>
|
||||
<Route path="/" element={<StatusPage />} />
|
||||
<Route path="/sessions" element={<SessionsPage />} />
|
||||
<Route path="/analytics" element={<AnalyticsPage />} />
|
||||
<Route path="/logs" element={<LogsPage />} />
|
||||
<Route path="/cron" element={<CronPage />} />
|
||||
<Route path="/skills" element={<SkillsPage />} />
|
||||
<Route path="/config" element={<ConfigPage />} />
|
||||
<Route path="/env" element={<EnvPage />} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
<main
|
||||
key={animKey}
|
||||
className="relative z-2 mx-auto w-full max-w-[1400px] flex-1 px-3 sm:px-6 py-4 sm:py-8"
|
||||
style={{ animation: "fade-in 150ms ease-out" }}
|
||||
>
|
||||
<PageComponent />
|
||||
</main>
|
||||
|
||||
{/* ---- Footer ---- */}
|
||||
<footer className="relative z-2 border-t border-border">
|
||||
<div className="mx-auto flex max-w-[1400px] items-center justify-between px-3 sm:px-6 py-3">
|
||||
<span className="font-display text-[0.7rem] sm:text-[0.8rem] tracking-[0.12em] uppercase opacity-50">
|
||||
Hermes Agent
|
||||
{t.app.footer.name}
|
||||
</span>
|
||||
<span className="font-display text-[0.6rem] sm:text-[0.7rem] tracking-[0.15em] uppercase text-foreground/40">
|
||||
Nous Research
|
||||
{t.app.footer.org}
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
27
web/src/components/LanguageSwitcher.tsx
Normal file
27
web/src/components/LanguageSwitcher.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { useI18n } from "@/i18n/context";
|
||||
|
||||
/**
|
||||
* Compact language toggle — shows a clickable flag that switches between
|
||||
* English and Chinese. Persists choice to localStorage.
|
||||
*/
|
||||
export function LanguageSwitcher() {
|
||||
const { locale, setLocale, t } = useI18n();
|
||||
|
||||
const toggle = () => setLocale(locale === "en" ? "zh" : "en");
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggle}
|
||||
className="group relative inline-flex items-center gap-1.5 px-2 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring rounded"
|
||||
title={t.language.switchTo}
|
||||
aria-label={t.language.switchTo}
|
||||
>
|
||||
{/* Show the *other* language's flag as the clickable target */}
|
||||
<span className="text-base leading-none">{locale === "en" ? "🇨🇳" : "🇬🇧"}</span>
|
||||
<span className="hidden sm:inline font-display tracking-wide uppercase text-[0.65rem]">
|
||||
{locale === "en" ? "中文" : "EN"}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,29 +3,7 @@ import { ExternalLink, Copy, X, Check, Loader2 } from "lucide-react";
|
|||
import { api, type OAuthProvider, type OAuthStartResponse } from "@/lib/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
/**
|
||||
* OAuthLoginModal — drives the in-browser OAuth flow for a single provider.
|
||||
*
|
||||
* Two variants share the same modal shell:
|
||||
*
|
||||
* - PKCE (Anthropic): user opens the auth URL in a new tab, authorizes,
|
||||
* pastes the resulting code back. We POST it to /submit which exchanges
|
||||
* the (code + verifier) pair for tokens server-side.
|
||||
*
|
||||
* - Device code (Nous, OpenAI Codex): we display the verification URL
|
||||
* and short user code; the backend polls the provider's token endpoint
|
||||
* in a background thread; we poll /poll/{session_id} every 2s for status.
|
||||
*
|
||||
* Edge cases handled:
|
||||
* - Popup blocker (we use plain anchor href + open in new tab; no popup
|
||||
* window.open which is more likely to be blocked).
|
||||
* - Modal dismissal mid-flight cancels the server-side session via DELETE.
|
||||
* - Code expiry surfaces as a clear error state with retry button.
|
||||
* - Polling continues to work if the user backgrounds the tab (setInterval
|
||||
* keeps firing in modern browsers; we guard against polls firing after
|
||||
* component unmount via an isMounted ref).
|
||||
*/
|
||||
import { useI18n } from "@/i18n";
|
||||
|
||||
interface Props {
|
||||
provider: OAuthProvider;
|
||||
|
|
@ -45,6 +23,7 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
const [codeCopied, setCodeCopied] = useState(false);
|
||||
const isMounted = useRef(true);
|
||||
const pollTimer = useRef<number | null>(null);
|
||||
const { t } = useI18n();
|
||||
|
||||
// Initiate flow on mount
|
||||
useEffect(() => {
|
||||
|
|
@ -57,10 +36,8 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
setSecondsLeft(resp.expires_in);
|
||||
setPhase(resp.flow === "device_code" ? "polling" : "awaiting_user");
|
||||
if (resp.flow === "pkce") {
|
||||
// Auto-open the auth URL in a new tab
|
||||
window.open(resp.auth_url, "_blank", "noopener,noreferrer");
|
||||
} else {
|
||||
// Device-code: open the verification URL automatically
|
||||
window.open(resp.verification_url, "_blank", "noopener,noreferrer");
|
||||
}
|
||||
})
|
||||
|
|
@ -73,7 +50,6 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
isMounted.current = false;
|
||||
if (pollTimer.current !== null) window.clearInterval(pollTimer.current);
|
||||
};
|
||||
// We only want to start the flow once on mount.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
|
|
@ -85,16 +61,15 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
if (!isMounted.current) return;
|
||||
setSecondsLeft((s) => {
|
||||
if (s !== null && s <= 1) {
|
||||
// Session expired — transition to error state
|
||||
setPhase("error");
|
||||
setErrorMsg("Session expired. Click Retry to start a new login.");
|
||||
setErrorMsg(t.oauth.sessionExpired);
|
||||
return 0;
|
||||
}
|
||||
return s !== null && s > 0 ? s - 1 : 0;
|
||||
});
|
||||
}, 1000);
|
||||
return () => window.clearInterval(tick);
|
||||
}, [secondsLeft, phase]);
|
||||
}, [secondsLeft, phase, t]);
|
||||
|
||||
// Device-code: poll backend every 2s
|
||||
useEffect(() => {
|
||||
|
|
@ -115,7 +90,6 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
if (pollTimer.current !== null) window.clearInterval(pollTimer.current);
|
||||
}
|
||||
} catch (e) {
|
||||
// 404 = session expired/cleaned up; treat as error
|
||||
if (!isMounted.current) return;
|
||||
setPhase("error");
|
||||
setErrorMsg(`Polling failed: ${e}`);
|
||||
|
|
@ -151,12 +125,11 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
};
|
||||
|
||||
const handleClose = async () => {
|
||||
// Cancel server session if still in flight
|
||||
if (start && phase !== "approved" && phase !== "error") {
|
||||
try {
|
||||
await api.cancelOAuthSession(start.session_id);
|
||||
} catch {
|
||||
// ignore — server-side TTL will clean it up anyway
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
onClose();
|
||||
|
|
@ -172,7 +145,6 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
}
|
||||
};
|
||||
|
||||
// Backdrop click closes
|
||||
const handleBackdrop = (e: React.MouseEvent) => {
|
||||
if (e.target === e.currentTarget) handleClose();
|
||||
};
|
||||
|
|
@ -197,18 +169,18 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
type="button"
|
||||
onClick={handleClose}
|
||||
className="absolute right-3 top-3 text-muted-foreground hover:text-foreground transition-colors"
|
||||
aria-label="Close"
|
||||
aria-label={t.common.close}
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
<div className="p-6 flex flex-col gap-4">
|
||||
<div>
|
||||
<h2 id="oauth-modal-title" className="font-display text-base tracking-wider uppercase">
|
||||
Connect {provider.name}
|
||||
{t.oauth.connect} {provider.name}
|
||||
</h2>
|
||||
{secondsLeft !== null && phase !== "approved" && phase !== "error" && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Session expires in {fmtTime(secondsLeft)}
|
||||
{t.oauth.sessionExpires.replace("{time}", fmtTime(secondsLeft))}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -217,7 +189,7 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
{phase === "starting" && (
|
||||
<div className="flex items-center gap-3 py-6 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Initiating login flow…
|
||||
{t.oauth.initiatingLogin}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -225,18 +197,15 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
{start?.flow === "pkce" && phase === "awaiting_user" && (
|
||||
<>
|
||||
<ol className="text-sm space-y-2 list-decimal list-inside text-muted-foreground">
|
||||
<li>
|
||||
A new tab opened to <code className="text-foreground">claude.ai</code>. Sign in
|
||||
and click <strong className="text-foreground">Authorize</strong>.
|
||||
</li>
|
||||
<li>Copy the <strong className="text-foreground">authorization code</strong> shown after authorizing.</li>
|
||||
<li>Paste it below and submit.</li>
|
||||
<li>{t.oauth.pkceStep1}</li>
|
||||
<li>{t.oauth.pkceStep2}</li>
|
||||
<li>{t.oauth.pkceStep3}</li>
|
||||
</ol>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Input
|
||||
value={pkceCode}
|
||||
onChange={(e) => setPkceCode(e.target.value)}
|
||||
placeholder="Paste authorization code (with #state suffix is fine)"
|
||||
placeholder={t.oauth.pasteCode}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleSubmitPkceCode()}
|
||||
autoFocus
|
||||
/>
|
||||
|
|
@ -248,10 +217,10 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
className="text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
|
||||
>
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
Re-open auth page
|
||||
{t.oauth.reOpenAuth}
|
||||
</a>
|
||||
<Button onClick={handleSubmitPkceCode} disabled={!pkceCode.trim()} size="sm">
|
||||
Submit code
|
||||
{t.oauth.submitCode}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -262,7 +231,7 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
{phase === "submitting" && (
|
||||
<div className="flex items-center gap-3 py-6 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Exchanging code for tokens…
|
||||
{t.oauth.exchangingCode}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -270,7 +239,7 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
{start?.flow === "device_code" && phase === "polling" && (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
A new tab opened. Enter this code if prompted:
|
||||
{t.oauth.enterCodePrompt}
|
||||
</p>
|
||||
<div className="flex items-center justify-between gap-2 border border-border bg-secondary/30 p-4">
|
||||
<code className="font-mono-ui text-2xl tracking-widest text-foreground">
|
||||
|
|
@ -296,11 +265,11 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
className="text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
|
||||
>
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
Re-open verification page
|
||||
{t.oauth.reOpenVerification}
|
||||
</a>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground border-t border-border pt-3">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
Waiting for you to authorize in the browser…
|
||||
{t.oauth.waitingAuth}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -309,7 +278,7 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
{phase === "approved" && (
|
||||
<div className="flex items-center gap-3 py-6 text-sm text-success">
|
||||
<Check className="h-5 w-5" />
|
||||
Connected! Closing…
|
||||
{t.oauth.connectedClosing}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -317,16 +286,15 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
{phase === "error" && (
|
||||
<>
|
||||
<div className="border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{errorMsg || "Login failed."}
|
||||
{errorMsg || t.oauth.loginFailed}
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleClose}>
|
||||
Close
|
||||
{t.common.close}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
// Cancel the old session before starting a new one
|
||||
if (start?.session_id) {
|
||||
api.cancelOAuthSession(start.session_id).catch(() => {});
|
||||
}
|
||||
|
|
@ -334,8 +302,6 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
setStart(null);
|
||||
setPkceCode("");
|
||||
setPhase("starting");
|
||||
// Re-trigger the start effect by remounting (caller should re-key us)
|
||||
// Simpler: just kick off a new start manually
|
||||
api.startOAuthLogin(provider.id).then((resp) => {
|
||||
if (!isMounted.current) return;
|
||||
setStart(resp);
|
||||
|
|
@ -349,11 +315,11 @@ export function OAuthLoginModal({ provider, onClose, onSuccess, onError }: Props
|
|||
}).catch((e) => {
|
||||
if (!isMounted.current) return;
|
||||
setPhase("error");
|
||||
setErrorMsg(`Retry failed: ${e}`);
|
||||
setErrorMsg(`${t.common.retry} failed: ${e}`);
|
||||
});
|
||||
}}
|
||||
>
|
||||
Retry
|
||||
{t.common.retry}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -5,29 +5,14 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { OAuthLoginModal } from "@/components/OAuthLoginModal";
|
||||
|
||||
/**
|
||||
* OAuthProvidersCard — surfaces every OAuth-capable LLM provider with its
|
||||
* current connection status, a truncated token preview when connected, and
|
||||
* action buttons (Copy CLI command for setup, Disconnect for cleanup).
|
||||
*
|
||||
* Phase 1 scope: read-only status + disconnect + copy-to-clipboard CLI
|
||||
* command. Phase 2 will add in-browser PKCE / device-code flows so users
|
||||
* never need to drop to a terminal.
|
||||
*/
|
||||
import { useI18n } from "@/i18n";
|
||||
|
||||
interface Props {
|
||||
onError?: (msg: string) => void;
|
||||
onSuccess?: (msg: string) => void;
|
||||
}
|
||||
|
||||
const FLOW_LABELS: Record<OAuthProvider["flow"], string> = {
|
||||
pkce: "Browser login (PKCE)",
|
||||
device_code: "Device code",
|
||||
external: "External CLI",
|
||||
};
|
||||
|
||||
function formatExpiresAt(expiresAt: string | null | undefined): string | null {
|
||||
function formatExpiresAt(expiresAt: string | null | undefined, expiresInTemplate: string): string | null {
|
||||
if (!expiresAt) return null;
|
||||
try {
|
||||
const dt = new Date(expiresAt);
|
||||
|
|
@ -36,11 +21,11 @@ function formatExpiresAt(expiresAt: string | null | undefined): string | null {
|
|||
const diff = dt.getTime() - now;
|
||||
if (diff < 0) return "expired";
|
||||
const mins = Math.floor(diff / 60_000);
|
||||
if (mins < 60) return `expires in ${mins}m`;
|
||||
if (mins < 60) return expiresInTemplate.replace("{time}", `${mins}m`);
|
||||
const hours = Math.floor(mins / 60);
|
||||
if (hours < 24) return `expires in ${hours}h`;
|
||||
if (hours < 24) return expiresInTemplate.replace("{time}", `${hours}h`);
|
||||
const days = Math.floor(hours / 24);
|
||||
return `expires in ${days}d`;
|
||||
return expiresInTemplate.replace("{time}", `${days}d`);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -51,10 +36,9 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
|
|||
const [loading, setLoading] = useState(true);
|
||||
const [busyId, setBusyId] = useState<string | null>(null);
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null);
|
||||
// Provider that the login modal is currently open for. null = modal closed.
|
||||
const [loginFor, setLoginFor] = useState<OAuthProvider | null>(null);
|
||||
const { t } = useI18n();
|
||||
|
||||
// Use refs for callbacks to avoid re-creating refresh() when parent re-renders
|
||||
const onErrorRef = useRef(onError);
|
||||
onErrorRef.current = onError;
|
||||
|
||||
|
|
@ -83,16 +67,16 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
|
|||
};
|
||||
|
||||
const handleDisconnect = async (provider: OAuthProvider) => {
|
||||
if (!confirm(`Disconnect ${provider.name}? You'll need to log in again to use this provider.`)) {
|
||||
if (!confirm(`${t.oauth.disconnect} ${provider.name}?`)) {
|
||||
return;
|
||||
}
|
||||
setBusyId(provider.id);
|
||||
try {
|
||||
await api.disconnectOAuthProvider(provider.id);
|
||||
onSuccess?.(`${provider.name} disconnected`);
|
||||
onSuccess?.(`${provider.name} ${t.oauth.disconnect.toLowerCase()}ed`);
|
||||
refresh();
|
||||
} catch (e) {
|
||||
onError?.(`Disconnect failed: ${e}`);
|
||||
onError?.(`${t.oauth.disconnect} failed: ${e}`);
|
||||
} finally {
|
||||
setBusyId(null);
|
||||
}
|
||||
|
|
@ -107,7 +91,7 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
|
|||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<ShieldCheck className="h-5 w-5 text-muted-foreground" />
|
||||
<CardTitle className="text-base">Provider Logins (OAuth)</CardTitle>
|
||||
<CardTitle className="text-base">{t.oauth.providerLogins}</CardTitle>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
|
@ -117,12 +101,11 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
|
|||
className="text-xs"
|
||||
>
|
||||
<RefreshCw className={`h-3 w-3 mr-1 ${loading ? "animate-spin" : ""}`} />
|
||||
Refresh
|
||||
{t.common.refresh}
|
||||
</Button>
|
||||
</div>
|
||||
<CardDescription>
|
||||
{connectedCount} of {totalCount} OAuth providers connected. Login flows currently
|
||||
run via the CLI; click <em>Copy command</em> and paste into a terminal to set up.
|
||||
{t.oauth.description.replace("{connected}", String(connectedCount)).replace("{total}", String(totalCount))}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
|
@ -133,12 +116,12 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
|
|||
)}
|
||||
{providers && providers.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground text-center py-8">
|
||||
No OAuth-capable providers detected.
|
||||
{t.oauth.noProviders}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex flex-col divide-y divide-border">
|
||||
{providers?.map((p) => {
|
||||
const expiresLabel = formatExpiresAt(p.status.expires_at);
|
||||
const expiresLabel = formatExpiresAt(p.status.expires_at, t.oauth.expiresIn);
|
||||
const isBusy = busyId === p.id;
|
||||
return (
|
||||
<div
|
||||
|
|
@ -156,16 +139,16 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
|
|||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-medium text-sm">{p.name}</span>
|
||||
<Badge variant="outline" className="text-[11px] uppercase tracking-wide">
|
||||
{FLOW_LABELS[p.flow]}
|
||||
{t.oauth.flowLabels[p.flow]}
|
||||
</Badge>
|
||||
{p.status.logged_in && (
|
||||
<Badge variant="success" className="text-[11px]">
|
||||
Connected
|
||||
{t.oauth.connected}
|
||||
</Badge>
|
||||
)}
|
||||
{expiresLabel === "expired" && (
|
||||
<Badge variant="destructive" className="text-[11px]">
|
||||
Expired
|
||||
{t.oauth.expired}
|
||||
</Badge>
|
||||
)}
|
||||
{expiresLabel && expiresLabel !== "expired" && (
|
||||
|
|
@ -187,11 +170,11 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
|
|||
)}
|
||||
{!p.status.logged_in && (
|
||||
<span className="text-xs text-muted-foreground/80">
|
||||
Not connected. Run{" "}
|
||||
<code className="text-foreground bg-secondary/40 px-1">
|
||||
{t.oauth.notConnected.split("{command}")[0]}
|
||||
<code className="text-foreground bg-secondary/40 px-1 rounded">
|
||||
{p.cli_command}
|
||||
</code>{" "}
|
||||
in a terminal.
|
||||
</code>
|
||||
{t.oauth.notConnected.split("{command}")[1]}
|
||||
</span>
|
||||
)}
|
||||
{p.status.error && (
|
||||
|
|
@ -222,10 +205,9 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
|
|||
size="sm"
|
||||
onClick={() => setLoginFor(p)}
|
||||
className="text-xs h-7"
|
||||
title={`Start ${p.flow === "pkce" ? "browser" : "device code"} login`}
|
||||
>
|
||||
<LogIn className="h-3 w-3 mr-1" />
|
||||
Login
|
||||
{t.oauth.login}
|
||||
</Button>
|
||||
)}
|
||||
{!p.status.logged_in && (
|
||||
|
|
@ -234,14 +216,14 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
|
|||
size="sm"
|
||||
onClick={() => handleCopy(p)}
|
||||
className="text-xs h-7"
|
||||
title="Copy CLI command (for external / fallback)"
|
||||
title={t.oauth.copyCliCommand}
|
||||
>
|
||||
{copiedId === p.id ? (
|
||||
<>Copied ✓</>
|
||||
<>{t.oauth.copied}</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-3 w-3 mr-1" />
|
||||
CLI
|
||||
{t.oauth.cli}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
|
@ -259,13 +241,13 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
|
|||
) : (
|
||||
<LogOut className="h-3 w-3 mr-1" />
|
||||
)}
|
||||
Disconnect
|
||||
{t.oauth.disconnect}
|
||||
</Button>
|
||||
)}
|
||||
{p.status.logged_in && p.flow === "external" && (
|
||||
<span className="text-[11px] text-muted-foreground italic px-2">
|
||||
<Terminal className="h-3 w-3 inline mr-0.5" />
|
||||
Managed externally
|
||||
{t.oauth.managedExternally}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -279,7 +261,7 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
|
|||
provider={loginFor}
|
||||
onClose={() => {
|
||||
setLoginFor(null);
|
||||
refresh(); // always refresh on close so token preview updates after login
|
||||
refresh();
|
||||
}}
|
||||
onSuccess={(msg) => onSuccess?.(msg)}
|
||||
onError={(msg) => onError?.(msg)}
|
||||
|
|
|
|||
58
web/src/i18n/context.tsx
Normal file
58
web/src/i18n/context.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
|
||||
import type { Locale, Translations } from "./types";
|
||||
import { en } from "./en";
|
||||
import { zh } from "./zh";
|
||||
|
||||
const TRANSLATIONS: Record<Locale, Translations> = { en, zh };
|
||||
const STORAGE_KEY = "hermes-locale";
|
||||
|
||||
function getInitialLocale(): Locale {
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (stored === "en" || stored === "zh") return stored;
|
||||
} catch {
|
||||
// SSR or privacy mode
|
||||
}
|
||||
return "en";
|
||||
}
|
||||
|
||||
interface I18nContextValue {
|
||||
locale: Locale;
|
||||
setLocale: (l: Locale) => void;
|
||||
t: Translations;
|
||||
}
|
||||
|
||||
const I18nContext = createContext<I18nContextValue>({
|
||||
locale: "en",
|
||||
setLocale: () => {},
|
||||
t: en,
|
||||
});
|
||||
|
||||
export function I18nProvider({ children }: { children: ReactNode }) {
|
||||
const [locale, setLocaleState] = useState<Locale>(getInitialLocale);
|
||||
|
||||
const setLocale = useCallback((l: Locale) => {
|
||||
setLocaleState(l);
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, l);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, []);
|
||||
|
||||
const value: I18nContextValue = {
|
||||
locale,
|
||||
setLocale,
|
||||
t: TRANSLATIONS[locale],
|
||||
};
|
||||
|
||||
return (
|
||||
<I18nContext.Provider value={value}>
|
||||
{children}
|
||||
</I18nContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useI18n() {
|
||||
return useContext(I18nContext);
|
||||
}
|
||||
275
web/src/i18n/en.ts
Normal file
275
web/src/i18n/en.ts
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
import type { Translations } from "./types";
|
||||
|
||||
export const en: Translations = {
|
||||
common: {
|
||||
save: "Save",
|
||||
saving: "Saving...",
|
||||
cancel: "Cancel",
|
||||
close: "Close",
|
||||
delete: "Delete",
|
||||
refresh: "Refresh",
|
||||
retry: "Retry",
|
||||
search: "Search...",
|
||||
loading: "Loading...",
|
||||
create: "Create",
|
||||
creating: "Creating...",
|
||||
set: "Set",
|
||||
replace: "Replace",
|
||||
clear: "Clear",
|
||||
live: "Live",
|
||||
off: "Off",
|
||||
enabled: "enabled",
|
||||
disabled: "disabled",
|
||||
active: "active",
|
||||
inactive: "inactive",
|
||||
unknown: "unknown",
|
||||
untitled: "Untitled",
|
||||
none: "None",
|
||||
form: "Form",
|
||||
noResults: "No results",
|
||||
of: "of",
|
||||
page: "Page",
|
||||
msgs: "msgs",
|
||||
tools: "tools",
|
||||
match: "match",
|
||||
other: "Other",
|
||||
configured: "configured",
|
||||
removed: "removed",
|
||||
failedToToggle: "Failed to toggle",
|
||||
failedToRemove: "Failed to remove",
|
||||
failedToReveal: "Failed to reveal",
|
||||
collapse: "Collapse",
|
||||
expand: "Expand",
|
||||
general: "General",
|
||||
messaging: "Messaging",
|
||||
},
|
||||
|
||||
app: {
|
||||
brand: "Hermes Agent",
|
||||
brandShort: "HA",
|
||||
webUi: "Web UI",
|
||||
footer: {
|
||||
name: "Hermes Agent",
|
||||
org: "Nous Research",
|
||||
},
|
||||
nav: {
|
||||
status: "Status",
|
||||
sessions: "Sessions",
|
||||
analytics: "Analytics",
|
||||
logs: "Logs",
|
||||
cron: "Cron",
|
||||
skills: "Skills",
|
||||
config: "Config",
|
||||
keys: "Keys",
|
||||
},
|
||||
},
|
||||
|
||||
status: {
|
||||
agent: "Agent",
|
||||
gateway: "Gateway",
|
||||
activeSessions: "Active Sessions",
|
||||
recentSessions: "Recent Sessions",
|
||||
connectedPlatforms: "Connected Platforms",
|
||||
running: "Running",
|
||||
starting: "Starting",
|
||||
failed: "Failed",
|
||||
stopped: "Stopped",
|
||||
connected: "Connected",
|
||||
disconnected: "Disconnected",
|
||||
error: "Error",
|
||||
notRunning: "Not running",
|
||||
startFailed: "Start failed",
|
||||
pid: "PID",
|
||||
noneRunning: "None",
|
||||
gatewayFailedToStart: "Gateway failed to start",
|
||||
lastUpdate: "Last update",
|
||||
platformError: "error",
|
||||
platformDisconnected: "disconnected",
|
||||
},
|
||||
|
||||
sessions: {
|
||||
title: "Sessions",
|
||||
searchPlaceholder: "Search message content...",
|
||||
noSessions: "No sessions yet",
|
||||
noMatch: "No sessions match your search",
|
||||
startConversation: "Start a conversation to see it here",
|
||||
noMessages: "No messages",
|
||||
untitledSession: "Untitled session",
|
||||
deleteSession: "Delete session",
|
||||
previousPage: "Previous page",
|
||||
nextPage: "Next page",
|
||||
roles: {
|
||||
user: "User",
|
||||
assistant: "Assistant",
|
||||
system: "System",
|
||||
tool: "Tool",
|
||||
},
|
||||
},
|
||||
|
||||
analytics: {
|
||||
period: "Period:",
|
||||
totalTokens: "Total Tokens",
|
||||
totalSessions: "Total Sessions",
|
||||
apiCalls: "API Calls",
|
||||
dailyTokenUsage: "Daily Token Usage",
|
||||
dailyBreakdown: "Daily Breakdown",
|
||||
perModelBreakdown: "Per-Model Breakdown",
|
||||
input: "Input",
|
||||
output: "Output",
|
||||
total: "Total",
|
||||
noUsageData: "No usage data for this period",
|
||||
startSession: "Start a session to see analytics here",
|
||||
date: "Date",
|
||||
model: "Model",
|
||||
tokens: "Tokens",
|
||||
perDayAvg: "/day avg",
|
||||
acrossModels: "across {count} models",
|
||||
inOut: "{input} in / {output} out",
|
||||
},
|
||||
|
||||
logs: {
|
||||
title: "Logs",
|
||||
autoRefresh: "Auto-refresh",
|
||||
file: "File",
|
||||
level: "Level",
|
||||
component: "Component",
|
||||
lines: "Lines",
|
||||
noLogLines: "No log lines found",
|
||||
},
|
||||
|
||||
cron: {
|
||||
newJob: "New Cron Job",
|
||||
nameOptional: "Name (optional)",
|
||||
namePlaceholder: "e.g. Daily summary",
|
||||
prompt: "Prompt",
|
||||
promptPlaceholder: "What should the agent do on each run?",
|
||||
schedule: "Schedule (cron expression)",
|
||||
schedulePlaceholder: "0 9 * * *",
|
||||
deliverTo: "Deliver to",
|
||||
scheduledJobs: "Scheduled Jobs",
|
||||
noJobs: "No cron jobs configured. Create one above.",
|
||||
last: "Last",
|
||||
next: "Next",
|
||||
pause: "Pause",
|
||||
resume: "Resume",
|
||||
triggerNow: "Trigger now",
|
||||
delivery: {
|
||||
local: "Local",
|
||||
telegram: "Telegram",
|
||||
discord: "Discord",
|
||||
slack: "Slack",
|
||||
email: "Email",
|
||||
},
|
||||
},
|
||||
|
||||
skills: {
|
||||
title: "Skills",
|
||||
searchPlaceholder: "Search skills and toolsets...",
|
||||
enabledOf: "{enabled}/{total} enabled",
|
||||
all: "All",
|
||||
noSkills: "No skills found. Skills are loaded from ~/.hermes/skills/",
|
||||
noSkillsMatch: "No skills match your search or filter.",
|
||||
skillCount: "{count} skill{s}",
|
||||
noDescription: "No description available.",
|
||||
toolsets: "Toolsets",
|
||||
noToolsetsMatch: "No toolsets match the search.",
|
||||
setupNeeded: "Setup needed",
|
||||
disabledForCli: "Disabled for CLI",
|
||||
more: "+{count} more",
|
||||
},
|
||||
|
||||
config: {
|
||||
configPath: "~/.hermes/config.yaml",
|
||||
exportConfig: "Export config as JSON",
|
||||
importConfig: "Import config from JSON",
|
||||
resetDefaults: "Reset to defaults",
|
||||
rawYaml: "Raw YAML Configuration",
|
||||
searchResults: "Search Results",
|
||||
fields: "field{s}",
|
||||
noFieldsMatch: 'No fields match "{query}"',
|
||||
configSaved: "Configuration saved",
|
||||
yamlConfigSaved: "YAML config saved",
|
||||
failedToSave: "Failed to save",
|
||||
failedToSaveYaml: "Failed to save YAML",
|
||||
failedToLoadRaw: "Failed to load raw config",
|
||||
configImported: "Config imported — review and save",
|
||||
invalidJson: "Invalid JSON file",
|
||||
categories: {
|
||||
general: "General",
|
||||
agent: "Agent",
|
||||
terminal: "Terminal",
|
||||
display: "Display",
|
||||
delegation: "Delegation",
|
||||
memory: "Memory",
|
||||
compression: "Compression",
|
||||
security: "Security",
|
||||
browser: "Browser",
|
||||
voice: "Voice",
|
||||
tts: "Text-to-Speech",
|
||||
stt: "Speech-to-Text",
|
||||
logging: "Logging",
|
||||
discord: "Discord",
|
||||
auxiliary: "Auxiliary",
|
||||
},
|
||||
},
|
||||
|
||||
env: {
|
||||
description: "Manage API keys and secrets stored in",
|
||||
changesNote: "Changes are saved to disk immediately. Active sessions pick up new keys automatically.",
|
||||
hideAdvanced: "Hide Advanced",
|
||||
showAdvanced: "Show Advanced",
|
||||
llmProviders: "LLM Providers",
|
||||
providersConfigured: "{configured} of {total} providers configured",
|
||||
getKey: "Get key",
|
||||
notConfigured: "{count} not configured",
|
||||
notSet: "Not set",
|
||||
keysCount: "{count} key{s}",
|
||||
enterValue: "Enter value...",
|
||||
replaceCurrentValue: "Replace current value ({preview})",
|
||||
showValue: "Show real value",
|
||||
hideValue: "Hide value",
|
||||
},
|
||||
|
||||
oauth: {
|
||||
title: "Provider Logins (OAuth)",
|
||||
providerLogins: "Provider Logins (OAuth)",
|
||||
description: "{connected} of {total} OAuth providers connected. Login flows currently run via the CLI; click Copy command and paste into a terminal to set up.",
|
||||
connected: "Connected",
|
||||
expired: "Expired",
|
||||
notConnected: "Not connected. Run {command} in a terminal.",
|
||||
runInTerminal: "in a terminal.",
|
||||
noProviders: "No OAuth-capable providers detected.",
|
||||
login: "Login",
|
||||
disconnect: "Disconnect",
|
||||
managedExternally: "Managed externally",
|
||||
copied: "Copied ✓",
|
||||
cli: "CLI",
|
||||
copyCliCommand: "Copy CLI command (for external / fallback)",
|
||||
connect: "Connect",
|
||||
sessionExpires: "Session expires in {time}",
|
||||
initiatingLogin: "Initiating login flow…",
|
||||
exchangingCode: "Exchanging code for tokens…",
|
||||
connectedClosing: "Connected! Closing…",
|
||||
loginFailed: "Login failed.",
|
||||
sessionExpired: "Session expired. Click Retry to start a new login.",
|
||||
reOpenAuth: "Re-open auth page",
|
||||
reOpenVerification: "Re-open verification page",
|
||||
submitCode: "Submit code",
|
||||
pasteCode: "Paste authorization code (with #state suffix is fine)",
|
||||
waitingAuth: "Waiting for you to authorize in the browser…",
|
||||
enterCodePrompt: "A new tab opened. Enter this code if prompted:",
|
||||
pkceStep1: "A new tab opened to claude.ai. Sign in and click Authorize.",
|
||||
pkceStep2: "Copy the authorization code shown after authorizing.",
|
||||
pkceStep3: "Paste it below and submit.",
|
||||
flowLabels: {
|
||||
pkce: "Browser login (PKCE)",
|
||||
device_code: "Device code",
|
||||
external: "External CLI",
|
||||
},
|
||||
expiresIn: "expires in {time}",
|
||||
},
|
||||
|
||||
language: {
|
||||
switchTo: "Switch to Chinese",
|
||||
},
|
||||
};
|
||||
2
web/src/i18n/index.ts
Normal file
2
web/src/i18n/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export { I18nProvider, useI18n } from "./context";
|
||||
export type { Locale, Translations } from "./types";
|
||||
287
web/src/i18n/types.ts
Normal file
287
web/src/i18n/types.ts
Normal file
|
|
@ -0,0 +1,287 @@
|
|||
export type Locale = "en" | "zh";
|
||||
|
||||
export interface Translations {
|
||||
// ── Common ──
|
||||
common: {
|
||||
save: string;
|
||||
saving: string;
|
||||
cancel: string;
|
||||
close: string;
|
||||
delete: string;
|
||||
refresh: string;
|
||||
retry: string;
|
||||
search: string;
|
||||
loading: string;
|
||||
create: string;
|
||||
creating: string;
|
||||
set: string;
|
||||
replace: string;
|
||||
clear: string;
|
||||
live: string;
|
||||
off: string;
|
||||
enabled: string;
|
||||
disabled: string;
|
||||
active: string;
|
||||
inactive: string;
|
||||
unknown: string;
|
||||
untitled: string;
|
||||
none: string;
|
||||
form: string;
|
||||
noResults: string;
|
||||
of: string;
|
||||
page: string;
|
||||
msgs: string;
|
||||
tools: string;
|
||||
match: string;
|
||||
other: string;
|
||||
configured: string;
|
||||
removed: string;
|
||||
failedToToggle: string;
|
||||
failedToRemove: string;
|
||||
failedToReveal: string;
|
||||
collapse: string;
|
||||
expand: string;
|
||||
general: string;
|
||||
messaging: string;
|
||||
};
|
||||
|
||||
// ── App shell ──
|
||||
app: {
|
||||
brand: string;
|
||||
brandShort: string;
|
||||
webUi: string;
|
||||
footer: {
|
||||
name: string;
|
||||
org: string;
|
||||
};
|
||||
nav: {
|
||||
status: string;
|
||||
sessions: string;
|
||||
analytics: string;
|
||||
logs: string;
|
||||
cron: string;
|
||||
skills: string;
|
||||
config: string;
|
||||
keys: string;
|
||||
};
|
||||
};
|
||||
|
||||
// ── Status page ──
|
||||
status: {
|
||||
agent: string;
|
||||
gateway: string;
|
||||
activeSessions: string;
|
||||
recentSessions: string;
|
||||
connectedPlatforms: string;
|
||||
running: string;
|
||||
starting: string;
|
||||
failed: string;
|
||||
stopped: string;
|
||||
connected: string;
|
||||
disconnected: string;
|
||||
error: string;
|
||||
notRunning: string;
|
||||
startFailed: string;
|
||||
pid: string;
|
||||
noneRunning: string;
|
||||
gatewayFailedToStart: string;
|
||||
lastUpdate: string;
|
||||
platformError: string;
|
||||
platformDisconnected: string;
|
||||
};
|
||||
|
||||
// ── Sessions page ──
|
||||
sessions: {
|
||||
title: string;
|
||||
searchPlaceholder: string;
|
||||
noSessions: string;
|
||||
noMatch: string;
|
||||
startConversation: string;
|
||||
noMessages: string;
|
||||
untitledSession: string;
|
||||
deleteSession: string;
|
||||
previousPage: string;
|
||||
nextPage: string;
|
||||
roles: {
|
||||
user: string;
|
||||
assistant: string;
|
||||
system: string;
|
||||
tool: string;
|
||||
};
|
||||
};
|
||||
|
||||
// ── Analytics page ──
|
||||
analytics: {
|
||||
period: string;
|
||||
totalTokens: string;
|
||||
totalSessions: string;
|
||||
apiCalls: string;
|
||||
dailyTokenUsage: string;
|
||||
dailyBreakdown: string;
|
||||
perModelBreakdown: string;
|
||||
input: string;
|
||||
output: string;
|
||||
total: string;
|
||||
noUsageData: string;
|
||||
startSession: string;
|
||||
date: string;
|
||||
model: string;
|
||||
tokens: string;
|
||||
perDayAvg: string;
|
||||
acrossModels: string;
|
||||
inOut: string;
|
||||
};
|
||||
|
||||
// ── Logs page ──
|
||||
logs: {
|
||||
title: string;
|
||||
autoRefresh: string;
|
||||
file: string;
|
||||
level: string;
|
||||
component: string;
|
||||
lines: string;
|
||||
noLogLines: string;
|
||||
};
|
||||
|
||||
// ── Cron page ──
|
||||
cron: {
|
||||
newJob: string;
|
||||
nameOptional: string;
|
||||
namePlaceholder: string;
|
||||
prompt: string;
|
||||
promptPlaceholder: string;
|
||||
schedule: string;
|
||||
schedulePlaceholder: string;
|
||||
deliverTo: string;
|
||||
scheduledJobs: string;
|
||||
noJobs: string;
|
||||
last: string;
|
||||
next: string;
|
||||
pause: string;
|
||||
resume: string;
|
||||
triggerNow: string;
|
||||
delivery: {
|
||||
local: string;
|
||||
telegram: string;
|
||||
discord: string;
|
||||
slack: string;
|
||||
email: string;
|
||||
};
|
||||
};
|
||||
|
||||
// ── Skills page ──
|
||||
skills: {
|
||||
title: string;
|
||||
searchPlaceholder: string;
|
||||
enabledOf: string;
|
||||
all: string;
|
||||
noSkills: string;
|
||||
noSkillsMatch: string;
|
||||
skillCount: string;
|
||||
noDescription: string;
|
||||
toolsets: string;
|
||||
noToolsetsMatch: string;
|
||||
setupNeeded: string;
|
||||
disabledForCli: string;
|
||||
more: string;
|
||||
};
|
||||
|
||||
// ── Config page ──
|
||||
config: {
|
||||
configPath: string;
|
||||
exportConfig: string;
|
||||
importConfig: string;
|
||||
resetDefaults: string;
|
||||
rawYaml: string;
|
||||
searchResults: string;
|
||||
fields: string;
|
||||
noFieldsMatch: string;
|
||||
configSaved: string;
|
||||
yamlConfigSaved: string;
|
||||
failedToSave: string;
|
||||
failedToSaveYaml: string;
|
||||
failedToLoadRaw: string;
|
||||
configImported: string;
|
||||
invalidJson: string;
|
||||
categories: {
|
||||
general: string;
|
||||
agent: string;
|
||||
terminal: string;
|
||||
display: string;
|
||||
delegation: string;
|
||||
memory: string;
|
||||
compression: string;
|
||||
security: string;
|
||||
browser: string;
|
||||
voice: string;
|
||||
tts: string;
|
||||
stt: string;
|
||||
logging: string;
|
||||
discord: string;
|
||||
auxiliary: string;
|
||||
};
|
||||
};
|
||||
|
||||
// ── Env / Keys page ──
|
||||
env: {
|
||||
description: string;
|
||||
changesNote: string;
|
||||
hideAdvanced: string;
|
||||
showAdvanced: string;
|
||||
llmProviders: string;
|
||||
providersConfigured: string;
|
||||
getKey: string;
|
||||
notConfigured: string;
|
||||
notSet: string;
|
||||
keysCount: string;
|
||||
enterValue: string;
|
||||
replaceCurrentValue: string;
|
||||
showValue: string;
|
||||
hideValue: string;
|
||||
};
|
||||
|
||||
// ── OAuth ──
|
||||
oauth: {
|
||||
title: string;
|
||||
providerLogins: string;
|
||||
description: string;
|
||||
connected: string;
|
||||
expired: string;
|
||||
notConnected: string;
|
||||
runInTerminal: string;
|
||||
noProviders: string;
|
||||
login: string;
|
||||
disconnect: string;
|
||||
managedExternally: string;
|
||||
copied: string;
|
||||
cli: string;
|
||||
copyCliCommand: string;
|
||||
connect: string;
|
||||
sessionExpires: string;
|
||||
initiatingLogin: string;
|
||||
exchangingCode: string;
|
||||
connectedClosing: string;
|
||||
loginFailed: string;
|
||||
sessionExpired: string;
|
||||
reOpenAuth: string;
|
||||
reOpenVerification: string;
|
||||
submitCode: string;
|
||||
pasteCode: string;
|
||||
waitingAuth: string;
|
||||
enterCodePrompt: string;
|
||||
pkceStep1: string;
|
||||
pkceStep2: string;
|
||||
pkceStep3: string;
|
||||
flowLabels: {
|
||||
pkce: string;
|
||||
device_code: string;
|
||||
external: string;
|
||||
};
|
||||
expiresIn: string;
|
||||
};
|
||||
|
||||
// ── Language switcher ──
|
||||
language: {
|
||||
switchTo: string;
|
||||
};
|
||||
}
|
||||
275
web/src/i18n/zh.ts
Normal file
275
web/src/i18n/zh.ts
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
import type { Translations } from "./types";
|
||||
|
||||
export const zh: Translations = {
|
||||
common: {
|
||||
save: "保存",
|
||||
saving: "保存中...",
|
||||
cancel: "取消",
|
||||
close: "关闭",
|
||||
delete: "删除",
|
||||
refresh: "刷新",
|
||||
retry: "重试",
|
||||
search: "搜索...",
|
||||
loading: "加载中...",
|
||||
create: "创建",
|
||||
creating: "创建中...",
|
||||
set: "设置",
|
||||
replace: "替换",
|
||||
clear: "清除",
|
||||
live: "在线",
|
||||
off: "离线",
|
||||
enabled: "已启用",
|
||||
disabled: "已禁用",
|
||||
active: "活跃",
|
||||
inactive: "未激活",
|
||||
unknown: "未知",
|
||||
untitled: "无标题",
|
||||
none: "无",
|
||||
form: "表单",
|
||||
noResults: "无结果",
|
||||
of: "/",
|
||||
page: "页",
|
||||
msgs: "消息",
|
||||
tools: "工具",
|
||||
match: "匹配",
|
||||
other: "其他",
|
||||
configured: "已配置",
|
||||
removed: "已移除",
|
||||
failedToToggle: "切换失败",
|
||||
failedToRemove: "移除失败",
|
||||
failedToReveal: "显示失败",
|
||||
collapse: "折叠",
|
||||
expand: "展开",
|
||||
general: "通用",
|
||||
messaging: "消息平台",
|
||||
},
|
||||
|
||||
app: {
|
||||
brand: "Hermes Agent",
|
||||
brandShort: "HA",
|
||||
webUi: "管理面板",
|
||||
footer: {
|
||||
name: "Hermes Agent",
|
||||
org: "Nous Research",
|
||||
},
|
||||
nav: {
|
||||
status: "状态",
|
||||
sessions: "会话",
|
||||
analytics: "分析",
|
||||
logs: "日志",
|
||||
cron: "定时任务",
|
||||
skills: "技能",
|
||||
config: "配置",
|
||||
keys: "密钥",
|
||||
},
|
||||
},
|
||||
|
||||
status: {
|
||||
agent: "代理",
|
||||
gateway: "网关",
|
||||
activeSessions: "活跃会话",
|
||||
recentSessions: "最近会话",
|
||||
connectedPlatforms: "已连接平台",
|
||||
running: "运行中",
|
||||
starting: "启动中",
|
||||
failed: "失败",
|
||||
stopped: "已停止",
|
||||
connected: "已连接",
|
||||
disconnected: "已断开",
|
||||
error: "错误",
|
||||
notRunning: "未运行",
|
||||
startFailed: "启动失败",
|
||||
pid: "进程",
|
||||
noneRunning: "无",
|
||||
gatewayFailedToStart: "网关启动失败",
|
||||
lastUpdate: "最后更新",
|
||||
platformError: "错误",
|
||||
platformDisconnected: "已断开",
|
||||
},
|
||||
|
||||
sessions: {
|
||||
title: "会话",
|
||||
searchPlaceholder: "搜索消息内容...",
|
||||
noSessions: "暂无会话",
|
||||
noMatch: "没有匹配的会话",
|
||||
startConversation: "开始对话后将显示在此处",
|
||||
noMessages: "暂无消息",
|
||||
untitledSession: "无标题会话",
|
||||
deleteSession: "删除会话",
|
||||
previousPage: "上一页",
|
||||
nextPage: "下一页",
|
||||
roles: {
|
||||
user: "用户",
|
||||
assistant: "助手",
|
||||
system: "系统",
|
||||
tool: "工具",
|
||||
},
|
||||
},
|
||||
|
||||
analytics: {
|
||||
period: "时间范围：",
|
||||
totalTokens: "总 Token 数",
|
||||
totalSessions: "总会话数",
|
||||
apiCalls: "API 调用",
|
||||
dailyTokenUsage: "每日 Token 用量",
|
||||
dailyBreakdown: "每日明细",
|
||||
perModelBreakdown: "模型用量明细",
|
||||
input: "输入",
|
||||
output: "输出",
|
||||
total: "总计",
|
||||
noUsageData: "该时间段暂无使用数据",
|
||||
startSession: "开始会话后将在此显示分析数据",
|
||||
date: "日期",
|
||||
model: "模型",
|
||||
tokens: "Token",
|
||||
perDayAvg: "/天 平均",
|
||||
acrossModels: "共 {count} 个模型",
|
||||
inOut: "输入 {input} / 输出 {output}",
|
||||
},
|
||||
|
||||
logs: {
|
||||
title: "日志",
|
||||
autoRefresh: "自动刷新",
|
||||
file: "文件",
|
||||
level: "级别",
|
||||
component: "组件",
|
||||
lines: "行数",
|
||||
noLogLines: "未找到日志记录",
|
||||
},
|
||||
|
||||
cron: {
|
||||
newJob: "新建定时任务",
|
||||
nameOptional: "名称（可选）",
|
||||
namePlaceholder: "例如：每日总结",
|
||||
prompt: "提示词",
|
||||
promptPlaceholder: "代理每次运行时应执行什么操作？",
|
||||
schedule: "调度表达式（cron）",
|
||||
schedulePlaceholder: "0 9 * * *",
|
||||
deliverTo: "投递至",
|
||||
scheduledJobs: "已调度任务",
|
||||
noJobs: "暂无定时任务。在上方创建一个。",
|
||||
last: "上次",
|
||||
next: "下次",
|
||||
pause: "暂停",
|
||||
resume: "恢复",
|
||||
triggerNow: "立即触发",
|
||||
delivery: {
|
||||
local: "本地",
|
||||
telegram: "Telegram",
|
||||
discord: "Discord",
|
||||
slack: "Slack",
|
||||
email: "邮件",
|
||||
},
|
||||
},
|
||||
|
||||
skills: {
|
||||
title: "技能",
|
||||
searchPlaceholder: "搜索技能和工具集...",
|
||||
enabledOf: "已启用 {enabled}/{total}",
|
||||
all: "全部",
|
||||
noSkills: "未找到技能。技能从 ~/.hermes/skills/ 加载",
|
||||
noSkillsMatch: "没有匹配的技能。",
|
||||
skillCount: "{count} 个技能",
|
||||
noDescription: "暂无描述。",
|
||||
toolsets: "工具集",
|
||||
noToolsetsMatch: "没有匹配的工具集。",
|
||||
setupNeeded: "需要配置",
|
||||
disabledForCli: "CLI 已禁用",
|
||||
more: "还有 {count} 个",
|
||||
},
|
||||
|
||||
config: {
|
||||
configPath: "~/.hermes/config.yaml",
|
||||
exportConfig: "导出配置为 JSON",
|
||||
importConfig: "从 JSON 导入配置",
|
||||
resetDefaults: "恢复默认值",
|
||||
rawYaml: "原始 YAML 配置",
|
||||
searchResults: "搜索结果",
|
||||
fields: "个字段",
|
||||
noFieldsMatch: '没有匹配"{query}"的字段',
|
||||
configSaved: "配置已保存",
|
||||
yamlConfigSaved: "YAML 配置已保存",
|
||||
failedToSave: "保存失败",
|
||||
failedToSaveYaml: "YAML 保存失败",
|
||||
failedToLoadRaw: "加载原始配置失败",
|
||||
configImported: "配置已导入 — 请检查后保存",
|
||||
invalidJson: "无效的 JSON 文件",
|
||||
categories: {
|
||||
general: "通用",
|
||||
agent: "代理",
|
||||
terminal: "终端",
|
||||
display: "显示",
|
||||
delegation: "委托",
|
||||
memory: "记忆",
|
||||
compression: "压缩",
|
||||
security: "安全",
|
||||
browser: "浏览器",
|
||||
voice: "语音",
|
||||
tts: "文字转语音",
|
||||
stt: "语音转文字",
|
||||
logging: "日志",
|
||||
discord: "Discord",
|
||||
auxiliary: "辅助",
|
||||
},
|
||||
},
|
||||
|
||||
env: {
|
||||
description: "管理存储在以下位置的 API 密钥和凭据",
|
||||
changesNote: "更改会立即保存到磁盘。活跃会话将自动获取新密钥。",
|
||||
hideAdvanced: "隐藏高级选项",
|
||||
showAdvanced: "显示高级选项",
|
||||
llmProviders: "LLM 提供商",
|
||||
providersConfigured: "已配置 {configured}/{total} 个提供商",
|
||||
getKey: "获取密钥",
|
||||
notConfigured: "{count} 个未配置",
|
||||
notSet: "未设置",
|
||||
keysCount: "{count} 个密钥",
|
||||
enterValue: "输入值...",
|
||||
replaceCurrentValue: "替换当前值（{preview}）",
|
||||
showValue: "显示实际值",
|
||||
hideValue: "隐藏值",
|
||||
},
|
||||
|
||||
oauth: {
|
||||
title: "提供商登录（OAuth）",
|
||||
providerLogins: "提供商登录（OAuth）",
|
||||
description: "已连接 {connected}/{total} 个 OAuth 提供商。登录流程目前通过 CLI 运行；点击「复制命令」并粘贴到终端中进行设置。",
|
||||
connected: "已连接",
|
||||
expired: "已过期",
|
||||
notConnected: "未连接。在终端中运行 {command}。",
|
||||
runInTerminal: "在终端中。",
|
||||
noProviders: "未检测到支持 OAuth 的提供商。",
|
||||
login: "登录",
|
||||
disconnect: "断开连接",
|
||||
managedExternally: "外部管理",
|
||||
copied: "已复制 ✓",
|
||||
cli: "CLI",
|
||||
copyCliCommand: "复制 CLI 命令（用于外部/备用方式）",
|
||||
connect: "连接",
|
||||
sessionExpires: "会话将在 {time} 后过期",
|
||||
initiatingLogin: "正在启动登录流程…",
|
||||
exchangingCode: "正在交换令牌…",
|
||||
connectedClosing: "已连接！正在关闭…",
|
||||
loginFailed: "登录失败。",
|
||||
sessionExpired: "会话已过期。点击重试以开始新的登录。",
|
||||
reOpenAuth: "重新打开授权页面",
|
||||
reOpenVerification: "重新打开验证页面",
|
||||
submitCode: "提交代码",
|
||||
pasteCode: "粘贴授权代码（包含 #state 后缀也可以）",
|
||||
waitingAuth: "等待您在浏览器中授权…",
|
||||
enterCodePrompt: "已在新标签页中打开。如果需要，请输入以下代码：",
|
||||
pkceStep1: "已在新标签页打开 claude.ai。请登录并点击「授权」。",
|
||||
pkceStep2: "复制授权后显示的授权代码。",
|
||||
pkceStep3: "将代码粘贴到下方并提交。",
|
||||
flowLabels: {
|
||||
pkce: "浏览器登录（PKCE）",
|
||||
device_code: "设备代码",
|
||||
external: "外部 CLI",
|
||||
},
|
||||
expiresIn: "{time}后过期",
|
||||
},
|
||||
|
||||
language: {
|
||||
switchTo: "切换到英文",
|
||||
},
|
||||
};
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import { createRoot } from "react-dom/client";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import "./index.css";
|
||||
import App from "./App";
|
||||
import { I18nProvider } from "./i18n";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<BrowserRouter>
|
||||
<I18nProvider>
|
||||
<App />
|
||||
</BrowserRouter>,
|
||||
</I18nProvider>,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { useEffect, useState, useCallback } from "react";
|
||||
import { formatTokenCount } from "@/lib/format";
|
||||
import {
|
||||
BarChart3,
|
||||
Cpu,
|
||||
|
|
@ -10,6 +9,7 @@ import { api } from "@/lib/api";
|
|||
import type { AnalyticsResponse, AnalyticsDailyEntry, AnalyticsModelEntry } from "@/lib/api";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useI18n } from "@/i18n";
|
||||
|
||||
const PERIODS = [
|
||||
{ label: "7d", days: 7 },
|
||||
|
|
@ -19,7 +19,11 @@ const PERIODS = [
|
|||
|
||||
const CHART_HEIGHT_PX = 160;
|
||||
|
||||
const formatTokens = formatTokenCount;
|
||||
function formatTokens(n: number): string {
|
||||
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
|
||||
if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
|
||||
return String(n);
|
||||
}
|
||||
|
||||
function formatDate(day: string): string {
|
||||
try {
|
||||
|
|
@ -56,6 +60,7 @@ function SummaryCard({
|
|||
}
|
||||
|
||||
function TokenBarChart({ daily }: { daily: AnalyticsDailyEntry[] }) {
|
||||
const { t } = useI18n();
|
||||
if (daily.length === 0) return null;
|
||||
|
||||
const maxTokens = Math.max(...daily.map((d) => d.input_tokens + d.output_tokens), 1);
|
||||
|
|
@ -65,16 +70,16 @@ function TokenBarChart({ daily }: { daily: AnalyticsDailyEntry[] }) {
|
|||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<BarChart3 className="h-5 w-5 text-muted-foreground" />
|
||||
<CardTitle className="text-base">Daily Token Usage</CardTitle>
|
||||
<CardTitle className="text-base">{t.analytics.dailyTokenUsage}</CardTitle>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="h-2.5 w-2.5 bg-[#ffe6cb]" />
|
||||
Input
|
||||
<div className="h-2.5 w-2.5 rounded-sm bg-[#ffe6cb]" />
|
||||
{t.analytics.input}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="h-2.5 w-2.5 bg-emerald-500" />
|
||||
Output
|
||||
<div className="h-2.5 w-2.5 rounded-sm bg-emerald-500" />
|
||||
{t.analytics.output}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
|
@ -92,11 +97,11 @@ function TokenBarChart({ daily }: { daily: AnalyticsDailyEntry[] }) {
|
|||
>
|
||||
{/* Tooltip */}
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block z-10 pointer-events-none">
|
||||
<div className="bg-card border border-border px-2.5 py-1.5 text-[10px] text-foreground shadow-lg whitespace-nowrap">
|
||||
<div className="rounded-md bg-card border border-border px-2.5 py-1.5 text-[10px] text-foreground shadow-lg whitespace-nowrap">
|
||||
<div className="font-medium">{formatDate(d.day)}</div>
|
||||
<div>Input: {formatTokens(d.input_tokens)}</div>
|
||||
<div>Output: {formatTokens(d.output_tokens)}</div>
|
||||
<div>Total: {formatTokens(total)}</div>
|
||||
<div>{t.analytics.input}: {formatTokens(d.input_tokens)}</div>
|
||||
<div>{t.analytics.output}: {formatTokens(d.output_tokens)}</div>
|
||||
<div>{t.analytics.total}: {formatTokens(total)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Input bar */}
|
||||
|
|
@ -127,6 +132,7 @@ function TokenBarChart({ daily }: { daily: AnalyticsDailyEntry[] }) {
|
|||
}
|
||||
|
||||
function DailyTable({ daily }: { daily: AnalyticsDailyEntry[] }) {
|
||||
const { t } = useI18n();
|
||||
if (daily.length === 0) return null;
|
||||
|
||||
const sorted = [...daily].reverse();
|
||||
|
|
@ -136,7 +142,7 @@ function DailyTable({ daily }: { daily: AnalyticsDailyEntry[] }) {
|
|||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="h-5 w-5 text-muted-foreground" />
|
||||
<CardTitle className="text-base">Daily Breakdown</CardTitle>
|
||||
<CardTitle className="text-base">{t.analytics.dailyBreakdown}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
|
@ -144,10 +150,10 @@ function DailyTable({ daily }: { daily: AnalyticsDailyEntry[] }) {
|
|||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border text-muted-foreground text-xs">
|
||||
<th className="text-left py-2 pr-4 font-medium">Date</th>
|
||||
<th className="text-right py-2 px-4 font-medium">Sessions</th>
|
||||
<th className="text-right py-2 px-4 font-medium">Input</th>
|
||||
<th className="text-right py-2 pl-4 font-medium">Output</th>
|
||||
<th className="text-left py-2 pr-4 font-medium">{t.analytics.date}</th>
|
||||
<th className="text-right py-2 px-4 font-medium">{t.sessions.title}</th>
|
||||
<th className="text-right py-2 px-4 font-medium">{t.analytics.input}</th>
|
||||
<th className="text-right py-2 pl-4 font-medium">{t.analytics.output}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -174,6 +180,7 @@ function DailyTable({ daily }: { daily: AnalyticsDailyEntry[] }) {
|
|||
}
|
||||
|
||||
function ModelTable({ models }: { models: AnalyticsModelEntry[] }) {
|
||||
const { t } = useI18n();
|
||||
if (models.length === 0) return null;
|
||||
|
||||
const sorted = [...models].sort(
|
||||
|
|
@ -185,7 +192,7 @@ function ModelTable({ models }: { models: AnalyticsModelEntry[] }) {
|
|||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Cpu className="h-5 w-5 text-muted-foreground" />
|
||||
<CardTitle className="text-base">Per-Model Breakdown</CardTitle>
|
||||
<CardTitle className="text-base">{t.analytics.perModelBreakdown}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
|
@ -193,9 +200,9 @@ function ModelTable({ models }: { models: AnalyticsModelEntry[] }) {
|
|||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border text-muted-foreground text-xs">
|
||||
<th className="text-left py-2 pr-4 font-medium">Model</th>
|
||||
<th className="text-right py-2 px-4 font-medium">Sessions</th>
|
||||
<th className="text-right py-2 pl-4 font-medium">Tokens</th>
|
||||
<th className="text-left py-2 pr-4 font-medium">{t.analytics.model}</th>
|
||||
<th className="text-right py-2 px-4 font-medium">{t.sessions.title}</th>
|
||||
<th className="text-right py-2 pl-4 font-medium">{t.analytics.tokens}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -225,6 +232,7 @@ export default function AnalyticsPage() {
|
|||
const [data, setData] = useState<AnalyticsResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { t } = useI18n();
|
||||
|
||||
const load = useCallback(() => {
|
||||
setLoading(true);
|
||||
|
|
@ -244,7 +252,7 @@ export default function AnalyticsPage() {
|
|||
<div className="flex flex-col gap-6">
|
||||
{/* Period selector */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground font-medium">Period:</span>
|
||||
<span className="text-sm text-muted-foreground font-medium">{t.analytics.period}</span>
|
||||
{PERIODS.map((p) => (
|
||||
<Button
|
||||
key={p.label}
|
||||
|
|
@ -278,21 +286,21 @@ export default function AnalyticsPage() {
|
|||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<SummaryCard
|
||||
icon={Hash}
|
||||
label="Total Tokens"
|
||||
label={t.analytics.totalTokens}
|
||||
value={formatTokens(data.totals.total_input + data.totals.total_output)}
|
||||
sub={`${formatTokens(data.totals.total_input)} in / ${formatTokens(data.totals.total_output)} out`}
|
||||
sub={t.analytics.inOut.replace("{input}", formatTokens(data.totals.total_input)).replace("{output}", formatTokens(data.totals.total_output))}
|
||||
/>
|
||||
<SummaryCard
|
||||
icon={BarChart3}
|
||||
label="Total Sessions"
|
||||
label={t.analytics.totalSessions}
|
||||
value={String(data.totals.total_sessions)}
|
||||
sub={`~${(data.totals.total_sessions / days).toFixed(1)}/day avg`}
|
||||
sub={`~${(data.totals.total_sessions / days).toFixed(1)}${t.analytics.perDayAvg}`}
|
||||
/>
|
||||
<SummaryCard
|
||||
icon={TrendingUp}
|
||||
label="API Calls"
|
||||
label={t.analytics.apiCalls}
|
||||
value={String(data.daily.reduce((sum, d) => sum + d.sessions, 0))}
|
||||
sub={`across ${data.by_model.length} models`}
|
||||
sub={t.analytics.acrossModels.replace("{count}", String(data.by_model.length))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -310,8 +318,8 @@ export default function AnalyticsPage() {
|
|||
<CardContent className="py-12">
|
||||
<div className="flex flex-col items-center text-muted-foreground">
|
||||
<BarChart3 className="h-8 w-8 mb-3 opacity-40" />
|
||||
<p className="text-sm font-medium">No usage data for this period</p>
|
||||
<p className="text-xs mt-1 text-muted-foreground/60">Start a session to see analytics here</p>
|
||||
<p className="text-sm font-medium">{t.analytics.noUsageData}</p>
|
||||
<p className="text-xs mt-1 text-muted-foreground/60">{t.analytics.startSession}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -1,76 +1,49 @@
|
|||
import { useEffect, useRef, useState, useMemo } from "react";
|
||||
import {
|
||||
Bot,
|
||||
ChevronRight,
|
||||
Code,
|
||||
Ear,
|
||||
Download,
|
||||
FileText,
|
||||
FormInput,
|
||||
Globe,
|
||||
Lock,
|
||||
MessageSquare,
|
||||
Mic,
|
||||
Monitor,
|
||||
Package,
|
||||
Palette,
|
||||
RotateCcw,
|
||||
Save,
|
||||
ScrollText,
|
||||
Search,
|
||||
Settings,
|
||||
Settings2,
|
||||
Upload,
|
||||
Users,
|
||||
Volume2,
|
||||
Wrench,
|
||||
X,
|
||||
ChevronRight,
|
||||
Settings2,
|
||||
FileText,
|
||||
} from "lucide-react";
|
||||
import type { ComponentType } from "react";
|
||||
import { api } from "@/lib/api";
|
||||
import { getNestedValue, setNestedValue } from "@/lib/nested";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import { Toast } from "@/components/Toast";
|
||||
import { AutoField } from "@/components/AutoField";
|
||||
import { ModelInfoCard } from "@/components/ModelInfoCard";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useI18n } from "@/i18n";
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Helpers */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
const CATEGORY_ICONS: Record<string, ComponentType<{ className?: string }>> = {
|
||||
general: Settings,
|
||||
agent: Bot,
|
||||
terminal: Monitor,
|
||||
display: Palette,
|
||||
delegation: Users,
|
||||
memory: Package,
|
||||
compression: Package,
|
||||
security: Lock,
|
||||
browser: Globe,
|
||||
voice: Mic,
|
||||
tts: Volume2,
|
||||
stt: Ear,
|
||||
logging: ScrollText,
|
||||
discord: MessageSquare,
|
||||
auxiliary: Wrench,
|
||||
const CATEGORY_ICONS: Record<string, string> = {
|
||||
general: "⚙️",
|
||||
agent: "🤖",
|
||||
terminal: "💻",
|
||||
display: "🎨",
|
||||
delegation: "👥",
|
||||
memory: "🧠",
|
||||
compression: "📦",
|
||||
security: "🔒",
|
||||
browser: "🌐",
|
||||
voice: "🎙️",
|
||||
tts: "🔊",
|
||||
stt: "👂",
|
||||
logging: "📋",
|
||||
discord: "💬",
|
||||
auxiliary: "🔧",
|
||||
};
|
||||
const FallbackIcon = FileText;
|
||||
|
||||
function prettyCategoryName(cat: string): string {
|
||||
if (cat === "tts") return "Text-to-Speech";
|
||||
if (cat === "stt") return "Speech-to-Text";
|
||||
return cat.charAt(0).toUpperCase() + cat.slice(1);
|
||||
}
|
||||
|
||||
function CategoryIcon({ cat, className }: { cat: string; className?: string }) {
|
||||
const Icon = CATEGORY_ICONS[cat] ?? FallbackIcon;
|
||||
return <Icon className={className} />;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Component */
|
||||
|
|
@ -88,9 +61,15 @@ export default function ConfigPage() {
|
|||
const [yamlLoading, setYamlLoading] = useState(false);
|
||||
const [yamlSaving, setYamlSaving] = useState(false);
|
||||
const [activeCategory, setActiveCategory] = useState<string>("");
|
||||
const [modelInfoRefreshKey, setModelInfoRefreshKey] = useState(0);
|
||||
const { toast, showToast } = useToast();
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const { t } = useI18n();
|
||||
|
||||
function prettyCategoryName(cat: string): string {
|
||||
const key = cat as keyof typeof t.config.categories;
|
||||
if (t.config.categories[key]) return t.config.categories[key];
|
||||
return cat.charAt(0).toUpperCase() + cat.slice(1);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
api.getConfig().then(setConfig).catch(() => {});
|
||||
|
|
@ -118,7 +97,7 @@ export default function ConfigPage() {
|
|||
api
|
||||
.getConfigRaw()
|
||||
.then((resp) => setYamlText(resp.yaml))
|
||||
.catch(() => showToast("Failed to load raw config", "error"))
|
||||
.catch(() => showToast(t.config.failedToLoadRaw, "error"))
|
||||
.finally(() => setYamlLoading(false));
|
||||
}
|
||||
}, [yamlMode]);
|
||||
|
|
@ -175,10 +154,9 @@ export default function ConfigPage() {
|
|||
setSaving(true);
|
||||
try {
|
||||
await api.saveConfig(config);
|
||||
showToast("Configuration saved", "success");
|
||||
setModelInfoRefreshKey((k) => k + 1);
|
||||
showToast(t.config.configSaved, "success");
|
||||
} catch (e) {
|
||||
showToast(`Failed to save: ${e}`, "error");
|
||||
showToast(`${t.config.failedToSave}: ${e}`, "error");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
|
|
@ -188,11 +166,10 @@ export default function ConfigPage() {
|
|||
setYamlSaving(true);
|
||||
try {
|
||||
await api.saveConfigRaw(yamlText);
|
||||
showToast("YAML config saved", "success");
|
||||
setModelInfoRefreshKey((k) => k + 1);
|
||||
showToast(t.config.yamlConfigSaved, "success");
|
||||
api.getConfig().then(setConfig).catch(() => {});
|
||||
} catch (e) {
|
||||
showToast(`Failed to save YAML: ${e}`, "error");
|
||||
showToast(`${t.config.failedToSaveYaml}: ${e}`, "error");
|
||||
} finally {
|
||||
setYamlSaving(false);
|
||||
}
|
||||
|
|
@ -221,9 +198,9 @@ export default function ConfigPage() {
|
|||
try {
|
||||
const imported = JSON.parse(reader.result as string);
|
||||
setConfig(imported);
|
||||
showToast("Config imported — review and save", "success");
|
||||
showToast(t.config.configImported, "success");
|
||||
} catch {
|
||||
showToast("Invalid JSON file", "error");
|
||||
showToast(t.config.invalidJson, "error");
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
|
|
@ -242,7 +219,6 @@ export default function ConfigPage() {
|
|||
const renderFields = (fields: [string, Record<string, unknown>][], showCategory = false) => {
|
||||
let lastSection = "";
|
||||
let lastCat = "";
|
||||
const currentModel = config ? String(getNestedValue(config, "model") ?? "") : "";
|
||||
return fields.map(([key, s]) => {
|
||||
const parts = key.split(".");
|
||||
const section = parts.length > 1 ? parts[0] : "";
|
||||
|
|
@ -256,7 +232,7 @@ export default function ConfigPage() {
|
|||
<div key={key}>
|
||||
{showCatBadge && (
|
||||
<div className="flex items-center gap-2 pt-4 pb-2 first:pt-0">
|
||||
<CategoryIcon cat={cat} className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-base">{CATEGORY_ICONS[cat] || "📄"}</span>
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
{prettyCategoryName(cat)}
|
||||
</span>
|
||||
|
|
@ -279,12 +255,6 @@ export default function ConfigPage() {
|
|||
onChange={(v) => setConfig(setNestedValue(config, key, v))}
|
||||
/>
|
||||
</div>
|
||||
{/* Inject model info card right after the model field */}
|
||||
{key === "model" && currentModel && (
|
||||
<div className="py-1">
|
||||
<ModelInfoCard currentModel={currentModel} refreshKey={modelInfoRefreshKey} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
@ -298,19 +268,19 @@ export default function ConfigPage() {
|
|||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Settings2 className="h-4 w-4 text-muted-foreground" />
|
||||
<code className="text-xs text-muted-foreground bg-muted/50 px-2 py-0.5">
|
||||
~/.hermes/config.yaml
|
||||
<code className="text-xs text-muted-foreground bg-muted/50 px-2 py-0.5 rounded">
|
||||
{t.config.configPath}
|
||||
</code>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Button variant="ghost" size="sm" onClick={handleExport} title="Export config as JSON" aria-label="Export config">
|
||||
<Button variant="ghost" size="sm" onClick={handleExport} title={t.config.exportConfig} aria-label={t.config.exportConfig}>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => fileInputRef.current?.click()} title="Import config from JSON" aria-label="Import config">
|
||||
<Button variant="ghost" size="sm" onClick={() => fileInputRef.current?.click()} title={t.config.importConfig} aria-label={t.config.importConfig}>
|
||||
<Upload className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<input ref={fileInputRef} type="file" accept=".json" className="hidden" onChange={handleImport} />
|
||||
<Button variant="ghost" size="sm" onClick={handleReset} title="Reset to defaults" aria-label="Reset to defaults">
|
||||
<Button variant="ghost" size="sm" onClick={handleReset} title={t.config.resetDefaults} aria-label={t.config.resetDefaults}>
|
||||
<RotateCcw className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
|
||||
|
|
@ -325,7 +295,7 @@ export default function ConfigPage() {
|
|||
{yamlMode ? (
|
||||
<>
|
||||
<FormInput className="h-3.5 w-3.5" />
|
||||
Form
|
||||
{t.common.form}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
|
@ -338,12 +308,12 @@ export default function ConfigPage() {
|
|||
{yamlMode ? (
|
||||
<Button size="sm" onClick={handleYamlSave} disabled={yamlSaving} className="gap-1.5">
|
||||
<Save className="h-3.5 w-3.5" />
|
||||
{yamlSaving ? "Saving..." : "Save"}
|
||||
{yamlSaving ? t.common.saving : t.common.save}
|
||||
</Button>
|
||||
) : (
|
||||
<Button size="sm" onClick={handleSave} disabled={saving} className="gap-1.5">
|
||||
<Save className="h-3.5 w-3.5" />
|
||||
{saving ? "Saving..." : "Save"}
|
||||
{saving ? t.common.saving : t.common.save}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -355,7 +325,7 @@ export default function ConfigPage() {
|
|||
<CardHeader className="py-3 px-4">
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<FileText className="h-4 w-4" />
|
||||
Raw YAML Configuration
|
||||
{t.config.rawYaml}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
|
|
@ -384,7 +354,7 @@ export default function ConfigPage() {
|
|||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Input
|
||||
className="pl-8 h-8 text-xs"
|
||||
placeholder="Search..."
|
||||
placeholder={t.common.search}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
|
|
@ -411,13 +381,13 @@ export default function ConfigPage() {
|
|||
setSearchQuery("");
|
||||
setActiveCategory(cat);
|
||||
}}
|
||||
className={`group flex items-center gap-2 px-2.5 py-1.5 text-left text-xs transition-colors cursor-pointer ${
|
||||
className={`group flex items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-xs transition-colors cursor-pointer ${
|
||||
isActive
|
||||
? "bg-primary/10 text-primary font-medium"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-muted/50"
|
||||
}`}
|
||||
>
|
||||
<CategoryIcon cat={cat} className="h-4 w-4 shrink-0" />
|
||||
<span className="text-sm leading-none">{CATEGORY_ICONS[cat] || "📄"}</span>
|
||||
<span className="flex-1 truncate">{prettyCategoryName(cat)}</span>
|
||||
<span className={`text-[10px] tabular-nums ${isActive ? "text-primary/60" : "text-muted-foreground/50"}`}>
|
||||
{categoryCounts[cat] || 0}
|
||||
|
|
@ -441,17 +411,17 @@ export default function ConfigPage() {
|
|||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<Search className="h-4 w-4" />
|
||||
Search Results
|
||||
{t.config.searchResults}
|
||||
</CardTitle>
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
{searchMatchedFields.length} field{searchMatchedFields.length !== 1 ? "s" : ""}
|
||||
{searchMatchedFields.length} {t.config.fields.replace("{s}", searchMatchedFields.length !== 1 ? "s" : "")}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-2 px-4 pb-4">
|
||||
{searchMatchedFields.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-8">
|
||||
No fields match "<span className="text-foreground">{searchQuery}</span>"
|
||||
{t.config.noFieldsMatch.replace("{query}", searchQuery)}
|
||||
</p>
|
||||
) : (
|
||||
renderFields(searchMatchedFields, true)
|
||||
|
|
@ -464,11 +434,11 @@ export default function ConfigPage() {
|
|||
<CardHeader className="py-3 px-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<CategoryIcon cat={activeCategory} className="h-4 w-4" />
|
||||
<span className="text-base">{CATEGORY_ICONS[activeCategory] || "📄"}</span>
|
||||
{prettyCategoryName(activeCategory)}
|
||||
</CardTitle>
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
{activeFields.length} field{activeFields.length !== 1 ? "s" : ""}
|
||||
{activeFields.length} {t.config.fields.replace("{s}", activeFields.length !== 1 ? "s" : "")}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ import { Badge } from "@/components/ui/badge";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Select, SelectOption } from "@/components/ui/select";
|
||||
import { Select } from "@/components/ui/select";
|
||||
import { useI18n } from "@/i18n";
|
||||
|
||||
function formatTime(iso?: string | null): string {
|
||||
if (!iso) return "—";
|
||||
|
|
@ -29,6 +30,7 @@ export default function CronPage() {
|
|||
const [jobs, setJobs] = useState<CronJob[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const { toast, showToast } = useToast();
|
||||
const { t } = useI18n();
|
||||
|
||||
// New job form state
|
||||
const [prompt, setPrompt] = useState("");
|
||||
|
|
@ -41,7 +43,7 @@ export default function CronPage() {
|
|||
api
|
||||
.getCronJobs()
|
||||
.then(setJobs)
|
||||
.catch(() => showToast("Failed to load cron jobs", "error"))
|
||||
.catch(() => showToast(t.common.loading, "error"))
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
|
|
@ -51,7 +53,7 @@ export default function CronPage() {
|
|||
|
||||
const handleCreate = async () => {
|
||||
if (!prompt.trim() || !schedule.trim()) {
|
||||
showToast("Prompt and schedule are required", "error");
|
||||
showToast(`${t.cron.prompt} & ${t.cron.schedule} required`, "error");
|
||||
return;
|
||||
}
|
||||
setCreating(true);
|
||||
|
|
@ -62,14 +64,14 @@ export default function CronPage() {
|
|||
name: name.trim() || undefined,
|
||||
deliver,
|
||||
});
|
||||
showToast("Cron job created", "success");
|
||||
showToast(t.common.create + " ✓", "success");
|
||||
setPrompt("");
|
||||
setSchedule("");
|
||||
setName("");
|
||||
setDeliver("local");
|
||||
loadJobs();
|
||||
} catch (e) {
|
||||
showToast(`Failed to create job: ${e}`, "error");
|
||||
showToast(`${t.config.failedToSave}: ${e}`, "error");
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
|
|
@ -80,34 +82,34 @@ export default function CronPage() {
|
|||
const isPaused = job.state === "paused";
|
||||
if (isPaused) {
|
||||
await api.resumeCronJob(job.id);
|
||||
showToast(`Resumed "${job.name || job.prompt.slice(0, 30)}"`, "success");
|
||||
showToast(`${t.cron.resume}: "${job.name || job.prompt.slice(0, 30)}"`, "success");
|
||||
} else {
|
||||
await api.pauseCronJob(job.id);
|
||||
showToast(`Paused "${job.name || job.prompt.slice(0, 30)}"`, "success");
|
||||
showToast(`${t.cron.pause}: "${job.name || job.prompt.slice(0, 30)}"`, "success");
|
||||
}
|
||||
loadJobs();
|
||||
} catch (e) {
|
||||
showToast(`Action failed: ${e}`, "error");
|
||||
showToast(`${t.status.error}: ${e}`, "error");
|
||||
}
|
||||
};
|
||||
|
||||
const handleTrigger = async (job: CronJob) => {
|
||||
try {
|
||||
await api.triggerCronJob(job.id);
|
||||
showToast(`Triggered "${job.name || job.prompt.slice(0, 30)}"`, "success");
|
||||
showToast(`${t.cron.triggerNow}: "${job.name || job.prompt.slice(0, 30)}"`, "success");
|
||||
loadJobs();
|
||||
} catch (e) {
|
||||
showToast(`Trigger failed: ${e}`, "error");
|
||||
showToast(`${t.status.error}: ${e}`, "error");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (job: CronJob) => {
|
||||
try {
|
||||
await api.deleteCronJob(job.id);
|
||||
showToast(`Deleted "${job.name || job.prompt.slice(0, 30)}"`, "success");
|
||||
showToast(`${t.common.delete}: "${job.name || job.prompt.slice(0, 30)}"`, "success");
|
||||
loadJobs();
|
||||
} catch (e) {
|
||||
showToast(`Delete failed: ${e}`, "error");
|
||||
showToast(`${t.status.error}: ${e}`, "error");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -128,27 +130,27 @@ export default function CronPage() {
|
|||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Plus className="h-4 w-4" />
|
||||
New Cron Job
|
||||
{t.cron.newJob}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="cron-name">Name (optional)</Label>
|
||||
<Label htmlFor="cron-name">{t.cron.nameOptional}</Label>
|
||||
<Input
|
||||
id="cron-name"
|
||||
placeholder="e.g. Daily summary"
|
||||
placeholder={t.cron.namePlaceholder}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="cron-prompt">Prompt</Label>
|
||||
<Label htmlFor="cron-prompt">{t.cron.prompt}</Label>
|
||||
<textarea
|
||||
id="cron-prompt"
|
||||
className="flex min-h-[80px] w-full border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
placeholder="What should the agent do on each run?"
|
||||
className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
placeholder={t.cron.promptPlaceholder}
|
||||
value={prompt}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
/>
|
||||
|
|
@ -156,34 +158,34 @@ export default function CronPage() {
|
|||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="cron-schedule">Schedule (cron expression)</Label>
|
||||
<Label htmlFor="cron-schedule">{t.cron.schedule}</Label>
|
||||
<Input
|
||||
id="cron-schedule"
|
||||
placeholder="0 9 * * *"
|
||||
placeholder={t.cron.schedulePlaceholder}
|
||||
value={schedule}
|
||||
onChange={(e) => setSchedule(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="cron-deliver">Deliver to</Label>
|
||||
<Label htmlFor="cron-deliver">{t.cron.deliverTo}</Label>
|
||||
<Select
|
||||
id="cron-deliver"
|
||||
value={deliver}
|
||||
onValueChange={setDeliver}
|
||||
onValueChange={(v) => setDeliver(v)}
|
||||
>
|
||||
<SelectOption value="local">Local</SelectOption>
|
||||
<SelectOption value="telegram">Telegram</SelectOption>
|
||||
<SelectOption value="discord">Discord</SelectOption>
|
||||
<SelectOption value="slack">Slack</SelectOption>
|
||||
<SelectOption value="email">Email</SelectOption>
|
||||
<option value="local">{t.cron.delivery.local}</option>
|
||||
<option value="telegram">{t.cron.delivery.telegram}</option>
|
||||
<option value="discord">{t.cron.delivery.discord}</option>
|
||||
<option value="slack">{t.cron.delivery.slack}</option>
|
||||
<option value="email">{t.cron.delivery.email}</option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end">
|
||||
<Button onClick={handleCreate} disabled={creating} className="w-full">
|
||||
<Plus className="h-3 w-3" />
|
||||
{creating ? "Creating..." : "Create"}
|
||||
{creating ? t.common.creating : t.common.create}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -195,13 +197,13 @@ export default function CronPage() {
|
|||
<div className="flex flex-col gap-3">
|
||||
<h2 className="text-sm font-medium text-muted-foreground flex items-center gap-2">
|
||||
<Clock className="h-4 w-4" />
|
||||
Scheduled Jobs ({jobs.length})
|
||||
{t.cron.scheduledJobs} ({jobs.length})
|
||||
</h2>
|
||||
|
||||
{jobs.length === 0 && (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center text-sm text-muted-foreground">
|
||||
No cron jobs configured. Create one above.
|
||||
{t.cron.noJobs}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
|
@ -229,8 +231,8 @@ export default function CronPage() {
|
|||
)}
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span className="font-mono">{job.schedule_display}</span>
|
||||
<span>Last: {formatTime(job.last_run_at)}</span>
|
||||
<span>Next: {formatTime(job.next_run_at)}</span>
|
||||
<span>{t.cron.last}: {formatTime(job.last_run_at)}</span>
|
||||
<span>{t.cron.next}: {formatTime(job.next_run_at)}</span>
|
||||
</div>
|
||||
{job.last_error && (
|
||||
<p className="text-xs text-destructive mt-1">{job.last_error}</p>
|
||||
|
|
@ -242,8 +244,8 @@ export default function CronPage() {
|
|||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title={job.state === "paused" ? "Resume" : "Pause"}
|
||||
aria-label={job.state === "paused" ? "Resume job" : "Pause job"}
|
||||
title={job.state === "paused" ? t.cron.resume : t.cron.pause}
|
||||
aria-label={job.state === "paused" ? t.cron.resume : t.cron.pause}
|
||||
onClick={() => handlePauseResume(job)}
|
||||
>
|
||||
{job.state === "paused" ? (
|
||||
|
|
@ -256,8 +258,8 @@ export default function CronPage() {
|
|||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Trigger now"
|
||||
aria-label="Trigger job now"
|
||||
title={t.cron.triggerNow}
|
||||
aria-label={t.cron.triggerNow}
|
||||
onClick={() => handleTrigger(job)}
|
||||
>
|
||||
<Zap className="h-4 w-4" />
|
||||
|
|
@ -266,8 +268,8 @@ export default function CronPage() {
|
|||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Delete"
|
||||
aria-label="Delete job"
|
||||
title={t.common.delete}
|
||||
aria-label={t.common.delete}
|
||||
onClick={() => handleDelete(job)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import { Badge } from "@/components/ui/badge";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useI18n } from "@/i18n";
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Provider grouping */
|
||||
|
|
@ -72,11 +73,11 @@ interface ProviderGroup {
|
|||
hasAnySet: boolean;
|
||||
}
|
||||
|
||||
const CATEGORY_META: Record<string, { label: string; icon: typeof KeyRound }> = {
|
||||
provider: { label: "LLM Providers", icon: Zap },
|
||||
tool: { label: "Tool API Keys", icon: KeyRound },
|
||||
messaging: { label: "Messaging Platforms", icon: MessageSquare },
|
||||
setting: { label: "Agent Settings", icon: Settings },
|
||||
const CATEGORY_META_ICONS: Record<string, typeof KeyRound> = {
|
||||
provider: Zap,
|
||||
tool: KeyRound,
|
||||
messaging: MessageSquare,
|
||||
setting: Settings,
|
||||
};
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
|
@ -108,6 +109,7 @@ function EnvVarRow({
|
|||
onCancelEdit: (key: string) => void;
|
||||
compact?: boolean;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const isEditing = edits[varKey] !== undefined;
|
||||
const isRevealed = !!revealed[varKey];
|
||||
const displayValue = isRevealed ? revealed[varKey] : (info.redacted_value ?? "---");
|
||||
|
|
@ -124,13 +126,13 @@ function EnvVarRow({
|
|||
{info.url && (
|
||||
<a href={info.url} target="_blank" rel="noreferrer"
|
||||
className="inline-flex items-center gap-1 text-[0.65rem] text-primary hover:underline">
|
||||
Get key <ExternalLink className="h-2.5 w-2.5" />
|
||||
{t.env.getKey} <ExternalLink className="h-2.5 w-2.5" />
|
||||
</a>
|
||||
)}
|
||||
<Button size="sm" variant="outline" className="h-6 text-[0.6rem] px-2"
|
||||
onClick={() => setEdits((prev) => ({ ...prev, [varKey]: "" }))}>
|
||||
<Pencil className="h-2.5 w-2.5" />
|
||||
Set
|
||||
{t.common.set}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -149,13 +151,13 @@ function EnvVarRow({
|
|||
{info.url && (
|
||||
<a href={info.url} target="_blank" rel="noreferrer"
|
||||
className="inline-flex items-center gap-1 text-[0.65rem] text-primary hover:underline">
|
||||
Get key <ExternalLink className="h-2.5 w-2.5" />
|
||||
{t.env.getKey} <ExternalLink className="h-2.5 w-2.5" />
|
||||
</a>
|
||||
)}
|
||||
<Button size="sm" variant="outline" className="h-7 text-[0.6rem]"
|
||||
onClick={() => setEdits((prev) => ({ ...prev, [varKey]: "" }))}>
|
||||
<Pencil className="h-3 w-3" />
|
||||
Set
|
||||
{t.common.set}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -169,13 +171,13 @@ function EnvVarRow({
|
|||
<div className="flex items-center gap-2">
|
||||
<Label className="font-mono-ui text-[0.7rem]">{varKey}</Label>
|
||||
<Badge variant={info.is_set ? "success" : "outline"}>
|
||||
{info.is_set ? "Set" : "Not set"}
|
||||
{info.is_set ? t.common.set : t.env.notSet}
|
||||
</Badge>
|
||||
</div>
|
||||
{info.url && (
|
||||
<a href={info.url} target="_blank" rel="noreferrer"
|
||||
className="inline-flex items-center gap-1 text-[0.65rem] text-primary hover:underline">
|
||||
Get key <ExternalLink className="h-2.5 w-2.5" />
|
||||
{t.env.getKey} <ExternalLink className="h-2.5 w-2.5" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -200,7 +202,7 @@ function EnvVarRow({
|
|||
|
||||
{info.is_set && (
|
||||
<Button size="sm" variant="ghost" onClick={() => onReveal(varKey)}
|
||||
title={isRevealed ? "Hide value" : "Show real value"}
|
||||
title={isRevealed ? t.env.hideValue : t.env.showValue}
|
||||
aria-label={isRevealed ? `Hide ${varKey}` : `Reveal ${varKey}`}>
|
||||
{isRevealed
|
||||
? <EyeOff className="h-4 w-4" />
|
||||
|
|
@ -211,7 +213,7 @@ function EnvVarRow({
|
|||
<Button size="sm" variant="outline"
|
||||
onClick={() => setEdits((prev) => ({ ...prev, [varKey]: "" }))}>
|
||||
<Pencil className="h-3 w-3" />
|
||||
{info.is_set ? "Replace" : "Set"}
|
||||
{info.is_set ? t.common.replace : t.common.set}
|
||||
</Button>
|
||||
|
||||
{info.is_set && (
|
||||
|
|
@ -219,7 +221,7 @@ function EnvVarRow({
|
|||
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => onClear(varKey)} disabled={saving === varKey}>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
{saving === varKey ? "..." : "Clear"}
|
||||
{saving === varKey ? "..." : t.common.clear}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -229,15 +231,15 @@ function EnvVarRow({
|
|||
<div className="flex items-center gap-2">
|
||||
<Input autoFocus type="text" value={edits[varKey]}
|
||||
onChange={(e) => setEdits((prev) => ({ ...prev, [varKey]: e.target.value }))}
|
||||
placeholder={info.is_set ? `Replace current value (${info.redacted_value ?? "---"})` : "Enter value..."}
|
||||
placeholder={info.is_set ? t.env.replaceCurrentValue.replace("{preview}", info.redacted_value ?? "---") : t.env.enterValue}
|
||||
className="flex-1 font-mono-ui text-xs" />
|
||||
<Button size="sm" onClick={() => onSave(varKey)}
|
||||
disabled={saving === varKey || !edits[varKey]}>
|
||||
<Save className="h-3 w-3" />
|
||||
{saving === varKey ? "..." : "Save"}
|
||||
{saving === varKey ? "..." : t.common.save}
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" onClick={() => onCancelEdit(varKey)}>
|
||||
<X className="h-3 w-3" /> Cancel
|
||||
<X className="h-3 w-3" /> {t.common.cancel}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -271,6 +273,7 @@ function ProviderGroupCard({
|
|||
onCancelEdit: (key: string) => void;
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const { t } = useI18n();
|
||||
|
||||
// Separate API keys from base URLs and other settings
|
||||
const apiKeys = group.entries.filter(([k]) => k.endsWith("_API_KEY") || k.endsWith("_TOKEN"));
|
||||
|
|
@ -292,10 +295,10 @@ function ProviderGroupCard({
|
|||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
{expanded ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" /> : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />}
|
||||
<span className="font-semibold text-sm tracking-wide">{group.name}</span>
|
||||
<span className="font-semibold text-sm tracking-wide">{group.name === "Other" ? t.common.other : group.name}</span>
|
||||
{hasAnyConfigured && (
|
||||
<Badge variant="success" className="text-[0.6rem]">
|
||||
{configuredCount} set
|
||||
{configuredCount} {t.common.set.toLowerCase()}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -304,11 +307,11 @@ function ProviderGroupCard({
|
|||
<a href={keyUrl} target="_blank" rel="noreferrer"
|
||||
className="inline-flex items-center gap-1 text-[0.65rem] text-primary hover:underline"
|
||||
onClick={(e) => e.stopPropagation()}>
|
||||
Get key <ExternalLink className="h-2.5 w-2.5" />
|
||||
{t.env.getKey} <ExternalLink className="h-2.5 w-2.5" />
|
||||
</a>
|
||||
)}
|
||||
<span className="text-[0.65rem] text-muted-foreground/60">
|
||||
{group.entries.length} key{group.entries.length !== 1 ? "s" : ""}
|
||||
{t.env.keysCount.replace("{count}", String(group.entries.length)).replace("{s}", group.entries.length !== 1 ? "s" : "")}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -357,6 +360,7 @@ export default function EnvPage() {
|
|||
const [saving, setSaving] = useState<string | null>(null);
|
||||
const [showAdvanced, setShowAdvanced] = useState(true); // Show all providers by default
|
||||
const { toast, showToast } = useToast();
|
||||
const { t } = useI18n();
|
||||
|
||||
useEffect(() => {
|
||||
api.getEnvVars().then(setVars).catch(() => {});
|
||||
|
|
@ -378,9 +382,9 @@ export default function EnvPage() {
|
|||
);
|
||||
setEdits((prev) => { const n = { ...prev }; delete n[key]; return n; });
|
||||
setRevealed((prev) => { const n = { ...prev }; delete n[key]; return n; });
|
||||
showToast(`${key} saved`, "success");
|
||||
showToast(`${key} ${t.common.save.toLowerCase()}d`, "success");
|
||||
} catch (e) {
|
||||
showToast(`Failed to save ${key}: ${e}`, "error");
|
||||
showToast(`${t.config.failedToSave} ${key}: ${e}`, "error");
|
||||
} finally {
|
||||
setSaving(null);
|
||||
}
|
||||
|
|
@ -397,9 +401,9 @@ export default function EnvPage() {
|
|||
);
|
||||
setEdits((prev) => { const n = { ...prev }; delete n[key]; return n; });
|
||||
setRevealed((prev) => { const n = { ...prev }; delete n[key]; return n; });
|
||||
showToast(`${key} removed`, "success");
|
||||
showToast(`${key} ${t.common.removed}`, "success");
|
||||
} catch (e) {
|
||||
showToast(`Failed to remove ${key}: ${e}`, "error");
|
||||
showToast(`${t.common.failedToRemove} ${key}: ${e}`, "error");
|
||||
} finally {
|
||||
setSaving(null);
|
||||
}
|
||||
|
|
@ -414,7 +418,7 @@ export default function EnvPage() {
|
|||
const resp = await api.revealEnvVar(key);
|
||||
setRevealed((prev) => ({ ...prev, [key]: resp.value }));
|
||||
} catch {
|
||||
showToast(`Failed to reveal ${key}`, "error");
|
||||
showToast(`${t.common.failedToReveal} ${key}`, "error");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -447,7 +451,12 @@ export default function EnvPage() {
|
|||
}))
|
||||
.sort((a, b) => a.priority - b.priority);
|
||||
|
||||
// Non-provider categories
|
||||
// Non-provider categories — use translated labels
|
||||
const CATEGORY_META_LABELS: Record<string, string> = {
|
||||
tool: t.app.nav.keys,
|
||||
messaging: t.common.messaging,
|
||||
setting: t.app.nav.config,
|
||||
};
|
||||
const otherCategories = ["tool", "messaging", "setting"];
|
||||
const nonProvider = otherCategories.map((cat) => {
|
||||
const entries = Object.entries(vars).filter(
|
||||
|
|
@ -456,7 +465,8 @@ export default function EnvPage() {
|
|||
const setEntries = entries.filter(([, info]) => info.is_set);
|
||||
const unsetEntries = entries.filter(([, info]) => !info.is_set);
|
||||
return {
|
||||
...CATEGORY_META[cat],
|
||||
label: CATEGORY_META_LABELS[cat] ?? cat,
|
||||
icon: CATEGORY_META_ICONS[cat] ?? KeyRound,
|
||||
category: cat,
|
||||
setEntries,
|
||||
unsetEntries,
|
||||
|
|
@ -465,7 +475,7 @@ export default function EnvPage() {
|
|||
});
|
||||
|
||||
return { providerGroups: groups, nonProviderGrouped: nonProvider };
|
||||
}, [vars, showAdvanced]);
|
||||
}, [vars, showAdvanced, t]);
|
||||
|
||||
if (!vars) {
|
||||
return (
|
||||
|
|
@ -485,18 +495,18 @@ export default function EnvPage() {
|
|||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Manage API keys and secrets stored in <code>~/.hermes/.env</code>
|
||||
{t.env.description} <code>~/.hermes/.env</code>
|
||||
</p>
|
||||
<p className="text-[0.7rem] text-muted-foreground/70">
|
||||
Changes are saved to disk immediately. Active sessions pick up new keys automatically.
|
||||
{t.env.changesNote}
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowAdvanced(!showAdvanced)}>
|
||||
{showAdvanced ? "Hide Advanced" : "Show Advanced"}
|
||||
{showAdvanced ? t.env.hideAdvanced : t.env.showAdvanced}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* ═══════════════ OAuth Logins (sits above API keys — distinct auth mode) ══ */}
|
||||
{/* ═══════════════ OAuth Logins ══ */}
|
||||
<OAuthProvidersCard
|
||||
onError={(msg) => showToast(msg, "error")}
|
||||
onSuccess={(msg) => showToast(msg, "success")}
|
||||
|
|
@ -507,10 +517,10 @@ export default function EnvPage() {
|
|||
<CardHeader className="sticky top-14 z-10 bg-card border-b border-border">
|
||||
<div className="flex items-center gap-2">
|
||||
<Zap className="h-5 w-5 text-muted-foreground" />
|
||||
<CardTitle className="text-base">LLM Providers</CardTitle>
|
||||
<CardTitle className="text-base">{t.env.llmProviders}</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
{configuredProviders} of {totalProviders} providers configured
|
||||
{t.env.providersConfigured.replace("{configured}", String(configuredProviders)).replace("{total}", String(totalProviders))}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
|
|
@ -538,7 +548,7 @@ export default function EnvPage() {
|
|||
<CardTitle className="text-base">{label}</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
{setEntries.length} of {totalEntries} configured
|
||||
{setEntries.length} {t.common.of} {totalEntries} {t.common.configured}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
|
|
@ -595,6 +605,7 @@ function CollapsibleUnset({
|
|||
onCancelEdit: (key: string) => void;
|
||||
}) {
|
||||
const [collapsed, setCollapsed] = useState(true);
|
||||
const { t } = useI18n();
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -606,7 +617,7 @@ function CollapsibleUnset({
|
|||
{collapsed
|
||||
? <ChevronRight className="h-3 w-3" />
|
||||
: <ChevronDown className="h-3 w-3" />}
|
||||
<span>{unsetEntries.length} not configured</span>
|
||||
<span>{t.env.notConfigured.replace("{count}", String(unsetEntries.length))}</span>
|
||||
</button>
|
||||
|
||||
{!collapsed && unsetEntries.map(([key, info]) => (
|
||||
|
|
|
|||
|
|
@ -1,19 +1,12 @@
|
|||
import { useEffect, useState, useCallback, useRef } from "react";
|
||||
import {
|
||||
AlertTriangle,
|
||||
Bug,
|
||||
ChevronRight,
|
||||
FileText,
|
||||
Hash,
|
||||
Layers,
|
||||
RefreshCw,
|
||||
} from "lucide-react";
|
||||
import { FileText, RefreshCw } from "lucide-react";
|
||||
import { api } from "@/lib/api";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useI18n } from "@/i18n";
|
||||
|
||||
const FILES = ["agent", "errors", "gateway"] as const;
|
||||
const LEVELS = ["ALL", "DEBUG", "INFO", "WARNING", "ERROR"] as const;
|
||||
|
|
@ -35,6 +28,37 @@ const LINE_COLORS: Record<string, string> = {
|
|||
debug: "text-muted-foreground/60",
|
||||
};
|
||||
|
||||
function FilterBar<T extends string>({
|
||||
label,
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
label: string;
|
||||
options: readonly T[];
|
||||
value: T;
|
||||
onChange: (v: T) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-xs text-muted-foreground font-medium w-20 shrink-0">{label}</span>
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{options.map((opt) => (
|
||||
<Button
|
||||
key={opt}
|
||||
variant={value === opt ? "default" : "outline"}
|
||||
size="sm"
|
||||
className="text-xs h-7 px-2.5"
|
||||
onClick={() => onChange(opt)}
|
||||
>
|
||||
{opt}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function LogsPage() {
|
||||
const [file, setFile] = useState<(typeof FILES)[number]>("agent");
|
||||
const [level, setLevel] = useState<(typeof LEVELS)[number]>("ALL");
|
||||
|
|
@ -45,6 +69,7 @@ export default function LogsPage() {
|
|||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const { t } = useI18n();
|
||||
|
||||
const fetchLogs = useCallback(() => {
|
||||
setLoading(true);
|
||||
|
|
@ -53,6 +78,7 @@ export default function LogsPage() {
|
|||
.getLogs({ file, lines: lineCount, level, component })
|
||||
.then((resp) => {
|
||||
setLines(resp.lines);
|
||||
// Auto-scroll to bottom
|
||||
setTimeout(() => {
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
|
|
@ -63,10 +89,12 @@ export default function LogsPage() {
|
|||
.finally(() => setLoading(false));
|
||||
}, [file, lineCount, level, component]);
|
||||
|
||||
// Initial load + refetch on filter change
|
||||
useEffect(() => {
|
||||
fetchLogs();
|
||||
}, [fetchLogs]);
|
||||
|
||||
// Auto-refresh polling
|
||||
useEffect(() => {
|
||||
if (!autoRefresh) return;
|
||||
const interval = setInterval(fetchLogs, 5000);
|
||||
|
|
@ -74,176 +102,76 @@ export default function LogsPage() {
|
|||
}, [autoRefresh, fetchLogs]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* ═══════════════ Header ═══════════════ */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{file} / {level.toLowerCase()} / {component}
|
||||
</span>
|
||||
{loading && (
|
||||
<div className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch checked={autoRefresh} onCheckedChange={setAutoRefresh} />
|
||||
<Label className="text-xs">Auto-refresh</Label>
|
||||
{autoRefresh && (
|
||||
<Badge variant="success" className="text-[10px]">
|
||||
<span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
|
||||
Live
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={fetchLogs} className="text-xs h-7">
|
||||
<RefreshCw className="h-3 w-3 mr-1" />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ═══════════════ Sidebar + Content ═══════════════ */}
|
||||
<div className="flex flex-col sm:flex-row gap-4" style={{ minHeight: "calc(100vh - 180px)" }}>
|
||||
{/* ---- Sidebar ---- */}
|
||||
<div className="sm:w-52 sm:shrink-0">
|
||||
<div className="sm:sticky sm:top-[72px] flex flex-col gap-1">
|
||||
{/* File section */}
|
||||
<div className="flex sm:flex-col gap-1 overflow-x-auto sm:overflow-x-visible scrollbar-none pb-1 sm:pb-0">
|
||||
<SidebarHeading icon={FileText} label="File" />
|
||||
{FILES.map((f) => (
|
||||
<SidebarItem
|
||||
key={f}
|
||||
label={f}
|
||||
active={file === f}
|
||||
indented
|
||||
onClick={() => setFile(f)}
|
||||
<div className="flex flex-col gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="h-5 w-5 text-muted-foreground" />
|
||||
<CardTitle className="text-base">{t.logs.title}</CardTitle>
|
||||
{loading && (
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={autoRefresh}
|
||||
onCheckedChange={setAutoRefresh}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="hidden sm:block border-t border-border my-1" />
|
||||
|
||||
<SidebarHeading icon={AlertTriangle} label="Level" />
|
||||
{LEVELS.map((l) => (
|
||||
<SidebarItem
|
||||
key={l}
|
||||
label={l.toLowerCase()}
|
||||
active={level === l}
|
||||
indented
|
||||
onClick={() => setLevel(l)}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="hidden sm:block border-t border-border my-1" />
|
||||
|
||||
<SidebarHeading icon={Layers} label="Component" />
|
||||
{COMPONENTS.map((c) => (
|
||||
<SidebarItem
|
||||
key={c}
|
||||
label={c}
|
||||
active={component === c}
|
||||
indented
|
||||
onClick={() => setComponent(c)}
|
||||
/>
|
||||
))}
|
||||
|
||||
<div className="hidden sm:block border-t border-border my-1" />
|
||||
|
||||
<SidebarHeading icon={Hash} label="Lines" />
|
||||
{LINE_COUNTS.map((n) => (
|
||||
<SidebarItem
|
||||
key={n}
|
||||
label={String(n)}
|
||||
active={lineCount === n}
|
||||
indented
|
||||
onClick={() => setLineCount(n)}
|
||||
/>
|
||||
))}
|
||||
<Label className="text-xs">{t.logs.autoRefresh}</Label>
|
||||
{autoRefresh && (
|
||||
<Badge variant="success" className="text-[10px]">
|
||||
<span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
|
||||
{t.common.live}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={fetchLogs} className="text-xs h-7">
|
||||
<RefreshCw className="h-3 w-3 mr-1" />
|
||||
{t.common.refresh}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{/* ---- Content ---- */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<Card>
|
||||
<CardHeader className="py-3 px-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<Bug className="h-4 w-4" />
|
||||
{file} logs
|
||||
</CardTitle>
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
{lines.length} line{lines.length !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4">
|
||||
{error && (
|
||||
<div className="bg-destructive/10 border border-destructive/20 p-3 mb-4">
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
<CardContent>
|
||||
<div className="flex flex-col gap-3 mb-4">
|
||||
<FilterBar label={t.logs.file} options={FILES} value={file} onChange={setFile} />
|
||||
<FilterBar label={t.logs.level} options={LEVELS} value={level} onChange={setLevel} />
|
||||
<FilterBar label={t.logs.component} options={COMPONENTS} value={component} onChange={setComponent} />
|
||||
<FilterBar
|
||||
label={t.logs.lines}
|
||||
options={LINE_COUNTS.map(String) as unknown as readonly string[]}
|
||||
value={String(lineCount)}
|
||||
onChange={(v) => setLineCount(Number(v) as (typeof LINE_COUNTS)[number])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 border border-destructive/20 p-3 mb-4">
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="border border-border bg-background p-4 font-mono-ui text-xs leading-5 overflow-auto max-h-[600px] min-h-[200px]"
|
||||
>
|
||||
{lines.length === 0 && !loading && (
|
||||
<p className="text-muted-foreground text-center py-8">{t.logs.noLogLines}</p>
|
||||
)}
|
||||
{lines.map((line, i) => {
|
||||
const cls = classifyLine(line);
|
||||
return (
|
||||
<div key={i} className={`${LINE_COLORS[cls]} hover:bg-secondary/20 px-1 -mx-1 rounded`}>
|
||||
{line}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="border border-border bg-background p-4 font-mono-ui text-xs leading-5 overflow-auto max-h-[600px] min-h-[200px]"
|
||||
>
|
||||
{lines.length === 0 && !loading && (
|
||||
<p className="text-muted-foreground text-center py-8">No log lines found</p>
|
||||
)}
|
||||
{lines.map((line, i) => {
|
||||
const cls = classifyLine(line);
|
||||
return (
|
||||
<div key={i} className={`${LINE_COLORS[cls]} hover:bg-secondary/20 px-1 -mx-1`}>
|
||||
{line}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarHeading({ icon: Icon, label }: SidebarHeadingProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60">
|
||||
<Icon className="h-3.5 w-3.5" />
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarItem({ label, active, indented, onClick }: SidebarItemProps) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={`group flex items-center gap-2 ${indented ? "sm:pl-6" : ""} px-2.5 py-1.5 text-left text-xs transition-colors cursor-pointer ${
|
||||
active
|
||||
? "bg-primary/10 text-primary font-medium"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-muted/50"
|
||||
}`}
|
||||
>
|
||||
<span className="flex-1 truncate">{label}</span>
|
||||
{active && <ChevronRight className="h-3 w-3 text-primary/50 shrink-0" />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
interface SidebarHeadingProps {
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface SidebarItemProps {
|
||||
label: string;
|
||||
active: boolean;
|
||||
indented?: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,13 +20,7 @@ import { Markdown } from "@/components/Markdown";
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
const ROLE_STYLES: Record<string, { bg: string; text: string; label: string }> = {
|
||||
user: { bg: "bg-primary/10", text: "text-primary", label: "User" },
|
||||
assistant: { bg: "bg-success/10", text: "text-success", label: "Assistant" },
|
||||
system: { bg: "bg-muted", text: "text-muted-foreground", label: "System" },
|
||||
tool: { bg: "bg-warning/10", text: "text-warning", label: "Tool" },
|
||||
};
|
||||
import { useI18n } from "@/i18n";
|
||||
|
||||
const SOURCE_CONFIG: Record<string, { icon: typeof Terminal; color: string }> = {
|
||||
cli: { icon: Terminal, color: "text-primary" },
|
||||
|
|
@ -50,7 +44,7 @@ function SnippetHighlight({ snippet }: { snippet: string }) {
|
|||
parts.push(snippet.slice(last, match.index));
|
||||
}
|
||||
parts.push(
|
||||
<mark key={i++} className="bg-warning/30 text-warning px-0.5">
|
||||
<mark key={i++} className="bg-warning/30 text-warning rounded-sm px-0.5">
|
||||
{match[1]}
|
||||
</mark>
|
||||
);
|
||||
|
|
@ -68,6 +62,7 @@ function SnippetHighlight({ snippet }: { snippet: string }) {
|
|||
|
||||
function ToolCallBlock({ toolCall }: { toolCall: { id: string; function: { name: string; arguments: string } } }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const { t } = useI18n();
|
||||
|
||||
let args = toolCall.function.arguments;
|
||||
try {
|
||||
|
|
@ -77,12 +72,12 @@ function ToolCallBlock({ toolCall }: { toolCall: { id: string; function: { name:
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="mt-2 border border-warning/20 bg-warning/5">
|
||||
<div className="mt-2 rounded-md border border-warning/20 bg-warning/5">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center gap-2 px-3 py-2 text-xs text-warning cursor-pointer hover:bg-warning/10 transition-colors"
|
||||
onClick={() => setOpen(!open)}
|
||||
aria-label={`${open ? "Collapse" : "Expand"} tool call ${toolCall.function.name}`}
|
||||
aria-label={`${open ? t.common.collapse : t.common.expand} tool call ${toolCall.function.name}`}
|
||||
>
|
||||
{open ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
|
||||
<span className="font-mono-ui font-medium">{toolCall.function.name}</span>
|
||||
|
|
@ -98,8 +93,17 @@ function ToolCallBlock({ toolCall }: { toolCall: { id: string; function: { name:
|
|||
}
|
||||
|
||||
function MessageBubble({ msg, highlight }: { msg: SessionMessage; highlight?: string }) {
|
||||
const { t } = useI18n();
|
||||
|
||||
const ROLE_STYLES: Record<string, { bg: string; text: string; label: string }> = {
|
||||
user: { bg: "bg-primary/10", text: "text-primary", label: t.sessions.roles.user },
|
||||
assistant: { bg: "bg-success/10", text: "text-success", label: t.sessions.roles.assistant },
|
||||
system: { bg: "bg-muted", text: "text-muted-foreground", label: t.sessions.roles.system },
|
||||
tool: { bg: "bg-warning/10", text: "text-warning", label: t.sessions.roles.tool },
|
||||
};
|
||||
|
||||
const style = ROLE_STYLES[msg.role] ?? ROLE_STYLES.system;
|
||||
const label = msg.tool_name ? `Tool: ${msg.tool_name}` : style.label;
|
||||
const label = msg.tool_name ? `${t.sessions.roles.tool}: ${msg.tool_name}` : style.label;
|
||||
|
||||
// Check if any search term appears as a prefix of any word in content
|
||||
const isHit = (() => {
|
||||
|
|
@ -119,7 +123,7 @@ function MessageBubble({ msg, highlight }: { msg: SessionMessage; highlight?: st
|
|||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className={`text-xs font-semibold ${style.text}`}>{label}</span>
|
||||
{isHit && (
|
||||
<Badge variant="warning" className="text-[9px] py-0 px-1.5">match</Badge>
|
||||
<Badge variant="warning" className="text-[9px] py-0 px-1.5">{t.common.match}</Badge>
|
||||
)}
|
||||
{msg.timestamp && (
|
||||
<span className="text-[10px] text-muted-foreground">{timeAgo(msg.timestamp)}</span>
|
||||
|
|
@ -184,6 +188,7 @@ function SessionRow({
|
|||
const [messages, setMessages] = useState<SessionMessage[] | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { t } = useI18n();
|
||||
|
||||
useEffect(() => {
|
||||
if (isExpanded && messages === null && !loading) {
|
||||
|
|
@ -217,23 +222,23 @@ function SessionRow({
|
|||
<div className="flex flex-col gap-0.5 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-sm truncate pr-2 ${hasTitle ? "font-medium" : "text-muted-foreground italic"}`}>
|
||||
{hasTitle ? session.title : (session.preview ? session.preview.slice(0, 60) : "Untitled session")}
|
||||
{hasTitle ? session.title : (session.preview ? session.preview.slice(0, 60) : t.sessions.untitledSession)}
|
||||
</span>
|
||||
{session.is_active && (
|
||||
<Badge variant="success" className="text-[10px] shrink-0">
|
||||
<span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
|
||||
Live
|
||||
{t.common.live}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<span className="truncate max-w-[120px] sm:max-w-[180px]">{(session.model ?? "unknown").split("/").pop()}</span>
|
||||
<span className="truncate max-w-[120px] sm:max-w-[180px]">{(session.model ?? t.common.unknown).split("/").pop()}</span>
|
||||
<span className="text-border">·</span>
|
||||
<span>{session.message_count} msgs</span>
|
||||
<span>{session.message_count} {t.common.msgs}</span>
|
||||
{session.tool_call_count > 0 && (
|
||||
<>
|
||||
<span className="text-border">·</span>
|
||||
<span>{session.tool_call_count} tools</span>
|
||||
<span>{session.tool_call_count} {t.common.tools}</span>
|
||||
</>
|
||||
)}
|
||||
<span className="text-border">·</span>
|
||||
|
|
@ -253,7 +258,7 @@ function SessionRow({
|
|||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-muted-foreground hover:text-destructive"
|
||||
aria-label="Delete session"
|
||||
aria-label={t.sessions.deleteSession}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
|
|
@ -275,7 +280,7 @@ function SessionRow({
|
|||
<p className="text-sm text-destructive py-4 text-center">{error}</p>
|
||||
)}
|
||||
{messages && messages.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground py-4 text-center">No messages</p>
|
||||
<p className="text-sm text-muted-foreground py-4 text-center">{t.sessions.noMessages}</p>
|
||||
)}
|
||||
{messages && messages.length > 0 && (
|
||||
<MessageList messages={messages} highlight={searchQuery} />
|
||||
|
|
@ -297,6 +302,7 @@ export default function SessionsPage() {
|
|||
const [searchResults, setSearchResults] = useState<SessionSearchResult[] | null>(null);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
|
||||
const { t } = useI18n();
|
||||
|
||||
const loadSessions = useCallback((p: number) => {
|
||||
setLoading(true);
|
||||
|
|
@ -377,7 +383,7 @@ export default function SessionsPage() {
|
|||
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageSquare className="h-5 w-5 text-muted-foreground" />
|
||||
<h1 className="text-base font-semibold">Sessions</h1>
|
||||
<h1 className="text-base font-semibold">{t.sessions.title}</h1>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{total}
|
||||
</Badge>
|
||||
|
|
@ -389,7 +395,7 @@ export default function SessionsPage() {
|
|||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
)}
|
||||
<Input
|
||||
placeholder="Search message content..."
|
||||
placeholder={t.sessions.searchPlaceholder}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-8 pr-7 h-8 text-xs"
|
||||
|
|
@ -410,10 +416,10 @@ export default function SessionsPage() {
|
|||
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
|
||||
<Clock className="h-8 w-8 mb-3 opacity-40" />
|
||||
<p className="text-sm font-medium">
|
||||
{search ? "No sessions match your search" : "No sessions yet"}
|
||||
{search ? t.sessions.noMatch : t.sessions.noSessions}
|
||||
</p>
|
||||
{!search && (
|
||||
<p className="text-xs mt-1 text-muted-foreground/60">Start a conversation to see it here</p>
|
||||
<p className="text-xs mt-1 text-muted-foreground/60">{t.sessions.startConversation}</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -438,7 +444,7 @@ export default function SessionsPage() {
|
|||
{!searchResults && total > PAGE_SIZE && (
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{page * PAGE_SIZE + 1}–{Math.min((page + 1) * PAGE_SIZE, total)} of {total}
|
||||
{page * PAGE_SIZE + 1}–{Math.min((page + 1) * PAGE_SIZE, total)} {t.common.of} {total}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
|
|
@ -447,12 +453,12 @@ export default function SessionsPage() {
|
|||
className="h-7 w-7 p-0"
|
||||
disabled={page === 0}
|
||||
onClick={() => setPage((p) => p - 1)}
|
||||
aria-label="Previous page"
|
||||
aria-label={t.sessions.previousPage}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="text-xs text-muted-foreground px-2">
|
||||
Page {page + 1} of {Math.ceil(total / PAGE_SIZE)}
|
||||
{t.common.page} {page + 1} {t.common.of} {Math.ceil(total / PAGE_SIZE)}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
|
|
@ -460,7 +466,7 @@ export default function SessionsPage() {
|
|||
className="h-7 w-7 p-0"
|
||||
disabled={(page + 1) * PAGE_SIZE >= total}
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
aria-label="Next page"
|
||||
aria-label={t.sessions.nextPage}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,13 @@
|
|||
import { useEffect, useState, useMemo } from "react";
|
||||
import {
|
||||
Blocks,
|
||||
Bot,
|
||||
BrainCircuit,
|
||||
ChevronRight,
|
||||
Code,
|
||||
Database,
|
||||
FileCode,
|
||||
FileSearch,
|
||||
Globe,
|
||||
Image,
|
||||
LayoutDashboard,
|
||||
Monitor,
|
||||
Package,
|
||||
Paintbrush,
|
||||
Search,
|
||||
Server,
|
||||
Shield,
|
||||
Sparkles,
|
||||
Terminal,
|
||||
Wrench,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Filter,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import type { ComponentType } from "react";
|
||||
import { api } from "@/lib/api";
|
||||
import type { SkillInfo, ToolsetInfo } from "@/lib/api";
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
|
|
@ -31,11 +16,19 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { useI18n } from "@/i18n";
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Types & helpers */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
interface CategoryGroup {
|
||||
name: string; // display name
|
||||
key: string; // raw key (or "__none__")
|
||||
skills: SkillInfo[];
|
||||
enabledCount: number;
|
||||
}
|
||||
|
||||
const CATEGORY_LABELS: Record<string, string> = {
|
||||
mlops: "MLOps",
|
||||
"mlops/cloud": "MLOps / Cloud",
|
||||
|
|
@ -53,8 +46,8 @@ const CATEGORY_LABELS: Record<string, string> = {
|
|||
ui: "UI",
|
||||
};
|
||||
|
||||
function prettyCategory(raw: string | null | undefined): string {
|
||||
if (!raw) return "General";
|
||||
function prettyCategory(raw: string | null | undefined, generalLabel: string): string {
|
||||
if (!raw) return generalLabel;
|
||||
if (CATEGORY_LABELS[raw]) return CATEGORY_LABELS[raw];
|
||||
return raw
|
||||
.split(/[-_/]/)
|
||||
|
|
@ -62,63 +55,31 @@ function prettyCategory(raw: string | null | undefined): string {
|
|||
.join(" ");
|
||||
}
|
||||
|
||||
const TOOLSET_ICONS: Record<string, ComponentType<{ className?: string }>> = {
|
||||
terminal: Terminal,
|
||||
shell: Terminal,
|
||||
browser: Globe,
|
||||
web: Globe,
|
||||
code: Code,
|
||||
coding: Code,
|
||||
python: FileCode,
|
||||
files: FileSearch,
|
||||
file: FileSearch,
|
||||
search: Search,
|
||||
image: Image,
|
||||
vision: Image,
|
||||
memory: BrainCircuit,
|
||||
database: Database,
|
||||
db: Database,
|
||||
mcp: Blocks,
|
||||
ai: Sparkles,
|
||||
agent: Bot,
|
||||
security: Shield,
|
||||
server: Server,
|
||||
deploy: Server,
|
||||
ui: Paintbrush,
|
||||
ux: LayoutDashboard,
|
||||
display: Monitor,
|
||||
};
|
||||
|
||||
function toolsetIcon(name: string, label: string): ComponentType<{ className?: string }> {
|
||||
const lower = name.toLowerCase();
|
||||
if (TOOLSET_ICONS[lower]) return TOOLSET_ICONS[lower];
|
||||
for (const [key, icon] of Object.entries(TOOLSET_ICONS)) {
|
||||
if (lower.includes(key) || label.toLowerCase().includes(key)) return icon;
|
||||
}
|
||||
return Wrench;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Component */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export default function SkillsPage() {
|
||||
const [view, setView] = useState<"skills" | "toolsets">("skills");
|
||||
const [skills, setSkills] = useState<SkillInfo[]>([]);
|
||||
const [toolsets, setToolsets] = useState<ToolsetInfo[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState("");
|
||||
const [activeCategory, setActiveCategory] = useState<string | null>(null);
|
||||
const [togglingSkills, setTogglingSkills] = useState<Set<string>>(new Set());
|
||||
// Start collapsed by default
|
||||
const [collapsedCategories, setCollapsedCategories] = useState<Set<string> | "all">("all");
|
||||
const { toast, showToast } = useToast();
|
||||
const { t } = useI18n();
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([api.getSkills(), api.getToolsets()])
|
||||
.then(([s, t]) => {
|
||||
.then(([s, tsets]) => {
|
||||
setSkills(s);
|
||||
setToolsets(t);
|
||||
setToolsets(tsets);
|
||||
})
|
||||
.catch(() => showToast("Failed to load skills/toolsets", "error"))
|
||||
.catch(() => showToast(t.common.loading, "error"))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
|
|
@ -133,11 +94,11 @@ export default function SkillsPage() {
|
|||
)
|
||||
);
|
||||
showToast(
|
||||
`${skill.name} ${skill.enabled ? "disabled" : "enabled"}`,
|
||||
`${skill.name} ${skill.enabled ? t.common.disabled : t.common.enabled}`,
|
||||
"success"
|
||||
);
|
||||
} catch {
|
||||
showToast(`Failed to toggle ${skill.name}`, "error");
|
||||
showToast(`${t.common.failedToToggle} ${skill.name}`, "error");
|
||||
} finally {
|
||||
setTogglingSkills((prev) => {
|
||||
const next = new Set(prev);
|
||||
|
|
@ -164,6 +125,27 @@ export default function SkillsPage() {
|
|||
});
|
||||
}, [skills, search, lowerSearch, activeCategory]);
|
||||
|
||||
const categoryGroups: CategoryGroup[] = useMemo(() => {
|
||||
const map = new Map<string, SkillInfo[]>();
|
||||
for (const s of filteredSkills) {
|
||||
const key = s.category || "__none__";
|
||||
if (!map.has(key)) map.set(key, []);
|
||||
map.get(key)!.push(s);
|
||||
}
|
||||
// Sort: General first, then alphabetical
|
||||
const entries = [...map.entries()].sort((a, b) => {
|
||||
if (a[0] === "__none__") return -1;
|
||||
if (b[0] === "__none__") return 1;
|
||||
return a[0].localeCompare(b[0]);
|
||||
});
|
||||
return entries.map(([key, list]) => ({
|
||||
key,
|
||||
name: prettyCategory(key === "__none__" ? null : key, t.common.general),
|
||||
skills: list.sort((a, b) => a.name.localeCompare(b.name)),
|
||||
enabledCount: list.filter((s) => s.enabled).length,
|
||||
}));
|
||||
}, [filteredSkills]);
|
||||
|
||||
const allCategories = useMemo(() => {
|
||||
const cats = new Map<string, number>();
|
||||
for (const s of skills) {
|
||||
|
|
@ -176,39 +158,40 @@ export default function SkillsPage() {
|
|||
if (b[0] === "__none__") return 1;
|
||||
return a[0].localeCompare(b[0]);
|
||||
})
|
||||
.map(([key, count]) => ({ key, name: prettyCategory(key === "__none__" ? null : key), count }));
|
||||
.map(([key, count]) => ({ key, name: prettyCategory(key === "__none__" ? null : key, t.common.general), count }));
|
||||
}, [skills]);
|
||||
|
||||
const enabledCount = skills.filter((s) => s.enabled).length;
|
||||
|
||||
const filteredToolsets = useMemo(() => {
|
||||
return toolsets.filter(
|
||||
(t) =>
|
||||
(ts) =>
|
||||
!search ||
|
||||
t.name.toLowerCase().includes(lowerSearch) ||
|
||||
t.label.toLowerCase().includes(lowerSearch) ||
|
||||
t.description.toLowerCase().includes(lowerSearch)
|
||||
ts.name.toLowerCase().includes(lowerSearch) ||
|
||||
ts.label.toLowerCase().includes(lowerSearch) ||
|
||||
ts.description.toLowerCase().includes(lowerSearch)
|
||||
);
|
||||
}, [toolsets, search, lowerSearch]);
|
||||
|
||||
const isSearching = search.trim().length > 0;
|
||||
const isCollapsed = (key: string): boolean => {
|
||||
if (collapsedCategories === "all") return true;
|
||||
return collapsedCategories.has(key);
|
||||
};
|
||||
|
||||
const activeToolsetCount = toolsets.filter((t) => t.enabled).length;
|
||||
|
||||
const searchMatchedSkills = useMemo(() => {
|
||||
if (!isSearching) return [];
|
||||
return skills.filter(
|
||||
(s) =>
|
||||
s.name.toLowerCase().includes(lowerSearch) ||
|
||||
s.description.toLowerCase().includes(lowerSearch) ||
|
||||
(s.category ?? "").toLowerCase().includes(lowerSearch),
|
||||
);
|
||||
}, [isSearching, skills, lowerSearch]);
|
||||
|
||||
const activeSkills = useMemo(() => {
|
||||
if (isSearching) return [];
|
||||
return [...filteredSkills].sort((a, b) => a.name.localeCompare(b.name));
|
||||
}, [isSearching, filteredSkills]);
|
||||
const toggleCollapse = (key: string) => {
|
||||
setCollapsedCategories((prev) => {
|
||||
if (prev === "all") {
|
||||
// Switching from "all collapsed" → expand just this one
|
||||
const allKeys = new Set(categoryGroups.map((g) => g.key));
|
||||
allKeys.delete(key);
|
||||
return allKeys;
|
||||
}
|
||||
const next = new Set(prev);
|
||||
if (next.has(key)) next.delete(key);
|
||||
else next.add(key);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
/* ---- Loading ---- */
|
||||
if (loading) {
|
||||
|
|
@ -219,303 +202,240 @@ export default function SkillsPage() {
|
|||
);
|
||||
}
|
||||
|
||||
const activeCategoryName = activeCategory
|
||||
? prettyCategory(activeCategory === "__none__" ? null : activeCategory)
|
||||
: "All Skills";
|
||||
|
||||
const renderSkillList = (list: SkillInfo[]) => (
|
||||
<div className="grid gap-1">
|
||||
{list.map((skill) => (
|
||||
<div
|
||||
key={skill.name}
|
||||
className="group flex items-start gap-3 px-3 py-2.5 transition-colors hover:bg-muted/40"
|
||||
>
|
||||
<div className="pt-0.5 shrink-0">
|
||||
<Switch
|
||||
checked={skill.enabled}
|
||||
onCheckedChange={() => handleToggleSkill(skill)}
|
||||
disabled={togglingSkills.has(skill.name)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-0.5">
|
||||
<span
|
||||
className={`font-mono-ui text-sm ${
|
||||
skill.enabled ? "text-foreground" : "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{skill.name}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed line-clamp-2">
|
||||
{skill.description || "No description available."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Toast toast={toast} />
|
||||
|
||||
{/* ═══════════════ Header ═══════════════ */}
|
||||
<div className="flex items-center gap-3">
|
||||
{view === "skills" ? (
|
||||
<Package className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<Wrench className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{view === "skills"
|
||||
? `${enabledCount}/${skills.length} skills enabled`
|
||||
: `${activeToolsetCount}/${toolsets.length} toolsets active`}
|
||||
</span>
|
||||
{/* ═══════════════ Header + Search ═══════════════ */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Package className="h-5 w-5 text-muted-foreground" />
|
||||
<h1 className="text-base font-semibold">{t.skills.title}</h1>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t.skills.enabledOf.replace("{enabled}", String(enabledCount)).replace("{total}", String(skills.length))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ═══════════════ Sidebar + Content ═══════════════ */}
|
||||
<div className="flex flex-col sm:flex-row gap-4" style={{ minHeight: "calc(100vh - 180px)" }}>
|
||||
{/* ---- Sidebar ---- */}
|
||||
<div className="sm:w-52 sm:shrink-0">
|
||||
<div className="sm:sticky sm:top-[72px] flex flex-col gap-1">
|
||||
{/* Search */}
|
||||
<div className="relative mb-2 hidden sm:block">
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Input
|
||||
className="pl-8 h-8 text-xs"
|
||||
placeholder="Search..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
{search && (
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setSearch("")}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Nav items */}
|
||||
<div className="flex sm:flex-col gap-1 overflow-x-auto sm:overflow-x-visible scrollbar-none pb-1 sm:pb-0">
|
||||
{/* Skills top-level */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setView("skills");
|
||||
setActiveCategory(null);
|
||||
setSearch("");
|
||||
}}
|
||||
className={`group flex items-center gap-2 px-2.5 py-1.5 text-left text-xs transition-colors cursor-pointer ${
|
||||
view === "skills" && !activeCategory && !isSearching
|
||||
? "bg-primary/10 text-primary font-medium"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-muted/50"
|
||||
}`}
|
||||
>
|
||||
<Package className="h-4 w-4 shrink-0" />
|
||||
<span className="flex-1 truncate">All Skills</span>
|
||||
<span className={`text-[10px] tabular-nums ${
|
||||
view === "skills" && !activeCategory && !isSearching
|
||||
? "text-primary/60"
|
||||
: "text-muted-foreground/50"
|
||||
}`}>
|
||||
{skills.length}
|
||||
</span>
|
||||
{view === "skills" && !activeCategory && !isSearching && (
|
||||
<ChevronRight className="h-3 w-3 text-primary/50 shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Skill category sub-items */}
|
||||
{allCategories.map(({ key, name, count }) => {
|
||||
const isActive = view === "skills" && activeCategory === key && !isSearching;
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setView("skills");
|
||||
setActiveCategory(key);
|
||||
setSearch("");
|
||||
}}
|
||||
className={`group flex items-center gap-2 sm:pl-6 px-2.5 py-1.5 text-left text-xs transition-colors cursor-pointer ${
|
||||
isActive
|
||||
? "bg-primary/10 text-primary font-medium"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-muted/50"
|
||||
}`}
|
||||
>
|
||||
<span className="flex-1 truncate">{name}</span>
|
||||
<span className={`text-[10px] tabular-nums ${
|
||||
isActive ? "text-primary/60" : "text-muted-foreground/50"
|
||||
}`}>
|
||||
{count}
|
||||
</span>
|
||||
{isActive && (
|
||||
<ChevronRight className="h-3 w-3 text-primary/50 shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Divider */}
|
||||
<div className="hidden sm:block border-t border-border my-1" />
|
||||
|
||||
{/* Toolsets top-level */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setView("toolsets");
|
||||
setSearch("");
|
||||
}}
|
||||
className={`group flex items-center gap-2 px-2.5 py-1.5 text-left text-xs transition-colors cursor-pointer ${
|
||||
view === "toolsets" && !isSearching
|
||||
? "bg-primary/10 text-primary font-medium"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-muted/50"
|
||||
}`}
|
||||
>
|
||||
<Wrench className="h-4 w-4 shrink-0" />
|
||||
<span className="flex-1 truncate">Toolsets</span>
|
||||
<span className={`text-[10px] tabular-nums ${
|
||||
view === "toolsets" && !isSearching
|
||||
? "text-primary/60"
|
||||
: "text-muted-foreground/50"
|
||||
}`}>
|
||||
{toolsets.length}
|
||||
</span>
|
||||
{view === "toolsets" && !isSearching && (
|
||||
<ChevronRight className="h-3 w-3 text-primary/50 shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ---- Content ---- */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* Search results (across both skills and toolsets) */}
|
||||
{isSearching ? (
|
||||
<Card>
|
||||
<CardHeader className="py-3 px-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<Search className="h-4 w-4" />
|
||||
Search Results
|
||||
</CardTitle>
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
{searchMatchedSkills.length} skill{searchMatchedSkills.length !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4">
|
||||
{searchMatchedSkills.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-8">
|
||||
No skills match “<span className="text-foreground">{search}</span>”
|
||||
</p>
|
||||
) : (
|
||||
renderSkillList(searchMatchedSkills)
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
) : view === "skills" ? (
|
||||
/* ---- Skills view ---- */
|
||||
<Card>
|
||||
<CardHeader className="py-3 px-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<Package className="h-4 w-4" />
|
||||
{activeCategoryName}
|
||||
</CardTitle>
|
||||
<Badge variant="secondary" className="text-[10px]">
|
||||
{activeSkills.length} skill{activeSkills.length !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4">
|
||||
{activeSkills.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-8">
|
||||
{skills.length === 0
|
||||
? "No skills found. Skills are loaded from ~/.hermes/skills/"
|
||||
: "No skills in this category."}
|
||||
</p>
|
||||
) : (
|
||||
renderSkillList(activeSkills)
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
) : (
|
||||
/* ---- Toolsets view ---- */
|
||||
<>
|
||||
{filteredToolsets.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center text-sm text-muted-foreground">
|
||||
No toolsets found.
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{filteredToolsets.map((ts) => {
|
||||
const labelText = ts.label.replace(/^[\p{Emoji}\s]+/u, "").trim() || ts.name;
|
||||
const TsIcon = toolsetIcon(ts.name, ts.label);
|
||||
|
||||
return (
|
||||
<Card key={ts.name}>
|
||||
<CardContent className="py-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<TsIcon className="h-5 w-5 shrink-0 mt-0.5 text-muted-foreground" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-medium text-sm">{labelText}</span>
|
||||
<Badge
|
||||
variant={ts.enabled ? "success" : "outline"}
|
||||
className="text-[10px]"
|
||||
>
|
||||
{ts.enabled ? "active" : "inactive"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mb-2">
|
||||
{ts.description}
|
||||
</p>
|
||||
{ts.enabled && !ts.configured && (
|
||||
<p className="text-[10px] text-amber-300/80 mb-2">
|
||||
Setup needed
|
||||
</p>
|
||||
)}
|
||||
{ts.tools.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{ts.tools.map((tool) => (
|
||||
<Badge
|
||||
key={tool}
|
||||
variant="secondary"
|
||||
className="text-[10px] font-mono"
|
||||
>
|
||||
{tool}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{ts.tools.length === 0 && (
|
||||
<span className="text-[10px] text-muted-foreground/60">
|
||||
{ts.enabled ? `${ts.name} toolset` : "Disabled for CLI"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
{/* ═══════════════ Search + Category Filter ═══════════════ */}
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
className="pl-9"
|
||||
placeholder={t.skills.searchPlaceholder}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
{search && (
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setSearch("")}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category pills */}
|
||||
{allCategories.length > 1 && (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Filter className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
||||
<button
|
||||
type="button"
|
||||
className={`inline-flex items-center px-3 py-1 text-xs font-medium transition-colors cursor-pointer ${
|
||||
!activeCategory
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
|
||||
}`}
|
||||
onClick={() => setActiveCategory(null)}
|
||||
>
|
||||
{t.skills.all} ({skills.length})
|
||||
</button>
|
||||
{allCategories.map(({ key, name, count }) => (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
className={`inline-flex items-center px-3 py-1 text-xs font-medium transition-colors cursor-pointer ${
|
||||
activeCategory === key
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
|
||||
}`}
|
||||
onClick={() =>
|
||||
setActiveCategory(activeCategory === key ? null : key)
|
||||
}
|
||||
>
|
||||
{name}
|
||||
<span className="ml-1 opacity-60">{count}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ═══════════════ Skills by Category ═══════════════ */}
|
||||
<section className="flex flex-col gap-3">
|
||||
|
||||
{filteredSkills.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center text-sm text-muted-foreground">
|
||||
{skills.length === 0
|
||||
? t.skills.noSkills
|
||||
: t.skills.noSkillsMatch}
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
categoryGroups.map(({ key, name, skills: catSkills, enabledCount: catEnabled }) => {
|
||||
const collapsed = isCollapsed(key);
|
||||
return (
|
||||
<Card key={key}>
|
||||
<CardHeader
|
||||
className="cursor-pointer select-none py-3 px-4"
|
||||
onClick={() => toggleCollapse(key)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{collapsed ? (
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
<CardTitle className="text-sm font-medium">{name}</CardTitle>
|
||||
<Badge variant="secondary" className="text-[10px] font-normal">
|
||||
{t.skills.skillCount.replace("{count}", String(catSkills.length)).replace("{s}", catSkills.length !== 1 ? "s" : "")}
|
||||
</Badge>
|
||||
</div>
|
||||
<Badge
|
||||
variant={catEnabled === catSkills.length ? "success" : "outline"}
|
||||
className="text-[10px]"
|
||||
>
|
||||
{t.skills.enabledOf.replace("{enabled}", String(catEnabled)).replace("{total}", String(catSkills.length))}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{collapsed ? (
|
||||
/* Peek: show first few skill names so collapsed isn't blank */
|
||||
<div className="px-4 pb-3 flex items-center min-h-[28px]">
|
||||
<p className="text-xs text-muted-foreground/60 truncate leading-normal">
|
||||
{catSkills.slice(0, 4).map((s) => s.name).join(", ")}
|
||||
{catSkills.length > 4 && `, ${t.skills.more.replace("{count}", String(catSkills.length - 4))}`}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<CardContent className="pt-0 px-4 pb-3">
|
||||
<div className="grid gap-1">
|
||||
{catSkills.map((skill) => (
|
||||
<div
|
||||
key={skill.name}
|
||||
className="group flex items-start gap-3 rounded-md px-3 py-2.5 transition-colors hover:bg-muted/40"
|
||||
>
|
||||
<div className="pt-0.5 shrink-0">
|
||||
<Switch
|
||||
checked={skill.enabled}
|
||||
onCheckedChange={() => handleToggleSkill(skill)}
|
||||
disabled={togglingSkills.has(skill.name)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-0.5">
|
||||
<span
|
||||
className={`font-mono-ui text-sm ${
|
||||
skill.enabled
|
||||
? "text-foreground"
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{skill.name}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed line-clamp-2">
|
||||
{skill.description || t.skills.noDescription}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ═══════════════ Toolsets ═══════════════ */}
|
||||
<section className="flex flex-col gap-4">
|
||||
<h2 className="text-sm font-medium text-muted-foreground flex items-center gap-2">
|
||||
<Wrench className="h-4 w-4" />
|
||||
{t.skills.toolsets} ({filteredToolsets.length})
|
||||
</h2>
|
||||
|
||||
{filteredToolsets.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center text-sm text-muted-foreground">
|
||||
{t.skills.noToolsetsMatch}
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{filteredToolsets.map((ts) => {
|
||||
// Strip emoji prefix from label for cleaner display
|
||||
const labelText = ts.label.replace(/^[\p{Emoji}\s]+/u, "").trim() || ts.name;
|
||||
const emoji = ts.label.match(/^[\p{Emoji}]+/u)?.[0] || "🔧";
|
||||
|
||||
return (
|
||||
<Card key={ts.name} className="relative overflow-hidden">
|
||||
<CardContent className="py-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="text-2xl shrink-0 leading-none mt-0.5">{emoji}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-medium text-sm">{labelText}</span>
|
||||
<Badge
|
||||
variant={ts.enabled ? "success" : "outline"}
|
||||
className="text-[10px]"
|
||||
>
|
||||
{ts.enabled ? t.common.active : t.common.inactive}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mb-2">
|
||||
{ts.description}
|
||||
</p>
|
||||
{ts.enabled && !ts.configured && (
|
||||
<p className="text-[10px] text-amber-300/80 mb-2">
|
||||
{t.skills.setupNeeded}
|
||||
</p>
|
||||
)}
|
||||
{ts.tools.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{ts.tools.map((tool) => (
|
||||
<Badge
|
||||
key={tool}
|
||||
variant="secondary"
|
||||
className="text-[10px] font-mono"
|
||||
>
|
||||
{tool}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{ts.tools.length === 0 && (
|
||||
<span className="text-[10px] text-muted-foreground/60">
|
||||
{ts.enabled ? `${ts.name} toolset` : t.skills.disabledForCli}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,37 +14,12 @@ import type { PlatformStatus, SessionInfo, StatusResponse } from "@/lib/api";
|
|||
import { timeAgo, isoTimeAgo } from "@/lib/utils";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
const PLATFORM_STATE_BADGE: Record<string, { variant: "success" | "warning" | "destructive"; label: string }> = {
|
||||
connected: { variant: "success", label: "Connected" },
|
||||
disconnected: { variant: "warning", label: "Disconnected" },
|
||||
fatal: { variant: "destructive", label: "Error" },
|
||||
};
|
||||
|
||||
const GATEWAY_STATE_DISPLAY: Record<string, { badge: "success" | "warning" | "destructive" | "outline"; label: string }> = {
|
||||
running: { badge: "success", label: "Running" },
|
||||
starting: { badge: "warning", label: "Starting" },
|
||||
startup_failed: { badge: "destructive", label: "Failed" },
|
||||
stopped: { badge: "outline", label: "Stopped" },
|
||||
};
|
||||
|
||||
function gatewayValue(status: StatusResponse): string {
|
||||
if (status.gateway_running) return `PID ${status.gateway_pid}`;
|
||||
if (status.gateway_state === "startup_failed") return "Start failed";
|
||||
return "Not running";
|
||||
}
|
||||
|
||||
function gatewayBadge(status: StatusResponse) {
|
||||
const info = status.gateway_state ? GATEWAY_STATE_DISPLAY[status.gateway_state] : null;
|
||||
if (info) return info;
|
||||
return status.gateway_running
|
||||
? { badge: "success" as const, label: "Running" }
|
||||
: { badge: "outline" as const, label: "Off" };
|
||||
}
|
||||
import { useI18n } from "@/i18n";
|
||||
|
||||
export default function StatusPage() {
|
||||
const [status, setStatus] = useState<StatusResponse | null>(null);
|
||||
const [sessions, setSessions] = useState<SessionInfo[]>([]);
|
||||
const { t } = useI18n();
|
||||
|
||||
useEffect(() => {
|
||||
const load = () => {
|
||||
|
|
@ -64,28 +39,55 @@ export default function StatusPage() {
|
|||
);
|
||||
}
|
||||
|
||||
const gwBadge = gatewayBadge(status);
|
||||
const PLATFORM_STATE_BADGE: Record<string, { variant: "success" | "warning" | "destructive"; label: string }> = {
|
||||
connected: { variant: "success", label: t.status.connected },
|
||||
disconnected: { variant: "warning", label: t.status.disconnected },
|
||||
fatal: { variant: "destructive", label: t.status.error },
|
||||
};
|
||||
|
||||
const GATEWAY_STATE_DISPLAY: Record<string, { badge: "success" | "warning" | "destructive" | "outline"; label: string }> = {
|
||||
running: { badge: "success", label: t.status.running },
|
||||
starting: { badge: "warning", label: t.status.starting },
|
||||
startup_failed: { badge: "destructive", label: t.status.failed },
|
||||
stopped: { badge: "outline", label: t.status.stopped },
|
||||
};
|
||||
|
||||
function gatewayValue(): string {
|
||||
if (status!.gateway_running) return `${t.status.pid} ${status!.gateway_pid}`;
|
||||
if (status!.gateway_state === "startup_failed") return t.status.startFailed;
|
||||
return t.status.notRunning;
|
||||
}
|
||||
|
||||
function gatewayBadge() {
|
||||
const info = status!.gateway_state ? GATEWAY_STATE_DISPLAY[status!.gateway_state] : null;
|
||||
if (info) return info;
|
||||
return status!.gateway_running
|
||||
? { badge: "success" as const, label: t.status.running }
|
||||
: { badge: "outline" as const, label: t.common.off };
|
||||
}
|
||||
|
||||
const gwBadge = gatewayBadge();
|
||||
|
||||
const items = [
|
||||
{
|
||||
icon: Cpu,
|
||||
label: "Agent",
|
||||
label: t.status.agent,
|
||||
value: `v${status.version}`,
|
||||
badgeText: "Live",
|
||||
badgeText: t.common.live,
|
||||
badgeVariant: "success" as const,
|
||||
},
|
||||
{
|
||||
icon: Radio,
|
||||
label: "Gateway",
|
||||
value: gatewayValue(status),
|
||||
label: t.status.gateway,
|
||||
value: gatewayValue(),
|
||||
badgeText: gwBadge.label,
|
||||
badgeVariant: gwBadge.badge,
|
||||
},
|
||||
{
|
||||
icon: Activity,
|
||||
label: "Active Sessions",
|
||||
value: status.active_sessions > 0 ? `${status.active_sessions} running` : "None",
|
||||
badgeText: status.active_sessions > 0 ? "Live" : "Off",
|
||||
label: t.status.activeSessions,
|
||||
value: status.active_sessions > 0 ? `${status.active_sessions} ${t.status.running.toLowerCase()}` : t.status.noneRunning,
|
||||
badgeText: status.active_sessions > 0 ? t.common.live : t.common.off,
|
||||
badgeVariant: (status.active_sessions > 0 ? "success" : "outline") as "success" | "outline",
|
||||
},
|
||||
];
|
||||
|
|
@ -98,19 +100,19 @@ export default function StatusPage() {
|
|||
const alerts: { message: string; detail?: string }[] = [];
|
||||
if (status.gateway_state === "startup_failed") {
|
||||
alerts.push({
|
||||
message: "Gateway failed to start",
|
||||
message: t.status.gatewayFailedToStart,
|
||||
detail: status.gateway_exit_reason ?? undefined,
|
||||
});
|
||||
}
|
||||
const failedPlatforms = platforms.filter(([, info]) => info.state === "fatal" || info.state === "disconnected");
|
||||
for (const [name, info] of failedPlatforms) {
|
||||
const stateLabel = info.state === "fatal" ? t.status.platformError : t.status.platformDisconnected;
|
||||
alerts.push({
|
||||
message: `${name.charAt(0).toUpperCase() + name.slice(1)} ${info.state === "fatal" ? "error" : "disconnected"}`,
|
||||
message: `${name.charAt(0).toUpperCase() + name.slice(1)} ${stateLabel}`,
|
||||
detail: info.error_message ?? undefined,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Alert banner — breaks grid monotony for critical states */}
|
||||
|
|
@ -157,7 +159,7 @@ export default function StatusPage() {
|
|||
</div>
|
||||
|
||||
{platforms.length > 0 && (
|
||||
<PlatformsCard platforms={platforms} />
|
||||
<PlatformsCard platforms={platforms} platformStateBadge={PLATFORM_STATE_BADGE} />
|
||||
)}
|
||||
|
||||
{activeSessions.length > 0 && (
|
||||
|
|
@ -165,7 +167,7 @@ export default function StatusPage() {
|
|||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="h-5 w-5 text-success" />
|
||||
<CardTitle className="text-base">Active Sessions</CardTitle>
|
||||
<CardTitle className="text-base">{t.status.activeSessions}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
|
|
@ -177,16 +179,16 @@ export default function StatusPage() {
|
|||
>
|
||||
<div className="flex flex-col gap-1 min-w-0 w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm truncate">{s.title ?? "Untitled"}</span>
|
||||
<span className="font-medium text-sm truncate">{s.title ?? t.common.untitled}</span>
|
||||
|
||||
<Badge variant="success" className="text-[10px] shrink-0">
|
||||
<span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
|
||||
Live
|
||||
{t.common.live}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
<span className="font-mono-ui">{(s.model ?? "unknown").split("/").pop()}</span> · {s.message_count} msgs · {timeAgo(s.last_active)}
|
||||
<span className="font-mono-ui">{(s.model ?? t.common.unknown).split("/").pop()}</span> · {s.message_count} {t.common.msgs} · {timeAgo(s.last_active)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -200,7 +202,7 @@ export default function StatusPage() {
|
|||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="h-5 w-5 text-muted-foreground" />
|
||||
<CardTitle className="text-base">Recent Sessions</CardTitle>
|
||||
<CardTitle className="text-base">{t.status.recentSessions}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
|
|
@ -211,10 +213,10 @@ export default function StatusPage() {
|
|||
className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border border-border p-3 w-full"
|
||||
>
|
||||
<div className="flex flex-col gap-1 min-w-0 w-full">
|
||||
<span className="font-medium text-sm truncate">{s.title ?? "Untitled"}</span>
|
||||
<span className="font-medium text-sm truncate">{s.title ?? t.common.untitled}</span>
|
||||
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
<span className="font-mono-ui">{(s.model ?? "unknown").split("/").pop()}</span> · {s.message_count} msgs · {timeAgo(s.last_active)}
|
||||
<span className="font-mono-ui">{(s.model ?? t.common.unknown).split("/").pop()}</span> · {s.message_count} {t.common.msgs} · {timeAgo(s.last_active)}
|
||||
</span>
|
||||
|
||||
{s.preview && (
|
||||
|
|
@ -237,19 +239,21 @@ export default function StatusPage() {
|
|||
);
|
||||
}
|
||||
|
||||
function PlatformsCard({ platforms }: PlatformsCardProps) {
|
||||
function PlatformsCard({ platforms, platformStateBadge }: PlatformsCardProps) {
|
||||
const { t } = useI18n();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Radio className="h-5 w-5 text-muted-foreground" />
|
||||
<CardTitle className="text-base">Connected Platforms</CardTitle>
|
||||
<CardTitle className="text-base">{t.status.connectedPlatforms}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="grid gap-3">
|
||||
{platforms.map(([name, info]) => {
|
||||
const display = PLATFORM_STATE_BADGE[info.state] ?? {
|
||||
const display = platformStateBadge[info.state] ?? {
|
||||
variant: "outline" as const,
|
||||
label: info.state,
|
||||
};
|
||||
|
|
@ -278,7 +282,7 @@ function PlatformsCard({ platforms }: PlatformsCardProps) {
|
|||
|
||||
{info.updated_at && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Last update: {isoTimeAgo(info.updated_at)}
|
||||
{t.status.lastUpdate}: {isoTimeAgo(info.updated_at)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -300,4 +304,5 @@ function PlatformsCard({ platforms }: PlatformsCardProps) {
|
|||
|
||||
interface PlatformsCardProps {
|
||||
platforms: [string, PlatformStatus][];
|
||||
platformStateBadge: Record<string, { variant: "success" | "warning" | "destructive"; label: string }>;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue