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
+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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user