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

Visual redesign, message input, reversed messages, systemd service

Browse Source 
- New visual identity: solid dark cards, purple accent, iOS-like feel
- Session replay: newest messages first, message input with send button
- Chat proxy route for sending messages to sessions
- systemd user service with deploy script
- All pages restyled: Pulse, Memory, History, Skills, Cron, Soul, Config
This commit is contained in:
Hermes
2026-04-09 21:12:14 -05:00
parent 65f71fe995
commit 4f5fde34a3
17 changed files with 428 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/history/page.tsx
+24 -44
View File
@@ -1,7 +1,7 @@
"use client";
import { useState } from "react";
import { Clock, Search, X } from "lucide-react";
import { Search, X } from "lucide-react";
import { useSessions, useSessionSearch } from "@/lib/hooks";
import { SessionCard } from "@/components/SessionCard";
@@ -19,59 +19,44 @@ export default function HistoryPage() {
const [searching, setSearching] = useState(false);
const { data: sessionsData, isLoading } = useSessions(30, filter || undefined);
const { data: searchData, isFetching: searchLoading } = useSessionSearch(
searching ? query : ""
);
const { data: searchData, isFetching: searchLoading } = useSessionSearch(searching ? query : "");
const showSearch = searching && query.length >= 2;
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Clock size={20} style={{ color: "#22c55e" }} />
<h1 className="text-xl font-bold" style={{ color: "#22c55e" }}>History</h1>
</div>
</div>
<h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>History</h1>
{/* Search bar */}
<div className="relative">
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500" />
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-3)" }} />
<input
type="text"
value={query}
onChange={(e) => { setQuery(e.target.value); setSearching(true); }}
onFocus={() => setSearching(true)}
placeholder="Search sessions..."
className="w-full pl-9 pr-9 py-2.5 rounded-xl text-sm bg-white/[0.04] border border-white/[0.08] text-zinc-200 placeholder-zinc-600 outline-none focus:border-white/[0.15] transition-colors"
className="w-full pl-9 pr-9 py-2.5 rounded-xl text-sm outline-none transition-colors"
style={{ background: "var(--bg-raised)", border: "1px solid var(--border)", color: "var(--text-1)" }}
/>
{query && (
<button
onClick={() => { setQuery(""); setSearching(false); }}
className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500"
>
<button onClick={() => { setQuery(""); setSearching(false); }} className="absolute right-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-3)" }}>
<X size={16} />
</button>
)}
</div>
{/* Search results */}
{showSearch ? (
<div>
<div className="text-xs text-zinc-500 mb-2">
{searchLoading ? "Searching..." : `${searchData?.count || 0} results`}
<div className="text-[11px] mb-2" style={{ color: "var(--text-3)" }}>
{searchLoading ? "Searching..." : (searchData?.count || 0) + " results"}
</div>
<div className="space-y-2">
<div className="space-y-1">
{searchData?.results?.map((r) => (
<a key={r.message_id} href={`/history/${r.session_id}`}>
<div className="glass glass-hover p-3 transition-all">
<div className="flex items-center gap-2 mb-1">
<span className="text-xs font-medium text-zinc-400">
{r.session_title || r.session_id.slice(0, 8)}
</span>
<span className="text-[10px] text-zinc-600">{r.role}</span>
<a key={r.message_id} href={"/history/" + r.session_id}>
<div className="card card-hover p-3 transition-colors">
<div className="text-[12px] mb-0.5" style={{ color: "var(--text-2)" }}>
{r.session_title || r.session_id.slice(0, 8)}
</div>
<p className="text-sm text-zinc-300 line-clamp-2">{r.content}</p>
<p className="text-[13px] line-clamp-2" style={{ color: "var(--text-1)" }}>{r.content}</p>
</div>
</a>
))}
@@ -79,17 +64,15 @@ export default function HistoryPage() {
</div>
) : (
<>
{/* Platform filter */}
<div className="flex gap-1.5 overflow-x-auto pb-1 -mx-1 px-1">
{PLATFORMS.map((p) => (
<button
key={p.id || "all"}
onClick={() => setFilter(p.id)}
className="px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-all shrink-0"
className="px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap shrink-0 transition-all"
style={{
background: filter === p.id ? "rgba(34,197,94,0.15)" : "rgba(255,255,255,0.04)",
color: filter === p.id ? "#22c55e" : "#6b7280",
border: `1px solid ${filter === p.id ? "rgba(34,197,94,0.3)" : "rgba(255,255,255,0.06)"}`,
background: filter === p.id ? "var(--accent-dim)" : "var(--bg-raised)",
color: filter === p.id ? "var(--accent)" : "var(--text-3)",
}}
>
{p.label}
@@ -97,25 +80,22 @@ export default function HistoryPage() {
))}
</div>
{/* Session list */}
{isLoading ? (
<div className="space-y-2">
<div className="space-y-1">
{[...Array(5)].map((_, i) => (
<div key={i} className="glass p-4 animate-pulse">
<div className="h-4 bg-white/[0.06] rounded w-3/4 mb-2" />
<div className="h-3 bg-white/[0.06] rounded w-1/2" />
<div key={i} className="py-3 animate-pulse">
<div className="h-4 rounded w-3/4 mb-1.5" style={{ background: "var(--bg-raised)" }} />
<div className="h-3 rounded w-1/2" style={{ background: "var(--bg-raised)" }} />
</div>
))}
</div>
) : (
<div className="space-y-2">
<div>
{sessionsData?.items?.map((s) => (
<SessionCard key={s.id} session={s} />
))}
{sessionsData?.items?.length === 0 && (
<div className="glass p-6 text-center text-sm text-zinc-500">
No sessions found
</div>
<p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>No sessions found</p>
)}
</div>
)}