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

@@ -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)" }}>