Visual redesign, message input, reversed messages, systemd service
- 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
+27
-53
@@ -1,13 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Brain, Plus } from "lucide-react";
|
||||
import { Plus } from "lucide-react";
|
||||
import { useMemory, useAddMemory, usePatchMemory, useDeleteMemory } from "@/lib/hooks";
|
||||
import { MemoryEntry } from "@/components/MemoryEntry";
|
||||
|
||||
const TABS = [
|
||||
{ id: "memory", label: "Agent", color: "#f59e0b" },
|
||||
{ id: "user", label: "User", color: "#38bdf8" },
|
||||
{ id: "memory", label: "Agent" },
|
||||
{ id: "user", label: "User" },
|
||||
] as const;
|
||||
|
||||
export default function MemoryPage() {
|
||||
@@ -22,10 +22,8 @@ export default function MemoryPage() {
|
||||
const target = data?.targets?.find((t) => t.target === tab);
|
||||
const entries = target?.entries || [];
|
||||
const usage = target?.usage || "";
|
||||
|
||||
const pctMatch = usage.match(/(\d+)%/);
|
||||
const pct = pctMatch ? parseInt(pctMatch[1]) : 0;
|
||||
const barColor = pct > 85 ? "#ef4444" : pct > 65 ? "#f59e0b" : "#38bdf8";
|
||||
|
||||
const handleAdd = () => {
|
||||
if (!newText.trim()) return;
|
||||
@@ -34,41 +32,28 @@ export default function MemoryPage() {
|
||||
});
|
||||
};
|
||||
|
||||
const handlePatch = (oldText: string, newContent: string) => {
|
||||
patchMutation.mutate({ target: tab, old_text: oldText, content: newContent });
|
||||
};
|
||||
|
||||
const handleDelete = (oldText: string) => {
|
||||
deleteMutation.mutate({ target: tab, old_text: oldText });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Brain size={20} style={{ color: "#38bdf8" }} />
|
||||
<h1 className="text-xl font-bold" style={{ color: "#38bdf8" }}>Memory</h1>
|
||||
</div>
|
||||
<h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>Memory</h1>
|
||||
<button
|
||||
onClick={() => setAdding(!adding)}
|
||||
className="p-2 rounded-xl transition-all active:scale-95"
|
||||
style={{ background: "rgba(56,189,248,0.15)", color: "#38bdf8" }}
|
||||
className="p-2 rounded-xl active:scale-95 transition-all"
|
||||
style={{ background: "var(--accent-dim)", color: "var(--accent)" }}
|
||||
>
|
||||
<Plus size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-1 p-1 rounded-xl" style={{ background: "var(--bg-raised)" }}>
|
||||
{TABS.map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => setTab(t.id)}
|
||||
className="flex-1 py-2 rounded-xl text-sm font-medium transition-all"
|
||||
className="flex-1 py-2 rounded-lg text-sm font-medium transition-all"
|
||||
style={{
|
||||
background: tab === t.id ? `${t.color}20` : "rgba(255,255,255,0.04)",
|
||||
color: tab === t.id ? t.color : "#6b7280",
|
||||
border: `1px solid ${tab === t.id ? `${t.color}40` : "rgba(255,255,255,0.06)"}`,
|
||||
background: tab === t.id ? "var(--bg-hover)" : "transparent",
|
||||
color: tab === t.id ? "var(--text-1)" : "var(--text-3)",
|
||||
}}
|
||||
>
|
||||
{t.label}
|
||||
@@ -76,44 +61,36 @@ export default function MemoryPage() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Usage bar */}
|
||||
{usage && (
|
||||
<div>
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-zinc-400">{tab === "memory" ? "Agent memory" : "User profile"}</span>
|
||||
<span className="text-zinc-500 font-mono">{usage}</span>
|
||||
</div>
|
||||
<div className="h-2 rounded-full bg-white/[0.06]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-1 h-1.5 rounded-full" style={{ background: "var(--border)" }}>
|
||||
<div
|
||||
className="h-full rounded-full transition-all"
|
||||
style={{ width: `${pct}%`, background: barColor }}
|
||||
style={{ width: pct + "%", background: pct > 85 ? "#ff3b30" : "var(--accent)" }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[11px] font-mono" style={{ color: "var(--text-3)" }}>{usage}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add form */}
|
||||
{adding && (
|
||||
<div className="glass p-3 space-y-2">
|
||||
<div className="card p-3 space-y-2">
|
||||
<textarea
|
||||
value={newText}
|
||||
onChange={(e) => setNewText(e.target.value)}
|
||||
placeholder="New memory entry..."
|
||||
className="w-full bg-transparent text-sm text-zinc-200 placeholder-zinc-600 resize-none outline-none min-h-[80px]"
|
||||
placeholder="New entry..."
|
||||
className="w-full bg-transparent text-sm placeholder-[var(--text-3)] resize-none outline-none min-h-[80px]"
|
||||
style={{ color: "var(--text-1)" }}
|
||||
autoFocus
|
||||
/>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button
|
||||
onClick={() => { setAdding(false); setNewText(""); }}
|
||||
className="px-3 py-1.5 text-xs text-zinc-400 rounded-lg"
|
||||
>
|
||||
<button onClick={() => { setAdding(false); setNewText(""); }} className="px-3 py-1.5 text-xs rounded-lg" style={{ color: "var(--text-3)" }}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={!newText.trim() || addMutation.isPending}
|
||||
className="px-3 py-1.5 text-xs rounded-lg font-medium disabled:opacity-40"
|
||||
style={{ background: "rgba(56,189,248,0.2)", color: "#38bdf8" }}
|
||||
className="btn-accent text-xs !py-1.5 !px-3"
|
||||
>
|
||||
{addMutation.isPending ? "Saving..." : "Add"}
|
||||
</button>
|
||||
@@ -121,28 +98,25 @@ export default function MemoryPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Entries */}
|
||||
{isLoading ? (
|
||||
<div className="space-y-2">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<div key={i} className="glass p-4 animate-pulse">
|
||||
<div className="h-4 bg-white/[0.06] rounded w-full mb-2" />
|
||||
<div className="h-4 bg-white/[0.06] rounded w-2/3" />
|
||||
<div key={i} className="card p-4 animate-pulse">
|
||||
<div className="h-4 rounded w-full mb-2" style={{ background: "var(--bg-hover)" }} />
|
||||
<div className="h-4 rounded w-2/3" style={{ background: "var(--bg-hover)" }} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : entries.length === 0 ? (
|
||||
<div className="glass p-6 text-center text-sm text-zinc-500">
|
||||
No entries yet
|
||||
</div>
|
||||
<p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>No entries yet</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{entries.map((entry, i) => (
|
||||
<MemoryEntry
|
||||
key={`${tab}-${i}`}
|
||||
key={tab + "-" + i}
|
||||
content={entry}
|
||||
onPatch={(newContent) => handlePatch(entry.slice(0, 40), newContent)}
|
||||
onDelete={() => handleDelete(entry.slice(0, 40))}
|
||||
onPatch={(nc) => patchMutation.mutate({ target: tab, old_text: entry.slice(0, 40), content: nc })}
|
||||
onDelete={() => deleteMutation.mutate({ target: tab, old_text: entry.slice(0, 40) })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user