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
@@ -0,0 +1,22 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
const BACKEND = process.env.HERMES_BACKEND_URL || "http://127.0.0.1:8643";
|
||||
|
||||
export async function POST(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const body = await req.json();
|
||||
try {
|
||||
const res = await fetch(BACKEND + "/api/sessions/" + id + "/chat", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
const data = await res.text();
|
||||
return new NextResponse(data, {
|
||||
status: res.status,
|
||||
headers: { "content-type": "application/json" },
|
||||
});
|
||||
} catch {
|
||||
return NextResponse.json({ error: "backend unreachable" }, { status: 502 });
|
||||
}
|
||||
}
|
||||
+60
-25
@@ -2,49 +2,84 @@
|
||||
|
||||
:root {
|
||||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
--accent: #7c6ef0;
|
||||
--accent-dim: rgba(124, 110, 240, 0.12);
|
||||
--bg: #111113;
|
||||
--bg-raised: #1a1a1f;
|
||||
--bg-hover: #222228;
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--text-1: #ececef;
|
||||
--text-2: #8e8e93;
|
||||
--text-3: #48484a;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0a0a0f;
|
||||
color: #f0f0f0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text-1);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
/* Glass card */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 16px;
|
||||
/* Card - solid, not glass */
|
||||
.card {
|
||||
background: var(--bg-raised);
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.glass-hover:active {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
.card-hover:active {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 4px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
|
||||
::-webkit-scrollbar { width: 0; }
|
||||
|
||||
/* Safe area padding for bottom nav */
|
||||
/* Safe area */
|
||||
.pb-safe {
|
||||
padding-bottom: calc(4.5rem + var(--safe-bottom));
|
||||
}
|
||||
|
||||
/* Platform badges */
|
||||
.badge-cli { background: rgba(245,158,11,0.15); color: #f59e0b; }
|
||||
.badge-telegram { background: rgba(56,189,248,0.15); color: #38bdf8; }
|
||||
.badge-discord { background: rgba(139,92,246,0.15); color: #8b5cf6; }
|
||||
.badge-whatsapp { background: rgba(34,197,94,0.15); color: #22c55e; }
|
||||
.badge-web { background: rgba(168,85,247,0.15); color: #a78bfa; }
|
||||
.badge {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 100px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.badge-cli { background: rgba(255,255,255,0.06); color: #8e8e93; }
|
||||
.badge-telegram { background: rgba(0,136,204,0.12); color: #29b6f6; }
|
||||
.badge-discord { background: rgba(88,101,242,0.12); color: #7289da; }
|
||||
.badge-whatsapp { background: rgba(37,211,102,0.12); color: #25d366; }
|
||||
.badge-web { background: rgba(124,110,240,0.12); color: #7c6ef0; }
|
||||
|
||||
/* Pulse dot animation */
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
/* Accent button */
|
||||
.btn-accent {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
padding: 10px 16px;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.animate-pulse-dot {
|
||||
animation: pulse-dot 2s ease-in-out infinite;
|
||||
.btn-accent:active { opacity: 0.7; }
|
||||
.btn-accent:disabled { opacity: 0.3; }
|
||||
|
||||
/* Divider */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 0 -16px;
|
||||
}
|
||||
|
||||
/* Section label */
|
||||
.section-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
+72
-30
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { use } from "react";
|
||||
import { ArrowLeft, MessageSquare, Wrench } from "lucide-react";
|
||||
import { use, useState, useRef, useEffect } from "react";
|
||||
import { ArrowLeft, Send } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useSession, useMessages } from "@/lib/hooks";
|
||||
import { timeAgo, formatTokens, platformBadgeClass } from "@/lib/utils";
|
||||
@@ -10,17 +10,18 @@ import { MessageBubble } from "@/components/MessageBubble";
|
||||
export default function SessionReplayPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = use(params);
|
||||
const { data: sessionData } = useSession(id);
|
||||
const { data: messagesData, isLoading } = useMessages(id);
|
||||
const { data: messagesData, isLoading, refetch } = useMessages(id);
|
||||
const [input, setInput] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const session = sessionData?.session;
|
||||
const messages = messagesData?.items || [];
|
||||
|
||||
// Group tool results with their preceding assistant tool_calls
|
||||
const visibleMessages = messages.filter(
|
||||
(m) => m.role === "user" || m.role === "assistant"
|
||||
);
|
||||
).reverse(); // newest first
|
||||
|
||||
// Collect tool results keyed by tool_call_id
|
||||
const toolResults = new Map<string, { name: string; content: string }>();
|
||||
for (const m of messages) {
|
||||
if (m.role === "tool" && m.tool_call_id) {
|
||||
@@ -31,53 +32,94 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
|
||||
}
|
||||
}
|
||||
|
||||
const sendMessage = async () => {
|
||||
if (!input.trim() || sending) return;
|
||||
setSending(true);
|
||||
try {
|
||||
await fetch("/api/sessions/" + id + "/chat", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ message: input.trim() }),
|
||||
});
|
||||
setInput("");
|
||||
// Poll for response
|
||||
setTimeout(() => refetch(), 2000);
|
||||
setTimeout(() => refetch(), 5000);
|
||||
setTimeout(() => refetch(), 10000);
|
||||
} catch {}
|
||||
setSending(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col" style={{ minHeight: "calc(100vh - 6rem)" }}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/history" className="p-1.5 -ml-1.5 rounded-lg active:bg-white/[0.06]">
|
||||
<ArrowLeft size={20} className="text-zinc-400" />
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Link href="/history" className="p-1 -ml-1 rounded-lg active:bg-white/[0.04]">
|
||||
<ArrowLeft size={20} style={{ color: "var(--text-2)" }} />
|
||||
</Link>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h1 className="text-base font-semibold text-zinc-200 truncate">
|
||||
{session?.title || `Session ${id.slice(0, 8)}`}
|
||||
</h1>
|
||||
<div className="text-[15px] font-medium truncate" style={{ color: "var(--text-1)" }}>
|
||||
{session?.title || "Session " + id.slice(0, 8)}
|
||||
</div>
|
||||
{session && (
|
||||
<div className="flex items-center gap-2 text-xs text-zinc-500">
|
||||
<span className={`px-1.5 py-0.5 rounded-full text-[10px] font-medium ${platformBadgeClass(session.source)}`}>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className={`badge ${platformBadgeClass(session.source)}`}>
|
||||
{session.source}
|
||||
</span>
|
||||
<span>{session.message_count} msgs</span>
|
||||
<span>{formatTokens(session.input_tokens + session.output_tokens)} tok</span>
|
||||
<span>{timeAgo(session.started_at)}</span>
|
||||
<span className="text-[11px]" style={{ color: "var(--text-3)" }}>
|
||||
{session.message_count} msgs · {formatTokens(session.input_tokens + session.output_tokens)} · {timeAgo(session.started_at)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
{/* Message input */}
|
||||
<div className="flex gap-2 mb-4">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && sendMessage()}
|
||||
placeholder="Send a message..."
|
||||
className="flex-1 px-4 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)",
|
||||
}}
|
||||
disabled={sending}
|
||||
/>
|
||||
<button
|
||||
onClick={sendMessage}
|
||||
disabled={!input.trim() || sending}
|
||||
className="px-3 rounded-xl transition-opacity disabled:opacity-20"
|
||||
style={{ background: "var(--accent)", color: "white" }}
|
||||
>
|
||||
<Send size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Messages - newest first */}
|
||||
{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-full mb-2" />
|
||||
<div className="h-4 bg-white/[0.06] rounded w-3/4" />
|
||||
<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-3/4" style={{ background: "var(--bg-hover)" }} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
{visibleMessages.map((m) => (
|
||||
<MessageBubble
|
||||
key={m.id}
|
||||
message={m}
|
||||
toolResults={toolResults}
|
||||
/>
|
||||
<MessageBubble key={m.id} message={m} toolResults={toolResults} />
|
||||
))}
|
||||
{visibleMessages.length === 0 && (
|
||||
<div className="glass p-6 text-center text-sm text-zinc-500">
|
||||
<p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>
|
||||
Empty session
|
||||
</div>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
+24
-44
@@ -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>
|
||||
)}
|
||||
|
||||
+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>
|
||||
|
||||
+18
-26
@@ -11,63 +11,55 @@ import { useSessions } from "@/lib/hooks";
|
||||
import { usePullToRefresh } from "@/lib/usePullToRefresh";
|
||||
|
||||
const QUICK_LINKS = [
|
||||
{ href: "/skills", label: "Skills", icon: Puzzle, color: "#a78bfa" },
|
||||
{ href: "/cron", label: "Cron", icon: Timer, color: "#f59e0b" },
|
||||
{ href: "/soul", label: "Soul", icon: Sparkles, color: "#ec4899" },
|
||||
{ href: "/config", label: "Config", icon: Settings, color: "#6b7280" },
|
||||
{ href: "/skills", label: "Skills", icon: Puzzle },
|
||||
{ href: "/cron", label: "Cron", icon: Timer },
|
||||
{ href: "/soul", label: "Soul", icon: Sparkles },
|
||||
{ href: "/config", label: "Config", icon: Settings },
|
||||
] as const;
|
||||
|
||||
export default function PulsePage() {
|
||||
const qc = useQueryClient();
|
||||
const { data: sessionsData, isLoading } = useSessions(8);
|
||||
|
||||
usePullToRefresh(() => {
|
||||
qc.invalidateQueries();
|
||||
});
|
||||
usePullToRefresh(() => { qc.invalidateQueries(); });
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-xl font-bold" style={{ color: "#f59e0b" }}>
|
||||
Pulse
|
||||
</h1>
|
||||
|
||||
<div className="space-y-5">
|
||||
<StatusCard />
|
||||
<StatsCard />
|
||||
<MemorySnapshotCard />
|
||||
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{QUICK_LINKS.map(({ href, label, icon: Icon, color }) => (
|
||||
{QUICK_LINKS.map(({ href, label, icon: Icon }) => (
|
||||
<Link key={href} href={href}>
|
||||
<div className="glass glass-hover p-3 flex flex-col items-center gap-1.5 transition-all">
|
||||
<Icon size={18} style={{ color }} />
|
||||
<span className="text-[11px] font-medium" style={{ color }}>{label}</span>
|
||||
<div className="card card-hover p-3 flex flex-col items-center gap-1 transition-colors">
|
||||
<Icon size={18} style={{ color: "var(--accent)" }} />
|
||||
<span className="text-[11px]" style={{ color: "var(--text-2)" }}>{label}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-sm font-medium text-zinc-400 mb-2">
|
||||
Recent Sessions
|
||||
</h2>
|
||||
<div className="section-label mb-2">Recent</div>
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
{[...Array(3)].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">
|
||||
<p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>
|
||||
No sessions yet
|
||||
</div>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
+25
-54
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Puzzle, ChevronRight, Search, X } from "lucide-react";
|
||||
import { ChevronRight, Search, X } from "lucide-react";
|
||||
import { useSkills } from "@/lib/hooks";
|
||||
import type { SkillSummary } from "@/lib/types";
|
||||
|
||||
@@ -14,91 +14,62 @@ export default function SkillsPage() {
|
||||
const categories = [...new Set(skills.map((s) => s.category || "uncategorized"))].sort();
|
||||
|
||||
const filtered = search
|
||||
? skills.filter(
|
||||
(s) =>
|
||||
s.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
s.description.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
? skills.filter((s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.description.toLowerCase().includes(search.toLowerCase()))
|
||||
: skills;
|
||||
|
||||
const grouped = categories
|
||||
.map((cat) => ({
|
||||
category: cat,
|
||||
skills: filtered.filter((s) => (s.category || "uncategorized") === cat),
|
||||
}))
|
||||
.map((cat) => ({ category: cat, skills: filtered.filter((s) => (s.category || "uncategorized") === cat) }))
|
||||
.filter((g) => g.skills.length > 0);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Puzzle size={20} style={{ color: "#a78bfa" }} />
|
||||
<h1 className="text-xl font-bold" style={{ color: "#a78bfa" }}>Skills</h1>
|
||||
<span className="text-xs text-zinc-500 ml-auto">{skills.length} total</span>
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>Skills</h1>
|
||||
<span className="text-[12px]" style={{ color: "var(--text-3)" }}>{skills.length}</span>
|
||||
</div>
|
||||
|
||||
<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={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Filter skills..."
|
||||
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"
|
||||
placeholder="Filter..."
|
||||
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)" }}
|
||||
/>
|
||||
{search && (
|
||||
<button
|
||||
onClick={() => setSearch("")}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500"
|
||||
>
|
||||
<button onClick={() => setSearch("")} className="absolute right-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-3)" }}>
|
||||
<X size={16} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{[...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>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-2">{[...Array(5)].map((_, i) => <div key={i} className="card p-4 animate-pulse"><div className="h-4 rounded w-3/4" style={{ background: "var(--bg-hover)" }} /></div>)}</div>
|
||||
) : (
|
||||
<div className="space-y-5">
|
||||
{grouped.map(({ category, skills }) => (
|
||||
<div key={category}>
|
||||
<h2 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2 px-1">
|
||||
{category}
|
||||
</h2>
|
||||
<div className="space-y-1.5">
|
||||
{skills.map((s) => (
|
||||
<SkillRow key={s.name} skill={s} />
|
||||
))}
|
||||
</div>
|
||||
<div className="section-label mb-2">{category}</div>
|
||||
{skills.map((s) => (
|
||||
<Link key={s.name} href={"/skills/" + s.name}>
|
||||
<div className="flex items-center gap-3 py-2.5 px-1 border-b border-white/[0.04] active:bg-white/[0.02] transition-colors">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[14px]" style={{ color: "var(--text-1)" }}>{s.name}</div>
|
||||
<div className="text-[12px] line-clamp-1" style={{ color: "var(--text-3)" }}>{s.description}</div>
|
||||
</div>
|
||||
<ChevronRight size={16} style={{ color: "var(--text-3)" }} />
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
{grouped.length === 0 && (
|
||||
<div className="glass p-6 text-center text-sm text-zinc-500">
|
||||
No skills match “{search}”
|
||||
</div>
|
||||
<p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>No skills match "{search}"</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SkillRow({ skill }: { skill: SkillSummary }) {
|
||||
return (
|
||||
<Link href={`/skills/${skill.name}`}>
|
||||
<div className="glass glass-hover p-3 flex items-center gap-3 transition-all">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-zinc-200">{skill.name}</div>
|
||||
<div className="text-xs text-zinc-500 line-clamp-1">{skill.description}</div>
|
||||
</div>
|
||||
<ChevronRight size={16} className="text-zinc-600 shrink-0" />
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user