hermes/hermes-os
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Complete visual redesign: solid dark cards, purple accent, iOS-like

Browse Source 
- All pages use new design system (card, section-label, btn-accent)
- No more glassmorphism — clean solid surfaces
- Cron, Soul, Config, Skills detail all restyled
- Consistent typography and spacing throughout
This commit is contained in:
Hermes
2026-04-09 21:17:41 -05:00
parent 893c74ed38
commit 9994bbeaac
4 changed files with 112 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/config/page.tsx
+23 -42
View File
@@ -1,6 +1,6 @@
"use client";
import { Settings, Cpu, Globe, Wrench, Radio } from "lucide-react";
import { Settings } from "lucide-react";
import { useConfig, useHealth } from "@/lib/hooks";
export default function ConfigPage() {
@@ -9,7 +9,6 @@ export default function ConfigPage() {
const online = health?.status === "ok";
const cfg = config?.config || {};
const terminal = cfg.terminal as Record<string, unknown> | undefined;
const memory = cfg.memory as Record<string, unknown> | undefined;
const display = cfg.display as Record<string, unknown> | undefined;
@@ -17,52 +16,47 @@ export default function ConfigPage() {
return (
<div className="space-y-4">
<div className="flex items-center gap-2">
<Settings size={20} style={{ color: "#6b7280" }} />
<h1 className="text-xl font-bold text-zinc-300">Config</h1>
<div className="ml-auto flex items-center gap-1.5">
<div
className="w-2 h-2 rounded-full"
style={{ background: online ? "#22c55e" : "#ef4444" }}
/>
<span className="text-xs text-zinc-500">{online ? "Connected" : "Offline"}</span>
<div className="flex items-center justify-between">
<h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>Config</h1>
<div className="flex items-center gap-1.5">
<div className="w-2 h-2 rounded-full" style={{ background: online ? "#34c759" : "#ff3b30" }} />
<span className="text-[12px]" style={{ color: online ? "#34c759" : "#ff3b30" }}>
{online ? "Online" : "Offline"}
</span>
</div>
</div>
{isLoading ? (
<div className="space-y-3">
{[...Array(4)].map((_, i) => (
<div key={i} className="glass p-4 animate-pulse">
<div className="h-4 bg-white/[0.06] rounded w-1/2 mb-2" />
<div className="h-3 bg-white/[0.06] rounded w-3/4" />
<div key={i} className="card p-4 animate-pulse">
<div className="h-4 rounded w-1/2 mb-2" style={{ background: "var(--bg-hover)" }} />
<div className="h-3 rounded w-3/4" style={{ background: "var(--bg-hover)" }} />
</div>
))}
</div>
) : (
<div className="space-y-3">
<ConfigSection icon={Cpu} label="Model" color="#f59e0b" items={[
<Section label="Model" items={[
["Model", config?.model || "—"],
["Provider", config?.provider || "custom"],
["Base URL", config?.base_url || "—"],
]} />
<ConfigSection icon={Wrench} label="Terminal" color="#38bdf8" items={[
<Section label="Terminal" items={[
["Backend", String(terminal?.backend || "local")],
["Timeout", String(terminal?.timeout || 180) + "s"],
["Persistent shell", String(terminal?.persistent_shell ?? true)],
]} />
<ConfigSection icon={Radio} label="Memory" color="#a78bfa" items={[
<Section label="Memory" items={[
["Enabled", String(memory?.memory_enabled ?? true)],
["Memory limit", String(memory?.memory_char_limit || 2200) + " chars"],
["User limit", String(memory?.user_char_limit || 1375) + " chars"],
]} />
<ConfigSection icon={Globe} label="Display" color="#22c55e" items={[
<Section label="Display" items={[
["Personality", String(display?.personality || "default")],
["Streaming", String(display?.streaming ?? true)],
["Skin", String(display?.skin || "default")],
...(tts ? [["TTS provider", String(tts.provider || "—")] as [string, string]] : []),
...(tts ? [["TTS", String(tts.provider || "—")] as [string, string]] : []),
]} />
</div>
)}
@@ -70,28 +64,15 @@ export default function ConfigPage() {
);
}
function ConfigSection({
icon: Icon,
label,
color,
items,
}: {
icon: typeof Cpu;
label: string;
color: string;
items: [string, string][];
}) {
function Section({ label, items }: { label: string; items: [string, string][] }) {
return (
<div className="glass p-4">
<div className="flex items-center gap-2 mb-3">
<Icon size={16} style={{ color }} />
<span className="text-sm font-medium text-zinc-200">{label}</span>
</div>
<div className="space-y-1.5">
<div className="card p-4">
<div className="section-label mb-3">{label}</div>
<div className="space-y-2">
{items.map(([k, v]) => (
<div key={k} className="flex justify-between text-xs">
<span className="text-zinc-500">{k}</span>
<span className="text-zinc-300 font-mono truncate ml-4 max-w-[60%] text-right">{v}</span>
<div key={k} className="flex justify-between text-[13px]">
<span style={{ color: "var(--text-2)" }}>{k}</span>
<span className="font-mono truncate ml-4 max-w-[60%] text-right" style={{ color: "var(--text-1)" }}>{v}</span>
</div>
))}
</div>