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

Session verbosity: compact/normal/full toggle

Browse Source 
- Compact: text only, truncated to 300 chars, no tool calls
- Normal: full text + collapsed tool calls
- Full: everything expanded with tool results
- Eye icon dropdown in session header
This commit is contained in:
Hermes
2026-04-09 21:21:59 -05:00
parent 159b175774
commit 03d3b72f9b
2 changed files with 84 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/history/[id]/page.tsx
+57 -11
View File
@@ -1,13 +1,21 @@
"use client";
import { use, useState, useRef } from "react";
import { ArrowLeft, Send, Loader2 } from "lucide-react";
import { ArrowLeft, Send, Loader2, Eye } from "lucide-react";
import Link from "next/link";
import { useSession, useMessages } from "@/lib/hooks";
import { timeAgo, formatTokens, platformBadgeClass } from "@/lib/utils";
import { MessageBubble } from "@/components/MessageBubble";
import { useQueryClient } from "@tanstack/react-query";
export type Verbosity = "compact" | "normal" | "full";
const VERBOSITY_OPTIONS: { id: Verbosity; label: string }[] = [
{ id: "compact", label: "Compact" },
{ id: "normal", label: "Normal" },
{ id: "full", label: "Full" },
];
export default function SessionReplayPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = use(params);
const qc = useQueryClient();
@@ -16,14 +24,26 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
const [input, setInput] = useState("");
const [sending, setSending] = useState(false);
const [pendingMsg, setPendingMsg] = useState<string | null>(null);
const [verbosity, setVerbosity] = useState<Verbosity>("normal");
const [showVerbosity, setShowVerbosity] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const session = sessionData?.session;
const messages = messagesData?.items || [];
const visibleMessages = messages
.filter((m) => m.role === "user" || m.role === "assistant")
.reverse();
// Filter based on verbosity
let visibleMessages = messages.filter((m) => {
if (verbosity === "compact") return m.role === "user" || (m.role === "assistant" && m.content);
return m.role === "user" || m.role === "assistant";
}).reverse();
// In compact mode, skip assistant messages that are only tool calls (no text)
if (verbosity === "compact") {
visibleMessages = visibleMessages.filter((m) => {
if (m.role === "assistant" && !m.content?.trim()) return false;
return true;
});
}
const toolResults = new Map<string, { name: string; content: string }>();
for (const m of messages) {
@@ -41,7 +61,6 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
setInput("");
setSending(true);
setPendingMsg(msg);
try {
await fetch("/api/sessions/" + id + "/chat", {
method: "POST",
@@ -49,7 +68,6 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
body: JSON.stringify({ message: msg }),
});
} catch {}
setPendingMsg(null);
setSending(false);
qc.invalidateQueries({ queryKey: ["messages", id] });
@@ -59,7 +77,7 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
return (
<div className="flex flex-col" style={{ minHeight: "calc(100vh - 6rem)" }}>
{/* Header */}
<div className="flex items-center gap-3 mb-4">
<div className="flex items-center gap-3 mb-3">
<Link href="/history" className="p-1 -ml-1 rounded-lg active:bg-white/[0.04]">
<ArrowLeft size={20} style={{ color: "var(--text-2)" }} />
</Link>
@@ -78,6 +96,36 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
</div>
)}
</div>
{/* Verbosity toggle */}
<div className="relative">
<button
onClick={() => setShowVerbosity(!showVerbosity)}
className="p-1.5 rounded-lg active:bg-white/[0.04]"
style={{ color: "var(--text-2)" }}
>
<Eye size={18} />
</button>
{showVerbosity && (
<div
className="absolute right-0 top-full mt-1 z-10 rounded-xl overflow-hidden"
style={{ background: "var(--bg-raised)", border: "1px solid var(--border)" }}
>
{VERBOSITY_OPTIONS.map((opt) => (
<button
key={opt.id}
onClick={() => { setVerbosity(opt.id); setShowVerbosity(false); }}
className="block w-full text-left px-4 py-2.5 text-[13px] transition-colors"
style={{
color: verbosity === opt.id ? "var(--accent)" : "var(--text-2)",
background: verbosity === opt.id ? "var(--accent-dim)" : "transparent",
}}
>
{opt.label}
</button>
))}
</div>
)}
</div>
</div>
{/* Message input */}
@@ -107,7 +155,7 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
</button>
</div>
{/* Messages - newest first */}
{/* Messages */}
{isLoading ? (
<div className="space-y-3">
{[...Array(4)].map((_, i) => (
@@ -119,7 +167,6 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
</div>
) : (
<div className="space-y-2">
{/* Pending thinking indicator */}
{sending && (
<div className="flex justify-start">
<div className="rounded-2xl px-3.5 py-2.5" style={{ background: "var(--bg-raised)" }}>
@@ -131,7 +178,6 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
</div>
)}
{/* Pending user message */}
{pendingMsg && (
<div className="flex justify-end">
<div className="max-w-[88%] rounded-2xl px-3.5 py-2.5 opacity-60" style={{ background: "var(--accent)", color: "white" }}>
@@ -141,7 +187,7 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
)}
{visibleMessages.map((m) => (
<MessageBubble key={m.id} message={m} toolResults={toolResults} />
<MessageBubble key={m.id} message={m} toolResults={toolResults} verbosity={verbosity} />
))}
{visibleMessages.length === 0 && !sending && (
<p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>
components/MessageBubble.tsx
+27 -10
View File
@@ -4,13 +4,16 @@ import { useState } from "react";
import { Wrench, ChevronDown, ChevronRight } from "lucide-react";
import type { Message, ToolCall } from "@/lib/types";
type Verbosity = "compact" | "normal" | "full";
interface Props {
message: Message;
toolResults: Map<string, { name: string; content: string }>;
verbosity?: Verbosity;
}
function ToolCallBlock({ tc, result }: { tc: ToolCall; result?: { name: string; content: string } }) {
const [open, setOpen] = useState(false);
function ToolCallBlock({ tc, result, showResult }: { tc: ToolCall; result?: { name: string; content: string }; showResult: boolean }) {
const [open, setOpen] = useState(showResult);
let args: Record<string, unknown> = {};
try { args = JSON.parse(tc.function.arguments); } catch {}
@@ -30,9 +33,9 @@ function ToolCallBlock({ tc, result }: { tc: ToolCall; result?: { name: string;
<pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto" style={{ color: "var(--text-3)" }}>
{JSON.stringify(args, null, 2)}
</pre>
{result && (
{showResult && result && (
<pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-32 overflow-y-auto" style={{ color: "var(--text-3)", opacity: 0.6 }}>
{result.content.slice(0, 500)}{result.content.length > 500 ? "..." : ""}
{result.content.slice(0, 1000)}{result.content.length > 1000 ? "..." : ""}
</pre>
)}
</div>
@@ -41,7 +44,7 @@ function ToolCallBlock({ tc, result }: { tc: ToolCall; result?: { name: string;
);
}
export function MessageBubble({ message, toolResults }: Props) {
export function MessageBubble({ message, toolResults, verbosity = "normal" }: Props) {
const isUser = message.role === "user";
const content = message.content || "";
@@ -52,6 +55,11 @@ export function MessageBubble({ message, toolResults }: Props) {
if (!content && toolCalls.length === 0) return null;
// Compact: no tool calls at all
const showTools = verbosity !== "compact" && toolCalls.length > 0;
// Full: expand tool calls and show results
const expandTools = verbosity === "full";
return (
<div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
<div
@@ -63,16 +71,25 @@ export function MessageBubble({ message, toolResults }: Props) {
>
{content && (
<p className="text-[14px] whitespace-pre-wrap leading-relaxed break-words">
{content}
{verbosity === "compact" && content.length > 300
? content.slice(0, 300) + "..."
: content}
</p>
)}
{toolCalls.length > 0 && (
{showTools && (
<div>
{toolCalls.length <= 3 ? (
{expandTools ? (
// Full: show all tool calls expanded with results
toolCalls.map((tc) => (
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={true} />
))
) : toolCalls.length <= 3 ? (
// Normal: collapsed tool calls, no results
toolCalls.map((tc) => (
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={false} />
))
) : (
// Normal with many tools: collapsed summary
<CollapsedTools toolCalls={toolCalls} toolResults={toolResults} />
)}
</div>
@@ -96,7 +113,7 @@ function CollapsedTools({ toolCalls, toolResults }: { toolCalls: ToolCall[]; too
{open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
</button>
{open && toolCalls.map((tc) => (
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={false} />
))}
</div>
);