From 03d3b72f9b1059343fe3b7217d39952c1fc1a728 Mon Sep 17 00:00:00 2001
From: Hermes <hermes@chrissader.com>
Date: Thu, 9 Apr 2026 21:21:59 -0500
Subject: [PATCH] Session verbosity: compact/normal/full toggle

- 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
---
 app/history/[id]/page.tsx    | 68 ++++++++++++++++++++++++++++++------
 components/MessageBubble.tsx | 37 ++++++++++++++------
 2 files changed, 84 insertions(+), 21 deletions(-)

diff --git a/app/history/[id]/page.tsx b/app/history/[id]/page.tsx
index 73e931e..e292de6 100644
--- a/app/history/[id]/page.tsx
+++ b/app/history/[id]/page.tsx
@@ -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)" }}>
diff --git a/components/MessageBubble.tsx b/components/MessageBubble.tsx
index c40d772..d00af10 100644
--- a/components/MessageBubble.tsx
+++ b/components/MessageBubble.tsx
@@ -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>
   );